@altruist03/ui 0.1.0 → 0.2.0

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,457 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+import { SectionIcon } from '../SectionIcon/SectionIcon';
+import { ReportDollarIcon } from '../../icons/ReportDollarIcon';
+import AddIcon from '@mui/icons-material/Add';
+import DownloadIcon from '@mui/icons-material/Download';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import UploadIcon from '@mui/icons-material/Upload';
+import SearchIcon from '@mui/icons-material/Search';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+
+const meta: Meta<typeof Button> = {
+  title: 'Design System/Button',
+  component: Button,
+  tags: [],
+  decorators: [(Story) => <Story />],
+  args: {
+    children: 'Button',
+    variant: 'blue',
+    size: 'md',
+    disabled: false,
+    fullWidth: false,
+    iconOnly: false,
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['blue', 'red', 'grey'],
+      description: 'Button variant style',
+      table: {
+        type: { summary: 'blue | red | grey' },
+        defaultValue: { summary: 'blue' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Button size',
+      table: {
+        type: { summary: 'sm | md | lg' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disable the button',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    fullWidth: {
+      control: { type: 'boolean' },
+      description: 'Make button full width',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    iconOnly: {
+      control: { type: 'boolean' },
+      description: 'Show only icon (no text)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Show a loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    leftIcon: {
+      control: { type: 'select' },
+      options: ['none', 'download', 'add', 'upload', 'search', 'refresh'],
+      mapping: {
+        none: null,
+        download: <DownloadIcon />,
+        add: <AddIcon />,
+        upload: <UploadIcon />,
+        search: <SearchIcon />,
+        refresh: <RefreshIcon />,
+      },
+      description: 'Icon to display on the left side',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    rightIcon: {
+      control: { type: 'select' },
+      options: ['none', 'arrowForward', 'arrowBack'],
+      mapping: {
+        none: null,
+        arrowForward: <ArrowForwardIcon />,
+        arrowBack: <ArrowBackIcon />,
+      },
+      description: 'Icon to display on the right side',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    children: {
+      control: { type: 'text' },
+      description: 'Button text content',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+// Main interactive story with all controls
+export const Playground: Story = {
+  args: {
+    variant: 'blue',
+    size: 'md',
+    children: 'Button',
+    disabled: false,
+    fullWidth: false,
+    iconOnly: false,
+    leftIcon: 'none',
+    rightIcon: 'none',
+  },
+};
+
+// Showcase story with multiple button examples
+export const Showcase: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '32px',
+        padding: '20px',
+      }}
+    >
+      {/* Variants Section */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Button Variants
+        </h3>
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+          <Button variant="blue">Blue Button</Button>
+          <Button variant="red">Red Button</Button>
+          <Button variant="grey">Grey Button</Button>
+        </div>
+      </div>
+
+      {/* Sizes Section */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>All Sizes</h3>
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+          }}
+        >
+          <Button size="sm" variant="blue">
+            Small Button
+          </Button>
+          <Button size="md" variant="blue">
+            Medium Button
+          </Button>
+          <Button size="lg" variant="blue">
+            Large Button
+          </Button>
+        </div>
+      </div>
+
+      {/* Variants with All Sizes */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Variants × Sizes
+        </h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div
+            style={{
+              display: 'flex',
+              gap: '12px',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <span style={{ minWidth: '80px', fontSize: '14px' }}>Small:</span>
+            <Button size="sm" variant="blue">
+              Blue
+            </Button>
+            <Button size="sm" variant="red">
+              Red
+            </Button>
+            <Button size="sm" variant="grey">
+              Grey
+            </Button>
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              gap: '12px',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <span style={{ minWidth: '80px', fontSize: '14px' }}>Medium:</span>
+            <Button size="md" variant="blue">
+              Blue
+            </Button>
+            <Button size="md" variant="red">
+              Red
+            </Button>
+            <Button size="md" variant="grey">
+              Grey
+            </Button>
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              gap: '12px',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <span style={{ minWidth: '80px', fontSize: '14px' }}>Large:</span>
+            <Button size="lg" variant="blue">
+              Blue
+            </Button>
+            <Button size="lg" variant="red">
+              Red
+            </Button>
+            <Button size="lg" variant="grey">
+              Grey
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Disabled States */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Disabled States
+        </h3>
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+          <Button variant="blue" disabled>
+            Disabled Blue
+          </Button>
+          <Button variant="red" disabled>
+            Disabled Red
+          </Button>
+          <Button variant="grey" disabled>
+            Disabled Grey
+          </Button>
+        </div>
+      </div>
+
+      {/* Loading States */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Loading States
+        </h3>
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+          }}
+        >
+          <Button variant="blue" loading>
+            Loading
+          </Button>
+          <Button variant="blue" leftIcon={<AddIcon />} loading>
+            Save
+          </Button>
+          <Button variant="grey" iconOnly loading>
+            <DownloadIcon />
+          </Button>
+          <Button variant="red" rightIcon={<ArrowForwardIcon />} loading>
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {/* Buttons with Icons */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Buttons with Icons
+        </h3>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            width: '300px',
+          }}
+        >
+          <Button variant="blue" leftIcon={<DownloadIcon />}>
+            Download
+          </Button>
+          <Button variant="blue" rightIcon={<ArrowForwardIcon />}>
+            Next
+          </Button>
+          <Button variant="blue" leftIcon={<AddIcon />}>
+            Add New
+          </Button>
+          <Button variant="red" leftIcon={<UploadIcon />}>
+            Upload
+          </Button>
+          <Button variant="grey" leftIcon={<SearchIcon />}>
+            Search
+          </Button>
+        </div>
+      </div>
+
+      {/* Icon Only Buttons */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Icon Only Buttons
+        </h3>
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            <Button iconOnly variant="blue" size="sm">
+              <AddIcon />
+            </Button>
+            <Button iconOnly variant="blue" size="md">
+              <DownloadIcon />
+            </Button>
+            <Button iconOnly variant="blue" size="lg">
+              <UploadIcon />
+            </Button>
+          </div>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            <Button iconOnly variant="red" size="sm">
+              <SearchIcon />
+            </Button>
+            <Button iconOnly variant="red" size="md">
+              <RefreshIcon />
+            </Button>
+            <Button iconOnly variant="red" size="lg">
+              <ArrowForwardIcon />
+            </Button>
+          </div>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            <Button iconOnly variant="grey" size="sm">
+              <AddIcon />
+            </Button>
+            <Button iconOnly variant="grey" size="md">
+              <DownloadIcon />
+            </Button>
+            <Button iconOnly variant="grey" size="lg">
+              <UploadIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Action Buttons Examples */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Action Buttons
+        </h3>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            width: '200px',
+          }}
+        >
+          <Button variant="blue">Save</Button>
+          <Button variant="blue">Submit</Button>
+          <Button variant="blue" disabled>
+            Disabled
+          </Button>
+          <Button variant="grey">Cancel</Button>
+        </div>
+      </div>
+
+      {/* Section Icon Tiles */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Section Icon Tiles
+        </h3>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              gap: '12px',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <span style={{ minWidth: '80px', fontSize: '14px' }}>Sizes:</span>
+            <SectionIcon size="sm" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon size="md" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon size="lg" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon size="xl" icon={<DescriptionOutlinedIcon />} />
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              gap: '12px',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <span style={{ minWidth: '80px', fontSize: '14px' }}>Variants:</span>
+            <SectionIcon variant="green" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon variant="blue" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon variant="grey" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon variant="red" icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon variant="yellow" icon={<DescriptionOutlinedIcon />} />
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              gap: '12px',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <span style={{ minWidth: '80px', fontSize: '14px' }}>Icons:</span>
+            <SectionIcon icon={<DescriptionOutlinedIcon />} />
+            <SectionIcon icon={<ReportDollarIcon />} />
+            <SectionIcon variant="blue" icon={<DownloadIcon />} />
+            <SectionIcon variant="grey" icon={<SearchIcon />} />
+            <SectionIcon variant="yellow" icon={<RefreshIcon />} />
+            <SectionIcon variant="red" icon={<UploadIcon />} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,202 @@
+import React, { ReactNode, cloneElement, isValidElement, useState, useCallback } from 'react';
+import { getButtonTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import type { ButtonVariant, ButtonSize, ButtonShape } from '../../tokens';
+import { Spinner } from '../Spinner/Spinner';
+
+interface CustomButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  iconOnly?: boolean;
+  fullWidth?: boolean;
+  showBoderRadis?: boolean;
+  loading?: boolean;
+}
+
+export const Button = ({
+  variant = 'blue',
+  size = 'md',
+  shape,
+  children,
+  leftIcon,
+  rightIcon,
+  iconOnly = false,
+  disabled = false,
+  fullWidth = false,
+  showBoderRadis = true,
+  loading = false,
+  type = 'button',
+  onMouseEnter,
+  onMouseLeave,
+  style,
+  ...rest
+}: CustomButtonProps) => {
+  // shape prop is kept for API compatibility but borderRadius now uses size-based values
+  void shape;
+  const [hovered, setHovered] = useState(false);
+  const resolvedTokens = useTokens();
+  const { colors, sizes } = getButtonTokensFromResolved(resolvedTokens);
+  const colorTokens = colors[variant];
+  const sizeTokens = sizes[size];
+
+  const hoverTextColor = colorTokens?.hoverTextColor ?? colorTokens?.color;
+  const disabledOpacity = disabled || loading ? 0.3 : 1;
+  const isHover = hovered && !disabled && !loading;
+
+  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 getWidth = () => {
+    if (iconOnly) return sizeTokens?.height;
+    if (fullWidth) return '100%';
+    return sizeTokens?.width;
+  };
+
+  const iconColor =
+    disabled || loading ? colorTokens?.color
+    : isHover ? hoverTextColor
+    : colorTokens?.color;
+  const effectiveColor = (style as React.CSSProperties)?.color ?? iconColor;
+  const backgroundColor =
+    disabled || loading ? colorTokens?.background
+    : isHover ? colorTokens?.hover
+    : colorTokens?.background;
+
+  const cloneIconWithColor = (icon: ReactNode) => {
+    if (!icon) return null;
+    if (isValidElement(icon)) {
+      const iconSizePx = (sizeTokens?.fontSize ?? 0) + 4;
+      const iconSize = `${iconSizePx}px`;
+      const existingStyle =
+        (icon as React.ReactElement<{ style?: React.CSSProperties }>).props?.style || {};
+      return cloneElement(
+        icon as React.ReactElement<{
+          style?: React.CSSProperties;
+          sx?: any;
+        }>,
+        {
+          style: {
+            ...existingStyle,
+            color: effectiveColor,
+            fill: effectiveColor,
+            fontSize: iconSize,
+            width: iconSize,
+            height: iconSize,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+        }
+      );
+    }
+    return icon;
+  };
+
+  const baseStyle: React.CSSProperties = {
+    backgroundColor,
+    color: iconColor,
+    height: sizeTokens?.height,
+    minHeight: sizeTokens?.height,
+    maxHeight: sizeTokens?.height,
+    minWidth:
+      iconOnly ? sizeTokens.height
+      : fullWidth ? '100%'
+      : undefined,
+    width: getWidth(),
+    padding: iconOnly ? 0 : sizeTokens?.padding,
+    fontSize: sizeTokens?.fontSize,
+    fontFamily: '"Roboto", sans-serif',
+    fontWeight: 500,
+    lineHeight: 1.5,
+    borderRadius: showBoderRadis ? sizeTokens?.borderRadius : 0,
+    border: colorTokens?.border || 'none',
+    textTransform: 'none',
+    boxSizing: 'border-box',
+    opacity: disabled || loading ? disabledOpacity : 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap:
+      !iconOnly && children && (leftIcon || rightIcon || loading) ?
+        (sizeTokens?.contentGap ?? 12)
+      : 0,
+    cursor: disabled || loading ? 'not-allowed' : 'pointer',
+    outline: 'none',
+    ...style,
+  };
+
+  return (
+    <button
+      {...rest}
+      type={type}
+      disabled={disabled || loading}
+      style={baseStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {iconOnly ?
+        <span
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: effectiveColor,
+          }}
+        >
+          {loading ?
+            cloneIconWithColor(<Spinner color={effectiveColor as string} />)
+          : cloneIconWithColor(leftIcon || rightIcon || children)}
+        </span>
+      : <>
+          {(loading || leftIcon) && (
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: effectiveColor,
+                flexShrink: 0,
+              }}
+            >
+              {loading ?
+                cloneIconWithColor(<Spinner color={effectiveColor as string} />)
+              : cloneIconWithColor(leftIcon)}
+            </span>
+          )}
+          {children && (
+            <span style={{ color: effectiveColor, whiteSpace: 'nowrap' }}>{children}</span>
+          )}
+          {rightIcon && !loading && (
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: effectiveColor,
+                flexShrink: 0,
+              }}
+            >
+              {cloneIconWithColor(rightIcon)}
+            </span>
+          )}
+        </>
+      }
+    </button>
+  );
+};

package/src/components/Button/Button.types.ts

@@ -0,0 +1,18 @@
+export type ButtonVariant = "blue" | "red" | "grey";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonShape = "rounded" | "square" | "pill";
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  children?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  iconOnly?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  showBoderRadis?: boolean;
+  onClick?: () => void;
+  loading?: boolean;
+}