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

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

@@ -1,42 +1,19 @@
 import { useState } from 'react'
-import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
+import { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+const StyledMultiSelectGroup = styled(MultiSelectGroup)`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+`
 
 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',
@@ -44,173 +21,92 @@ export default {
       },
     },
   },
-}
-
-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),
-}
+  args: {
+    variant: 'default',
+  },
+} as Meta<typeof MultiSelect>
 
-type PlaygroundProps = {
-  name: string
-  label: string
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  className?: string
-  variant?: 'default' | 'overlay'
+export const Basic: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={['選択肢1', '選択肢3']}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-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: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={[]}
+        invalid
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-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: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={[]}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+  args: {
+    variant: 'overlay',
+  },
 }
 
-export const Overlay: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
+export const Playground: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    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,
+    return (
+      <StyledMultiSelectGroup
+        name=""
+        label=""
+        onChange={setSelected}
+        selected={selected}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect {...args} value={`選択肢${idx}`} key={idx}>
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }

package/src/components/MultiSelect/index.tsx

@@ -6,6 +6,7 @@ import { px } from '@charcoal-ui/utils'
 
 import { MultiSelectGroupContext } from './context'
 import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+import Icon from '../Icon'
 
 export type MultiSelectProps = React.PropsWithChildren<{
   value: string
@@ -76,7 +77,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
           invalid={invalid}
           aria-hidden={true}
         >
-          <pixiv-icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+          <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
         </MultiSelectInputOverlay>
         {Boolean(children) && <MultiSelectLabel>{children}</MultiSelectLabel>}
       </MultiSelectRoot>

package/src/components/Radio/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Radio Basic 1`] = `
+exports[`Storybook Tests Radio Default 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;

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

@@ -7,10 +7,6 @@ import { useState } from 'react'
 export default {
   title: 'Radio',
   component: Radio,
-  args: {
-    name: 'name',
-    label: 'label',
-  },
   parameters: {
     layout: 'centered',
   },
@@ -21,16 +17,19 @@ const LayoutDiv = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => px(theme.spacing[24])};
 `
+const options = ['1', '2', '3'] as const
+type Option = (typeof options)[number]
+
+export const Default: StoryObj<typeof Radio> = {
+  render: function Render(args) {
+    const [value, setValue] = useState<Option>(options[0])
 
-export const Basic: StoryObj<typeof Radio> = {
-  render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
+          {...args}
           value={value}
           onChange={setValue}
         >
@@ -47,11 +46,11 @@ export const Basic: StoryObj<typeof Radio> = {
 
 export const Disabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -71,11 +70,11 @@ export const Disabled: StoryObj<typeof Radio> = {
 
 export const PartialDisabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -94,11 +93,11 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
 export const Readonly: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}
@@ -118,11 +117,11 @@ export const Readonly: StoryObj<typeof Radio> = {
 
 export const Invalid: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
+        <RadioGroup<Option>
           label={'label'}
           name={'name'}
           value={value}

package/src/components/Radio/index.tsx

@@ -169,16 +169,17 @@ const RadioLabel = styled.div`
   }
 `
 
-export type RadioGroupProps = React.PropsWithChildren<{
-  className?: string
-  value?: string
-  label: string
-  name: string
-  onChange(next: string): void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-}>
+export type RadioGroupProps<Value extends string = string> =
+  React.PropsWithChildren<{
+    className?: string
+    value?: Value
+    label: string
+    name: string
+    onChange(next: Value): void
+    disabled?: boolean
+    readonly?: boolean
+    invalid?: boolean
+  }>
 
 // TODO: use (or polyfill) flex gap
 const StyledRadioGroup = styled.div`
@@ -209,7 +210,7 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
   },
 })
 
-export function RadioGroup({
+export function RadioGroup<Value extends string = string>({
   className,
   value,
   label,
@@ -219,10 +220,10 @@ export function RadioGroup({
   readonly,
   invalid,
   children,
-}: RadioGroupProps) {
+}: RadioGroupProps<Value>) {
   const handleChange = useCallback(
     (next: string) => {
-      onChange(next)
+      onChange(next as Value)
     },
     [onChange]
   )

package/src/components/Switch/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Switch Basic 1`] = `
+exports[`Storybook Tests Switch Checked 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -118,8 +118,8 @@ exports[`Storybook Tests Switch Basic 1`] = `
       className="c0"
     >
       <input
-        aria-label="label"
-        checked={false}
+        aria-label="checked"
+        checked={true}
         className="c1"
         disabled={false}
         name="name"
@@ -144,7 +144,7 @@ exports[`Storybook Tests Switch Basic 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Checked 1`] = `
+exports[`Storybook Tests Switch Default 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -262,8 +262,7 @@ exports[`Storybook Tests Switch Checked 1`] = `
       className="c0"
     >
       <input
-        aria-label="label"
-        checked={true}
+        checked={false}
         className="c1"
         disabled={false}
         name="name"
@@ -417,7 +416,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
         checked={false}
         className="c1"
         disabled={true}
-        name="name"
+        name="disabled"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -444,7 +443,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Labelled 1`] = `
+exports[`Storybook Tests Switch Label 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -572,7 +571,7 @@ exports[`Storybook Tests Switch Labelled 1`] = `
         checked={false}
         className="c1"
         disabled={false}
-        name="name"
+        name="label"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}

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

@@ -5,16 +5,12 @@ import { Meta, StoryObj } from '@storybook/react'
 export default {
   title: 'Switch',
   component: Switch,
-  args: {
-    name: 'name',
-    label: 'label',
-  },
   parameters: {
     layout: 'centered',
   },
 } as Meta<typeof Switch>
 
-export const Basic: StoryObj<typeof Switch> = {
+export const Default: StoryObj<typeof Switch> = {
   render: function Render(args) {
     const [checked, setChecked] = useState(false)
     return (
@@ -33,33 +29,29 @@ export const Basic: StoryObj<typeof Switch> = {
 }
 
 export const Checked: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked, setChecked] = useState(true)
     return (
       <div>
         <Switch
-          {...args}
           name="name"
+          label="checked"
           onChange={(v) => {
             setChecked(v)
           }}
-          checked={args.checked ?? checked}
+          checked={checked}
         />
       </div>
     )
   },
 }
 
-export const Labelled: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+export const Label: StoryObj<typeof Switch> = {
+  render: function Render() {
     const [checked, setChecked] = useState(false)
     return (
       <div>
-        <Switch
-          {...args}
-          checked={args.checked ?? checked}
-          onChange={setChecked}
-        >
+        <Switch name="label" checked={checked} onChange={setChecked}>
           Label
         </Switch>
       </div>
@@ -68,13 +60,13 @@ export const Labelled: StoryObj<typeof Switch> = {
 }
 
 export const Disabled: StoryObj<typeof Switch> = {
-  render: function Render(args) {
+  render: function Render() {
     const [checked, setChecked] = useState(false)
     return (
       <div>
         <Switch
-          {...args}
-          checked={args.checked ?? checked}
+          name="disabled"
+          checked={checked}
           onChange={setChecked}
           disabled
         >