@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/StatCard/StatCard.types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export interface StatCardProps {
+  /** Short label above the value (for example from an API `title` or `status` field). */
+  label: ReactNode;
+  /** Optional helper note shown beside the label, useful for a longer API subtitle. */
+  infoNote?: string;
+  /** Primary metric (number or formatted string from an API). */
+  value: ReactNode;
+  /** Accent color for the icon (any valid CSS color string from an API). */
+  accentColor: string;
+  /** Optional background behind the icon tile (for example from an API card background). */
+  iconBackgroundColor?: string;
+  /** Icon rendered inside the leading tile (SVG, image, or component using `currentColor` where possible). */
+  icon: ReactNode;
+  /** Optional accessible name; when omitted, a default is derived when `label` and `value` are strings. */
+  ariaLabel?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}

package/src/components/StatusBadge/StatusBadge.stories.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { StatusBadge } from './StatusBadge';
+import type { StatusBadgeProps } from './StatusBadge.types';
+
+const HEX_COLORS = [
+  { hex: '#9CA3AF', label: 'Grey' },
+  { hex: '#F87171', label: 'Red' },
+  { hex: '#FBBF24', label: 'Orange' },
+  { hex: '#34D399', label: 'Green' },
+  { hex: '#22D3EE', label: 'Cyan' },
+  { hex: '#60A5FA', label: 'Blue' },
+  { hex: '#A78BFA', label: 'Purple' },
+  { hex: '#F472B6', label: 'Pink' },
+];
+
+const meta: Meta<typeof StatusBadge> = {
+  title: 'Design System/StatusBadge',
+  component: StatusBadge,
+  tags: [],
+  args: {
+    children: 'Badge',
+    color: '#34D399',
+    size: 'md',
+    variant: 'outline',
+    showDot: false,
+  } as StatusBadgeProps,
+  argTypes: {
+    color: {
+      control: { type: 'text' },
+      description: 'Any CSS hex color e.g. #34D399',
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['outline', 'filled'],
+      description: '"outline" = transparent background, "filled" = subtle tinted background',
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    showDot: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatusBadge>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Badge',
+    color: '#34D399',
+    size: 'md',
+    variant: 'outline',
+    showDot: false,
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '24px' }}>
+      {/* Outline variant */}
+      <Section label="Outline (default)">
+        <Row>
+          {HEX_COLORS.map(({ hex, label }) => (
+            <StatusBadge key={hex} color={hex} variant="outline">
+              {label}
+            </StatusBadge>
+          ))}
+        </Row>
+        <Row>
+          {HEX_COLORS.map(({ hex, label }) => (
+            <StatusBadge key={hex} color={hex} variant="outline" showDot>
+              {label}
+            </StatusBadge>
+          ))}
+        </Row>
+      </Section>
+
+      {/* Filled variant */}
+      <Section label="Filled">
+        <Row>
+          {HEX_COLORS.map(({ hex, label }) => (
+            <StatusBadge key={hex} color={hex} variant="filled">
+              {label}
+            </StatusBadge>
+          ))}
+        </Row>
+        <Row>
+          {HEX_COLORS.map(({ hex, label }) => (
+            <StatusBadge key={hex} color={hex} variant="filled" showDot>
+              {label}
+            </StatusBadge>
+          ))}
+        </Row>
+      </Section>
+
+      {/* Size variants */}
+      <Section label="Sizes">
+        <Row>
+          <StatusBadge color="#34D399" variant="outline" size="sm">
+            Small
+          </StatusBadge>
+          <StatusBadge color="#34D399" variant="outline" size="md">
+            Medium
+          </StatusBadge>
+          <StatusBadge color="#34D399" variant="outline" size="lg">
+            Large
+          </StatusBadge>
+        </Row>
+        <Row>
+          <StatusBadge color="#34D399" variant="filled" size="sm">
+            Small
+          </StatusBadge>
+          <StatusBadge color="#34D399" variant="filled" size="md">
+            Medium
+          </StatusBadge>
+          <StatusBadge color="#34D399" variant="filled" size="lg">
+            Large
+          </StatusBadge>
+        </Row>
+      </Section>
+
+      {/* Semantic usage */}
+      <Section label="Semantic Usage">
+        <Row>
+          <StatusBadge color="#34D399" variant="filled" showDot>
+            Active
+          </StatusBadge>
+          <StatusBadge color="#F87171" variant="filled" showDot>
+            Error
+          </StatusBadge>
+          <StatusBadge color="#FBBF24" variant="filled" showDot>
+            Pending
+          </StatusBadge>
+          <StatusBadge color="#60A5FA" variant="filled" showDot>
+            In Progress
+          </StatusBadge>
+          <StatusBadge color="#9CA3AF" variant="filled" showDot>
+            Inactive
+          </StatusBadge>
+        </Row>
+      </Section>
+    </div>
+  ),
+};
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <span
+        style={{
+          fontSize: '11px',
+          fontWeight: 600,
+          color: '#6B7280',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+        }}
+      >
+        {label}
+      </span>
+      {children}
+    </div>
+  );
+}
+
+function Row({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', alignItems: 'center' }}>
+      {children}
+    </div>
+  );
+}

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,74 @@
+import type { StatusBadgeProps } from './StatusBadge.types';
+
+const SIZE_STYLES = {
+  sm: { padding: '2px 8px', fontSize: '11px', borderRadius: '50px', dotSize: 5 },
+  md: { padding: '4px 10px', fontSize: '12px', borderRadius: '50px', dotSize: 6 },
+  lg: { padding: '6px 14px', fontSize: '14px', borderRadius: '50px', dotSize: 7 },
+};
+
+function hexToRgba(hex: string, alpha: number): string {
+  const clean = hex.replace('#', '');
+  const full =
+    clean.length === 3 ?
+      clean
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    : clean;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return `rgba(0,0,0,${alpha})`;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export const StatusBadge = ({
+  children,
+  color = '#9CA3AF',
+  size = 'md',
+  variant = 'outline',
+  showDot = false,
+  style,
+  className,
+}: StatusBadgeProps) => {
+  const sizeStyle = SIZE_STYLES[size];
+  const backgroundColor =
+    variant === 'filled' && color.startsWith('#') ? hexToRgba(color, 0.12) : 'transparent';
+
+  return (
+    <span
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: showDot ? 5 : 0,
+        boxSizing: 'border-box',
+        padding: sizeStyle.padding,
+        fontSize: sizeStyle.fontSize,
+        fontWeight: 500,
+        lineHeight: 1.5,
+        color,
+        backgroundColor,
+        border: `1px solid ${color}`,
+        borderRadius: sizeStyle.borderRadius,
+        whiteSpace: 'nowrap',
+        ...style,
+      }}
+    >
+      {showDot && (
+        <span
+          aria-hidden
+          style={{
+            display: 'inline-block',
+            width: sizeStyle.dotSize,
+            height: sizeStyle.dotSize,
+            borderRadius: '50%',
+            backgroundColor: color,
+            flexShrink: 0,
+          }}
+        />
+      )}
+      {children}
+    </span>
+  );
+};

package/src/components/StatusBadge/StatusBadge.types.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+
+export type StatusBadgeSize = 'sm' | 'md' | 'lg';
+
+/** "outline" = transparent background (default). "filled" = subtle tinted background. */
+export type StatusBadgeVariant = 'outline' | 'filled';
+
+export interface StatusBadgeProps {
+  /** Badge label */
+  children: React.ReactNode;
+  /** Any CSS hex color e.g. "#34D399" */
+  color?: string;
+  /** Size variant */
+  size?: StatusBadgeSize;
+  /** "outline" keeps the background transparent; "filled" adds a subtle tinted background */
+  variant?: StatusBadgeVariant;
+  /** Show a small dot indicator before the label */
+  showDot?: boolean;
+  /** Additional CSS styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class name */
+  className?: string;
+}

package/src/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stepper } from "./Stepper";
+
+const meta: Meta<typeof Stepper> = {
+  title: "Design System/Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", overflowX: "auto" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    steps: [
+      { value: "nationality", label: "Nationality" },
+      { value: "profile", label: "Profile" },
+      { value: "role", label: "Role" },
+      { value: "client", label: "Client" },
+      { value: "visa-docs", label: "Visa & Docs" },
+      { value: "preview", label: "Preview" },
+    ],
+    value: "profile",
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+
+export const Playground: Story = {};
+
+const InteractiveComponent = () => {
+  const [value, setValue] = React.useState("profile");
+  const [valueWithDisabledStep, setValueWithDisabledStep] = React.useState("profile");
+
+  return (
+    <>
+      <Stepper
+        steps={[
+          { value: "nationality", label: "Nationality" },
+          { value: "profile", label: "Profile" },
+          { value: "role", label: "Role" },
+          { value: "client", label: "Client" },
+          { value: "visa-docs", label: "Visa & Docs" },
+          { value: "preview", label: "Preview" },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+      <div style={{ height: 16 }} />
+      <Stepper
+        steps={[
+          { value: "nationality", label: "Nationality" },
+          { value: "profile", label: "Profile" },
+          { value: "role", label: "Role", disabled: true },
+          { value: "client", label: "Client" },
+          { value: "visa-docs", label: "Visa & Docs" },
+          { value: "preview", label: "Preview" },
+        ]}
+        value={valueWithDisabledStep}
+        onChange={setValueWithDisabledStep}
+      />
+      <div style={{ height: 16 }} />
+      <Stepper
+        steps={[
+          { value: "nationality", label: "Nationality" },
+          { value: "profile", label: "Profile" },
+          { value: "role", label: "Role" },
+          { value: "client", label: "Client" },
+          { value: "visa-docs", label: "Visa & Docs" },
+          { value: "preview", label: "Preview" },
+        ]}
+        value="profile"
+        disabled
+      />
+    </>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <InteractiveComponent />,
+};

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { getStepperTokensFromResolved } from "../../tokens";
+import type { StepperProps } from "./Stepper.types";
+
+export const Stepper = ({
+  steps,
+  value,
+  onChange,
+  disabled = false,
+  getStepDisabled,
+  style,
+  ...rest
+}: StepperProps) => {
+  const resolvedTokens = useTokens();
+  const t = getStepperTokensFromResolved(resolvedTokens);
+  const activeIndex = steps.findIndex((step) => step.value === value);
+  const isComponentDisabled = disabled === true;
+
+  return (
+    <div
+      role="list"
+      aria-label="Stepper"
+      aria-disabled={disabled}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: t.gap,
+        opacity: isComponentDisabled ? 0.5 : 1,
+        ...style,
+      }}
+      {...rest}
+    >
+      {steps.map((step, index) => {
+        const isCompleted = activeIndex > -1 && index < activeIndex;
+        const isActive = activeIndex > -1 && index === activeIndex;
+        // const isPending = !isCompleted && !isActive;
+        const isStepDisabled =
+          disabled || step.disabled === true || getStepDisabled?.(step, index) === true;
+        const isClickable = !!onChange && !isStepDisabled;
+
+        const indicatorBackground = isCompleted
+          ? t.indicator.completedBackground
+          : isActive
+            ? t.indicator.activeBackground
+            : t.indicator.pendingBackground;
+        const indicatorBorder = isCompleted
+          ? t.indicator.completedBorder
+          : isActive
+            ? t.indicator.activeBorder
+            : t.indicator.pendingBorder;
+        const indicatorColor = isCompleted
+          ? t.indicator.completedColor
+          : isActive
+            ? t.indicator.activeColor
+            : t.indicator.pendingColor;
+        const labelColor = isCompleted
+          ? t.label.completedColor
+          : isActive
+            ? t.label.activeColor
+            : t.label.pendingColor;
+
+        return (
+          <React.Fragment key={step.value}>
+            <button
+              type="button"
+              role="listitem"
+              aria-current={isActive ? "step" : undefined}
+              aria-label={step.label}
+              disabled={!isClickable}
+              onClick={() => {
+                if (isClickable) onChange(step.value);
+              }}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: t.stepGap,
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                margin: 0,
+                cursor: isStepDisabled ? "not-allowed" : isClickable ? "pointer" : "default",
+                opacity: isStepDisabled && !isComponentDisabled ? 0.5 : 1,
+              }}
+            >
+              <span
+                aria-hidden
+                style={{
+                  width: t.indicator.size,
+                  height: t.indicator.size,
+                  minWidth: t.indicator.size,
+                  borderRadius: "50%",
+                  border: `${t.indicator.borderWidth} solid ${indicatorBorder}`,
+                  backgroundColor: indicatorBackground,
+                  color: indicatorColor,
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontFamily: t.indicator.fontFamily,
+                  fontSize: t.indicator.fontSize,
+                  fontWeight: t.indicator.fontWeight,
+                  lineHeight: t.indicator.lineHeight,
+                  boxSizing: "border-box",
+                }}
+              >
+                {isCompleted ? "\u2713" : index + 1}
+              </span>
+              <span
+                style={{
+                  color: labelColor,
+                  fontFamily: t.label.fontFamily,
+                  fontSize: t.label.fontSize,
+                  fontWeight: t.label.fontWeight,
+                  lineHeight: t.label.lineHeight,
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {step.label}
+              </span>
+            </button>
+            {index < steps.length - 1 ? (
+              <span
+                aria-hidden
+                style={{
+                  width: t.line.width,
+                  height: t.line.height,
+                  backgroundColor: isCompleted ? t.line.completedBackground : t.line.pendingBackground,
+                  display: "inline-block",
+                  borderRadius: t.line.height,
+                }}
+              />
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Stepper/Stepper.types.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+
+export interface StepperStep {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface StepperProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+  steps: StepperStep[];
+  value: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  getStepDisabled?: (step: StepperStep, index: number) => boolean;
+}

package/src/components/SubTabs/SubTabs.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+import { SubTabs } from './SubTabs';
+import type { SubTabsOption, SubTabsProps } from './SubTabs.types';
+
+const defaultOptions: SubTabsOption[] = [
+  {
+    value: 'basic-info',
+    label: 'Basic Info',
+    icon: <AccountBalanceWalletIcon sx={{ fontSize: 16 }} />,
+  },
+  {
+    value: 'payment-mode',
+    label: 'Payment Mode',
+    icon: <CreditCardIcon sx={{ fontSize: 16 }} />,
+  },
+];
+
+const meta: Meta<typeof SubTabs> = {
+  title: 'Design System/SubTabs',
+  component: SubTabs,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: '24px',
+          maxWidth: '640px',
+          background: '#FFFFFF',
+          minHeight: '120px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    options: defaultOptions,
+    value: 'basic-info',
+    variant: 'pill',
+    color: 'green',
+    size: 'md',
+    disabled: false,
+  } as SubTabsProps,
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['pill', 'underline', 'outline'],
+    },
+    color: {
+      control: { type: 'radio' },
+      options: ['primary', 'green'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md'],
+    },
+    onChange: { action: 'changed' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SubTabs>;
+
+export const Playground: Story = {
+  render: function PlaygroundRender(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <SubTabs
+        {...args}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+      />
+    );
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div>
+        <p style={{ margin: '0 0 12px', fontSize: '12px', color: '#6B7280' }}>Pill · Green</p>
+        <SubTabs
+          options={defaultOptions}
+          value="basic-info"
+          onChange={() => {}}
+          variant="pill"
+          color="green"
+        />
+      </div>
+      <div>
+        <p style={{ margin: '0 0 12px', fontSize: '12px', color: '#6B7280' }}>Pill · Primary</p>
+        <SubTabs
+          options={defaultOptions}
+          value="payment-mode"
+          onChange={() => {}}
+          variant="pill"
+          color="primary"
+        />
+      </div>
+      <div>
+        <p style={{ margin: '0 0 12px', fontSize: '12px', color: '#6B7280' }}>Underline · Green</p>
+        <SubTabs
+          options={defaultOptions}
+          value="basic-info"
+          onChange={() => {}}
+          variant="underline"
+          color="green"
+        />
+      </div>
+      <div>
+        <p style={{ margin: '0 0 12px', fontSize: '12px', color: '#6B7280' }}>Outline · Primary</p>
+        <SubTabs
+          options={defaultOptions}
+          value="payment-mode"
+          onChange={() => {}}
+          variant="outline"
+          color="primary"
+        />
+      </div>
+    </div>
+  ),
+};