@ubie/vitals-ui-consumer 0.0.1

package/src/components/Text/Text.module.css

@@ -0,0 +1,168 @@
+.text {
+  font-size: var(--font-size);
+  font-weight: normal;
+  hyphens: auto;
+  line-height: var(--leading);
+  color: var(--text-color);
+  overflow-wrap: anywhere;
+}
+
+:where(.text) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+a.text {
+  text-decoration: underline;
+}
+
+@media (hover: hover) {
+  a.text:hover {
+    text-decoration: none;
+  }
+}
+
+a.text:focus-visible {
+  text-decoration: none;
+}
+
+a.text:active {
+  text-decoration: underline;
+}
+
+button.text {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+
+button.text.link:focus-visible {
+  color: var(--color-primary);
+}
+
+@media (hover: hover) {
+  button.text.link:hover {
+    color: var(--color-primary);
+  }
+
+  button.text.link:active {
+    color: var(--color-primary);
+  }
+}
+
+.bold {
+  font-weight: bold;
+}
+
+/* font-size */
+.body.xs {
+  --font-size: var(--text-body-xs-size);
+}
+
+.body.sm {
+  --font-size: var(--text-body-sm-size);
+}
+
+.body.md {
+  --font-size: var(--text-body-md-size);
+}
+
+.body.lg {
+  --font-size: var(--text-body-lg-size);
+}
+
+.heading.xxs {
+  --font-size: var(--text-heading-xxs-size);
+}
+
+.heading.xs {
+  --font-size: var(--text-heading-xs-size);
+}
+
+.heading.sm {
+  --font-size: var(--text-heading-sm-size);
+}
+
+.heading.md {
+  --font-size: var(--text-heading-md-size);
+}
+
+.heading.lg {
+  --font-size: var(--text-heading-lg-size);
+}
+
+.heading.xl {
+  --font-size: var(--text-heading-xl-size);
+}
+
+.button.sm {
+  --font-size: var(--text-button-sm-size);
+}
+
+.button.md {
+  --font-size: var(--text-button-md-size);
+}
+
+.button.lg {
+  --font-size: var(--text-button-lg-size);
+}
+
+.tag.md {
+  --font-size: var(--text-tag-md-size);
+}
+
+.tag.lg {
+  --font-size: var(--text-tag-lg-size);
+}
+
+/* line-height */
+.default {
+  --leading: var(--text-body-md-line);
+}
+
+.default.heading.xs,
+.default.heading.sm {
+  --leading: var(--text-heading-sm-line);
+}
+
+.default.heading.md,
+.default.heading.lg,
+.default.heading.xl {
+  --leading: var(--text-heading-md-line);
+}
+
+.button.default {
+  --leading: var(--text-button-md-line);
+}
+
+.tag.default {
+  --leading: var(--text-tag-md-line);
+}
+
+.narrow {
+  --leading: var(--text-body-md-narrow-line);
+}
+
+.wide {
+  --leading: var(--text-body-md-wide-line);
+}
+
+.wide.heading {
+  --leading: var(--text-heading-md-wide-line);
+}
+
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { clsx } from "clsx";
+import { cloneElement } from "react";
+import styles from "./Text.module.css";
+import {
+  BodyFontSize,
+  BodyLeading,
+  HeadingFontSize,
+  HeadingLeading,
+  ButtonFontSize,
+  ButtonLeading,
+  TagFontSize,
+  TagLeading,
+  TextColorVariant,
+} from "../../types/style";
+import { fixedForwardRef } from "../../utils/component";
+import { colorVariable } from "../../utils/style";
+import { DistributiveOmit } from "../../utils/types";
+import type {
+  ReactNode,
+  ElementType,
+  ForwardedRef,
+  ComponentPropsWithRef,
+  ReactElement,
+} from "react";
+
+type BaseProps = {
+  /**
+   * レンダリングされる要素を変更。フレームワークのリンクコンポーネントを想定しています
+   * 指定した場合、colorがデフォルトでlinkになります
+   */
+  render?: ReactElement;
+  /**
+   * 表示するテキスト
+   * pやdivなどを含めないでください（文法的にNGです）
+   */
+  children: ReactNode;
+  /**
+   * 太字とする
+   */
+  bold?: boolean;
+  /**
+   * 文字色の抽象値
+   * @default main
+   */
+  color?: TextColorVariant;
+  /**
+   * HTMLのid属性
+   */
+  id?: string;
+  /**
+   * テキストの配置。指定しない場合、親要素の配置を継承
+   */
+  textAlign?: "left" | "center" | "right";
+  /**
+   * 領域が狭い場合でも折り返えさない
+   */
+  noWrap?: boolean;
+};
+
+type BodyProps = BaseProps & {
+  /**
+   * テキストの種類
+   * @default body
+   */
+  type?: "body";
+  /**
+   * フォントサイズの抽象値
+   * @default md
+   */
+  size?: BodyFontSize;
+  /**
+   * 行送りの抽象値（`line-height`）
+   */
+  leading?: BodyLeading;
+};
+
+type HeadingProps = BaseProps & {
+  /**
+   * テキストの種類
+   */
+  type: "heading";
+  /**
+   * フォントサイズの抽象値
+   */
+  size?: HeadingFontSize;
+  /**
+   * 行送りの抽象値（`line-height`）
+   * @default default
+   */
+  leading?: HeadingLeading;
+};
+
+type ButtonProps = BaseProps & {
+  /**
+   * テキストの種類
+   */
+  type: "button";
+  /**
+   * フォントサイズの抽象値
+   */
+  size?: ButtonFontSize;
+  /**
+   * 行送りの抽象値（`line-height`）
+   * @default default
+   */
+  leading?: ButtonLeading;
+};
+
+type TagProps = BaseProps & {
+  /**
+   * テキストの種類
+   */
+  type: "tag";
+  /**
+   * フォントサイズの抽象値
+   */
+  size?: TagFontSize;
+  /**
+   * 行送りの抽象値（`line-height`）
+   * @default default
+   */
+  leading?: TagLeading;
+};
+
+type TextProps = BodyProps | HeadingProps | ButtonProps | TagProps;
+
+function TextInner<T extends ElementType>(
+  props: {
+    /**
+     * レンダリングされる要素を指定。renderとは違い、HTMLのネイティブ要素に限定
+     * また、指定した要素に応じて対応する属性も合わせて使用可能に
+     * @default p
+     */
+    as?: T;
+  } & TextProps &
+    DistributiveOmit<ComponentPropsWithRef<ElementType extends T ? "p" : T>, "as">,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
+  const {
+    render,
+    as: TextComponent = "p",
+    size = "md",
+    type = "body",
+    leading = "default",
+    bold = false,
+    noWrap = false,
+    color: _color,
+    children,
+    id,
+    textAlign,
+    ...rest
+  } = props;
+  const color =
+    _color != null
+      ? _color
+      : TextComponent === "a" || TextComponent === "button" || render != null
+        ? "link"
+        : "main";
+
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  const createElement = (props: any, children: ReactNode) => {
+    return render ? (
+      cloneElement(render, props, children)
+    ) : (
+      <TextComponent {...props}>{children}</TextComponent>
+    );
+  };
+
+  return createElement(
+    {
+      ref,
+      id,
+      className: clsx(
+        styles.text,
+        styles[size],
+        styles[type],
+        styles[leading],
+        textAlign && styles[textAlign],
+        bold && styles.bold,
+        noWrap && styles.nowrap,
+      ),
+      style: colorVariable(color),
+      ...rest,
+    },
+    <>{children}</>,
+  );
+}
+
+export const Text = fixedForwardRef(TextInner);

package/src/components/TextArea/TextArea.module.css

@@ -0,0 +1,46 @@
+.textArea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--size-spacing-md) var(--size-spacing-sm) 0.875rem;
+  font-size: var(--text-body-md-narrow-size);
+  line-height: var(--text-body-md-narrow-line);
+  color: var(--color-on-surface);
+  text-align: inherit;
+  appearance: none;
+  caret-color: var(--color-ubie-blue-600);
+  background-color: var(--color-ubie-white);
+  border: 1px solid var(--color-outline);
+  border-bottom-width: 2px;
+  border-radius: 8px 8px 0 0;
+}
+
+.textArea:disabled {
+  color: var(--color-placeholder);
+  background-color: var(--color-outline-variant);
+}
+
+.textArea::placeholder {
+  color: var(--color-placeholder);
+}
+
+.textArea:disabled::placeholder {
+  color: var(--color-placeholder);
+}
+
+.textArea.isInvalid,
+.textArea:user-invalid {
+  background: var(--color-error-container);
+  border-bottom-color: var(--color-ubie-red-700);
+}
+
+@supports not (selector(:user-invalid)) {
+  .textArea:invalid {
+    background: var(--color-error-container);
+    border-bottom-color: var(--color-ubie-red-700);
+  }
+}
+
+.textArea:focus {
+  border-bottom-color: var(--color-ubie-blue-600);
+  outline: none;
+}

package/src/components/TextArea/TextArea.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { TextArea } from "./TextArea";
+
+describe("TextArea", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLTextAreaElement>();
+
+    render(<TextArea name="test" defaultValue="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("TEXTAREA");
+  });
+});

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "./TextArea.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import type { TextareaHTMLAttributes } from "react";
+
+type Props = {
+  /**
+   * 値が不正であることを示す
+   */
+  isInvalid?: boolean;
+  /**
+   * フィールドを無効化する
+   */
+  disabled?: boolean;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> &
+  CustomDataAttributeProps;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
+  ({ isInvalid = false, className, ...props }, ref) => {
+    const _className = clsx({ [styles.isInvalid]: isInvalid }, styles.textArea, className);
+
+    return <textarea ref={ref} {...props} className={_className} aria-invalid={isInvalid} />;
+  },
+);
+
+TextArea.displayName = "TextArea";

package/src/components/Toggle/Toggle.module.css

@@ -0,0 +1,71 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  width: 3rem;
+  height: 1.5rem;
+  padding: 0.125rem;
+  cursor: pointer;
+  border-radius: 3rem;
+  transition: background-color 200ms;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.root,
+.root * {
+  box-sizing: border-box;
+}
+
+.root:has(input:focus-visible) {
+  outline: 2px solid var(--color-ubie-pink-500);
+}
+
+.root:has(input:disabled) {
+  cursor: default;
+  background-color: var(--color-placeholder);
+}
+
+.on {
+  background-color: var(--color-ubie-blue-600);
+}
+
+.off {
+  background-color: var(--color-ubie-gray-500);
+}
+
+@media (hover: hover) {
+  .on:hover {
+    background-color: var(--color-ubie-blue-700);
+  }
+
+  .off:hover {
+    background-color: var(--color-ubie-gray-700);
+  }
+}
+
+.thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--color-ubie-white);
+  border-radius: 50%;
+  transition: transform 200ms;
+}
+
+.thumbOn {
+  transform: translateX(1.5rem);
+}
+
+.thumbOff {
+  transform: translateX(0);
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/components/Toggle/Toggle.spec.tsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, it } from "vite-plus/test";
+import { Toggle } from "./Toggle";
+
+describe("Toggle", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLInputElement>();
+
+    render(<Toggle name="test" value="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("INPUT");
+    expect(ref.current?.type).toBe("checkbox");
+  });
+
+  it("has switch role", () => {
+    const { getByTestId } = render(<Toggle name="test" value="test" data-testid="switch" />);
+    const element = getByTestId("switch");
+    expect(element.getAttribute("role")).toBe("switch");
+  });
+});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef, InputHTMLAttributes, useRef, useState } from "react";
+import styles from "./Toggle.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+
+type Props = {
+  /**
+   * 現在の状態が選択中かどうか
+   */
+  checked?: boolean;
+  /**
+   * 初期状態で選択状態とする
+   */
+  defaultChecked?: boolean;
+  /**
+   * 無効状態かどうか
+   * @default false
+   */
+  disabled?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "children"> &
+  CustomDataAttributeProps;
+
+export const Toggle = forwardRef<HTMLInputElement, Props>(
+  ({ checked: checkedProps, defaultChecked, onChange, ...otherProps }, ref) => {
+    const { current: isUnControlled } = useRef(checkedProps === undefined);
+    const [isUnControlledChecked, setIsUnControlledChecked] = useState(defaultChecked);
+
+    const isChecked = isUnControlled ? isUnControlledChecked : checkedProps;
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      if (isUnControlled) {
+        setIsUnControlledChecked(event.target.checked);
+      }
+      if (onChange) onChange(event);
+    };
+
+    return (
+      <label className={clsx(styles.root, isChecked ? styles.on : styles.off)}>
+        <input
+          ref={ref}
+          type="checkbox"
+          role="switch"
+          checked={isChecked}
+          onChange={handleChange}
+          className={styles.input}
+          {...otherProps}
+        />
+        <span className={clsx(styles.thumb, isChecked ? styles.thumbOn : styles.thumbOff)} />
+      </label>
+    );
+  },
+);
+
+Toggle.displayName = "Toggle";

package/src/font.ts

@@ -0,0 +1,2 @@
+export { Bold } from "./components/Bold/Bold";
+export { Color } from "./components/Color/Color";

package/src/hooks/useScrollable.ts

@@ -0,0 +1,58 @@
+import debounce from "debounce";
+import { useCallback, useState } from "react";
+
+export const useScrollable = () => {
+  const [canScrollUp, setCanScrollUp] = useState(false);
+  const [canScrollDown, setCanScrollDown] = useState(false);
+
+  let abrotController: AbortController | null = null;
+
+  const checkScrollable = (element: HTMLDivElement) => {
+    const { top, bottom } = element.getBoundingClientRect();
+    const { top: contentTop, bottom: contentBottom } = element.children[0].getBoundingClientRect();
+
+    // On some Android devices, the decimal point in the number causes the judgment to be incorrect.
+    setCanScrollUp(Math.floor(contentTop) < Math.floor(top));
+    setCanScrollDown(Math.floor(contentBottom) > Math.floor(bottom));
+  };
+
+  const handleEvent = (element: HTMLDivElement) => () => {
+    checkScrollable(element);
+  };
+
+  const setContainer = (element: HTMLDivElement) => {
+    if (!abrotController) return;
+
+    element.addEventListener("scroll", debounce(handleEvent(element), 25), {
+      signal: abrotController.signal,
+      passive: true,
+    });
+
+    window.addEventListener("resize", debounce(handleEvent(element), 50), {
+      signal: abrotController.signal,
+      passive: true,
+    });
+
+    // In some cases, the DOM may not be ready when the callback ref is triggered in modal components. It is shifted appropriately.
+    setTimeout(() => {
+      checkScrollable(element);
+    }, 10);
+  };
+
+  const unSetContainer = () => {
+    abrotController?.abort();
+    abrotController = null;
+  };
+
+  const scrollContainerRef = useCallback((node: HTMLDivElement | null) => {
+    if (node === null) {
+      unSetContainer();
+      return;
+    }
+
+    abrotController = new AbortController();
+    setContainer(node);
+  }, []);
+
+  return { scrollContainerRef, canScrollUp, canScrollDown };
+};

package/src/icons/AppleIcon.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, SVGProps } from "react";
+
+export const AppleIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M20.6856 16.6738C20.2168 17.7149 19.9909 18.1802 19.388 19.099C18.5439 20.383 17.3534 21.9863 15.8826 21.9964C14.5732 22.0083 14.2352 21.1422 12.457 21.1575C10.6805 21.1659 10.3103 22.0134 8.99916 21.9998C7.52669 21.9863 6.40068 20.5427 5.55659 19.2604C3.19588 15.665 2.94622 11.4497 4.40511 9.20782C5.43771 7.61816 7.06983 6.68407 8.60345 6.68407C10.1659 6.68407 11.1476 7.54174 12.4383 7.54174C13.6917 7.54174 14.4543 6.68237 16.2613 6.68237C17.6268 6.68237 19.0704 7.42625 20.103 8.71021C16.7267 10.5614 17.2753 15.383 20.6856 16.6738ZM14.8891 5.24726C15.5463 4.40317 16.0456 3.21263 15.8639 2C14.7923 2.07303 13.5389 2.75747 12.8069 3.64401C12.1428 4.45243 11.5926 5.65147 11.8065 6.81144C12.9767 6.84881 14.1876 6.15078 14.8891 5.24726Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/icons/GoogleIcon.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { FC, SVGProps } from "react";
+
+export const GoogleIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+      <path d="M1 1h22v22H1z" fill="none" />
+    </svg>
+  );
+};