@charcoal-ui/react 1.0.0-alpha.1

package/src/components/Radio/index.tsx

@@ -0,0 +1,202 @@
+import React, { useCallback, useContext, useState } from 'react'
+import styled from 'styled-components'
+import warning from 'warning'
+import { theme } from '../../styled'
+import { px } from '@charcoal-ui/utils'
+
+export type RadioProps = React.PropsWithChildren<{
+  value: string
+  forceChecked?: boolean
+  disabled?: boolean
+}>
+
+export default function Radio({
+  value,
+  forceChecked = false,
+  disabled = false,
+  children,
+}: RadioProps) {
+  const {
+    name,
+    selected,
+    disabled: isParentDisabled,
+    readonly,
+    hasError,
+    onChange,
+  } = useContext(RadioGroupContext)
+
+  warning(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    name !== undefined,
+    `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
+  )
+
+  const isSelected = value === selected
+  const isDisabled = disabled || isParentDisabled
+  const isReadonly = readonly && !isSelected
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(e.currentTarget.value)
+    },
+    [onChange]
+  )
+
+  return (
+    <RadioRoot aria-disabled={isDisabled || isReadonly}>
+      <RadioInput
+        name={name}
+        value={value}
+        checked={forceChecked || isSelected}
+        hasError={hasError}
+        onChange={handleChange}
+        disabled={isDisabled || isReadonly}
+      />
+      {children != null && <RadioLabel>{children}</RadioLabel>}
+    </RadioRoot>
+  )
+}
+
+const RadioRoot = styled.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: ${({ theme }) => px(theme.spacing[4])};
+  align-items: center;
+  cursor: pointer;
+
+  ${theme((o) => [o.disabled])}
+`
+
+export const RadioInput = styled.input.attrs({ type: 'radio' })<{
+  hasError?: boolean
+}>`
+  /** Make prior to browser default style */
+  &[type='radio'] {
+    appearance: none;
+    display: block;
+    box-sizing: border-box;
+
+    padding: 6px;
+
+    width: 20px;
+    height: 20px;
+
+    ${({ hasError = false }) =>
+      theme((o) => [
+        o.borderRadius('oval'),
+        o.bg.text5.hover.press,
+        hasError && o.outline.assertive,
+      ])};
+
+    &:not(:checked) {
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${({ theme }) => theme.color.text4};
+    }
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+
+      &::after {
+        content: '';
+        display: block;
+        width: 8px;
+        height: 8px;
+        pointer-events: none;
+
+        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}
+      }
+    }
+
+    ${theme((o) => o.outline.default.focus)}
+  }
+`
+
+const RadioLabel = styled.div`
+  ${theme((o) => [o.typography(14)])}
+`
+
+export type RadioGroupProps = React.PropsWithChildren<{
+  className?: string
+  defaultValue?: string
+  label: string
+  name: string
+  onChange(next: string): void
+  disabled?: boolean
+  readonly?: boolean
+  hasError?: boolean
+}>
+
+// TODO: use (or polyfill) flex gap
+const StyledRadioGroup = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: ${({ theme }) => px(theme.spacing[8])};
+`
+
+interface RadioGroupContext {
+  name: string
+  selected?: string
+  disabled: boolean
+  readonly: boolean
+  hasError: boolean
+  onChange: (next: string) => void
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContext>({
+  name: undefined as never,
+  selected: undefined,
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange() {
+    throw new Error(
+      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'
+    )
+  },
+})
+
+export function RadioGroup({
+  className,
+  defaultValue,
+  label,
+  name,
+  onChange,
+  disabled,
+  readonly,
+  hasError,
+  children,
+}: RadioGroupProps) {
+  const [selected, setSelected] = useState(defaultValue)
+
+  const handleChange = useCallback(
+    (next: string) => {
+      setSelected(next)
+      onChange(next)
+    },
+    [onChange]
+  )
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        name,
+        selected,
+        disabled: disabled ?? false,
+        readonly: readonly ?? false,
+        hasError: hasError ?? false,
+        onChange: handleChange,
+      }}
+    >
+      <StyledRadioGroup
+        role="radiogroup"
+        aria-orientation="vertical"
+        aria-label={label}
+        aria-invalid={hasError}
+        className={className}
+      >
+        {children}
+      </StyledRadioGroup>
+    </RadioGroupContext.Provider>
+  )
+}

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

@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import { Story } from '../../_lib/compat'
+import Switch from '.'
+
+export default {
+  title: 'Switch',
+  component: Switch,
+}
+
+interface Props {
+  checked: boolean
+  disabled: boolean
+}
+
+export const Labelled: Story<Props> = (props: Props) => (
+  <div>
+    <Switch {...props} name="name" onChange={action('onChange')}>
+      選択する
+    </Switch>
+  </div>
+)
+
+Labelled.args = {
+  checked: false,
+  disabled: false,
+}
+
+export const Unlabelled: Story<Props> = (props: Props) => (
+  <div>
+    <Switch
+      {...props}
+      name="name"
+      label="label"
+      onChange={action('onChange')}
+    />
+  </div>
+)
+
+Unlabelled.args = {
+  checked: false,
+  disabled: false,
+}

package/src/components/Switch/index.tsx

@@ -0,0 +1,116 @@
+import { useSwitch } from '@react-aria/switch'
+import type { AriaSwitchProps } from '@react-types/switch'
+import React, { useRef, useMemo } from 'react'
+import { useToggleState } from 'react-stately'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+import { disabledSelector, px } from '@charcoal-ui/utils'
+
+export type SwitchProps = {
+  name: string
+  className?: string
+  value?: string
+  checked?: boolean
+  disabled?: boolean
+  onChange(checked: boolean): void
+} & (
+  | // children か label は片方が必須
+  {
+      children: React.ReactNode
+    }
+  | {
+      label: string
+    }
+)
+
+export default function SwitchCheckbox(props: SwitchProps) {
+  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 = useRef<HTMLInputElement>(null)
+  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>
+  )
+}
+
+const Label = styled.label`
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  cursor: pointer;
+  outline: 0;
+
+  ${theme((o) => o.disabled)}
+
+  ${disabledSelector} {
+    cursor: default;
+  }
+`
+
+const LabelInner = styled.div`
+  ${theme((o) => o.typography(14))}
+`
+
+const SwitchInput = styled.input.attrs({
+  type: 'checkbox',
+})`
+  &[type='checkbox'] {
+    appearance: none;
+    display: inline-flex;
+    position: relative;
+    box-sizing: border-box;
+    width: 28px;
+    border: 2px solid transparent;
+    transition: box-shadow 0.2s, background-color 0.2s;
+    cursor: inherit;
+    ${theme((o) => [
+      o.borderRadius(16),
+      o.height.px(16),
+      o.bg.text4.hover.press,
+      o.outline.default.focus,
+    ])}
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 12px;
+      height: 12px;
+      transform: translateX(0);
+      transition: transform 0.2s;
+      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}
+    }
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+
+      &::after {
+        transform: translateX(12px);
+      }
+    }
+  }
+`

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

@@ -0,0 +1,83 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import { css } from 'styled-components'
+import { Story } from '../../_lib/compat'
+import Clickable from '../Clickable'
+import TextField, {
+  MultiLineTextFieldProps,
+  SingleLineTextFieldProps,
+  TextFieldProps,
+} from '.'
+import { px } from '@charcoal-ui/utils'
+
+export default {
+  title: 'TextField',
+  component: TextField,
+  argTypes: {},
+  args: {
+    showLabel: false,
+    label: 'Label',
+    assistiveText: '',
+    disabled: false,
+    required: false,
+    invalid: false,
+  },
+}
+
+const Template: Story<Partial<TextFieldProps>> = (args) => (
+  <div
+    css={css`
+      display: grid;
+      gap: ${({ theme }) => px(theme.spacing[24])};
+    `}
+  >
+    <TextField
+      label="Label"
+      requiredText="*必須"
+      subLabel={
+        <Clickable to="#" onClick={action('click')}>
+          Text Link
+        </Clickable>
+      }
+      placeholder="Single Line"
+      onChange={action('change')}
+      {...(args as Partial<SingleLineTextFieldProps>)}
+      multiline={false}
+    />
+    <TextField
+      label="Label"
+      requiredText="*必須"
+      subLabel={
+        <Clickable to="#" onClick={action('click')}>
+          Text Link
+        </Clickable>
+      }
+      placeholder="Multi Line"
+      onChange={action('change')}
+      {...(args as Partial<MultiLineTextFieldProps>)}
+      multiline
+    />
+  </div>
+)
+
+export const Default = Template.bind({})
+
+export const HasLabel = Template.bind({})
+HasLabel.args = {
+  showLabel: true,
+  assistiveText: 'Assistive text',
+  required: true,
+}
+
+export const HasCount = Template.bind({})
+HasCount.args = {
+  showCount: true,
+  maxLength: 100,
+}
+
+export const AutoHeight: Story<Partial<MultiLineTextFieldProps>> = (args) => (
+  <TextField label="Label" placeholder="Multi Line" {...args} multiline />
+)
+AutoHeight.args = {
+  autoHeight: true,
+}