@ubie/vitals-ui-consumer 0.0.1

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { forwardRef, useMemo } from "react";
+import styles from "./RadioGroup.module.css";
+import { RequiredLabel } from "../../sharedComponents/RequiredLabel/RequiredLabel";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+import { Flex } from "../Flex/Flex";
+import { RadioButton } from "../RadioButton/RadioButton";
+import { RadioCard } from "../RadioCard/RadioCard";
+import type { ReactElement } from "react";
+
+export type Props = {
+  children: ReactElement<typeof RadioButton>[] | ReactElement<typeof RadioCard>[];
+  /**
+   * ラジオグループの見出し（legend要素）
+   */
+  label?: string;
+  /**
+   * 必須マークを表示するか
+   * 注意: trueとしてもinput要素のrequired属性は付与されません
+   */
+  showRequiredLabel?: boolean;
+  /**
+   * ラジオボタンの配置方向
+   * @default column
+   */
+  direction?: "column" | "row";
+} & CustomDataAttributeProps;
+
+export const RadioGroup = forwardRef<HTMLFieldSetElement, Props>(
+  ({ children, label, showRequiredLabel = false, direction = "column", ...otherProps }, ref) => {
+    const childrenIsCard = children.some((child) => child.type === RadioCard);
+    const childenIsBlock = direction === "row" || (childrenIsCard && direction === "column");
+
+    const wrap = useMemo(() => {
+      return direction === "row";
+    }, [direction]);
+
+    return (
+      <fieldset className={styles.wrapper} ref={ref} {...otherProps}>
+        {label && (
+          <legend className={styles.legend}>
+            {label}
+            {showRequiredLabel && <RequiredLabel />}
+          </legend>
+        )}
+        <Flex
+          spacing={childrenIsCard ? "sm" : "md"}
+          alignItems={childenIsBlock ? "normal" : undefined}
+          direction={direction}
+          wrap={wrap}
+        >
+          {children}
+        </Flex>
+      </fieldset>
+    );
+  },
+);
+
+RadioGroup.displayName = "RadioGroup";

package/src/components/Select/Select.module.css

@@ -0,0 +1,70 @@
+.wrapper {
+  position: relative;
+}
+
+.select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 54px;
+  padding: 0 64px 0 16px;
+  font-size: var(--text-body-md-size);
+  font-weight: bold;
+  line-height: 54px;
+  color: var(--color-on-surface);
+  appearance: none;
+  caret-color: var(--color-ubie-blue-600);
+  background-color: var(--color-ubie-white);
+  border: 2px solid var(--color-outline);
+  border-radius: 8px;
+  transition: border-color 0.3s var(--ease-out-quint);
+}
+
+.select::placeholder {
+  color: var(--color-placeholder);
+}
+
+.select:focus {
+  outline: none;
+}
+
+.select:focus-visible {
+  border-color: var(--color-ubie-blue-500);
+}
+
+@media (hover: hover) {
+  .select:hover {
+    border: 2px solid var(--color-ubie-blue-400);
+  }
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-ubie-blue-600);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.disabled .select {
+  color: var(--color-on-surface-variant);
+  background-color: var(--color-outline-variant);
+  border-color: var(--color-outline);
+}
+
+.disabled .icon {
+  color: var(--color-on-surface-variant);
+}
+
+.isInvalid .select {
+  background: var(--color-error-container);
+  border-color: var(--color-error);
+}
+
+.isInvalid .icon {
+  color: var(--color-ubie-red-700);
+}

package/src/components/Select/Select.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { Select } from "./Select";
+
+describe("Select", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLSelectElement>();
+    render(<Select ref={ref}>Test</Select>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("SELECT");
+  });
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { UnfoldMoreIcon } from "@ubie/vitals-icon";
+import clsx from "clsx";
+import { forwardRef, InputHTMLAttributes } from "react";
+import styles from "./Select.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+
+type Props = CustomDataAttributeProps & {
+  /**
+   * ネイティブ要素の `id` 属性。ページで固有のIDを指定
+   */
+  id?: string;
+  /**
+   * 有効でない入力を保持しているかどうか
+   * @default false
+   */
+  isInvalid?: boolean;
+  /**
+   * フィールドを無効化する
+   */
+  disabled?: boolean;
+  /**
+   * CSSのクラス
+   */
+  className?: string;
+} & Omit<InputHTMLAttributes<HTMLSelectElement>, "id" | "disabled">;
+
+const Select = forwardRef<HTMLSelectElement, Props>(
+  ({ isInvalid = false, disabled = false, children, className, ...props }, ref) => {
+    return (
+      <div
+        className={clsx(
+          { [styles.isInvalid]: isInvalid, [styles.disabled]: disabled },
+          styles.wrapper,
+          className,
+        )}
+      >
+        <select
+          {...props}
+          disabled={disabled}
+          className={styles.select}
+          ref={ref}
+          aria-invalid={isInvalid}
+        >
+          {children}
+        </select>
+        <UnfoldMoreIcon aria-hidden className={styles.icon} />
+      </div>
+    );
+  },
+);
+
+Select.displayName = "Select";
+
+export { Select };

package/src/components/Stack/Stack.module.css

@@ -0,0 +1,10 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
+}

package/src/components/Stack/Stack.spec.tsx

@@ -0,0 +1,177 @@
+import { render, screen } from "@testing-library/react";
+import { Stack } from "./Stack";
+
+describe("<Stack>", () => {
+  it("has all the margins through m prop", () => {
+    render(
+      <Stack spacing="xs" m="xxs" data-testid="box">
+        test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" mx="xxs" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" my="xxs" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" mt="xxs" mr="xs" mb="sm" ml="md" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" m="xxs" mx="xs" my="xs" mt="sm" mr="md" mb="lg" ml="xl" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" p="xxs" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" px="xxs" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" py="xxs" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" pt="xxs" pr="xs" pb="sm" pl="md" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack spacing="xs" p="xxs" px="xs" py="xs" pt="sm" pr="md" pb="lg" pl="xl" data-testid="box">
+        Test
+      </Stack>,
+    );
+    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(
+      <Stack width="100px" data-testid="flex-item">
+        Test
+      </Stack>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--width: 100px");
+  });
+
+  it("receives max-width", () => {
+    render(
+      <Stack maxWidth="100px" data-testid="flex-item">
+        Test
+      </Stack>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--max-width: 100px");
+  });
+
+  it("receives min-width", () => {
+    render(
+      <Stack minWidth="100px" data-testid="flex-item">
+        Test
+      </Stack>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--min-width: 100px");
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { clsx } from "clsx";
+import { cloneElement, isValidElement, useMemo } from "react";
+import styles from "./Stack.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+import { AlignItems, JustifyContent, Spacing, WidthProps } from "../../types/style";
+import { gapVariables, marginVariables, paddingVariables, widthVariables } from "../../utils/style";
+import { HTMLTagname } from "../../utils/types";
+import { Box } from "../Box/Box";
+import type { MarginProps, PaddingProps } from "../../types/style";
+import type { ComponentType, FC, ReactElement, ReactNode } from "react";
+
+type Props = {
+  /**
+   * レンダリングされるコンポーネントまたはHTML要素
+   * @default div
+   */
+  as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
+  /**
+   * 水平方向における子要素のレイアウトを定める。
+   * @default stretch
+   */
+  alignItems?: AlignItems;
+  /**
+   * 垂直方向における子要素のレイアウトを定める。
+   * @deprecated directionが削除されたため必要なくなりました
+   */
+  justifyContent?: JustifyContent;
+  /**
+   * CSSのクラス
+   * @deprecated マージンなどをつけたい場合は<Box>を使ってください
+   */
+  className?: string;
+  /**
+   * 子要素
+   */
+  children: ReactNode;
+} & (
+  | {
+      /**
+       * 子要素の間隔。指定しない場合は0
+       * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+       */
+      spacing: Spacing;
+      gap?: never;
+    }
+  | {
+      /**
+       * spacingのエイリアス（どちらかしか指定できません）
+       * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
+       */
+      gap: Spacing;
+      spacing?: never;
+    }
+  | {
+      gap?: never;
+      spacing?: never;
+    }
+) &
+  MarginProps &
+  PaddingProps &
+  WidthProps &
+  CustomDataAttributeProps;
+
+/**
+ * Stackコンポーネント
+ * 一方向に一定のリズムで要素を積み上げるレイアウト
+ */
+export const Stack: FC<Props> = ({
+  as: StackComponent = "div",
+  children,
+  className,
+  spacing,
+  gap,
+  alignItems = "stretch",
+  justifyContent = "flex-start",
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  width,
+  minWidth,
+  maxWidth,
+  ...otherProps
+}) => {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  const createElement = (props: any, children: ReactNode) => {
+    if (isValidElement(StackComponent)) {
+      return cloneElement(StackComponent, StackComponent.props, <div {...props}>{children}</div>);
+    } else {
+      return <StackComponent {...props}>{children}</StackComponent>;
+    }
+  };
+
+  const _spacing = useMemo(() => {
+    if (gap != null) {
+      return gap;
+    } else if (spacing != null) {
+      return spacing;
+    } else {
+      return undefined;
+    }
+  }, [gap, spacing]);
+
+  return createElement(
+    {
+      className: clsx(className, styles.stack),
+      style: {
+        alignItems: `${alignItems}`,
+        justifyContent: `${justifyContent}`,
+        ...gapVariables(_spacing),
+        ...paddingVariables({
+          p,
+          px,
+          py,
+          pt,
+          pr,
+          pb,
+          pl,
+        }),
+        ...marginVariables({
+          m,
+          mx,
+          my,
+          mt,
+          mr,
+          mb,
+          ml,
+        }),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
+      },
+      ...otherProps,
+    },
+    children,
+  );
+};

package/src/components/Stepper/Stepper.module.css

@@ -0,0 +1,137 @@
+.stepper {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: stretch;
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
+}
+
+.stepperItem {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.borderLine {
+  position: absolute;
+  top: 12px; /* Center the line with the 24px icon (12px from top) */
+  right: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.iconSpacer {
+  flex-shrink: 0;
+  width: 32px;
+}
+
+.leftBorder,
+.rightBorder {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.border.hidden {
+  display: none;
+}
+
+.border {
+  width: 100%;
+  height: 2px;
+  background-color: var(--stepper-border-color, var(--color-ubie-gray-300));
+}
+
+.iconWrapper {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+/* Border color variants */
+.borderColorBlue {
+  --stepper-border-color: var(--color-ubie-blue-600);
+}
+
+.borderColorGray {
+  --stepper-border-color: var(--color-ubie-gray-300);
+}
+
+/* Circle styles for different statuses */
+.doneCircle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  color: var(--color-ubie-blue-600);
+  background-color: #fff;
+  border: 2px solid var(--color-ubie-blue-600);
+  border-radius: 50%;
+}
+
+.currentCircle {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  background-color: var(--color-ubie-blue-600);
+  border-radius: 50%;
+}
+
+.undoneCircle {
+  width: 24px;
+  height: 24px;
+  background-color: #fff;
+  border: 2px solid var(--stepper-border-color, var(--color-ubie-gray-300));
+  border-radius: 50%;
+}
+
+/* Icon colors for custom icons */
+.current .iconWrapper {
+  color: var(--color-ubie-blue-600);
+}
+
+.done .iconWrapper {
+  color: var(--color-ubie-blue-600);
+}
+
+.undone .iconWrapper {
+  color: var(--color-ubie-gray-300);
+}
+
+.label {
+  width: 100%;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.currentLabel {
+  font-weight: 600;
+  color: #000;
+}
+
+.doneLabel {
+  font-weight: 400;
+  color: #000;
+}
+
+.undoneLabel {
+  font-weight: 400;
+  color: #000;
+}