feat(progress-tracker): add base markup for progress-tracker

packages/components/progress-tracker/src/ProgressTracker.doc.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas } from '@storybook/addon-docs'
-import { ArgTypes } from '@storybook/blocks';
+import { ArgTypes } from '@docs/helpers/ArgTypes'
 
 import { ProgressTracker } from '.'
 
@@ -20,12 +20,24 @@ npm install @spark-ui/progress-tracker
 ## Import
 
 ```tsx
-import { ProgressTracker } from "@spark-ui/progress-tracker"
+import { ProgressTracker } from '@spark-ui/progress-tracker'
 ```
 
 ## Props
 
-<ArgTypes of={ProgressTracker} />
+<ArgTypes
+  of={ProgressTracker}
+  description="Contains all the progress tracker component parts."
+  subcomponents={{
+    'ProgressTracker.Step': {
+      of: ProgressTracker.Step,
+      description: 'Contains the button associated to a step',
+    },
+  }}
+/>
+
+## Usage
+
+### Default
 
-## Variants
 <Canvas of={stories.Default} />

packages/components/progress-tracker/src/ProgressTracker.stories.tsx

@@ -9,4 +9,10 @@ const meta: Meta<typeof ProgressTracker> = {
 
 export default meta
 
-export const Default: StoryFn = _args => <ProgressTracker>Hello World!</ProgressTracker>
+export const Default: StoryFn = _args => (
+  <ProgressTracker stepIndex={1} onStepClick={id => console.log('Clicked on', id)}>
+    <ProgressTracker.Step label="Etape 1" />
+    <ProgressTracker.Step label="Etape 2" />
+    <ProgressTracker.Step label="Etape 3" />
+  </ProgressTracker>
+)

packages/components/progress-tracker/src/ProgressTracker.tsx

@@ -1,9 +1,51 @@
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { type ComponentPropsWithoutRef, forwardRef, type PropsWithChildren, useState } from 'react'
 
-export type ProgressTrackerProps = ComponentPropsWithoutRef<'div'>
+import { ProgressTrackerContext } from './ProgressTrackerContext'
+
+export interface ProgressTrackerProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * The index of the current step.
+   * @default 0
+   */
+  stepIndex?: number
+  /**
+   * Event handler called when clicking on a step.
+   */
+  onStepClick?: (stepId: string) => void
+  /**
+   * Sets the component as interactive or not.
+   * @default false
+   */
+  readOnly?: boolean
+}
 
 export const ProgressTracker = forwardRef<HTMLDivElement, PropsWithChildren<ProgressTrackerProps>>(
-  (props, ref) => {
-    return <div ref={ref} {...props} />
+  (
+    {
+      stepIndex: propStepIndex = 0,
+      onStepClick: onStepClickProp,
+      readOnly = false,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [steps, setSteps] = useState<Set<string>>(new Set())
+    const [stepIndex, setStepIndex] = useState<number>(propStepIndex)
+
+    const onStepClick = (stepId: string) => {
+      setStepIndex([...steps].indexOf(stepId))
+      onStepClickProp?.(stepId)
+    }
+
+    const Component = readOnly ? 'div' : 'nav'
+
+    return (
+      <ProgressTrackerContext.Provider value={{ stepIndex, onStepClick, steps, setSteps }}>
+        <Component ref={ref} {...rest}>
+          <ol>{children}</ol>
+        </Component>
+      </ProgressTrackerContext.Provider>
+    )
   }
 )

packages/components/progress-tracker/src/ProgressTrackerContext.ts

@@ -0,0 +1,16 @@
+import { createContext, type Dispatch, type SetStateAction, useContext } from 'react'
+
+import type { ProgressTrackerProps } from './ProgressTracker'
+
+export type ProgressTrackerContextInterface = Required<
+  Pick<ProgressTrackerProps, 'stepIndex' | 'onStepClick'>
+> & {
+  steps: Set<string>
+  setSteps: Dispatch<SetStateAction<Set<string>>>
+}
+
+export const ProgressTrackerContext = createContext<ProgressTrackerContextInterface>(
+  {} as ProgressTrackerContextInterface
+)
+
+export const useProgressTrackerContext = () => useContext(ProgressTrackerContext)

packages/components/progress-tracker/src/ProgressTrackerStep.styles.ts

@@ -0,0 +1,20 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const progressTrackerStepVariants = cva(['inline-flex', 'bg-main'], {
+  variants: {
+    active: {
+      true: 'bg-success',
+      false: '',
+    },
+    disabled: {
+      true: 'bg-info',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    active: false,
+    disabled: false,
+  },
+})
+
+export type ProgressTrackerStepVariantsProps = VariantProps<typeof progressTrackerStepVariants>

packages/components/progress-tracker/src/ProgressTrackerStep.tsx

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithoutRef, forwardRef, useEffect, useId, useState } from 'react'
+
+import { useProgressTrackerContext } from './ProgressTrackerContext'
+import { progressTrackerStepVariants } from './ProgressTrackerStep.styles'
+
+export type ProgressTrackerStepProps = ComponentPropsWithoutRef<'li'> & {
+  label?: string
+}
+
+export const ProgressTrackerStep = forwardRef<HTMLLIElement, ProgressTrackerStepProps>(
+  ({ label, className, ...rest }, ref) => {
+    const { stepIndex: activeStepIndex, steps, onStepClick, setSteps } = useProgressTrackerContext()
+
+    const ID = useId()
+    const stepId = `step-${ID}`
+
+    const [isActive, setIsActive] = useState(false)
+
+    useEffect(() => setSteps(steps => steps.add(stepId)), [])
+
+    useEffect(
+      () => setIsActive([...steps].indexOf(stepId) === activeStepIndex),
+      [activeStepIndex, steps, stepId]
+    )
+
+    return (
+      <li
+        id={stepId}
+        ref={ref}
+        className={progressTrackerStepVariants({ active: isActive, className })}
+        {...rest}
+      >
+        <button type="button" onClick={() => onStepClick(stepId)}>
+          <span>{label}</span>
+        </button>
+      </li>
+    )
+  }
+)

packages/components/progress-tracker/src/index.ts

@@ -1 +1,15 @@
-export { ProgressTracker } from './ProgressTracker'
+import type { FC } from 'react'
+
+import { ProgressTracker as Root, type ProgressTrackerProps } from './ProgressTracker'
+import { ProgressTrackerStep as Step, type ProgressTrackerStepProps } from './ProgressTrackerStep'
+
+export const ProgressTracker: FC<ProgressTrackerProps> & {
+  Step: typeof Step
+} = Object.assign(Root, {
+  Step,
+})
+
+ProgressTracker.displayName = 'ProgressTracker'
+Step.displayName = 'ProgressTracker.Step'
+
+export type { ProgressTrackerProps, ProgressTrackerStepProps }