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 azdazjodzaijdpzao jdaezpiod eza" />
+  </ProgressTracker>
+)

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

@@ -1,9 +1,55 @@
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { cx } from 'class-variance-authority'
+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,
+      className,
+      ...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} className={cx('inline-flex', className)} {...rest}>
+          <ol className="flex w-full flex-nowrap" style={{ counterReset: 'step' }}>
+            {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,46 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const stepWrapperVariant = cva([
+  'relative inline-flex flex-auto first:grow-0 justify-center',
+  'pt-[calc(32px+theme("spacing.md"))]',
+  // Progress Track
+  'before:absolute after:absolute before:z-base after:z-base',
+  'before:top-[16px] after:top-[16px]',
+  'before:h-[1px] after:h-[1px]',
+  'before:bg-basic after:bg-basic',
+  'before:left-none before:right-[calc(50%+20px)] ',
+  'after:left-[calc(50%+20px)] after:right-none',
+  'first:before:content-none last:after:content-none',
+])
+
+export const stepButtonVariant = cva(
+  [
+    'block mx-sm mb-auto',
+    'border-x-sm border-x-transparent',
+    // Progress Indicator
+    'before:[counter-increment:step] before:content-[counter(step)]',
+    'before:absolute before:z-raised before:top-none before:left-[calc(50%-16px)]',
+    'before:flex before:items-center before:justify-center before:content-["X"] before:w-[32px] before:h-[32px] before:rounded-full',
+    'before:border-sm before:text-on-basic-container',
+    'before:text-body-2 before:font-bold',
+    'hover:before:bg-basic/dim-5',
+  ],
+  {
+    variants: {
+      active: {
+        true: 'before:bg-basic-container',
+        false: '',
+      },
+      disabled: {
+        true: 'opacity-dim-3',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      active: false,
+      disabled: false,
+    },
+  }
+)
+
+export type ProgressTrackerStepVariantsProps = VariantProps<typeof stepButtonVariant>

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

@@ -0,0 +1,38 @@
+import { type ComponentPropsWithoutRef, forwardRef, useEffect, useId, useState } from 'react'
+
+import { useProgressTrackerContext } from './ProgressTrackerContext'
+import { stepButtonVariant, stepWrapperVariant } 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} {...rest} className={stepWrapperVariant()}>
+        <button
+          type="button"
+          onClick={() => onStepClick(stepId)}
+          className={stepButtonVariant({ active: isActive, className })}
+        >
+          {label && <span className="block text-body-2 font-bold text-on-surface">{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 }