@altruist03/ui 0.1.0 → 0.2.1

package/src/components/TextField/TextField.types.ts

@@ -0,0 +1,141 @@
+export type TextFieldSize = 'sm' | 'md' | 'lg';
+
+export interface TextFieldProps {
+  /**
+   * Field label shown above the input
+   */
+  label?: string;
+  /**
+   * Current value (for controlled usage)
+   */
+  value?: string;
+  /**
+   * Default value (for uncontrolled usage)
+   */
+  defaultValue?: string;
+  /**
+   * Placeholder text inside the input
+   */
+  placeholder?: string;
+  /**
+   * Helper or error text displayed below the field
+   */
+  helperText?: string;
+  /**
+   * Marks the field as required and appends "*" to the label
+   */
+  required?: boolean;
+  /**
+   * Shows error state and styles
+   */
+  error?: boolean;
+  /**
+   * Disables the field
+   */
+  disabled?: boolean;
+  /**
+   * Makes the field stretch to full container width
+   */
+  fullWidth?: boolean;
+  /**
+   * Input type (text, number, password, etc.)
+   */
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+  /**
+   * When true, renders a multiline textarea-style field
+   */
+  multiline?: boolean;
+  /**
+   * Number of visible text rows when `multiline` is true
+   */
+  rows?: number;
+  /**
+   * Maximum number of rows when multiline
+   */
+  maxRows?: number;
+  /**
+   * Minimum number of rows when multiline
+   */
+  minRows?: number;
+  /**
+   * Size of the text field
+   */
+  size?: TextFieldSize;
+  /**
+   * Background color variant
+   */
+  color?: 'grey' | 'white';
+  /**
+   * Input name attribute
+   */
+  name?: string;
+  /**
+   * HTML id attribute (used to link label and input)
+   */
+  id?: string;
+  /**
+   * Auto focus the input on mount
+   */
+  autoFocus?: boolean;
+  /**
+   * Auto complete attribute
+   */
+  autoComplete?: string;
+  /**
+   * Loading state
+   */
+  skeletonLoading?: boolean;
+
+  /**
+   * Additional input props
+   */
+  inputProps?:
+    | React.InputHTMLAttributes<HTMLInputElement>
+    | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /**
+   * Input ref
+   */
+  inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+  /**
+   * onChange handler
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  /**
+   * onBlur handler
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  /**
+   * onFocus handler
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  /**
+   * Fixed prefix rendered flush inside the input on the left (e.g. currency code).
+   * Uses a full-height grey segment with a right divider; takes precedence over startIcon.
+   */
+  prefix?: React.ReactNode;
+  /**
+   * Fixed suffix rendered flush inside the input on the right (e.g. unit).
+   * Uses a full-height grey segment with a left divider; takes precedence over endIcon.
+   */
+  suffix?: React.ReactNode;
+  /**
+   * Icon component rendered at the start (left) of the input.
+   * Only visible when passed. Takes precedence over InputProps.startAdornment.
+   * Pass any SVG component — MUI icon (e.g. <SearchIcon />) or firebird-icon-lib (e.g. <Icon name="search" />).
+   */
+  startIcon?: React.ReactNode;
+  /**
+   * Icon component rendered at the end (right) of the input.
+   * Only visible when passed. Takes precedence over InputProps.endAdornment.
+   * Pass any SVG component — MUI icon (e.g. <ClearIcon />) or firebird-icon-lib (e.g. <Icon name="close" />).
+   */
+  endIcon?: React.ReactNode;
+  /**
+   * Props applied to the Input element. Supports endAdornment and startAdornment for icons/buttons.
+   * startIcon/endIcon take precedence when both are provided.
+   */
+  InputProps?: {
+    endAdornment?: React.ReactNode;
+    startAdornment?: React.ReactNode;
+  };
+}

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toast, ToastProvider, useToastDS } from './Toast';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof Toast> = {
+  title: 'Design System/Toast',
+  component: Toast,
+  tags: [],
+  decorators: [(Story) => <Story />],
+  args: {
+    message: 'Something went wrong. Please try again after some time.',
+    variant: 'error',
+    duration: 0,
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['success', 'warning', 'error', 'info'],
+      description: 'Toast variant — controls the icon and accent color',
+      table: {
+        type: { summary: 'success | warning | error | info' },
+        defaultValue: { summary: 'info' },
+      },
+    },
+    message: {
+      control: { type: 'text' },
+      description: 'Message displayed inside the toast',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    duration: {
+      control: { type: 'number' },
+      description: 'Auto-dismiss delay in ms. Set to 0 to disable auto-dismiss.',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '4000' },
+      },
+    },
+    onClose: { action: 'closed' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toast>;
+
+// ─── Playground ───────────────────────────────────────────────────────────────
+
+export const Playground: Story = {
+  args: {
+    message: 'Something went wrong. Please try again after some time.',
+    variant: 'error',
+    duration: 0,
+  },
+  render: (args) => (
+    // key forces remount when args change so the toast is always visible
+    <div style={{ padding: 24 }}>
+      <Toast key={`${args.variant}-${args.message}`} {...args} />
+    </div>
+  ),
+};
+
+// ─── All Variants ─────────────────────────────────────────────────────────────
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 24 }}>
+      <Toast
+        variant="error"
+        message="Something went wrong. Please try again after some time."
+        duration={0}
+      />
+      <Toast variant="success" message="Fleet created successfully." duration={0} />
+      <Toast
+        variant="warning"
+        message="Your session is about to expire. Please save your work."
+        duration={0}
+      />
+      <Toast variant="info" message="A new version is available. Refresh to update." duration={0} />
+    </div>
+  ),
+};
+
+// ─── Interactive with ToastProvider ──────────────────────────────────────────
+
+const TriggerButtons = () => {
+  const { showToast } = useToastDS();
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
+      <Button
+        variant="red"
+        size="sm"
+        onClick={() =>
+          showToast('Something went wrong. Please try again after some time.', 'error')
+        }
+      >
+        Show Error
+      </Button>
+      <Button
+        variant="blue"
+        size="sm"
+        onClick={() => showToast('Fleet created successfully.', 'success')}
+      >
+        Show Success
+      </Button>
+      <Button
+        variant="grey"
+        size="sm"
+        onClick={() =>
+          showToast('Your session is about to expire. Please save your work.', 'warning')
+        }
+      >
+        Show Warning
+      </Button>
+      <Button
+        variant="blue"
+        size="sm"
+        onClick={() => showToast('A new version is available. Refresh to update.', 'info')}
+      >
+        Show Info
+      </Button>
+    </div>
+  );
+};
+
+export const WithProvider: Story = {
+  render: () => (
+    <ToastProvider position="top-right">
+      <div style={{ padding: 24 }}>
+        <p style={{ marginBottom: 16, fontSize: 14, color: '#64748B' }}>
+          Click a button to trigger a toast notification at the top-right corner.
+        </p>
+        <TriggerButtons />
+      </div>
+    </ToastProvider>
+  ),
+};
+
+// ─── All Positions ────────────────────────────────────────────────────────────
+
+const PositionDemo = ({ position }: { position: string }) => {
+  const { showToast } = useToastDS();
+  return (
+    <Button
+      variant="blue"
+      size="sm"
+      onClick={() => showToast(`Toast at ${position}`, 'info', 3000)}
+    >
+      {position}
+    </Button>
+  );
+};
+
+export const AllPositions: Story = {
+  render: () => {
+    const positions = [
+      'top-right',
+      'top-left',
+      'top-center',
+      'bottom-right',
+      'bottom-left',
+      'bottom-center',
+    ] as const;
+
+    return (
+      <div style={{ padding: 24 }}>
+        <p style={{ marginBottom: 16, fontSize: 14, color: '#64748B' }}>
+          Each button triggers a toast at a different screen position.
+        </p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
+          {positions.map((pos) => (
+            <ToastProvider key={pos} position={pos}>
+              <PositionDemo position={pos} />
+            </ToastProvider>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+// ─── Showcase ─────────────────────────────────────────────────────────────────
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, padding: 24 }}>
+      {/* Variants */}
+      <div>
+        <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 14, color: '#1E293B' }}>
+          Variants
+        </h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          <Toast
+            variant="error"
+            message="Something went wrong. Please try again after some time."
+            duration={0}
+          />
+          <Toast variant="success" message="Fleet created successfully." duration={0} />
+          <Toast
+            variant="warning"
+            message="Your session is about to expire. Please save your work."
+            duration={0}
+          />
+          <Toast
+            variant="info"
+            message="A new version is available. Refresh to update."
+            duration={0}
+          />
+        </div>
+      </div>
+
+      {/* Long message */}
+      <div>
+        <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 14, color: '#1E293B' }}>
+          Long Message
+        </h3>
+        <Toast
+          variant="warning"
+          message="Your account has limited permissions. Contact your administrator to request access to the Fleet Management module before proceeding."
+          duration={0}
+        />
+      </div>
+
+      {/* Interactive */}
+      <div>
+        <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 14, color: '#1E293B' }}>
+          Interactive (auto-dismiss after 3s)
+        </h3>
+        <ToastProvider position="top-right">
+          <TriggerButtons />
+        </ToastProvider>
+      </div>
+    </div>
+  ),
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,246 @@
+import React, {
+  ReactNode,
+  cloneElement,
+  isValidElement,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import type {
+  ToastVariant,
+  ToastPosition,
+  ToastItem,
+  ToastProps,
+  ToastContainerProps,
+  ToastContextValue,
+} from './Toast.types';
+
+// ─── Variant config ──────────────────────────────────────────────────────────
+
+interface VariantConfig {
+  icon: ReactNode;
+  iconBg: string;
+  iconColor: string;
+  accentColor: string;
+  bgTint: string;
+}
+
+const VARIANT_CONFIG: Record<ToastVariant, VariantConfig> = {
+  success: {
+    icon: <CheckCircleOutlineIcon />,
+    iconBg: '#DCFCE7',
+    iconColor: '#16A34A',
+    accentColor: '#16A34A',
+    bgTint: '#F0FDF4',
+  },
+  error: {
+    icon: <HighlightOffIcon />,
+    iconBg: '#FEE2E2',
+    iconColor: '#DC2626',
+    accentColor: '#DC2626',
+    bgTint: '#FFF5F5',
+  },
+  warning: {
+    icon: <WarningAmberIcon />,
+    iconBg: '#FEF9C3',
+    iconColor: '#CA8A04',
+    accentColor: '#CA8A04',
+    bgTint: '#FFFBEB',
+  },
+  info: {
+    icon: <InfoOutlinedIcon />,
+    iconBg: '#DBEAFE',
+    iconColor: '#2563EB',
+    accentColor: '#2563EB',
+    bgTint: '#EFF6FF',
+  },
+};
+
+// ─── Position styles ──────────────────────────────────────────────────────────
+
+const POSITION_STYLES: Record<ToastPosition, React.CSSProperties> = {
+  'top-right': { top: 20, right: 20, alignItems: 'flex-end' },
+  'top-left': { top: 20, left: 20, alignItems: 'flex-start' },
+  'top-center': { top: 20, left: '50%', transform: 'translateX(-50%)', alignItems: 'center' },
+  'bottom-right': { bottom: 20, right: 20, alignItems: 'flex-end' },
+  'bottom-left': { bottom: 20, left: 20, alignItems: 'flex-start' },
+  'bottom-center': { bottom: 20, left: '50%', transform: 'translateX(-50%)', alignItems: 'center' },
+};
+
+// ─── Single Toast item ────────────────────────────────────────────────────────
+
+export const Toast = ({ message, variant = 'info', duration = 4000, onClose }: ToastProps) => {
+  const [visible, setVisible] = useState(true);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const dismiss = useCallback(() => {
+    setVisible(false);
+    onClose?.();
+  }, [onClose]);
+
+  useEffect(() => {
+    if (duration > 0) {
+      timerRef.current = setTimeout(dismiss, duration);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [duration, dismiss]);
+
+  if (!visible) return null;
+
+  const config = VARIANT_CONFIG[variant];
+
+  const iconEl =
+    isValidElement(config.icon) ?
+      cloneElement(config.icon as React.ReactElement<{ style?: React.CSSProperties }>, {
+        style: { fontSize: 20, color: config.iconColor, display: 'block' },
+      })
+    : config.icon;
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        background: config.bgTint,
+        border: `1px solid ${config.accentColor}33`,
+        borderLeft: `4px solid ${config.accentColor}`,
+        borderRadius: 8,
+        padding: '12px 14px',
+        boxShadow: `0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px ${config.accentColor}1A`,
+        minWidth: 280,
+        maxWidth: 440,
+        fontFamily: '"Roboto", sans-serif',
+        pointerEvents: 'all',
+      }}
+    >
+      {/* Icon circle */}
+      <span
+        style={{
+          flexShrink: 0,
+          width: 36,
+          height: 36,
+          borderRadius: '50%',
+          background: config.iconBg,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {iconEl}
+      </span>
+
+      {/* Message */}
+      <span
+        style={{
+          flex: 1,
+          fontSize: 14,
+          fontWeight: 600,
+          lineHeight: 1.5,
+          color: '#0F172A',
+          wordBreak: 'break-word',
+          letterSpacing: '0.01em',
+        }}
+      >
+        {message}
+      </span>
+
+      {/* Close button */}
+      <button
+        aria-label="Close notification"
+        onClick={dismiss}
+        style={{
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: 2,
+          borderRadius: 4,
+          color: '#9CA3AF',
+          lineHeight: 0,
+        }}
+      >
+        <CloseIcon style={{ fontSize: 16, color: '#9CA3AF' }} />
+      </button>
+    </div>
+  );
+};
+
+// ─── Toast Container ──────────────────────────────────────────────────────────
+
+interface InternalToastItem extends ToastItem {
+  key: string;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const noopToast: ToastContextValue = { showToast: () => {} };
+
+export const useToastDS = (): ToastContextValue => {
+  const ctx = useContext(ToastContext);
+  return ctx ?? noopToast;
+};
+
+export const ToastProvider = ({
+  children,
+  position = 'top-right',
+}: React.PropsWithChildren<ToastContainerProps>) => {
+  const [toasts, setToasts] = useState<InternalToastItem[]>([]);
+
+  const showToast = useCallback(
+    (message: string, variant: ToastVariant = 'info', duration = 4000) => {
+      const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      setToasts((prev) => [...prev, { id, key: id, message, variant, duration }]);
+    },
+    []
+  );
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const posStyle = POSITION_STYLES[position];
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <div
+        aria-label="Notifications"
+        style={{
+          position: 'fixed',
+          zIndex: 9999,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+          pointerEvents: 'none',
+          ...posStyle,
+        }}
+      >
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.key}
+            message={toast.message}
+            variant={toast.variant}
+            duration={toast.duration}
+            onClose={() => removeToast(toast.id)}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,31 @@
+export type ToastVariant = 'success' | 'warning' | 'error' | 'info';
+
+export type ToastPosition =
+  | 'top-right'
+  | 'top-left'
+  | 'top-center'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'bottom-center';
+
+export interface ToastItem {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  duration: number;
+}
+
+export interface ToastProps {
+  message: string;
+  variant?: ToastVariant;
+  duration?: number;
+  onClose?: () => void;
+}
+
+export interface ToastContainerProps {
+  position?: ToastPosition;
+}
+
+export interface ToastContextValue {
+  showToast: (message: string, variant?: ToastVariant, duration?: number) => void;
+}