@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/docs/tools/DragDropFileEvent.stories.mdx

@@ -1,75 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Tools/Tests/DragDropFile Event" />
-
-# DragDropFile Event
-
-We have exposed a few helper functions to make it easier to write unit tests for our [`DragDropFile`](/?path=/story/components-dragdropfile--playground) component.
-
-The following functions descriptions consider this example:
-
-```jsx
-<DragDropFileProvider fileList={fileList} onFilesAdded={onFilesAdded} onFileRemoved={onFileRemoved}>
-  <DragDropFile.Wrapper>
-    <DragDropFile.DropZone
-      aria-label="Drag and drop file"
-      renderCustomContent={({ isDragging }) => (
-        <div>{isDragging ? 'Is dragging.' : 'Is not dragging.'}</div>
-      )}
-      multiple
-    />
-    <ErrorMessage>{errorMessage}</ErrorMessage>
-    <DragDropFile.FileList />
-  </DragDropFile.Wrapper>
-</DragDropFileProvider>
-```
-
-## `dropFiles`
-
-Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.
-
-Example with a single file:
-
-```js
-const dropZoneInput = screen.getByLabelText('Drag and drop file') as HTMLInputElement
-
-const exampleFile = new File([''], 'example-file.png')
-
-DragDropFileEvent.dropFiles(dropZoneInput, exampleFile)
-```
-
-Example with multiple files:
-
-```js
-const dropZoneInput = screen.getByLabelText('Drag and drop file') as HTMLInputElement
-
-const firstFile = new File([''], 'first-file.png')
-const secondFile = new File([''], 'second-file.png')
-const exampleFiles = [firstFile, secondFile]
-
-DragDropFileEvent.dropFiles(dropZoneInput, exampleFiles)
-```
-
-## `dragOver`
-
-Simulates the onDragOver event on the drop zone. Useful if you have custom content provided with the `renderCustomContent` prop and want to test a different behviour based on the `isDragging` state.
-
-Example:
-
-```js
-const dropZoneInput = screen.getByLabelText('Drag and drop file') as HTMLInputElement
-
-DragDropFileEvent.dragOver(dropZoneInput)
-```
-
-## `dragLeave`
-
-Simulates the onDragLeave event on the drop zone. Useful if you have custom content provided with the `renderCustomContent` prop and want to test a different behviour based on the `isDragging` state.
-
-Example:
-
-```js
-const dropZoneInput = screen.getByLabelText('Drag and drop file') as HTMLInputElement
-
-DragDropFileEvent.dragLeave(dropZoneInput)
-```

package/src/docs/tools/conditional.stories.mdx

@@ -1,251 +0,0 @@
-import { Meta } from '@storybook/addon-docs'
-
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-
-<Meta title="Tools/Conditional & WhenProps" />
-
-# The Conditional & WhenProps tools
-
-Our conditional utility is heavily inspired by utilities like [classnames](https://www.npmjs.com/package/classnames) and [clsx](https://www.npmjs.com/package/clsx).
-
-In a nutshell, its purpose is to evaluate different types of conditions and return a `string` joining all their results.
-
-Unlike the utilities we mentioned above, our `conditional` superpower enables us to do that using CSS-in-JS - `styled-components` more specifically - making styling based on logical conditions more straightforward and less verbose.
-
-## Conditional
-
-Let's consider the following sample button that changes its width based on its `scale` and `variant` props:
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  width: ${(props) =>
-    ['primary', 'secondary', 'warning'].includes(props.variant)
-      ? '36px'
-      : props.variant == 'icon' && props.scale == 'default'
-      ? '32px'
-      : props.variant == 'icon' && props.scale == 'large'
-      ? '48px'
-      : '24px'};
-
-  // ...
-`
-```
-
-Of course, we could improve how we wrote our conditions, but that would still take some effort to make it easy to read and maintain.
-
-Notice how we use our `props` of interest to determine the final value for our button's width. Well, that's where our `conditional` comes in handy. It encapsulates the `props` consumption, allowing for a quicker way of writing the conditionals.
-
-Our current implementation allows the following types of condition checking:
-
-**_Function condition_**
-
-A function that receives the component props as argument and should return a string.
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  height: ${conditional(props => props.scale == 'default' ? '36px' : '24px')};
-
-  // ...
-`;
-
-<Button scale="default" /> // would render style with `height: 36px;`
-
-<Button scale="small" /> // would render style with `height: 24px;`
-```
-
-**_Object condition_**
-
-An object, where the `key` would end up in the result of the `conditional` if `value` evaluates to `true`. Here, the `value` can be either a `boolean` value or a `function` that receives the component props as argument and returns a `boolean`.
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  height: ${conditional({
-    '36px': true, // use any value you would want to be evaluated as boolean
-  })};
-
-  width: ${conditional({
-    '36px': props => props.scale == 'default', // or a function that returns a boolean
-    '24px': props => props.scale == 'small'
-  })};
-
-  // ...
-`;
-
-<Button scale="default" /> // would render style with `height: 36px; width: 36px;`
-
-<Button scale="small" /> // would render style with `height: 36px; width: 24px;`
-```
-
-**_Primitive condition_**
-
-Any value you want to end up resulting from `conditional`, if _truthy_.
-
-```tsx
-const PADDING_X = '20px'
-
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  padding: ${conditional('10px', PADDING_X, false)};
-
-  // ...
-`
-
-;<Button /> // would render style with `padding: 10px 20px;`
-```
-
-**_Mixed condition_**
-
-Of course, you can also mix and match multiple conditions at will:
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  margin: ${conditional(
-    '10px',
-    props => props.scale == 'default' ? '12px' : '8px', {
-    '14px': true
-  })};
-
-  // ...
-`;
-
-<Button scale="default" /> // would render style with `margin: 10px 12px 14px;`
-
-<Button scale="small" /> // would render style with `margin: 10px 8px 14px;`
-```
-
-One cool thing to add is that you can also consume design tokens from our theme besides managing regular `string`s derived from condition checks. If the condition is evaluated to `true`, the value of that theme token will be returned.
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  width: ${conditional({
-    'button-default-width': props => props.scale == 'default',
-    'button-small-width': props => props.scale == 'small'
-  })};
-
-  // ...
-`;
-
-<Button scale="default" /> // would render style with `width: <token value for button-default-width>;`
-
-<Button scale="small" /> // would render style with `width: <token value for button-small-width>;`
-```
-
-Ok, this is cool indeed, but we can get even further with another utility that goes along `conditional`, the `whenProps` tool.
-
-## WhenProps
-
-This utility helps us write even cleaner `props`-based conditions by leveraging how `styled-components` handle interpolation. No need to go into implementation details here, so let's go back to the initial example to show how `conditional` and `whenProps` make the perfect pair:
-
-_Before_:
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  width: ${(props) =>
-    ['primary', 'secondary', 'warning'].include(props.variant)
-      ? '36px'
-      : props.variant == 'icon' && props.scale == 'default'
-      ? '32px'
-      : props.variant == 'icon' && props.scale == 'large'
-      ? '48px'
-      : '24px'};
-
-  // ...
-`
-```
-
-_After_:
-
-```tsx
-
-const Button = styled.button<ButtonProps>`
-  // ...
-
-  width: ${conditional({
-    '36px': whenProps({ variant: ['primary', 'secondary', 'warning'] }),
-    '24px': whenProps({ variant: 'icon', scale: 'small' }),
-    '32px': whenProps({ variant: 'icon', scale: 'default' }),
-    '48px': whenProps({ variant: 'icon', scale: 'large' }),
-  })};
-
-  // ...
-`;
-
-<Button variant="primary" /> // would render style with `width: 36px;`
-
-<Button variant="secondary" /> // would render style with `width: 36px;`
-
-<Button variant="warning" /> // would render style with `width: 36px;`
-
-<Button variant="icon" scale="small" /> // would render style with `width: 24px;`
-
-<Button variant="icon" scale="default" /> // would render style with `width: 32px;`
-
-<Button variant="icon" scale="large" /> // would render style with `width: 48px;`
-```
-
-`whenProps` receives an object that defines how condition should be evaluated over the component's `props`, mapping which value(s) it should be compared to for each prop of interest (for predictability reasons, we use strict comparison).
-
-The values can be represented as follows:
-
-**_Array_**
-
-A collection of values that the prop value should be compared to.
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  width: ${conditional({
-    '36px': whenProps({ variant: ['primary', 'secondary', 'warning'] }),
-  })};
-`
-```
-
-In the example above, we'll have `width: 36px;` as a result if the button's `variant` prop is either `'primary'`, `'secondary'`, or `'warning'`.
-
-**_Function_**
-
-A function that receives the prop value as argument and returns a `boolean`.
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  width: ${conditional({
-    '36px': whenProps({
-      variant: (variant) => ['primary', 'secondary', 'warning'].includes(variant),
-    }),
-  })};
-`
-```
-
-In the example above, we'll also have `width: 36px;` as a result if the button's `variant` prop is either `'primary'`, `'secondary'`, or `'warning'`.
-
-**_Anything else_**
-
-A value to which the component prop will be strictly compared to.
-
-```tsx
-const Button = styled.button<ButtonProps>`
-  width: ${conditional({
-    '36px': whenProps({ variant: 'primary' }),
-  })};
-`
-```
-
-In the example above, we'll have `width: 36px;` as a result only if the button's `variant` prop is `'primary'`.
-
-{/* The usage of this "Component" is intentional to enable react-syntax-highlighter's own highlighter */}
-
-export const Component = () => {
-  return <SyntaxHighlighter />
-}

package/src/docs/tools/selectEvent.stories.mdx

@@ -1,121 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Tools/Tests/Select Event" />
-
-# Select Event
-
-Our [`Select`](/?path=/story/components-select--playground) component is fully tailored for the needs of our Design System.
-
-As we are not using the native select element, writing unit tests that rely on our custom component would require prior knowledge about its inner structure. To prevent that and to help with performing the main select features, we have exposed a few helper functions.
-
-The following functions descriptions consider this example:
-
-```jsx
-<div>
-  <label htmlFor="select-something">Select something</label>
-  <Select id="select-something" {...otherProps} />
-</div>
-```
-
-## `expand`
-
-This asynchronous function will expand (show) the select menu if it's not already expanded.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-await selectEvent.expand(selectComponent)
-```
-
-## `collapse`
-
-This asynchronous function will collapse the select menu if it's not already collapsed.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-await selectEvent.collapse(selectComponent)
-```
-
-## `select`
-
-This asynchronous function will select the option provided, referred to by its label.
-
-Since we currently support only single selection, we collapse the menu after clicking the option.
-
-If the provided option is already selected, nothing will happen.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-await selectEvent.select('Option label', selectComponent)
-```
-
-## `unselect`
-
-This asynchronous function will unselect the option provided, referred to by its label.
-
-Since we currently support only single selection, we collapse the menu after clicking the option.
-
-If the provided option is already unselected, nothing will happen.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-await selectEvent.unselect('Option label', selectComponent)
-```
-
-## `clear`
-
-This asynchronous function will clear the current selection.
-
-If there is no selected option, nothing will happen.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-await selectEvent.clear(selectComponent)
-```
-
-## `getOptions`
-
-This asynchronous function will return the option elements currently available on the provided Select.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-const optionElements = await selectEvent.getOptions(selectComponent)
-```
-
-## `getSelectedOptions`
-
-This asynchronous function will return the option elements currently selected on the provided Select.
-
-As previously mentioned, we only support single selection, so expect an array with 0 or 1 element for the time being.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-const selectedOptionElements = await selectEvent.getSelectedOptions(selectComponent)
-```
-
-## `search`
-
-This asynchronous function will trigger a search based on the provided query term.
-
-You can use the `getOptions` to check the options that match your search.
-
-Example:
-
-```js
-const selectComponent = screen.getByLabelText('Select something')
-await selectEvent.search('Search term', selectedOptionElements)
-const matchingOptionElements = await selectEvent.getOptions(input)
-```

package/src/hooks/useClickOutside/index.ts

@@ -1 +0,0 @@
-export { default as useClickOutside } from './useClickOutside'

package/src/hooks/useClickOutside/useClickOutside.test.tsx

@@ -1,116 +0,0 @@
-import React, { useRef } from 'react'
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import useClickOutside from './useClickOutside'
-interface ExperimentProps {
-  callback: () => void
-  disabled: boolean
-}
-
-function Experiment({ callback, disabled }: ExperimentProps) {
-  const ref = useRef(null)
-
-  useClickOutside(ref, callback, disabled)
-
-  return (
-    <div>
-      <div ref={ref}>
-        <label id="inside-label">Inside</label>
-        <input aria-labelledby="inside-label" />
-      </div>
-      <button>Outside</button>
-    </div>
-  )
-}
-
-const setup = (props: ExperimentProps) => renderer(<Experiment {...props} />).render()
-
-describe('useClickOutside', () => {
-  describe('when enabled', () => {
-    const props = {
-      callback: jest.fn(),
-      disabled: false,
-    }
-
-    it('does not call callback if user has not interacted with container descendants', () => {
-      setup(props)
-
-      fire.mouseDown(screen.getByText('Outside'))
-      fire.touchEnd(screen.getByText('Outside'))
-      fire.keyUp(screen.getByText('Outside'), { key: 'Escape', code: 'Escape' })
-
-      expect(props.callback).not.toHaveBeenCalled()
-    })
-
-    it('calls callback if the user has interacted with the mouse in any of the container descendants', () => {
-      setup(props)
-
-      fire.mouseDown(screen.getByLabelText('Inside'))
-      fire.mouseDown(screen.getByText('Outside'))
-      expect(props.callback).toHaveBeenCalled()
-    })
-
-    it('calls callback if the user has touched in any of the container descendants', () => {
-      setup(props)
-
-      fire.touchEnd(screen.getByLabelText('Inside'))
-      fire.mouseDown(screen.getByText('Outside'))
-      expect(props.callback).toHaveBeenCalled()
-    })
-
-    it('calls callback if the user has pressed any key in any of the container descendants', () => {
-      setup(props)
-
-      fire.keyUp(screen.getByLabelText('Inside'), { key: 'A', code: 'KeyA' })
-      fire.mouseDown(screen.getByText('Outside'))
-      expect(props.callback).toHaveBeenCalled()
-    })
-
-    it('calls callback if the user presses the escape key while interacting with any of the container descendants', () => {
-      setup(props)
-
-      fire.mouseDown(screen.getByLabelText('Inside'))
-      fire.keyUp(screen.getByLabelText('Inside'), { key: 'Escape', code: 'Escape' })
-      expect(props.callback).toHaveBeenCalled()
-    })
-  })
-
-  describe('when disabled', () => {
-    const props = {
-      callback: jest.fn(),
-      disabled: true,
-    }
-
-    it('does not call the callback even if the user has interacted with the mouse in any of the container descendants', () => {
-      setup(props)
-
-      fire.mouseDown(screen.getByLabelText('Inside'))
-      fire.mouseDown(screen.getByText('Outside'))
-      expect(props.callback).not.toHaveBeenCalled()
-    })
-
-    it('does not call callback even if the user has touched in any of the container descendants', () => {
-      setup(props)
-
-      fire.touchEnd(screen.getByLabelText('Inside'))
-      fire.mouseDown(screen.getByText('Outside'))
-      expect(props.callback).not.toHaveBeenCalled()
-    })
-
-    it('does not call callback even if the user has pressed any key in any of the container descendants', () => {
-      setup(props)
-
-      fire.keyUp(screen.getByLabelText('Inside'), { key: 'A', code: 'KeyA' })
-      fire.mouseDown(screen.getByText('Outside'))
-      expect(props.callback).not.toHaveBeenCalled()
-    })
-
-    it('does not call callback even if the user presses the escape key while interacting with any of the container descendants', () => {
-      setup(props)
-
-      fire.mouseDown(screen.getByLabelText('Inside'))
-      fire.keyUp(screen.getByLabelText('Inside'), { key: 'Escape', code: 'Escape' })
-      expect(props.callback).not.toHaveBeenCalled()
-    })
-  })
-})

package/src/hooks/useClickOutside/useClickOutside.ts

@@ -1,65 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-
-import KeyboardKey from 'utils/toolset/keyboard'
-
-import type { RefObject } from 'react'
-
-function useClickOutside<T extends HTMLElement>(
-  container: RefObject<T>,
-  callback: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void,
-  disabled = false
-): void {
-  const [active, setActive] = useState(false)
-
-  const getContainer = useCallback(
-    function getContainer() {
-      return container.current
-    },
-    [container]
-  )
-
-  const handleEvent = useCallback(
-    function handleEvent(event: MouseEvent | TouchEvent | KeyboardEvent) {
-      function hasPressedEsc() {
-        return KeyboardKey(event as unknown as React.KeyboardEvent).is('ESCAPE')
-      }
-
-      if (!getContainer() || disabled) {
-        return
-      }
-
-      const target = event.target as Node
-      const hasTarget = getContainer()?.contains(target)
-
-      if (!active && hasTarget) {
-        setActive(true)
-      } else if (active && (!hasTarget || hasPressedEsc())) {
-        setActive(false)
-        callback(event)
-      }
-    },
-    [active, callback, disabled, getContainer]
-  )
-
-  useEffect(() => {
-    function subscribe() {
-      document.addEventListener('mousedown', handleEvent, true)
-      document.addEventListener('touchend', handleEvent, true)
-      document.addEventListener('keyup', handleEvent)
-    }
-
-    function unsubscribe() {
-      document.removeEventListener('mousedown', handleEvent, true)
-      document.removeEventListener('touchend', handleEvent, true)
-      document.removeEventListener('keyup', handleEvent)
-    }
-
-    subscribe()
-
-    return () => {
-      unsubscribe()
-    }
-  }, [handleEvent])
-}
-
-export default useClickOutside

package/src/hooks/useDidMount/index.ts

@@ -1 +0,0 @@
-export { default as useDidMount } from './useDidMount'

package/src/hooks/useDidMount/useDidMount.test.tsx

@@ -1,38 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import renderer, { screen } from '../../tests/renderer'
-import useDidMount from './useDidMount'
-
-function Experiment() {
-  const [logs, setLogs] = useState<string[]>([])
-  const didMount = useDidMount()
-
-  useEffect(
-    function () {
-      setLogs((logs) => [...logs, didMount ? 'did mount' : 'not mounted'])
-    },
-    [didMount]
-  )
-
-  return (
-    <div data-testid="logs">
-      {logs.map((log, index) => (
-        <p key={index}>{log}</p>
-      ))}
-    </div>
-  )
-}
-
-const setup = () => renderer(<Experiment />).render()
-
-describe('useDidMount', () => {
-  it('returns true after component is mounted', () => {
-    setup()
-
-    const logs = screen.getByTestId('logs')
-
-    expect(logs.children).toHaveLength(2)
-
-    expect(logs.children[0]).toHaveTextContent('not mounted')
-    expect(logs.children[1]).toHaveTextContent('did mount')
-  })
-})

package/src/hooks/useDidMount/useDidMount.ts

@@ -1,20 +0,0 @@
-import { useRef, useEffect } from 'react'
-
-/**
- * Hook useful to trigger action conditionally based
- * on if the component is mounted.
- * Be aware that your effect, callback, memo, etc cannot list is
- * as a dependency, otherwise it will be triggered at the wrong moment.
- * @returns {boolean} Whether the component is mounted or not.
- */
-function useDidMount(): boolean {
-  const counter = useRef(0)
-
-  useEffect(function onMount() {
-    counter.current = 1
-  }, [])
-
-  return counter.current > 0
-}
-
-export default useDidMount

package/src/hooks/useFingerprint/index.ts

@@ -1 +0,0 @@
-export { default } from './useFingerprint'