@os-design/core 1.0.199 → 1.0.200

package/src/Drawer/index.tsx

@@ -0,0 +1,212 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import Portal from '@os-design/portal';
+import {
+  WithSize,
+  enableScrollingStyles,
+  resetFocusStyles,
+  sizeStyles,
+} from '@os-design/styles';
+import { clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext } from 'react';
+import FocusLock from 'react-focus-lock';
+import { ModalMask } from '../Modal';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface DrawerProps extends JsxDivProps, WithSize {
+  /**
+   * The placement of the drawer.
+   * @default right
+   */
+  placement?: 'left' | 'right';
+  /**
+   * The width of the drawer.
+   * @default 15em
+   */
+  width?: string;
+  /**
+   * Whether the drawer is visible.
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * Specifies a callback that will be called when a user clicks the mask.
+   * The callback should set the visible state to false.
+   * @default undefined
+   */
+  onClose?: () => void;
+}
+
+const DRAWER_CONTAINER_Z_INDEX = 900;
+const DRAWER_BOX_SHADOW_SIZE_EM = 1;
+
+const DrawerMask = styled(ModalMask)`
+  z-index: ${DRAWER_CONTAINER_Z_INDEX};
+`;
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  z-index: ${DRAWER_CONTAINER_Z_INDEX};
+`;
+
+const placementLeftFadeIn = keyframes`
+  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+  to { transform: translateX(0); }
+`;
+
+const placementLeftFadeOut = keyframes`
+  from { transform: translateX(0); }
+  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+`;
+
+const placementRightFadeIn = keyframes`
+  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+  to { transform: translateX(calc(100vw - 100%)); }
+`;
+
+const placementRightFadeOut = keyframes`
+  from { transform: translateX(calc(100vw - 100%)); }
+  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+`;
+
+const placementLeftVisibleStyles = (p) =>
+  p.placement === 'left' &&
+  p.visible &&
+  css`
+    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+const placementLeftInvisibleStyles = (p) =>
+  p.placement === 'left' &&
+  !p.visible &&
+  css`
+    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+const placementRightVisibleStyles = (p) =>
+  p.placement === 'right' &&
+  p.visible &&
+  css`
+    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+const placementRightInvisibleStyles = (p) =>
+  p.placement === 'right' &&
+  !p.visible &&
+  css`
+    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+type ContentProps = Pick<
+  DrawerProps,
+  'placement' | 'width' | 'visible' | 'size'
+>;
+const Content = styled(
+  'div',
+  omitEmotionProps('placement', 'width', 'visible', 'size')
+)<ContentProps>`
+  ${resetFocusStyles};
+
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: ${(p) => p.width};
+  padding-bottom: env(safe-area-inset-bottom);
+
+  background-color: ${(p) => clr(p.theme.colorBg)};
+  color: ${(p) => clr(p.theme.colorText)};
+  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em
+    ${(p) => clr(p.theme.drawerColorBoxShadow)};
+
+  ${placementLeftVisibleStyles};
+  ${placementLeftInvisibleStyles};
+  ${placementRightVisibleStyles};
+  ${placementRightInvisibleStyles};
+
+  ${enableScrollingStyles('y')};
+  ${sizeStyles};
+`;
+
+const CloseDrawerContext = React.createContext<() => void>(() => {});
+
+export const useCloseDrawer = () => useContext(CloseDrawerContext);
+
+/**
+ * The side panel that appears from the edge of the screen.
+ */
+const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
+  (
+    {
+      placement = 'right',
+      width = '15em',
+      visible = false,
+      onClose = () => {},
+      size,
+      children,
+      onClick = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { theme } = useTheme();
+    const mounted = useClosable(visible, theme.transitionDelay);
+
+    useBodyScroll(!visible);
+
+    const clickHandler = useCallback(
+      (e) => {
+        e.stopPropagation();
+        onClick(e);
+      },
+      [onClick]
+    );
+
+    const keyDownHandler = useCallback(
+      (e) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          onClose();
+        }
+      },
+      [onClose]
+    );
+
+    if (!mounted) return null;
+
+    return (
+      <Portal>
+        <DrawerMask visible={visible} />
+        <Container onClick={onClose}>
+          <FocusLock autoFocus>
+            <CloseDrawerContext.Provider value={onClose}>
+              <Content
+                placement={placement}
+                width={width}
+                visible={visible}
+                size={size}
+                tabIndex={-1}
+                onKeyDown={keyDownHandler}
+                onClick={clickHandler}
+                role='dialog'
+                aria-modal
+                {...rest}
+                ref={ref}
+              >
+                {children}
+              </Content>
+            </CloseDrawerContext.Provider>
+          </FocusLock>
+        </Container>
+      </Portal>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';
+
+export default Drawer;

package/src/Form/FormConfigContext.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface FormConfigContextProps {
+  /**
+   * The text that is displayed to the right of the label of the optional field.
+   */
+  optionalText: string;
+}
+
+const FormConfigContext = React.createContext<FormConfigContextProps>({
+  optionalText: 'optional',
+});
+
+FormConfigContext.displayName = 'FormConfigContext';
+
+export default FormConfigContext;

package/src/Form/index.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+import FormConfigContext from './FormConfigContext';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface FormProps extends JsxDivProps, WithSize {
+  /**
+   * The text that is displayed to the right of the label of the optional field.
+   * @default optional
+   */
+  optionalText?: string;
+}
+
+const StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`
+  max-width: 50em;
+
+  & > * + * {
+    margin-top: 1em;
+  }
+  & > style + * {
+    margin-top: 0;
+  }
+
+  ${sizeStyles};
+`;
+
+/**
+ * The wrapper of the form.
+ */
+const Form = forwardRef<HTMLDivElement, FormProps>(
+  ({ optionalText = 'optional', ...rest }, ref) => {
+    const memoizedOptionalText = useMemo(
+      () => ({ optionalText }),
+      [optionalText]
+    );
+
+    return (
+      <FormConfigContext.Provider value={memoizedOptionalText}>
+        <StyledForm {...rest} ref={ref} />
+      </FormConfigContext.Provider>
+    );
+  }
+);
+
+Form.displayName = 'Form';
+
+export default Form;

package/src/FormDivider/index.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled';
+import { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface FormDividerProps extends JsxDivProps, WithSize {
+  /**
+   * The title that is in the center of the divider.
+   */
+  title: string;
+  /**
+   * The description that is under the title.
+   * @default undefined
+   */
+  description?: string;
+}
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  display: flex;
+  align-items: center;
+  margin: 3em 0 1em;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    min-width: 5%;
+    max-width: 50%;
+    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};
+  }
+
+  ${sizeStyles};
+`;
+
+const Content = styled.div`
+  padding: 0 1.5em;
+  text-align: center;
+  overflow: hidden;
+`;
+
+const Title = styled.div`
+  color: ${(p) => clr(p.theme.colorText)};
+  font-size: ${(p) => p.theme.sizes.large}em;
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+
+const Description = styled.div`
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+  font-size: ${(p) => p.theme.sizes.small}em;
+  line-height: 1.2;
+  ${ellipsisStyles};
+`;
+
+/**
+ * The divider line for separating the various elements of the form.
+ */
+const FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(
+  ({ title, description, ...rest }, ref) => (
+    <Container role='separator' {...rest} ref={ref}>
+      <Content>
+        <Title>{title}</Title>
+        <Description>{description}</Description>
+      </Content>
+    </Container>
+  )
+);
+
+FormDivider.displayName = 'FormDivider';
+
+export default FormDivider;

package/src/FormItem/index.tsx

@@ -0,0 +1,118 @@
+import styled from '@emotion/styled';
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useContext, useMemo } from 'react';
+import FormConfigContext from '../Form/FormConfigContext';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface FormItemProps extends JsxDivProps, WithSize {
+  /**
+   * Label of the field.
+   * @default undefined
+   */
+  label?: string;
+  /**
+   * The help message located at the bottom of the field.
+   * @default undefined
+   */
+  help?: string;
+  /**
+   * The error message located at the bottom of the field.
+   * If specified, the field has a red border.
+   * @default undefined
+   */
+  error?: string | null;
+  /**
+   * Whether the field is optional.
+   * @default false
+   */
+  optional?: boolean;
+}
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  ${sizeStyles};
+`;
+
+const Label = styled.label`
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 0.4em;
+  font-size: ${(p) => p.theme.sizes.small}em;
+  color: ${(p) => clr(p.theme.colorText)};
+`;
+
+const Optional = styled.span`
+  color: ${(p) => clr(p.theme.formItemColorOptional)};
+  margin-left: 0.3em;
+`;
+
+const Help = styled.div`
+  margin-top: 0.1em;
+  font-size: ${(p) => p.theme.sizes.small}em;
+  color: ${(p) => clr(p.theme.formItemColorHelp)};
+`;
+
+const Error = styled(Help)`
+  color: ${(p) => clr(p.theme.formItemColorError)};
+`;
+
+/**
+ * The wrapper of the field.
+ */
+const FormItem = forwardRef<HTMLDivElement, FormItemProps>(
+  ({ label, help, error, optional = false, id, children, ...rest }, ref) => {
+    const { optionalText } = useContext(FormConfigContext);
+
+    const containerId = useMemo(
+      () => id || Math.random().toString(36).slice(2, 11),
+      [id]
+    );
+    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);
+    const helpId = useMemo(() => `help-${containerId}`, [containerId]);
+    const ariaInvalid = useMemo(() => !!error, [error]);
+    const ariaDescribedBy = useMemo(
+      () => (help ? helpId : undefined),
+      [help, helpId]
+    );
+
+    return (
+      <Container role='group' id={id} {...rest} ref={ref}>
+        {label && (
+          <Label htmlFor={fieldId}>
+            {label}
+            {optional && <Optional>({optionalText})</Optional>}
+          </Label>
+        )}
+
+        <div
+          id={fieldId}
+          aria-invalid={ariaInvalid}
+          aria-describedby={ariaDescribedBy}
+        >
+          <ThemeOverrider
+            overrides={(theme) => ({
+              inputColorBorder: error
+                ? theme.formItemColorError
+                : theme.inputColorBorder,
+            })}
+          >
+            {children}
+          </ThemeOverrider>
+        </div>
+
+        {error ? (
+          <Error aria-live='polite' id={helpId}>
+            {error}
+          </Error>
+        ) : (
+          help && <Help id={helpId}>{help}</Help>
+        )}
+      </Container>
+    );
+  }
+);
+
+FormItem.displayName = 'FormItem';
+
+export default FormItem;

package/src/Gallery/Status.tsx

@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React from 'react';
+
+interface StatusProps {
+  count: number;
+  current: number;
+  height: number;
+}
+
+interface ContainerProps {
+  height: number;
+}
+const Container = styled('div', omitEmotionProps('height'))<ContainerProps>`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: ${(p) => p.height}px;
+`;
+
+interface BlockProps {
+  count: number;
+  index: number;
+  current: boolean;
+}
+const Block = styled(
+  'div',
+  omitEmotionProps('count', 'index', 'current')
+)<BlockProps>`
+  position: absolute;
+  left: ${(p) => (100 / p.count) * p.index}%;
+  width: ${(p) =>
+    p.index < p.count - 1
+      ? `calc(${100 / p.count}% - 2px)`
+      : `${100 / p.count}%`};
+  height: 100%;
+
+  background-color: ${(p) =>
+    p.current
+      ? clr(p.theme.galleryStatusColorBgCurrent)
+      : clr(p.theme.galleryStatusColorBg)};
+  backdrop-filter: blur(0.2em);
+`;
+
+const Status: React.FC<StatusProps> = ({ count, current, height }) => (
+  <Container height={height}>
+    {Array(count)
+      .fill(0)
+      .map((_, index) => (
+        <Block
+          key={index} // eslint-disable-line react/no-array-index-key
+          count={count}
+          index={index}
+          current={index === current}
+        />
+      ))}
+  </Container>
+);
+
+export default Status;