@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,91 @@
+import { ProgressProps } from "./Progress.types";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { getProgressTokensFromResolved } from "../../tokens";
+
+export const Progress = ({
+  color,
+  className = "",
+  variant = "determinate",
+  value = 0,
+}: ProgressProps) => {
+  const resolvedTokens = useTokens();
+  const tokens = getProgressTokensFromResolved(resolvedTokens);
+
+  const trackColor = tokens.trackBackground;
+  const barColor = color ?? tokens.barBackground;
+  const height = tokens.height;
+  const borderRadius = tokens.borderRadius;
+
+  const isIndeterminate = variant === "indeterminate";
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+      }}
+    >
+      <style>
+        {`
+          @keyframes progress-indeterminate-1 {
+            0% { left: -35%; width: 33%; }
+            60% { left: 100%; width: 45%; }
+            100% { left: 100%; width: 45%; }
+          }
+          @keyframes progress-indeterminate-2 {
+            0% { left: -100%; width: 90%; }
+            60% { left: 107%; width: 10%; }
+            100% { left: 107%; width: 10%; }
+          }
+        `}
+      </style>
+      <div
+        style={{
+          height: height,
+          borderRadius: borderRadius,
+          width: "100%",
+          backgroundColor: trackColor,
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {!isIndeterminate ? (
+          <div
+            style={{
+              height: "100%",
+              borderRadius: borderRadius,
+              backgroundColor: barColor,
+              width: `${Math.min(Math.max(value, 0), 100)}%`,
+              transition: "width 0.4s ease",
+            }}
+          />
+        ) : (
+          <>
+            <div
+              style={{
+                height: "100%",
+                borderRadius: borderRadius,
+                backgroundColor: barColor,
+                position: "absolute",
+                animation:
+                  "progress-indeterminate-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite",
+              }}
+            />
+            <div
+              style={{
+                height: "100%",
+                borderRadius: borderRadius,
+                backgroundColor: barColor,
+                position: "absolute",
+                animation:
+                  "progress-indeterminate-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite",
+              }}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Progress/Progress.types.ts

@@ -0,0 +1,22 @@
+export type ProgressVariant = "determinate" | "indeterminate";
+
+export interface ProgressProps {
+  /**
+   * The value of the progress bar (0-100).
+   * Only used for the 'determinate' variant.
+   */
+  value?: number;
+  /**
+   * Custom color for the progress bar.
+   */
+  color?: string;
+  /**
+   * The variant of the progress bar.
+   * @default "determinate"
+   */
+  variant?: ProgressVariant;
+  /**
+   * Additional CSS class name.
+   */
+  className?: string;
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,332 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioButton, RadioButtonGroup } from "./RadioButton";
+
+const meta: Meta<typeof RadioButtonGroup> = {
+  title: "Design System/RadioButton",
+  component: RadioButtonGroup,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "600px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: "Heading",
+    options: [
+      { label: "Male", value: "male" },
+      { label: "Female", value: "female" },
+    ],
+    direction: "horizontal",
+    size: "md",
+    disabled: false,
+  } as any,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "The heading/label displayed above the radio button group",
+    },
+    helperText: {
+      control: { type: "text" },
+      description: "Helper or error text displayed below the group",
+    },
+    error: {
+      control: { type: "boolean" },
+      description: "Shows error state (red border, helper text in error color)",
+    },
+    direction: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      description: "Layout direction of the radio buttons",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size variant: sm, md, or lg",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable all radio buttons in the group",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioButtonGroup>;
+
+export const Playground: Story = {
+  args: {
+    label: "Heading",
+    options: [
+      { label: "Male", value: "male" },
+      { label: "Female", value: "female" },
+    ],
+    direction: "horizontal",
+    size: "md",
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+      {/* Basic Horizontal Radio Button Group */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Basic Radio Buttons (Horizontal)
+        </h3>
+        <RadioButtonGroup
+          label="Heading"
+          options={[
+            { label: "Male", value: "male" },
+            { label: "Female", value: "female" },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Basic Vertical Radio Button Group */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Basic Radio Buttons (Vertical)
+        </h3>
+        <RadioButtonGroup
+          label="Heading"
+          options={[
+            { label: "Option 1", value: "option1" },
+            { label: "Option 2", value: "option2" },
+            { label: "Option 3", value: "option3" },
+          ]}
+          direction="vertical"
+        />
+      </div>
+
+      {/* Radio Button Group with Default Selection */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          With Default Selection
+        </h3>
+        <RadioButtonGroup
+          label="Gender"
+          options={[
+            { label: "Male", value: "male" },
+            { label: "Female", value: "female" },
+            { label: "Other", value: "other" },
+          ]}
+          defaultValue="female"
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Disabled Radio Button Group */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Disabled Radio Buttons
+        </h3>
+        <RadioButtonGroup
+          label="Heading"
+          options={[
+            { label: "Male", value: "male" },
+            { label: "Female", value: "female" },
+          ]}
+          disabled
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Radio Button Group with Individual Disabled Options */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          With Individual Disabled Options
+        </h3>
+        <RadioButtonGroup
+          label="Payment Method"
+          options={[
+            { label: "Credit Card", value: "credit" },
+            { label: "Debit Card", value: "debit", disabled: true },
+            { label: "PayPal", value: "paypal" },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Individual Radio Button Example */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Individual Radio Buttons
+        </h3>
+        <div style={{ display: "flex", gap: "24px" }}>
+          <RadioButton label="Selected" value="selected" checked name="individual" />
+          <RadioButton label="Unselected" value="unselected" name="individual" />
+        </div>
+      </div>
+
+      {/* Individual Radio Button with Description */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Individual Radio Buttons with Description
+        </h3>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          <RadioButton
+            label="Premium Plan"
+            description="Best for businesses with high traffic and advanced features"
+            value="premium"
+            checked
+            name="plans"
+          />
+          <RadioButton
+            label="Basic Plan"
+            description="Perfect for small businesses getting started"
+            value="basic"
+            name="plans"
+          />
+        </div>
+      </div>
+
+      {/* Radio Button Group with Descriptions */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Radio Button Group with Descriptions
+        </h3>
+        <RadioButtonGroup
+          label="Select a Plan"
+          options={[
+            {
+              label: "Premium Plan",
+              value: "premium",
+              description: "Best for businesses with high traffic and advanced features",
+            },
+            {
+              label: "Basic Plan",
+              value: "basic",
+              description: "Perfect for small businesses getting started",
+            },
+            {
+              label: "Enterprise Plan",
+              value: "enterprise",
+              description: "Custom solutions for large organizations",
+            },
+          ]}
+          direction="vertical"
+        />
+      </div>
+
+      {/* Radio Button Group with Descriptions (Horizontal) */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Radio Button Group with Descriptions (Horizontal)
+        </h3>
+        <RadioButtonGroup
+          label="Payment Frequency"
+          options={[
+            {
+              label: "Monthly",
+              value: "monthly",
+              description: "Pay $29/month",
+            },
+            {
+              label: "Yearly",
+              value: "yearly",
+              description: "Pay $290/year (Save 17%)",
+            },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Without Label */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Without Heading Label
+        </h3>
+        <RadioButtonGroup
+          options={[
+            { label: "Option A", value: "a" },
+            { label: "Option B", value: "b" },
+            { label: "Option C", value: "c" },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Helper Text */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          With Helper Text
+        </h3>
+        <RadioButtonGroup
+          label="Select your preference"
+          helperText="Choose the option that best fits your needs"
+          options={[
+            { label: "Option A", value: "a" },
+            { label: "Option B", value: "b" },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Error State */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Error State
+        </h3>
+        <RadioButtonGroup
+          label="Select your preference"
+          helperText="Please select an option to continue"
+          error
+          options={[
+            { label: "Option A", value: "a" },
+            { label: "Option B", value: "b" },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Size variants: sm, md, lg */}
+      <div>
+        <h3 style={{ fontSize: "18px", fontWeight: "bold", marginBottom: "16px" }}>
+          Size Variants (sm, md, lg)
+        </h3>
+        <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+          <div>
+            <h4 style={{ fontSize: "14px", fontWeight: 600, marginBottom: "8px" }}>Small (sm)</h4>
+            <RadioButtonGroup
+              label="Choose one"
+              options={[
+                { label: "Option 1", value: "1" },
+                { label: "Option 2", value: "2" },
+              ]}
+              size="sm"
+              direction="horizontal"
+            />
+          </div>
+          <div>
+            <h4 style={{ fontSize: "14px", fontWeight: 600, marginBottom: "8px" }}>Medium (md)</h4>
+            <RadioButtonGroup
+              label="Choose one"
+              options={[
+                { label: "Option 1", value: "1" },
+                { label: "Option 2", value: "2" },
+              ]}
+              size="md"
+              direction="horizontal"
+            />
+          </div>
+          <div>
+            <h4 style={{ fontSize: "14px", fontWeight: 600, marginBottom: "8px" }}>Large (lg)</h4>
+            <RadioButtonGroup
+              label="Choose one"
+              options={[
+                { label: "Option 1", value: "1" },
+                { label: "Option 2", value: "2" },
+              ]}
+              size="lg"
+              direction="horizontal"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};