@loadsmart/loadsmart-ui 5.8.1 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.8.1",
+  "version": "5.10.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Button/Button.stories.tsx

@@ -3,11 +3,16 @@ import { Meta } from '@storybook/react/types-6-0'
 import BackButton from '../../common/BackButton'
 import Button, { SelectorButton, IconButton, Caret, BaseButton } from './Button'
 import CloseButton from '../../common/CloseButton'
+import type { ReactNode } from 'react'
 
 import type { BackButtonProps } from '../../common/BackButton'
 import type { ButtonProps } from './Button'
 import type { CloseButtonProps } from '../../common/CloseButton'
 
+const Container = ({ children }: { children?: ReactNode }) => {
+  return <div className="flex flex-col space-y-2 items-center">{children}</div>
+}
+
 export default {
   title: 'Components/Button',
   component: Button,
@@ -34,6 +39,11 @@ export default {
         type: 'boolean',
       },
     },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
     className: {
       table: {
         disable: true,
@@ -78,9 +88,9 @@ export default {
 
 export function Playground(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col space-y-2">
+    <Container>
       <Button {...args}>Button</Button>
-    </div>
+    </Container>
   )
 }
 
@@ -93,7 +103,7 @@ Playground.args = {
 
 export function Base(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col space-y-2">
+    <Container>
       <BaseButton {...args}>Click me</BaseButton>
       <BaseButton {...args} leading={<span>&clubs;</span>}>
         Click me
@@ -104,17 +114,17 @@ export function Base(args: ButtonProps): JSX.Element {
       <BaseButton {...args} leading={<span>&clubs;</span>} trailing={<span>&spades;</span>}>
         Click me
       </BaseButton>
-    </div>
+    </Container>
   )
 }
 
 export function Selector(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col space-y-2">
+    <Container>
       <SelectorButton {...args} trailing={<Caret />}>
         Button
       </SelectorButton>
-    </div>
+    </Container>
   )
 }
 
@@ -125,11 +135,11 @@ Selector.args = {
 
 export function Icon(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <Container>
       <IconButton {...args} variant="icon">
         <span>&clubs;</span>
       </IconButton>
-    </div>
+    </Container>
   )
 }
 
@@ -139,16 +149,26 @@ Icon.args = {
 
 export function Back(args: BackButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <Container>
       <BackButton {...args} />
-    </div>
+    </Container>
   )
 }
 
 export function Close(args: CloseButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <Container>
       <CloseButton {...args} />
-    </div>
+    </Container>
+  )
+}
+
+export function Loading(args: ButtonProps): JSX.Element {
+  return (
+    <Container>
+      <Button loading {...args}>
+        Accessible Text
+      </Button>
+    </Container>
   )
 }

package/src/components/Button/Button.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { screen } from '@testing-library/react'
 
 import generator from '../../../tests/generator'
 import renderer from '../../../tests/renderer'
@@ -13,8 +14,9 @@ describe('<Button />', () => {
       children: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
+    setup(props)
+
+    screen.getByRole('button', { name: props.children })
   })
 
   it('renders trailing correctly', () => {
@@ -23,9 +25,9 @@ describe('<Button />', () => {
       trailing: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
-    getByText(props.trailing)
+    setup(props)
+
+    screen.getByRole('button', { name: `${props.children} ${props.trailing}` })
   })
 
   it('renders leading correctly', () => {
@@ -34,8 +36,22 @@ describe('<Button />', () => {
       leading: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
-    getByText(props.leading)
+    setup(props)
+
+    screen.getByRole('button', { name: `${props.leading} ${props.children}` })
+  })
+
+  it('renders loading state', () => {
+    const props = {
+      children: generator.word(),
+      loading: true,
+    }
+
+    setup(props)
+
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    expect(button).toHaveAccessibleName(props.children)
   })
 })

package/src/components/Button/Button.tsx

@@ -14,17 +14,23 @@ import rem from 'utils/toolset/rem'
 import transition from 'styles/transition'
 import typography from 'styles/typography'
 
+import { LoadingDots } from 'components/Loaders'
+
 import type { ButtonHTMLAttributes, ForwardedRef, ReactNode } from 'react'
 import type { IconProps } from 'components/Icon'
 import type ColorScheme from 'utils/types/ColorScheme'
+import type { LoadingDotsProps } from 'components/Loaders'
+
+export type ButtonVariants = 'primary' | 'secondary' | 'warning' | 'icon' | 'tertiary'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
   leading?: ReactNode
   scheme?: ColorScheme
   trailing?: ReactNode
-  variant?: 'primary' | 'secondary' | 'warning' | 'icon' | 'tertiary'
+  variant?: ButtonVariants
   scale?: 'small' | 'default' | 'large'
+  loading?: boolean
 }
 
 const StyledSpan = styled.span`
@@ -44,23 +50,24 @@ const Trailing = styled(StyledSpan)`
   /* placeholder */
 `
 
-export const Children = styled.span`
-  ${({ children }: ButtonProps) =>
+export const Children = styled.span<ButtonProps>`
+  ${({ children }) =>
     typeof children === 'string'
-      ? `
-    ${ellipsizable()}
-  `
+      ? ellipsizable()
       : `
-      display: inline-flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      justify-content: center;
-  `}
+          display: inline-flex;
+          flex-flow: row nowrap;
+          align-items: center;
+          justify-content: center;
+        `}
 
   padding: ${rem('6px')} 0;
 `
 
-const BaseStyledButton = styled.button<{ $scale: ButtonProps['scale'] }>`
+const BaseStyledButton = styled.button<{
+  $scale: ButtonProps['scale']
+  $loading?: ButtonProps['loading']
+}>`
   ${transition()}
 
   ${typography(
@@ -98,6 +105,8 @@ const BaseStyledButton = styled.button<{ $scale: ButtonProps['scale'] }>`
 
   ${disableable()}
 
+  ${({ $loading }) => $loading && 'pointer-events: none;'}
+
   ${Leading} {
     margin: 0 ${token('space-xs')} 0 0;
   }
@@ -359,15 +368,86 @@ const StyledSelector = styled(StyledButton)`
   }
 `
 
-export const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { scale = 'default', children, leading, trailing, ...others }: ButtonProps,
+const TextHidden = styled.span`
+  transform: scale(0);
+`
+
+/**
+ * Accessible attributes in `LoadingDots` aren't necessary
+ * because the `Button` will keep its content, but invisible
+ */
+const StyledLoadingDots = styled(LoadingDots).attrs({
+  'aria-label': undefined,
+  role: 'presentation',
+})`
+  position: absolute;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+`
+
+const ButtonLoadingDots = ({
+  buttonVariant = 'secondary',
+  ...remainingProps
+}: Omit<LoadingDotsProps, 'variant'> & { buttonVariant?: ButtonVariants }) => {
+  const buttonLightVariants = new Set(['secondary', 'warning', 'icon', 'tertiary'])
+  /**
+   * Change LoadingDots variant between `light` and `dark` to have contrast with Button's variant
+   */
+  const loadingDotsVariant: 'dark' | 'light' = buttonLightVariants.has(buttonVariant)
+    ? 'dark'
+    : 'light'
+
+  return <StyledLoadingDots {...remainingProps} variant={loadingDotsVariant} />
+}
+
+function ButtonChildrenWrapper({
+  loading,
+  children,
+  variant,
+}: Pick<ButtonProps, 'loading' | 'children' | 'variant'>) {
+  if (loading) {
+    return (
+      <>
+        <ButtonLoadingDots buttonVariant={variant} />
+        <TextHidden>{children}</TextHidden>
+      </>
+    )
+  }
+
+  return <>{children}</>
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>(function BaseButton(
+  {
+    scale = 'default',
+    children,
+    leading,
+    trailing,
+    loading,
+    disabled,
+    variant,
+    ...others
+  }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
 ) {
   return (
-    <BaseStyledButton ref={ref} {...others} $scale={scale}>
-      {leading && <Leading aria-hidden="true">{leading}</Leading>}
-      <Children>{children}</Children>
-      {trailing && <Trailing aria-hidden="true">{trailing}</Trailing>}
+    <BaseStyledButton
+      ref={ref}
+      {...others}
+      aria-disabled={loading ? 'true' : undefined}
+      disabled={disabled}
+      $scale={scale}
+      $loading={loading}
+    >
+      <ButtonChildrenWrapper loading={loading} variant={variant}>
+        {leading && <Leading aria-hidden="true">{leading}</Leading>}
+        <Children loading={loading}>{children}</Children>
+        {trailing && <Trailing aria-hidden="true">{trailing}</Trailing>}
+      </ButtonChildrenWrapper>
     </BaseStyledButton>
   )
 })
@@ -381,6 +461,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     children,
     leading,
     trailing,
+    disabled,
+    loading,
     ...others
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
@@ -390,13 +472,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       ref={ref}
       {...others}
       type={type}
+      aria-disabled={loading ? 'true' : undefined}
+      disabled={disabled}
       $scheme={scheme}
       $scale={scale}
       $variant={variant}
+      $loading={loading}
     >
-      {leading && <Leading>{leading}</Leading>}
-      <Children>{children}</Children>
-      {trailing && <Trailing>{trailing}</Trailing>}
+      <ButtonChildrenWrapper loading={loading} variant={variant}>
+        {leading && <Leading>{leading}</Leading>}
+        <Children>{children}</Children>
+        {trailing && <Trailing>{trailing}</Trailing>}
+      </ButtonChildrenWrapper>
     </StyledButton>
   )
 })
@@ -405,7 +492,7 @@ export function Caret(props: Omit<IconProps, 'name'>): JSX.Element {
   return <Icon size={20} {...props} name="caret-down" />
 }
 
-export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(function SelectorButton(
   {
     scheme = 'light',
     scale = 'default',
@@ -413,6 +500,8 @@ export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(functio
     variant = 'secondary',
     children,
     trailing,
+    disabled,
+    loading,
     ...others
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
@@ -424,18 +513,25 @@ export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(functio
       ref={ref}
       {...others}
       type={type}
+      aria-disabled={loading ? 'true' : undefined}
+      disabled={disabled}
+      $loading={loading}
       $scheme={scheme}
       $scale={scale}
       $variant={variant}
     >
-      <Children>{children}</Children>
-      {trailing && <Trailing>{trailing}</Trailing>}
+      <ButtonChildrenWrapper loading={loading} variant={variant}>
+        <Children>{children}</Children>
+        {trailing && <Trailing>{trailing}</Trailing>}
+      </ButtonChildrenWrapper>
     </StyledSelector>
   )
 })
 
-export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { scheme = 'light', scale = 'default', type = 'button', children, ...others }: ButtonProps,
+export type IconButtonProps = Omit<ButtonProps, 'leading' | 'trailing' | 'variant' | 'loading'>
+
+export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(function IconButton(
+  { scheme = 'light', scale = 'default', type = 'button', children, ...others }: IconButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
 ) {
   others = omit<ButtonProps>(others, ['leading', 'trailing', 'variant'])

package/src/components/Select/Select.fixtures.ts

@@ -22,7 +22,7 @@ export const SelectableKeyTypeOptions: { label: string; value: SelectableKeyType
   { label: 'String', value: 'string' },
 ]
 
-export const FRUITS: Fruit[] = [
+export const FRUITS: Readonly<Fruit[]> = Object.freeze([
   { label: 'Acerola', value: 'acerola', family: 'Malpighiaceae' },
   { label: 'Apple', value: 'apple', family: 'Rosaceae' },
   { label: 'Apricots', value: 'apricots', family: 'Rosaceae' },
@@ -93,7 +93,7 @@ export const FRUITS: Fruit[] = [
   { label: 'Tamarind', value: 'tamarind', family: 'Fabaceae' },
   { label: 'Tangerine', value: 'tangerine', family: 'Rutaceae' },
   { label: 'Watermelon', value: 'watermelon', family: 'Cucurbitaceae' },
-]
+])
 
 function generateSelectOptions() {
   return generator.array(() => {

package/src/components/Select/Select.stories.tsx

@@ -441,11 +441,13 @@ const MixedCustomOption = ({ value }: SelectOptionProps) => {
   },
 }
 
+const fruits = [...FRUITS]
+
 export const CreatableSync: Story<SelectProps> = (args: SelectProps) => {
   const handleCreate = useCallback(function handleCreate(query: string) {
     const item: Option = { label: query, value: query } as Option
 
-    FRUITS.push(item as Fruit)
+    fruits.push(item as Fruit)
     return item
   }, [])
 
@@ -466,7 +468,7 @@ export const CreatableSync: Story<SelectProps> = (args: SelectProps) => {
       </div>
       <div className="text-sm" style={{ width: 720 }}>
         <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
+        <code>{fruits.map(({ label }) => label).join(', ')}</code>
       </div>
     </div>
   )
@@ -604,7 +606,7 @@ export const CustomCreatableOption: Story<SelectProps> = ({ onCreate, ...args }:
       const item: Option = { label: query, value: query } as Option
 
       setValue(item)
-      FRUITS.push(item as Fruit)
+      fruits.push(item as Fruit)
     },
     [onCreate]
   )
@@ -631,7 +633,7 @@ export const CustomCreatableOption: Story<SelectProps> = ({ onCreate, ...args }:
       </div>
       <div className="text-sm" style={{ width: 720 }}>
         <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
+        <code>{fruits.map(({ label }) => label).join(', ')}</code>
       </div>
     </div>
   )

package/src/components/Select/Select.test.tsx

@@ -9,7 +9,7 @@ import generator from '../../../tests/generator'
 import renderer, { screen, fire, waitFor } from '../../../tests/renderer'
 import selectEvent from '../../testing/SelectEvent'
 
-import type { SelectProps, Option, GenericOption } from './Select.types'
+import type { SelectProps, Option } from './Select.types'
 import Select from './Select'
 import userEvent from '@testing-library/user-event'
 import type { Selectable } from 'hooks/useSelectable'
@@ -142,7 +142,7 @@ describe('Select', () => {
         expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
 
-        rerender(<Playground options={FRUITS as GenericOption[]} />)
+        rerender(<Playground options={[...FRUITS]} />)
 
         await selectEvent.expand(searchInput)
 
@@ -213,10 +213,7 @@ describe('Select', () => {
         setup({})
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        const selectedFruit = generator.pick(FRUITS, { amount: 1 }) as {
-          label: string
-          value: string
-        }
+        const selectedFruit = generator.pickone([...FRUITS])
 
         await selectEvent.select(selectedFruit.label, searchInput)
 
@@ -229,10 +226,7 @@ describe('Select', () => {
       })
 
       it('initializes with a selected item', async () => {
-        const selectedFruit = generator.pick(FRUITS, { amount: 1 }) as {
-          label: string
-          value: string
-        }
+        const selectedFruit = generator.pickone([...FRUITS])
 
         setup({
           value: selectedFruit as Option,
@@ -248,10 +242,7 @@ describe('Select', () => {
       })
 
       it('updates selected item after the initially selected item changes', async () => {
-        const selectedFruit = generator.pick(FRUITS, { amount: 1 }) as {
-          label: string
-          value: string
-        }
+        const selectedFruit = generator.pickone([...FRUITS])
         const props = {
           value: selectedFruit as Option,
         }
@@ -265,10 +256,7 @@ describe('Select', () => {
 
         expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
 
-        const newSelectedFruit = generator.pick(FRUITS, { amount: 1 }) as {
-          label: string
-          value: string
-        }
+        const newSelectedFruit = generator.pickone([...FRUITS])
         const newProps = {
           value: newSelectedFruit as Option,
         }
@@ -284,10 +272,7 @@ describe('Select', () => {
       })
 
       it('unselects the clicked item', async () => {
-        const selectedFruit = generator.pick(FRUITS, { amount: 1 }) as {
-          label: string
-          value: string
-        }
+        const selectedFruit = generator.pickone([...FRUITS])
 
         setup({
           value: selectedFruit as Option,
@@ -308,10 +293,7 @@ describe('Select', () => {
       })
 
       it('clears selection', async () => {
-        const selectedFruit = generator.pick(FRUITS, { amount: 1 }) as {
-          label: string
-          value: string
-        }
+        const selectedFruit = generator.pickone([...FRUITS])
 
         setup({
           value: selectedFruit as Option,
@@ -506,7 +488,7 @@ describe('Select', () => {
       setup({})
 
       const searchInput = screen.getByLabelText('Select your favorite fruit')
-      const selectedFruit = generator.pick<Fruit>(FRUITS, { amount: 1 }) as Fruit
+      const selectedFruit = generator.pickone<Fruit>([...FRUITS])
       const optionText = getOptionText(selectedFruit)
 
       await selectEvent.select(optionText, searchInput)
@@ -520,23 +502,21 @@ describe('Select', () => {
     it('selects multiple clicked custom items', async () => {
       setup({ multiple: true })
 
-      const amount = 2
+      const SELECTED_OPTIONS_AMOUNT = 2
       const searchInput = screen.getByLabelText('Select your favorite fruit')
-      const options = generator.pick<Fruit>(FRUITS, { amount }) as Fruit[]
+      const options = generator.pickset([...FRUITS], SELECTED_OPTIONS_AMOUNT)
 
-      for (let i = 0; i < options.length; i++) {
-        const option = options[i]
+      for await (const option of options) {
         const optionText = getOptionText(option)
         await selectEvent.select(optionText, searchInput)
       }
 
       const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
-      expect(selectedOptions).toHaveLength(amount)
+      expect(selectedOptions).toHaveLength(SELECTED_OPTIONS_AMOUNT)
 
-      for (let i = 0; i < options.length; i++) {
-        const option = options[i]
+      for await (const [index, option] of options.entries()) {
         const optionText = getOptionText(option)
-        expect(selectedOptions[i]).toHaveTextContent(optionText)
+        expect(selectedOptions[index]).toHaveTextContent(optionText)
       }
     })
 
@@ -642,7 +622,7 @@ describe('Select', () => {
       'renders creatable option at the end of the list when the entered query is not equal one of the available options - %s',
       async (args) => {
         setup({ ...args })
-        const { label: availableOption } = generator.pick(FRUITS, { amount: 1 }) as Fruit
+        const { label: availableOption } = generator.pickone([...FRUITS])
         const query = availableOption.slice(0, availableOption.length - 1)
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
@@ -664,7 +644,7 @@ describe('Select', () => {
           onCreate: (null as unknown) as undefined,
           ...args,
         })
-        const { label: availableOption } = generator.pick(FRUITS, { amount: 1 }) as Fruit
+        const { label: availableOption } = generator.pickone([...FRUITS])
         const query = availableOption.slice(0, availableOption.length - 1)
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
@@ -685,7 +665,7 @@ describe('Select', () => {
         setup({
           ...args,
         })
-        const { label: availableOption } = generator.pick(FRUITS, { amount: 1 }) as Fruit
+        const { label: availableOption } = generator.pickone([...FRUITS])
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
         fire.change(searchInput, {
@@ -705,7 +685,7 @@ describe('Select', () => {
         setup({
           ...args,
         })
-        const { label: availableOption } = generator.pick(FRUITS, { amount: 1 }) as Fruit
+        const { label: availableOption } = generator.pickone([...FRUITS])
 
         await expandSelect()
 
@@ -865,7 +845,7 @@ describe('Select', () => {
           )
         }
 
-        const value = generator.pickone(FRUITS) as Selectable
+        const value = generator.pickone([...FRUITS]) as Selectable
 
         setup({
           ...args,
@@ -881,6 +861,28 @@ describe('Select', () => {
         expect(await screen.findByText(/add item/i)).toBeVisible()
       }
     )
+
+    it.each([[{ multiple: false }], [{ multiple: true }]])(
+      'show creatable option on the list even when option list is empty - %s',
+      async (args) => {
+        const CreatableOption = () => {
+          return <Select.CreatableOption>Add item</Select.CreatableOption>
+        }
+
+        setup({
+          ...args,
+          isValidNewOption: true,
+          createOptionPosition: 'first',
+          options: [],
+          components: {
+            CreatableOption,
+          },
+        })
+
+        await expandSelect(true)
+        expect(await screen.findByText(/add item/i)).toBeVisible()
+      }
+    )
   })
 
   describe('Creatable Async', () => {