@charcoal-ui/react 1.0.0-alpha.1

package/src/components/Clickable/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import {
+  LinkProps,
+  useComponentAbstraction,
+} from '../../core/ComponentAbstraction'
+import { disabledSelector } from '@charcoal-ui/utils'
+
+interface BaseProps {
+  /**
+   * クリックの無効化
+   */
+  disabled?: boolean
+}
+
+interface LinkBaseProps {
+  /**
+   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される
+   */
+  to: string
+}
+
+export type ClickableProps =
+  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)
+  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)
+export type ClickableElement = HTMLButtonElement & HTMLAnchorElement
+
+const Clickable = React.forwardRef<ClickableElement, ClickableProps>(
+  function Clickable(props, ref) {
+    const { Link } = useComponentAbstraction()
+    if ('to' in props) {
+      const { onClick, disabled = false, ...rest } = props
+      return (
+        <A<typeof Link>
+          {...rest}
+          as={disabled ? undefined : Link}
+          onClick={disabled ? undefined : onClick}
+          aria-disabled={disabled}
+          ref={ref}
+        />
+      )
+    } else {
+      return <Button {...props} ref={ref} />
+    }
+  }
+)
+export default Clickable
+
+const clickableCss = css`
+  /* Clickable style */
+  cursor: pointer;
+
+  ${disabledSelector} {
+    cursor: default;
+  }
+`
+
+const Button = styled.button`
+  /* Reset button appearance */
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  /* Change the font styles in all browsers. */
+  font: inherit;
+
+  /* Remove the margin in Firefox and Safari. */
+  margin: 0;
+
+  /* Show the overflow in Edge. */
+  overflow: visible;
+
+  /* Remove the inheritance of text transform in Firefox. */
+  text-transform: none;
+
+  /* Remove the inner border and padding in Firefox. */
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  ${clickableCss}
+`
+
+const A = styled.span`
+  /* Reset a-tag appearance */
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  .text {
+    top: calc(1em + 2em);
+  }
+
+  ${clickableCss}
+`

package/src/components/FieldLabel/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import styled from 'styled-components'
+import createTheme from '@charcoal-ui/styled'
+
+export interface FieldLabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  readonly className?: string
+  readonly label: string
+  readonly subLabel?: React.ReactNode
+  readonly required?: boolean
+  // TODO: 翻訳用のContextで注入する
+  readonly requiredText?: string
+}
+
+const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
+  function FieldLabel(
+    {
+      style,
+      className,
+      label,
+      required = false,
+      requiredText,
+      subLabel,
+      ...labelProps
+    },
+    ref
+  ) {
+    return (
+      <FieldLabelWrapper style={style} className={className}>
+        <Label ref={ref} {...labelProps}>
+          {label}
+        </Label>
+        {required && <RequiredText>{requiredText}</RequiredText>}
+        <SubLabelClickable>
+          <span>{subLabel}</span>
+        </SubLabelClickable>
+      </FieldLabelWrapper>
+    )
+  }
+)
+
+export default FieldLabel
+
+const theme = createTheme(styled)
+
+const Label = styled.label`
+  ${theme((o) => [o.typography(14).bold, o.font.text1])}
+`
+
+const RequiredText = styled.span`
+  ${theme((o) => [o.typography(14), o.font.text3])}
+`
+
+const SubLabelClickable = styled.div`
+  ${theme((o) => [
+    o.typography(14),
+    o.font.text3.hover.press,
+    o.outline.default.focus,
+  ])}
+`
+
+const FieldLabelWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+
+  > ${RequiredText} {
+    ${theme((o) => o.margin.left(4))}
+  }
+
+  > ${SubLabelClickable} {
+    ${theme((o) => o.margin.left('auto'))}
+  }
+`

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { Story } from '../../_lib/compat'
+import '@charcoal-ui/icons'
+import IconButton from '.'
+import type { KnownIconType } from '@charcoal-ui/icons'
+
+export default {
+  title: 'IconButton',
+  component: IconButton,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'inline-radio',
+        options: ['Default', 'Overlay'],
+      },
+    },
+    size: {
+      control: {
+        type: 'inline-radio',
+        options: ['M', 'S', 'XS'],
+      },
+    },
+  },
+}
+
+type Props = {
+  variant?: 'Default' | 'Overlay'
+  size?: 'M' | 'S' | 'XS'
+}
+
+const Template: Story<Props> = (props) => {
+  const { size } = props
+  const icon: keyof KnownIconType = {
+    XS: '16/Remove' as const,
+    S: '24/Close' as const,
+    M: '24/Close' as const,
+  }[size ?? 'M']
+  return <IconButton title="close" {...props} icon={icon} />
+}
+
+export const DefaultM: Story<Props> = Template.bind({})
+DefaultM.args = {
+  variant: 'Default',
+  size: 'M',
+}
+
+export const OverlayM: Story<Props> = Template.bind({})
+OverlayM.args = {
+  variant: 'Overlay',
+  size: 'M',
+}

package/src/components/IconButton/index.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
+import type { KnownIconType } from '@charcoal-ui/icons'
+
+type Variant = 'Default' | 'Overlay'
+type Size = 'XS' | 'S' | 'M'
+
+interface StyledProps {
+  readonly variant?: Variant
+  readonly size?: Size
+  readonly icon: keyof KnownIconType
+}
+
+export type IconButtonProps = StyledProps & ClickableProps
+
+const IconButton = React.forwardRef<ClickableElement, IconButtonProps>(
+  function IconButtonInner(
+    { variant = 'Default', size = 'M', icon, ...rest }: IconButtonProps,
+    ref
+  ) {
+    validateIconSize(size, icon)
+    return (
+      <StyledIconButton {...rest} ref={ref} variant={variant} size={size}>
+        <pixiv-icon name={icon} />
+      </StyledIconButton>
+    )
+  }
+)
+
+export default IconButton
+
+const StyledIconButton = styled(Clickable).attrs<
+  Required<StyledProps>,
+  ReturnType<typeof styledProps>
+>(styledProps)`
+  user-select: none;
+
+  width: ${(p) => p.width}px;
+  height: ${(p) => p.height}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ font, background }) =>
+    theme((o) => [
+      o.font[font],
+      o.bg[background].hover.press,
+      o.disabled,
+      o.borderRadius('oval'),
+      o.outline.default.focus,
+    ])}
+`
+
+function styledProps(props: Required<StyledProps>) {
+  return {
+    ...props,
+    ...variantToProps(props.variant),
+    ...sizeToProps(props.size),
+  }
+}
+
+function variantToProps(variant: Variant) {
+  switch (variant) {
+    case 'Default':
+      return { font: 'text3', background: 'transparent' } as const
+    case 'Overlay':
+      return { font: 'text5', background: 'surface4' } as const
+  }
+}
+
+function sizeToProps(size: Size) {
+  switch (size) {
+    case 'XS':
+      return {
+        width: 20,
+        height: 20,
+      }
+    case 'S':
+      return {
+        width: 32,
+        height: 32,
+      }
+    case 'M':
+      return {
+        width: 40,
+        height: 40,
+      }
+  }
+}
+
+/**
+ * validates matches of size and icon
+ */
+function validateIconSize(size: Size, icon: keyof KnownIconType) {
+  let requiredIconSize: string
+  switch (size) {
+    case 'XS':
+      requiredIconSize = '16'
+      break
+    case 'S':
+    case 'M':
+      requiredIconSize = '24'
+      break
+  }
+  // アイコン名は サイズ/名前
+  const result = /^\d*/u.exec(icon)
+  if (result == null) {
+    throw new Error('Invalid icon name')
+  }
+  const [iconSize] = result
+  if (iconSize !== requiredIconSize) {
+    console.warn(
+      `IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`
+    )
+  }
+}

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

@@ -0,0 +1,79 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import { css } from 'styled-components'
+import { Story } from '../../_lib/compat'
+import Radio, { RadioGroup } from '.'
+import { px } from '@charcoal-ui/utils'
+
+const options = ['value1', 'value2']
+
+export default {
+  title: 'Radio',
+  component: Radio,
+  argTypes: {
+    defaultValue: {
+      control: { type: 'select', options },
+    },
+  },
+}
+
+interface Props {
+  defaultValue: string
+  hasError: boolean
+  parentDisabled: boolean
+  childDisabled: boolean
+  forceChecked: boolean
+  readonly: boolean
+}
+
+const DefaultStory = ({
+  defaultValue,
+  forceChecked,
+  hasError,
+  parentDisabled,
+  childDisabled,
+  readonly,
+}: Props) => (
+  <div
+    css={css`
+      display: flex;
+      flex-direction: column;
+      gap: ${({ theme }) => px(theme.spacing[24])};
+    `}
+  >
+    {['name1', 'name2', 'name3'].map((name) => (
+      <RadioGroup
+        key={name}
+        label={`選択肢-${name}`}
+        name={name}
+        defaultValue={defaultValue}
+        onChange={action('onChange')}
+        disabled={parentDisabled}
+        readonly={readonly}
+        hasError={hasError}
+      >
+        {options.map((option) => (
+          <Radio
+            key={option}
+            value={option}
+            disabled={childDisabled}
+            forceChecked={forceChecked}
+          >
+            {name}({option})を選ぶ
+          </Radio>
+        ))}
+      </RadioGroup>
+    ))}
+  </div>
+)
+
+export const Normal: Story<Props> = DefaultStory.bind({})
+
+Normal.args = {
+  defaultValue: options[0],
+  hasError: false,
+  parentDisabled: false,
+  childDisabled: false,
+  forceChecked: false,
+  readonly: false,
+}

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

@@ -0,0 +1,149 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import Radio, { RadioGroup } from '.'
+import createTheme from '@charcoal-ui/styled'
+const { light } = createTheme
+
+describe('Radio', () => {
+  describe('__DEV__ mode', () => {
+    beforeEach(() => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      global.__DEV__ = {}
+    })
+
+    describe('<Radio> is not surrounded by <RadioGroup>', () => {
+      beforeEach(() => {
+        console.error = jest.fn()
+
+        render(
+          <ThemeProvider theme={light}>
+            <Radio value="option1" />
+          </ThemeProvider>
+        )
+      })
+
+      it('console.error()', () => {
+        expect(console.error).toHaveBeenCalledWith(
+          expect.stringMatching(/Perhaps you forgot to wrap with <RadioGroup>/u)
+        )
+      })
+    })
+  })
+
+  describe('defaultValue is the first option', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+
+    beforeEach(() => {
+      render(<TestComponent defaultValue="option1" />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+    })
+
+    it('the first <Radio> is checked', () => {
+      expect(option1.checked).toBeTruthy()
+      expect(option2.checked).toBeFalsy()
+    })
+
+    describe('clicking the second', () => {
+      it('the second <Radio> is checked', () => {
+        fireEvent.click(option2)
+
+        expect(option1.checked).toBeFalsy()
+        expect(option2.checked).toBeTruthy()
+      })
+    })
+  })
+
+  describe('<RadioGroup> is disabled', () => {
+    it('all <Radio>s are disabled', () => {
+      render(<TestComponent defaultValue="option1" radioGroupDisabled />)
+      screen.getAllByRole<HTMLInputElement>('radio').forEach((element) => {
+        expect(element.disabled).toBeTruthy()
+      })
+    })
+  })
+
+  describe('the first <Radio> is disabled', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+
+    beforeEach(() => {
+      render(<TestComponent defaultValue="option1" option1Disabled />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+    })
+
+    it('<input> in the first <Radio> is disabled', () => {
+      expect(option1.checked).toBeTruthy()
+    })
+
+    it('No other <input> is disabled', () => {
+      expect(option2.checked).toBeFalsy()
+    })
+  })
+
+  describe('has readonly in <RadioGroup>', () => {
+    let option1: HTMLInputElement
+    let option2: HTMLInputElement
+
+    beforeEach(() => {
+      render(<TestComponent defaultValue="option1" readonly />)
+
+      option1 = screen.getByDisplayValue('option1')
+      option2 = screen.getByDisplayValue('option2')
+    })
+
+    it('the first <Radio> is checked', () => {
+      expect(option1.checked).toBeTruthy()
+      expect(option1.disabled).toBeFalsy()
+    })
+
+    it('Non-first <Radio>s are disabled', () => {
+      expect(option2.disabled).toBeTruthy()
+    })
+  })
+})
+
+function TestComponent({
+  defaultValue,
+  onChange = jest.fn(),
+  radioGroupDisabled = false,
+  readonly = false,
+  hasError = false,
+  option1Disabled = false,
+  option2Disabled = false,
+}: {
+  defaultValue: string
+  onChange?: () => void
+  radioGroupDisabled?: boolean
+  readonly?: boolean
+  hasError?: boolean
+  option1Disabled?: boolean
+  option2Disabled?: boolean
+}) {
+  return (
+    <ThemeProvider theme={light}>
+      <RadioGroup
+        label="テスト項目"
+        name="test"
+        defaultValue={defaultValue}
+        onChange={onChange}
+        disabled={radioGroupDisabled}
+        readonly={readonly}
+        hasError={hasError}
+      >
+        <Radio value="option1" disabled={option1Disabled}>
+          option1を選ぶ
+        </Radio>
+        <Radio value="option2" disabled={option2Disabled}>
+          option2を選ぶ
+        </Radio>
+      </RadioGroup>
+    </ThemeProvider>
+  )
+}