@loadsmart/loadsmart-ui 5.9.0 → 5.10.1

package/src/components/Pagination/Pagination.types.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react'
+import type { HTMLAttributes } from 'react'
 
-import { ButtonProps } from 'components/Button'
+import type { ButtonProps } from 'components/Button'
 
 export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {
   /**

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Popover from './Popover'
 

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ProgressBar, { ProgressBarProps } from './ProgressBar'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Status from 'utils/types/Status'
 
 export default {

package/src/components/ProgressBar/ProgressBar.tsx

@@ -5,19 +5,17 @@ import conditional, { whenProps } from 'tools/conditional'
 import Status from 'utils/types/Status'
 
 const Bar = styled.div<{ rounded: boolean }>`
-  align-items: center;
+  position: relative;
   display: flex;
   flex-grow: 0;
   flex-shrink: 1;
-
+  align-items: center;
   justify-content: center;
-  overflow: hidden;
   width: 100%;
-
-  position: relative;
-
   height: ${token('progressbar-height')};
 
+  overflow: hidden;
+
   ${({ rounded }) =>
     rounded &&
     css`

package/src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Radio, { RadioProps } from './Radio'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import Status from 'utils/types/Status'
 

package/src/components/Radio/Radio.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, InputHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 
 import { Icon } from 'components/Icon'
-import ColorScheme from 'utils/types/ColorScheme'
+import type ColorScheme from 'utils/types/ColorScheme'
 import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
 import focusable from 'styles/focusable'
@@ -21,45 +21,37 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement>, Selec
 const Check = styled(Icon)<SelectionStyleProps>`
   position: absolute;
   top: 50%;
-
   left: 50%;
 
   width: 10px;
   height: 10px;
 
-  transform: translate(-50%, -50%);
-
   pointer-events: none;
 
   fill: currentColor;
+
+  transform: translate(-50%, -50%);
 `
 
 const Selector = styled.input<SelectionStyleProps>`
-  ${transition()}
-
   display: inline-flex;
   flex-flow: row nowrap;
   align-items: center;
 
-  cursor: pointer;
-
-  appearance: none;
-
-  outline: none;
-
-  color: white;
-
-  height: ${token('radio-small-selector-size')};
   width: ${token('radio-small-selector-size')};
-
-  border-radius: ${token('radio-selector-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-
+  height: ${token('radio-small-selector-size')};
+  color: white;
+  cursor: pointer;
   background: ${conditional({
     'radio-selector-background': whenProps({ scheme: 'light' }),
     'radio-dark-selector-background': whenProps({ scheme: 'dark' }),
   })};
+  appearance: none;
+  border-style: solid;
+  border-width: ${token('button-border-width')};
+  border-radius: ${token('radio-selector-border-radius')};
+  outline: none;
+  ${transition()}
 
   &:not(:checked) {
     border-color: ${conditional({

package/src/components/Section/Section.tsx

@@ -12,18 +12,16 @@ const StyledSection = styled.section`
 `
 
 const StyledSectionTitle = styled.section`
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'font-height-2',
-  })}
-
+  padding: ${token('space-s')} ${token('space-xs')};
+  margin-bottom: ${token('space-l')};
   font-size: ${token('font-size-3')};
   color: ${token('color-neutral-darker')};
-
   border-bottom: 2px solid ${token('color-neutral-light')};
 
-  padding: ${token('space-s')} ${token('space-xs')};
-  margin-bottom: ${token('space-l')};
+  ${font({
+    weight: 'font-weight-bold',
+    height: 'font-height-2',
+  })}
 `
 
 const StyledSpan = styled.span`

package/src/components/Section/Sections.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Section from './Section'
 import type { SectionProps } from './Section'
 

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

@@ -1,4 +1,4 @@
-import { SelectableKeyType } from 'hooks/useSelectable'
+import type { SelectableKeyType } from 'hooks/useSelectable'
 import generator from '../../../tests/generator'
 
 import type { SelectDatasource } from './Select.types'
@@ -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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 import omit from 'lodash.omit'
 
 import { Label } from 'components/Label'
@@ -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,

package/src/components/Select/Select.types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import EventLike from 'utils/types/EventLike'
+import type EventLike from 'utils/types/EventLike'
 
 import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
 import type { TextFieldProps } from 'components/TextField'
@@ -9,7 +9,7 @@ import type {
   SelectableKeyType,
   SelectableState,
 } from 'hooks/useSelectable'
-import { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
+import type { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
 import type { ChangeEvent, ComponentType, FocusEvent, HTMLAttributes } from 'react'
 
 export type Option = Selectable

package/src/components/Select/SelectCreatableOption.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Dropdown } from 'components/Dropdown'
 import { SelectContext } from './Select.context'
-import { SelectCreatableOptionProps } from './Select.types'
+import type { SelectCreatableOptionProps } from './Select.types'
 
 function SelectCreatableOption({ children, ...rest }: SelectCreatableOptionProps): JSX.Element {
   const select =

package/src/components/Select/SelectEmpty.tsx

@@ -2,23 +2,22 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { getToken as token } from 'theming'
-import { SelectEmptyProps } from './Select.types'
+import type { SelectEmptyProps } from './Select.types'
 
 const Wrapper = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-
-  box-sizing: border-box;
-  margin: 0 ${token('space-s')};
   padding: ${token('space-s')};
-
-  color: ${token('color-neutral')};
+  margin: 0 ${token('space-s')};
 
   font-size: 1em;
   line-height: ${token('font-height-3')};
 
+  color: ${token('color-neutral')};
+
   background: ${token('color-transparent')};
 `
 

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

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import SelectOption from './SelectOption'
 import { SelectContext } from './Select.context'
 import useSelect from './useSelect'
-import { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
+import type { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
 
 type Props = {
   optionProps: SelectOptionProps

package/src/components/Select/SelectTrigger.tsx

@@ -13,19 +13,14 @@ const GenericSelectTrigger = styled(GenericDropdownTrigger)`
 `
 
 const SelectTriggerSearchField = styled(TextField)`
-  ${focusable`
-    box-shadow: none;
-  `}
-
+  flex: 1;
+  height: 100%;
   background-color: transparent;
-
   border: none;
   border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
-
-  height: 100%;
-
-  flex: 1;
-
+  ${focusable`
+    box-shadow: none;
+  `}
   ${Trailing} {
     margin: 0 ${token('space-xs')} 0 0;
   }
@@ -37,8 +32,8 @@ const Separator = styled.span`
   margin: 0;
 
   border-right-color: ${token('color-neutral-light')};
-  border-right-width: 1px;
   border-right-style: solid;
+  border-right-width: 1px;
 `
 
 const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function SelectTrigger(

package/src/components/Select/components.tsx

@@ -1,4 +1,4 @@
-import { Components, CreatableOptionType } from './Select.types'
+import type { Components, CreatableOptionType } from './Select.types'
 import SelectCreatableOption from './SelectCreatableOption'
 import SelectEmpty from './SelectEmpty'
 import SelectOption from './SelectOption'

package/src/components/Select/useSelect.ts

@@ -7,7 +7,7 @@ import isEmpty from 'utils/toolset/isEmpty'
 import { useDropdown } from 'components/Dropdown'
 import { useDidMount } from 'hooks/useDidMount'
 import { useFocusTrap } from 'hooks/useFocusTrap'
-import { SelectableKeyType } from 'hooks/useSelectable'
+import type { SelectableKeyType } from 'hooks/useSelectable'
 import to from 'utils/toolset/awaitTo'
 import { isThenable } from 'utils/toolset/isThenable'
 import toArray from 'utils/toolset/toArray'

package/src/components/Select/useSelectExternal.ts

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react'
 
 import { SelectContext } from './Select.context'
-import { Option, useSelectExternalReturn } from './Select.types'
+import type { Option, useSelectExternalReturn } from './Select.types'
 
 export function useSelectExternal(): useSelectExternalReturn {
   const select =

package/src/components/SideNavigation/Menu/Menu.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Menu } from './'
-import { MenuProps } from './Menu'
+import type { MenuProps } from './Menu'
 import renderer, { screen } from '../../../../tests/renderer'
 import generator from '../../../../tests/generator'
 import userEvent from '@testing-library/user-event'

package/src/components/SideNavigation/Menu/Menu.tsx

@@ -13,11 +13,11 @@ import { styledCompounds } from 'utils/toolset/styledCompounds'
 const MenuTitle = styled.div`
   padding: ${token('space-s')} 0;
   padding-left: ${token('space-l')};
-
-  color: ${token('color-neutral')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-5')};
+  font-weight: ${token('font-weight-bold')};
   line-height: ${token('font-height-3')};
+
+  color: ${token('color-neutral')};
   text-transform: uppercase;
 `
 

package/src/components/SideNavigation/Menu/MenuBaseItem.tsx

@@ -17,23 +17,22 @@ export type MenuBaseItemProps = HTMLAttributes<HTMLElement> & {
 }
 
 const StyledMenuItem = styled.button`
-  ${transition({ duration: '0.25s' })};
-
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
   padding: ${token('space-s')} 0;
   padding-right: ${rem('12px')};
   padding-left: ${token('space-l')};
 
-  color: ${token('color-neutral-white')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-4')};
+  font-weight: ${token('font-weight-bold')};
   line-height: ${token('font-height-3')};
+  color: ${token('color-neutral-white')};
 
   cursor: pointer;
 
+  ${transition({ duration: '0.25s' })};
   ${focusable`
     color: ${token('color-primary')};
   `}

package/src/components/SideNavigation/Menu/MenuExpandable.tsx

@@ -35,11 +35,10 @@ const StyledIcon = styled(Icon)<IExpandable>`
 `
 
 const ExpandableItems = styled.div<IExpandable>`
-  overflow: hidden;
-  ${transition({ property: 'height' })}
-
   height: ${prop('$height', 0)}px;
+  overflow: hidden;
 
+  ${transition({ property: 'height' })}
   ${MenuLink} {
     padding-left: ${token('space-xl')};
   }

package/src/components/SideNavigation/SideNavigation.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { Tag } from 'components/Tag'
 import { Icon } from 'components/Icon'