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 '@storybook/blocks'
 
 import { ProgressTracker } from '.'
 
@@ -20,12 +20,15 @@ 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} />
 
-## Variants
+## Usage
+
+### Default
+
 <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>
+    <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,15 @@
 import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
 
-export type ProgressTrackerProps = ComponentPropsWithoutRef<'div'>
+export type ProgressTrackerProps = ComponentPropsWithoutRef<'div'> & { readOnly?: boolean }
 
 export const ProgressTracker = forwardRef<HTMLDivElement, PropsWithChildren<ProgressTrackerProps>>(
-  (props, ref) => {
-    return <div ref={ref} {...props} />
+  ({ children, ...props }, ref) => {
+    const Component = props.readOnly ? 'div' : 'nav'
+
+    return (
+      <Component ref={ref} {...props}>
+        <ol>{children}</ol>
+      </Component>
+    )
   }
 )

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

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+
+export type ProgressTrackerStepProps = ComponentPropsWithoutRef<'li'> & { label?: string }
+
+export const ProgressTrackerStep = forwardRef<HTMLLIElement, ProgressTrackerStepProps>(
+  ({ label, ...props }, ref) => {
+    return (
+      <li ref={ref} {...props}>
+        <button type="button">
+          <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 }