@charcoal-ui/react 4.0.0-beta.3 → 4.0.0-beta.5

package/src/components/MultiSelect/context.ts

@@ -1,23 +0,0 @@
-import { createContext } from 'react'
-
-type MultiSelectGroupContext = {
-  name: string
-  selected: string[]
-  disabled: boolean
-  readonly: boolean
-  invalid: boolean
-  onChange: ({ value, selected }: { value: string; selected: boolean }) => void
-}
-
-export const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({
-  name: undefined as never,
-  selected: [],
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error(
-      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?'
-    )
-  },
-})

package/src/components/MultiSelect/index.story.tsx

@@ -1,216 +0,0 @@
-import { useState } from 'react'
-import { Story } from '../../_lib/compat'
-import styled from 'styled-components'
-import { MultiSelectGroup, default as MultiSelect } from '.'
-
-export default {
-  title: 'MultiSelect',
-  component: MultiSelect,
-  argTypes: {
-    name: {
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    invalid: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    variant: {
-      control: {
-        type: 'inline-radio',
-        options: ['default', 'overlay'],
-      },
-    },
-  },
-}
-
-type Props = {
-  name: string
-  label: string
-  selected: boolean
-  onChange: (selected: string[]) => void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  variant?: 'default' | 'overlay'
-  className?: string
-}
-
-const StyledMultiSelectGroup = styled(MultiSelectGroup)`
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-`
-
-const Template: Story<Props> = ({
-  name,
-  label,
-  selected,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  variant,
-  className,
-}) => {
-  return (
-    <StyledMultiSelectGroup
-      {...{
-        name,
-        label,
-        onChange,
-        disabled,
-        readonly,
-        invalid,
-      }}
-      selected={selected ? ['選択肢1', '選択肢3'] : []}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  name: '',
-  label: '',
-  selected: true,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
-  // eslint-disable-next-line no-console
-  onChange: (selected) => console.log(selected),
-}
-
-type PlaygroundProps = {
-  name: string
-  label: string
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  className?: string
-  variant?: 'default' | 'overlay'
-}
-
-export const Playground: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
-
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Playground.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
-}
-
-export const Invalid: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
-
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-      invalid
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Invalid.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  variant: 'default',
-}
-
-export const Overlay: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
-
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant="overlay"
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Overlay.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-}

package/src/components/MultiSelect/index.test.tsx

@@ -1,263 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { ThemeProvider } from 'styled-components'
-import { default as MultiSelect, MultiSelectGroup } from '.'
-import { light } from '@charcoal-ui/theme'
-
-describe('MultiSelect', () => {
-  describe('in development mode', () => {
-    beforeEach(() => {
-      process.env.NODE_ENV = 'development'
-    })
-
-    describe('when `<MultiSelect />` is used without `<MultiSelectGroup />`', () => {
-      beforeEach(() => {
-        // eslint-disable-next-line no-console
-        console.error = jest.fn()
-
-        render(
-          <ThemeProvider theme={light}>
-            <MultiSelect value="a" />
-          </ThemeProvider>
-        )
-      })
-
-      it('emits error message', () => {
-        // eslint-disable-next-line no-console
-        expect(console.error).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Perhaps you forgot to wrap with <MultiSelectGroup>/u
-          )
-        )
-      })
-    })
-  })
-
-  describe('none of the options selected', () => {
-    let option1: HTMLInputElement
-    let option2: HTMLInputElement
-    let option3: HTMLInputElement
-    let allOptions: HTMLInputElement[]
-    let parent: HTMLDivElement
-    const childOnChange = jest.fn()
-    const parentOnChange = jest.fn()
-
-    beforeEach(() => {
-      render(
-        <TestComponent
-          selected={[]}
-          childOnChange={childOnChange}
-          parentOnChange={parentOnChange}
-        />
-      )
-
-      option1 = screen.getByDisplayValue('option1')
-      option2 = screen.getByDisplayValue('option2')
-      option3 = screen.getByDisplayValue('option3')
-      allOptions = [option1, option2, option3]
-      parent = screen.getByTestId('SelectGroup')
-    })
-
-    it('options have correct name', () => {
-      allOptions.forEach((element) => expect(element.name).toBe('defaultName'))
-    })
-
-    it('parent have correct aria-label', () => {
-      expect(parent.getAttribute('aria-label')).toBe('defaultAriaLabel')
-    })
-
-    it('none of the options are selected', () => {
-      allOptions.forEach((element) => expect(element.checked).toBeFalsy())
-    })
-
-    describe('selecting option1', () => {
-      it('childOnChange is called', () => {
-        fireEvent.click(option1)
-        expect(childOnChange).toHaveBeenCalledWith({
-          value: 'option1',
-          selected: true,
-        })
-      })
-
-      it('parentOnChange is called', () => {
-        fireEvent.click(option1)
-        expect(parentOnChange).toHaveBeenCalledWith(['option1'])
-      })
-    })
-  })
-
-  describe('option2 is selected', () => {
-    let option1: HTMLInputElement
-    let option2: HTMLInputElement
-    let option3: HTMLInputElement
-    const childOnChange = jest.fn()
-    const parentOnChange = jest.fn()
-
-    beforeEach(() => {
-      render(
-        <TestComponent
-          selected={['option2']}
-          childOnChange={childOnChange}
-          parentOnChange={parentOnChange}
-        />
-      )
-
-      option1 = screen.getByDisplayValue('option1')
-      option2 = screen.getByDisplayValue('option2')
-      option3 = screen.getByDisplayValue('option3')
-    })
-
-    it('only option2 is selected', () => {
-      expect(option2.checked).toBeTruthy()
-      ;[option1, option3].forEach((element) =>
-        expect(element.checked).toBeFalsy()
-      )
-    })
-
-    describe('selecting option1', () => {
-      it('parentOnChange is called', () => {
-        fireEvent.click(option1)
-        expect(parentOnChange).toHaveBeenCalledWith(['option2', 'option1'])
-      })
-    })
-
-    describe('de-selecting option2', () => {
-      it('childOnChange is called', () => {
-        fireEvent.click(option2)
-        expect(childOnChange).toHaveBeenCalledWith({
-          value: 'option2',
-          selected: false,
-        })
-      })
-
-      it('parentOnChange is called', () => {
-        fireEvent.click(option2)
-        expect(parentOnChange).toHaveBeenCalledWith([])
-      })
-    })
-  })
-
-  describe('the group is disabled', () => {
-    let option1: HTMLInputElement
-    let option2: HTMLInputElement
-    let option3: HTMLInputElement
-    let allOptions: HTMLInputElement[]
-
-    beforeEach(() => {
-      render(<TestComponent selected={['option1']} parentDisabled={true} />)
-
-      option1 = screen.getByDisplayValue('option1')
-      option2 = screen.getByDisplayValue('option2')
-      option3 = screen.getByDisplayValue('option3')
-      allOptions = [option1, option2, option3]
-    })
-
-    it('all the options are disabled', () => {
-      allOptions.forEach((element) => expect(element.disabled).toBeTruthy())
-    })
-  })
-
-  describe('the group is readonly', () => {
-    let option1: HTMLInputElement
-    let option2: HTMLInputElement
-    let option3: HTMLInputElement
-    let allOptions: HTMLInputElement[]
-
-    beforeEach(() => {
-      render(<TestComponent selected={['option1']} readonly={true} />)
-
-      option1 = screen.getByDisplayValue('option1')
-      option2 = screen.getByDisplayValue('option2')
-      option3 = screen.getByDisplayValue('option3')
-      allOptions = [option1, option2, option3]
-    })
-
-    it('all the options are disabled', () => {
-      allOptions.forEach((element) => expect(element.disabled).toBeTruthy())
-    })
-  })
-
-  describe('the group has error', () => {
-    let option1: HTMLInputElement
-    let option2: HTMLInputElement
-    let option3: HTMLInputElement
-    let allOptions: HTMLInputElement[]
-
-    beforeEach(() => {
-      render(<TestComponent selected={['option1']} invalid={true} />)
-
-      option1 = screen.getByDisplayValue('option1')
-      option2 = screen.getByDisplayValue('option2')
-      option3 = screen.getByDisplayValue('option3')
-      allOptions = [option1, option2, option3]
-    })
-
-    it('all the options have `aria-invalid="true"`', () => {
-      allOptions.forEach((element) =>
-        expect(element.getAttribute('aria-invalid')).toBeTruthy()
-      )
-    })
-  })
-
-  describe('option1 is disabled', () => {
-    let option1: HTMLInputElement
-    let option2: HTMLInputElement
-
-    beforeEach(() => {
-      render(<TestComponent selected={[]} firstOptionDisabled={true} />)
-
-      option1 = screen.getByDisplayValue('option1')
-      option2 = screen.getByDisplayValue('option2')
-    })
-
-    it('only option1 is disabled', () => {
-      expect(option1.disabled).toBeTruthy()
-      expect(option2.disabled).toBeFalsy()
-    })
-  })
-})
-
-const TestComponent = ({
-  selected,
-  parentOnChange = () => {
-    return
-  },
-  childOnChange,
-  parentDisabled = false,
-  readonly = false,
-  invalid = false,
-  firstOptionDisabled = false,
-}: {
-  selected: string[]
-  parentOnChange?: (selected: string[]) => void
-  childOnChange?: (payload: { value: string; selected: boolean }) => void
-  parentDisabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  firstOptionDisabled?: boolean
-}) => {
-  return (
-    <ThemeProvider theme={light}>
-      <MultiSelectGroup
-        name="defaultName"
-        label="defaultAriaLabel"
-        disabled={parentDisabled}
-        onChange={parentOnChange}
-        {...{ selected, readonly, invalid }}
-      >
-        <MultiSelect
-          value="option1"
-          disabled={firstOptionDisabled}
-          onChange={childOnChange}
-        >
-          Option 1
-        </MultiSelect>
-        <MultiSelect value="option2" onChange={childOnChange}>
-          Option 2
-        </MultiSelect>
-        <MultiSelect value="option3" onChange={childOnChange}>
-          Option 3
-        </MultiSelect>
-      </MultiSelectGroup>
-    </ThemeProvider>
-  )
-}