@charcoal-ui/react 1.0.0 → 2.0.0-alpha.10

package/src/components/Radio/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useContext } from 'react'
 import styled from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -118,7 +118,7 @@ const RadioLabel = styled.div`
 
 export type RadioGroupProps = React.PropsWithChildren<{
   className?: string
-  defaultValue?: string
+  value?: string
   label: string
   name: string
   onChange(next: string): void
@@ -158,7 +158,7 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
 
 export function RadioGroup({
   className,
-  defaultValue,
+  value,
   label,
   name,
   onChange,
@@ -167,11 +167,8 @@ export function RadioGroup({
   hasError,
   children,
 }: RadioGroupProps) {
-  const [selected, setSelected] = useState(defaultValue)
-
   const handleChange = useCallback(
     (next: string) => {
-      setSelected(next)
       onChange(next)
     },
     [onChange]
@@ -181,7 +178,7 @@ export function RadioGroup({
     <RadioGroupContext.Provider
       value={{
         name,
-        selected,
+        selected: value,
         disabled: disabled ?? false,
         readonly: readonly ?? false,
         hasError: hasError ?? false,

package/src/components/Select/context.ts

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

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

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

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

@@ -0,0 +1,281 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import { default as Select, SelectGroup } from '.'
+import { light } from '@charcoal-ui/theme'
+
+describe('Select', () => {
+  describe('in development mode', () => {
+    beforeEach(() => {
+      process.env.NODE_ENV = 'development'
+    })
+
+    describe('when `<Select />` is used without `<SelectGroup />`', () => {
+      beforeEach(() => {
+        // eslint-disable-next-line no-console
+        console.error = jest.fn()
+
+        render(
+          <ThemeProvider theme={light}>
+            <Select 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 <SelectGroup>/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']} hasError={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 force checked', () => {
+    let option1: HTMLInputElement
+
+    beforeEach(() => {
+      render(<TestComponent selected={[]} firstOptionForceChecked={true} />)
+
+      option1 = screen.getByDisplayValue('option1')
+    })
+
+    it('option1 is force checked', () => {
+      expect(option1.checked).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,
+  hasError = false,
+  firstOptionForceChecked = false,
+  firstOptionDisabled = false,
+}: {
+  selected: string[]
+  parentOnChange?: (selected: string[]) => void
+  childOnChange?: (payload: { value: string; selected: boolean }) => void
+  parentDisabled?: boolean
+  readonly?: boolean
+  hasError?: boolean
+  firstOptionForceChecked?: boolean
+  firstOptionDisabled?: boolean
+}) => {
+  return (
+    <ThemeProvider theme={light}>
+      <SelectGroup
+        name="defaultName"
+        ariaLabel="defaultAriaLabel"
+        disabled={parentDisabled}
+        onChange={parentOnChange}
+        {...{ selected, readonly, hasError }}
+      >
+        <Select
+          value="option1"
+          disabled={firstOptionDisabled}
+          forceChecked={firstOptionForceChecked}
+          onChange={childOnChange}
+        >
+          Option 1
+        </Select>
+        <Select value="option2" onChange={childOnChange}>
+          Option 2
+        </Select>
+        <Select value="option3" onChange={childOnChange}>
+          Option 3
+        </Select>
+      </SelectGroup>
+    </ThemeProvider>
+  )
+}

package/src/components/Select/index.tsx

@@ -0,0 +1,210 @@
+import React, { ChangeEvent, useCallback, useContext } from 'react'
+import styled, { css } from 'styled-components'
+import warning from 'warning'
+import { theme } from '../../styled'
+import { disabledSelector, px } from '@charcoal-ui/utils'
+
+import { SelectGroupContext } from './context'
+
+export type SelectProps = React.PropsWithChildren<{
+  value: string
+  forceChecked?: boolean
+  disabled?: boolean
+  variant?: 'default' | 'overlay'
+  onChange?: (payload: { value: string; selected: boolean }) => void
+}>
+
+export default function Select({
+  value,
+  forceChecked = false,
+  disabled = false,
+  onChange,
+  variant = 'default',
+  children,
+}: SelectProps) {
+  const {
+    name,
+    selected,
+    disabled: parentDisabled,
+    readonly,
+    hasError,
+    onChange: parentOnChange,
+  } = useContext(SelectGroupContext)
+
+  warning(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    name !== undefined,
+    `"name" is not Provided for <Select>. Perhaps you forgot to wrap with <SelectGroup> ?`
+  )
+
+  const isSelected = selected.includes(value) || forceChecked
+  const isDisabled = disabled || parentDisabled || readonly
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!(event.currentTarget instanceof HTMLInputElement)) {
+        return
+      }
+      if (onChange) onChange({ value, selected: event.currentTarget.checked })
+      parentOnChange({ value, selected: event.currentTarget.checked })
+    },
+    [onChange, parentOnChange, value]
+  )
+
+  return (
+    <SelectRoot aria-disabled={isDisabled}>
+      <SelectInput
+        {...{
+          name,
+          value,
+          hasError,
+        }}
+        checked={isSelected}
+        disabled={isDisabled}
+        onChange={handleChange}
+        overlay={variant === 'overlay'}
+        aria-invalid={hasError}
+      />
+      <SelectInputOverlay
+        overlay={variant === 'overlay'}
+        hasError={hasError}
+        aria-hidden={true}
+      >
+        <pixiv-icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+      </SelectInputOverlay>
+      {Boolean(children) && <SelectLabel>{children}</SelectLabel>}
+    </SelectRoot>
+  )
+}
+
+const SelectRoot = styled.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  ${disabledSelector} {
+    cursor: default;
+  }
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  ${theme((o) => o.disabled)}
+`
+
+const SelectLabel = styled.div`
+  display: flex;
+  align-items: center;
+  ${theme((o) => [o.typography(14), o.font.text1])}
+`
+
+const SelectInput = styled.input.attrs({ type: 'checkbox' })<{
+  hasError: boolean
+  overlay: boolean
+}>`
+  &[type='checkbox'] {
+    appearance: none;
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+    }
+
+    ${({ hasError, overlay }) =>
+      theme((o) => [
+        o.bg.text3.hover.press,
+        o.borderRadius('oval'),
+        hasError && !overlay && o.outline.assertive,
+        overlay && o.bg.surface4,
+      ])};
+  }
+`
+
+const SelectInputOverlay = styled.div<{ overlay: boolean; hasError: boolean }>`
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ hasError, overlay }) =>
+    theme((o) => [
+      o.width.px(24),
+      o.height.px(24),
+      o.borderRadius('oval'),
+      o.font.text5,
+      hasError && overlay && o.outline.assertive,
+    ])}
+
+  ${({ overlay }) =>
+    overlay &&
+    css`
+      border-color: ${({ theme }) => theme.color.text5};
+      border-width: 2px;
+      border-style: solid;
+    `}
+`
+
+export type SelectGroupProps = React.PropsWithChildren<{
+  className?: string
+  name: string
+  ariaLabel: string
+  selected: string[]
+  onChange: (selected: string[]) => void
+  disabled?: boolean
+  readonly?: boolean
+  hasError?: boolean
+}>
+
+export function SelectGroup({
+  className,
+  name,
+  ariaLabel,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  hasError = false,
+  children,
+}: SelectGroupProps) {
+  const handleChange = useCallback(
+    (payload: { value: string; selected: boolean }) => {
+      const index = selected.indexOf(payload.value)
+
+      if (payload.selected) {
+        if (index < 0) {
+          onChange([...selected, payload.value])
+        }
+      } else {
+        if (index >= 0) {
+          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])
+        }
+      }
+    },
+    [onChange, selected]
+  )
+
+  return (
+    <SelectGroupContext.Provider
+      value={{
+        name,
+        selected: Array.from(new Set(selected)),
+        disabled,
+        readonly,
+        hasError,
+        onChange: handleChange,
+      }}
+    >
+      <div
+        className={className}
+        aria-label={ariaLabel}
+        data-testid="SelectGroup"
+      >
+        {children}
+      </div>
+    </SelectGroupContext.Provider>
+  )
+}