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

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

@@ -0,0 +1,32 @@
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+import React from 'react'
+import SwitchCheckbox from '.'
+
+export default {
+  title: 'Sandbox/Selection Control/SwitchCheckbox',
+  component: SwitchCheckbox,
+}
+
+export const Default = () => {
+  const checked = boolean('checked', false)
+  const disabled = boolean('disabled', false)
+  const flex = boolean('flex', false)
+  const rowReverse = boolean('rowReverse', false)
+
+  return (
+    <SwitchCheckbox
+      defaultChecked={checked}
+      flex={flex}
+      disabled={disabled}
+      rowReverse={rowReverse}
+      onChange={action('onChange')}
+    >
+      label
+    </SwitchCheckbox>
+  )
+}
+
+export const On = () => <SwitchCheckbox checked />
+export const Off = () => <SwitchCheckbox checked={false} />
+export const Disabled = () => <SwitchCheckbox checked disabled />

package/src/components/SwitchCheckbox/index.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+
+import styled, { css } from 'styled-components'
+import { applyEffect } from '@charcoal-ui/utils'
+
+export interface Props extends React.ComponentPropsWithoutRef<'input'> {
+  gtmClass?: string
+  flex?: boolean
+  rowReverse?: boolean
+}
+
+export default React.forwardRef(function SwitchCheckbox(
+  {
+    gtmClass,
+    flex = false,
+    rowReverse = false,
+    children,
+    disabled,
+    ...props
+  }: Props,
+  ref: React.Ref<HTMLInputElement>
+) {
+  return (
+    <Label
+      className={gtmClass !== undefined ? `gtm-${gtmClass}` : ''}
+      flex={flex}
+      rowReverse={rowReverse}
+      aria-disabled={disabled}
+    >
+      <SwitchOuter>
+        <SwitchInput {...props} disabled={disabled} ref={ref} />
+        <SwitchInner>
+          <SwitchInnerKnob />
+        </SwitchInner>
+      </SwitchOuter>
+      {children != null && (
+        <Children rowReverse={rowReverse}>{children}</Children>
+      )}
+    </Label>
+  )
+})
+
+const Children = styled.span<{ rowReverse: boolean }>`
+  ${(p) =>
+    p.rowReverse
+      ? css`
+          margin-right: 8px;
+        `
+      : css`
+          margin-left: 8px;
+        `}
+`
+
+const Label = styled.label<{ flex: boolean; rowReverse: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  ${({ flex }) =>
+    flex &&
+    css`
+      display: flex;
+      justify-content: space-between;
+    `}
+  ${({ rowReverse }) =>
+    css`
+      flex-direction: ${rowReverse ? 'row-reverse' : 'row'};
+    `}
+  cursor: pointer;
+  outline: 0;
+
+  &[aria-disabled='true'] {
+    cursor: auto;
+  }
+`
+
+const SwitchOuter = styled.span`
+  display: inline-flex;
+  position: relative;
+  z-index: 0;
+`
+
+const SwitchInner = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  height: 16px;
+  border-radius: 16px;
+  border: 2px solid transparent;
+  background: ${({ theme }) => theme.color.text4};
+  transition: box-shadow 0.2s, background-color 0.2s;
+`
+
+const SwitchInnerKnob = styled.div`
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  background-color: ${({ theme }) => theme.color.text5};
+  border-radius: 50%;
+  transform: translateX(0);
+  transition: transform 0.2s;
+`
+
+const SwitchInput = styled.input.attrs({
+  type: 'checkbox' as string,
+})`
+  position: absolute;
+  /* NOTE: this is contained by the GraphicCheckboxOuter */
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* just to control the clickable area if used standalone */
+  border-radius: 16px;
+  opacity: 0;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+
+  &:checked {
+    ~ ${SwitchInner} {
+      background-color: ${({ theme }) => theme.color.brand};
+
+      ${SwitchInnerKnob} {
+        transform: translateX(12px);
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: auto;
+
+    ~ ${SwitchInner} {
+      opacity: ${({ theme }) => theme.elementEffect.disabled.opacity};
+    }
+  }
+
+  &:not(:disabled):focus {
+    ~ ${SwitchInner} {
+      box-shadow: 0 0 0 4px
+        ${({ theme }) =>
+          applyEffect(theme.color.brand, theme.elementEffect.disabled)};
+    }
+  }
+`

package/src/components/TextEllipsis/helper.ts

@@ -0,0 +1,57 @@
+// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
+
+import {
+  Children,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  ReactText,
+} from 'react'
+
+const hasChildren = (
+  element: ReactNode
+): element is ReactElement<{ children: ReactNode[] }> =>
+  isValidElement<{ children?: ReactNode[] }>(element) &&
+  Boolean(element.props.children)
+
+export const childToString = (
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  child?: ReactText | boolean | {} | null
+): string => {
+  if (
+    typeof child === 'undefined' ||
+    child === null ||
+    typeof child === 'boolean'
+  ) {
+    return ''
+  }
+
+  if (JSON.stringify(child) === '{}') {
+    return ''
+  }
+
+  return (child as string | number).toString()
+}
+
+export const onlyText = (children: ReactNode): string => {
+  if (!Array.isArray(children) && !isValidElement(children)) {
+    return childToString(children)
+  }
+
+  return Children.toArray(children).reduce(
+    (text: string, child: ReactNode): string => {
+      let newText = ''
+
+      if (isValidElement(child) && hasChildren(child)) {
+        newText = onlyText(child.props.children)
+      } else if (isValidElement(child) && !hasChildren(child)) {
+        newText = ''
+      } else {
+        newText = childToString(child)
+      }
+
+      return text.concat(newText)
+    },
+    ''
+  )
+}

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

@@ -0,0 +1,41 @@
+import { number, text } from '@storybook/addon-knobs'
+import React from 'react'
+import styled from 'styled-components'
+import { TextEllipsis } from '.'
+
+export default {
+  title: 'Sandbox/TextEllipsis',
+  component: TextEllipsis,
+}
+
+export const Default = () => {
+  const maxRows = number('maxRaws', 2)
+  const contentText = text(
+    'text',
+    '隴西の李徴は博学才穎、天宝の末年、若くして名を虎榜に連ね、ついで江南尉に補せられたが、性、狷介、自ら恃むところ頗る厚く、賤吏に甘んずるを潔しとしなかった。' +
+      'いくばくもなく官を退いた後は、故山、※(「埒のつくり＋虎」、第3水準1-91-48)略に帰臥し、人と交を絶って、ひたすら詩作に耽った。' +
+      '下吏となって長く膝を俗悪な大官の前に屈するよりは、詩家としての名を死後百年に遺そうとしたのである。' +
+      'しかし、文名は容易に揚らず、生活は日を逐うて苦しくなる。' +
+      '李徴は漸く焦躁に駆られて来た。この頃からその容貌も峭刻となり、肉落ち骨秀で、眼光のみ徒らに炯々として、曾て進士に登第した頃の豊頬の美少年の俤は、何処に求めようもない。' +
+      '数年の後、貧窮に堪えず、妻子の衣食のために遂に節を屈して、再び東へ赴き、一地方官吏の職を奉ずることになった。' +
+      '一方、これは、己の詩業に半ば絶望したためでもある。' +
+      '曾ての同輩は既に遥か高位に進み、彼が昔、鈍物として歯牙にもかけなかったその連中の下命を拝さねばならぬことが、往年の儁才李徴の自尊心を如何に傷けたかは、想像に難くない。' +
+      '彼は怏々として楽しまず、狂悖の性は愈々抑え難くなった。' +
+      '一年の後、公用で旅に出、汝水のほとりに宿った時、遂に発狂した。' +
+      '或夜半、急に顔色を変えて寝床から起上ると、何か訳の分らぬことを叫びつつそのまま下にとび下りて、闇の中へ駈出した。' +
+      '彼は二度と戻って来なかった。附近の山野を捜索しても、何の手掛りもない。' +
+      'その後李徴がどうなったかを知る者は、誰もなかった。'
+  )
+
+  return (
+    <FontSizeStyleProvider>
+      <TextEllipsis lineHeight={22} lineLimit={maxRows}>
+        {contentText}
+      </TextEllipsis>
+    </FontSizeStyleProvider>
+  )
+}
+
+const FontSizeStyleProvider = styled.div`
+  font-size: 14px;
+`

package/src/components/TextEllipsis/index.tsx

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components'
+import { onlyText } from './helper'
+
+export interface Props {
+  lineHeight: number
+  lineLimit?: number
+}
+
+/**
+ * 複数行のテキストに表示行数制限を設けて`...`で省略する
+ */
+export const TextEllipsis = styled.div.attrs(
+  ({ children, title = onlyText(children) }) => ({
+    title: title !== '' ? title : undefined,
+  })
+)<Props>`
+  overflow: hidden;
+  line-height: ${(props) => props.lineHeight}px;
+  /* For english */
+  overflow-wrap: break-word;
+
+  ${({ lineLimit = 1, lineHeight }) =>
+    lineLimit === 1
+      ? css`
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `
+      : css`
+          display: box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: ${lineLimit};
+          /* Fallback for -webkit-line-clamp */
+          max-height: ${lineHeight * lineLimit}px;
+        `}
+`

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

@@ -0,0 +1,145 @@
+import { boolean } from '@storybook/addon-knobs'
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { theme } from '../../styled'
+import WithIcon from '.'
+import { applyEffect } from '@charcoal-ui/utils'
+
+export default {
+  title: 'Sandbox/WithIcon',
+  component: WithIcon,
+}
+
+export const Default = () => {
+  const fit = boolean('fit', true)
+  const bigger = boolean(
+    'Icon height bigger than line-height (`fit` is effective)',
+    false
+  )
+  const prefix = boolean('prefix', false)
+  const show = boolean('show', true)
+  return (
+    <Container>
+      <WithIcon
+        icon={<TestInlineIcon lineHeight={bigger ? 32 : 22} />}
+        show={show}
+        prefix={prefix}
+        fit={fit}
+      >
+        Menu
+      </WithIcon>
+    </Container>
+  )
+}
+
+export const Performance = () => (
+  <Container>
+    <WithIcon
+      icon={<TestInlineIcon lineHeight={22} />}
+      show
+      fit
+      // Hard-coded width (ResizeObserver free and NO measuring cost)
+      width={16}
+    >
+      Menu
+    </WithIcon>
+  </Container>
+)
+
+export const Naive = () => (
+  // NO measuring cost
+  <Container>
+    <WithIcon icon={<TestInlineIcon lineHeight={22} />} show>
+      Menu
+    </WithIcon>
+  </Container>
+)
+
+export const Prefix = () => (
+  <Container>
+    <WithIcon icon={<TestIcon />} show prefix fit>
+      Selection
+    </WithIcon>
+  </Container>
+)
+
+function Container(props: { className?: string; children?: React.ReactNode }) {
+  return (
+    <div
+      css={css`
+        ${theme((o) => [o.font.text1, o.typography(14).preserveHalfLeading])}
+        display: flex;
+      `}
+    >
+      <div
+        css={css`
+          background-color: ${({ theme }) =>
+            applyEffect(theme.color.brand, theme.elementEffect.disabled)};
+        `}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export const Hide = () => (
+  <Container>
+    <WithIcon icon={<TestIcon />} show={false} prefix>
+      Selection
+    </WithIcon>
+  </Container>
+)
+
+export const Collapse = () => (
+  <Container>
+    <WithIcon icon={<TestIcon />} show="collapse" prefix>
+      Selection
+    </WithIcon>
+  </Container>
+)
+
+export const LongText = () => (
+  <Container
+    css={`
+      width: 200px;
+    `}
+  >
+    <WithIcon icon={<TestIcon />}>
+      Long Long Long Long Long Long Long Long Long Long Text
+    </WithIcon>
+  </Container>
+)
+
+export const LongTextOverflow = () => (
+  <Container
+    css={`
+      width: 200px;
+    `}
+  >
+    <WithIcon icon={<TestIcon />} fixed>
+      Long Long Long Long Long Long Long Long Long Long Text
+    </WithIcon>
+  </Container>
+)
+
+const TestIcon = styled.div`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+`
+
+const TestInlineIcon = styled.div<{ lineHeight: number }>`
+  display: inline-flex;
+  vertical-align: top;
+  align-items: center;
+  line-height: ${(p) => p.lineHeight}px;
+  height: ${(p) => p.lineHeight}px;
+  &::before {
+    content: '';
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    background-color: currentColor;
+  }
+`

package/src/components/WithIcon/index.tsx

@@ -0,0 +1,158 @@
+import React, { useRef } from 'react'
+import styled, { css } from 'styled-components'
+import { useElementSize } from '../../foundation/hooks'
+
+export interface Props {
+  children?: React.ReactNode
+  icon: React.ReactNode
+  /**
+   * アイコンを表示。デフォルトがtrueなので、非表示にするときに使います。 (アイコン自体の幅を維持します)
+   */
+  show?: boolean | 'collapse'
+  /**
+   * アイコンを前にする
+   */
+  prefix?: boolean
+  /**
+   * アイコンの高さが文字の高さよりも大きいケースで有効。アイコンの高さをゼロにしてインラインの高さに関与させないようにします。
+   */
+  fit?: boolean
+  /**
+   * `fit`と併用した時にのみ有効な最適化オプション。アイコンの幅の自動計算を行わず指定した数値を利用します。
+   */
+  width?: number
+  /**
+   * 親要素のサイズに合わせるのではなく、コンテンツのサイズを優先する
+   */
+  fixed?: boolean
+}
+
+export default React.memo(function WithIcon({
+  children,
+  icon,
+  show = true,
+  prefix: pre = false,
+  width,
+  fit = false,
+  fixed = false,
+}: Props) {
+  const node = fit ? (
+    width === undefined ? (
+      <AutoWidthIconAnchor show={show} pre={pre}>
+        {icon}
+      </AutoWidthIconAnchor>
+    ) : (
+      <IconAnchor width={width} show={show} pre={pre}>
+        <Icon>{icon}</Icon>
+      </IconAnchor>
+    )
+  ) : (
+    <IconAnchorNaive show={show} pre={pre}>
+      <IconNaive>{icon}</IconNaive>
+    </IconAnchorNaive>
+  )
+
+  return (
+    <Root>
+      {pre && node}
+      <Text fixed={fixed}>{children}</Text>
+      {!pre && node}
+    </Root>
+  )
+})
+
+const Root = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const Text = styled.div<{ fixed: boolean }>`
+  ${(p) =>
+    !p.fixed &&
+    css`
+      min-width: 0;
+      overflow: hidden;
+    `}
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
+function AutoWidthIconAnchor({
+  children,
+  show,
+  pre,
+}: {
+  children: React.ReactNode
+  show: boolean | 'collapse'
+  pre: boolean
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  // depsを空配列にしないことで初回だけ同期で幅を計算させるテクニック
+  const width = useElementSize(ref, [null])?.width ?? 0
+  return (
+    <IconAnchor width={width} show={show} pre={pre}>
+      <Icon ref={ref}>{children}</Icon>
+    </IconAnchor>
+  )
+}
+
+const forceCenteringCss = css`
+  > svg {
+    display: block;
+  }
+`
+
+const iconAnchorCss = css`
+  ${(p: { show: boolean | 'collapse'; pre: boolean }) =>
+    p.show === 'collapse'
+      ? css`
+          display: none;
+        `
+      : css`
+          visibility: ${p.show ? 'visible' : 'hidden'};
+        `};
+  ${(p) =>
+    p.pre
+      ? css`
+          margin-right: 4px;
+        `
+      : css`
+          margin-left: 4px;
+        `}
+`
+
+const IconAnchorNaive = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${iconAnchorCss}
+`
+
+const IconNaive = styled.div`
+  display: inline-flex;
+
+  ${forceCenteringCss}
+`
+
+const IconAnchor = styled.div<{
+  width: number
+  show: boolean | 'collapse'
+  pre: boolean
+}>`
+  display: flex;
+  position: relative;
+  /* Iconをline-heightに関与させない */
+  height: 0;
+  /* 横方向の領域は確保する */
+  width: ${(p) => p.width}px;
+
+  ${iconAnchorCss}
+`
+
+const Icon = styled.div`
+  display: inline-flex;
+  position: absolute;
+  transform: translateY(-50%);
+
+  ${forceCenteringCss}
+`

package/src/components/icons/Base.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export type IconSizes = 16 | 24 | 32
+
+interface Props {
+  path: string | React.ReactNode
+  viewBoxSize: number
+  size?: IconSizes | 40 | 48 | 64 | 72
+  transform?: string
+  currentColor?: boolean
+  fillRule?: 'nonzero' | 'evenodd'
+  clipRule?: 'nonzero' | 'evenodd' | 'inherit'
+}
+
+export default function IconBase({
+  size = 24,
+  viewBoxSize,
+  currentColor,
+  path,
+  transform,
+  fillRule,
+  clipRule,
+}: Props) {
+  return (
+    <Icon
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      size={size}
+      currentColor={currentColor}
+    >
+      <IconBasePath
+        path={path}
+        transform={transform}
+        fillRule={fillRule}
+        clipRule={clipRule}
+      />
+    </Icon>
+  )
+}
+
+const Icon = styled.svg<{ size: number; currentColor?: boolean }>`
+  stroke: none;
+  fill: ${({ currentColor = false, theme }) =>
+    currentColor ? 'currentColor' : theme.color.text2};
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  line-height: 0;
+  font-size: 0;
+  vertical-align: middle;
+`
+
+type IconBasePathProps = Pick<
+  Props,
+  'path' | 'transform' | 'fillRule' | 'clipRule'
+>
+export const IconBasePath = ({
+  path,
+  transform,
+  fillRule,
+  clipRule,
+}: IconBasePathProps) => {
+  if (typeof path === 'string') {
+    return (
+      <path
+        d={path}
+        transform={transform}
+        fillRule={fillRule}
+        clipRule={clipRule}
+      />
+    )
+  } else {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{path}</>
+  }
+}