feat: new progress components (#80)

Author: Cahllagerfeld

.changeset/nervous-goats-tie.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add radial progress & progress bar

package.json

@@ -90,6 +90,7 @@
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
+		"@radix-ui/react-progress": "^1.0.3",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",
 		"@radix-ui/react-switch": "^1.0.3",

pnpm-lock.yaml

@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/react";
+import { ProgressBar } from "./index";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+
+const meta = {
+	title: "Elements/Progress/ProgressBar",
+	component: ProgressBar,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[400px] h-[200px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		className: "rounded-rounded",
+		value: 45
+	}
+};

src/components/Progress/ProgressBar.stories.tsx

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

src/components/Progress/ProgressBar.tsx

@@ -1,6 +1,7 @@
-import React, { HTMLAttributes } from "react";
-import { cn } from "../../utilities";
 import { cva, VariantProps } from "class-variance-authority";
+import React, { CSSProperties, HTMLAttributes } from "react";
+
+import { cn } from "../../utilities";
 
 export const progressTickCircleVariants = cva(
 	"shrink-0 flex items-center justify-center rounded-rounded border-success-300 bg-success-50",
@@ -64,3 +65,38 @@ export function ProgressOutstanding({
 }: HTMLAttributes<HTMLDivElement> & VariantProps<typeof progressOutstandingVariants>) {
 	return <div {...rest} className={cn(progressOutstandingVariants({ size }), className)}></div>;
 }
+
+type RadialProgressProps = {
+	value: number;
+	outerCirlcle?: number;
+	innerCircle?: number;
+};
+export function RadialProgress({
+	value,
+	outerCirlcle = 40,
+	innerCircle = 30,
+	children,
+	className,
+	...rest
+}: HTMLAttributes<HTMLDivElement> & RadialProgressProps) {
+	return (
+		<div
+			{...rest}
+			style={
+				{
+					"--value": `${value * 3.6}deg`,
+					"--outer-circle": `${outerCirlcle}px`,
+					"--inner-circle": `${innerCircle}px`
+				} as CSSProperties
+			}
+			className={cn(
+				"relative flex h-[var(--outer-circle)] w-[var(--outer-circle)] shrink-0 items-center justify-center rounded-rounded bg-[conic-gradient(hsl(var(--color-primary-400))_var(--value),hsl(var(--color-primary-050))_var(--value))] after:h-[var(--inner-circle)] after:w-[var(--inner-circle)] after:rounded-rounded after:bg-theme-surface-primary after:content-['']",
+				className
+			)}
+			aria-label="Radial Progress Bar"
+			role="progressbar"
+		>
+			{children}
+		</div>
+	);
+}

src/components/Progress/ProgressItems.tsx

@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/react";
+import { RadialProgress } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Progress/Radial Progress",
+	component: RadialProgress,
+
+	parameters: {
+		layout: "centered"
+	},
+	tags: ["autodocs"]
+} satisfies Meta<typeof RadialProgress>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		value: 45
+	}
+};

src/components/Progress/RadialProgress.stories.tsx

@@ -1 +1,2 @@
 export * from "./ProgressItems";
+export * from "./ProgressBar";