Skip to content

Commit

Permalink
feat: new progress components (#80)
Browse files Browse the repository at this point in the history
  • Loading branch information
Cahllagerfeld authored Apr 22, 2024
1 parent c1dde6b commit 4ce474a
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/nervous-goats-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@zenml-io/react-component-library": minor
---

add radial progress & progress bar
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
24 changes: 24 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 33 additions & 0 deletions src/components/Progress/ProgressBar.stories.tsx
Original file line number Diff line number Diff line change
@@ -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
}
};
22 changes: 22 additions & 0 deletions src/components/Progress/ProgressBar.tsx
Original file line number Diff line number Diff line change
@@ -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 };
40 changes: 38 additions & 2 deletions src/components/Progress/ProgressItems.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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>
);
}
24 changes: 24 additions & 0 deletions src/components/Progress/RadialProgress.stories.tsx
Original file line number Diff line number Diff line change
@@ -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
}
};
1 change: 1 addition & 0 deletions src/components/Progress/index.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from "./ProgressItems";
export * from "./ProgressBar";

0 comments on commit 4ce474a

Please sign in to comment.