@ubie/vitals-ui-consumer 0.0.1

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ubie/vitals-ui-consumer",
+  "version": "0.0.1",
+  "description": "",
+  "author": "Ubie Inc.",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@ubie/vitals-token-consumer": "0.0.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@headlessui/react": "^2.2.9",
+    "@storybook/addon-a11y": "^10.1.8",
+    "@storybook/addon-docs": "^10.1.8",
+    "@storybook/addon-onboarding": "^10.1.8",
+    "@storybook/addon-vitest": "^10.1.8",
+    "@storybook/react-vite": "^10.1.8",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@tsdown/css": "^0.21.7",
+    "@types/bun": "^1.3.9",
+    "@types/react": "^19.2.7",
+    "@vitest/coverage-v8": "^4.1.2",
+    "debounce": "^3.0.0",
+    "playwright": "^1.57.0",
+    "react": "19.2.1",
+    "storybook": "^10.1.8",
+    "vite-plus": "latest",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest",
+    "@ubie/vitals-icon": "0.0.1"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/src/components/Accordion/Accordion.module.css

@@ -0,0 +1,75 @@
+.container,
+.container * {
+  box-sizing: border-box;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  hyphens: auto;
+  color: var(--color-on-surface);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  background: none;
+  border: 1px solid var(--color-outline);
+}
+
+.button:hover {
+  background-color: var(--color-ubie-blue-100);
+}
+
+/* for Safari */
+.button::-webkit-details-marker {
+  display: none;
+}
+
+.medium .button {
+  width: 100%;
+  min-height: 2rem;
+  padding: var(--size-spacing-md);
+  font-weight: bold;
+  border-radius: var(--radius-md);
+}
+
+.small .button {
+  width: 100%;
+  min-height: 1.5rem;
+  padding: var(--size-spacing-xs);
+  font-size: var(--text-button-md-size);
+  border-right: none;
+  border-left: none;
+}
+
+details[open] .button {
+  border-bottom: none;
+}
+
+details[open].medium .button {
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.arrow {
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 1rem;
+  color: var(--color-ubie-blue-600);
+}
+
+details[open] .arrow {
+  transform: rotate(180deg);
+}
+
+.medium .panel {
+  padding: var(--size-spacing-md);
+  border: 1px solid var(--color-outline);
+  border-top: none;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+
+.small .panel {
+  padding: var(--size-spacing-xs);
+  border-bottom: 1px solid var(--color-outline);
+}

package/src/components/Accordion/Accordion.spec.tsx

@@ -0,0 +1,18 @@
+import { composeStory } from "@storybook/react-vite";
+import { screen } from "@testing-library/react";
+import Meta, { Id as IdStory } from "./Accordion.stories";
+import { describe, expect, test } from "vite-plus/test";
+
+const IdTest = composeStory(IdStory, Meta);
+
+describe("Accorion", () => {
+  test("Add ids", async () => {
+    await IdTest.run();
+
+    const detailsElement = await screen.findByRole("group");
+    const summaryElement = detailsElement.querySelector("summary");
+
+    expect(detailsElement).toHaveAttribute("id", "wrapper-id");
+    expect(summaryElement).toHaveAttribute("id", "button-id");
+  });
+});

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Accordion } from "./Accordion";
+import type { ComponentProps } from "react";
+
+export default {
+  component: Accordion,
+} satisfies Meta<typeof Accordion>;
+
+type Story = StoryObj<typeof Accordion>;
+
+const defaultArgs = {
+  header: "夏目漱石「私の個人主義」",
+  children:
+    "何は時分どうもどんな観念顔というののところを云ったいまし。とうてい今日に説明院は現にこういう反対たますくらいから思わて来るないにも撲殺なるたたて、始終にも願うただですん。",
+  description: "出版日：1978年8月8日",
+} satisfies Partial<ComponentProps<typeof Accordion>>;
+
+export const Default: Story = {
+  render: (args) => <Accordion {...args}></Accordion>,
+  args: defaultArgs,
+};
+
+export const Small: Story = {
+  render: (args) => <Accordion {...args}></Accordion>,
+  args: {
+    ...defaultArgs,
+    size: "small",
+  },
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => <Accordion {...args}></Accordion>,
+  args: {
+    ...defaultArgs,
+    ["data-test-id"]: "some-id",
+  },
+};
+
+export const Id: Story = {
+  render: () => (
+    <Accordion header="夏目漱石「私の個人主義」" id="wrapper-id" buttonId="button-id">
+      何は時分どうもどんな観念顔というののところを云ったいまし。とうてい今日に説明院は現にこういう反対たますくらいから思わて来るないにも撲殺なるたたて、始終にも願うただですん。
+    </Accordion>
+  ),
+};
+
+export const InitialOpen: Story = {
+  render: (args) => <Accordion {...args} />,
+  args: {
+    ...defaultArgs,
+    initialOpen: true,
+  },
+};
+
+export const WithOnToggle: Story = {
+  render: (args) => <Accordion {...args} />,
+  args: {
+    ...defaultArgs,
+    onToggle: () => alert("アコーディオンが開閉されました！"),
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ArrowBDownIcon } from "@ubie/vitals-icon";
+import clsx from "clsx";
+import styles from "./Accordion.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { Stack } from "../Stack/Stack";
+import { Text } from "../Text/Text";
+import type { FC, ReactNode } from "react";
+
+export type Size = "small" | "medium";
+
+type Props = {
+  /**
+   * コンテンツとして表示する内容。開閉で表示・非表示が切り替わる
+   */
+  children: ReactNode;
+  /**
+   * 見出しに表示するテキスト
+   */
+  header: string;
+  /**
+   * 見出しの下に表示する説明
+   */
+  description?: string;
+  /**
+   * サイズ
+   * @default medium
+   */
+  size?: Size;
+  /**
+   * ラッパーであるdetails要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定
+   */
+  id?: string;
+  /**
+   * 開閉をトリガーするsummary要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定
+   */
+  buttonId?: string;
+  /**
+   * 初期状態で開く
+   */
+  initialOpen?: boolean;
+  /**
+   * 開閉時のイベントハンドラ
+   */
+  onToggle?: () => void;
+} & CustomDataAttributeProps;
+
+export const Accordion: FC<Props> = ({
+  header,
+  description,
+  children,
+  size = "medium",
+  id,
+  buttonId,
+  initialOpen,
+  onToggle,
+  ...props
+}) => {
+  return (
+    <details
+      className={clsx(styles.container, styles[size])}
+      id={id}
+      {...props}
+      open={initialOpen}
+      onToggle={onToggle}
+    >
+      <summary id={buttonId} className={styles.button}>
+        <Stack spacing="xxs" as="span">
+          <Text
+            bold={size === "medium"}
+            leading="narrow"
+            as="span"
+            size={size === "medium" ? "md" : "sm"}
+          >
+            {header}
+          </Text>
+          {description && (
+            <Text color="sub" size="xs" as="span">
+              {description}
+            </Text>
+          )}
+        </Stack>
+        <ArrowBDownIcon aria-hidden className={styles.arrow} />
+      </summary>
+      <div className={styles.panel}>{children}</div>
+    </details>
+  );
+};

package/src/components/ActionHalfModal/ActionHalfModal.module.css

@@ -0,0 +1,180 @@
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-modal);
+  overflow: hidden;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+}
+
+.normalOverlay {
+  background: rgb(0 0 0 / 50%);
+}
+
+.darkerOverlay {
+  background: rgb(0 0 0 / 80%);
+}
+
+.contents {
+  padding: 0 var(--size-spacing-md);
+}
+
+.dialog {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  overflow-y: hidden;
+  background: #fff;
+  border-radius: 12px;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.dialog.fullscreen {
+  height: calc(100% - 24px);
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.mainContent.headerLess {
+  padding-top: var(--size-spacing-xl);
+}
+
+.mainContent.fullscreen {
+  min-height: 100%;
+}
+
+.header {
+  padding: var(--size-spacing-lg) var(--size-spacing-md);
+  font-size: var(--text-heading-xs-size);
+  font-weight: bold;
+  line-height: var(--text-heading-xs-line);
+  text-align: center;
+  white-space: pre-wrap;
+  background-color: var(--color-ubie-white);
+
+  /* May receive focus in the initial display. */
+  outline: none;
+}
+
+.header.sticky {
+  position: sticky;
+  top: 0;
+
+  /* Ensure sticky header appears above content that might overlap it (e.g., with position or transform) */
+  z-index: 1;
+}
+
+.header.sticky.canScroll {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.body {
+  /*
+   * Ensure the header always appears in front of body content.
+   * - Place header and body in the same stacking context
+   * - Set body's z-index lower than header's z-index
+   * This prevents the header from being hidden by body content,
+   * regardless of how high z-index values are specified within the body.
+   */
+  z-index: 0;
+  padding-right: var(--size-spacing-md);
+  padding-left: var(--size-spacing-md);
+}
+
+.body.fullscreen {
+  flex: 1;
+  min-height: 400px;
+  overflow: hidden;
+}
+
+.buttonContainer {
+  display: grid;
+  gap: var(--size-spacing-md);
+  padding: var(--size-spacing-lg) var(--size-spacing-md) var(--size-spacing-md);
+  background-color: var(--color-ubie-white);
+}
+
+.buttonContainer.sticky {
+  position: sticky;
+  bottom: 0;
+}
+
+.buttonContainer.sticky.canScroll {
+  border-top: 1px solid var(--color-border);
+}
+
+.overlayEnter {
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+  transition-property: opacity;
+}
+
+.overlayEnterFrom {
+  opacity: 0;
+}
+
+.overlayEnterTo {
+  opacity: 1;
+}
+
+.overlayLeave {
+  transition-timing-function: ease-in;
+  transition-duration: 200ms;
+}
+
+.overlayLeaveFrom {
+  opacity: 1;
+}
+
+.overlayLeaveTo {
+  opacity: 0;
+}
+
+.panelEnter {
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+  transition-property: transform, opacity;
+}
+
+.panelEnterFrom {
+  opacity: 0;
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.panelEnterTo {
+  opacity: 1;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.panelLeave {
+  transition-timing-function: ease-in;
+  transition-duration: 200ms;
+}
+
+.panelLeaveFrom {
+  opacity: 1;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.panelLeaveTo {
+  opacity: 0;
+  transform: translate3d(-50%, 100%, 0);
+}

package/src/components/ActionHalfModal/ActionHalfModal.spec.tsx

@@ -0,0 +1,57 @@
+import { composeStory } from "@storybook/react-vite";
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import Meta, { WithId, CustomHeader, Default } from "./ActionHalfModal.stories";
+
+const WithIdStory = composeStory(WithId, Meta);
+const CustomHeaderStory = composeStory(CustomHeader, Meta);
+const DefaultStory = composeStory(Default, Meta);
+
+const user = userEvent.setup();
+
+describe("ActionHalfModal", () => {
+  test("Add id", async () => {
+    render(<WithIdStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogElement = await screen.findByRole("dialog");
+
+    expect(dialogElement).toHaveAttribute("id", "dialog-id");
+  });
+
+  test("Custom heading and dialogue can be tied together", async () => {
+    render(<CustomHeaderStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogElement = await screen.findByRole("dialog");
+    const dialogHeadingElement = await screen.findByRole("heading");
+
+    expect(dialogElement).toHaveAttribute("aria-labelledby", "header-id");
+    expect(dialogHeadingElement).toHaveAttribute("id", "header-id");
+  });
+
+  test("If no header prop is present, text is inserted that serves as the default heading", async () => {
+    render(<CustomHeaderStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogHeadingElement = await screen.findByText("ダイアログ");
+
+    expect(document.activeElement).toEqual(dialogHeadingElement);
+  });
+
+  test("header prop can be used to automatically link to a dialog", async () => {
+    render(<DefaultStory />);
+
+    const dialogElement = await screen.findByRole("dialog");
+    const dialogHeadingElement = await screen.findByRole("heading");
+
+    expect(dialogElement).toHaveAttribute("aria-labelledby");
+    expect(dialogHeadingElement).toHaveAttribute(
+      "id",
+      dialogElement.getAttribute("aria-labelledby"),
+    );
+  });
+});