feat: add Progress component with styles and Storybook example

Author: nicosammito

src/components/progress/Progress.stories.tsx

@@ -0,0 +1,28 @@
+import {Meta} from "@storybook/react-vite";
+import {Progress} from "./Progress";
+import React from "react";
+import {Card} from "../card/Card";
+import {Spacing} from "../spacing/Spacing";
+import {Text} from "../text/Text";
+
+export default {
+    title: "Progress",
+    component: Progress,
+} as Meta
+
+export const ProgressExample = () => {
+    return <Card color={"secondary"} w={"300px"}>
+        <Progress value={50} predictionValue={75} max={100} color={"linear-gradient(to right, #29BF12 0%, #D90429 100%)"}/>
+        <Spacing spacing={"xs"}/>
+        <Text>
+            You used 50% of your available workflow executions and will used 75% until its reseted.
+        </Text>
+        <Spacing spacing={"xl"}/>
+        <Progress value={30} predictionValue={120} max={100} color={"linear-gradient(to right, #29BF12 0%, #D90429 100%)"}/>
+        <Spacing spacing={"xs"}/>
+        <Text>
+            You used 30% of your available workflow executions and will used 120% until its reseted.
+            You need to upgrade your plan to be able to execute workflows seamlessly.
+        </Text>
+    </Card>
+}

src/components/progress/Progress.style.scss

@@ -0,0 +1,70 @@
+@use "../../styles/helpers";
+@use "../../styles/box";
+@use "../../styles/variables";
+
+
+.progress {
+
+  & {
+    @include box.box(variables.$tertiary);
+    @include helpers.borderRadius();
+    width: 100%;
+    height: 10px;
+    position: relative;
+    transform: translateZ(0);
+  }
+
+  &__dot {
+    @include box.box(variables.$white);
+    background: helpers.backgroundColor(variables.$white, 2);
+    position: absolute;
+    max-width: 100%;
+    aspect-ratio: 1/1;
+    height: 200%;
+    z-index: 2;
+    top: 50%;
+    transform: translateX(50%) translateY(-50%);
+    border-radius: 50rem;
+    right: calc(100% - (1% * (var(--progress, 0))));
+    overflow: hidden;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border-radius: inherit;
+      width: 60%;
+      height: 60%;
+      transform: translate(-50%, -50%);
+      background: var(--color);
+      background-repeat: no-repeat;
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    background: var(--color);
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: calc(100% * (100 / var(--progress, 100))) 100%;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+    &--prediction {
+      background: repeating-linear-gradient(
+                      -45deg,
+                      rgba(0,0,0,.5),
+                      rgba(0,0,0,.5) 2.5px,
+                      transparent 2.5px,
+                      transparent 5px
+      ), var(--color);
+      z-index: 0;
+      opacity: 0.5;
+      background-position: left center;
+      background-repeat: no-repeat;
+      background-size: calc(100% * (100 / var(--progressPrediction, 100))) 100%;
+    }
+  }
+}

src/components/progress/Progress.tsx

@@ -0,0 +1,52 @@
+import {ComponentProps, mergeComponentProps} from "../../utils";
+import * as Radix from "@radix-ui/react-progress"
+import React, {CSSProperties} from "react";
+import "./Progress.style.scss"
+
+export type ProgressProps = ComponentProps & Radix.ProgressProps & {
+    color?: CSSProperties['background']
+    predictionValue?: number | null
+}
+
+export const Progress: React.FC<ProgressProps> = (props) => {
+
+    const {color = "white", predictionValue, ...rest} = props
+
+    const progress = ((Math.min(props.value ?? 0, props.max ?? 100)) / (props.max ?? 100)) * 100;
+    const transformValue = `translateX(-${100 - progress}%)`;
+
+    const progressPrediction = ((Math.min(props.predictionValue ?? 0, props.max ?? 100)) / (props.max ?? 100)) * 100;
+    const transformPredictionValue = `translateX(-${100 - progressPrediction}%)`;
+
+    return <Radix.Progress {...mergeComponentProps('progress', {
+        ...rest,
+        style: {
+            ...rest.style,
+            ['--progress' as any]: progress,
+            ['--progressPrediction' as any]: progressPrediction,
+            ['--color' as any]: color,
+        }
+    })}>
+
+        <div className={"progress__dot"}/>
+
+        <div style={{
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            borderRadius: "inherit",
+            position: "relative",
+        }}>
+            <Radix.ProgressIndicator
+                className="progress__indicator"
+                style={{
+                    transform: transformValue
+                }}/>
+            {typeof props.predictionValue === "number" && <Radix.ProgressIndicator
+                className="progress__indicator progress__indicator--prediction"
+                style={{
+                    transform: transformPredictionValue
+                }}/>}
+        </div>
+    </Radix.Progress>
+}