@ubie/vitals-ui-consumer 0.0.1

package/src/components/FlexItem/FlexItem.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { clsx } from "clsx";
+import { CSSProperties, forwardRef, type HTMLAttributes, type PropsWithChildren } from "react";
+import styles from "./FlexItem.module.css";
+import { CSSWidth, MarginProps, PaddingProps, WidthProps } from "../../types/style";
+import { marginVariables, paddingVariables } from "../../utils/style";
+
+type FlexProperty = {
+  grow?: number;
+  shrink?: number;
+  basis?: CSSWidth;
+};
+
+type AllowedDivAttributes = Omit<HTMLAttributes<HTMLDivElement>, "className">;
+
+type Props = {
+  /**
+   * flexの値を指定。 growなどを指定したい場合はオブジェクトで指定
+   * @default none
+   */
+  flex?: "none" | FlexProperty;
+} & Omit<WidthProps, "width"> &
+  MarginProps &
+  PaddingProps &
+  AllowedDivAttributes;
+
+/**
+ * FlexやStackの子として配置し、レイアウトを調整
+ */
+export const FlexItem = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
+  (
+    {
+      children,
+      flex = "none",
+      minWidth = "auto",
+      maxWidth = "none",
+      m,
+      mx,
+      my,
+      mt,
+      mr,
+      mb,
+      ml,
+      p,
+      px,
+      py,
+      pt,
+      pr,
+      pb,
+      pl,
+      ...rest
+    },
+    ref,
+  ) => {
+    const flexObj: { [key: string]: string } =
+      typeof flex === "object"
+        ? {
+            "--flex-grow": flex.grow != null ? flex.grow.toString() : "0",
+            "--flex-shrink": flex.shrink != null ? flex.shrink.toString() : "1",
+            "--flex-basis": flex.basis ?? "auto",
+          }
+        : {};
+
+    return (
+      <div
+        className={clsx(
+          styles.flexItem,
+          flex === "none" && styles.none,
+          typeof flex === "object" && styles.longhand,
+        )}
+        ref={ref}
+        style={
+          {
+            "--min-width": minWidth,
+            "--max-width": maxWidth,
+            ...flexObj,
+            ...paddingVariables({
+              p,
+              px,
+              py,
+              pt,
+              pr,
+              pb,
+              pl,
+            }),
+            ...marginVariables({
+              m,
+              mx,
+              my,
+              mt,
+              mr,
+              mb,
+              ml,
+            }),
+          } as CSSProperties
+        }
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+FlexItem.displayName = "FlexItem";

package/src/components/Heading/Heading.module.css

@@ -0,0 +1,131 @@
+.heading {
+  position: relative;
+  box-sizing: border-box;
+  font-weight: normal;
+  hyphens: auto;
+  color: var(--color-on-surface);
+  overflow-wrap: anywhere;
+
+  --medium-leading-border-width: 4px;
+  --large-leading-border-width: 5px;
+}
+
+.heading.bold {
+  font-weight: bold;
+}
+
+:where(.heading) {
+  margin: 0;
+}
+
+.heading.left {
+  text-align: left;
+}
+
+.heading.center {
+  text-align: center;
+}
+
+.heading.right {
+  text-align: right;
+}
+
+.heading.main {
+  color: var(--color-on-surface);
+}
+
+.heading > a {
+  color: var(--color-primary);
+}
+
+@media (hover: hover) {
+  .heading > a:hover {
+    color: var(--color-ubie-blue-700);
+  }
+}
+
+.heading > a:active {
+  text-decoration: none;
+}
+
+.heading.white {
+  color: var(--color-ubie-white);
+}
+
+.heading.white,
+.heading.white > a {
+  color: var(--color-ubie-white);
+}
+
+@media (hover: hover) {
+  .heading.white > a:hover {
+    text-decoration: none;
+  }
+}
+
+.heading.white > a:active {
+  position: relative;
+  top: 1px;
+  text-decoration: underline;
+}
+
+.heading.xxs {
+  font-size: var(--text-heading-xxs-size);
+  line-height: var(--text-heading-xxs-line);
+}
+
+.heading.xs {
+  font-size: var(--text-heading-xs-size);
+  line-height: var(--text-heading-xs-line);
+}
+
+.heading.sm {
+  font-size: var(--text-heading-sm-size);
+  line-height: var(--text-heading-sm-line);
+}
+
+.heading.md {
+  font-size: var(--text-heading-md-size);
+  line-height: var(--text-heading-md-line);
+}
+
+.heading.lg {
+  font-size: var(--text-heading-lg-size);
+  line-height: var(--text-heading-lg-line);
+}
+
+.heading.xl {
+  font-size: var(--text-heading-xl-size);
+  line-height: var(--text-heading-xl-line);
+}
+
+.heading.leadingBorder {
+  padding-left: calc(var(--size-spacing-sm) + var(--medium-leading-border-width));
+}
+
+.heading.leadingBorder::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: var(--medium-leading-border-width);
+  height: 100%;
+  vertical-align: top;
+  content: "";
+  background-color: var(--color-ubie-blue-600);
+  border-radius: 3px;
+}
+
+.heading.lg.leadingBorder,
+.heading.xl.leadingBorder {
+  padding-left: calc(var(--size-spacing-sm) + var(--large-leading-border-width));
+}
+
+.heading.lg.leadingBorder::before,
+.heading.xl.leadingBorder::before {
+  width: var(--large-leading-border-width);
+}
+
+.heading.noWrap {
+  white-space: nowrap;
+}

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,86 @@
+import { clsx } from "clsx";
+import styles from "./Heading.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+import { HeadingFontSize, TextColorVariant } from "../../types/style";
+import { HTMLTagname } from "../../utils/types";
+import type { FC, PropsWithChildren } from "react";
+
+type Props = {
+  /**
+   * テキストの配置。指定しない場合、親要素の配置を継承
+   */
+  textAlign?: "left" | "center" | "right";
+  /**
+   * サイズ。Typographyトークンの値を指定
+   * xs=16px, sm=18px, md=20px, lg=24px, xl=28px
+   * @default md
+   */
+  size?: HeadingFontSize;
+  /**
+   * 行の先頭にボーダーを表示
+   * @default false
+   */
+  leadingBorder?: boolean;
+  /**
+   * レンダリングされるHTML要素
+   * @default p
+   */
+  as?: HTMLTagname;
+  /**
+   * テキストのカラーバリエーション
+   * @default secondary
+   */
+  color?: Extract<TextColorVariant, "main" | "white">;
+  /**
+   * HTMLのID属性
+   */
+  id?: string;
+  /**
+   * HTMLのfor属性。label要素の場合に使用
+   */
+  htmlFor?: string;
+  /**
+   * 太字とするかどうか、falseの場合はnormal
+   * @default true
+   */
+  bold?: boolean;
+  /**
+   * 領域が狭い場合でも折り返えさない
+   */
+  noWrap?: boolean;
+} & CustomDataAttributeProps;
+
+const Heading: FC<PropsWithChildren<Props>> = ({
+  textAlign,
+  children,
+  size = "md",
+  color = "main",
+  leadingBorder,
+  as: HeadingComponent = "p",
+  id,
+  htmlFor,
+  bold = true,
+  noWrap = false,
+  ...otherProps
+}) => {
+  const className = clsx(
+    styles.heading,
+    textAlign ? styles[textAlign] : null,
+    styles[size],
+    // For leadingBorder, only the main text colour is supported.
+    leadingBorder ? styles.secondary : styles[color],
+    leadingBorder ? styles.leadingBorder : null,
+    bold && styles.bold,
+    noWrap && styles.noWrap,
+  );
+
+  return (
+    <HeadingComponent className={className} id={id} htmlFor={htmlFor} {...otherProps}>
+      {children}
+    </HeadingComponent>
+  );
+};
+
+Heading.displayName = "Heading";
+
+export { Heading };

package/src/components/HelperMessage/HelperMessage.module.css

@@ -0,0 +1,8 @@
+.message {
+  margin: 0;
+  font-size: var(--text-body-sm-size);
+  hyphens: auto;
+  line-height: var(--text-body-sm-line);
+  color: var(--color-on-surface-variant);
+  overflow-wrap: anywhere;
+}

package/src/components/HelperMessage/HelperMessage.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import styles from "./HelperMessage.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+import type { FC, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+} & CustomDataAttributeProps;
+
+export const HelperMessage: FC<Props> = ({ children, ...otherProps }) => (
+  <p className={styles.message} {...otherProps}>
+    {children}
+  </p>
+);

package/src/components/Icon/Icon.module.css

@@ -0,0 +1,6 @@
+.icon {
+  width: var(--size);
+  height: var(--size);
+  color: var(--icon-color);
+  vertical-align: bottom;
+}

package/src/components/Icon/Icon.spec.tsx

@@ -0,0 +1,24 @@
+import { composeStory } from "@storybook/react-vite";
+import { render, screen } from "@testing-library/react";
+import Meta, { WithCustomDataAttribute, WithId } from "./Icon.stories";
+
+const WithCustomDataAttributeStory = composeStory(WithCustomDataAttribute, Meta);
+const WithIdStory = composeStory(WithId, Meta);
+
+describe("Icon", () => {
+  test("Add custom data attributes", async () => {
+    render(<WithCustomDataAttributeStory />);
+
+    const iconElement = await screen.findByTestId("testid");
+
+    expect(iconElement).toBeInTheDocument();
+  });
+
+  test("Add id", async () => {
+    render(<WithIdStory />);
+
+    const iconElement = await screen.findByTestId("testid");
+
+    expect(iconElement).toHaveAttribute("id", "icon-id");
+  });
+});

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,100 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps } from "react";
+import { Icon, Flex, Box, Stack } from "../../index";
+
+export default {
+  component: Icon,
+} satisfies Meta<typeof Icon>;
+
+const defaultArgs: Partial<ComponentProps<typeof Icon>> = {
+  icon: "UbieIcon",
+};
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  render: (args) => <Icon {...args} />,
+  args: defaultArgs,
+};
+
+export const Size: Story = {
+  render: (args) => (
+    <>
+      <Flex alignItems="center" spacing="sm">
+        <Icon {...args} size="xs" />
+        <Icon {...args} size="sm" />
+        <Icon {...args} size="md" />
+        <Icon {...args} size="lg" />
+        <Icon {...args} size="xl" />
+        <Icon {...args} size="xxl" />
+        <Icon {...args} size="xxxl" />
+        <Icon {...args} size="xxxxl" />
+      </Flex>
+    </>
+  ),
+  args: defaultArgs,
+};
+
+export const SizeAlias: Story = {
+  render: (args) => (
+    <>
+      <Flex alignItems="center" spacing="sm">
+        <Icon {...args} size="2xl" />
+        <Icon {...args} size="3xl" />
+        <Icon {...args} size="4xl" />
+      </Flex>
+    </>
+  ),
+  args: defaultArgs,
+};
+
+export const Color: Story = {
+  render: (args) => (
+    <Flex alignItems="center" spacing="sm" wrap>
+      <Icon {...args} color="blue" />
+      <Icon {...args} color="pink" />
+      <Icon {...args} color="orange" />
+      <Icon {...args} color="purple" />
+      <Icon {...args} color="green" />
+      <Icon {...args} color="red" />
+      <Icon {...args} color="black" />
+      <Box pt="xxs" pr="xxs" pb="xxs" pl="xxs" backgroundColor="blackInverseDarken">
+        <Icon {...args} color="white" />
+      </Box>
+    </Flex>
+  ),
+  args: defaultArgs,
+};
+
+export const CaseOnlyIcon: Story = {
+  render: () => (
+    <Stack spacing="sm">
+      <p>
+        ラベルや付随する文章を伴わずにアイコン単独で使う場合、アイコンが保つ意味を<code>label</code>{" "}
+        propで付与します
+        <br />
+        例: アイコンボタンなど
+      </p>
+      <div>
+        <Icon icon="SetupIcon" label="設定" />
+      </div>
+    </Stack>
+  ),
+};
+
+export const WithCustomDataAttribute: Story = {
+  render: (args) => <Icon {...args} />,
+  args: {
+    ...defaultArgs,
+    "data-testid": "testid",
+  },
+};
+
+export const WithId: Story = {
+  render: (args) => <Icon {...args} />,
+  args: {
+    ...defaultArgs,
+    id: "icon-id",
+    "data-testid": "testid",
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,101 @@
+import * as Icons from "@ubie/vitals-icon";
+import styles from "./Icon.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { IconName } from "../../types/icon";
+import { IconColorVariant } from "../../types/style";
+import { iconColorVariable } from "../../utils/style";
+import type { CSSProperties, FC, SVGProps } from "react";
+
+type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "xxxxl";
+type IconSizeAlias = "2xl" | "3xl" | "4xl";
+type SizeProp = IconSize | IconSizeAlias;
+
+const toIconSizeEmValue = (size: IconSize): string => {
+  switch (size) {
+    case "xs":
+      return "1rem";
+    case "sm":
+      return "1.25rem";
+    case "md":
+      return "1.5rem";
+    case "lg":
+      return "1.75rem";
+    case "xl":
+      return "2rem";
+    case "xxl":
+      return "4rem";
+    case "xxxl":
+      return "5rem";
+    case "xxxxl":
+      return "6.5rem";
+    default:
+      const _: never = size;
+      // oxlint-disable-next-line restrict-template-expressions
+      throw new Error(`Unknown size: ${size}`);
+  }
+};
+
+const normalizeSize = (icon: IconSize | IconSizeAlias): IconSize => {
+  switch (icon) {
+    case "2xl":
+      return "xxl";
+    case "3xl":
+      return "xxxl";
+    case "4xl":
+      return "xxxxl";
+    default:
+      return icon;
+  }
+};
+
+type Props = {
+  /**
+   * アイコンの種類
+   */
+  icon: IconName;
+  /**
+   * 色。指定しない場合はinheritとなり、親要素のcolorプロパティを継承します
+   */
+  color?: IconColorVariant;
+  /**
+   * サイズ
+   * xs=16px, sm=20px, md=24px, lg=28px, xl=32px, xxl=64px, xxxl=80px, xxxxl=104px
+   * 2xl、3xl、4xlはdeprecatedな指定となります
+   * @default md
+   */
+  size?: SizeProp;
+  /**
+   * ネイティブの`id`属性。ページで固有のIDを指定
+   */
+  id?: string;
+  /**
+   * アイコンが何を表すかを説明するテキスト
+   * 単に装飾的なアイコンの場合は指定しない
+   */
+  label?: string;
+} & CustomDataAttributeProps;
+
+/**
+ * アイコンコンポーネント。labelを指定しない場合は単に装飾的なアイコンであるとみなされ、aria-hiddenが付与されます
+ */
+export const Icon: FC<Props> = ({ icon, color, size = "md", label, ...otherProps }) => {
+  const iconComponents = Icons as Record<IconName, FC<SVGProps<SVGSVGElement>>>;
+  const IconComponent = iconComponents[icon];
+  const _sizeValue = toIconSizeEmValue(normalizeSize(size));
+  const colorVariant = iconColorVariable(color);
+  return (
+    <IconComponent
+      role="img"
+      aria-hidden={label === undefined || label === "" ? true : undefined}
+      aria-label={label}
+      className={styles.icon}
+      style={
+        {
+          ...colorVariant,
+          "--size": _sizeValue,
+        } as CSSProperties
+      }
+      {...otherProps}
+    />
+  );
+};

package/src/components/Input/Input.module.css

@@ -0,0 +1,51 @@
+.input {
+  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: 2px solid var(--color-outline);
+  border-radius: 8px 8px 0 0;
+}
+
+.input.isInvalid,
+.input:user-invalid {
+  background: var(--color-error-container);
+  border-bottom-color: var(--color-error);
+}
+
+@supports not (selector(:user-invalid)) {
+  .input:invalid {
+    background: var(--color-error-container);
+    border-bottom-color: var(--color-error);
+  }
+}
+
+.input:disabled {
+  color: var(--color-placeholder);
+  background-color: var(--color-outline-variant);
+}
+
+.input::placeholder {
+  color: var(--color-placeholder);
+}
+
+.input:disabled::placeholder {
+  color: var(--color-placeholder);
+}
+
+.input:focus {
+  border-bottom-color: var(--color-ubie-blue-500);
+  outline: none;
+}
+
+.input[type="date"] {
+  height: 3.5rem;
+  line-height: 1;
+}

package/src/components/Input/Input.spec.tsx

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

package/src/components/Input/Input.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { clsx } from "clsx";
+import { forwardRef, InputHTMLAttributes } from "react";
+import styles from "./Input.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+
+type Props = {
+  /**
+   * 有効でない入力を保持しているかどうか
+   * @default false
+   */
+  isInvalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "invalid"> &
+  CustomDataAttributeProps;
+
+export const Input = forwardRef<HTMLInputElement, Props>(({ isInvalid, ...props }, ref) => {
+  const className = clsx(
+    { [styles.isInvalid]: isInvalid && !props.disabled },
+    styles.input,
+    props.className,
+  );
+
+  return <input {...props} className={className} ref={ref} aria-invalid={isInvalid} />;
+});
+
+Input.displayName = "Input";

package/src/components/Label/Label.module.css

@@ -0,0 +1,14 @@
+.label {
+  display: flex;
+  gap: var(--size-spacing-xs);
+  align-items: flex-start;
+  font-size: var(--text-body-sm-size);
+  font-weight: bold;
+  hyphens: auto;
+  color: var(--color-on-surface-variant);
+  overflow-wrap: anywhere;
+}
+
+legend.label {
+  padding: 0;
+}