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

package/src/components/Switch/Switch.stories.tsx

@@ -1,65 +0,0 @@
-import React, { ChangeEvent, useState } from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import Switch, { SwitchProps } from './Switch'
-
-export default {
-  title: 'Components/Switch',
-  component: Switch,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    scale: {
-      control: {
-        type: 'select',
-        options: ['default', 'large'],
-      },
-    },
-    active: {
-      table: {
-        disable: true,
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    onToggle: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<SwitchProps> = (args) => {
-  const [active, setActive] = useState(args.active ?? false)
-
-  function handleToggle(e: ChangeEvent<HTMLInputElement>) {
-    setActive(e.target.checked)
-  }
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center p-4 space-x-2">
-        <Switch
-          {...args}
-          active={active}
-          onToggle={(e) => {
-            args.onToggle?.(e)
-            handleToggle(e)
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  disabled: false,
-  scale: 'default',
-}

package/src/components/Switch/Switch.test.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-import userEvent from '@testing-library/user-event'
-
-import * as stories from './Switch.stories'
-import renderer, { screen } from '../../tests/renderer'
-import type { SwitchProps } from './Switch'
-
-const { Playground } = composeStories(stories)
-
-const setup = ({ ...overrides }: Partial<SwitchProps> = {}) => {
-  return renderer(<Playground {...overrides} />).render()
-}
-
-describe('ToggleSwitch', () => {
-  it('renders correctly', () => {
-    setup()
-
-    screen.getByTitle('inactive')
-    screen.getByTestId('switch-icon-inactive')
-    expect(screen.queryByTestId('switch-icon-active')).not.toBeInTheDocument()
-
-    userEvent.click(screen.getByTitle('inactive'))
-
-    screen.getByTitle('active')
-    screen.getByTestId('switch-icon-active')
-    expect(screen.queryByTestId('switch-icon-inactive')).not.toBeInTheDocument()
-  })
-
-  it('renders correctly when disabled', () => {
-    const props = {
-      disabled: true,
-    }
-
-    setup(props)
-
-    expect(screen.getByTitle('inactive')).toHaveClass('is-disabled')
-
-    userEvent.click(screen.getByTitle('inactive'), undefined, {
-      skipPointerEventsCheck: true,
-    })
-
-    screen.getByTitle('inactive')
-    expect(screen.queryByTitle('active')).not.toBeInTheDocument()
-  })
-
-  it('calls onToggle when clicked', () => {
-    const onToggle = jest.fn()
-    const props = {
-      onToggle,
-    }
-
-    setup(props)
-
-    userEvent.click(screen.getByTitle('inactive'))
-
-    expect(onToggle).toHaveBeenCalledTimes(1)
-    expect(onToggle).toHaveBeenCalledWith(expect.any(Object))
-  })
-})

package/src/components/Switch/Switch.tsx

@@ -1,209 +0,0 @@
-import React, { ChangeEvent, InputHTMLAttributes } from 'react'
-import clsx from 'clsx'
-import styled from 'styled-components'
-
-import { Icon } from 'components/Icon'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import font from 'styles/font'
-import hidden from 'styles/hidden'
-import hoverable from 'styles/hoverable'
-import { getToken as token } from 'theming'
-
-import transition from 'styles/transition'
-
-interface WithAdditionalProps {
-  active?: boolean
-  onToggle?: (event: ChangeEvent<HTMLInputElement>) => void
-  scale?: 'default' | 'large'
-}
-
-export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, WithAdditionalProps {
-  className?: string
-}
-
-const SwitchWrapper = styled.label<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({})};
-
-  user-select: none;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-
-  position: relative;
-
-  display: inline-flex;
-
-  width: ${conditional({
-    'switch-width': whenProps({ scale: 'default' }),
-    'switch-large-width': whenProps({ scale: 'large' }),
-  })};
-  height: ${conditional({
-    'switch-height': whenProps({ scale: 'default' }),
-    'switch-large-height': whenProps({ scale: 'large' }),
-  })};
-
-  background-color: ${conditional({
-    'switch-inactive-background-color': whenProps({ active: false }),
-    'switch-active-background-color': whenProps({ active: true }),
-  })};
-
-  border-radius: ${conditional({
-    'switch-border-radius': whenProps({ scale: 'default' }),
-    'switch-large-border-radius': whenProps({ scale: 'large' }),
-  })};
-
-  ${hoverable`
-    background: ${conditional({
-      'switch-inactive-background-color--hover': whenProps({ active: false }),
-      'switch-active-background-color--hover': whenProps({ active: true }),
-    })};
-  `}
-
-  ${focusable`
-    box-shadow: ${token('switch-box-shadow')};
-    outline: ${token('switch-outline')};
-    outline-offset: ${token('switch-outline-offset')};
-  `}
-
-  ${disableable``}
-`
-
-const Slider = styled.span<WithAdditionalProps>`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  :before {
-    position: absolute;
-    bottom: ${conditional({
-      'switch-slider-y': whenProps({ scale: 'default', active: false }),
-      'switch-slider-active-y': whenProps({ scale: 'default', active: true }),
-      'switch-slider-large-y': whenProps({ scale: 'large', active: false }),
-      'switch-slider-large-active-y': whenProps({ scale: 'large', active: true }),
-    })};
-    left: ${conditional({
-      'switch-slider-x': whenProps({ scale: 'default', active: false }),
-      'switch-slider-active-x': whenProps({ scale: 'default', active: true }),
-      'switch-slider-large-x': whenProps({ scale: 'large', active: false }),
-      'switch-slider-large-active-x': whenProps({ scale: 'large', active: true }),
-    })};
-
-    width: ${conditional({
-      'switch-slider-size': whenProps({ scale: 'default' }),
-      'switch-slider-large-size': whenProps({ scale: 'large' }),
-    })};
-
-    height: ${conditional({
-      'switch-slider-size': whenProps({ scale: 'default' }),
-      'switch-slider-large-size': whenProps({ scale: 'large' }),
-    })};
-
-    background-color: ${token('switch-slider-background-color')};
-    border-radius: ${token('switch-slider-border-radius')};
-
-    ${transition({
-      timingFunction: 'ease-out',
-      duration: '150ms',
-    })}
-
-    content: '';
-  }
-`
-
-const HiddenInput = styled.input`
-  ${hidden(true)}
-`
-
-const ActiveIcon = styled(Icon)<WithAdditionalProps>`
-  position: absolute;
-  top: ${conditional({
-    'switch-icon-active-y': whenProps({ scale: 'default' }),
-    'switch-large-icon-active-y': whenProps({ scale: 'large' }),
-  })};
-  left: ${conditional({
-    'switch-icon-active-x': whenProps({ scale: 'default' }),
-    'switch-large-icon-active-x': whenProps({ scale: 'large' }),
-  })};
-
-  width: ${conditional({
-    'switch-icon-width': whenProps({ scale: 'default' }),
-    'switch-large-icon-width': whenProps({ scale: 'large' }),
-  })};
-
-  height: ${conditional({
-    'switch-icon-height': whenProps({ scale: 'default' }),
-    'switch-large-icon-height': whenProps({ scale: 'large' }),
-  })};
-
-  color: ${token('switch-icon-color')};
-`
-
-const InactiveIcon = styled(Icon)<WithAdditionalProps>`
-  position: absolute;
-  top: ${conditional({
-    'switch-icon-inactive-y': whenProps({ scale: 'default' }),
-    'switch-large-icon-inactive-y': whenProps({ scale: 'large' }),
-  })};
-  left: ${conditional({
-    'switch-icon-inactive-x': whenProps({ scale: 'default' }),
-    'switch-large-icon-inactive-x': whenProps({ scale: 'large' }),
-  })};
-
-  width: ${conditional({
-    'switch-icon-width': whenProps({ scale: 'default' }),
-    'switch-large-icon-width': whenProps({ scale: 'large' }),
-  })};
-
-  height: ${conditional({
-    'switch-icon-height': whenProps({ scale: 'default' }),
-    'switch-large-icon-height': whenProps({ scale: 'large' }),
-  })};
-
-  color: ${token('switch-icon-color')};
-`
-
-function Switch({
-  active = false,
-  className,
-  disabled = false,
-  name,
-  onToggle,
-  scale = 'default',
-  ...others
-}: SwitchProps): JSX.Element {
-  return (
-    <SwitchWrapper
-      htmlFor={name}
-      title={active ? 'active' : 'inactive'}
-      active={active}
-      className={clsx(className, {
-        'is-disabled': disabled,
-      })}
-      scale={scale}
-    >
-      {active ? (
-        <ActiveIcon name="check" scale={scale} data-testid="switch-icon-active" />
-      ) : (
-        <InactiveIcon name="close" scale={scale} data-testid="switch-icon-inactive" />
-      )}
-      <Slider active={active} scale={scale} />
-      <HiddenInput
-        type="checkbox"
-        {...others}
-        id={name}
-        name={name}
-        checked={active}
-        disabled={disabled}
-        onChange={onToggle}
-      />
-    </SwitchWrapper>
-  )
-}
-
-export default Switch

package/src/components/Switch/index.ts

@@ -1,2 +0,0 @@
-export { default as Switch } from './Switch'
-export type { SwitchProps } from './Switch'

package/src/components/Table/Selection.tsx

@@ -1,202 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React, { useCallback, useState, createContext, useContext } from 'react'
-import type { PropsWithChildren } from 'react'
-
-import { createSelectable } from 'hooks/useSelectable'
-import type { Selectable, SelectableState, SelectableKeyType } from 'hooks/useSelectable'
-import type { useSelectableProps } from 'hooks/useSelectable/useSelectable.types'
-
-export type TableSelectableRow = Selectable & {
-  value?: string | number | boolean
-}
-
-export type TableSelectionSelectable<T extends Selectable = TableSelectableRow> = Omit<
-  useSelectableProps<T>,
-  'onChange'
-> & {
-  onChange: (selected: T[]) => void
-}
-
-export type TableSelectionConfig<T extends Selectable = TableSelectableRow> =
-  | boolean
-  | Partial<TableSelectionSelectable<T>>
-
-export interface TableSelectionCore<T extends Selectable = TableSelectableRow> {
-  selected?: SelectableState<T>
-  config: TableSelectionSelectable<T>
-  allRowsAreSelected: boolean
-  toggle: (key: T) => void
-  toggleAll: () => void
-  clear: () => void
-  register: (key?: T) => void
-}
-
-function getSelectableProps<T extends Selectable = TableSelectableRow>(
-  config?: TableSelectionConfig<T>
-): TableSelectionSelectable<T> {
-  const defaults: TableSelectionSelectable<T> = {
-    multiple: true,
-    selected: [],
-    onChange() {},
-    adapters: {
-      generic: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        getKey: (row) => row.value as string,
-      },
-    },
-  }
-
-  if (!config || config === true) return defaults
-
-  return {
-    ...defaults,
-    ...config,
-  }
-}
-
-export function useTableSelectionCore<T extends Selectable>(
-  config?: TableSelectionConfig<T>
-): TableSelectionCore<T> {
-  const { useSelectable } = createSelectable<T>()
-
-  const [registered, setRegistered] = useState<T[]>([])
-
-  const selectableProps = getSelectableProps(config)
-
-  const { selected, toggle, select, unselect, clear } = useSelectable({
-    ...selectableProps,
-    onChange(value) {
-      return selectableProps.onChange(value ? [...value.values()] : [])
-    },
-  })
-
-  const allRowsAreSelected = selected.size === registered.length
-
-  const getKey = useCallback(
-    (row: T): SelectableKeyType => {
-      const { adapters } = selectableProps
-
-      const adapter = adapters?.[row._type || 'generic']
-      const key = adapter?.getKey(row) ?? ''
-
-      return key
-    },
-    [selectableProps]
-  )
-
-  const register = useCallback(
-    (row?: T) => {
-      if (!row) return
-
-      const key = getKey(row)
-
-      setRegistered((prev) => {
-        const alreadyRegistered = prev.some((prevRow) => getKey(prevRow) === key)
-
-        if (alreadyRegistered) {
-          return prev
-        }
-
-        return [...prev, row]
-      })
-    },
-    [getKey]
-  )
-
-  function toggleAll() {
-    if (allRowsAreSelected) {
-      registered.forEach((row) => {
-        const key = getKey(row)
-
-        if (!key) return
-
-        unselect(key)
-      })
-    } else {
-      registered.forEach((row) => select(row))
-    }
-  }
-
-  return {
-    allRowsAreSelected,
-    config: selectableProps,
-    selected,
-    toggle,
-    toggleAll,
-    clear,
-    register,
-  }
-}
-
-export const TableSelectionContext = createContext<TableSelectionCore>({
-  selected: undefined,
-  config: {} as TableSelectionSelectable,
-  allRowsAreSelected: false,
-  toggle() {},
-  toggleAll() {},
-  clear() {},
-  register() {},
-})
-
-type TableSelectionProviderProps = PropsWithChildren<{
-  selection?: TableSelectionConfig
-}>
-
-export function TableSelectionProvider({
-  children,
-  selection,
-}: TableSelectionProviderProps): JSX.Element {
-  const selectionCore = useTableSelectionCore(selection)
-
-  return (
-    <TableSelectionContext.Provider value={selectionCore}>
-      {children}
-    </TableSelectionContext.Provider>
-  )
-}
-
-export function useTableSelection<
-  T extends Selectable = TableSelectableRow
->(): TableSelectionCore<T> {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return useContext(TableSelectionContext)
-}
-
-type TableSelectionHook<T extends Selectable = TableSelectableRow> = {
-  values: T[]
-  clear: TableSelectionCore<T>['clear']
-}
-
-export function useSelection<T extends Selectable = TableSelectableRow>(): TableSelectionHook<T> {
-  const { selected, clear } = useTableSelection<T>()
-
-  return {
-    values: selected ? [...selected.values()] : [],
-    clear,
-  }
-}
-
-export function isCellSelected<T extends Selectable>(
-  value: T,
-  selectedRows: SelectableState<T>,
-  config: TableSelectionSelectable<T>
-): boolean {
-  const { adapters } = config
-
-  const adapter = adapters?.[value._type || 'generic']
-  const key = adapter?.getKey(value)
-
-  if (!key) return false
-
-  return selectedRows.has(key)
-}
-
-export function useIsCellSelected<T extends Selectable = TableSelectableRow>(value?: T): boolean {
-  const { selected, config } = useTableSelection<T>()
-
-  if (!value || !selected) return false
-
-  return isCellSelected(value, selected, config)
-}

package/src/components/Table/Table.fixtures.ts

@@ -1,101 +0,0 @@
-import generator from '../../tests/generator'
-
-export const TABLE_COLUMNS = [
-  {
-    key: 'ref',
-    title: 'Reference',
-  },
-  {
-    key: 'product',
-    title: 'Product',
-  },
-  {
-    key: 'price',
-    title: 'Price',
-    isSortable: true,
-  },
-  {
-    key: 'release-date',
-    title: 'Release Date',
-    isSortable: true,
-  },
-  {
-    key: 'owner',
-    title: 'Owner',
-  },
-]
-
-export const TABLE_ROWS = [
-  {
-    value: 1,
-    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
-    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
-    [TABLE_COLUMNS[3].key]: generator.date(),
-    [TABLE_COLUMNS[4].key]: generator.name(),
-  },
-  {
-    value: 2,
-    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
-    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
-    [TABLE_COLUMNS[3].key]: generator.date(),
-    [TABLE_COLUMNS[4].key]: generator.name(),
-  },
-  {
-    value: 3,
-    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
-    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
-    [TABLE_COLUMNS[3].key]: generator.date(),
-    [TABLE_COLUMNS[4].key]: generator.name(),
-  },
-  {
-    value: 4,
-    [TABLE_COLUMNS[0].key]: btoa(generator.word({ length: 5 })),
-    [TABLE_COLUMNS[1].key]: generator.word({ capitalize: true, length: 10 }),
-    [TABLE_COLUMNS[2].key]: generator.natural({ max: 10_000 }),
-    [TABLE_COLUMNS[3].key]: generator.date(),
-    [TABLE_COLUMNS[4].key]: generator.name(),
-  },
-]
-
-export type RowFixture = (typeof TABLE_ROWS)[number]
-
-export const TEST_TABLE_COLUMNS = [
-  {
-    key: 'name',
-    title: 'Name',
-    isSortable: true,
-  },
-  {
-    key: 'type',
-    title: 'Type',
-  },
-  {
-    key: 'quantity',
-    title: 'Quantity',
-    isSortable: true,
-  },
-]
-
-export const TEST_TABLE_ROWS = [
-  {
-    key: 1,
-    name: 'Orange',
-    type: 'Citrus',
-    quantity: 30,
-  },
-  {
-    key: 2,
-    name: 'Raspberry',
-    type: 'Berries',
-    quantity: 10,
-  },
-  {
-    key: 3,
-    name: 'Mango',
-    type: 'Tropical',
-    quantity: 40,
-  },
-]