@altruist03/ui 0.1.0 → 0.2.0

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,254 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox, CheckboxGroup } from './Checkbox';
+import { fn } from '@storybook/test';
+
+const meta: Meta<typeof CheckboxGroup> = {
+  title: 'Design System/Checkbox',
+  component: CheckboxGroup,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px', maxWidth: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: 'Heading',
+    options: [
+      { label: 'Pick up', value: 'pickup' },
+      { label: 'Delivery', value: 'delivery' },
+    ],
+    direction: 'horizontal',
+    size: 'md',
+    disabled: false,
+    onChange: fn(),
+  } as any,
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+      description: 'The heading/label displayed above the checkbox group',
+    },
+    direction: {
+      control: { type: 'radio' },
+      options: ['horizontal', 'vertical'],
+      description: 'Layout direction of the checkboxes',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant: sm, md, or lg',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disable all checkboxes in the group',
+    },
+    value: {
+      control: { type: 'object' },
+      description: 'Selected values (controlled mode)',
+    },
+    defaultValue: {
+      control: { type: 'object' },
+      description: 'Default selected values (uncontrolled mode)',
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback fired when selection changes',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxGroup>;
+
+export const Playground: Story = {
+  render: (args) => <CheckboxGroup {...args} />,
+  args: {
+    label: 'Heading',
+    options: [
+      { label: 'Pick up', value: 'pickup' },
+      { label: 'Delivery', value: 'delivery' },
+    ],
+    direction: 'horizontal',
+    size: 'md',
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      {/* Basic Horizontal Checkbox Group */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Basic Checkboxes (Horizontal)
+        </h3>
+        <CheckboxGroup
+          label="Heading"
+          options={[
+            { label: 'Pick up', value: 'pickup' },
+            { label: 'Delivery', value: 'delivery' },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Basic Vertical Checkbox Group */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Basic Checkboxes (Vertical)
+        </h3>
+        <CheckboxGroup
+          label="Preferences"
+          options={[
+            { label: 'Email Notifications', value: 'email' },
+            { label: 'SMS Notifications', value: 'sms' },
+            { label: 'Push Notifications', value: 'push' },
+          ]}
+          direction="vertical"
+        />
+      </div>
+
+      {/* Checkbox Group with Default Selection */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          With Default Selection
+        </h3>
+        <CheckboxGroup
+          label="Services"
+          options={[
+            { label: 'Pick up', value: 'pickup' },
+            { label: 'Delivery', value: 'delivery' },
+            { label: 'In-store', value: 'instore' },
+          ]}
+          defaultValue={['pickup']}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Disabled Checkbox Group */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Disabled Checkboxes
+        </h3>
+        <CheckboxGroup
+          label="Heading"
+          options={[
+            { label: 'Pick up', value: 'pickup' },
+            { label: 'Delivery', value: 'delivery' },
+          ]}
+          disabled
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Checkbox Group with Individual Disabled Options */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          With Individual Disabled Options
+        </h3>
+        <CheckboxGroup
+          label="Notification Preferences"
+          options={[
+            { label: 'Email', value: 'email' },
+            { label: 'SMS', value: 'sms', disabled: true },
+            { label: 'Push', value: 'push' },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Individual Checkbox Examples */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Individual Checkboxes
+        </h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <Checkbox label="Selected" checked name="individual" />
+          <Checkbox label="Unselected" name="individual" />
+          <Checkbox label="Disabled Selected" checked disabled name="individual" />
+          <Checkbox label="Disabled Unselected" disabled name="individual" />
+          <Checkbox label="Indeterminate" indeterminate name="individual" />
+        </div>
+      </div>
+
+      {/* Multiple Selections */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Multiple Selections
+        </h3>
+        <CheckboxGroup
+          label="Select All That Apply"
+          options={[
+            { label: 'Option 1', value: 'opt1' },
+            { label: 'Option 2', value: 'opt2' },
+            { label: 'Option 3', value: 'opt3' },
+            { label: 'Option 4', value: 'opt4' },
+          ]}
+          defaultValue={['opt1', 'opt3']}
+          direction="vertical"
+        />
+      </div>
+
+      {/* Without Label */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Without Heading Label
+        </h3>
+        <CheckboxGroup
+          options={[
+            { label: 'Option A', value: 'a' },
+            { label: 'Option B', value: 'b' },
+            { label: 'Option C', value: 'c' },
+          ]}
+          direction="horizontal"
+        />
+      </div>
+
+      {/* Size variants: sm, md, lg */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Size Variants (sm, md, lg)
+        </h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          <div>
+            <h4 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '8px' }}>Small (sm)</h4>
+            <CheckboxGroup
+              label="Choose options"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+              ]}
+              size="sm"
+              direction="horizontal"
+            />
+          </div>
+          <div>
+            <h4 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '8px' }}>Medium (md)</h4>
+            <CheckboxGroup
+              label="Choose options"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+              ]}
+              size="md"
+              direction="horizontal"
+            />
+          </div>
+          <div>
+            <h4 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '8px' }}>Large (lg)</h4>
+            <CheckboxGroup
+              label="Choose options"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+              ]}
+              size="lg"
+              direction="horizontal"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,352 @@
+import React, { useRef, useEffect, useId } from 'react';
+import type { CheckboxProps, CheckboxGroupProps } from './Checkbox.types';
+import { getCheckboxTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+
+const CheckIcon = ({ size }: { size: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 12 12"
+    fill="none"
+    aria-hidden="true"
+    style={{ display: 'block' }}
+  >
+    <path
+      d="M2.5 6L5 8.5L9.5 3.5"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const IndeterminateIcon = ({ size }: { size: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 12 12"
+    fill="none"
+    aria-hidden="true"
+    style={{ display: 'block' }}
+  >
+    <path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
+  </svg>
+);
+
+export const Checkbox = ({
+  label,
+  labelPlacement = 'end',
+  size = 'md',
+  checked,
+  defaultChecked,
+  disabled = false,
+  indeterminate = false,
+  name,
+  id,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  helperText,
+  error,
+}: CheckboxProps) => {
+  const generatedId = useId();
+  const checkboxId = id || `${name || 'checkbox'}-${value || generatedId}`;
+  const checkboxRef = useRef<HTMLInputElement>(null);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [internalChecked, setInternalChecked] = React.useState(
+    checked !== undefined ? checked : defaultChecked || false
+  );
+
+  const resolvedTokens = useTokens();
+  const tokens = getCheckboxTokensFromResolved(resolvedTokens);
+
+  const checkboxSize =
+    size === 'sm' ? tokens.checkboxSizeSm
+    : size === 'lg' ? tokens.checkboxSizeLg
+    : tokens.checkboxSizeMd;
+  const checkboxBorderRadius =
+    size === 'sm' ? tokens.checkboxBorderRadiusSm
+    : size === 'lg' ? tokens.checkboxBorderRadiusLg
+    : tokens.checkboxBorderRadiusMd;
+  const labelFontSize =
+    size === 'sm' ? tokens.textFontSizeSm
+    : size === 'lg' ? tokens.textFontSizeLg
+    : tokens.textFontSizeMd;
+  const iconSize =
+    size === 'sm' ? 10
+    : size === 'lg' ? 14
+    : 12;
+
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  useEffect(() => {
+    if (checked !== undefined) {
+      setInternalChecked(checked);
+    }
+  }, [checked]);
+
+  const isChecked = checked !== undefined ? checked : internalChecked;
+  const isActive = isChecked || indeterminate;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newChecked = e.target.checked;
+    if (checked === undefined) {
+      setInternalChecked(newChecked);
+    }
+    onChange?.(e);
+  };
+
+  const isControlled = checked !== undefined;
+
+  const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+    className: 'ds-checkbox-input',
+    type: 'checkbox',
+    onChange: handleChange,
+    name,
+    id: checkboxId,
+    value,
+    disabled,
+    'aria-checked': indeterminate ? 'mixed' : isChecked,
+  };
+
+  if (isControlled) {
+    inputProps.checked = checked;
+  } else if (defaultChecked !== undefined) {
+    inputProps.defaultChecked = defaultChecked;
+  } else {
+    inputProps.checked = internalChecked;
+  }
+
+  const boxBorderColor =
+    isActive || (isHovered && !disabled) ? tokens.checkedBorderColor : tokens.checkboxColorInactive;
+
+  const boxStyle: React.CSSProperties = {
+    width: checkboxSize,
+    height: checkboxSize,
+    minWidth: checkboxSize,
+    borderRadius: checkboxBorderRadius,
+    border: `1.5px solid ${boxBorderColor}`,
+    backgroundColor: isActive ? tokens.checkboxColorActive : tokens.checkboxBackgroundInactive,
+    color: '#FFFFFF',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease',
+    boxShadow:
+      isFocused ? `0 0 0 2px ${tokens.checkedBorderColor}33`
+      : isActive ? 'none'
+      : 'inset 0 1px 2px rgba(15, 23, 42, 0.04)',
+    pointerEvents: 'none',
+    opacity: disabled ? 0.7 : 1,
+  };
+
+  const labelStyle: React.CSSProperties = {
+    fontSize: labelFontSize,
+    fontWeight: tokens.textFontWeight,
+    color: disabled ? tokens.textColorInactive : tokens.textColorActive,
+    userSelect: 'none',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    margin: 0,
+    lineHeight: '1.35',
+  };
+
+  const controlRowStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexDirection: labelPlacement === 'start' ? 'row-reverse' : 'row',
+    gap: tokens.textMarginLeft,
+    width: 'fit-content',
+    maxWidth: '100%',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  return (
+    <div
+      className="ds-checkbox"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        width: 'fit-content',
+        maxWidth: '100%',
+      }}
+    >
+      <label
+        htmlFor={checkboxId}
+        style={controlRowStyle}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <span
+          className="ds-checkbox-control"
+          style={{
+            position: 'relative',
+            display: 'inline-flex',
+            width: checkboxSize,
+            height: checkboxSize,
+            flexShrink: 0,
+          }}
+        >
+          <input
+            ref={checkboxRef}
+            {...inputProps}
+            onFocus={(e) => {
+              setIsFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              onBlur?.(e);
+            }}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+              margin: 0,
+              opacity: 0,
+              appearance: 'none',
+              WebkitAppearance: 'none',
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              zIndex: 1,
+            }}
+          />
+          <span className="ds-checkbox-box" style={boxStyle} aria-hidden="true">
+            {indeterminate ?
+              <IndeterminateIcon size={iconSize} />
+            : isChecked ?
+              <CheckIcon size={iconSize} />
+            : null}
+          </span>
+        </span>
+        {label ?
+          <span style={labelStyle}>{label}</span>
+        : null}
+      </label>
+      {helperText != null && helperText !== '' && (
+        <div
+          style={{
+            marginTop: tokens.helperTextMarginTop,
+            marginLeft: `calc(${checkboxSize} + ${tokens.textMarginLeft})`,
+            fontSize: tokens.helperTextFontSize,
+            color: error ? tokens.helperTextErrorColor : tokens.helperTextColor,
+            fontWeight: tokens.helperTextFontWeight,
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 4,
+          }}
+          role={error ? 'alert' : undefined}
+        >
+          <span>{helperText}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const CheckboxGroup = ({
+  label,
+  options,
+  value,
+  defaultValue,
+  name,
+  disabled = false,
+  direction = 'horizontal',
+  size = 'md',
+  columns,
+  className,
+  onChange,
+}: CheckboxGroupProps) => {
+  const groupName = name || `checkbox-group-${Math.random().toString(36).substr(2, 9)}`;
+  const [internalValue, setInternalValue] = React.useState<string[]>(
+    value !== undefined ? value : defaultValue || []
+  );
+
+  const resolvedTokens = useTokens();
+  const tokens = getCheckboxTokensFromResolved(resolvedTokens);
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const currentValue = value !== undefined ? value : internalValue;
+
+  const handleChange = (optionValue: string, checked: boolean) => {
+    let newValues: string[];
+    if (checked) {
+      newValues = [...currentValue, optionValue];
+    } else {
+      newValues = currentValue.filter((v) => v !== optionValue);
+    }
+
+    if (value === undefined) {
+      setInternalValue(newValues);
+    }
+    onChange?.(newValues);
+  };
+
+  const groupLayoutStyle: React.CSSProperties =
+    columns && columns > 1 ?
+      {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        columnGap: tokens.groupGapHorizontal,
+        rowGap: tokens.groupGapVertical,
+        alignItems: 'start',
+        justifyItems: 'start',
+      }
+    : {
+        display: 'flex',
+        flexDirection: direction === 'horizontal' ? 'row' : 'column',
+        gap: direction === 'horizontal' ? tokens.groupGapHorizontal : tokens.groupGapVertical,
+        flexWrap: direction === 'horizontal' ? 'wrap' : 'nowrap',
+        alignItems: direction === 'horizontal' ? 'center' : 'flex-start',
+      };
+
+  return (
+    <div
+      className={className ? `ds-checkbox-group ${className}` : 'ds-checkbox-group'}
+      style={{ width: '100%' }}
+    >
+      {label && (
+        <span
+          style={{
+            display: 'block',
+            fontSize: tokens.headingFontSize,
+            fontWeight: tokens.headingFontWeight,
+            color: tokens.headingColor,
+            marginBottom: tokens.headingMarginBottom,
+            lineHeight: 1.4,
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <div style={groupLayoutStyle}>
+        {options.map((option) => (
+          <Checkbox
+            key={option.value}
+            label={option.label}
+            value={option.value}
+            name={groupName}
+            size={size}
+            checked={currentValue.includes(option.value)}
+            disabled={disabled || option.disabled}
+            onChange={(e) => handleChange(option.value, e.target.checked)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};