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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import Checkbox, { CheckboxProps } from './Checkbox'
-import type { Meta } from '@storybook/react'
-
-import Status from 'utils/types/Status'
-
-export default {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: [Status.Success, Status.Danger, Status.Neutral],
-      },
-      table: {
-        disable: true,
-      },
-    },
-    scale: {
-      control: {
-        type: 'select',
-        options: ['default', 'small'],
-      },
-    },
-    trailing: {
-      table: {
-        disable: true,
-      },
-    },
-    leading: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      action: 'changed',
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: CheckboxProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Checkbox {...args}>Option 1</Checkbox>
-      <Checkbox {...args} leading={<span>&clubs;</span>}>
-        Option 2
-      </Checkbox>
-      <Checkbox {...args} trailing={<span>&spades;</span>}>
-        Option 3
-      </Checkbox>
-    </div>
-  )
-}
-
-Playground.args = {}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-
-import Checkbox from './Checkbox'
-import generator from '../../tests/generator'
-import renderer, { fire } from '../../tests/renderer'
-
-const setup = ({ ...overrides }) => renderer(<Checkbox {...overrides} />).render()
-
-describe('<Checkbox />', () => {
-  it('renders correctly', () => {
-    const props = {
-      children: generator.word(),
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    const component = screen.getByTestId('checkbox')
-    const selector = screen.getByTestId('selector')
-
-    expect(component).toHaveTextContent(props.children)
-    expect(selector).toHaveAttribute('type', 'checkbox')
-  })
-
-  it('renders leading correctly', () => {
-    const props = {
-      children: generator.word(),
-      leading: <span>&clubs;</span>,
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('checkbox')).toHaveTextContent(props.children)
-    expect(screen.getByTestId('selection-leading')).toBeInTheDocument()
-  })
-
-  it('renders trailing correctly', () => {
-    const props = {
-      children: generator.word(),
-      trailing: <span>&spades;</span>,
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('checkbox')).toHaveTextContent(props.children)
-    expect(screen.getByTestId('selection-trailing')).toBeInTheDocument()
-  })
-
-  it('triggers onChange when clicked', () => {
-    const props = {
-      children: generator.word(),
-      onChange: jest.fn(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('selector')).not.toBeChecked()
-
-    fire.click(screen.getByTestId('selector'))
-
-    expect(screen.getByTestId('selector')).toBeChecked()
-  })
-})

package/src/components/Checkbox/Checkbox.tsx

@@ -1,170 +0,0 @@
-import React, { Fragment, InputHTMLAttributes, ReactNode } from 'react'
-import clsx from 'clsx'
-
-import { Icon } from 'components/Icon'
-import type ColorScheme from 'utils/types/ColorScheme'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import SelectionWrapper, { SelectionStyleProps } from 'common/SelectionWrapper'
-import styled from 'styled-components'
-import { getToken as token } from 'theming'
-import transition from 'styles/transition'
-
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, SelectionStyleProps {
-  leading?: ReactNode
-  scheme?: ColorScheme
-  trailing?: ReactNode
-}
-
-const Check = styled(Icon)<SelectionStyleProps>`
-  position: absolute;
-  top: 50%;
-
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  pointer-events: none;
-`
-
-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('checkbox-selector-size')};
-  width: ${token('checkbox-selector-size')};
-
-  border-radius: ${token('checkbox-selector-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-
-  border-color: ${conditional({
-    'checkbox-selector-border-color': whenProps({ scheme: 'light' }),
-    'checkbox-dark-selector-border-color': whenProps({ scheme: 'dark' }),
-  })};
-
-  background: ${conditional({
-    'checkbox-selector-background': whenProps({ scheme: 'light' }),
-    'checkbox-dark-selector-background': whenProps({ scheme: 'dark' }),
-  })};
-
-  :checked {
-    background-color: ${token('checkbox-selector-checked-background')};
-    border-color: ${token('checkbox-selector-checked-border-color')};
-  }
-
-  :checked + ${Check} {
-    color: ${token('checkbox-selector-icon-color')};
-  }
-
-  :not(:checked) + ${Check} {
-    color: transparent;
-  }
-
-  ${disableable`
-    background: ${conditional({
-      'checkbox-selector-background--disabled': whenProps({ scheme: 'light' }),
-      'checkbox-dark-selector-background--disabled': whenProps({ scheme: 'dark' }),
-    })};
-    border-color: ${conditional({
-      'checkbox-selector-border-color--disabled': whenProps({ scheme: 'light' }),
-      'checkbox-dark-selector-border-color--disabled': whenProps({ scheme: 'dark' }),
-    })};
-    :checked {
-      background-color: ${token('checkbox-selector-checked-background--disabled')};
-      border-color: ${token('checkbox-selector-checked-border-color--disabled')};
-    }
-  `}
-
-  ${hoverable`
-    background: ${conditional({
-      'checkbox-selector-background--hover': whenProps({ scheme: 'light' }),
-      'checkbox-dark-selector-background--hover': whenProps({ scheme: 'dark' }),
-    })};
-    border-color: ${conditional({
-      'checkbox-selector-border-color--hover': whenProps({ scheme: 'light' }),
-      'checkbox-dark-selector-border-color--hover': whenProps({ scheme: 'dark' }),
-    })};
-
-    :checked {
-      background-color: ${token('checkbox-selector-checked-background--hover')};
-      border-color: ${token('checkbox-selector-checked-border-color--hover')};
-    }
-
-    :checked + ${Check} {
-      color: ${token('checkbox-selector-icon-color')};
-    }
-  `}
-
-  ${focusable`
-    background: ${conditional({
-      'checkbox-selector-background--focus': whenProps({ scheme: 'light' }),
-      'checkbox-dark-selector-background--focus': whenProps({ scheme: 'dark' }),
-    })};
-    border-color: ${conditional({
-      'checkbox-selector-border-color--focus': whenProps({ scheme: 'light' }),
-      'checkbox-dark-selector-border-color--focus': whenProps({ scheme: 'dark' }),
-    })};
-
-    :checked {
-      background-color: ${token('checkbox-selector-checked-background--focus')};
-      border-color: ${token('checkbox-selector-checked-border-color--focus')};
-    }
-    :checked + ${Check} {
-      color: ${token('checkbox-selector-icon-color')};
-    }
-
-    box-shadow: ${token('checkbox-selector-box-shadow')};
-  `}
-`
-
-function Checkbox({
-  className,
-  disabled,
-  children,
-  leading,
-  trailing,
-  scheme = 'light',
-  scale = 'default',
-  ...others
-}: CheckboxProps): JSX.Element {
-  return (
-    <SelectionWrapper
-      scheme={scheme}
-      scale={scale}
-      selector={
-        <Fragment>
-          <Selector
-            data-testid="selector"
-            {...others}
-            scheme={scheme}
-            disabled={disabled}
-            type="checkbox"
-          />
-          <Check name="check" size={14} className="check" />
-        </Fragment>
-      }
-      leading={leading}
-      trailing={trailing}
-      className={clsx({ 'is-disabled': disabled }, className)}
-      data-testid="checkbox"
-    >
-      {children}
-    </SelectionWrapper>
-  )
-}
-
-export default Checkbox

package/src/components/Checkbox/index.ts

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

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Label } from 'components/Label'
-import DateHelper, { TODAY } from '../Calendar/Date.helper'
-import DatePicker from './DatePicker'
-
-import type { Story, Meta } from '@storybook/react'
-import type { DatePickerProps } from './DatePicker.types'
-
-export default {
-  title: 'Components/Date/DatePicker',
-  component: DatePicker,
-  argTypes: {
-    id: {
-      table: {
-        disable: true,
-      },
-    },
-    name: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      table: {
-        disable: true,
-      },
-    },
-    getInputProps: {
-      table: {
-        disable: true,
-      },
-    },
-    getCalendarProps: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<DatePickerProps> = (args: DatePickerProps) => {
-  return (
-    <div className="flex flex-col">
-      <Label htmlFor="playground-date-picker">Select the date</Label>
-      <DatePicker {...args} />
-    </div>
-  )
-}
-
-Playground.args = {
-  id: 'playground-date-picker',
-  name: 'playground-date-picker',
-}
-
-export const WithValue: Story<DatePickerProps> = (args: DatePickerProps) => {
-  const [value, setValue] = useState(DateHelper('December 17, 1995').toString())
-
-  useEffect(() => {
-    setTimeout(() => {
-      setValue(DateHelper('January 01, 2000').toString())
-    }, 3000)
-  }, [])
-
-  return (
-    <div className="flex flex-col">
-      <Label htmlFor="with-value-date-picker">Select the date</Label>
-      <DatePicker {...args} value={value} />
-      <small className="mt-4">I&apos;ll change my value automatically. Wait and see.</small>
-    </div>
-  )
-}
-
-WithValue.args = {
-  id: 'with-value-date-picker',
-  name: 'with-value-date-picker',
-}
-
-export function DatePickerConstraints(args: DatePickerProps): JSX.Element {
-  return (
-    <div className="flex flex-col">
-      <Label htmlFor="constraints-date-picker">Select the available date</Label>
-      <DatePicker {...args} />
-    </div>
-  )
-}
-
-DatePickerConstraints.args = {
-  id: 'constraints-date-picker',
-  name: 'constraints-date-picker',
-  constraints: [[null, TODAY.subtract('day', 1).toString()]],
-  value: DateHelper('December 17, 1995').toString(),
-}
-
-DatePickerConstraints.parameters = {
-  docs: {
-    description: {
-      story: `
-Constraints are used to block dates from being selected and can be represented in different ways, according to your needs. If a given day matches at least one of the constraints,
-it will be disabled.
-
-
-\`\`\`jsx
-const TODAY = DateHelper()
-
-<Calendar {...props} constraints={[[null, TODAY.subtract('day', 1).toString()]]} />
-\`\`\`
-
-Check the constraints details in the [Calendar component](/story/components-calendar--calendar-constraints&viewMode=docs).
-`,
-    },
-  },
-}

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,174 +0,0 @@
-import React from 'react'
-
-import { composeStories } from '@storybook/react'
-
-import { DatePickerEvent } from '../../testing/DatePickerEvent'
-import { formatter } from './DatePicker'
-import { MonthHelper } from '../Calendar'
-import * as stories from './DatePicker.stories'
-import DateHelper, { TODAY } from '../Calendar/Date.helper'
-import generator from '../../tests/generator'
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import type { DatePickerProps } from './DatePicker.types'
-import type { CalendarMonthAlias } from '../Calendar'
-import { formatDate } from './useDatePicker'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<DatePickerProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('DatePicker', () => {
-  it('starts collapsed', () => {
-    const name = generator.word()
-    const props = {
-      id: name,
-      name,
-    }
-
-    setup(props)
-
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-  })
-
-  describe('when disabled', () => {
-    it('does not expand when input is clicked', () => {
-      setup({ disabled: true })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-      expect(datePickerInput).toBeDisabled()
-
-      fire.click(datePickerInput)
-
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('when enabled', () => {
-    it('expands with the current month/year calendar when input is clicked', async () => {
-      setup({ disabled: false })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-
-      await DatePickerEvent.expand(datePickerInput)
-
-      expect(screen.getByLabelText('Open month selection')).toHaveTextContent(
-        MonthHelper(TODAY.getMonth() as CalendarMonthAlias).format('long')
-      )
-
-      expect(screen.getByLabelText('Open year selection')).toHaveTextContent(
-        String(TODAY.getYear())
-      )
-    })
-
-    it('expands with the month/year calendar for the selected date when input is clicked', async () => {
-      setup({ disabled: false, value: DateHelper('December 17, 1995').toString() })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-
-      await DatePickerEvent.expand(datePickerInput)
-
-      expect(screen.getByLabelText('Open month selection')).toHaveTextContent('December')
-      expect(screen.getByLabelText('Open year selection')).toHaveTextContent('1995')
-    })
-
-    it('selects the clicked date', async () => {
-      setup({})
-
-      const date = DateHelper(TODAY.get())
-      date.get().setDate(generator.natural({ min: 1, max: 28 }))
-      const formattedDate = formatter.format(date)
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-
-      await DatePickerEvent.pick(formattedDate, datePickerInput)
-
-      expect(datePickerInput).toHaveDisplayValue(formattedDate)
-
-      const selectedDays = await DatePickerEvent.getSelectedDates(datePickerInput)
-      expect(selectedDays).toHaveLength(1)
-      expect(selectedDays[0]).toHaveTextContent(String(date.getDate()))
-    })
-
-    it('initializes with a selected item', async () => {
-      const date = DateHelper(TODAY.get())
-      date.get().setMonth(generator.natural({ min: 0, max: 11 }))
-      date.get().setDate(generator.natural({ min: 1, max: 28 }))
-      const formattedDate = formatter.format(date)
-
-      setup({ value: date.toString() })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-      expect(datePickerInput).toHaveDisplayValue(formattedDate)
-
-      await DatePickerEvent.expand(datePickerInput)
-
-      const selectedDays = await DatePickerEvent.getSelectedDates(datePickerInput)
-
-      expect(selectedDays).toHaveLength(1)
-      expect(selectedDays[0]).toHaveTextContent(String(date.getDate()))
-    })
-
-    it('updates selected date after the initially selected one changes', async () => {
-      const date = DateHelper(TODAY.get())
-      date.get().setMonth(generator.natural({ min: 0, max: 11 }))
-      date.get().setDate(generator.natural({ min: 1, max: 28 }))
-      const formattedDate = formatter.format(date)
-
-      const { rerender } = setup({ value: date.toString() })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-      expect(datePickerInput).toHaveDisplayValue(formattedDate)
-
-      const newDate = DateHelper(TODAY.get())
-      newDate.get().setMonth(generator.natural({ min: 0, max: 11 }))
-      newDate.get().setDate(generator.natural({ min: 1, max: 28 }))
-      const newFormattedDate = formatter.format(newDate)
-
-      const newProps = {
-        value: newDate.toString(),
-      }
-
-      rerender(<Playground {...newProps} />)
-
-      expect(datePickerInput).toHaveDisplayValue(newFormattedDate)
-
-      const selectedDays = await DatePickerEvent.getSelectedDates(datePickerInput)
-
-      expect(selectedDays).toHaveLength(1)
-      expect(selectedDays[0]).toHaveTextContent(String(newDate.getDate()))
-    })
-
-    it('clears selection', async () => {
-      const date = DateHelper(TODAY.get())
-      date.get().setMonth(generator.natural({ min: 0, max: 11 }))
-      date.get().setDate(generator.natural({ min: 1, max: 28 }))
-      const formattedDate = formatter.format(date)
-
-      setup({ value: date.toString() })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-      expect(datePickerInput).toHaveDisplayValue(formattedDate)
-
-      await DatePickerEvent.clear(datePickerInput)
-
-      expect(datePickerInput).toHaveDisplayValue('')
-      const selectedDays = await DatePickerEvent.getSelectedDates(datePickerInput)
-
-      expect(selectedDays).toHaveLength(0)
-    })
-
-    it('try to pass an invalid date', () => {
-      const date = '2022-32-33'
-      const formattedDate = formatDate(date)
-
-      setup({ value: formattedDate })
-
-      const datePickerInput = screen.getByLabelText('Select the date')
-      expect(datePickerInput).toHaveDisplayValue('') // invalid date is not applied
-    })
-  })
-})