@charcoal-ui/react-sandbox 1.0.0-alpha.1

package/src/components/MenuListItem/index.tsx

@@ -0,0 +1,226 @@
+import React, { useContext } from 'react'
+import styled, { css } from 'styled-components'
+import { theme } from '../../styled'
+import { TextEllipsis } from '../TextEllipsis'
+import { LinkProps, useComponentAbstraction } from '@charcoal-ui/react'
+import { disabledSelector } from '@charcoal-ui/utils'
+
+interface MenuListItemContextProps {
+  padding: 16 | 24
+}
+
+export const MenuListItemContext =
+  React.createContext<MenuListItemContextProps>({ padding: 24 })
+
+export interface MenuListItemBaseData {
+  primary: string | React.ReactNode // 表示アイテム名(上に表示)
+  secondary?: string // 表示アイテム名2(下に表示)
+  onClick?: (e: React.MouseEvent) => void
+  disabled?: boolean
+  gtmClass?: string
+  noHover?: boolean
+}
+
+interface MenuListItemProps extends MenuListItemBaseData {
+  children?: React.ReactNode // 右寄せで表示したい要素
+}
+
+export default function MenuListItem({
+  primary,
+  secondary,
+  onClick,
+  disabled = false,
+  noHover = false,
+  gtmClass,
+  children,
+}: MenuListItemProps) {
+  const { padding } = useContext(MenuListItemContext)
+
+  return (
+    <Item
+      hasSubLabel={secondary !== undefined}
+      onClick={(e) => !disabled && onClick && onClick(e)}
+      sidePadding={padding}
+      noHover={noHover}
+      noClick={onClick === undefined}
+      aria-disabled={disabled}
+      role={onClick !== undefined ? 'button' : undefined}
+      className={gtmClass !== undefined ? `gtm-${gtmClass}` : undefined}
+    >
+      <Labels>
+        <PrimaryText>
+          <TextEllipsis lineHeight={22} lineLimit={1}>
+            {primary}
+          </TextEllipsis>
+        </PrimaryText>
+        {secondary !== undefined && (
+          <SecondaryText>
+            <TextEllipsis lineHeight={22} lineLimit={1}>
+              {secondary}
+            </TextEllipsis>
+          </SecondaryText>
+        )}
+      </Labels>
+      {children}
+    </Item>
+  )
+}
+
+interface ItemProps {
+  hasSubLabel: boolean
+  sidePadding: 16 | 24
+  noHover: boolean
+  noClick: boolean
+}
+
+const Item = styled.div<ItemProps>`
+  display: flex;
+  height: ${(p) => (p.hasSubLabel ? 56 : 40)}px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${(p) => p.sidePadding}px;
+  user-select: none;
+  cursor: ${(p) => (p.noClick ? 'default' : 'pointer')};
+  transition: 0.2s background-color;
+
+  &:hover {
+    ${(p) =>
+      !p.noHover &&
+      css`
+        background-color: ${({ theme }) => theme.color.surface3};
+      `}
+  }
+
+  ${theme((o) => o.disabled)}
+
+  ${disabledSelector} {
+    cursor: default;
+    pointer-events: none;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`
+
+const Labels = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const PrimaryText = styled.div`
+  color: ${(p) => p.theme.color.text2};
+  line-height: 22px;
+  font-size: 14px;
+  display: grid;
+`
+
+const SecondaryText = styled.div`
+  color: ${(p) => p.theme.color.text3};
+  line-height: 18px;
+  font-size: 10px;
+`
+
+interface MenuListLinkItemProps
+  extends MenuListItemBaseData,
+    Omit<LinkProps, 'to' | 'onClick' | 'children'> {
+  link: string
+  children?: React.ReactNode
+}
+
+export function MenuListLinkItem({
+  link,
+  onClick,
+  disabled = false,
+  primary,
+  secondary,
+  gtmClass,
+  noHover,
+  children,
+  ...linkProps
+}: MenuListLinkItemProps) {
+  const { Link } = useComponentAbstraction()
+  const props: MenuListItemProps = {
+    disabled,
+    primary,
+    secondary,
+    gtmClass,
+    noHover,
+    children,
+  }
+
+  return disabled ? (
+    <span onClick={onClick}>
+      <MenuListItem {...props} />
+    </span>
+  ) : (
+    <A<typeof Link> as={Link} to={link} onClick={onClick} {...linkProps}>
+      <MenuListItem onClick={() => void 0} {...props} />
+    </A>
+  )
+}
+
+const A = styled.a`
+  display: block;
+`
+
+interface MenuListLinkItemWithIconProps extends MenuListLinkItemProps {
+  icon: React.ReactNode
+}
+
+interface MenuListItemWithIconProps extends MenuListItemProps {
+  icon: React.ReactNode
+}
+
+export function MenuListLinkItemWithIcon({
+  icon,
+  primary: text,
+  ...props
+}: MenuListLinkItemWithIconProps) {
+  const primary = (
+    <IconContainer>
+      <Icon>{icon}</Icon>
+      {text}
+    </IconContainer>
+  )
+  return <MenuListLinkItem primary={primary} {...props} />
+}
+
+export function MenuListItemWithIcon({
+  icon,
+  primary: text,
+  ...props
+}: MenuListItemWithIconProps) {
+  const primary = (
+    <IconContainer>
+      <Icon>{icon}</Icon>
+      {text}
+    </IconContainer>
+  )
+  return <MenuListItem primary={primary} {...props} />
+}
+
+const IconContainer = styled.div`
+  display: grid;
+  gap: 8px;
+  grid-auto-flow: column;
+  align-items: center;
+`
+
+const Icon = styled.div`
+  color: ${({ theme }) => theme.color.text3};
+  display: flex;
+`
+
+export const MenuListSpacer = styled.div`
+  height: 24px;
+`
+
+export const MenuListLabel = styled.div`
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: ${({ theme }) => theme.color.text3};
+  margin-top: -2px;
+  margin-bottom: 6px;
+`

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

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import {
+  MemoryRouter as Router,
+  Route,
+  Link as RouterLink,
+  useParams,
+} from 'react-router-dom'
+import { Story } from '../../_lib/compat'
+import Pager, { LinkPager } from '.'
+import { ComponentAbstraction } from '@charcoal-ui/react'
+
+export default {
+  title: 'Sandbox/Pager',
+  component: Pager,
+  argTypes: {
+    page: {
+      control: {
+        type: 'number',
+        disable: true,
+      },
+    },
+    pageCount: {
+      control: {
+        type: 'number',
+        min: 1,
+      },
+    },
+  },
+}
+
+interface Props {
+  page: number
+  pageCount: number
+}
+
+const DefaultStory: Story<Props> = ({ page: defaultPage, pageCount }) => {
+  const [page, setPage] = useState(defaultPage)
+  return <Pager page={page} onChange={setPage} pageCount={pageCount} />
+}
+
+export const Default = DefaultStory.bind({})
+Default.args = {
+  page: 1,
+  pageCount: 10,
+}
+
+const makeUrl = (page: number) => `/${page}`
+
+const LinkStory: Story<Props> = ({ page: defaultPage, pageCount }) => (
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  <ComponentAbstraction components={{ Link: RouterLink }}>
+    <Router
+      initialEntries={Array.from({ length: pageCount }).map((_, i) =>
+        makeUrl(i + 1)
+      )}
+      initialIndex={defaultPage - 1}
+    >
+      <Route
+        path="/:page"
+        element={<CurrentPager pageCount={pageCount}></CurrentPager>}
+      />
+    </Router>
+  </ComponentAbstraction>
+)
+
+function CurrentPager({ pageCount }: { pageCount: number }) {
+  const params = useParams()
+  const page = params.page !== undefined ? parseInt(params.page, 10) : 1
+
+  return <LinkPager makeUrl={makeUrl} page={page} pageCount={pageCount} />
+}
+
+export const Link = LinkStory.bind({})
+Link.args = {
+  page: 1,
+  pageCount: 10,
+}
+
+export const NotCollapsed = LinkStory.bind({})
+NotCollapsed.args = {
+  page: 4,
+  pageCount: 7,
+}
+
+export const CollapsedWithDots = LinkStory.bind({})
+CollapsedWithDots.args = {
+  page: 5,
+  pageCount: 8,
+}
+
+export const LastPage = LinkStory.bind({})
+LastPage.args = {
+  page: 103,
+  pageCount: 103,
+}
+
+export const One = LinkStory.bind({})
+One.args = {
+  page: 1,
+  pageCount: 1,
+}

package/src/components/Pager/index.tsx

@@ -0,0 +1,255 @@
+import React, { useCallback, useDebugValue, useMemo } from 'react'
+
+import styled, { css } from 'styled-components'
+import warning from 'warning'
+import DotsIcon from '../icons/DotsIcon'
+import WedgeIcon, { WedgeDirection } from '../icons/WedgeIcon'
+import { useComponentAbstraction } from '@charcoal-ui/react'
+
+declare const __DEV__: object | undefined // actually object|false, but using undefined allows ! assertion
+
+function usePagerWindow(page: number, pageCount: number, windowSize = 7) {
+  // ページャーのリンク生成例:
+  //
+  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]
+  //
+  //       [*1*] [ 2 ] >
+  //
+  // デザインの意図: 前後移動時のカーソル移動を最小限にする。
+
+  if (__DEV__) {
+    warning((page | 0) === page, `\`page\` must be interger (${page})`)
+    warning(
+      (pageCount | 0) === pageCount,
+      `\`pageCount\` must be interger (${pageCount})`
+    )
+  }
+
+  const window = useMemo(() => {
+    const visibleFirstPage = 1
+    const visibleLastPage = Math.min(
+      pageCount,
+      Math.max(page + Math.floor(windowSize / 2), windowSize)
+    )
+
+    if (visibleLastPage <= windowSize) {
+      // 表示範囲が1-7ページなら省略は無い。
+      return Array.from(
+        { length: 1 + visibleLastPage - visibleFirstPage },
+        (_, i) => visibleFirstPage + i
+      )
+    } else {
+      const start = visibleLastPage - (windowSize - 1) + 2
+      return [
+        // 表示範囲が1-7ページを超えるなら、
+        // - 1ページ目は固定で表示する
+        visibleFirstPage,
+        // - 2ページ目から現在のページの直前までは省略する
+        '...' as const,
+        ...Array.from(
+          { length: 1 + visibleLastPage - start },
+          (_, i) => start + i
+        ),
+      ]
+    }
+  }, [page, pageCount, windowSize])
+
+  useDebugValue(window)
+
+  return window
+}
+
+interface CommonProps {
+  page: number
+  pageCount: number
+}
+
+export interface PagerProps extends CommonProps {
+  onChange(newPage: number): void
+}
+
+// this pager is just regular buttons; for links use LinkPager
+export default React.memo(function Pager({
+  page,
+  pageCount,
+  onChange,
+}: PagerProps) {
+  // TODO: refactor Pager and LinkPager to use a common parent component
+  const window = usePagerWindow(page, pageCount)
+  const makeClickHandler = useCallback(
+    (value: number) => () => {
+      onChange(value)
+    },
+    [onChange]
+  )
+
+  const hasNext = page < pageCount
+  const hasPrev = page > 1
+  return (
+    <PagerContainer>
+      <CircleButton
+        type="button"
+        hidden={!hasPrev}
+        disabled={!hasPrev}
+        onClick={makeClickHandler(Math.max(1, page - 1))}
+        noBackground
+      >
+        <WedgeIcon size={16} direction={WedgeDirection.Left} />
+      </CircleButton>
+      {window.map((p) =>
+        p === '...' ? (
+          <Spacer key={p}>
+            <DotsIcon size={20} />
+          </Spacer>
+        ) : p === page ? (
+          // we remove the onClick but don't mark it as disabled to preserve keyboard focus
+          // not doing so causes the focus ring to flicker in and out of existence
+          <CircleButton key={p} type="button" aria-current>
+            <Text>{p}</Text>
+          </CircleButton>
+        ) : (
+          <CircleButton key={p} type="button" onClick={makeClickHandler(p)}>
+            <Text>{p}</Text>
+          </CircleButton>
+        )
+      )}
+      <CircleButton
+        type="button"
+        hidden={!hasNext}
+        disabled={!hasNext}
+        onClick={makeClickHandler(Math.min(pageCount, page + 1))}
+        noBackground
+      >
+        <WedgeIcon size={16} direction={WedgeDirection.Right} />
+      </CircleButton>
+    </PagerContainer>
+  )
+})
+
+export interface LinkPagerProps extends CommonProps {
+  makeUrl(page: number): string
+}
+
+export function LinkPager({ page, pageCount, makeUrl }: LinkPagerProps) {
+  const { Link } = useComponentAbstraction()
+  const window = usePagerWindow(page, pageCount)
+
+  const hasNext = page < pageCount
+  const hasPrev = page > 1
+  return (
+    <PagerContainer>
+      <Link to={makeUrl(Math.max(1, page - 1))}>
+        <CircleButton hidden={!hasPrev} aria-disabled={!hasPrev} noBackground>
+          <WedgeIcon size={16} direction={WedgeDirection.Left} />
+        </CircleButton>
+      </Link>
+      {window.map((p) =>
+        p === '...' ? (
+          <Spacer key={p}>
+            <DotsIcon size={20} subLink />
+          </Spacer>
+        ) : p === page ? (
+          <CircleButton key={p} type="button" aria-current>
+            <Text>{p}</Text>
+          </CircleButton>
+        ) : (
+          <Link key={p} to={makeUrl(p)}>
+            <CircleButton type="button">
+              <Text>{p}</Text>
+            </CircleButton>
+          </Link>
+        )
+      )}
+      <Link to={makeUrl(Math.min(pageCount, page + 1))}>
+        <CircleButton hidden={!hasNext} aria-disabled={!hasNext} noBackground>
+          <WedgeIcon size={16} direction={WedgeDirection.Right} />
+        </CircleButton>
+      </Link>
+    </PagerContainer>
+  )
+}
+
+const PagerContainer = styled.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const CircleButton = styled.button`
+  font-size: 1rem;
+  line-height: calc(1em + 8px);
+  text-decoration: none;
+  border: none;
+  outline: none;
+  touch-action: manipulation;
+  user-select: none;
+  transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s,
+    background 0.2s ease 0s, opacity 0.2s ease 0s;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  /* HACK:
+   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
+   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
+   */
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-transform: translateZ(0);
+
+  &[hidden] {
+    visibility: hidden;
+    display: block;
+  }
+
+  border-radius: 48px;
+
+  background: transparent;
+  color: ${({ theme }) => theme.color.text3};
+
+  &:hover {
+    background: ${({ theme }) => theme.color.surface3};
+    color: ${({ theme }) => theme.color.text2};
+  }
+
+  &[aria-current] {
+    background-color: ${({ theme }) => theme.color.surface6};
+    color: ${({ theme }) => theme.color.text5};
+  }
+
+  &[aria-current]:hover {
+    background-color: ${({ theme }) => theme.color.surface6};
+    color: ${({ theme }) => theme.color.text5};
+  }
+
+  ${({ noBackground = false }: { noBackground?: boolean }) =>
+    noBackground &&
+    css`
+      /* stylelint-disable-next-line no-duplicate-selectors */
+      &:hover {
+        background: transparent;
+      }
+    `}
+`
+
+const Spacer = styled(CircleButton).attrs({ type: 'button', disabled: true })`
+  && {
+    color: ${({ theme }) => theme.color.text3};
+    background: none;
+  }
+`
+
+const Text = 'span'

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

@@ -0,0 +1,47 @@
+import {
+  boolean,
+  button,
+  number,
+  text,
+  withKnobs,
+} from '@storybook/addon-knobs'
+import React, { useRef } from 'react'
+import Spinner, { SpinnerIcon, SpinnerIconHandler } from '.'
+
+export default {
+  title: 'Sandbox/Spinner',
+  component: Spinner,
+  decorators: [withKnobs],
+}
+
+export function Basic() {
+  const size = number('size', 48)
+  const padding = number('padding', 16)
+  const transparent = boolean('transparent', false)
+
+  return <Spinner 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<SpinnerIconHandler>(null)
+
+  return (
+    <div
+      css={`
+        font-size: ${size}px;
+        color: ${color};
+      `}
+    >
+      <SpinnerIcon once={once} ref={ref} />
+    </div>
+  )
+}

package/src/components/Spinner/index.tsx

@@ -0,0 +1,86 @@
+import { transparentize } from 'polished'
+import React, { useImperativeHandle, useRef } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+export default function Spinner({
+  size = 48,
+  padding = 16,
+  transparent = false,
+}) {
+  return (
+    <SpinnerRoot size={size} padding={padding} transparent={transparent}>
+      <SpinnerIcon />
+    </SpinnerRoot>
+  )
+}
+
+const SpinnerRoot = 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 SpinnerIconHandler {
+  restart(): void
+}
+
+export const SpinnerIcon = React.forwardRef<SpinnerIconHandler, Props>(
+  function SpinnerIcon({ 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} />
+  }
+)