@altruist03/ui 0.1.0 → 0.2.0

package/src/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,105 @@
+export type DatePickerSize = "sm" | "md" | "lg";
+
+export type DatePickerIconPosition = "start" | "end";
+
+export interface DatePickerProps {
+  /**
+   * Field label shown above the input
+   */
+  label: string;
+  /**
+   * Current value (for controlled usage)
+   */
+  value?: Date | null;
+  /**
+   * Default value (for uncontrolled usage)
+   */
+  defaultValue?: Date | null;
+  /**
+   * 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;
+  /**
+   * Size of the date picker field
+   */
+  size?: DatePickerSize;
+  /**
+   * Icon element to render inside the input
+   *
+   * Example:
+   *   import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+   *   <DatePicker icon={<CalendarTodayIcon />} />
+   *
+   * If you prefer naming convention like `calendar_icon`, you can wrap it:
+   *   const calendar_icon = <CalendarTodayIcon />;
+   *   <DatePicker icon={calendar_icon} />
+   */
+  icon?: React.ReactNode;
+  /**
+   * Position of the icon inside the input
+   */
+  iconPosition?: DatePickerIconPosition;
+  /**
+   * Input name attribute
+   */
+  name?: string;
+  /**
+   * HTML id attribute (used to link label and input)
+   */
+  id?: string;
+  /**
+   * onChange handler
+   */
+  onChange?: (value: Date | null) => void;
+  /**
+   * onBlur handler
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * onFocus handler
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * Minimum selectable date
+   */
+  minDate?: Date;
+  /**
+   * Maximum selectable date
+   */
+  maxDate?: Date;
+  /**
+   * Format string for displaying the date
+   */
+  format?: string;
+  /**
+   * Format string for input parsing (if different from display format)
+   * If not provided, will use the `format` prop value
+   */
+  inputFormat?: string;
+  /**
+   * Allow users to type the date directly in the input field
+   * If false, users can only select dates from the calendar picker
+   * @default true
+   */
+  allowKeyboardInput?: boolean;
+}

package/src/components/DatePicker/DateTimePicker.tsx

@@ -0,0 +1,35 @@
+import { DatePicker } from './DatePicker';
+import type { DatePickerWrapperProps } from './DatePicker';
+
+export type DateTimePickerProps = DatePickerWrapperProps & {
+  /** Display format for date and time (default: yyyy/MM/dd HH:mm) */
+  dateFormat?: string;
+  /** Minute step in the time list (default: 1) */
+  timeIntervals?: number;
+};
+
+/**
+ * Date and time picker built on the design-system DatePicker (24-hour format).
+ */
+export function DateTimePicker({
+  dateFormat = 'yyyy/MM/dd HH:mm',
+  timeFormat = 'HH:mm',
+  timeIntervals = 1,
+  timeCaption = 'Time',
+  placeholderText = 'Select date and time',
+  ...props
+}: DateTimePickerProps) {
+  return (
+    <DatePicker
+      {...props}
+      showTimeSelect
+      timeFormat={timeFormat}
+      timeIntervals={timeIntervals}
+      timeCaption={timeCaption}
+      dateFormat={dateFormat}
+      placeholderText={placeholderText}
+    />
+  );
+}
+
+export default DateTimePicker;

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,179 @@
+import { useCallback, type CSSProperties, forwardRef } from 'react';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { DatePicker, ExampleCustomInput } from '../DatePicker/DatePicker';
+import type { DateRangePickerProps } from './DateRangePicker.types';
+
+const FIELD_HEIGHT: Record<NonNullable<DateRangePickerProps['size']>, number> = {
+  sm: 32,
+  md: 40,
+  lg: 48,
+};
+
+const RangeInput = forwardRef<HTMLDivElement, any>((props, ref) => {
+  const {
+    startLabel,
+    endLabel,
+    startPlaceholder,
+    endPlaceholder,
+    disabled,
+    wrapperStyle,
+    fieldGroupStyle,
+    inlineLabelStyle,
+    fieldStyle,
+    startDate,
+    endDate,
+    onClick,
+    isOpen,
+    onToggleOpen,
+    onToggleClose,
+    mouseDownOnFieldRef,
+    className,
+  } = props;
+  const size = (props.size || 'sm') as NonNullable<DateRangePickerProps['size']>;
+
+  // If date-fns format is used, we can just do a very simple slice for now or use toLocaleDateString
+  const valStart = startDate ? startDate.toLocaleDateString() : '';
+  const valEnd = endDate ? endDate.toLocaleDateString() : '';
+
+  return (
+    <div className={className} style={wrapperStyle} ref={ref}>
+      <div style={fieldGroupStyle}>
+        <span style={inlineLabelStyle}>{startLabel}</span>
+        <div style={fieldStyle}>
+          <ExampleCustomInput
+            value={valStart}
+            placeholder={startPlaceholder}
+            disabled={disabled}
+            size={size}
+            iconName="calendar"
+            onClick={onClick}
+            isOpen={isOpen}
+            onToggleOpen={onToggleOpen}
+            onToggleClose={onToggleClose}
+            mouseDownOnFieldRef={mouseDownOnFieldRef}
+          />
+        </div>
+      </div>
+
+      <span
+        aria-hidden
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          color: '#6B7280',
+          height: FIELD_HEIGHT[size],
+        }}
+      >
+        <ArrowForwardIcon sx={{ fontSize: 18 }} />
+      </span>
+
+      <div style={fieldGroupStyle}>
+        <span style={inlineLabelStyle}>{endLabel}</span>
+        <div style={fieldStyle}>
+          <ExampleCustomInput
+            value={valEnd}
+            placeholder={endPlaceholder}
+            disabled={disabled}
+            size={size}
+            iconName="calendar"
+            onClick={onClick}
+            isOpen={isOpen}
+            onToggleOpen={onToggleOpen}
+            onToggleClose={onToggleClose}
+            mouseDownOnFieldRef={mouseDownOnFieldRef}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export function DateRangePicker({
+  startDate,
+  endDate,
+  onChange,
+  startLabel = 'From',
+  endLabel = 'To',
+  dateFormat = 'MMM dd, yyyy',
+  startPlaceholder = 'From',
+  endPlaceholder = 'To',
+  size = 'sm',
+  minDate,
+  maxDate,
+  disabled,
+  className,
+  style,
+}: DateRangePickerProps) {
+  const handleRangeChange = useCallback(
+    (dates: any) => {
+      if (Array.isArray(dates)) {
+        const [nextStart, nextEnd] = dates;
+        onChange({ startDate: nextStart, endDate: nextEnd });
+      } else {
+        onChange({ startDate: dates, endDate: null });
+      }
+    },
+    [onChange]
+  );
+
+  const wrapperStyle: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 12,
+    ...style,
+  };
+
+  const fieldGroupStyle: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+  };
+
+  const inlineLabelStyle: CSSProperties = {
+    fontSize: size === 'lg' ? 14 : 13,
+    fontWeight: 500,
+    color: disabled ? '#9CA3AF' : '#374151',
+    whiteSpace: 'nowrap',
+  };
+
+  const fieldWidth =
+    size === 'lg' ? 220
+    : size === 'md' ? 200
+    : 188;
+  const fieldStyle: CSSProperties = {
+    width: fieldWidth,
+  };
+
+  const DatePickerAny = DatePicker as any;
+
+  return (
+    <div className={className}>
+      <DatePickerAny
+        selectsRange={true}
+        startDate={startDate}
+        endDate={endDate}
+        onChange={handleRangeChange}
+        dateFormat={dateFormat}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabled={disabled}
+        customInput={
+          <RangeInput
+            startLabel={startLabel}
+            endLabel={endLabel}
+            startPlaceholder={startPlaceholder}
+            endPlaceholder={endPlaceholder}
+            size={size}
+            disabled={disabled}
+            wrapperStyle={wrapperStyle}
+            fieldGroupStyle={fieldGroupStyle}
+            inlineLabelStyle={inlineLabelStyle}
+            fieldStyle={fieldStyle}
+            startDate={startDate}
+            endDate={endDate}
+          />
+        }
+      />
+    </div>
+  );
+}

package/src/components/DateRangePicker/DateRangePicker.types.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties } from 'react';
+
+export type DateRangePickerSize = 'sm' | 'md' | 'lg';
+
+export interface DateRangePickerProps {
+  /** Currently selected start date. */
+  startDate: Date | null;
+  /** Currently selected end date. */
+  endDate: Date | null;
+  /** Fired whenever either date changes. */
+  onChange: (range: { startDate: Date | null; endDate: Date | null }) => void;
+  /** Label rendered above the start-date picker. Defaults to "Start date". */
+  startLabel?: string;
+  /** Label rendered above the end-date picker. Defaults to "End date". */
+  endLabel?: string;
+  /** Display format passed through to the underlying DatePickers. */
+  dateFormat?: string;
+  /** Placeholder shown in the start input when empty. */
+  startPlaceholder?: string;
+  /** Placeholder shown in the end input when empty. */
+  endPlaceholder?: string;
+  /** Size of each underlying DatePicker. */
+  size?: DateRangePickerSize;
+  /** Minimum selectable date for the start picker. */
+  minDate?: Date;
+  /** Maximum selectable date for the end picker. */
+  maxDate?: Date;
+  /** Disable both fields. */
+  disabled?: boolean;
+  /** Optional className applied to the outer wrapper. */
+  className?: string;
+  /** Optional inline style applied to the outer wrapper. */
+  style?: CSSProperties;
+}

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,243 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Drawer } from './Drawer';
+import type { DrawerProps } from './Drawer.types';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Design System/Drawer',
+  component: Drawer,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px', fontFamily: 'Inter, sans-serif' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    anchor: 'right',
+    size: 'lg',
+    disableBackdropClose: false,
+    transitionDuration: 300,
+  } as DrawerProps,
+  argTypes: {
+    anchor: {
+      control: { type: 'radio' },
+      options: ['left', 'right', 'top', 'bottom'],
+      description: 'Side from which the drawer slides in',
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Size preset for drawer width (left/right) or height (top/bottom)',
+    },
+    width: {
+      control: { type: 'number' },
+      description: 'Custom width/height in pixels (overrides size when set)',
+    },
+    disableBackdropClose: {
+      control: { type: 'boolean' },
+      description: 'Prevent closing when clicking the backdrop',
+    },
+    transitionDuration: {
+      control: { type: 'number' },
+      description: 'Animation duration in milliseconds',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+const DrawerContent = ({ title, description }: { title: string; description: string }) => (
+  <div style={{ padding: '24px' }}>
+    <h3 style={{ margin: '0 0 16px' }}>{title}</h3>
+    <p style={{ margin: 0 }}>{description}</p>
+  </div>
+);
+
+export const Playground: Story = {
+  args: {
+    anchor: 'right',
+    size: 'lg',
+  },
+};
+
+const PlaygroundComponent = (args: DrawerProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Drawer</Button>
+      <Drawer {...args} open={open} onClose={() => setOpen(false)}>
+        <DrawerContent
+          title="Drawer Content"
+          description="Adjust anchor, size, and other properties through the Storybook controls."
+        />
+        <div style={{ padding: '0 24px 24px' }}>
+          <Button variant="grey" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+Playground.render = (args) => <PlaygroundComponent {...args} />;
+
+const ShowcaseComponent = () => {
+  const [openRight, setOpenRight] = useState(false);
+  const [openLeft, setOpenLeft] = useState(false);
+  const [openTop, setOpenTop] = useState(false);
+  const [openBottom, setOpenBottom] = useState(false);
+  const [openSm, setOpenSm] = useState(false);
+  const [openMd, setOpenMd] = useState(false);
+  const [openLg, setOpenLg] = useState(false);
+  const [openCustom, setOpenCustom] = useState(false);
+  const [openNoBackdrop, setOpenNoBackdrop] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {/* Right anchor (default) */}
+      <div>
+        <Button onClick={() => setOpenRight(true)}>Open Right Drawer</Button>
+        <Drawer anchor="right" size="lg" open={openRight} onClose={() => setOpenRight(false)}>
+          <DrawerContent
+            title="Right Drawer"
+            description="Drawer slides in from the right (default)."
+          />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenRight(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Left anchor */}
+      <div>
+        <Button onClick={() => setOpenLeft(true)}>Open Left Drawer</Button>
+        <Drawer anchor="left" size="md" open={openLeft} onClose={() => setOpenLeft(false)}>
+          <DrawerContent
+            title="Left Drawer"
+            description="Drawer slides in from the left (useful for RTL layouts)."
+          />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenLeft(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Top anchor */}
+      <div>
+        <Button onClick={() => setOpenTop(true)}>Open Top Drawer</Button>
+        <Drawer anchor="top" size="md" open={openTop} onClose={() => setOpenTop(false)}>
+          <DrawerContent title="Top Drawer" description="Drawer slides in from the top." />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenTop(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Bottom anchor */}
+      <div>
+        <Button onClick={() => setOpenBottom(true)}>Open Bottom Drawer</Button>
+        <Drawer anchor="bottom" size="md" open={openBottom} onClose={() => setOpenBottom(false)}>
+          <DrawerContent title="Bottom Drawer" description="Drawer slides in from the bottom." />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenBottom(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Small size */}
+      <div>
+        <Button onClick={() => setOpenSm(true)}>Open Small (550px)</Button>
+        <Drawer anchor="right" size="sm" open={openSm} onClose={() => setOpenSm(false)}>
+          <DrawerContent title="Small Drawer" description="Size preset: sm (550px width)." />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenSm(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Medium size */}
+      <div>
+        <Button onClick={() => setOpenMd(true)}>Open Medium (800px)</Button>
+        <Drawer anchor="right" size="md" open={openMd} onClose={() => setOpenMd(false)}>
+          <DrawerContent title="Medium Drawer" description="Size preset: md (800px width)." />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenMd(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Large size */}
+      <div>
+        <Button onClick={() => setOpenLg(true)}>Open Large (1200px)</Button>
+        <Drawer anchor="right" size="lg" open={openLg} onClose={() => setOpenLg(false)}>
+          <DrawerContent title="Large Drawer" description="Size preset: lg (1200px width)." />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenLg(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Custom width */}
+      <div>
+        <Button onClick={() => setOpenCustom(true)}>Open Custom (1200px)</Button>
+        <Drawer anchor="right" width={1200} open={openCustom} onClose={() => setOpenCustom(false)}>
+          <DrawerContent
+            title="Custom Width Drawer"
+            description="Fixed width of 1200px via the width prop."
+          />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenCustom(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+
+      {/* Disable backdrop close */}
+      <div>
+        <Button onClick={() => setOpenNoBackdrop(true)}>Open (Backdrop Click Disabled)</Button>
+        <Drawer
+          anchor="right"
+          size="md"
+          open={openNoBackdrop}
+          onClose={() => setOpenNoBackdrop(false)}
+          disableBackdropClose
+        >
+          <DrawerContent
+            title="No Backdrop Close"
+            description="Clicking the backdrop will not close this drawer. Use the Close button or Escape key."
+          />
+          <div style={{ padding: '0 24px 24px' }}>
+            <Button variant="grey" onClick={() => setOpenNoBackdrop(false)}>
+              Close
+            </Button>
+          </div>
+        </Drawer>
+      </div>
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <ShowcaseComponent />,
+};