@altruist03/ui 0.1.0 → 0.2.0

package/src/components/DataTable/DataTable.types.ts

@@ -0,0 +1,49 @@
+export interface DataTableProps {
+  /** react-table props */
+  getTableProps: (propGetter?: any) => any;
+  getTableBodyProps: (propGetter?: any) => any;
+  headerGroups: any[];
+  page?: any[];
+  rows?: any[];
+  prepareRow: (row: any) => void;
+  /** If data is loading */
+  loading?: boolean;
+  /** View Status (pagination state) */
+  Status?: {
+    pageSize?: number;
+    pageNo?: number;
+    [key: string]: any;
+  };
+  /** Total data length */
+  length?: number;
+  /** Message to display when no records are found */
+  emptyMessage?: string;
+  /** Height of the empty-state illustration, in pixels. Default 300. */
+  emptyStateHeight?: number;
+  /** Keep headers fixed at top */
+  stickyHeader?: boolean;
+  /** Outer container class */
+  className?: string;
+  /** When set, the body row whose `original.clientId` matches is outlined (e.g. brief return-from-detail highlight). */
+  highlightRowClientId?: string | number | null;
+  /** Optional accessor for the id compared with `highlightRowClientId`; use when a row's default id field (userId, deviceId, ...) is not the one that was saved. */
+  getHighlightRowId?: (original: unknown) => string | number | null | undefined;
+  /** Array of column headers whose td should have text-center */
+  className_td_center?: string[];
+  /** Array of column headers whose td should have text-end */
+  className_td_end?: string[];
+  /** Prevent horizontal scroll; wraps cell content and uses fixed table layout */
+  preventHorizontalScroll?: boolean;
+  /** Max width of the frozen left pane when the table is split. Default `42%`. */
+  frozenPaneMaxWidth?: string | number;
+  /**
+   * When the table is split, size scrollable columns so this many fit in the right pane.
+   * Pass a number for a fixed count, or `'auto'` to fit as many as the pane width allows
+   * (using `minScrollColumnWidth` / `maxScrollColumns`).
+   */
+  visibleScrollColumns?: number | 'auto';
+  /** Minimum width (px) per scroll column when `visibleScrollColumns` is `'auto'`. Default `104`. */
+  minScrollColumnWidth?: number;
+  /** Cap on visible scroll columns when `visibleScrollColumns` is `'auto'`. Default `6`. */
+  maxScrollColumns?: number;
+}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,341 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+import type { DatePickerWrapperProps } from './DatePicker';
+import { DateRangePicker } from '../DateRangePicker/DateRangePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Design System/DatePicker',
+  component: DatePicker,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px', maxWidth: '420px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: 'Valid Upto',
+    placeholderText: 'Valid Upto',
+    dateFormat: 'yyyy-MM-dd',
+    isClearable: false,
+    error: false,
+    helperText: '(Date Format - YYYY-MM-DD)',
+    size: 'md',
+    required: false,
+  } as DatePickerWrapperProps,
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+      description: 'Label shown above the input (like TextField)',
+    },
+    required: {
+      control: { type: 'boolean' },
+      description: 'Marks the field as required and appends * to the label',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant: sm, md, or lg',
+    },
+    placeholderText: {
+      control: { type: 'text' },
+      description: 'Placeholder text shown in the input field',
+    },
+    dateFormat: {
+      control: { type: 'text' },
+      description: "Format string for displaying the date (e.g., 'yyyy-MM-dd', 'MM/dd/yyyy')",
+    },
+    isClearable: {
+      control: { type: 'boolean' },
+      description: 'Whether the date picker can be cleared',
+    },
+    error: {
+      control: { type: 'boolean' },
+      description: 'Shows error state (red border and red helper text)',
+    },
+    helperText: {
+      control: { type: 'text' },
+      description: 'Helper text displayed below the input (e.g., date format or error message)',
+    },
+    selected: {
+      control: { type: 'date' },
+      description: 'Currently selected date (for controlled usage)',
+    },
+    minDate: {
+      control: { type: 'date' },
+      description: 'Minimum selectable date',
+    },
+    maxDate: {
+      control: { type: 'date' },
+      description: 'Maximum selectable date',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disables the date picker',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when the date changes',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+const PlaygroundComponent = (args: DatePickerWrapperProps) => {
+  const [selectedDate, setSelectedDate] = React.useState<Date | null>(args.selected || null);
+
+  React.useEffect(() => {
+    setSelectedDate(args.selected || null);
+  }, [args.selected]);
+
+  return (
+    <DatePicker
+      {...args}
+      selected={selectedDate}
+      onChange={(date) => {
+        setSelectedDate(date);
+        args.onChange?.(date);
+      }}
+      showTimeSelect
+      timeFormat="HH:mm"
+      timeIntervals={15}
+      timeCaption="time"
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+export const Playground: Story = {
+  render: PlaygroundComponent,
+  args: {
+    label: 'Valid Upto',
+    placeholderText: 'Valid Upto',
+    dateFormat: 'yyyy-MM-dd',
+    helperText: '(Date Format - YYYY-MM-DD)',
+    size: 'md',
+    required: false,
+  },
+};
+
+const ShowcaseComponent = () => {
+  const [date1, setDate1] = React.useState<Date | null>(null);
+  const [date2, setDate2] = React.useState<Date | null>(new Date(1990, 5, 15));
+  const [date3, setDate3] = React.useState<Date | null>(new Date(2024, 0, 1));
+  const [dateRange, setDateRange] = React.useState<[Date | null, Date | null]>([null, null]);
+  const [date5, setDate5] = React.useState<Date | null>(null);
+  const [date6, setDate6] = React.useState<Date | null>(null);
+  const [date7, setDate7] = React.useState<Date | null>(new Date(2024, 5, 15));
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {/* Default with label */}
+      <DatePicker
+        label="Date of Birth"
+        placeholderText="Date of Birth"
+        dateFormat="yyyy-MM-dd"
+        selected={date1}
+        onChange={setDate1}
+        helperText="(Date Format - YYYY-MM-DD)"
+      />
+
+      {/* With Value */}
+      <DatePicker
+        label="Date of Birth"
+        placeholderText="Date of Birth"
+        dateFormat="yyyy-MM-dd"
+        selected={date2}
+        onChange={setDate2}
+        helperText="(Date Format - YYYY-MM-DD)"
+      />
+
+      {/* Required */}
+      <DatePicker
+        label="Appointment Date"
+        placeholderText="Select appointment date"
+        dateFormat="yyyy-MM-dd"
+        selected={null}
+        onChange={() => {}}
+        required
+        helperText="(Date Format - YYYY-MM-DD)"
+      />
+
+      {/* Error State */}
+      <DatePicker
+        label="Appointment Date"
+        placeholderText="Appointment Date"
+        dateFormat="yyyy-MM-dd"
+        selected={date3}
+        onChange={setDate3}
+        error
+        helperText="Please select a valid date"
+      />
+
+      {/* Date Range */}
+      <DatePicker
+        label="Select Date Range"
+        placeholderText="Select Date Range"
+        dateFormat="yyyy-MM-dd"
+        selectsRange
+        startDate={dateRange[0]}
+        endDate={dateRange[1]}
+        onChange={(update: [Date | null, Date | null] | Date | null) => {
+          if (Array.isArray(update)) {
+            setDateRange(update);
+          }
+        }}
+        minDate={new Date(2024, 0, 1)}
+        maxDate={new Date(2024, 11, 31)}
+        helperText="Select a date range between Jan 1, 2024 and Dec 31, 2024"
+      />
+
+      {/* Clearable */}
+      <DatePicker
+        label="Select a date"
+        placeholderText="Select a date"
+        dateFormat="yyyy-MM-dd"
+        selected={date5}
+        onChange={setDate5}
+        isClearable
+        helperText="(Date Format - YYYY-MM-DD)"
+      />
+
+      {/* Custom Date Format */}
+      <DatePicker
+        label="Select a date"
+        placeholderText="Select a date"
+        dateFormat="MM/dd/yyyy"
+        selected={date6}
+        onChange={setDate6}
+        helperText="(Date Format - MM/DD/YYYY)"
+      />
+
+      {/* Disabled */}
+      <DatePicker
+        label="Select a date"
+        placeholderText="Select a date"
+        dateFormat="yyyy-MM-dd"
+        disabled
+        selected={date7}
+        onChange={setDate7}
+        helperText="(Date Format - YYYY-MM-DD)"
+      />
+
+      {/* Without label */}
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Without label
+        </h3>
+        <DatePicker
+          placeholderText="Select a date"
+          dateFormat="yyyy-MM-dd"
+          selected={null}
+          onChange={() => {}}
+          helperText="(Date Format - YYYY-MM-DD)"
+        />
+      </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>
+            <DatePicker
+              label="Valid Upto"
+              placeholderText="Select a date"
+              dateFormat="yyyy-MM-dd"
+              size="sm"
+              selected={null}
+              onChange={() => {}}
+              helperText="(Date Format - YYYY-MM-DD)"
+            />
+          </div>
+          <div>
+            <h4 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '8px' }}>Medium (md)</h4>
+            <DatePicker
+              label="Valid Upto"
+              placeholderText="Select a date"
+              dateFormat="yyyy-MM-dd"
+              size="md"
+              selected={null}
+              onChange={() => {}}
+              helperText="(Date Format - YYYY-MM-DD)"
+            />
+          </div>
+          <div>
+            <h4 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '8px' }}>Large (lg)</h4>
+            <DatePicker
+              label="Valid Upto"
+              placeholderText="Select a date"
+              dateFormat="yyyy-MM-dd"
+              size="lg"
+              selected={null}
+              onChange={() => {}}
+              helperText="(Date Format - YYYY-MM-DD)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: ShowcaseComponent,
+};
+
+const DateRangeComponent = () => {
+  const [range, setRange] = React.useState<{
+    startDate: Date | null;
+    endDate: Date | null;
+  }>({
+    startDate: new Date(2024, 9, 1),
+    endDate: new Date(2024, 9, 31),
+  });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          Date Range (From → To)
+        </h3>
+        <DateRangePicker startDate={range.startDate} endDate={range.endDate} onChange={setRange} />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
+          With custom labels
+        </h3>
+        <DateRangePicker
+          startDate={range.startDate}
+          endDate={range.endDate}
+          onChange={setRange}
+          startLabel="Start date"
+          endLabel="End date"
+          size="md"
+        />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>Disabled</h3>
+        <DateRangePicker
+          startDate={range.startDate}
+          endDate={range.endDate}
+          onChange={setRange}
+          disabled
+        />
+      </div>
+    </div>
+  );
+};
+
+export const DateRange: Story = {
+  render: DateRangeComponent,
+};