@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/SelectScroll/SelectScroll.stories.tsx

@@ -0,0 +1,336 @@
+import React, { useCallback, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import SelectScroll from './SelectScroll';
+import type { SelectScrollProps } from './SelectScroll.types';
+
+// Sample options
+const countryOptions = [
+  'India',
+  'Afghanistan',
+  'UAE',
+  'Albania',
+  'Algeria',
+  'Andorra',
+  'Antigua and Barbuda',
+  'Argentina',
+  'Armenia',
+  'Australia',
+  'Austria',
+  'Bahrain',
+];
+
+const usernameOptions = ['John Doe', 'Jane Smith', 'Jim Beam', 'Jill Johnson', 'Jack Johnson'];
+
+// Options with objects
+const countryObjectOptions = [
+  { label: 'India', code: 'in' },
+  { label: 'Afghanistan', code: 'af' },
+  { label: 'UAE', code: 'ae' },
+  { label: 'Albania', code: 'al' },
+  { label: 'Algeria', code: 'dz' },
+];
+
+/** Mock directory for the Showcase / API search demo (simulates server-side filtering). */
+const MOCK_API_USERS: { id: string; displayName: string }[] = [
+  { id: 'u1', displayName: 'Alice Anderson' },
+  { id: 'u2', displayName: 'Bob Brown' },
+  { id: 'u3', displayName: 'Carol Chen' },
+  { id: 'u4', displayName: 'David Diaz' },
+  { id: 'u5', displayName: 'Elena Evans' },
+  { id: 'u6', displayName: 'Frank Foster' },
+  { id: 'u7', displayName: 'Grace Garcia' },
+  { id: 'u8', displayName: 'Henry Hughes' },
+  { id: 'u9', displayName: 'Ivy Ibrahim' },
+  { id: 'u10', displayName: 'James Johnson' },
+  { id: 'u11', displayName: 'Karen Kim' },
+  { id: 'u12', displayName: 'Leo Lee' },
+  { id: 'u13', displayName: 'Maria Martinez' },
+  { id: 'u14', displayName: 'Noah Nguyen' },
+  { id: 'u15', displayName: 'Olivia Olsen' },
+  { id: 'u16', displayName: 'Paul Patel' },
+  { id: 'u17', displayName: 'Quinn Quinn' },
+  { id: 'u18', displayName: 'Ryan Roberts' },
+  { id: 'u19', displayName: 'Sara Singh' },
+  { id: 'u20', displayName: 'Tom Taylor' },
+];
+
+const meta: Meta<typeof SelectScroll> = {
+  title: 'Design System/SelectScroll',
+  component: SelectScroll,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px', maxWidth: '420px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: 'Select Country',
+    placeholder: 'Select a country',
+    required: false,
+    isInvalid: false,
+    error: '',
+    helperText: '',
+    size: 'md',
+    options: countryOptions,
+    color: 'grey',
+    isApiSearch: false,
+    clearable: true,
+  } as SelectScrollProps,
+  argTypes: {
+    color: {
+      control: { type: 'radio' },
+      options: ['grey', 'white'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the select scroll field',
+    },
+    isInvalid: {
+      control: { type: 'boolean' },
+      description: 'Shows error state',
+    },
+    error: {
+      control: { type: 'text' },
+      description: 'Error message displayed when isInvalid is true',
+    },
+    helperText: {
+      control: { type: 'text' },
+      description: 'Helper text displayed when not in error state',
+    },
+    required: {
+      control: { type: 'boolean' },
+      description: 'Marks the field as required',
+    },
+    isDisabled: {
+      control: { type: 'boolean' },
+      description: 'Disables the field',
+    },
+    clearable: {
+      control: { type: 'boolean' },
+      description: 'Shows clear button and allows clearing selection',
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Shows loading state',
+    },
+    loadingText: {
+      control: { type: 'text' },
+      description: 'Text shown when loading',
+    },
+    noOptionsText: {
+      control: { type: 'text' },
+      description: 'Text shown when no options are available',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectScroll>;
+
+const PlaygroundComponent = (args: SelectScrollProps) => {
+  const [value, setValue] = useState<any>(args.value);
+
+  // Sync external control changes if any
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+
+  return (
+    <SelectScroll
+      {...args}
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue);
+      }}
+    />
+  );
+};
+
+export const Playground: Story = {
+  args: {
+    label: 'Select Country',
+    placeholder: 'Select a country',
+    required: true,
+    options: countryOptions,
+    clearable: true,
+  },
+  render: (args) => <PlaygroundComponent {...args} />,
+};
+
+const ShowcaseComponent = () => {
+  const [val1, setVal1] = useState<any>(null);
+  const [val2, setVal2] = useState<any>(null);
+  const [val3, setVal3] = useState<any>('Jim Beam');
+  const [val4, setVal4] = useState<any>(null);
+  const [val5, setVal5] = useState<any>(null);
+  const [val6] = useState<any>('India');
+  const [val7, setVal7] = useState<any>(null);
+  const [val8, setVal8] = useState<any>(null);
+
+  const [apiValue, setApiValue] = useState<{
+    id: string;
+    displayName: string;
+  } | null>(null);
+  const [apiOptions, setApiOptions] = useState<typeof MOCK_API_USERS>([]);
+  const [apiLoading, setApiLoading] = useState(false);
+
+  const handleApiSearch = useCallback((term: string) => {
+    setApiLoading(true);
+    window.setTimeout(() => {
+      const q = term.trim().toLowerCase();
+      const filtered = MOCK_API_USERS.filter(
+        (u) => !q || u.displayName.toLowerCase().includes(q)
+      ).slice(0, 40);
+      setApiOptions(filtered);
+      setApiLoading(false);
+    }, 350);
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {/* Default / Empty */}
+      <SelectScroll
+        label="Select Country"
+        placeholder="Select a country"
+        required
+        isApiSearch={false}
+        options={countryOptions}
+        value={val1}
+        onChange={setVal1}
+      />
+
+      {/* Color: white */}
+      <SelectScroll
+        label="Select Country (white)"
+        placeholder="Select a country"
+        required
+        isApiSearch={false}
+        options={countryOptions}
+        color="white"
+        value={val2}
+        onChange={setVal2}
+      />
+
+      {/* With Value */}
+      <SelectScroll
+        label="Username"
+        placeholder="Select a username"
+        required
+        isApiSearch={false}
+        options={usernameOptions}
+        value={val3}
+        clearable={false}
+        onChange={setVal3}
+      />
+
+      {/* Error State */}
+      <SelectScroll
+        label="Select Country"
+        placeholder="Select a country"
+        required
+        isApiSearch={false}
+        options={countryOptions}
+        isInvalid
+        error="Please select a valid country"
+        value={val4}
+        onChange={setVal4}
+      />
+
+      {/* With Helper Text */}
+      <SelectScroll
+        label="Select Country"
+        placeholder="Select a country"
+        required
+        isApiSearch={false}
+        options={countryOptions}
+        helperText="Select your country of residence"
+        value={val5}
+        onChange={setVal5}
+      />
+
+      {/* Disabled */}
+      <SelectScroll
+        label="Select Country"
+        placeholder="Select a country"
+        required
+        isApiSearch={false}
+        options={countryOptions}
+        value={val6}
+        isDisabled
+      />
+
+      {/* Small Size */}
+      <SelectScroll
+        label="Select Country"
+        placeholder="Select a country"
+        size="sm"
+        isApiSearch={false}
+        options={countryOptions}
+        value={val7}
+        onChange={setVal7}
+      />
+
+      {/* With Object Options */}
+      <SelectScroll
+        label="Select Country (Object)"
+        placeholder="Select a country"
+        isApiSearch={false}
+        options={countryObjectOptions}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : option.label)}
+        value={val8}
+        onChange={setVal8}
+      />
+
+      {/* API search (mock server): debounced onApiSearch, options from parent */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          paddingTop: '8px',
+          borderTop: '1px solid #e8ecef',
+        }}
+      >
+        <p
+          style={{
+            margin: 0,
+            fontSize: 12,
+            color: '#5c6368',
+            lineHeight: 1.5,
+          }}
+        >
+          <strong>API search:</strong> <code>isApiSearch</code> + <code>onApiSearch</code>{' '}
+          (debounced in SelectScroll, default 1000ms). Open loads the mock list; typing filters
+          after debounce.
+        </p>
+        <SelectScroll
+          label="Select user (mock API)"
+          placeholder="Search by name…"
+          size="md"
+          isApiSearch
+          apiSearchDebounceMs={1000}
+          options={apiOptions}
+          loading={apiLoading}
+          loadingText="Fetching users…"
+          value={apiValue}
+          getOptionLabel={(o) => o.displayName}
+          onChange={setApiValue}
+          onApiSearch={handleApiSearch}
+          onOpenChange={(open) => {
+            if (open && apiOptions.length === 0) {
+              handleApiSearch('');
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <ShowcaseComponent />,
+};