@ubie/vitals-ui-consumer 0.0.1

package/src/components/Center/Center.spec.tsx

@@ -0,0 +1,143 @@
+import { render, screen } from "@testing-library/react";
+import { Center } from "./Center";
+
+describe("<Center>", () => {
+  it("has a vertical margins of through my prop", () => {
+    render(
+      <Center my="xxs" data-testid="box">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-xxs)");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-xxs)");
+  });
+
+  it("has all margins through individual margin props", () => {
+    render(
+      <Center mt="xs" mb="sm" data-testid="box">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-xs)");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-sm)");
+  });
+
+  it("gives priority to individual margin props", () => {
+    render(
+      <Center my="xxs" mt="xs" mb="sm" data-testid="box">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId("box");
+
+    expect(div).toHaveStyle("--margin-top: var(--size-spacing-xs)");
+    expect(div).toHaveStyle("--margin-bottom: var(--size-spacing-sm)");
+  });
+
+  it("has all the paddings through p prop", () => {
+    render(
+      <Center p="xxs" data-testid="box">
+        Test
+      </Center>,
+    );
+    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(
+      <Center px="xxs" data-testid="box">
+        Test
+      </Center>,
+    );
+    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(
+      <Center py="xxs" data-testid="box">
+        Test
+      </Center>,
+    );
+    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(
+      <Center pt="xxs" pr="xs" pb="sm" pl="md" data-testid="box">
+        Test
+      </Center>,
+    );
+    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(
+      <Center p="xxs" px="xs" py="xs" pt="sm" pr="md" pb="lg" pl="xl" data-testid="box">
+        Test
+      </Center>,
+    );
+    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(
+      <Center width="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--width: 100px");
+  });
+
+  it("receives max-width", () => {
+    render(
+      <Center maxWidth="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--max-width: 100px");
+  });
+
+  it("receives min-width", () => {
+    render(
+      <Center minWidth="100px" data-testid="flex-item">
+        Test
+      </Center>,
+    );
+    const div = screen.getByTestId("flex-item");
+
+    expect(div).toHaveStyle("--min-width: 100px");
+  });
+});

package/src/components/Center/Center.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import clsx from "clsx";
+import {
+  isValidElement,
+  cloneElement,
+  type PropsWithChildren,
+  FC,
+  CSSProperties,
+  ComponentType,
+  ReactElement,
+  ReactNode,
+} from "react";
+import styles from "./Center.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { marginVariables, paddingVariables, widthVariables } from "../../utils/style";
+import { HTMLTagname } from "../../utils/types";
+import { Box } from "../Box/Box";
+import type { MarginYProps, PaddingProps, WidthProps } from "../../types/style";
+
+type Props = {
+  /**
+   * レンダリングされるHTML要素
+   * @default div
+   */
+  as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
+  /**
+   * 内包するテキストを中央に配置。設定は継承され、子孫要素にも影響します
+   */
+  textCenter?: boolean;
+  /**
+   * 子要素を中央に配置。孫要素には影響しません
+   */
+  childrenCenter?: boolean;
+  /**
+   * HTMLのID属性の値
+   */
+  id?: string;
+} & MarginYProps &
+  PaddingProps &
+  WidthProps &
+  CustomDataAttributeProps;
+
+export const Center: FC<PropsWithChildren<Props>> = ({
+  as: CenterCopmonent = "div",
+  children,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  my,
+  mt,
+  mb,
+  textCenter,
+  childrenCenter,
+  id,
+  width,
+  minWidth,
+  maxWidth,
+  ...props
+}) => {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  const createElement = (props: any, children: ReactNode) => {
+    if (isValidElement(CenterCopmonent)) {
+      return <div {...props}>{cloneElement(CenterCopmonent, CenterCopmonent.props, children)}</div>;
+    } else {
+      return <CenterCopmonent {...props}>{children}</CenterCopmonent>;
+    }
+  };
+
+  return createElement(
+    {
+      id,
+      className: clsx(
+        styles.center,
+        textCenter && styles.textCenter,
+        childrenCenter && styles.childrenCenter,
+      ),
+      style: {
+        "--max-width": maxWidth,
+        ...paddingVariables({
+          p,
+          px,
+          py,
+          pt,
+          pr,
+          pb,
+          pl,
+        }),
+        ...marginVariables({
+          my,
+          mt,
+          mb,
+        }),
+        ...widthVariables({
+          width,
+          minWidth,
+          maxWidth,
+        }),
+      } as CSSProperties,
+      ...props,
+    },
+    children,
+  );
+};

package/src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,124 @@
+.checkbox {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  border: 0;
+
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.checkbox,
+.label,
+.symbol {
+  transition:
+    border-color 0.3s var(--ease-out-quint),
+    background-color 0.3s var(--ease-out-quint),
+    outline-color 0.3s var(--ease-out-quint);
+}
+
+/**
+ * label
+ */
+.label {
+  display: flex;
+  gap: var(--size-spacing-xs);
+  align-items: center;
+  hyphens: auto;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.label:has(.checkbox:disabled) {
+  cursor: initial;
+}
+
+.label.medium {
+  font-size: var(--text-body-md-size);
+  line-height: var(--text-body-md-narrow-line);
+}
+
+.label.small {
+  font-size: var(--text-body-sm-size);
+  line-height: var(--text-body-sm-narrow-line);
+}
+
+/**
+ * symbol
+ */
+.symbol {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-ubie-white);
+  background-color: var(--color-ubie-white);
+  border: 2px solid var(--color-outline);
+  border-radius: var(--radius-sm);
+}
+
+.symbol.medium {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.symbol.small {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.symbol.isIndeterminate {
+  background-color: var(--color-ubie-blue-600);
+  border-color: var(--color-ubie-blue-600);
+}
+
+.checkbox:checked + .symbol,
+.symbol.isIndeterminate {
+  border-width: 0;
+}
+
+.checkbox:checked + .symbol {
+  background-color: var(--color-ubie-blue-600);
+}
+
+.checkbox:focus-visible + .symbol {
+  outline: 2px solid var(--color-ubie-pink-500);
+}
+
+.checkbox:disabled:checked + .symbol,
+.checkbox:disabled + .symbol.isIndeterminate {
+  background-color: var(--color-placeholder);
+}
+
+@media (hover: hover) {
+  .checkbox:not(:disabled) + .symbol:not(.isIndeterminate):hover {
+    border-color: var(--color-ubie-blue-500);
+  }
+
+  .checkbox:checked:not(:disabled) + .symbol:hover {
+    background-color: var(--color-ubie-blue-700);
+  }
+}
+
+/**
+ * symbol icon
+ */
+.symbolCheckIcon {
+  visibility: hidden;
+}
+
+.checkbox:checked + .symbol > .symbolCheckIcon {
+  visibility: initial;
+}
+
+.symbolCheckIcon.medium,
+.symbolIndeterminate.medium {
+  font-size: 1.25rem;
+}
+
+.symbolCheckIcon.small,
+.symbolIndeterminate.small {
+  font-size: 1rem;
+}

package/src/components/Checkbox/Checkbox.spec.tsx

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,213 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { useState, useCallback } from "react";
+import { Checkbox, CheckboxGroup, Stack } from "../../index";
+import type { ChangeEventHandler } from "react";
+
+export default {
+  title: "Form/Checkbox",
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+
+type Story = StoryObj<typeof Checkbox>;
+
+const options = ["option1", "option2", "option3", "option4", "option5"];
+
+export const Default: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.target.checked) {
+          setSelectedItem([...selectedItem, event.target.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.target.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <Stack spacing="lg">
+        <CheckboxGroup label="Checkbox">
+          {options.map((option) => (
+            <Checkbox
+              name="default"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem.includes(option)}
+              key={option}
+            >
+              {option}
+            </Checkbox>
+          ))}
+        </CheckboxGroup>
+
+        <dl>
+          <dt>Values</dt>
+          <dd>{selectedItem.join(",")}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+};
+
+export const Horizontally: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.target.checked) {
+          setSelectedItem([...selectedItem, event.target.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.target.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <Stack spacing="lg">
+        <CheckboxGroup label="Checkbox" direction="row">
+          {options.map((option) => (
+            <Checkbox
+              name="horizontally"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem.includes(option)}
+              key={option}
+            >
+              {option}
+            </Checkbox>
+          ))}
+        </CheckboxGroup>
+
+        <dl>
+          <dt>Values</dt>
+          <dd>{selectedItem.join(",")}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+};
+
+export const SingleUse: Story = {
+  render: () => {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => setChecked(event.target.checked),
+      [],
+    );
+
+    return (
+      <Checkbox name="single-use" value="enable" checked={checked} onChange={onChange}>
+        Enable Option
+      </Checkbox>
+    );
+  },
+};
+
+export const Intermediate: Story = {
+  render: () => {
+    return (
+      <Stack spacing="xs">
+        <Checkbox name="indeterminate" isIndeterminate checked>
+          Indeterminate (checked)
+        </Checkbox>
+
+        <Checkbox name="indeterminate" isIndeterminate>
+          Indeterminate
+        </Checkbox>
+      </Stack>
+    );
+  },
+};
+
+export const Size: Story = {
+  render: () => (
+    <Stack spacing="xs">
+      <Checkbox name="size" value="medium">
+        Medium
+      </Checkbox>
+      <Checkbox name="size" value="small" size="small">
+        Small
+      </Checkbox>
+      <Checkbox name="size" value="medium" isIndeterminate>
+        Indeterminate & Medium
+      </Checkbox>
+      <Checkbox name="size" value="small" size="small" isIndeterminate>
+        Indeterminate & Small
+      </Checkbox>
+    </Stack>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Stack spacing="xs">
+      <Checkbox name="disabled" value="checked" checked disabled>
+        Checked
+      </Checkbox>
+
+      <Checkbox name="disabled" value="unchecked" disabled>
+        Unchecked
+      </Checkbox>
+
+      <Checkbox name="disabled" value="isIndeterminate" disabled isIndeterminate checked>
+        isIndeterminate (checked)
+      </Checkbox>
+
+      <Checkbox name="disabled" value="isIndeterminate" disabled isIndeterminate>
+        isIndeterminate
+      </Checkbox>
+    </Stack>
+  ),
+};
+
+export const ShowRequiredLabel: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.target.checked) {
+          setSelectedItem([...selectedItem, event.target.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.target.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <CheckboxGroup label="Checkbox" showRequiredLabel>
+        {options.map((option) => (
+          <Checkbox
+            name="default"
+            value={option}
+            onChange={onChange}
+            checked={selectedItem.includes(option)}
+            key={option}
+          >
+            {option}
+          </Checkbox>
+        ))}
+      </CheckboxGroup>
+    );
+  },
+};
+
+export const CustomDataAttribute: Story = {
+  render: () => (
+    <Stack spacing="xs">
+      <Checkbox name="custom-data" value="data1" data-test-id="checkbox-data1">
+        Data 1
+      </Checkbox>
+      <Checkbox name="custom-data" value="data2" data-test-id="checkbox-data2">
+        Data 2
+      </Checkbox>
+    </Stack>
+  ),
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { CheckAIcon, MinusAIcon } from "@ubie/vitals-icon";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "./Checkbox.module.css";
+import type { InputHTMLAttributes } from "react";
+
+type Props = {
+  /**
+   * サイズ
+   * @default medium
+   */
+  size?: "medium" | "small";
+  /**
+   * 中間状態の見た目とする。input要素のindeterminateプロパティの変更は行わないため注意。
+   */
+  isIndeterminate?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size">;
+
+export const Checkbox = forwardRef<HTMLInputElement, Props>(
+  ({ size = "medium", children, disabled, isIndeterminate = false, ...otherProps }, ref) => {
+    return (
+      <label className={clsx(styles.label, styles[size])}>
+        <input
+          ref={ref}
+          type="checkbox"
+          className={styles.checkbox}
+          disabled={disabled}
+          {...otherProps}
+        />
+        <span
+          className={clsx(styles.symbol, styles[size], isIndeterminate && styles.isIndeterminate)}
+        >
+          {isIndeterminate ? (
+            <MinusAIcon
+              className={clsx(styles.symbolIndeterminate, styles[size])}
+              aria-hidden="true"
+            />
+          ) : (
+            <CheckAIcon className={clsx(styles.symbolCheckIcon, styles[size])} aria-hidden="true" />
+          )}
+        </span>
+        {children}
+      </label>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";