fix(island-ui): Select stories with TypeScript (#14834)

* fix(island-ui): Select stories with TypeScript * small cleanup * chore: nx format:write update dirty files * unused import --------- Co-authored-by: andes-it <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · May 21, 2024 · 6e95b66 · 6e95b66
1 parent 0ff63ca
commit 6e95b66
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 69 deletions.
diff --git a/libs/island-ui/core/src/lib/Select/Select.stories.tsx b/libs/island-ui/core/src/lib/Select/Select.stories.tsx
@@ -2,91 +2,141 @@ import React from 'react'
 
 import { withFigma } from '../../utils/withFigma'
 import { Select } from './Select'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const config: Meta<typeof Select> = {
   title: 'Form/Select',
   component: Select,
   parameters: withFigma('Select'),
+  argTypes: {
+    name: { description: 'Field name' },
+    label: { description: 'Label text', control: { type: 'text' } },
+    placeholder: { description: 'Placeholder text' },
+    backgroundColor: {
+      description: 'Background color',
+      options: ['white', 'blue'],
+      control: { type: 'radio' },
+      defaultValue: 'white',
+    },
+    noOptionsMessage: { description: 'No options message' },
+    size: {
+      description: 'Field size',
+      options: ['xs', 'sm', 'md'],
+      control: { type: 'radio' },
+    },
+    options: { description: 'Select options' },
+    isDisabled: { description: 'Is select field disabled' },
+    isClearable: { description: 'Is select field clearable' },
+    isSearchable: { description: 'Is select field searchable' },
+    required: { description: 'Is select field required' },
+    hasError: { description: 'Does select field has error' },
+    errorMessage: {
+      description: 'Error message description',
+      control: { type: 'text' },
+    },
+    icon: { description: 'Icon name' },
+  },
 }
 
-const Template = (args) => <Select {...args} />
+export default config
+type SelectProps = StoryObj<typeof Select>
 
-const options = [
-  {
-    label: 'Text 1',
-    value: '0',
-  },
-  {
-    label: 'Text 2',
-    value: '1',
-  },
-  {
-    label: 'Text 3',
-    value: '2',
-  },
-]
+const Template = (args) => (
+  <div style={{ height: 150, overflow: 'auto' }}>
+    <Select {...args} />
+  </div>
+)
 
-const selectArgs = {
-  name: 'select',
-  label: 'Label text',
+export const Default: SelectProps = Template.bind({})
+Default.args = {
+  name: 'Select',
+  label: 'Select label text',
   placeholder: 'Text',
-  options: options,
+  noOptionsMessage: 'No options',
+  options: [
+    {
+      label: 'Text 1',
+      value: '0',
+    },
+    {
+      label: 'Text 2',
+      value: '1',
+    },
+    {
+      label: 'Text 3',
+      value: '2',
+    },
+  ],
   backgroundColor: 'white',
+  size: 'md',
   isDisabled: false,
-  noOptionsMessage: 'Enginn valmöguleiki',
   isClearable: false,
   isSearchable: false,
-  size: 'md',
   hasError: false,
+  required: false,
+  errorMessage: undefined,
+  icon: undefined,
 }
 
-export const Default = Template.bind({})
-Default.args = selectArgs
-
-export const Blue = Template.bind({})
-Blue.args = {
-  ...selectArgs,
+export const BlueBackground = Template.bind({})
+BlueBackground.args = {
+  ...Default.args,
   backgroundColor: 'blue',
 }
 
+export const NoOptions = Template.bind({})
+NoOptions.args = {
+  ...Default.args,
+  options: [],
+  noOptionsMessage: 'No options',
+}
+
+export const SizeSm = Template.bind({})
+SizeSm.args = {
+  ...Default.args,
+  size: 'sm',
+}
+
+export const SizeXs = Template.bind({})
+SizeXs.args = {
+  ...Default.args,
+  size: 'xs',
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
-  ...selectArgs,
+  ...Default.args,
   isDisabled: true,
 }
 
-export const NoOption = Template.bind({})
-NoOption.args = {
-  ...selectArgs,
-  noOptionsMessage: 'Enginn valmöguleiki',
-}
-
 export const Clearable = Template.bind({})
 Clearable.args = {
-  ...selectArgs,
+  ...Default.args,
   isClearable: true,
 }
 
 export const Searchable = Template.bind({})
 Searchable.args = {
-  ...selectArgs,
+  ...Default.args,
   isSearchable: true,
+  placeholder: 'Type to search',
 }
 
-export const SizeSm = Template.bind({})
-SizeSm.args = {
-  ...selectArgs,
-  size: 'sm',
+export const WithDifferentIcon = Template.bind({})
+WithDifferentIcon.args = {
+  ...Default.args,
+  icon: 'ellipsisVertical',
 }
 
-export const SizeXs = Template.bind({})
-SizeXs.args = {
-  ...selectArgs,
-  size: 'xs',
+export const Required = Template.bind({})
+Required.args = {
+  ...Default.args,
+  required: true,
 }
 
-export const WithError = Template.bind({})
-WithError.args = {
-  ...selectArgs,
+export const HasError = Template.bind({})
+HasError.args = {
+  ...Default.args,
   hasError: true,
+  errorMessage: 'This is an error message',
 }
diff --git a/libs/island-ui/core/src/lib/Select/Select.types.ts b/libs/island-ui/core/src/lib/Select/Select.types.ts
@@ -18,33 +18,36 @@ export interface AriaError {
   'aria-invalid': boolean
   'aria-describedby': string
 }
+
+export type PropsBase = {
+  // Common custom props added for our custom Select
+  backgroundColor?: InputBackgroundColor
+  errorMessage?: string
+  filterConfig?: FilterConfig
+  hasError?: boolean
+  icon?: IconTypes
+  isCreatable?: boolean
+  label?: string
+  size?: 'xs' | 'sm' | 'md'
+
+  // Added as prop to forward to custom Input component
+  ariaError?: AriaError
+
+  // Added for CountryCodeSelect to forward prop to custom IndicatorsContainer component
+  inputHasLabel?: boolean
+
+  // Added for test support
+  dataTestId?: string
+}
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore make web strict
 declare module 'react-select/dist/declarations/src/Select' {
   export interface Props<
     Option,
     IsMulti extends boolean,
     Group extends GroupBase<Option>,
-  > {
-    // Common custom props added for our custom Select
-    backgroundColor?: InputBackgroundColor
-    errorMessage?: string
-    filterConfig?: FilterConfig
-    hasError?: boolean
-    icon?: IconTypes
-    isCreatable?: boolean
-    label?: string
-    size?: 'xs' | 'sm' | 'md'
-
-    // Added as prop to forward to custom Input component
-    ariaError?: AriaError
-
-    // Added for CountryCodeSelect to forward prop to custom IndicatorsContainer component
-    inputHasLabel?: boolean
-
-    // Added for test support
-    dataTestId?: string
-  }
+  > extends PropsBase {}
 }
 
 // The typescript declaration customizations above does not allow to change existing props signature.
@@ -57,7 +60,7 @@ export type SelectProps<
   // @ts-ignore make web strict
 > = Omit<Props<Option, IsMulti, Group>, 'noOptionsMessage'> & {
   noOptionsMessage?: string
-}
+} & PropsBase
 
 // The Option type needs to be generic as the react-select library is generic.
 export type Option<Value> = {