@charcoal-ui/react 2.0.0-alpha.8 → 2.0.0-rc.0

package/src/components/DropdownSelector/index.tsx

@@ -0,0 +1,214 @@
+import React, { Key, useMemo, useRef } from 'react'
+import styled from 'styled-components'
+import { Item, useSelectState } from 'react-stately'
+import { disabledSelector } from '@charcoal-ui/utils'
+import { useVisuallyHidden } from '@react-aria/visually-hidden'
+import { useSelect, HiddenSelect } from '@react-aria/select'
+import { useButton } from '@react-aria/button'
+import { SelectProps } from '@react-types/select'
+import Listbox, { ListboxProps } from './Listbox'
+import Popover from './Popover'
+import Icon from '../Icon'
+import FieldLabel from '../FieldLabel'
+import { theme } from '../../styled'
+
+import type { CollectionBase } from '@react-types/shared'
+import type { ReactNode } from 'react'
+
+type LabelProps = {
+  readonly showLabel?: boolean
+  readonly label: string
+  readonly subLabel?: ReactNode
+  readonly requiredText?: string
+}
+
+type Empty = Record<string, unknown>
+export type DropdownSelectorProps<T extends Empty = Empty> = LabelProps &
+  Readonly<CollectionBase<T>> & {
+    readonly id?: string
+    readonly name?: string
+    readonly autoComplete?: string
+    readonly placeholder?: string
+    readonly className?: string
+    readonly disabled?: boolean
+    readonly required?: boolean
+    readonly invalid?: boolean
+    readonly assertiveText?: string
+    readonly value?: Key
+    readonly defaultValue?: Key
+    readonly open?: boolean
+    readonly onOpenChange?: (isOpen?: boolean) => void
+    readonly onChange?: (key: Key) => void
+    readonly mode?: ListboxProps<T>['mode']
+  }
+
+const DropdownSelector = <T extends Record<string, unknown>>({
+  open,
+  className,
+  label = '',
+  requiredText = '',
+  subLabel,
+  assertiveText,
+  autoComplete,
+  invalid = false,
+  disabled = false,
+  required = false,
+  showLabel = false,
+  mode = 'default',
+  ...props
+}: DropdownSelectorProps<T>) => {
+  const { visuallyHiddenProps } = useVisuallyHidden()
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const selectProps = useMemo<SelectProps<T>>(
+    () => ({
+      ...props,
+      label,
+      isOpen: open,
+      isDisabled: disabled,
+      isRequired: required,
+      errorMessage: invalid && assertiveText,
+      validationState: invalid ? 'invalid' : 'valid',
+      onSelectionChange: props.onChange,
+      selectedKey: props.value,
+      defaultSelectedKey: props.defaultValue,
+    }),
+    [assertiveText, disabled, invalid, label, open, props, required]
+  )
+  const state = useSelectState<T>(selectProps)
+
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    errorMessageProps,
+    descriptionProps,
+  } = useSelect<T>(selectProps, state, triggerRef)
+
+  const { buttonProps } = useButton(triggerProps, triggerRef)
+
+  const hasAssertiveText =
+    assertiveText !== undefined && assertiveText.length > 0
+
+  return (
+    <DropdownSelectorRoot aria-disabled={disabled} className={className}>
+      <DropdownFieldLabel
+        label={label}
+        required={required}
+        requiredText={requiredText}
+        subLabel={subLabel}
+        {...labelProps}
+        {...(!showLabel ? visuallyHiddenProps : {})}
+      />
+      <HiddenSelect
+        state={state}
+        triggerRef={triggerRef}
+        label={label}
+        name={props.name}
+        isDisabled={disabled}
+        autoComplete={autoComplete}
+      />
+      <DropdownButtonWrapper>
+        <DropdownButton {...buttonProps} ref={triggerRef} invalid={invalid}>
+          <DropdownButtonText {...valueProps}>
+            {/*
+             * react-stately の useSelectState から取得される selectedItem の型が常に
+             * Node<T> であるが runtime では null が帰ってくることがある
+             */}
+            {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions,@typescript-eslint/no-unnecessary-condition*/}
+            {state.selectedItem
+              ? state.selectedItem.rendered
+              : props.placeholder}
+          </DropdownButtonText>
+
+          <Icon name="16/Menu" />
+        </DropdownButton>
+        {state.isOpen && (
+          <DropdownPopover open={state.isOpen} onClose={() => state.close()}>
+            <Listbox {...menuProps} state={state} mode={mode} />
+          </DropdownPopover>
+        )}
+      </DropdownButtonWrapper>
+
+      {hasAssertiveText && (
+        <AssertiveText
+          invalid={invalid}
+          {...(invalid ? errorMessageProps : descriptionProps)}
+        >
+          {assertiveText}
+        </AssertiveText>
+      )}
+    </DropdownSelectorRoot>
+  )
+}
+
+export default DropdownSelector
+export const DropdownSelectorItem = Item
+
+const DropdownSelectorRoot = styled.div`
+  position: relative;
+  display: inline-block;
+
+  ${disabledSelector} {
+    cursor: default;
+    ${theme((o) => o.disabled)}
+  }
+`
+
+const DropdownFieldLabel = styled(FieldLabel)`
+  width: 100%;
+
+  ${theme((o) => o.margin.bottom(8))}
+`
+
+const DropdownButtonWrapper = styled.div`
+  position: relative;
+`
+
+const DropdownButton = styled.button<{ invalid: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+  width: 288px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  ${disabledSelector} {
+    cursor: default;
+  }
+
+  ${({ invalid }) =>
+    theme((o) => [
+      o.border.default,
+      o.padding.horizontal(8),
+      o.outline.default.focus,
+      o.bg.surface3,
+      o.borderRadius(4),
+      invalid && o.outline.assertive,
+    ])}
+`
+
+const DropdownButtonText = styled.span`
+  text-align: left;
+
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`
+
+const AssertiveText = styled.div<{ invalid: boolean }>`
+  ${({ invalid }) =>
+    theme((o) => [
+      o.typography(14),
+      o.margin.top(8),
+      invalid && o.font.assertive,
+    ])}
+`
+
+const DropdownPopover = styled(Popover)`
+  position: absolute;
+  width: 100%;
+
+  top: 100%;
+  margin-top: 2px;
+`

package/src/components/FieldLabel/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import createTheme from '@charcoal-ui/styled'
+import { createTheme } from '@charcoal-ui/styled'
 
 export interface FieldLabelProps
   extends React.LabelHTMLAttributes<HTMLLabelElement> {

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

@@ -0,0 +1,52 @@
+import {
+  boolean,
+  button,
+  number,
+  text,
+  withKnobs,
+} from '@storybook/addon-knobs'
+import React, { useRef } from 'react'
+import LoadingSpinner, {
+  LoadingSpinnerIcon,
+  LoadingSpinnerIconHandler,
+} from '.'
+
+export default {
+  title: 'LoadingSpinner',
+  component: LoadingSpinner,
+  decorators: [withKnobs],
+}
+
+export function Basic() {
+  const size = number('size', 48)
+  const padding = number('padding', 16)
+  const transparent = boolean('transparent', false)
+
+  return (
+    <LoadingSpinner size={size} padding={padding} transparent={transparent} />
+  )
+}
+
+export function Icon() {
+  return <IconComponent />
+}
+
+function IconComponent() {
+  const size = number('size', 12)
+  const color = text('color', '#B1CC29')
+  const once = boolean('once', false)
+  button('restart', () => ref.current?.restart())
+
+  const ref = useRef<LoadingSpinnerIconHandler>(null)
+
+  return (
+    <div
+      css={`
+        font-size: ${size}px;
+        color: ${color};
+      `}
+    >
+      <LoadingSpinnerIcon once={once} ref={ref} />
+    </div>
+  )
+}

package/src/components/LoadingSpinner/index.tsx

@@ -0,0 +1,87 @@
+import { transparentize } from 'polished'
+import React, { useImperativeHandle, useRef } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+export default function LoadingSpinner({
+  size = 48,
+  padding = 16,
+  transparent = false,
+}) {
+  return (
+    <LoadingSpinnerRoot size={size} padding={padding} transparent={transparent}>
+      <LoadingSpinnerIcon />
+    </LoadingSpinnerRoot>
+  )
+}
+
+const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
+  size: number
+  padding: number
+  transparent: boolean
+}>`
+  margin: auto;
+  padding: ${(props) => props.padding}px;
+  border-radius: 8px;
+  font-size: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  background-color: ${({ theme, transparent }) =>
+    transparent
+      ? 'transparent'
+      : transparentize(0.32, theme.color.background1)};
+  color: ${({ theme }) => theme.color.text4};
+`
+
+const scaleout = keyframes`
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+`
+
+const Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: ${scaleout} 1s both ease-out;
+  animation-iteration-count: ${(p) => (p.once ? 1 : 'infinite')};
+
+  &[data-reset-animation] {
+    animation: none;
+  }
+`
+
+interface Props {
+  once?: boolean
+}
+
+export interface LoadingSpinnerIconHandler {
+  restart(): void
+}
+
+export const LoadingSpinnerIcon = React.forwardRef<
+  LoadingSpinnerIconHandler,
+  Props
+>(function LoadingSpinnerIcon({ once = false }, ref) {
+  const iconRef = useRef<HTMLDivElement>(null)
+
+  useImperativeHandle(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return
+      }
+      iconRef.current.dataset.resetAnimation = 'true'
+      // Force reflow hack!
+      void iconRef.current.offsetWidth
+      delete iconRef.current.dataset.resetAnimation
+    },
+  }))
+
+  return <Icon ref={iconRef} once={once} />
+})

package/src/components/Modal/ModalPlumbing.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { ModalTitle } from '.'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+import { maxWidth } from '@charcoal-ui/utils'
+
+export function ModalHeader() {
+  return (
+    <ModalHeaderRoot>
+      <StyledModalTitle />
+    </ModalHeaderRoot>
+  )
+}
+
+const ModalHeaderRoot = styled.div`
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+`
+
+const StyledModalTitle = styled(ModalTitle)`
+  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+`
+
+export const ModalAlign = styled.div`
+  ${theme((o) => [o.padding.horizontal(24)])}
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`
+
+export const ModalBody = styled.div`
+  ${theme((o) => [o.padding.bottom(40)])}
+`
+
+export const ModalButtons = styled.div`
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+  ${theme((o) => [o.padding.horizontal(24).top(16)])}
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`

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

@@ -0,0 +1,195 @@
+import React from 'react'
+import { Story } from '../../_lib/compat'
+import Modal, { ModalDismissButton, ModalProps } from '.'
+import { OverlayProvider } from '@react-aria/overlays'
+import { useOverlayTriggerState } from 'react-stately'
+import Button from '../Button'
+import {
+  ModalAlign,
+  ModalBody,
+  ModalButtons,
+  ModalHeader,
+} from './ModalPlumbing'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+import TextField from '../TextField'
+
+export default {
+  title: 'Modal',
+  component: Modal,
+  args: {
+    title: 'Title',
+  },
+  argTypes: {
+    size: {
+      options: ['S', 'M', 'L'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    bottomSheet: {
+      options: ['full', 'true', 'false'],
+      mapping: { full: 'full', true: true, false: false },
+      control: {
+        type: 'inline-radio',
+      },
+    },
+  },
+}
+
+const DefaultStory = (args: ModalProps) => {
+  const state = useOverlayTriggerState({})
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be
+    // hidden from screen readers when a modal opens.
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
+        isDismissable
+        {...args}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Name"
+                placeholder="Nagisa"
+              ></TextField>
+            </ModalAlign>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Country"
+                placeholder="Tokyo"
+              ></TextField>
+            </ModalAlign>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Primary" onClick={() => state.close()} fixed>
+              Apply
+            </Button>
+            <Button onClick={() => state.close()} fixed>
+              Cancel
+            </Button>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+const ModalVStack = styled.div`
+  display: grid;
+  gap: 24px;
+`
+
+const StyledModalText = styled(ModalAlign)`
+  ${theme((o) => [o.font.text2, o.typography(14)])}
+`
+
+export const Default: Story<ModalProps> = DefaultStory.bind({})
+
+const FullBottomSheetStory = (args: ModalProps) => {
+  const state = useOverlayTriggerState({})
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be
+    // hidden from screen readers when a modal opens.
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
+        isDismissable
+        bottomSheet="full"
+        {...args}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Name"
+                placeholder="Nagisa"
+              ></TextField>
+            </ModalAlign>
+            <ModalAlign>
+              <TextField
+                showLabel
+                label="Country"
+                placeholder="Tokyo"
+              ></TextField>
+            </ModalAlign>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Primary" onClick={() => state.close()} fixed>
+              Apply
+            </Button>
+            <Button onClick={() => state.close()} fixed>
+              Cancel
+            </Button>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+export const FullBottomSheet: Story<ModalProps> = FullBottomSheetStory.bind({})
+
+const BottomSheetStory = (args: ModalProps) => {
+  const state = useOverlayTriggerState({})
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be
+    // hidden from screen readers when a modal opens.
+    <OverlayProvider>
+      <Button onClick={() => state.open()}>Open Modal</Button>
+
+      <Modal
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
+        bottomSheet
+        isDismissable
+        {...args}
+      >
+        <ModalHeader />
+        <ModalBody>
+          <ModalVStack>
+            <StyledModalText>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+              placeat tenetur, necessitatibus laudantium cumque exercitationem
+              provident. Quaerat iure enim, eveniet dolores earum odio quo
+              possimus fugiat aspernatur, numquam, commodi repellat.
+            </StyledModalText>
+          </ModalVStack>
+          <ModalButtons>
+            <Button variant="Danger" onClick={() => state.close()} fixed>
+              削除する
+            </Button>
+            <ModalDismissButton>キャンセル</ModalDismissButton>
+          </ModalButtons>
+        </ModalBody>
+      </Modal>
+    </OverlayProvider>
+  )
+}
+
+export const BottomSheet: Story<ModalProps> = BottomSheetStory.bind({})