@charcoal-ui/react 4.0.0-beta.0 → 4.0.0-beta.11

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

@@ -3,18 +3,19 @@ import Switch from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Switch',
+  title: 'react/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> = {
+  argTypes: {
+    checked: { type: 'boolean' },
+    children: { type: 'string' },
+    disabled: { type: 'boolean' },
+  },
   render: function Render(args) {
     const [checked, setChecked] = useState(false)
     return (
@@ -33,33 +34,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 +65,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
         >

package/src/components/Switch/index.tsx

@@ -1,142 +1,45 @@
-import { useSwitch } from '@react-aria/switch'
-import type { AriaSwitchProps } from '@react-types/switch'
-import { useMemo, memo, forwardRef } from 'react'
-import * as React from 'react'
-import { useToggleState } from 'react-stately'
-import styled from 'styled-components'
-import { useObjectRef } from '@react-aria/utils'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
-
-export type SwitchProps = {
-  name: string
-  className?: string
-  value?: string
-  checked?: boolean
-  disabled?: boolean
-  onChange(checked: boolean): void
-} & (
-  | // children か label は片方が必須
-  {
-      children: React.ReactNode
-    }
-  | {
-      label: string
-    }
-)
-
-const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchProps>(
-  function SwitchCheckboxInner(props, external) {
-    const { disabled, className } = props
-
-    const ariaSwitchProps: AriaSwitchProps = useMemo(
-      () => ({
-        ...props,
-
-        // children がいない場合は aria-label をつけないといけない
-        'aria-label': 'children' in props ? undefined : props.label,
-        isDisabled: props.disabled,
-        isSelected: props.checked,
-      }),
-      [props]
-    )
-
-    const state = useToggleState(ariaSwitchProps)
-    const ref = useObjectRef<HTMLInputElement>(external)
-    const {
-      inputProps: { className: _className, type: _type, ...rest },
-    } = useSwitch(ariaSwitchProps, state, ref)
-
-    return (
-      <Label className={className} aria-disabled={disabled}>
-        <SwitchInput {...rest} ref={ref} />
-        {'children' in props ? (
-          // eslint-disable-next-line react/destructuring-assignment
-          <LabelInner>{props.children}</LabelInner>
-        ) : undefined}
-      </Label>
-    )
-  }
-)
-
-export default memo(SwitchCheckbox)
-
-const Label = styled.label`
-  display: inline-grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  cursor: pointer;
-  outline: 0;
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
+import './index.css'
+
+import { memo, forwardRef } from 'react'
+import { useId } from '@react-aria/utils'
+import SwitchInput, { type SwitchInputProps } from './SwitchInput'
+import { SwitchWithLabel } from './SwitchWithLabel'
+
+export type SwitchProps = SwitchInputProps
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
+  { children, onChange, disabled, className, id, ...props },
+  ref
+) {
+  const htmlId = useId(id)
+  const noChildren = children === undefined
+  const input = (
+    <SwitchInput
+      {...props}
+      disabled={disabled}
+      className={noChildren ? className : undefined}
+      id={htmlId}
+      onChange={onChange}
+      ref={ref}
+      role="switch"
+      type="checkbox"
+    />
+  )
+
+  if (noChildren) {
+    return input
   }
-`
 
-const LabelInner = styled.div`
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  margin-left: 4px;
-`
-
-const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
-  appearance: none;
-  display: inline-flex;
-  position: relative;
-  box-sizing: border-box;
-  width: 28px;
-  border: 2px solid transparent;
-
-  transition-property: background-color, box-shadow;
-  transition-duration: 0.2s;
-  cursor: inherit;
-
-  outline: none;
-  border-radius: 16px;
-  height: 16px;
-  margin: 0;
-  background-color: var(--charcoal-text4);
-  :hover {
-    background-color: var(--charcoal-text4-hover);
-  }
-  :active {
-    background-color: var(--charcoal-text4-press);
-  }
-  ${focusVisibleFocusRingCss}
-
-  &::after {
-    content: '';
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    transform: translateX(0);
-    transition: transform 0.2s;
-    border-radius: 1024px;
-    background-color: var(--charcoal-text5);
-    :hover {
-      background-color: var(--charcoal-text5-hover);
-    }
-    :active {
-      background-color: var(--charcoal-text5-press);
-    }
-  }
-
-  &:checked {
-    background-color: var(--charcoal-brand);
-    :hover {
-      background-color: var(--charcoal-brand-hover);
-    }
-    :active {
-      background-color: var(--charcoal-brand-press);
-    }
-    &::after {
-      transform: translateX(12px);
-      transition: transform 0.2s;
-    }
-  }
-`
+  return (
+    <SwitchWithLabel
+      className={className}
+      disabled={disabled}
+      id={htmlId}
+      input={input}
+    >
+      {children}
+    </SwitchWithLabel>
+  )
+})
+
+export default memo(Switch)