@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,123 @@
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export interface CheckboxProps {
+  /**
+   * The label text displayed next to the checkbox
+   */
+  label: string;
+  /**
+   * Position of the label: "end" = right of checkbox (default), "start" = left of checkbox
+   */
+  labelPlacement?: 'start' | 'end';
+  /**
+   * Size variant: sm, md, or lg
+   */
+  size?: CheckboxSize;
+  /**
+   * Whether the checkbox is checked
+   */
+  checked?: boolean;
+  /**
+   * Default checked state (for uncontrolled usage)
+   */
+  defaultChecked?: boolean;
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the checkbox is indeterminate (shows a dash instead of checkmark)
+   */
+  indeterminate?: boolean;
+  /**
+   * The name attribute for form grouping
+   */
+  name?: string;
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+  /**
+   * The value attribute for form submission
+   */
+  value?: string;
+  /**
+   * onChange handler
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * onBlur handler
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * onFocus handler
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Helper text displayed below the checkbox (e.g. description or validation message)
+   */
+  helperText?: React.ReactNode;
+  /**
+   * When true, shows error styling for the helper text (and can be used for validation state)
+   */
+  error?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  /**
+   * The label/heading displayed above the checkbox group
+   */
+  label?: string;
+  /**
+   * Array of checkbox options
+   */
+  options: Array<{
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }>;
+  /**
+   * Selected values (for controlled usage)
+   */
+  value?: string[];
+  /**
+   * Default selected values (for uncontrolled usage)
+   */
+  defaultValue?: string[];
+  /**
+   * The name attribute for form grouping
+   */
+  name?: string;
+  /**
+   * Whether the group is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Layout direction: 'horizontal' or 'vertical'
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * Number of columns for a grid layout (overrides direction when > 1)
+   */
+  columns?: number;
+  /**
+   * Optional class name for the root element
+   */
+  className?: string;
+  /**
+   * Size variant: sm, md, or lg
+   */
+  size?: CheckboxSize;
+  /**
+   * onChange handler - receives the array of selected values
+   */
+  onChange?: (values: string[]) => void;
+  /**
+   * Helper text displayed below the checkbox group
+   */
+  helperText?: React.ReactNode;
+  /**
+   * When true, shows error styling for the helper text
+   */
+  error?: boolean;
+}

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CloseButton } from "./CloseButton";
+import type { CloseButtonProps } from "./CloseButton.types";
+
+const meta: Meta<typeof CloseButton> = {
+  title: "Design System/CloseButton",
+  component: CloseButton,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    size: "md",
+    variant: "filled",
+    disabled: false,
+    "aria-label": "Close",
+    color: "grey",
+  } as CloseButtonProps,
+  argTypes: {
+    color: {
+      control: { type: "radio" },
+      options: ["grey", "white"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["xs", "sm", "md", "lg"],
+    },
+    variant: {
+      control: { type: "radio" },
+      options: ["filled", "outline"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    "aria-label": {
+      control: { type: "text" },
+    },
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CloseButton>;
+
+export const Playground: Story = {
+  args: {
+    size: "md",
+    variant: "filled",
+    disabled: false,
+    "aria-label": "Close",
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {/* Filled – all sizes */}
+      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
+        <CloseButton size="xs" variant="filled" />
+        <CloseButton size="sm" variant="filled" />
+        <CloseButton size="md" variant="filled" />
+        <CloseButton size="lg" variant="filled" />
+      </div>
+
+      {/* Outline – all sizes */}
+      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
+        <CloseButton size="xs" variant="outline" />
+        <CloseButton size="sm" variant="outline" />
+        <CloseButton size="md" variant="outline" />
+        <CloseButton size="lg" variant="outline" />
+      </div>
+
+      {/* Disabled – filled */}
+      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
+        <CloseButton size="xs" variant="filled" disabled />
+        <CloseButton size="sm" variant="filled" disabled />
+        <CloseButton size="md" variant="filled" disabled />
+        <CloseButton size="lg" variant="filled" disabled />
+      </div>
+
+      {/* Disabled – outline */}
+      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
+        <CloseButton size="xs" variant="outline" disabled />
+        <CloseButton size="sm" variant="outline" disabled />
+        <CloseButton size="md" variant="outline" disabled />
+        <CloseButton size="lg" variant="outline" disabled />
+      </div>
+
+      {/* Color: white (filled) */}
+      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
+        <CloseButton size="md" variant="filled" color="white" />
+      </div>
+    </div>
+  ),
+};

package/src/components/CloseButton/CloseButton.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useCallback } from 'react';
+// import { Icon } from "firebird-icon-lib";
+import type { CloseButtonSize } from '../../tokens';
+import type { CloseButtonProps } from './CloseButton.types';
+import { getCloseButtonTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import CloseIcon from '@mui/icons-material/Close';
+
+export const CloseButton = ({
+  size = 'md',
+  variant = 'filled',
+  color = 'grey',
+  disabled = false,
+  'aria-label': ariaLabel = 'Close',
+  onMouseEnter,
+  onMouseLeave,
+  style,
+  ...rest
+}: CloseButtonProps) => {
+  const [hovered, setHovered] = useState(false);
+  const isHover = hovered && !disabled;
+  const resolvedTokens = useTokens();
+  const t = getCloseButtonTokensFromResolved(resolvedTokens);
+
+  const sizeKey = size as CloseButtonSize;
+  const sizeVal = t[
+    `size${sizeKey.charAt(0).toUpperCase()}${sizeKey.slice(1)}` as keyof typeof t
+  ] as string;
+  const paddingVal = t[
+    `padding${sizeKey.charAt(0).toUpperCase()}${sizeKey.slice(1)}` as keyof typeof t
+  ] as string;
+  const borderRadiusVal = t[
+    `borderRadius${sizeKey.charAt(0).toUpperCase()}${sizeKey.slice(1)}` as keyof typeof t
+  ] as string;
+
+  const filledBackground = color === 'white' ? t.filledBackgroundWhite : t.filledBackground;
+  const filledHoverBackground =
+    color === 'white' ? t.filledHoverBackgroundWhite : t.filledHoverBackground;
+
+  const backgroundColor =
+    variant === 'filled' ?
+      disabled ? filledBackground
+      : isHover ? filledHoverBackground
+      : filledBackground
+    : t.outlineBackground;
+
+  const iconColor =
+    variant === 'filled' ?
+      disabled ? t.filledColor
+      : isHover ? t.filledHoverColor
+      : t.filledColor
+    : disabled ? t.outlineColor
+    : isHover ? t.outlineHoverColor
+    : t.outlineColor;
+
+  const border =
+    variant === 'outline' ?
+      isHover ? `1px solid ${t.outlineHoverBorder}`
+      : `1px solid ${t.outlineBorder}`
+    : t.filledBorder !== 'none' ? `1px solid ${t.filledBorder}`
+    : 'none';
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      setHovered(true);
+      onMouseEnter?.(e);
+    },
+    [onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      setHovered(false);
+      onMouseLeave?.(e);
+    },
+    [onMouseLeave]
+  );
+
+  const buttonStyle: React.CSSProperties = {
+    width: sizeVal,
+    height: sizeVal,
+    minWidth: sizeVal,
+    minHeight: sizeVal,
+    padding: paddingVal,
+    margin: 0,
+    borderRadius: borderRadiusVal,
+    border,
+    backgroundColor,
+    color: iconColor,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    boxSizing: 'border-box',
+    opacity: disabled ? parseFloat(t.disabledOpacity) : 1,
+    transition: 'background-color 0.15s ease, border-color 0.15s ease',
+    ...style,
+  };
+
+  // const iconSize = parseInt(String(iconSizeVal).replace(/px$/, '') || '16', 10);
+
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      disabled={disabled}
+      style={buttonStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...rest}
+    >
+      {/* <Icon name="close" size={iconSize} color={iconColor} showLabel={false} /> */}
+      <CloseIcon fontSize={size as 'small' | 'medium' | 'large'} />
+    </button>
+  );
+};

package/src/components/CloseButton/CloseButton.types.ts

@@ -0,0 +1,15 @@
+export type CloseButtonSize = "xs" | "sm" | "md" | "lg";
+
+export type CloseButtonVariant = "filled" | "outline";
+
+export interface CloseButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+  /** Size of the circular button */
+  size?: CloseButtonSize;
+  /** Visual variant: filled (default) or outline. Uses design tokens from components/closebutton.json */
+  variant?: CloseButtonVariant;
+  /** Background color variant for filled buttons */
+  color?: "grey" | "white";
+  /** Accessible label for the close action */
+  "aria-label"?: string;
+}

package/src/components/CollapsibleSearch/CollapsibleSearch.tsx

@@ -0,0 +1,120 @@
+import { useRef, type CSSProperties } from 'react';
+// import CloseIcon from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
+// import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
+
+export type CollapsibleSearchSize = 'sm' | 'md' | 'lg';
+
+export interface CollapsibleSearchProps {
+  /** Current search text (controlled). */
+  value: string;
+  /** Fires on every keystroke; parent decides whether to debounce. */
+  onChange: (value: string) => void;
+  /** Placeholder shown inside the input when open. */
+  placeholder?: string;
+  /** Width of the input when expanded. Defaults to 240. */
+  width?: number;
+  /** Size of the underlying TextField + Button. Defaults to "sm". */
+  size?: CollapsibleSearchSize;
+  /** Disable the control entirely. */
+  disabled?: boolean;
+  /** Optional className on the outer wrapper. */
+  className?: string;
+  /** Optional className on the toggle (search / close) icon button. */
+  toggleClassName?: string;
+  /** Optional inline style on the outer wrapper. */
+  style?: CSSProperties;
+  /**
+   * Optional callback fired when the search panel toggles open or closed.
+   * Useful if the parent wants to clear filters / refetch on close.
+   */
+  onToggle?: (open: boolean) => void;
+}
+
+/**
+ * CollapsibleSearch
+ *
+ * Compact search affordance for crowded toolbars (e.g. the Summary Report and
+ * Details Report tables on the fuel page). Renders as a single icon button
+ * by default; on click the input slides in next to the icon (which becomes
+ * a close button). Closing the panel clears the search value.
+ */
+export function CollapsibleSearch({
+  value,
+  onChange,
+  placeholder = 'Search',
+  // width = 240,
+  size = 'sm',
+  disabled,
+  // className,
+  // toggleClassName,
+  // style,
+  // onToggle,
+}: CollapsibleSearchProps) {
+  // const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // useEffect(() => {
+  //   if (open) {
+  //     const id = window.requestAnimationFrame(() => inputRef.current?.focus());
+  //     return () => window.cancelAnimationFrame(id);
+  //   }
+  //   return undefined;
+  // }, [open]);
+
+  // const handleToggle = useCallback(() => {
+  //   setOpen((prev) => {
+  //     const next = !prev;
+  //     if (!next && value) onChange('');
+  //     onToggle?.(next);
+  //     return next;
+  //   });
+  // }, [value, onChange, onToggle]);
+
+  // const wrapperStyle: CSSProperties = {
+  //   display: 'inline-flex',
+  //   alignItems: 'center',
+  //   gap: 6,
+  //   ...style,
+  // };
+
+  // const inputWrapperStyle: CSSProperties = {
+  //   overflow: 'hidden',
+  //   transition: 'width 220ms ease, opacity 220ms ease',
+  //   width: open ? width : 0,
+  //   opacity: open ? 1 : 0,
+  //   pointerEvents: open ? 'auto' : 'none',
+  // };
+
+  return (
+    // <div className={className} style={wrapperStyle}>
+    //   <div style={inputWrapperStyle}>
+    <TextField
+      inputRef={inputRef as React.Ref<HTMLInputElement>}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      size={size}
+      disabled={disabled}
+      fullWidth
+      startIcon={<SearchIcon sx={{ fontSize: 20 }} />}
+    />
+    //   </div>
+    //   <Button
+    //     variant="grey"
+    //     size={size}
+    //     iconOnly
+    //     className={toggleClassName}
+    //     aria-label={open ? 'Close search' : 'Open search'}
+    //     aria-expanded={open}
+    //     disabled={disabled}
+    //     onClick={handleToggle}
+    //   >
+    //     {open ?
+    //       <CloseIcon sx={{ fontSize: 18 }} />
+    //     : <SearchIcon sx={{ fontSize: 18 }} />}
+    //   </Button>
+    // </div>
+  );
+}

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataTable } from './DataTable';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import { getDataTableTokensFromResolved } from '../../tokens';
+import { useTable, useSortBy } from 'react-table';
+// import type { DataTableProps } from './DataTable.types';
+interface SampleRow {
+  id: number;
+  name: string;
+  email: string;
+  status: string;
+  role: string;
+}
+
+const sampleColumns = [
+  { accessor: 'id', Header: 'ID' },
+  { accessor: 'name', Header: 'Name' },
+  { accessor: 'email', Header: 'Email' },
+  {
+    accessor: 'status',
+    Header: 'Status',
+    render: (value: string) => (
+      <span
+        style={{
+          padding: '2px 10px',
+          borderRadius: '12px',
+          fontSize: '12px',
+          fontWeight: 500,
+          background:
+            value === 'Active' ? '#DEF7EC'
+            : value === 'Pending' ? '#FEF3C7'
+            : '#FEE2E2',
+          color:
+            value === 'Active' ? '#03543F'
+            : value === 'Pending' ? '#92400E'
+            : '#991B1B',
+        }}
+      >
+        {value}
+      </span>
+    ),
+  },
+  { accessor: 'role', Header: 'Role' },
+];
+
+const sampleData: SampleRow[] = [
+  {
+    id: 1,
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    status: 'Active',
+    role: 'Admin',
+  },
+  {
+    id: 2,
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    status: 'Pending',
+    role: 'Editor',
+  },
+  {
+    id: 3,
+    name: 'Carol White',
+    email: 'carol@example.com',
+    status: 'Inactive',
+    role: 'Viewer',
+  },
+  {
+    id: 4,
+    name: 'David Lee',
+    email: 'david@example.com',
+    status: 'Active',
+    role: 'Editor',
+  },
+  {
+    id: 5,
+    name: 'Eve Brown',
+    email: 'eve@example.com',
+    status: 'Active',
+    role: 'Admin',
+  },
+  {
+    id: 6,
+    name: 'Frank Davis',
+    email: 'frank@example.com',
+    status: 'Pending',
+    role: 'Viewer',
+  },
+  {
+    id: 7,
+    name: 'Grace Kim',
+    email: 'grace@example.com',
+    status: 'Active',
+    role: 'Editor',
+  },
+  {
+    id: 8,
+    name: 'Hank Miller',
+    email: 'hank@example.com',
+    status: 'Inactive',
+    role: 'Viewer',
+  },
+];
+
+/* Theme-aware card wrapper using design tokens */
+const Card = ({ title, children }: { title: string; children: React.ReactNode }) => {
+  const resolved = useTokens();
+  const tokens = getDataTableTokensFromResolved(resolved);
+
+  return (
+    <div
+      style={{
+        background: tokens.headerBackground,
+        borderRadius: '12px',
+        border: `1px solid ${tokens.cellBorderBottom}`,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          padding: '16px 20px',
+          borderBottom: `1px solid ${tokens.cellBorderBottom}`,
+          fontSize: '14px',
+          fontWeight: 600,
+          color: tokens.headerColor,
+        }}
+      >
+        {title}
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+};
+
+const DataTableWrapper = ({ columns, data, ...props }: any) => {
+  const tableInstance = useTable({ columns, data }, useSortBy);
+
+  return <DataTable {...tableInstance} {...props} />;
+};
+
+const meta: Meta<typeof DataTableWrapper> = {
+  title: 'Design System/DataTable',
+  component: DataTableWrapper,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    columns: sampleColumns as any,
+    data: sampleData,
+    loading: false,
+    emptyMessage: 'No Record Found',
+    stickyHeader: true,
+    skeletonRows: 5,
+  },
+  argTypes: {
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Show loading skeleton',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    emptyMessage: {
+      control: { type: 'text' },
+      description: 'Message when data is empty',
+      table: { defaultValue: { summary: 'No Record Found' } },
+    },
+    stickyHeader: {
+      control: { type: 'boolean' },
+      description: 'Stick the header to the top on scroll',
+      table: { defaultValue: { summary: 'true' } },
+    },
+    skeletonRows: {
+      control: { type: 'number' },
+      description: 'Number of skeleton rows when loading',
+      table: { defaultValue: { summary: '5' } },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataTableWrapper>;
+
+export const Playground: Story = {
+  args: {
+    columns: sampleColumns as any,
+    data: sampleData,
+    loading: false,
+    emptyMessage: 'No Record Found',
+    stickyHeader: true,
+  },
+};
+
+export const Showcase: Story = {
+  render: () => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+        {/* With Data + Sorting */}
+        <Card title="Sortable Table (click ID, Name, or Role headers)">
+          <DataTableWrapper columns={sampleColumns} data={sampleData} />
+        </Card>
+
+        {/* Loading State */}
+        <Card title="Loading State">
+          <DataTableWrapper columns={sampleColumns} data={[]} loading skeletonRows={4} />
+        </Card>
+
+        {/* Empty State */}
+        <Card title="Empty State">
+          <DataTableWrapper
+            columns={sampleColumns}
+            data={[]}
+            emptyMessage="No records found. Try adjusting your filters."
+          />
+        </Card>
+
+        {/* Row Click */}
+        <Card title="Styling Overrides (Center Status)">
+          <DataTableWrapper
+            columns={sampleColumns}
+            data={sampleData.slice(0, 3)}
+            className_td_center={['Status', 'ID']}
+          />
+        </Card>
+      </div>
+    );
+  },
+};