@altruist03/ui 0.1.0 → 0.2.0

package/src/components/SubTabs/SubTabs.tsx

@@ -0,0 +1,279 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { getSubTabsTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import type { SubTabsColor, SubTabsProps, SubTabsVariant } from './SubTabs.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;
+}
+
+export function normalizeSubTabValue(value: string | number | null | undefined): string {
+  if (value === null || value === undefined) return '';
+  return String(value);
+}
+
+interface ColorPalette {
+  accent: string;
+  accentLight: string;
+  activeText: string;
+  inactiveText: string;
+  activeIconBackground: string;
+  inactiveIconBackground: string;
+}
+
+function getColorPalette(
+  colors: Record<string, ColorPalette> | undefined,
+  color: SubTabsColor
+): ColorPalette {
+  const fallback: ColorPalette = {
+    accent: '#00545e',
+    accentLight: '#F3F5F6',
+    activeText: '#00545e',
+    inactiveText: '#6B7280',
+    activeIconBackground: '#00545e',
+    inactiveIconBackground: '#EEF1F2',
+  };
+
+  const greenFallback: ColorPalette = {
+    accent: '#52760A',
+    accentLight: '#F3F6EC',
+    activeText: '#52760A',
+    inactiveText: '#6B7280',
+    activeIconBackground: '#52760A',
+    inactiveIconBackground: '#FFFFFF',
+  };
+
+  const palette = colors?.[color];
+  const base = color === 'green' ? greenFallback : fallback;
+
+  return {
+    accent: toColor(palette?.accent, base.accent),
+    accentLight: toColor(palette?.accentLight, base.accentLight),
+    activeText: toColor(palette?.activeText, base.activeText),
+    inactiveText: toColor(palette?.inactiveText, base.inactiveText),
+    activeIconBackground: toColor(palette?.activeIconBackground, base.activeIconBackground),
+    inactiveIconBackground: toColor(palette?.inactiveIconBackground, base.inactiveIconBackground),
+  };
+}
+
+function getTabButtonStyles({
+  variant,
+  isSelected,
+  palette,
+  sizeTokens,
+  isButtonDisabled,
+}: {
+  variant: SubTabsVariant;
+  isSelected: boolean;
+  palette: ColorPalette;
+  sizeTokens: {
+    height: string;
+    padding: string;
+    fontSize: string;
+    borderRadius: string;
+    fontWeight: string;
+    activeFontWeight: string;
+  };
+  isButtonDisabled: boolean;
+}) {
+  const base = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '8px',
+    height: sizeTokens.height,
+    minHeight: sizeTokens.height,
+    padding: sizeTokens.padding,
+    fontSize: sizeTokens.fontSize,
+    fontWeight: isSelected ? sizeTokens.activeFontWeight : sizeTokens.fontWeight,
+    whiteSpace: 'nowrap' as const,
+    cursor: isButtonDisabled ? 'not-allowed' : 'pointer',
+    opacity: isButtonDisabled ? 0.5 : 1,
+    transition: 'all 0.2s ease',
+    border: '1px solid transparent',
+    background: 'transparent',
+    color: isSelected ? palette.activeText : palette.inactiveText,
+    flexShrink: 0,
+  };
+
+  if (variant === 'pill') {
+    return {
+      ...base,
+      borderRadius: sizeTokens.borderRadius,
+      backgroundColor: isSelected ? palette.accent : '#FFFFFF',
+      borderColor: isSelected ? palette.accent : 'rgba(82, 118, 10, 0.18)',
+      color: isSelected ? '#FFFFFF' : palette.inactiveText,
+      boxShadow: isSelected ? '0 2px 6px rgba(82, 118, 10, 0.28)' : '0 1px 2px rgba(0,0,0,0.06)',
+    };
+  }
+
+  if (variant === 'underline') {
+    return {
+      ...base,
+      borderRadius: '0',
+      borderBottom: `2px solid ${isSelected ? palette.accent : 'transparent'}`,
+      marginBottom: '-1px',
+      backgroundColor: 'transparent',
+      color: isSelected ? palette.activeText : palette.inactiveText,
+    };
+  }
+
+  return {
+    ...base,
+    borderRadius: sizeTokens.borderRadius,
+    backgroundColor: isSelected ? palette.accent : '#FFFFFF',
+    borderColor: isSelected ? palette.accent : '#D4DDE1',
+    color: isSelected ? '#FFFFFF' : palette.inactiveText,
+    boxShadow: isSelected ? '0 1px 2px rgba(16, 24, 40, 0.06)' : 'none',
+  };
+}
+
+function SubTabIcon({
+  icon,
+  isSelected,
+  palette,
+  iconSize,
+  variant,
+}: {
+  icon: ReactNode;
+  isSelected: boolean;
+  palette: ColorPalette;
+  iconSize: string;
+  variant: SubTabsVariant;
+}) {
+  const isPill = variant === 'pill';
+  const bgColor =
+    isPill && isSelected ? 'rgba(255, 255, 255, 0.22)'
+    : isSelected ? palette.activeIconBackground
+    : palette.inactiveIconBackground;
+  const iconColor = isSelected ? '#FFFFFF' : palette.accent;
+
+  return (
+    <span
+      aria-hidden
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: iconSize,
+        height: iconSize,
+        borderRadius: '6px',
+        flexShrink: 0,
+        backgroundColor: bgColor,
+        color: iconColor,
+        transition: 'all 0.2s ease',
+      }}
+    >
+      {icon}
+    </span>
+  );
+}
+
+export const SubTabs = ({
+  options,
+  value,
+  onChange,
+  variant = 'pill',
+  color = 'primary',
+  size = 'md',
+  disabled = false,
+  getOptionDisabled,
+  ariaLabel = 'Sub tabs',
+  style,
+  ...rest
+}: SubTabsProps) => {
+  const resolvedTokens = useTokens();
+  const { tokens: t, sizes } = getSubTabsTokensFromResolved(resolvedTokens);
+  const sizeTokens = sizes[size];
+  const palette = getColorPalette(
+    t.colors as unknown as Record<string, ColorPalette> | undefined,
+    color
+  );
+  const selectedValue = normalizeSubTabValue(value);
+
+  const trackStyle: CSSProperties =
+    variant === 'pill' ?
+      {
+        display: 'flex',
+        alignItems: 'center',
+        gap: t.gap,
+        width: '100%',
+        overflowX: 'auto',
+        padding: t.trackPadding,
+        borderRadius: t.trackBorderRadius,
+        backgroundColor: palette.accentLight,
+        border: `1px solid ${toColor(t.trackBorder, '#E5E7EB')}`,
+        boxShadow: 'inset 0 1px 2px rgba(16, 24, 40, 0.04)',
+      }
+    : variant === 'underline' ?
+      {
+        display: 'inline-flex',
+        alignItems: 'flex-end',
+        gap: t.gap,
+        maxWidth: '100%',
+        overflowX: 'auto',
+        borderBottom: `1px solid ${toColor(t.trackBorder, '#E5E7EB')}`,
+      }
+    : {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: t.gap,
+        maxWidth: '100%',
+        overflowX: 'auto',
+        flexWrap: 'wrap',
+      };
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      aria-disabled={disabled}
+      style={{ ...trackStyle, ...style }}
+      {...rest}
+    >
+      {options.map((option) => {
+        const optionValue = normalizeSubTabValue(option.value);
+        const isSelected = optionValue === selectedValue;
+        const isOptionDisabled = option.disabled === true || getOptionDisabled?.(option) === true;
+        const isButtonDisabled = disabled || isOptionDisabled;
+
+        return (
+          <button
+            key={optionValue || option.label}
+            type="button"
+            role="tab"
+            aria-selected={isSelected}
+            aria-disabled={isOptionDisabled}
+            disabled={isButtonDisabled}
+            onClick={() => {
+              if (!isButtonDisabled) onChange?.(option.value);
+            }}
+            style={getTabButtonStyles({
+              variant,
+              isSelected,
+              palette,
+              sizeTokens,
+              isButtonDisabled,
+            })}
+          >
+            {option.icon ?
+              <SubTabIcon
+                icon={option.icon}
+                isSelected={isSelected}
+                palette={palette}
+                iconSize={sizeTokens.iconSize}
+                variant={variant}
+              />
+            : null}
+            <span>{option.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/SubTabs/SubTabs.types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+export interface SubTabsOption {
+  /** Value when this sub-tab is selected */
+  value: string | number;
+  /** Label shown for the sub-tab */
+  label: string;
+  /** Optional icon shown before the label */
+  icon?: ReactNode;
+  /** Display / sort order from config */
+  sequence?: number;
+  /** Disable this sub-tab only */
+  disabled?: boolean;
+}
+
+export type SubTabsVariant = 'pill' | 'underline' | 'outline';
+
+export type SubTabsColor = 'primary' | 'green';
+
+export type SubTabsSize = 'sm' | 'md';
+
+export interface SubTabsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'children'
+> {
+  /** List of sub-tab options; one can be selected */
+  options: SubTabsOption[];
+  /** Currently selected value (must match one option's value) */
+  value: string | number;
+  /** Called when user selects a different sub-tab */
+  onChange?: (value: string | number) => void;
+  /** Visual style variant */
+  variant?: SubTabsVariant;
+  /** Accent color palette */
+  color?: SubTabsColor;
+  /** Size of the sub-tabs */
+  size?: SubTabsSize;
+  /** Disable all sub-tabs */
+  disabled?: boolean;
+  /** Callback to disable a particular option */
+  getOptionDisabled?: (option: SubTabsOption) => boolean;
+  /** Accessible label for the tab list */
+  ariaLabel?: string;
+}

package/src/components/SummaryCard/SummaryCard.stories.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@mui/material';
+import { SummaryCard, SummaryCardGrid } from './SummaryCard';
+import type { SummaryCardProps } from './SummaryCard.types';
+
+const meta: Meta<typeof SummaryCard> = {
+  title: 'Design System/SummaryCard',
+  component: SummaryCard,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 24, backgroundColor: '#F4FAF5', maxWidth: 1200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: 'Invoiced (August)',
+    value: 'AED 452,000',
+    subtitle: '+12% vs July',
+    accentColor: '#2563eb',
+    iconBackgroundColor: '#dbeafe',
+    icon: <Icon sx={{ fontSize: 20 }}>receipt_long</Icon>,
+  } satisfies SummaryCardProps,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SummaryCard>;
+
+export const Playground: Story = {};
+
+export const ThreeCardsFullWidth: Story = {
+  render: () => (
+    <SummaryCardGrid cardCount={3}>
+      <SummaryCard
+        title="Invoiced (August)"
+        value="AED 452,000"
+        subtitle="+12% vs July"
+        accentColor="#2563eb"
+        iconBackgroundColor="#dbeafe"
+        icon={<Icon sx={{ fontSize: 20 }}>receipt_long</Icon>}
+      />
+      <SummaryCard
+        title="Accounts Receivable"
+        value="AED 185,400"
+        subtitle="Total Outstanding"
+        accentColor="#ca8a04"
+        iconBackgroundColor="#fef3c7"
+        icon={<Icon sx={{ fontSize: 20 }}>account_balance_wallet</Icon>}
+      />
+      <SummaryCard
+        title="Overdue Receivable"
+        value="AED 42,300"
+        subtitle="Requires Attention"
+        accentColor="#dc2626"
+        iconBackgroundColor="#fee2e2"
+        icon={<Icon sx={{ fontSize: 20 }}>warning_amber</Icon>}
+      />
+    </SummaryCardGrid>
+  ),
+};
+
+export const TwoCardsFullWidth: Story = {
+  render: () => (
+    <SummaryCardGrid cardCount={2}>
+      <SummaryCard
+        title="Invoiced"
+        value="AED 452,000"
+        subtitle="+12% vs July"
+        accentColor="#52760A"
+        icon={<Icon sx={{ fontSize: 20 }}>receipt_long</Icon>}
+      />
+      <SummaryCard
+        title="Accounts Receivable"
+        value="AED 185,400"
+        subtitle="Total Outstanding"
+        accentColor="#ca8a04"
+        icon={<Icon sx={{ fontSize: 20 }}>account_balance_wallet</Icon>}
+      />
+    </SummaryCardGrid>
+  ),
+};
+
+export const FourCardsFullWidth: Story = {
+  render: () => (
+    <SummaryCardGrid cardCount={4}>
+      {['Invoiced', 'Receivable', 'Overdue', 'Collected'].map((label, index) => (
+        <SummaryCard
+          key={label}
+          title={label}
+          value={`AED ${(index + 1) * 100000}`}
+          subtitle="Sample subtitle"
+          accentColor="#52760A"
+          icon={<Icon sx={{ fontSize: 20 }}>receipt_long</Icon>}
+        />
+      ))}
+    </SummaryCardGrid>
+  ),
+};

package/src/components/SummaryCard/SummaryCard.tsx

@@ -0,0 +1,141 @@
+import type { CSSProperties } from 'react';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import type { SummaryCardProps, SummaryCardGridProps } from './SummaryCard.types';
+
+function defaultAriaLabel(title: string, value: string | number, subtitle?: string) {
+  const valueText = typeof value === 'number' ? String(value) : value;
+  return subtitle ? `${title}: ${valueText}. ${subtitle}` : `${title}: ${valueText}`;
+}
+
+export const SummaryCard = ({
+  title,
+  value,
+  subtitle,
+  accentColor = '#52760A',
+  valueColor = '#111827',
+  iconBackgroundColor,
+  icon,
+  ariaLabel,
+  className,
+  style,
+}: SummaryCardProps) => {
+  const resolvedTokens = useTokens();
+  const resolvedIconBg = iconBackgroundColor ?? `color-mix(in srgb, ${accentColor} 18%, #ffffff)`;
+  const bodyFontFamily =
+    resolvedTokens.semantic?.typography?.body?.medium?.fontFamily ??
+    resolvedTokens.semantic?.typography?.label?.md?.fontFamily ??
+    'Inter, sans-serif';
+  const titleColor = resolvedTokens.semantic?.color?.text?.muted ?? '#5b6471';
+  const cardBorderColor = resolvedTokens.semantic?.color?.secondary?.default ?? '#d8e0eb';
+  const cardRadius = resolvedTokens.foundation?.radius?.lg ?? '12px';
+  const cardBackground = resolvedTokens.semantic?.color?.bg?.primary ?? '#ffffff';
+
+  return (
+    <article
+      className={className}
+      role="group"
+      aria-label={ariaLabel ?? defaultAriaLabel(title, value, subtitle)}
+      style={{
+        boxSizing: 'border-box',
+        background: cardBackground,
+        border: `1px solid ${cardBorderColor}`,
+        borderRadius: cardRadius,
+        minHeight: '88px',
+        padding: '10px 12px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        width: '100%',
+        ...style,
+      }}
+    >
+      {icon ?
+        <div
+          style={{
+            width: '44px',
+            height: '44px',
+            borderRadius: '10px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            backgroundColor: resolvedIconBg,
+            color: accentColor,
+          }}
+        >
+          {icon}
+        </div>
+      : null}
+      <div style={{ minWidth: 0, flex: 1, fontFamily: bodyFontFamily }}>
+        <p
+          style={{
+            margin: 0,
+            color: titleColor,
+            fontSize: '13px',
+            lineHeight: '16px',
+            fontWeight: 600,
+            width: 'auto',
+            maxWidth: '100%',
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'unset',
+            wordBreak: 'break-word',
+          }}
+        >
+          {title}
+        </p>
+        <h3
+          className="text-[18px] xl:text-[22px] leading-[1.3]"
+          style={{
+            margin: '2px 0px 2px 0px',
+            color: valueColor,
+            fontWeight: 700,
+          }}
+        >
+          {value}
+        </h3>
+        {subtitle ?
+          <p
+            style={{
+              margin: 0,
+              fontSize: '12px',
+              lineHeight: '16px',
+              fontWeight: 500,
+              width: 'auto',
+              maxWidth: '100%',
+              whiteSpace: 'normal',
+              overflow: 'visible',
+              textOverflow: 'unset',
+              wordBreak: 'break-word',
+              color: accentColor,
+            }}
+          >
+            {subtitle}
+          </p>
+        : null}
+      </div>
+    </article>
+  );
+};
+
+export const SummaryCardGrid = ({
+  children,
+  cardCount = 1,
+  className,
+  style,
+}: SummaryCardGridProps) => {
+  const columns = Math.min(Math.max(cardCount, 1), 4);
+  const gridStyle: CSSProperties = {
+    display: 'grid',
+    gap: '12px',
+    width: '100%',
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    ...style,
+  };
+
+  return (
+    <div className={className} style={gridStyle}>
+      {children}
+    </div>
+  );
+};

package/src/components/SummaryCard/SummaryCard.types.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface SummaryCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  accentColor?: string;
+  valueColor?: string;
+  iconBackgroundColor?: string;
+  icon?: ReactNode;
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export interface SummaryCardGridProps {
+  children: ReactNode;
+  /** Number of cards in the row (used to stretch 2–4 cards across full width). */
+  cardCount?: number;
+  className?: string;
+  style?: CSSProperties;
+}

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { Switch } from "./Switch";
+import type { SwitchProps } from "./Switch.types";
+
+const meta: Meta<typeof Switch> = {
+  title: "Design System/Switch",
+  component: Switch,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "420px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    checked: false,
+    disabled: false,
+    size: "md",
+  } as SwitchProps,
+  argTypes: {
+    checked: { control: { type: "boolean" } },
+    disabled: { control: { type: "boolean" } },
+    size: { control: { type: "radio" }, options: ["sm", "md", "lg"] },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Playground: Story = {
+  render: function PlaygroundRender(args) {
+    const [checked, setChecked] = useState(!!args.checked);
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onChange={(next) => {
+          setChecked(next);
+          args.onChange?.(next);
+        }}
+      />
+    );
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <Switch checked={false} onChange={() => {}} />
+      <Switch checked onChange={() => {}} />
+      <Switch checked={false} disabled />
+      <Switch checked disabled />
+    </div>
+  ),
+};