@ubie/vitals-ui-consumer 0.0.1

package/src/types/style.ts

@@ -0,0 +1,254 @@
+export type FontSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+
+export type TextType = "body" | "heading" | "button" | "tag";
+
+export type Leading = "default" | "narrow" | "wide";
+
+export type Hue = "black" | "blue" | "pink" | "orange" | "purple" | "green" | "red";
+
+export type TextColorVariant =
+  | "main"
+  | "sub"
+  | "link"
+  | "linkSub"
+  | "disabled"
+  | "white"
+  | Hue
+  | `${Hue}Darken`;
+
+export type TextColorTokenKey = string;
+
+export type BodyFontSize = Extract<FontSize, "xs" | "sm" | "md" | "lg">;
+
+export type BodyLeading = Extract<Leading, "default" | "narrow" | "wide">;
+
+export type HeadingFontSize = Extract<FontSize, "xxs" | "xs" | "sm" | "md" | "lg" | "xl">;
+
+export type HeadingLeading = Extract<Leading, "default" | "wide">;
+
+export type ButtonFontSize = Extract<FontSize, "sm" | "md" | "lg">;
+
+export type ButtonLeading = Extract<Leading, "default">;
+
+export type TagFontSize = Extract<FontSize, "md" | "lg">;
+
+export type TagLeading = Extract<Leading, "default">;
+
+export type Spacing = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+
+export type PaddingProps = {
+  /**
+   * 四方のパディングを一括で設定。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  p?: Spacing;
+  /**
+   * 水平方向のパディングを一括で設定。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  px?: Spacing;
+  /**
+   * 垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  py?: Spacing;
+  /**
+   * 上方向のパディング。Spacing Tokenのキーを指定
+   */
+  pt?: Spacing;
+  /**
+   * 右方向のパディング。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  pr?: Spacing;
+  /**
+   * 下方向のパディング。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  pb?: Spacing;
+  /**
+   * 左方向のパディング。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  pl?: Spacing;
+};
+
+export type MarginProps = {
+  /**
+   * 四方のマージンを一括で設定。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  m?: Spacing;
+  /**
+   * 水平方向のマージンを一括で設定。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  mx?: Spacing;
+  /**
+   * 垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  my?: Spacing;
+  /**
+   * 上方向のマージン。Spacing Tokenのキーを指定
+   */
+  mt?: Spacing;
+  /**
+   * 右方向のマージン。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  mr?: Spacing;
+  /**
+   * 下方向のマージン。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  mb?: Spacing;
+  /**
+   * 左方向のマージン。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+   */
+  ml?: Spacing;
+};
+
+export type MarginYProps = Pick<MarginProps, "my" | "mt" | "mb">;
+
+export type FlexDirection = "row" | "column";
+
+export type AlignItems = "normal" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
+
+export type JustifyContent =
+  | "normal"
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+export type Radius = "xs" | "sm" | "md" | "lg" | "full";
+
+export type RadiusProp = {
+  /**
+   * 角丸を指定。Radius Tokenのキーを指定
+   * xs=2px,sm=4px,md=8px,lg=12px
+   */
+  radius?: Radius;
+};
+
+export type BackgroundColorVariant =
+  | "white"
+  | Hue
+  | `${Hue}Darken`
+  | `${Hue}Inverse`
+  | `${Hue}InverseDarken`;
+
+export type BackgroundColorTokenKey = string;
+
+export type BorderColorTokenKey = string;
+
+export type BorderVariant = Hue | `${Hue}Darken` | `${Hue}Thick` | `${Hue}DarkenThick`;
+
+export type IconColorVariant = "white" | Hue;
+
+export type CSSVariable = `var(--${string})`;
+
+// ref: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
+export type CSSLength =
+  | `${string}cap`
+  | `${string}ch`
+  | `${string}em`
+  | `${string}ex`
+  | `${string}ic`
+  | `${string}lh`
+  | `${string}rcap`
+  | `${string}rem`
+  | `${string}rex`
+  | `${string}ric`
+  | `${string}rlh`
+  | `${string}vh`
+  | `${string}vmax`
+  | `${string}vmin`
+  | `${string}vw`
+  | `${string}vb`
+  | `${string}vi`
+  | `${string}cqw`
+  | `${string}cqh`
+  | `${string}cqi`
+  | `${string}cqb`
+  | `${string}cqmin`
+  | `${string}cqmax`
+  | `${string}px`
+  | `${string}cm`
+  | `${string}mm`
+  | `${string}q`
+  | `${string}in`
+  | `${string}pc`
+  | `${string}pt`;
+
+export type CSSPercentage = `${string}%`;
+
+export type CSSCalc = `calc(${string})`;
+
+export type CSSLengthPercentage = CSSLength | CSSPercentage | CSSCalc;
+
+export type CSSWidth =
+  | "auto"
+  | CSSLengthPercentage
+  | "min-content"
+  | "max-content"
+  | "fit-content"
+  | `fit-content(${CSSLengthPercentage})`
+  | CSSVariable;
+
+export type CSSMaxWidth =
+  | "none"
+  | CSSLengthPercentage
+  | "min-content"
+  | "max-content"
+  | "fit-content"
+  | `fit-content(${CSSLengthPercentage})`
+  | CSSVariable;
+
+export type CSSMinWidth = CSSWidth;
+
+export type WidthProps = {
+  /**
+   * 幅を指定
+   * @default auto
+   */
+  width?: CSSWidth;
+  /**
+   * 最小幅
+   * @default auto
+   */
+  minWidth?: CSSMinWidth;
+  /**
+   * 最大幅
+   * @default none
+   */
+  maxWidth?: CSSMaxWidth;
+};
+
+export type CSSHeight = CSSWidth;
+
+export type CSSMaxHeight = CSSMaxWidth;
+
+export type CSSMinHeight = CSSHeight;
+
+export type HeightProps = {
+  /**
+   * 高さを指定
+   * @default auto
+   */
+  height?: CSSHeight;
+  /**
+   * 最小高さ
+   * @default auto
+   */
+  minHeight?: CSSMinHeight;
+  /**
+   * 最大高さ
+   * @default none
+   */
+  maxHeight?: CSSMaxHeight;
+};

package/src/utils/component.ts

@@ -0,0 +1,8 @@
+import { forwardRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FixedForwardRef = <T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => React.ReactNode;
+
+export const fixedForwardRef: FixedForwardRef = forwardRef as FixedForwardRef;

package/src/utils/style.spec.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from "vite-plus/test";
+import { opacityToClassName, colorVariable, widthVariables } from "./style";
+
+describe("opacityToClassName", () => {
+  it("should return normalOverlay when opacity is normal", () => {
+    expect(opacityToClassName("normal")).toBe("normalOverlay");
+  });
+
+  it("should return darkerOverlay when opacity is darker", () => {
+    expect(opacityToClassName("darker")).toBe("darkerOverlay");
+  });
+});
+
+describe("colorVariable", () => {
+  // 名前も正確性を保つ形に修正
+  it("should return main text color variable", () => {
+    expect(colorVariable("main") as Record<string, string>).toStrictEqual({
+      "--text-color": "var(--color-on-surface)",
+    });
+  });
+  it("should return sub text color variable", () => {
+    expect(colorVariable("sub") as Record<string, string>).toStrictEqual({
+      "--text-color": "var(--color-on-surface-variant)",
+    });
+  });
+  it("should return blue color variable", () => {
+    expect(colorVariable("blue") as Record<string, string>).toStrictEqual({
+      "--text-color": "var(--color-ubie-blue-800)",
+    });
+  });
+  it("should return accent pink darken color variable", () => {
+    expect(colorVariable("pinkDarken") as Record<string, string>).toStrictEqual({
+      "--text-color": "var(--color-ubie-pink-900)",
+    });
+  });
+  it("should return link sub text color variable", () => {
+    expect(colorVariable("linkSub") as Record<string, string>).toStrictEqual({
+      "--text-color": "var(--color-on-surface-variant)",
+    });
+  });
+});
+
+describe("widthVariables", () => {
+  it("should return default width values", () => {
+    const variables = widthVariables({});
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(variables["--width"]).toStrictEqual("auto");
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(variables["--max-width"]).toStrictEqual("none");
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(variables["--min-width"]).toStrictEqual("auto");
+  });
+});

package/src/utils/style.ts

@@ -0,0 +1,387 @@
+import {
+  Spacing,
+  Radius,
+  HeadingFontSize,
+  TextType,
+  BodyFontSize,
+  BodyLeading,
+  ButtonFontSize,
+  ButtonLeading,
+  HeadingLeading,
+  TagFontSize,
+  TagLeading,
+  CSSMinWidth,
+  CSSMaxWidth,
+  CSSWidth,
+  TextColorVariant,
+  TextColorTokenKey,
+  BackgroundColorVariant,
+  BackgroundColorTokenKey,
+  BorderVariant,
+  BorderColorTokenKey,
+  IconColorVariant,
+} from "../types/style";
+import type { CSSProperties } from "react";
+
+export type Opacity = "normal" | "darker";
+export const opacityToClassName = (opacity: Opacity) => {
+  switch (opacity) {
+    case "normal":
+      return "normalOverlay";
+    case "darker":
+      return "darkerOverlay";
+  }
+};
+
+export const createSpacingVariableFromKey = (key: Spacing) => {
+  return `var(--size-spacing-${key})`;
+};
+
+const createRadiusVariableFromKey = (key: Radius) => {
+  return `var(--radius-${key})`;
+};
+
+export const cssFontSizeToken = ({
+  type,
+  size,
+}:
+  | {
+      type: Extract<TextType, "body">;
+      size: BodyFontSize;
+    }
+  | {
+      type: Extract<TextType, "heading">;
+      size: HeadingFontSize;
+    }
+  | {
+      type: Extract<TextType, "button">;
+      size: ButtonFontSize;
+    }
+  | {
+      type: Extract<TextType, "tag">;
+      size: TagFontSize;
+    }) => {
+  switch (type) {
+    case "body":
+      return `var(--text-${type}-${size}-size)`;
+    case "heading":
+      return `var(--text-${type}-${size}-size)`;
+    case "button":
+      return `var(--text-${type}-${size}-size)`;
+    case "tag":
+      return `var(--text-${type}-${size}-size)`;
+    default:
+      // eslint-disable-next-line no-case-declarations
+      const _: never = type;
+  }
+
+  return "";
+};
+
+export const cssLeadingToken = ({
+  type,
+  size,
+  leading,
+}:
+  | {
+      type: Extract<TextType, "body">;
+      size: BodyFontSize;
+      leading: BodyLeading;
+    }
+  | {
+      type: Extract<TextType, "heading">;
+      size: HeadingFontSize;
+      leading: HeadingLeading;
+    }
+  | {
+      type: Extract<TextType, "button">;
+      size: ButtonFontSize;
+      leading: ButtonLeading;
+    }
+  | {
+      type: Extract<TextType, "tag">;
+      size: TagFontSize;
+      leading: TagLeading;
+    }) => {
+  switch (type) {
+    case "body":
+      return leading === "default"
+        ? `var(--text-${type}-${size}-line)`
+        : `var(--text-${type}-${size}-${leading}-line)`;
+    case "heading":
+      return `var(--text-${type}-${size}-line)`;
+    case "button":
+      return `var(--text-${type}-${size}-line)`;
+    case "tag":
+      return `var(--text-${type}-${size}-line)`;
+    default:
+      // eslint-disable-next-line no-case-declarations
+      const _: never = type;
+  }
+
+  return "";
+};
+
+const textColorTokenKeyMap = {
+  main: "on-surface",
+  sub: "on-surface-variant",
+  link: "primary",
+  linkSub: "on-surface-variant",
+  disabled: "placeholder",
+  white: "on-primary",
+  black: "on-surface-variant",
+  blue: "ubie-blue-800",
+  pink: "ubie-pink-600",
+  orange: "ubie-yellow-800",
+  purple: "ubie-purple-800",
+  green: "ubie-green-800",
+  red: "ubie-red-800",
+  blackDarken: "on-surface",
+  blueDarken: "primary",
+  pinkDarken: "ubie-pink-900",
+  orangeDarken: "ubie-yellow-900",
+  purpleDarken: "ubie-purple-900",
+  greenDarken: "ubie-green-900",
+  redDarken: "ubie-red-900",
+} as const satisfies Record<TextColorVariant, TextColorTokenKey>;
+
+const textColorVariantToTokenKey = (color: TextColorVariant) => {
+  return textColorTokenKeyMap[color];
+};
+
+/**
+ * Returns css variants based on the foreground color key
+ */
+export const colorVariable = (color: TextColorVariant | undefined): CSSProperties => {
+  if (color == null) {
+    return {
+      "--text-color": "inherit",
+    } as CSSProperties;
+  }
+
+  const tokenKey = textColorVariantToTokenKey(color);
+  return {
+    "--text-color": `var(--color-${tokenKey})`,
+  } as CSSProperties;
+};
+
+const backgroundColorVariantToTokenKey = (color: BackgroundColorVariant) => {
+  const tokenKeyMap = {
+    white: "surface-container",
+    black: "ubie-gray-100",
+    blue: "ubie-blue-100",
+    pink: "ubie-pink-100",
+    orange: "warning-container",
+    purple: "accent-purple-container",
+    green: "success-container",
+    red: "error-container",
+    blackDarken: "outline-variant",
+    blueDarken: "on-primary-icon",
+    pinkDarken: "ubie-pink-200",
+    orangeDarken: "ubie-yellow-200",
+    purpleDarken: "ubie-purple-200",
+    greenDarken: "ubie-green-200",
+    redDarken: "on-error-icon",
+    blackInverse: "ubie-gray-600",
+    blueInverse: "primary",
+    pinkInverse: "ubie-pink-600",
+    orangeInverse: "ubie-yellow-600",
+    purpleInverse: "accent-purple",
+    greenInverse: "success",
+    redInverse: "error",
+    blackInverseDarken: "ubie-gray-700",
+    blueInverseDarken: "ubie-blue-800",
+    pinkInverseDarken: "ubie-pink-800",
+    orangeInverseDarken: "on-warning-container",
+    purpleInverseDarken: "on-accent-purple-container",
+    greenInverseDarken: "on-success-container",
+    redInverseDarken: "ubie-red-700",
+  } as const satisfies Record<BackgroundColorVariant, BackgroundColorTokenKey>;
+
+  return tokenKeyMap[color];
+};
+
+export const backgroundColorVariable = (
+  color: BackgroundColorVariant | undefined,
+): CSSProperties => {
+  if (color == null) {
+    return {
+      "--background-color": "transparent",
+    } as CSSProperties;
+  }
+
+  const tokenKey = backgroundColorVariantToTokenKey(color);
+  return {
+    "--background-color": `var(--color-${tokenKey})`,
+  } as CSSProperties;
+};
+
+export const iconColorVariable = (color?: IconColorVariant): CSSProperties => {
+  if (color == null) {
+    return {
+      "--icon-color": "inherit",
+    } as CSSProperties;
+  }
+
+  if (color === "white") {
+    return {
+      "--icon-color": "var(--color-ubie-white)",
+    } as CSSProperties;
+  }
+
+  // FIXME icon用のトークンが定義されたら差し替え
+  return {
+    "--icon-color": `var(--color-ubie-${color}-600)`,
+  } as CSSProperties;
+};
+
+/**
+ * Accepts optional arguments to unify default values.
+ */
+export const paddingVariables = ({
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+}: {
+  p?: Spacing;
+  px?: Spacing;
+  py?: Spacing;
+  pt?: Spacing;
+  pr?: Spacing;
+  pb?: Spacing;
+  pl?: Spacing;
+}) => {
+  const topKey = pt ?? py ?? p;
+  const rightKey = pr ?? px ?? p;
+  const bottomKey = pb ?? py ?? p;
+  const leftKey = pl ?? px ?? p;
+
+  return {
+    "--padding-top": topKey ? createSpacingVariableFromKey(topKey) : "0",
+    "--padding-right": rightKey ? createSpacingVariableFromKey(rightKey) : "0",
+    "--padding-bottom": bottomKey ? createSpacingVariableFromKey(bottomKey) : "0",
+    "--padding-left": leftKey ? createSpacingVariableFromKey(leftKey) : "0",
+  } as CSSProperties;
+};
+
+/**
+ * Accepts optional arguments to unify default values.
+ */
+export const marginVariables = ({
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+}: {
+  m?: Spacing;
+  mx?: Spacing;
+  my?: Spacing;
+  mt?: Spacing;
+  mr?: Spacing;
+  mb?: Spacing;
+  ml?: Spacing;
+}) => {
+  const topKey = mt ?? my ?? m;
+  const rightKey = mr ?? mx ?? m;
+  const bottomKey = mb ?? my ?? m;
+  const leftKey = ml ?? mx ?? m;
+
+  return {
+    "--margin-top": topKey ? createSpacingVariableFromKey(topKey) : "0",
+    "--margin-right": rightKey ? createSpacingVariableFromKey(rightKey) : "0",
+    "--margin-bottom": bottomKey ? createSpacingVariableFromKey(bottomKey) : "0",
+    "--margin-left": leftKey ? createSpacingVariableFromKey(leftKey) : "0",
+  } as CSSProperties;
+};
+
+/**
+ * Accepts optional arguments to unify default values.
+ */
+export const radiusVariables = (radius?: Radius) => {
+  return {
+    "--radius": radius ? createRadiusVariableFromKey(radius) : "0",
+  } as CSSProperties;
+};
+
+/**
+ * Accepts optional arguments to unify default values.
+ */
+export const gapVariables = (spacing?: Spacing) => {
+  return {
+    "--gap": spacing ? `var(--size-spacing-${spacing})` : "0",
+  } as CSSProperties;
+};
+
+export const widthVariables = ({
+  width = "auto",
+  minWidth = "auto",
+  maxWidth = "none",
+}: {
+  width?: CSSWidth;
+  minWidth?: CSSMinWidth;
+  maxWidth?: CSSMaxWidth;
+}) => {
+  return {
+    "--width": width,
+    "--min-width": minWidth,
+    "--max-width": maxWidth,
+  } as CSSProperties;
+};
+
+const borderVariantToColorTokenKey = (border: BorderVariant) => {
+  const tokenKeyMap = {
+    black: "outline",
+    blue: "ubie-blue-400",
+    pink: "ubie-pink-400",
+    orange: "ubie-yellow-400",
+    purple: "ubie-purple-400",
+    green: "ubie-green-400",
+    red: "ubie-red-400",
+    blackDarken: "placeholder",
+    blueDarken: "ubie-blue-500",
+    pinkDarken: "ubie-pink-500",
+    orangeDarken: "warning",
+    purpleDarken: "accent-purple",
+    greenDarken: "success",
+    redDarken: "error",
+    blackThick: "outline",
+    blueThick: "ubie-blue-400",
+    pinkThick: "ubie-pink-400",
+    orangeThick: "ubie-yellow-400",
+    purpleThick: "ubie-purple-400",
+    greenThick: "ubie-green-400",
+    redThick: "ubie-red-400",
+    blackDarkenThick: "placeholder",
+    blueDarkenThick: "ubie-blue-500",
+    pinkDarkenThick: "ubie-pink-500",
+    orangeDarkenThick: "warning",
+    purpleDarkenThick: "accent-purple",
+    greenDarkenThick: "success",
+    redDarkenThick: "error",
+  } as const satisfies Record<BorderVariant, BorderColorTokenKey>;
+
+  return tokenKeyMap[border];
+};
+
+export const borderVariables = (border?: BorderVariant) => {
+  if (border == null) {
+    return {
+      "--border-width": "0px",
+    };
+  }
+
+  const isThick = border.endsWith("Thick");
+  const colorKey = borderVariantToColorTokenKey(border);
+
+  return {
+    "--border-width": isThick ? "2px" : "1px",
+    "--border-color": `var(--color-${colorKey})`,
+  };
+};

package/src/utils/types.ts

@@ -0,0 +1,8 @@
+export type AllOrNone<T> = T | Partial<Record<keyof T, undefined>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
+  ? Omit<T, TOmitted>
+  : never;
+
+export type HTMLTagname = keyof HTMLElementTagNameMap;