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

package/src/components/Carousel/index.tsx

@@ -0,0 +1,382 @@
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+  useLayoutEffect,
+} from 'react'
+import { animated, useSpring } from 'react-spring'
+import styled, { css } from 'styled-components'
+import { useDebounceAnimationState } from '../../foundation/hooks'
+import { passiveEvents, isEdge } from '../../foundation/support'
+import CarouselButton, { Direction } from '../CarouselButton'
+
+export const GRADIENT_WIDTH = 72
+/**
+ * カルーセル系のスクロール量の定数
+ *
+ * @example
+ * const scrollAmount = containerElm.clientWidth * SCROLL_AMOUNT_COEF
+ */
+export const SCROLL_AMOUNT_COEF = 0.75
+
+interface ScrollProps {
+  align?: 'center' | 'left' | 'right'
+  offset?: number
+}
+
+export interface CarouselBaseAppearanceProps {
+  buttonOffset?: number
+  buttonPadding?: number
+  bottomOffset?: number
+  defaultScroll?: ScrollProps
+}
+
+export type CarouselGradientProps =
+  | { hasGradient?: false }
+  | {
+      hasGradient: true
+      fadeInGradient?: boolean
+    }
+
+type CarouselAppearanceProps = CarouselBaseAppearanceProps &
+  CarouselGradientProps
+
+type Props = CarouselAppearanceProps & {
+  onScroll?: (left: number) => void
+  onResize?: (width: number) => void
+  children: React.ReactNode
+  centerItems?: boolean
+  onScrollStateChange?: (canScroll: boolean) => void
+}
+
+export interface CarouselHandlerRef {
+  resetScroll(): void
+}
+
+export default function Carousel({
+  buttonOffset = 0,
+  buttonPadding = 16,
+  bottomOffset = 0,
+  defaultScroll: { align = 'left', offset: scrollOffset = 0 } = {},
+  onScroll,
+  onResize,
+  children,
+  centerItems,
+  onScrollStateChange,
+  ...options
+}: Props) {
+  // スクロール位置を保存する
+  // アニメーション中の場合は、アニメーション終了時のスクロール位置が保存される
+  const [scrollLeft, setScrollLeft] = useDebounceAnimationState(0)
+  // アニメーション中かどうか
+  const animation = useRef(false)
+  // スクロール可能な領域を保存する
+  const [maxScrollLeft, setMaxScrollLeft] = useState(0)
+  // 左右のボタンの表示状態を保存する
+  const [leftShow, setLeftShow] = useState(false)
+  const [rightShow, setRightShow] = useState(false)
+
+  // const [props, set, stop] = useSpring(() => ({
+  //   scroll: 0
+  // }))
+  const [styles, set] = useSpring(() => ({ scroll: 0 }))
+
+  const ref = useRef<HTMLDivElement>(null)
+  const innerRef = useRef<HTMLUListElement>(null)
+
+  const handleRight = useCallback(() => {
+    if (ref.current === null) {
+      return
+    }
+    const { clientWidth } = ref.current
+    // スクロール領域を超えないように、アニメーションを開始
+    // アニメーション中にアニメーションが開始されたときに、アニメーション終了予定の位置から再度計算するようにする
+    const scroll = Math.min(
+      scrollLeft + clientWidth * SCROLL_AMOUNT_COEF,
+      maxScrollLeft
+    )
+    setScrollLeft(scroll, true)
+    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current })
+    animation.current = true
+  }, [animation, maxScrollLeft, scrollLeft, set, setScrollLeft])
+
+  const handleLeft = useCallback(() => {
+    if (ref.current === null) {
+      return
+    }
+    const { clientWidth } = ref.current
+    const scroll = Math.max(scrollLeft - clientWidth * SCROLL_AMOUNT_COEF, 0)
+    setScrollLeft(scroll, true)
+    set({ scroll, from: { scroll: scrollLeft }, reset: !animation.current })
+    animation.current = true
+  }, [animation, scrollLeft, set, setScrollLeft])
+
+  // スクロール可能な場合にボタンを表示する
+  // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)
+  useEffect(() => {
+    const newleftShow = scrollLeft > 0
+    const newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0
+    if (newleftShow !== leftShow || newrightShow !== rightShow) {
+      setLeftShow(newleftShow)
+      setRightShow(newrightShow)
+      onScrollStateChange?.(newleftShow || newrightShow)
+    }
+  }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft])
+
+  const handleScroll = useCallback(() => {
+    if (ref.current === null) {
+      return
+    }
+    // 手動でスクロールが開始されたときにアニメーションを中断
+    if (animation.current) {
+      styles.scroll.stop()
+      animation.current = false
+    }
+    // スクロール位置を保存 (アニメーションの基準になる)
+    const manualScrollLeft = ref.current.scrollLeft
+    // 過剰にsetStateが走らないようにDebouceする
+    setScrollLeft(manualScrollLeft)
+  }, [animation, setScrollLeft, styles])
+
+  // リサイズが起きたときに、アニメーション用のスクロール領域 & ボタンの表示状態 を再計算する
+  const handleResize = useCallback(() => {
+    if (ref.current === null) {
+      return
+    }
+    const { clientWidth, scrollWidth } = ref.current
+    const newMaxScrollLeft = scrollWidth - clientWidth
+    setMaxScrollLeft(newMaxScrollLeft)
+    if (onResize) {
+      onResize(clientWidth)
+    }
+  }, [onResize])
+
+  const resizeObserverRef = useRef(new ResizeObserver(handleResize))
+  const resizeObserverInnerRef = useRef(new ResizeObserver(handleResize))
+
+  useLayoutEffect(() => {
+    const elm = ref.current
+    const innerElm = innerRef.current
+    if (elm === null || innerElm === null) {
+      return
+    }
+
+    elm.addEventListener(
+      'wheel',
+      handleScroll,
+      passiveEvents() && { passive: true }
+    )
+
+    const resizeObserver = resizeObserverRef.current
+    resizeObserver.observe(elm)
+
+    const resizeObserverInner = resizeObserverInnerRef.current
+    resizeObserverInner.observe(innerElm)
+
+    return () => {
+      elm.removeEventListener('wheel', handleScroll)
+      resizeObserver.disconnect()
+      resizeObserverInner.disconnect()
+    }
+  }, [handleResize, handleScroll])
+
+  // 初期スクロールを行う
+  useLayoutEffect(() => {
+    if (align !== 'left' || scrollOffset !== 0) {
+      const scroll = ref.current
+      if (scroll !== null) {
+        const scrollLength = Math.max(
+          0,
+          Math.min(
+            align === 'left' && scrollOffset > 0
+              ? scrollOffset
+              : align === 'center'
+              ? maxScrollLeft / 2 + scrollOffset
+              : align === 'right' && scrollOffset <= maxScrollLeft
+              ? maxScrollLeft - scrollOffset / 2
+              : 0,
+            maxScrollLeft
+          )
+        )
+        scroll.scrollLeft = scrollLength
+        setScrollLeft(scrollLength, true)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref.current])
+
+  const handleScrollMove = useCallback(() => {
+    if (ref.current === null) {
+      return
+    }
+    if (onScroll) {
+      onScroll(ref.current.scrollLeft)
+    }
+  }, [onScroll])
+
+  // NOTE: Edgeではmaskを使うと要素のレンダリングがバグる（場合によっては画像が表示されない）のでグラデーションを無効にする
+  if (!isEdge && options.hasGradient === true) {
+    const fadeInGradient = options.fadeInGradient ?? false
+    const overflowGradient = !fadeInGradient
+    return (
+      <Container>
+        <GradientContainer fadeInGradient={fadeInGradient}>
+          <RightGradient>
+            <LeftGradient show={overflowGradient || scrollLeft > 0}>
+              <ScrollArea
+                ref={ref}
+                scrollLeft={styles.scroll}
+                onScroll={handleScrollMove}
+              >
+                <CarouselContainer ref={innerRef} centerItems={centerItems}>
+                  {children}
+                </CarouselContainer>
+              </ScrollArea>
+            </LeftGradient>
+          </RightGradient>
+        </GradientContainer>
+        <ButtonsContainer>
+          <CarouselButton
+            direction={Direction.Left}
+            show={leftShow}
+            offset={buttonOffset}
+            bottomOffset={bottomOffset}
+            padding={buttonPadding}
+            gradient={overflowGradient}
+            onClick={handleLeft}
+          />
+          <CarouselButton
+            direction={Direction.Right}
+            show={rightShow}
+            offset={buttonOffset}
+            bottomOffset={bottomOffset}
+            padding={buttonPadding}
+            gradient
+            onClick={handleRight}
+          />
+        </ButtonsContainer>
+      </Container>
+    )
+  }
+
+  return (
+    <Container>
+      <ScrollArea
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        ref={ref}
+        scrollLeft={styles.scroll}
+        onScroll={handleScrollMove}
+      >
+        <CarouselContainer ref={innerRef} centerItems={centerItems}>
+          {children}
+        </CarouselContainer>
+      </ScrollArea>
+      <ButtonsContainer>
+        <CarouselButton
+          direction={Direction.Left}
+          show={leftShow}
+          offset={buttonOffset}
+          bottomOffset={bottomOffset}
+          padding={buttonPadding}
+          onClick={handleLeft}
+        />
+        <CarouselButton
+          direction={Direction.Right}
+          show={rightShow}
+          offset={buttonOffset}
+          bottomOffset={bottomOffset}
+          padding={buttonPadding}
+          onClick={handleRight}
+        />
+      </ButtonsContainer>
+    </Container>
+  )
+}
+
+const CarouselContainer = styled.ul<{ centerItems?: boolean }>`
+  vertical-align: top;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+
+  /* 最小幅を100%にして親要素にぴったりくっつけることで子要素で要素を均等に割り付けるなどを出来るようにしてある */
+  min-width: 100%;
+  box-sizing: border-box;
+
+  ${({ centerItems = false }) =>
+    centerItems
+      ? css`
+          display: flex;
+          width: max-content;
+          margin: 0 auto;
+        `
+      : css`
+          display: inline-flex;
+          margin: 0;
+        `}
+`
+
+const ButtonsContainer = styled.div`
+  opacity: 0;
+  transition: 0.4s opacity;
+`
+const Container = styled.div`
+  &:hover ${ButtonsContainer} {
+    opacity: 1;
+  }
+
+  /* CarouselButtonの中にz-index:1があるのでここでコンテキストを切る */
+  position: relative;
+  z-index: 0;
+`
+
+const ScrollArea = styled(animated.div)`
+  overflow-x: auto;
+  padding: 0;
+  margin: 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+`
+
+const GradientContainer = styled.div<{ fadeInGradient: boolean }>`
+  /* NOTE: LeftGradientがはみ出るためhidden */
+  overflow: hidden;
+  ${(p) =>
+    !p.fadeInGradient &&
+    css`
+      margin-left: ${-GRADIENT_WIDTH}px;
+      ${CarouselContainer} {
+        padding-left: ${GRADIENT_WIDTH}px;
+      }
+    `}
+
+  margin-right: ${-GRADIENT_WIDTH}px;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  ${CarouselContainer} {
+    padding-right: ${GRADIENT_WIDTH}px;
+  }
+`
+
+const RightGradient = styled.div`
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - ${GRADIENT_WIDTH}px),
+    transparent
+  );
+`
+
+const LeftGradient = styled.div<{ show: boolean }>`
+  /* NOTE: mask-position が left → negative px の時、right → abs(negative px) の位置に表示されるため */
+  margin-right: ${-GRADIENT_WIDTH}px;
+  padding-right: ${GRADIENT_WIDTH}px;
+  /* NOTE: mask-position に transition をつけたいが vender prefixes 対策で all につける */
+  transition: 0.2s all ease-in;
+  mask: linear-gradient(to right, transparent, #000 ${GRADIENT_WIDTH}px)
+    ${(p) => (p.show ? 0 : -GRADIENT_WIDTH)}px 0;
+`

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

@@ -0,0 +1,44 @@
+import { action } from '@storybook/addon-actions'
+import { boolean, number, select, withKnobs } from '@storybook/addon-knobs'
+import React from 'react'
+import CarouselButton, { Direction, ScrollHintButton } from '.'
+
+export default {
+  title: 'Sandbox/Carousel/CarouselButton',
+  decorators: [withKnobs],
+  component: CarouselButton,
+}
+
+export const _CarouselButton = () => {
+  const direction = select(
+    'direction',
+    { left: Direction.Left, right: Direction.Right },
+    Direction.Left
+  )
+  const show = boolean('show', true)
+  const offset = number('offset', 0)
+  const padding = number('padding', 0)
+
+  return (
+    <CarouselButton
+      direction={direction}
+      show={show}
+      offset={offset}
+      padding={padding}
+      onClick={noop}
+    />
+  )
+}
+
+function noop() {
+  // empty
+}
+
+export const _ScrollHintButton = () => {
+  const direction = select(
+    'direction',
+    { left: Direction.Left, right: Direction.Right },
+    Direction.Left
+  )
+  return <ScrollHintButton direction={direction} onClick={action('click')} />
+}

package/src/components/CarouselButton/index.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { unreachable } from '../../foundation/utils'
+import NextIcon, { WedgeDirection } from '../icons/NextIcon'
+import { applyEffect } from '@charcoal-ui/utils'
+
+export enum Direction {
+  Right = 'right',
+  Left = 'left',
+}
+
+interface Props {
+  direction: Direction
+  show: boolean
+  offset?: number
+  padding?: number
+  bottomOffset?: number
+  gradient?: boolean
+  onClick(): void
+}
+
+export default function CarouselButton({
+  direction,
+  show,
+  offset = 0,
+  padding = 0,
+  bottomOffset: bottom = 0,
+  gradient = false,
+  onClick,
+}: Props) {
+  const offsetStyle =
+    direction === Direction.Left
+      ? {
+          left: gradient ? offset - 72 : offset,
+          paddingLeft: Math.max(padding, 0),
+          paddingBottom: bottom,
+        }
+      : {
+          right: gradient ? offset - 72 : offset,
+          paddingRight: Math.max(padding, 0),
+          paddingBottom: bottom,
+        }
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      hide={!show}
+      style={offsetStyle}
+      css={onlyNonTouchDevice}
+    >
+      <CarouselButtonIcon>
+        <NextIcon
+          direction={
+            direction === Direction.Right
+              ? WedgeDirection.Right
+              : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+              direction === Direction.Left
+              ? WedgeDirection.Left
+              : unreachable()
+          }
+        />
+      </CarouselButtonIcon>
+    </Button>
+  )
+}
+
+export const CAROUSEL_BUTTON_SIZE = 40
+
+const CarouselButtonIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${CAROUSEL_BUTTON_SIZE}px;
+  height: ${CAROUSEL_BUTTON_SIZE}px;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.color.surface4};
+  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
+  color: ${({ theme }) => theme.color.text5};
+`
+
+const Button = styled.button<{ hide: boolean }>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  min-width: 40px;
+  border: none;
+  outline: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: 0.4s visibility, 0.4s opacity;
+  /* つらい */
+  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
+  z-index: 1;
+
+  &:hover ${CarouselButtonIcon} {
+    background-color: ${({ theme }) =>
+      applyEffect(theme.color.surface4, theme.effect.hover)};
+    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};
+  }
+
+  &:active ${CarouselButtonIcon} {
+    background-color: ${({ theme }) =>
+      applyEffect(theme.color.surface4, theme.effect.press)};
+    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};
+  }
+
+  ${(p) =>
+    p.hide &&
+    css`
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none;
+    `}
+`
+
+export function ScrollHintButton({
+  direction,
+  onClick,
+}: {
+  direction: Direction
+  onClick(): void
+}) {
+  return (
+    <ScrollHintIcon onClick={onClick}>
+      <NextIcon
+        direction={
+          direction === Direction.Right
+            ? WedgeDirection.Right
+            : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            direction === Direction.Left
+            ? WedgeDirection.Left
+            : unreachable()
+        }
+      />
+    </ScrollHintIcon>
+  )
+}
+
+const ScrollHintIcon = styled(CarouselButtonIcon)`
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) =>
+      applyEffect(theme.color.surface4, theme.effect.hover)};
+    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.hover)};
+  }
+
+  &:active {
+    background-color: ${({ theme }) =>
+      applyEffect(theme.color.surface4, theme.effect.press)};
+    color: ${({ theme }) => applyEffect(theme.color.text5, theme.effect.press)};
+  }
+`
+
+const onlyNonTouchDevice = css`
+  @media (hover: none) and (pointer: coarse) {
+    display: none;
+  }
+`

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

@@ -0,0 +1,80 @@
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+import React from 'react'
+import {
+  Link as RouterLink,
+  MemoryRouter as Router,
+  Route,
+  useParams,
+  useNavigate,
+} from 'react-router-dom'
+import Filter, { FilterButton, FilterLink } from '.'
+import { ComponentAbstraction } from '@charcoal-ui/react'
+
+export default {
+  title: 'Sandbox/Filter',
+  component: Filter,
+}
+
+const makeUrl = (page: number) => `/${page}`
+
+export function Default() {
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error TOOD: adapt to react-router@6  (props should be covariant not bivariant)
+    <ComponentAbstraction components={{ Link: RouterLink }}>
+      <Router
+        initialEntries={Array.from({ length: 5 }).map((_, i) => makeUrl(i + 1))}
+        initialIndex={0}
+      >
+        <Route path="/:page" element={<FilterButtons />} />
+      </Router>
+    </ComponentAbstraction>
+  )
+}
+
+function FilterButtons() {
+  const navigate = useNavigate()
+  const params = useParams()
+  const page = params.page !== undefined ? parseInt(params.page, 10) : 0
+
+  return (
+    <Filter>
+      <FilterLink to={makeUrl(0)} active={page === 0}>
+        新しい順
+      </FilterLink>
+      <FilterLink to={makeUrl(1)} active={page === 1}>
+        古い順
+      </FilterLink>
+      <FilterButton active={page === 2} onClick={() => navigate('2')}>
+        人気順
+      </FilterButton>
+      <FilterLink to={makeUrl(3)} active={page === 3}>
+        これはリンク
+      </FilterLink>
+      <FilterButton active={page === 4} onClick={() => navigate('4')}>
+        これはボタン
+      </FilterButton>
+    </Filter>
+  )
+}
+
+export function Button() {
+  const active = boolean('Active', true)
+  const reactive = boolean('Reactive', false)
+  return (
+    <FilterButton onClick={action('click')} active={active} reactive={reactive}>
+      Label
+    </FilterButton>
+  )
+}
+
+export function Link() {
+  const active = boolean('Active', true)
+  const reactive = boolean('Reactive', false)
+  return (
+    <FilterLink to="#" active={active} reactive={reactive}>
+      Label
+    </FilterLink>
+  )
+}