@charcoal-ui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

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>
+  )
+}

package/src/components/TextField/index.tsx

@@ -60,8 +60,10 @@ function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
   }
 }
 
-function countStringInCodePoints(string: string) {
-  return [...string].length
+function countCodePointsInString(string: string) {
+  // [...string] とするとproduction buildで動かなくなる
+  // cf. https://twitter.com/f_subal/status/1497214727511891972
+  return Array.from(string).length
 }
 
 const TextField = React.forwardRef<TextFieldElement, TextFieldProps>(
@@ -100,22 +102,29 @@ const SingleLineTextField = React.forwardRef<
   const ariaRef = useRef<HTMLInputElement>(null)
   const prefixRef = useRef<HTMLSpanElement>(null)
   const suffixRef = useRef<HTMLSpanElement>(null)
-  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))
   const [prefixWidth, setPrefixWidth] = useState(0)
   const [suffixWidth, setSuffixWidth] = useState(0)
 
+  const nonControlled = props.value === undefined
   const handleChange = useCallback(
     (value: string) => {
-      const count = countStringInCodePoints(value)
+      const count = countCodePointsInString(value)
       if (maxLength !== undefined && count > maxLength) {
         return
       }
-      setCount(count)
+      if (nonControlled) {
+        setCount(count)
+      }
       onChange?.(value)
     },
-    [maxLength, onChange]
+    [maxLength, nonControlled, onChange]
   )
 
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ''))
+  }, [props.value])
+
   const { inputProps, labelProps, descriptionProps, errorMessageProps } =
     useTextField(
       {
@@ -217,7 +226,7 @@ const MultiLineTextField = React.forwardRef<
   const { visuallyHiddenProps } = useVisuallyHidden()
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const ariaRef = useRef<HTMLTextAreaElement>(null)
-  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))
   const [rows, setRows] = useState(initialRows)
 
   const syncHeight = useCallback(
@@ -230,21 +239,28 @@ const MultiLineTextField = React.forwardRef<
     [initialRows]
   )
 
+  const nonControlled = props.value === undefined
   const handleChange = useCallback(
     (value: string) => {
-      const count = countStringInCodePoints(value)
+      const count = countCodePointsInString(value)
       if (maxLength !== undefined && count > maxLength) {
         return
       }
-      setCount(count)
+      if (nonControlled) {
+        setCount(count)
+      }
       if (autoHeight && textareaRef.current !== null) {
         syncHeight(textareaRef.current)
       }
       onChange?.(value)
     },
-    [autoHeight, maxLength, onChange, syncHeight]
+    [autoHeight, maxLength, nonControlled, onChange, syncHeight]
   )
 
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ''))
+  }, [props.value])
+
   const { inputProps, labelProps, descriptionProps, errorMessageProps } =
     useTextField(
       {

package/src/components/a11y.test.tsx

@@ -69,13 +69,13 @@ describe.each(themes)('using %s theme', (_name, theme) => {
   describe.each(links)('using %s component', (_name, link) => {
     describe.each(stories)(
       'storiesOf($filename).add($name)',
-      ({ story, args }) => {
+      ({ story: Story, args }) => {
         it('has no accessibility violations', async () => {
           expect(() => {
             render(
               <ThemeProvider theme={theme}>
                 <ComponentAbstraction components={{ Link: link }}>
-                  {story(args)}
+                  <Story {...args} />
                 </ComponentAbstraction>
               </ThemeProvider>
             )

package/src/index.ts

@@ -19,6 +19,12 @@ export {
   RadioGroup,
   type RadioGroupProps,
 } from './components/Radio'
+export {
+  default as Select,
+  type SelectProps,
+  SelectGroup,
+  type SelectGroupProps,
+} from './components/Select'
 export { default as Switch, type SwitchProps } from './components/Switch'
 export {
   default as TextField,