@altruist03/ui 0.1.0 → 0.2.0

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,217 @@
+import React, { useCallback, useState } from "react";
+import {
+  getSwitchTokensFromResolved,
+  getTextFieldTokensFromResolved,
+} from "../../tokens";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import type { SwitchProps } from "./Switch.types";
+
+function parsePx(value: string): number {
+  const num = parseInt(String(value).replace(/px$/i, ""), 10);
+  return Number.isFinite(num) ? num : 0;
+}
+
+export const Switch = ({
+  label,
+  caption,
+  helperText,
+  required,
+  checked,
+  defaultChecked = false,
+  onChange,
+  disabled = false,
+  size = "md",
+  style,
+  direction = "row",
+  id,
+  "aria-label": ariaLabel = "Toggle",
+  ...rest
+}: SwitchProps) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? checked : internalChecked;
+
+  const resolvedTokens = useTokens();
+  const t = getSwitchTokensFromResolved(resolvedTokens);
+  const sizeTokens =
+    size === "lg"
+      ? {
+          width: t.sizeLgWidth,
+          height: t.sizeLgHeight,
+          thumbSize: t.sizeLgThumbSize,
+          trackPadding: t.sizeLgTrackPadding,
+          radius: t.sizeLgRadius,
+          borderWidth: t.sizeLgBorderWidth,
+        }
+      : size === "sm"
+        ? {
+            width: t.sizeSmWidth,
+            height: t.sizeSmHeight,
+            thumbSize: t.sizeSmThumbSize,
+            trackPadding: t.sizeSmTrackPadding,
+            radius: t.sizeSmRadius,
+            borderWidth: t.sizeSmBorderWidth,
+          }
+        : {
+            width: t.sizeMdWidth,
+            height: t.sizeMdHeight,
+            thumbSize: t.sizeMdThumbSize,
+            trackPadding: t.sizeMdTrackPadding,
+            radius: t.sizeMdRadius,
+            borderWidth: t.sizeMdBorderWidth,
+          };
+
+  const width = parsePx(sizeTokens.width);
+  const thumbSize = parsePx(sizeTokens.thumbSize);
+  const padding = parsePx(sizeTokens.trackPadding);
+
+  const translateX = isChecked
+    ? Math.max(0, width - thumbSize - padding * 2)
+    : 0;
+
+  const trackStyle: React.CSSProperties = {
+    position: "relative",
+    width: sizeTokens.width,
+    height: sizeTokens.height,
+    borderRadius: sizeTokens.radius,
+    border: `${sizeTokens.borderWidth} solid ${
+      isChecked ? t.trackBorderActive : t.trackBorder
+    }`,
+    backgroundColor: isChecked ? t.trackBackgroundActive : t.trackBackground,
+    boxSizing: "border-box",
+    transition: "background-color 0.2s ease, border-color 0.2s ease",
+  };
+
+  const thumbStyle: React.CSSProperties = {
+    position: "absolute",
+    top: "50%",
+    left: padding,
+    width: sizeTokens.thumbSize,
+    height: sizeTokens.thumbSize,
+    borderRadius: sizeTokens.radius,
+    backgroundColor: isChecked ? t.thumbBackgroundActive : t.thumbBackground,
+    transform: `translate(${translateX}px, -50%)`,
+    transition: "transform 0.2s ease, background-color 0.2s ease",
+  };
+
+  const handleToggle = useCallback(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) setInternalChecked(next);
+    onChange?.(next);
+  }, [disabled, isChecked, isControlled, onChange]);
+
+  const tfTokens = getTextFieldTokensFromResolved(resolvedTokens);
+
+  const labelStyle: React.CSSProperties = {
+    display: "block",
+    marginBottom: parseInt(String(t.labelMarginBottom), 10),
+    fontSize: t.labelFontSize,
+    fontWeight: t.labelFontWeight,
+    color: t.labelColor,
+    fontFamily: t.labelFontFamily,
+  };
+
+  const captionStyle: React.CSSProperties = {
+    marginTop: 2,
+    fontSize: t.captionFontSize,
+    color: t.captionTextColor ?? t.labelColor,
+    fontFamily: t.labelFontFamily,
+    fontWeight: 400,
+  };
+
+  const helperTextStyle: React.CSSProperties = {
+    marginTop: 4,
+    fontSize: t.switchHelperTextFontSize,
+    color: t.switchHelperTextColor,
+    fontFamily: tfTokens.fontFamily,
+    width: "max-content",
+  };
+
+  const switchComponent = (
+    <button
+      type="button"
+      id={id}
+      role="switch"
+      aria-checked={!!isChecked}
+      aria-label={label && typeof label === "string" ? label : ariaLabel}
+      disabled={disabled}
+      onClick={handleToggle}
+      style={{
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        outline: "none",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: disabled ? 0.6 : 1,
+        ...style,
+      }}
+      {...rest}
+    >
+      <span style={trackStyle}>
+        <span style={thumbStyle} />
+      </span>
+    </button>
+  );
+
+  if (label || helperText) {
+    const isColumn = direction === "column" || direction === "column-reverse";
+    return (
+      <div
+        style={{
+          width: label ? "100%" : "fit-content",
+          display: "flex",
+          flexDirection: direction,
+          alignItems: isColumn ? "flex-start" : "center",
+          gap: 16,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: direction,
+            alignItems: isColumn ? "flex-start" : "center",
+            gap: 24,
+            justifyContent:
+              direction === "row"
+                ? "space-between"
+                : direction === "row-reverse"
+                  ? "flex-end"
+                  : label
+                    ? "space-between"
+                    : "flex-start",
+            width: label ? "100%" : "fit-content",
+          }}
+        >
+          {label && (
+            <div className="d-flex flex-column">
+              <label htmlFor={id} style={labelStyle} className="m-0">
+                {required && (
+                  <span
+                    style={{
+                      color: "#c00",
+                      marginRight: 4,
+                    }}
+                  >
+                    *
+                  </span>
+                )}
+                <span>{label}</span>
+                {caption && <div style={captionStyle}>{caption}</div>}
+              </label>
+              <span style={{ width: "max-content" }}>
+                {helperText && <div style={helperTextStyle}>{helperText}</div>}
+              </span>
+            </div>
+          )}
+          {switchComponent}
+        </div>
+      </div>
+    );
+  }
+
+  return switchComponent;
+};

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,22 @@
+export type SwitchSize = "sm" | "md" | "lg";
+
+export interface SwitchProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
+  label?: React.ReactNode;
+  caption?: React.ReactNode;
+  helperText?: React.ReactNode;
+  required?: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: SwitchSize;
+  /**
+   * Layout direction for label + switch container.
+   * Controls flex-direction of the main content wrapper.
+   * Defaults to "row".
+   */
+  direction?: "row" | "row-reverse" | "column" | "column-reverse";
+}

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Tabs } from "./Tabs";
+import type { TabsProps, TabsOption } from "./Tabs.types";
+
+const defaultOptions: TabsOption[] = [
+  { value: "pending", label: "Pending", count: 0 },
+  { value: "approved", label: "Approved", count: 2 },
+  { value: "rejected", label: "Rejected", count: 0 },
+  { value: "expired", label: "Expired", count: 0 },
+];
+
+const meta: Meta<typeof Tabs> = {
+  title: "Design System/Tabs",
+  component: Tabs,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: "24px",
+          maxWidth: "420px",
+          background: "#F3F5F6",
+          minHeight: "120px",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    options: defaultOptions,
+    value: "pending",
+    disabled: false,
+    loading: false,
+    color: "grey",
+  } as TabsProps,
+  argTypes: {
+    color: {
+      control: { type: "radio" },
+      options: ["grey", "white"],
+    },
+    value: {
+      control: { type: "radio" },
+      options: ["pending", "approved", "rejected", "expired"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    loading: {
+      control: { type: "boolean" },
+    },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Playground: Story = {
+  args: {
+    options: defaultOptions,
+    value: "pending",
+  },
+  render: function PlaygroundRender(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <Tabs
+        {...args}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+      />
+    );
+  },
+};
+
+const optionsWithOneDisabled: TabsOption[] = [
+  { value: "pending", label: "Pending", count: 0 },
+  { value: "approved", label: "Approved", count: 2, disabled: true },
+  { value: "rejected", label: "Rejected", count: 0 },
+  { value: "expired", label: "Expired", count: 0 },
+];
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {/* With counts – first tab selected */}
+      <Tabs
+        options={[
+          { value: "pending", label: "Pending", count: 0 },
+          { value: "approved", label: "Approved", count: 2 },
+          { value: "rejected", label: "Rejected", count: 0 },
+          { value: "expired", label: "Expired", count: 0 },
+        ]}
+        value="pending"
+        onChange={() => {}}
+      />
+
+      {/* With counts – second tab selected */}
+      <Tabs
+        options={[
+          { value: "pending", label: "Pending", count: 0 },
+          { value: "approved", label: "Approved", count: 2 },
+          { value: "rejected", label: "Rejected", count: 0 },
+          { value: "expired", label: "Expired", count: 0 },
+        ]}
+        value="approved"
+        onChange={() => {}}
+      />
+
+      {/* Add Contact / View Contact – Add selected */}
+      <Tabs
+        options={[
+          { value: "add", label: "Add Contact" },
+          { value: "view", label: "View Contact" },
+        ]}
+        value="add"
+        onChange={() => {}}
+      />
+
+      {/* Add Contact / View Contact – View selected */}
+      <Tabs
+        options={[
+          { value: "add", label: "Add Contact" },
+          { value: "view", label: "View Contact" },
+        ]}
+        value="view"
+        onChange={() => {}}
+      />
+
+      {/* Without counts – three tabs */}
+      <Tabs
+        options={[
+          { value: "all", label: "All" },
+          { value: "active", label: "Active" },
+          { value: "archived", label: "Archived" },
+        ]}
+        value="active"
+        onChange={() => {}}
+      />
+
+      {/* One tab disabled */}
+      <Tabs
+        options={optionsWithOneDisabled}
+        value="pending"
+        onChange={() => {}}
+      />
+
+      {/* All disabled */}
+      <Tabs
+        options={defaultOptions}
+        value="pending"
+        disabled
+        onChange={() => {}}
+      />
+
+      {/* Loading */}
+      <Tabs
+        options={defaultOptions}
+        value="approved"
+        loading
+        onChange={() => {}}
+      />
+
+      {/* Color: white */}
+      <Tabs
+        options={defaultOptions}
+        value="pending"
+        onChange={() => {}}
+        color="white"
+      />
+    </div>
+  ),
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,197 @@
+import { getTabsTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import type { TabsProps } from './Tabs.types';
+
+function toColor(value: string | undefined, fallback: string): string {
+  if (!value || typeof value !== 'string') return fallback;
+  const s = value.trim();
+  if (s.includes('{')) return fallback;
+  if (s.startsWith('#') || s.startsWith('rgb') || s.startsWith('hsl')) return s;
+  if (/^[0-9A-Fa-f]{6}$/.test(s)) return `#${s}`;
+  return fallback;
+}
+
+const skeletonKeyframes = `
+  @keyframes tabs-skeleton-shimmer {
+    0% { opacity: 0.4; }
+    50% { opacity: 0.8; }
+    100% { opacity: 0.4; }
+  }
+`;
+
+function TabsSkeleton({
+  optionCount,
+  containerBg,
+  gap,
+  paddingY,
+  containerBorderRadius,
+  paddingX,
+  borderRadius,
+  height,
+}: {
+  optionCount: number;
+  containerBg: string;
+  gap: string;
+  paddingY: string;
+  containerBorderRadius: string;
+  paddingX: string;
+  borderRadius: string;
+  height: string;
+}) {
+  return (
+    <>
+      <style>{skeletonKeyframes}</style>
+      <div
+        role="status"
+        aria-label="Loading tabs"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap,
+          padding: paddingY,
+          borderRadius: containerBorderRadius,
+          backgroundColor: containerBg,
+        }}
+      >
+        {Array.from({ length: optionCount }, (_, i) => (
+          <div
+            key={i}
+            style={{
+              height,
+              minWidth: '64px',
+              paddingLeft: paddingX,
+              paddingRight: paddingX,
+              borderRadius,
+              backgroundColor: '#E5E7EB',
+              animation: 'tabs-skeleton-shimmer 1.5s ease-in-out infinite',
+            }}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
+
+export const Tabs = ({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  getOptionDisabled,
+  loading = false,
+  size = 'md',
+  color = 'grey',
+  style,
+  ...rest
+}: TabsProps) => {
+  const resolvedTokens = useTokens();
+  const { tokens: t, sizes } = getTabsTokensFromResolved(resolvedTokens);
+  const sizeTokens = sizes[size];
+  const activeBg = toColor(t?.activeBackground, '#00545e');
+  const activeTextColor = activeBg;
+  const inactiveTextColor = toColor(t?.inactiveColor, '#56636a');
+  const containerBg = toColor(
+    color === 'white' ? t?.containerBackgroundWhite : t?.containerBackground,
+    '#F3F5F6'
+  );
+  const inactiveBg = toColor(
+    color === 'white' ? t?.inactiveBackgroundWhite : t?.inactiveBackground,
+    '#EEF1F2'
+  );
+  const fontWeight = sizeTokens.fontWeight;
+
+  if (loading) {
+    return (
+      <div style={style} {...rest}>
+        <TabsSkeleton
+          optionCount={options.length}
+          containerBg={containerBg}
+          gap={t.gap}
+          paddingY={t.paddingY}
+          containerBorderRadius={t.containerBorderRadius}
+          paddingX={t.paddingX}
+          borderRadius={sizeTokens.borderRadius}
+          height={sizeTokens.height}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        paddingBottom: 3,
+        marginBottom: -4,
+        width: '100%',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div
+        role="tablist"
+        aria-orientation="horizontal"
+        aria-disabled={disabled}
+        style={{
+          display: 'flex',
+          alignItems: 'flex-end',
+          gap: t.gap,
+          padding: `0px ${t.paddingX}`,
+          width: 'max-content',
+          minWidth: '100%',
+          boxSizing: 'border-box',
+          position: 'relative',
+        }}
+      >
+        {options.map((option) => {
+          const isSelected = option.value === value;
+          const isOptionDisabled = option.disabled === true || getOptionDisabled?.(option) === true;
+          const isButtonDisabled = disabled || isOptionDisabled;
+          const labelWithCount =
+            option.count !== undefined ? `${option.label} (${option.count})` : option.label;
+
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="tab"
+              aria-selected={isSelected}
+              aria-label={labelWithCount}
+              aria-disabled={isOptionDisabled}
+              disabled={isButtonDisabled}
+              onClick={() => {
+                if (!isButtonDisabled) onChange?.(option.value);
+              }}
+              style={{
+                backgroundColor: isSelected ? '#FFFFFF' : inactiveBg || containerBg,
+                color: isSelected ? activeTextColor : inactiveTextColor,
+                border: `1px solid ${isSelected ? activeBg : '#D4DDE1'}`,
+                borderBottomColor: isSelected ? '#FFFFFF' : '#D4DDE1',
+                position: 'relative',
+                zIndex: isSelected ? 2 : 0,
+                height: sizeTokens.height,
+                minHeight: sizeTokens.height,
+                maxHeight: sizeTokens.height,
+                padding: sizeTokens.padding,
+                fontSize: `${sizeTokens.fontSize}px`,
+                borderTopLeftRadius: sizeTokens.borderRadius,
+                borderTopRightRadius: sizeTokens.borderRadius,
+                borderBottomLeftRadius: '0px',
+                borderBottomRightRadius: '0px',
+                fontWeight: isSelected ? fontWeight : '400',
+                whiteSpace: 'nowrap',
+                cursor: isButtonDisabled ? 'not-allowed' : 'pointer',
+                marginBottom: 0,
+                boxShadow: isSelected ? '0 3px 0 0 #FFFFFF' : 'none',
+                opacity: isOptionDisabled ? 0.5 : 1,
+              }}
+            >
+              {labelWithCount}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,34 @@
+export interface TabsOption {
+  /** Value when this tab is selected */
+  value: string;
+  /** Label shown for the tab */
+  label: string;
+  /** Display / sort order from config (e.g. 1, 2, 3) */
+  sequence?: number;
+  /** Optional count shown in parentheses, e.g. "Pending (0)" */
+  count?: number;
+  /** Disable this tab only */
+  disabled?: boolean;
+}
+
+export interface TabsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'children'
+> {
+  /** List of tab options; one can be selected */
+  options: TabsOption[];
+  /** Currently selected value (must match one option's value) */
+  value: string;
+  /** Called when user selects a different tab */
+  onChange?: (value: string) => void;
+  /** Disable all tabs */
+  disabled?: boolean;
+  /** Callback to disable a particular option; receives the option and returns true to disable */
+  getOptionDisabled?: (option: TabsOption) => boolean;
+  /** Loading state – shows skeleton placeholder (tabs are not disabled) */
+  loading?: boolean;
+  /** Size of the tabs */
+  size?: 'sm' | 'md' | 'lg';
+  /** Background color variant for inactive tabs and container */
+  color?: 'grey' | 'white';
+}