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

package/src/components/icons/DotsIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  size?: number | string
+  subLink?: boolean
+}
+
+export { DotsIcon as default }
+
+function DotsIcon({ size }: Props) {
+  return (
+    <StyledSVG viewBox="0 0 20 6" width={size} height={size}>
+      <path
+        fillRule="evenodd"
+        d={`M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
+          C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5
+          C10.6192881,14.5 9.5,13.3807119 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5
+          C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.3807119 13.3807119,14.5 12,14.5 Z M19,14.5
+          C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5
+          C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z`}
+        transform="translate(-2 -9)"
+      />
+    </StyledSVG>
+  )
+}
+DotsIcon.defaultProps = {
+  size: 16,
+}
+
+const StyledSVG = styled.svg`
+  fill: currentColor;
+`

package/src/components/icons/InfoIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import styled from 'styled-components'
+import IconBase from './Base'
+
+const size = 16
+
+export default function InfoIcon() {
+  const path = (
+    <>
+      <path
+        d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183
+           0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
+      />
+      <Path
+        d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629
+           4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 6.25C8.69036 6.25 9.25 5.69036
+           9.25 5C9.25 4.30964 8.69036 3.75 8 3.75C7.30964 3.75 6.75 4.30964 6.75
+           5C6.75 5.69036 7.30964 6.25 8 6.25ZM7 7.75V11.25C7 11.8023 7.44772 12.25
+           8 12.25C8.55228 12.25 9 11.8023 9 11.25V7.75C9 7.19772 8.55228 6.75 8
+           6.75C7.44772 6.75 7 7.19772 7 7.75Z"
+      />
+    </>
+  )
+  return <IconBase viewBoxSize={size} size={size} currentColor path={path} />
+}
+
+const Path = styled.path`
+  fill: ${({ theme }) => theme.color.surface1};
+  fill-rule: evenodd;
+`

package/src/components/icons/NextIcon.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { unreachable } from '../../foundation/utils'
+import IconBase from './Base'
+
+export enum WedgeDirection {
+  Up = 'up',
+  Down = 'down',
+  Left = 'left',
+  Right = 'right',
+}
+
+// eslint-disable-next-line max-len
+const path = `M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z`
+const size = 24
+
+interface Props {
+  direction: WedgeDirection
+}
+
+export default function NextIcon({ direction }: Props) {
+  const transform = directionToTransform(direction)
+  return (
+    <IconBase
+      viewBoxSize={size}
+      size={size}
+      currentColor
+      path={path}
+      transform={transform}
+    />
+  )
+}
+
+function directionToTransform(direction: WedgeDirection) {
+  // "5 4" is the center point of the "0 0 10 8" viewBox
+  switch (direction) {
+    case WedgeDirection.Up:
+      return 'rotate(270 12 12)'
+    case WedgeDirection.Down:
+      return 'rotate(90 12 12)'
+    case WedgeDirection.Left:
+      return 'rotate(180 12 12)'
+    case WedgeDirection.Right:
+      return undefined
+    default:
+      return unreachable(direction)
+  }
+}

package/src/components/icons/WedgeIcon.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { unreachable } from '../../foundation/utils'
+
+export enum WedgeDirection {
+  Up = 'up',
+  Down = 'down',
+  Left = 'left',
+  Right = 'right',
+}
+
+interface Props {
+  size?: number | string
+  direction: WedgeDirection
+}
+
+export default function WedgeIcon({ size, direction }: Props) {
+  return (
+    // NOTE: directionToTransform depends on the value of viewBox
+    <svg viewBox="0 0 10 8" width={size} height={size}>
+      <StyledPolyline
+        strokeWidth="2"
+        points="1,2 5,6 9,2"
+        transform={directionToTransform(direction)}
+      />
+    </svg>
+  )
+}
+WedgeIcon.defaultProps = {
+  size: 16,
+  white: false,
+  lightGray: false,
+}
+
+function directionToTransform(direction: WedgeDirection) {
+  // "5 4" is the center point of the "0 0 10 8" viewBox
+  switch (direction) {
+    case WedgeDirection.Up:
+      return 'rotate(180 5 4)'
+    case WedgeDirection.Down:
+      return undefined
+    case WedgeDirection.Left:
+      return 'rotate(90 5 4)'
+    case WedgeDirection.Right:
+      return 'rotate(-90 5 4)'
+    default:
+      return unreachable(direction)
+  }
+}
+
+const StyledPolyline = styled.polyline`
+  fill: none;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  stroke: currentColor;
+`

package/src/foundation/contants.ts

@@ -0,0 +1,6 @@
+import { columnPx, GUTTER_UNIT } from '@charcoal-ui/foundation'
+
+export const MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72
+
+export const RESPONSIVE_LEFT_WIDTH = columnPx(2) + GUTTER_UNIT
+export const RESPONSIVE_MAIN_MAX_WIDTH = columnPx(12)

package/src/foundation/hooks.ts

@@ -0,0 +1,195 @@
+import {
+  useCallback,
+  useDebugValue,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react'
+import ReactDOM from 'react-dom'
+import { useTheme } from 'styled-components'
+import { maxWidth } from '@charcoal-ui/utils'
+
+declare const __TEST__: object | undefined // actually object|false, but using undefined allows ! assertion
+
+declare module 'react-dom' {
+  export function flushSync<R>(callback: () => R): R
+}
+
+/**
+ * 現在の画面幅がモバイル幅かどうかを返す
+ */
+export function useMediaScreen1() {
+  return useMedia(maxWidth(useTheme().breakpoint.screen1))
+}
+
+/**
+ * Returns a dynamically-updating media query result.
+ *
+ * When the media query's matching state changes, this hook's result
+ * will update with sync priority.
+ *
+ * @param query A full media query (the string written between `@media` and the `{` in CSS)
+ * @returns true if the query matches, false if it doesn't
+ */
+export function useMedia(query: string) {
+  const matcher = useMemo(
+    () =>
+      __TEST__
+        ? {
+            matches: false,
+            addListener: () => {
+              // do nothing
+            },
+            removeListener: () => {
+              // do nothing
+            },
+          }
+        : matchMedia(query),
+    [query]
+  )
+  const [matches, setMatches] = useState<boolean>(matcher.matches)
+
+  // can only happen if/when the query changes
+  if (matcher.matches !== matches) {
+    setMatches(matcher.matches)
+  }
+
+  const callback = (e: MediaQueryListEvent) => {
+    // We're not on a React event listener, so React doesn't know the priority of the setState call
+    // Media query updates _are_ very high priority to avoid FOUC
+    // so we need to emit a sync priority update
+    try {
+      // However, flushSync may throw if the matcher is triggered by a
+      // forced relayout that happens during a React lifecycle handler.
+      // Try to be resilient and retry without flushSync if flushSync throws.
+      ReactDOM.flushSync(() => {
+        setMatches(e.matches)
+      })
+    } catch {
+      setMatches(e.matches)
+    }
+  }
+
+  useLayoutEffect(() => {
+    matcher.addListener(callback)
+    // sync update
+    setMatches(matcher.matches)
+    return () => {
+      matcher.removeListener(callback)
+    }
+  }, [matcher])
+
+  useDebugValue(`${query}: ${matches.toString()}`)
+
+  return matches
+}
+
+export interface ElementSize {
+  width: number
+  height: number
+}
+
+function measure(ref: Element | null): ElementSize | undefined {
+  return ref !== null ? ref.getBoundingClientRect() : undefined
+}
+
+export function useElementSize(
+  ref: React.RefObject<Element>,
+  deps: any[] = []
+) {
+  // _don't_ call measure synchronously here even if you somehow can
+  // measurement has to be done outside the render phase, either
+  // as the resize observer callback or as a layout effect
+
+  const [size, setSize] = useReducer(
+    (
+      state: ElementSize | undefined,
+      next: ElementSize | undefined
+    ): ElementSize | undefined => {
+      // width, height, etc are not own properties but getters in the prototype
+      // can't use shallowEqual or other iterative checks
+      if (state === undefined || next === undefined) {
+        return next
+      }
+      if (state.height === next.height && state.width === next.width) {
+        return state
+      }
+      return next
+    },
+    undefined
+  )
+  const [watch, setWatch] = useState<Element | null>(null)
+  useLayoutEffect(() => {
+    if (watch === null) {
+      return
+    }
+
+    const observer = new ResizeObserver(() => {
+      // NOTE: the ResizeObserverCallback receives a rect,
+      // but it's not measured in the same way as getBoundingClientRect,
+      // which causes unstable layout
+      const newSize = measure(watch)
+      setSize(newSize)
+    })
+
+    // The ResizeObserver is supposed to call handleResize on observe
+    observer.observe(watch)
+
+    return () => {
+      // this will correctly unobserve if either the observer
+      // or the current changes, and even on unmount
+      // no need for an observer.disconnect() 🎉
+      observer.unobserve(watch)
+      setSize(undefined)
+    }
+  }, [watch])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    if (ref.current !== watch) {
+      setWatch(ref.current)
+    }
+  })
+
+  useLayoutEffect(() => {
+    if (deps.length > 0) {
+      // Sync measuring
+      setSize(measure(ref.current))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+
+  useDebugValue(size)
+
+  return size
+}
+
+/**
+ * Debounce version of setState with `requestAnimationFrame`
+ *
+ * @param defaultValue Default value for `useState`
+ */
+export function useDebounceAnimationState<T>(defaultValue: T) {
+  const [state, setState] = useState(defaultValue)
+  const timer = useRef<ReturnType<typeof requestAnimationFrame>>()
+  // typescript bug? (any when omitting type annotation)
+  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+  const setDebounceState = useCallback((value: T, force: boolean = false) => {
+    if (force) {
+      setState(value)
+      return
+    }
+    if (timer.current !== undefined) {
+      return
+    }
+    timer.current = requestAnimationFrame(() => {
+      setState(value)
+      if (timer.current !== undefined) {
+        timer.current = undefined
+      }
+    })
+  }, [])
+  return [state, setDebounceState] as [typeof state, typeof setDebounceState]
+}

package/src/foundation/support.ts

@@ -0,0 +1,29 @@
+var passiveEventsResult: boolean | undefined // eslint-disable-line no-var
+export function passiveEvents(): boolean {
+  if (passiveEventsResult !== undefined) {
+    return passiveEventsResult
+  }
+
+  passiveEventsResult = false
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const options = Object.defineProperty({}, 'passive', {
+      get() {
+        return (passiveEventsResult = true)
+      },
+    })
+
+    window.addEventListener('test', test, options)
+    window.removeEventListener('test', test)
+  } catch {
+    // test fail
+  }
+
+  return passiveEventsResult
+
+  function test() {
+    /* empty */
+  }
+}
+
+export const isEdge = navigator.userAgent.includes('Edge/')

package/src/foundation/utils.ts

@@ -0,0 +1,31 @@
+/**
+ * Function used to assert a given code path is unreachable
+ */
+export function unreachable(): never
+/**
+ * Function used to assert a given code path is unreachable.
+ * Very useful for ensuring switches are exhaustive:
+ *
+ * ```ts
+ * switch (a.type) {
+ *   case Types.A:
+ *   case Types.B:
+ *     break
+ *   default:
+ *     unreachable(a) // will cause a build error if there was
+ *                    // a Types.C that was not checked
+ * }
+ * ```
+ *
+ * @param value Value to be asserted as unreachable
+ */
+// NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed
+// eslint-disable-next-line @typescript-eslint/unified-signatures
+export function unreachable(value: never): never
+export function unreachable(value?: never): never {
+  throw new Error(
+    arguments.length === 0
+      ? 'unreachable'
+      : `unreachable (${JSON.stringify(value)})`
+  )
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+export {
+  default as Filter,
+  FilterButton,
+  FilterIconButton,
+  FilterLink,
+} from './components/Filter'
+export { default as HintText } from './components/HintText'
+export {
+  default as Layout,
+  CancelLayoutItemBodyPadding,
+  LAYOUT_ITEM_BODY_PADDING,
+  LayoutItem,
+  LayoutItemBody,
+  LayoutItemHeader,
+  StyledCancelLayoutItemBodyPadding,
+  StyledLayoutItemBody,
+  useLayoutItemBodyPadding,
+} from './components/Layout'
+export { default as LeftMenu, LeftMenuContent } from './components/LeftMenu'
+export {
+  default as MenuListItem,
+  type MenuListItemBaseData,
+  MenuListItemContext,
+  MenuListItemWithIcon,
+  MenuListLabel,
+  MenuListLinkItem,
+  MenuListLinkItemWithIcon,
+  MenuListSpacer,
+} from './components/MenuListItem'
+export { default as SwitchCheckbox } from './components/SwitchCheckbox'
+export { TextEllipsis } from './components/TextEllipsis'
+export { default as WithIcon } from './components/WithIcon'
+export {
+  ComponentAbstraction,
+  useComponentAbstraction,
+} from '@charcoal-ui/react'
+export {
+  MAIN_COLUMN_HORIZONTAL_MIN_MARGIN,
+  RESPONSIVE_LEFT_WIDTH,
+  RESPONSIVE_MAIN_MAX_WIDTH,
+} from './foundation/contants'
+export { default as Carousel } from './components/Carousel'
+export { useElementSize, useMedia, useMediaScreen1 } from './foundation/hooks'
+export { default as Pager, LinkPager } from './components/Pager'
+export { default as Spinner, SpinnerIcon } from './components/Spinner'

package/src/misc/storybook-helper.ts

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components'
+
+export const dummyText = css`
+  color: ${({ theme }) => theme.color.text4};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+`
+
+export const Dummy = styled.div`
+  background-color: ${({ theme }) => theme.color.surface2};
+  border-radius: 8px;
+
+  ${dummyText}
+`

package/src/styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+import createTheme from '@charcoal-ui/styled'
+export const theme = createTheme(styled)

package/src/type.d.ts

@@ -0,0 +1,12 @@
+import { ElementsTheme, ThemeProp } from '@charcoal-ui/styled'
+import { CSSProp, DefaultTheme } from 'styled-components'
+
+declare module 'react' {
+  interface Attributes {
+    css?: CSSProp<DefaultTheme> | ThemeProp<DefaultTheme>
+  }
+}
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends ElementsTheme {}
+}