feat(progress): add first version of progress component

packages/components/progress/.npmignore

@@ -0,0 +1,2 @@
+src
+**/*.stories.*

packages/components/progress/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@spark-ui/progress",
+  "version": "0.0.0",
+  "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@radix-ui/react-progress": "1.0.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:adevinta/spark.git",
+    "directory": "packages/components/progress"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT"
+}

packages/components/progress/src/Progress.doc.mdx

@@ -0,0 +1,34 @@
+import { Meta, Canvas } from '@storybook/addon-docs'
+import { ArgTypes } from '@storybook/blocks'
+
+import { Progress } from '.'
+
+import * as stories from './Progress.stories'
+
+<Meta of={stories} />
+
+# Progress
+
+Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+
+## Install
+
+```sh
+npm install @spark-ui/progress
+```
+
+## Import
+
+```tsx
+import { Progress } from '@spark-ui/progress'
+```
+
+## Props
+
+<ArgTypes of={Progress} />
+
+## Usage
+
+### Default
+
+<Canvas of={stories.Default} />

packages/components/progress/src/Progress.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { Progress } from '.'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Experimental/Progress',
+  component: Progress,
+}
+
+export default meta
+
+export const Default: StoryFn = _args => <Progress />

packages/components/progress/src/Progress.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Progress } from './Progress'
+
+describe('Progress', () => {
+  it('should render', () => {
+    render(<Progress value={50} aria-label="Progress" />)
+
+    expect(screen.getByRole('progressbar', { name: 'Progress' })).toBeInTheDocument()
+  })
+})

packages/components/progress/src/Progress.tsx

@@ -0,0 +1,29 @@
+import {
+  Progress as ProgressPrimitive,
+  ProgressIndicator as ProgressPrimitiveIndicator,
+  ProgressProps as ProgressPrimitiveProps,
+} from '@radix-ui/react-progress'
+import { ElementRef, forwardRef, PropsWithChildren } from 'react'
+
+export type ProgressProps = ProgressPrimitiveProps
+
+export const Progress = forwardRef<
+  ElementRef<typeof ProgressPrimitive>,
+  PropsWithChildren<ProgressProps>
+>(({ value: valueProp, ...others }, ref) => {
+  const value = valueProp ?? 0
+
+  return (
+    <ProgressPrimitive
+      className="relative h-sz-4 w-full transform-gpu overflow-hidden rounded-sm bg-on-background/dim-4"
+      value={value}
+      ref={ref}
+      {...others}
+    >
+      <ProgressPrimitiveIndicator
+        className="h-full w-full bg-main"
+        style={{ transform: `translateX(-${100 - value}%)` }}
+      />
+    </ProgressPrimitive>
+  )
+})

packages/components/progress/src/index.ts

@@ -0,0 +1 @@
+export { Progress } from './Progress'

packages/components/progress/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

packages/components/progress/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(process.cwd(), name)