feat: progress bar component

.changeset/three-houses-deny.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+Progress component added

apps/ui/lib/components/Progress/Progress.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '@utils/utils';
+
+const Progress = React.forwardRef<
+ React.ElementRef<typeof ProgressPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+ <ProgressPrimitive.Root
+ ref={ref}
+ className={cn(
+ 'relative h-4 w-full overflow-hidden rounded-full bg-primary-100 bg-opacity-50',
+ className
+ )}
+ {...props}
+ >
+ <ProgressPrimitive.Indicator
+ className="h-full w-full flex-1 bg-primary-500 transition-all"
+ style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+ />
+ </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

apps/ui/lib/components/Progress/index.tsx

@@ -0,0 +1 @@
+export * from './Progress';

apps/ui/lib/index.tsx

@@ -11,3 +11,4 @@ export * from './components/Accordion';
 export * from './components/Navigation-menu';
 export * from './components/Switch';
 export * from './components/Toast';
+export * from './components/Progress';

apps/ui/stories/Progress.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Progress, Text } from '../lib';
+
+const DefaultTemplate = ({ value = 40 }) => {
+ return (
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'start',
+ flexDirection: 'column',
+ justifyItems: 'start',
+ gap: '1rem',
+ }}
+ >
+ <Text variant="heading-4">{value}% complete</Text>
+ <Progress value={value} />
+ </div>
+ );
+};
+
+export default {
+ title: 'components/Progress',
+ component: DefaultTemplate,
+} as Meta;
+
+export const Default = () => {
+ return <DefaultTemplate />;
+};