@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec

package/src/inputs/SelectInput.story.tsx

@@ -1,259 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Calendar } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import { useState } from 'react';
-
-import { getMonthNames } from '../common/dateUtils';
-
-import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
-
-export default {
-  component: SelectInput,
-} satisfies Meta<typeof SelectInput>;
-
-interface TestMonth {
-  id: number;
-  name: string;
-  unavailable: boolean;
-}
-
-const testMonths: TestMonth[] = getMonthNames('en-US').map((name, index) => ({
-  id: index + 1,
-  name,
-  unavailable: index % 6 === 2,
-}));
-
-const testQuarters = [
-  testMonths.slice(0, 3),
-  testMonths.slice(3, 6),
-  testMonths.slice(6, 9),
-  testMonths.slice(9, 12),
-] as const;
-
-export const Basic: StoryObj<{
-  filterable: boolean;
-  filterPlaceholder: string;
-  clearable: boolean;
-  invalid: boolean;
-  disabled: boolean;
-  onChange: (value: TestMonth | null) => void;
-  onClear: () => void;
-}> = {
-  render: function Story({
-    filterable,
-    filterPlaceholder,
-    clearable,
-    disabled,
-    onChange,
-    onClear,
-  }) {
-    const [selectedMonth, setSelectedMonth] = useState<TestMonth | null>(null);
-
-    return (
-      <div className="d-flex flex-column">
-        {/* TODO:
-        <Field
-          label="Label"
-          hint="Information message."
-          error={invalid ? "Error message." : undefined}
-        >
-        */}
-        <SelectInput
-          placeholder="Month"
-          items={testQuarters
-            .flatMap<SelectInputItem<TestMonth>>((quarterMonths, index) => [
-              {
-                type: 'group',
-                label: `Quarter #${index + 1}`,
-                options: quarterMonths.map((month) => ({
-                  type: 'option',
-                  value: month,
-                  filterMatchers: [month.name],
-                  disabled: month.unavailable,
-                })),
-              },
-              { type: 'separator' },
-            ])
-            .slice(0, -1)}
-          value={selectedMonth}
-          renderValue={(month, compact) => (
-            <SelectInputOptionContent
-              title={month.name}
-              note="Note"
-              description={compact ? undefined : `Month #${month.id}`}
-              icon={<Calendar size={24} />}
-            />
-          )}
-          filterable={filterable}
-          filterPlaceholder={filterPlaceholder}
-          disabled={disabled}
-          onChange={(month) => {
-            setSelectedMonth(month);
-            onChange(month);
-          }}
-          onClear={
-            clearable
-              ? () => {
-                  setSelectedMonth(null);
-                  onClear();
-                }
-              : undefined
-          }
-        />
-      </div>
-    );
-  },
-  args: {
-    filterable: true,
-    filterPlaceholder: 'Type a month’s name',
-    clearable: true,
-    invalid: false,
-    disabled: false,
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-    onClear: {
-      action: 'cleared',
-    },
-  },
-};
-
-interface Month {
-  id: number;
-  name: string;
-}
-
-const months: Month[] = getMonthNames('en-US').map((name, index) => ({
-  id: index + 1,
-  name,
-}));
-
-export const Months: StoryObj<{
-  onChange: (value: Month | null) => void;
-  onClear: () => void;
-}> = {
-  render: function Story({ onChange, onClear }) {
-    const [selectedMonth, setSelectedMonth] = useState<Month | null>(null);
-
-    return (
-      <div className="d-flex flex-column">
-        <SelectInput
-          placeholder="Month"
-          items={months.map((month) => ({ type: 'option', value: month }))}
-          value={selectedMonth}
-          renderValue={(month) => <SelectInputOptionContent title={month.name} />}
-          onChange={(month) => {
-            setSelectedMonth(month);
-            onChange(month);
-          }}
-          onClear={() => {
-            setSelectedMonth(null);
-            onClear();
-          }}
-        />
-      </div>
-    );
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-    onClear: {
-      action: 'cleared',
-    },
-  },
-};
-
-interface Currency {
-  code: string;
-  name: string;
-  countries?: string[];
-}
-
-const popularCurrencies: Currency[] = [
-  {
-    code: 'USD',
-    name: 'United States dollar',
-    countries: ['Hong Kong', 'Saudi Arabia'],
-  },
-  {
-    code: 'EUR',
-    name: 'Euro',
-    countries: ['Spain', 'Germany', 'France', 'Austria', 'Estonia'],
-  },
-  {
-    code: 'GBP',
-    name: 'British pound',
-    countries: ['England', 'Scotland', 'Wales'],
-  },
-];
-
-const otherCurrencies: Currency[] = [
-  {
-    code: 'CAD',
-    name: 'Canadian dollar',
-    countries: ['Canada'],
-  },
-  {
-    code: 'AUD',
-    name: 'Australian dollar',
-  },
-];
-
-const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sort((a, b) =>
-  a.code.localeCompare(b.code),
-);
-
-export const Currencies: StoryObj<{
-  onChange: (value: Currency) => void;
-}> = {
-  render: function Story({ onChange }) {
-    const [selectedCurrency, setSelectedCurrency] = useState<Currency>(popularCurrencies[0]);
-
-    return (
-      <div className="d-flex flex-column">
-        <SelectInput
-          items={[
-            {
-              type: 'group',
-              label: 'Popular currencies',
-              options: popularCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
-            },
-            {
-              type: 'group',
-              label: 'All currencies',
-              options: allCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
-            },
-          ]}
-          value={selectedCurrency}
-          renderValue={(currency) => (
-            <SelectInputOptionContent
-              title={currency.code}
-              note={currency.name}
-              icon={<Flag code={currency.code} intrinsicSize={24} />}
-            />
-          )}
-          filterable
-          filterPlaceholder="Type a currency / country"
-          onChange={(currency) => {
-            setSelectedCurrency(currency);
-            onChange(currency);
-          }}
-        />
-      </div>
-    );
-  },
-  argTypes: {
-    onChange: {
-      action: 'changed',
-    },
-  },
-};