@charcoal-ui/react 2.0.0-alpha.9 → 2.0.0-rc.1

package/src/components/Modal/index.tsx

@@ -0,0 +1,226 @@
+import React, { useContext, useRef } from 'react'
+import {
+  OverlayContainer,
+  OverlayProps,
+  useModal,
+  useOverlay,
+  usePreventScroll,
+} from '@react-aria/overlays'
+import styled, { css, useTheme } from 'styled-components'
+import { theme } from '../../styled'
+import { FocusScope } from '@react-aria/focus'
+import { useDialog } from '@react-aria/dialog'
+import { AriaDialogProps } from '@react-types/dialog'
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
+import { unreachable } from '../../_lib'
+import { maxWidth } from '@charcoal-ui/utils'
+import { useMedia } from '@charcoal-ui/styled'
+import { animated, useTransition, easings } from 'react-spring'
+import Button, { ButtonProps } from '../Button'
+import IconButton from '../IconButton'
+
+export type ModalProps = OverlayProps &
+  AriaDialogProps & {
+    children: React.ReactNode
+    zIndex?: number
+    title: string
+    size?: 'S' | 'M' | 'L'
+    bottomSheet?: boolean | 'full'
+
+    // NOTICE: デフォルト値を与えてはならない
+    // （たとえば document.body をデフォルト値にすると SSR できなくなる）
+    portalContainer?: HTMLElement
+  }
+
+const DEFAULT_Z_INDEX = 10
+
+export default function Modal({
+  children,
+  zIndex = DEFAULT_Z_INDEX,
+  portalContainer,
+  ...props
+}: ModalProps) {
+  const {
+    title,
+    size = 'M',
+    bottomSheet = false,
+    isDismissable,
+    onClose,
+    isOpen = false,
+  } = props
+
+  const ref = useRef<HTMLDivElement>(null)
+  const { overlayProps, underlayProps } = useOverlay(props, ref)
+
+  usePreventScroll()
+  const { modalProps } = useModal()
+
+  const { dialogProps, titleProps } = useDialog(props, ref)
+
+  const theme = useTheme()
+  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false
+  const transitionEnabled = isMobile && bottomSheet !== false
+  const transition = useTransition(isOpen, {
+    from: {
+      transform: 'translateY(100%)',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    },
+    enter: {
+      transform: 'translateY(0%)',
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    },
+    leave: {
+      transform: 'translateY(100%)',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    },
+    config: transitionEnabled
+      ? { duration: 400, easing: easings.easeOutQuart }
+      : { duration: 0 },
+  })
+  const showDismiss = !isMobile || bottomSheet !== true
+
+  return transition(
+    ({ backgroundColor, transform }, item) =>
+      item && (
+        <OverlayContainer portalContainer={portalContainer}>
+          <ModalBackground
+            zIndex={zIndex}
+            {...underlayProps}
+            style={transitionEnabled ? { backgroundColor } : {}}
+          >
+            <FocusScope contain restoreFocus autoFocus>
+              <ModalDialog
+                ref={ref}
+                {...overlayProps}
+                {...modalProps}
+                {...dialogProps}
+                style={transitionEnabled ? { transform } : {}}
+                size={size}
+                bottomSheet={bottomSheet}
+              >
+                <ModalContext.Provider
+                  value={{ titleProps, title, close: onClose, showDismiss }}
+                >
+                  {children}
+                  {isDismissable === true && (
+                    <ModalCrossButton
+                      size="S"
+                      icon="24/Close"
+                      onClick={onClose}
+                    />
+                  )}
+                </ModalContext.Provider>
+              </ModalDialog>
+            </FocusScope>
+          </ModalBackground>
+        </OverlayContainer>
+      )
+  )
+}
+
+const ModalContext = React.createContext<{
+  titleProps: React.HTMLAttributes<HTMLElement>
+  title: string
+  close?: () => void
+  showDismiss: boolean
+}>({
+  titleProps: {},
+  title: '',
+  close: undefined,
+  showDismiss: true,
+})
+
+const ModalBackground = animated(styled.div<{ zIndex: number }>`
+  z-index: ${({ zIndex }) => zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${theme((o) => [o.bg.surface4])}
+`)
+
+const ModalDialog = animated(styled.div<{
+  size: 'S' | 'M' | 'L'
+  bottomSheet: boolean | 'full'
+}>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(p) =>
+    p.size === 'S'
+      ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      : p.size === 'M'
+      ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      p.size === 'L'
+      ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      : unreachable(p.size)}px;
+
+  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    ${(p) =>
+      p.bottomSheet === 'full'
+        ? css`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+            height: 100%;
+          `
+        : p.bottomSheet
+        ? css`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+          `
+        : css`
+            width: calc(100% - 48px);
+          `}
+  }
+`)
+
+const ModalCrossButton = styled(IconButton)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  ${theme((o) => [o.font.text3.hover.press])}
+`
+
+export function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>) {
+  const { titleProps, title } = useContext(ModalContext)
+  return (
+    <ModalHeading {...titleProps} {...props}>
+      {title}
+    </ModalHeading>
+  )
+}
+
+const ModalHeading = styled.h3`
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+`
+
+export function ModalDismissButton({ children, ...props }: ButtonProps) {
+  const { close, showDismiss } = useContext(ModalContext)
+
+  if (!showDismiss) {
+    return null
+  }
+
+  return (
+    <Button {...props} onClick={close} fixed>
+      {children}
+    </Button>
+  )
+}

package/src/components/{Select → MultiSelect}/context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-type SelectGroupContext = {
+type MultiSelectGroupContext = {
   name: string
   selected: string[]
   disabled: boolean
@@ -9,7 +9,7 @@ type SelectGroupContext = {
   onChange: ({ value, selected }: { value: string; selected: boolean }) => void
 }
 
-export const SelectGroupContext = createContext<SelectGroupContext>({
+export const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({
   name: undefined as never,
   selected: [],
   disabled: false,
@@ -17,7 +17,7 @@ export const SelectGroupContext = createContext<SelectGroupContext>({
   hasError: false,
   onChange() {
     throw new Error(
-      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<SelectGroup />` ?'
+      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?'
     )
   },
 })

package/src/components/{Select → MultiSelect}/index.story.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
-import { SelectGroup, default as Select } from '.'
+import { MultiSelectGroup, default as MultiSelect } from '.'
 
 export default {
-  title: 'Select',
-  component: Select,
+  title: 'MultiSelect',
+  component: MultiSelect,
   argTypes: {
     name: {
       control: {
@@ -63,7 +63,7 @@ type Props = {
   variant?: 'default' | 'overlay'
 }
 
-const StyledSelectGroup = styled(SelectGroup)`
+const StyledMultiSelectGroup = styled(MultiSelectGroup)`
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
@@ -81,7 +81,7 @@ const Template: Story<Props> = ({
   variant,
 }) => {
   return (
-    <StyledSelectGroup
+    <StyledMultiSelectGroup
       {...{
         name,
         ariaLabel,
@@ -94,16 +94,16 @@ const Template: Story<Props> = ({
       selected={selected ? ['選択肢1', '選択肢3'] : []}
     >
       {[1, 2, 3, 4].map((idx) => (
-        <Select
+        <MultiSelect
           value={`選択肢${idx}`}
           forceChecked={firstOptionForceChecked && idx === 1}
           variant={variant}
           key={idx}
         >
           選択肢{idx}
-        </Select>
+        </MultiSelect>
       ))}
-    </StyledSelectGroup>
+    </StyledMultiSelectGroup>
   )
 }
 
@@ -134,13 +134,17 @@ export const Playground: Story<PlaygroundProps> = (props) => {
   const [selected, setSelected] = useState<string[]>([])
 
   return (
-    <StyledSelectGroup {...props} selected={selected} onChange={setSelected}>
+    <StyledMultiSelectGroup
+      {...props}
+      selected={selected}
+      onChange={setSelected}
+    >
       {[1, 2, 3, 4].map((idx) => (
-        <Select value={`選択肢${idx}`} variant={props.variant} key={idx}>
+        <MultiSelect value={`選択肢${idx}`} variant={props.variant} key={idx}>
           選択肢{idx}
-        </Select>
+        </MultiSelect>
       ))}
-    </StyledSelectGroup>
+    </StyledMultiSelectGroup>
   )
 }
 Playground.args = {

package/src/components/{Select → MultiSelect}/index.test.tsx

@@ -1,23 +1,23 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
-import { default as Select, SelectGroup } from '.'
+import { default as MultiSelect, MultiSelectGroup } from '.'
 import { light } from '@charcoal-ui/theme'
 
-describe('Select', () => {
+describe('MultiSelect', () => {
   describe('in development mode', () => {
     beforeEach(() => {
       process.env.NODE_ENV = 'development'
     })
 
-    describe('when `<Select />` is used without `<SelectGroup />`', () => {
+    describe('when `<MultiSelect />` is used without `<MultiSelectGroup />`', () => {
       beforeEach(() => {
         // eslint-disable-next-line no-console
         console.error = jest.fn()
 
         render(
           <ThemeProvider theme={light}>
-            <Select value="a" />
+            <MultiSelect value="a" />
           </ThemeProvider>
         )
       })
@@ -26,7 +26,7 @@ describe('Select', () => {
         // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalledWith(
           expect.stringMatching(
-            /Perhaps you forgot to wrap with <SelectGroup>/u
+            /Perhaps you forgot to wrap with <MultiSelectGroup>/u
           )
         )
       })
@@ -254,28 +254,28 @@ const TestComponent = ({
 }) => {
   return (
     <ThemeProvider theme={light}>
-      <SelectGroup
+      <MultiSelectGroup
         name="defaultName"
         ariaLabel="defaultAriaLabel"
         disabled={parentDisabled}
         onChange={parentOnChange}
         {...{ selected, readonly, hasError }}
       >
-        <Select
+        <MultiSelect
           value="option1"
           disabled={firstOptionDisabled}
           forceChecked={firstOptionForceChecked}
           onChange={childOnChange}
         >
           Option 1
-        </Select>
-        <Select value="option2" onChange={childOnChange}>
+        </MultiSelect>
+        <MultiSelect value="option2" onChange={childOnChange}>
           Option 2
-        </Select>
-        <Select value="option3" onChange={childOnChange}>
+        </MultiSelect>
+        <MultiSelect value="option3" onChange={childOnChange}>
           Option 3
-        </Select>
-      </SelectGroup>
+        </MultiSelect>
+      </MultiSelectGroup>
     </ThemeProvider>
   )
 }

package/src/components/{Select → MultiSelect}/index.tsx

@@ -4,9 +4,9 @@ import warning from 'warning'
 import { theme } from '../../styled'
 import { disabledSelector, px } from '@charcoal-ui/utils'
 
-import { SelectGroupContext } from './context'
+import { MultiSelectGroupContext } from './context'
 
-export type SelectProps = React.PropsWithChildren<{
+export type MultiSelectProps = React.PropsWithChildren<{
   value: string
   forceChecked?: boolean
   disabled?: boolean
@@ -14,14 +14,14 @@ export type SelectProps = React.PropsWithChildren<{
   onChange?: (payload: { value: string; selected: boolean }) => void
 }>
 
-export default function Select({
+export default function MultiSelect({
   value,
   forceChecked = false,
   disabled = false,
   onChange,
   variant = 'default',
   children,
-}: SelectProps) {
+}: MultiSelectProps) {
   const {
     name,
     selected,
@@ -29,12 +29,12 @@ export default function Select({
     readonly,
     hasError,
     onChange: parentOnChange,
-  } = useContext(SelectGroupContext)
+  } = useContext(MultiSelectGroupContext)
 
   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> ?`
+    `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
   )
 
   const isSelected = selected.includes(value) || forceChecked
@@ -52,8 +52,8 @@ export default function Select({
   )
 
   return (
-    <SelectRoot aria-disabled={isDisabled}>
-      <SelectInput
+    <MultiSelectRoot aria-disabled={isDisabled}>
+      <MultiSelectInput
         {...{
           name,
           value,
@@ -65,19 +65,19 @@ export default function Select({
         overlay={variant === 'overlay'}
         aria-invalid={hasError}
       />
-      <SelectInputOverlay
+      <MultiSelectInputOverlay
         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>
+      </MultiSelectInputOverlay>
+      {Boolean(children) && <MultiSelectLabel>{children}</MultiSelectLabel>}
+    </MultiSelectRoot>
   )
 }
 
-const SelectRoot = styled.label`
+const MultiSelectRoot = styled.label`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -90,13 +90,13 @@ const SelectRoot = styled.label`
   ${theme((o) => o.disabled)}
 `
 
-const SelectLabel = styled.div`
+const MultiSelectLabel = styled.div`
   display: flex;
   align-items: center;
   ${theme((o) => [o.typography(14), o.font.text1])}
 `
 
-const SelectInput = styled.input.attrs({ type: 'checkbox' })<{
+const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
   hasError: boolean
   overlay: boolean
 }>`
@@ -121,7 +121,10 @@ const SelectInput = styled.input.attrs({ type: 'checkbox' })<{
   }
 `
 
-const SelectInputOverlay = styled.div<{ overlay: boolean; hasError: boolean }>`
+const MultiSelectInputOverlay = styled.div<{
+  overlay: boolean
+  hasError: boolean
+}>`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -148,7 +151,7 @@ const SelectInputOverlay = styled.div<{ overlay: boolean; hasError: boolean }>`
     `}
 `
 
-export type SelectGroupProps = React.PropsWithChildren<{
+export type MultiSelectGroupProps = React.PropsWithChildren<{
   className?: string
   name: string
   ariaLabel: string
@@ -159,7 +162,7 @@ export type SelectGroupProps = React.PropsWithChildren<{
   hasError?: boolean
 }>
 
-export function SelectGroup({
+export function MultiSelectGroup({
   className,
   name,
   ariaLabel,
@@ -169,7 +172,7 @@ export function SelectGroup({
   readonly = false,
   hasError = false,
   children,
-}: SelectGroupProps) {
+}: MultiSelectGroupProps) {
   const handleChange = useCallback(
     (payload: { value: string; selected: boolean }) => {
       const index = selected.indexOf(payload.value)
@@ -188,7 +191,7 @@ export function SelectGroup({
   )
 
   return (
-    <SelectGroupContext.Provider
+    <MultiSelectGroupContext.Provider
       value={{
         name,
         selected: Array.from(new Set(selected)),
@@ -205,6 +208,6 @@ export function SelectGroup({
       >
         {children}
       </div>
-    </SelectGroupContext.Provider>
+    </MultiSelectGroupContext.Provider>
   )
 }

package/src/components/SegmentedControl/RadioGroupContext.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useContext } from 'react'
+import { RadioGroupState } from 'react-stately'
+
+const RadioContext = createContext<RadioGroupState | null>(null)
+
+type RadioProviderProps = React.PropsWithChildren<{
+  value: RadioGroupState
+}>
+export const RadioProvider: React.FC<RadioProviderProps> = ({
+  value,
+  children,
+}) => {
+  return <RadioContext.Provider value={value}>{children}</RadioContext.Provider>
+}
+export const useRadioContext = () => {
+  const state = useContext(RadioContext)
+
+  if (state === null)
+    throw new Error('`<RadioProvider>` is not likely mounted.')
+
+  return state
+}

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

@@ -0,0 +1,36 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import SegmentedControl, { SegmentedControlProps } from '.'
+import { Story } from '../../_lib/compat'
+
+export default {
+  title: 'SegmentedControl',
+  component: SegmentedControl,
+}
+
+export const StringSegments: Story<SegmentedControlProps> = (props) => {
+  return <SegmentedControl {...props} onChange={action('change')} />
+}
+
+StringSegments.args = {
+  data: ['option1', 'option2', 'option3'],
+  disabled: false,
+  readonly: false,
+  required: false,
+}
+
+export const ObjectSegments: Story<SegmentedControlProps> = (props) => {
+  return <SegmentedControl {...props} onChange={action('change')} />
+}
+
+ObjectSegments.args = {
+  data: [
+    { label: '選択肢1', value: 'option1' },
+    { label: '選択肢2', value: 'option2' },
+    { label: '選択肢3', value: 'option3' },
+    { label: '選択肢4', value: 'option4', disabled: true },
+  ],
+  disabled: false,
+  readonly: false,
+  required: false,
+}