@ubie/vitals-ui-consumer 0.0.1

package/src/components/Box/Box.spec.tsx

@@ -0,0 +1,188 @@
+import { render, screen } from "@testing-library/react";
+import { Box } from "./Box";
+
+describe("<Box>", () => {
+  it("has all the margins through m prop", () => {
+    render(
+      <Box m="xxs" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-right: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-left: var(--size-spacing-xxs)");
+  });
+
+  it("has a horizontal margins through mx prop", () => {
+    render(
+      <Box mx="xxs" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: 0");
+    expect(div).toHaveStyle("--margin-right: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-bottom: 0");
+    expect(div).toHaveStyle("--margin-left: var(--size-spacing-xxs)");
+  });
+
+  it("has a vertical margins of through my prop", () => {
+    render(
+      <Box my="xxs" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-right: 0");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-left: 0");
+  });
+
+  it("has all margins through individual margin props", () => {
+    render(
+      <Box mt="xxs" mr="xs" mb="sm" ml="md" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-right: var(--size-spacing-xs)");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-sm)");
+    expect(div).toHaveStyle("--margin-left: var(--size-spacing-md)");
+  });
+
+  it("gives priority to individual margin props", () => {
+    render(
+      <Box m="xxs" mx="xs" my="xs" mt="sm" mr="md" mb="lg" ml="xl" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-sm)");
+    expect(div).toHaveStyle("--margin-right: var(--size-spacing-md)");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-lg)");
+    expect(div).toHaveStyle("--margin-left: var(--size-spacing-xl)");
+  });
+
+  it("has all the paddings through p prop", () => {
+    render(
+      <Box p="xxs" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--padding-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-right: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-bottom: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-left: var(--size-spacing-xxs)");
+  });
+
+  it("has a horizontal paddings through px prop", () => {
+    render(
+      <Box px="xxs" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--padding-top: 0");
+    expect(div).toHaveStyle("--padding-right: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-bottom: 0");
+    expect(div).toHaveStyle("--padding-left: var(--size-spacing-xxs)");
+  });
+
+  it("has a vertical paddings of through px prop", () => {
+    render(
+      <Box py="xxs" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--padding-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-right: 0");
+    expect(div).toHaveStyle("--padding-bottom: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-left: 0");
+  });
+
+  it("has all paddings through individual padding props", () => {
+    render(
+      <Box pt="xxs" pr="xs" pb="sm" pl="md" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--padding-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--padding-right: var(--size-spacing-xs)");
+    expect(div).toHaveStyle("--padding-bottom: var(--size-spacing-sm)");
+    expect(div).toHaveStyle("--padding-left: var(--size-spacing-md)");
+  });
+
+  it("gives priority to individual padding props", () => {
+    render(
+      <Box p="xxs" px="xs" py="xs" pt="sm" pr="md" pb="lg" pl="xl" data-testid="box">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--padding-top: var(--size-spacing-sm)");
+    expect(div).toHaveStyle("--padding-right: var(--size-spacing-md)");
+    expect(div).toHaveStyle("--padding-bottom: var(--size-spacing-lg)");
+    expect(div).toHaveStyle("--padding-left: var(--size-spacing-xl)");
+  });
+
+  it("receives width", () => {
+    render(
+      <Box width="100px" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--width: 100px");
+  });
+
+  it("converted to 100% if full is received in width prop", () => {
+    render(
+      <Box width="full" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--width: 100%");
+  });
+
+  it("receives max-width", () => {
+    render(
+      <Box maxWidth="100px" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--max-width: 100px");
+  });
+
+  it("receives min-width", () => {
+    render(
+      <Box minWidth="100px" data-testid="flex-item">
+        Test
+      </Box>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--min-width: 100px");
+  });
+});

package/src/components/Box/Box.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import clsx from "clsx";
+import styles from "./Box.module.css";
+import {
+  backgroundColorVariable,
+  borderVariables,
+  colorVariable,
+  cssFontSizeToken,
+  cssLeadingToken,
+  marginVariables,
+  paddingVariables,
+  radiusVariables,
+  widthVariables,
+} from "../../utils/style";
+import { HTMLTagname } from "../../utils/types";
+import type { CustomDataAttributeProps } from "../../types/attributes";
+import type {
+  BackgroundColorVariant,
+  BodyFontSize,
+  BodyLeading,
+  BorderVariant,
+  MarginProps,
+  PaddingProps,
+  RadiusProp,
+  TextColorVariant,
+  TextType,
+  WidthProps,
+} from "../../types/style";
+import type { CSSProperties, FC, ReactNode } from "react";
+
+type Width = WidthProps["width"];
+
+type BaseProps = {
+  /**
+   * Box内に表示するコンテンツやコンポーネント
+   */
+  children?: ReactNode;
+  /**
+   * レンダリングされるHTML要素
+   * @default div
+   */
+  as?: HTMLTagname;
+  /**
+   * 背景色
+   */
+  backgroundColor?: BackgroundColorVariant;
+  /**
+   * ボーダーの種類
+   */
+  border?: BorderVariant;
+  /**
+   * 幅を指定。fullは後方互換のため残している
+   * @default 'auto'
+   */
+  width?: "full" | Width;
+  /**
+   * 内包するテキストをボールドとするかどうか。指定しない場合は親要素のスタイルを継承、trueでボールド、falseとするとnormal
+   */
+  textBold?: boolean;
+  /**
+   * 文字色の抽象値
+   */
+  textColor?: TextColorVariant;
+  /**
+   * テキストの配置。指定しない場合、親要素の配置を継承
+   */
+  textAlign?: "left" | "center" | "right";
+  /**
+   * 領域が狭い場合でも、テキストを折り返えさない
+   */
+  textNoWrap?: boolean;
+  /**
+   * inline-blockとして扱う
+   */
+  inline?: boolean;
+} & PaddingProps &
+  MarginProps &
+  RadiusProp &
+  Omit<WidthProps, "width"> &
+  CustomDataAttributeProps;
+
+type PropsWithoutText = BaseProps & {
+  /**
+   * 配下に含むテキストの種類
+   */
+  textType?: undefined;
+  /**
+   * 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
+   */
+  textSize?: never;
+  /**
+   * 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
+   */
+  textLeading?: never;
+};
+
+type PropsWithTextBody = BaseProps & {
+  /**
+   * 配下に含むテキストの種類
+   */
+  textType: Extract<TextType, "body">;
+  /**
+   * 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
+   */
+  textSize?: BodyFontSize;
+  /**
+   * 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
+   */
+  textLeading?: BodyLeading;
+};
+
+/**
+ * If type is not specified, an empty object is returned because it is unknown how it is to be styled, i.e. it is not styled.
+ * If type is specified but size or leading is not, specify default values (md or default.)
+ */
+export const textStyleVariables = ({
+  type,
+  size: _size,
+  leading: _leading,
+}:
+  | {
+      type: undefined;
+      size: never;
+      leading: never;
+    }
+  | {
+      type: Extract<TextType, "body">;
+      size: BodyFontSize | undefined;
+      leading: BodyLeading | undefined;
+    }): CSSProperties => {
+  if (type == null) return {};
+
+  const size = _size == null ? "md" : _size;
+  const leading = _leading == null ? "default" : _leading;
+
+  switch (type) {
+    case "body":
+      return {
+        "--text-size": size ? cssFontSizeToken({ type, size }) : "inherit",
+        "--text-leading": leading
+          ? cssLeadingToken({ type, size: size || "md", leading })
+          : "inherit",
+      } as CSSProperties;
+    default:
+      // eslint-disable-next-line no-case-declarations
+      const _: never = type;
+  }
+
+  return {};
+};
+
+const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const Box: FC<PropsWithoutText | PropsWithTextBody> = ({
+  as: BoxComponent = "div",
+  children,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  radius,
+  backgroundColor,
+  border,
+  width: _width,
+  minWidth,
+  maxWidth,
+  inline = false,
+  textType,
+  textSize,
+  textLeading,
+  textColor,
+  textBold,
+  textAlign,
+  textNoWrap,
+  ...props
+}) => {
+  let _textVariables: CSSProperties = {};
+
+  if (textType === "body") {
+    _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading });
+  }
+
+  const width = _width === "full" ? "100%" : _width;
+
+  return (
+    <BoxComponent
+      className={clsx([
+        styles.box,
+        width && styles.widthFull,
+        inline && styles.inline,
+        textBold && styles.textBold,
+        textBold === false && styles.textNormal,
+        textAlign && styles[`text${capitalize(textAlign)}`],
+        textNoWrap && styles.textNoWrap,
+      ])}
+      style={{
+        ...paddingVariables({
+          p,
+          px,
+          py,
+          pt,
+          pr,
+          pb,
+          pl,
+        }),
+        ...marginVariables({
+          m,
+          mx,
+          my,
+          mt,
+          mr,
+          mb,
+          ml,
+        }),
+        ...radiusVariables(radius),
+        ..._textVariables,
+        ...colorVariable(textColor),
+        ...borderVariables(border),
+        ...backgroundColorVariable(backgroundColor),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
+      }}
+      {...props}
+    >
+      {children}
+    </BoxComponent>
+  );
+};

package/src/components/Button/Button.module.css

@@ -0,0 +1,261 @@
+.button {
+  --border-width: 1px;
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: var(--min-width);
+  min-height: var(--height);
+  padding: var(--padding-y) var(--padding-x);
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
+  font-size: var(--font-size);
+  font-weight: bold;
+  hyphens: auto;
+  line-height: var(--line-height);
+  color: var(--text);
+  text-align: center;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  white-space: var(--white-space, "normal");
+  appearance: none;
+  cursor: pointer;
+  background-color: var(--bg);
+  border-color: var(--border-color);
+  border-style: solid;
+  border-width: var(--border-width);
+  border-radius: var(--height);
+  transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.button:focus-visible {
+  outline: solid var(--focus-ring, var(--color-ubie-blue-500)) 2px;
+}
+
+.button.loading {
+  cursor: wait;
+}
+
+@media (hover: hover) {
+  .button:hover:not(.loading) {
+    color: var(--text-hover);
+    cursor: pointer;
+    background-color: var(--bg-hover);
+    border-color: var(--border-color-hover);
+  }
+}
+
+.label {
+  display: inline-flex;
+  grid-column: 2;
+  align-items: center;
+  justify-content: center;
+}
+
+.disabled {
+  padding: calc(var(--padding-y) + var(--border-width)) calc(var(--padding-x) + var(--border-width));
+  color: var(--text-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: var(--bg-disabled);
+  border-color: var(--border-color-disabled);
+  border-width: 0;
+}
+
+.loadingLabel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.children.loading {
+  opacity: 0;
+}
+
+/* Variant */
+
+.primary {
+  --text: var(--color-ubie-white);
+  --text-hover: var(--color-ubie-white);
+  --text-disabled: var(--color-placeholder);
+  --bg: var(--color-primary);
+  --bg-hover: var(--color-ubie-blue-800);
+  --bg-disabled: var(--color-outline-variant);
+  --border-color: var(--color-primary);
+  --border-color-hover: var(--color-ubie-blue-800);
+  --border-color-disabled: var(--color-outline-variant);
+  --focus-ring: var(--color-ubie-pink-500);
+}
+
+.secondary {
+  --text: var(--color-on-surface);
+  --text-hover: var(--color-on-surface);
+  --text-disabled: var(--color-placeholder);
+  --bg: var(--color-surface-container);
+  --bg-hover: var(--color-outline-variant);
+  --bg-disabled: var(--color-outline-variant);
+  --border-color: var(--color-outline);
+  --border-color-hover: var(--color-outline);
+  --border-color-disabled: var(--color-outline-variant);
+}
+
+.alert {
+  --text: var(--color-ubie-white);
+  --text-hover: var(--color-ubie-white);
+  --text-disabled: var(--color-placeholder);
+  --bg: var(--color-error);
+  --bg-hover: var(--color-ubie-red-800);
+  --bg-disabled: var(--color-outline-variant);
+  --border-color: var(--color-error);
+  --border-color-hover: var(--color-ubie-red-800);
+  --border-color-disabled: var(--color-outline-variant);
+}
+
+.text {
+  --text: var(--color-ubie-blue-600);
+  --text-hover: var(--color-ubie-blue-700);
+  --text-disabled: var(--color-placeholder);
+  --bg: transparent;
+  --bg-hover: var(--color-ubie-blue-100);
+  --bg-disabled: transparent;
+  --border-color: transparent;
+  --border-color-hover: var(--color-ubie-blue-100);
+  --border-color-disabled: var(--color-outline-variant);
+}
+
+.textAlert {
+  --text: var(--color-ubie-red-800);
+  --text-hover: var(--color-ubie-red-700);
+  --text-disabled: var(--color-placeholder);
+  --bg: transparent;
+  --bg-hover: var(--color-error-container);
+  --bg-disabled: transparent;
+  --border-color: transparent;
+  --border-color-hover: var(--color-error-container);
+  --border-color-disabled: var(--color-outline-variant);
+}
+
+.authGoogle {
+  --text: var(--color-on-surface);
+  --text-hover: var(--color-on-surface);
+  --text-disabled: var(--color-on-surface);
+  --bg: #fff;
+  --bg-hover: #fff;
+  --bg-disabled: #e2e2e2;
+  --border-color: #9ca0a8;
+  --border-color-hover: #9ca0a8;
+  --border-color-disabled: #9ca0a8;
+}
+
+.authLINE {
+  --text: #fff;
+  --text-hover: #fff;
+  --text-disabled: #fff;
+  --bg: #06c755;
+  --bg-hover: #06c755;
+  --bg-disabled: #06c755;
+  --border-color: #06c755;
+  --border-color-hover: #06c755;
+  --border-color-disabled: #06c755;
+}
+
+.authApple {
+  --text: #fff;
+  --text-hover: #fff;
+  --text-disabled: #fff;
+  --bg: #000;
+  --bg-hover: #000;
+  --bg-disabled: #000;
+  --border-color: #000;
+  --border-color-hover: #000;
+  --border-color-disabled: #000;
+}
+
+/* Size */
+
+.large {
+  --min-width: 112px;
+  --height: 56px;
+  --padding-x: 22px;
+  --padding-y: 8px;
+  --font-size: var(--text-button-lg-size);
+  --line-height: var(--text-button-lg-line);
+  --icon-size: 24px;
+  --icon-gap: 8px;
+}
+
+.medium {
+  --min-width: 80px;
+  --height: 36px;
+  --padding-x: 10px;
+  --padding-y: 8px;
+  --font-size: var(--text-button-md-size);
+  --line-height: var(--text-button-md-line);
+  --icon-size: 20px;
+  --icon-gap: 6px;
+}
+
+.small {
+  --min-width: 60px;
+  --height: 24px;
+  --padding-x: 6px;
+  --padding-y: 3px;
+  --font-size: var(--text-button-sm-size);
+  --line-height: var(--text-button-sm-line);
+  --icon-size: 16px;
+  --icon-gap: 4px;
+}
+
+/* Block */
+
+.block {
+  width: 100%;
+}
+
+/* Icon */
+
+.icon {
+  display: flex;
+  margin-right: var(--icon-gap);
+  vertical-align: middle;
+}
+
+.icon.loading {
+  opacity: 0;
+}
+
+.icon > * {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+.fixedIcon {
+  display: flex;
+  margin: 0 10%;
+  vertical-align: middle;
+}
+
+.fixedIcon > * {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+.suffixIcon {
+  display: flex;
+  margin-left: var(--icon-gap);
+  vertical-align: middle;
+}
+
+.suffixIcon.loading {
+  opacity: 0;
+}
+
+.suffixIcon > * {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}