@ubie/vitals-ui-consumer 0.0.1

package/src/components/Button/Button.spec.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Button } from "./Button";
+
+describe("<Button>", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Test</Button>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("BUTTON");
+  });
+
+  it("has all the margins through m prop", () => {
+    render(
+      <Button m="xxs" data-testid="box">
+        Test
+      </Button>,
+    );
+    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(
+      <Button mx="xxs" data-testid="box">
+        Test
+      </Button>,
+    );
+    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(
+      <Button my="xxs" data-testid="box">
+        Test
+      </Button>,
+    );
+    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(
+      <Button mt="xxs" mr="xs" mb="sm" ml="md" data-testid="box">
+        Test
+      </Button>,
+    );
+    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(
+      <Button m="xxs" mx="xs" my="xs" mt="sm" mr="md" mb="lg" ml="xl" data-testid="box">
+        Test
+      </Button>,
+    );
+    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)");
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { clsx } from "clsx";
+import { type CSSProperties, forwardRef } from "react";
+import styles from "./Button.module.css";
+import { useIcon } from "./useIcon";
+import { marginVariables } from "../../utils/style";
+import type { ButtonProps } from "./ButtonTypes";
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      variant = "primary",
+      size = "large",
+      block = false,
+      icon,
+      prefixIcon: _prefixIcon,
+      fixedIcon: _fixedIcon,
+      suffixIcon: _suffixIcon,
+      type = "button",
+      disabled = false,
+      loading = false,
+      loadingLabel = "通信中",
+      onClick,
+      whiteSpace = "normal",
+      m,
+      mx,
+      my,
+      mt,
+      mr,
+      mb,
+      ml,
+      ...props
+    },
+    ref,
+  ) => {
+    const prefixIcon = useIcon(icon || _prefixIcon, variant);
+    const fixedIcon = useIcon(_fixedIcon, variant);
+    const suffixIcon = useIcon(_suffixIcon, variant);
+    const cls = clsx({
+      [styles.button]: true,
+      [styles[variant]]: true,
+      [styles[size]]: true,
+      [styles.block]: block,
+      [styles.disabled]: disabled,
+      [styles.loading]: loading,
+    });
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (loading) {
+        e.preventDefault();
+        return;
+      }
+
+      onClick?.(e);
+    };
+
+    return (
+      <button
+        type={type}
+        className={cls}
+        style={
+          {
+            ...marginVariables({
+              m,
+              mx,
+              my,
+              mt,
+              mr,
+              mb,
+              ml,
+            }),
+            "--white-space": whiteSpace,
+          } as CSSProperties
+        }
+        ref={ref}
+        disabled={disabled}
+        aria-disabled={loading}
+        onClick={handleClick}
+        {...props}
+      >
+        {loading && <span className={styles.loadingLabel}>{loadingLabel}</span>}
+        {fixedIcon && <span className={styles.fixedIcon}>{fixedIcon}</span>}
+        <span className={styles.label}>
+          {prefixIcon && (
+            <span className={clsx(styles.icon, loading && styles.loading)}>{prefixIcon}</span>
+          )}
+          <span className={clsx(styles.children, loading && styles.loading)}>{children}</span>
+          {suffixIcon && (
+            <span className={clsx(styles.suffixIcon, loading && styles.loading)}>{suffixIcon}</span>
+          )}
+        </span>
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/components/Button/ButtonTypes.ts

@@ -0,0 +1,107 @@
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { IconName } from "../../types/icon";
+import type { MarginProps } from "../../types/style";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+
+export type BaseProps = {
+  /**
+   * ボタンのラベルとして表示する内容
+   */
+  children: ReactNode;
+  /**
+   * ボタンの種類
+   * @default primary
+   */
+  variant?:
+    | "primary"
+    | "secondary"
+    | "alert"
+    | "text"
+    | "textAlert"
+    | "authGoogle"
+    | "authLINE"
+    | "authApple";
+  /**
+   * 種類
+   * @default large
+   */
+  size?: "large" | "medium" | "small";
+  /**
+   * 横幅を100%占有する
+   */
+  block?: boolean;
+  /**
+   * Fixedアイコン
+   */
+  fixedIcon?: "default" | ReactElement | IconName;
+  /**
+   * 後方配置のアイコン
+   */
+  suffixIcon?: "default" | ReactElement | IconName;
+  /**
+   * ラベルの折り返しを指定
+   */
+  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces";
+} & (
+  | {
+      /**
+       * アイコン
+       */
+      icon?: "default" | ReactElement | IconName;
+      prefixIcon?: never;
+    }
+  | {
+      /**
+       * アイコン
+       */
+      prefixIcon?: "default" | ReactElement | IconName;
+      icon?: never;
+    }
+  | {
+      icon?: never;
+      prefixIcon?: never;
+    }
+) &
+  MarginProps &
+  CustomDataAttributeProps;
+
+export type OnlyButtonProps = {
+  /**
+   * ネイティブのbutton要素のtype属性
+   * @default button
+   */
+  type?: HTMLButtonElement["type"];
+  /**
+   * ボタンを無効化するかどうか
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * ローディング状態を示す
+   */
+  loading?: boolean;
+  /**
+   * ローディング中に表示する文言
+   */
+  loadingLabel?: string;
+};
+
+export type OnlyLinkButtonProps = {
+  /**
+   * レンダリングされる要素を変更。フレームワークのリンクコンポーネントなどを指定
+   */
+  render?: ReactElement;
+};
+
+export type ButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children" | "className" | keyof BaseProps | keyof OnlyButtonProps
+> &
+  BaseProps &
+  OnlyButtonProps;
+export type LinkButtonProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  "children" | "className" | keyof BaseProps
+> &
+  BaseProps &
+  OnlyLinkButtonProps;

package/src/components/Button/LinkButton.spec.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { LinkButton } from "./LinkButton";
+
+describe("<LinkButton>", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <LinkButton ref={ref} href=".">
+        Test
+      </LinkButton>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("A");
+  });
+
+  it("has all the margins through m prop", () => {
+    render(
+      <LinkButton m="xxs" data-testid="box">
+        Test
+      </LinkButton>,
+    );
+    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(
+      <LinkButton mx="xxs" data-testid="box">
+        Test
+      </LinkButton>,
+    );
+    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(
+      <LinkButton my="xxs" data-testid="box">
+        Test
+      </LinkButton>,
+    );
+    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(
+      <LinkButton mt="xxs" mr="xs" mb="sm" ml="md" data-testid="box">
+        Test
+      </LinkButton>,
+    );
+    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(
+      <LinkButton m="xxs" mx="xs" my="xs" mt="sm" mr="md" mb="lg" ml="xl" data-testid="box">
+        Test
+      </LinkButton>,
+    );
+    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)");
+  });
+});

package/src/components/Button/LinkButton.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import clsx from "clsx";
+import { cloneElement, CSSProperties, forwardRef } from "react";
+import styles from "./Button.module.css";
+import { useIcon } from "./useIcon";
+import { marginVariables } from "../../utils/style";
+import type { LinkButtonProps } from "./ButtonTypes";
+import type { ReactNode } from "react";
+
+export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
+  (
+    {
+      render,
+      children,
+      variant = "primary",
+      size = "large",
+      block = false,
+      icon,
+      prefixIcon: _prefixIcon,
+      fixedIcon: _fixedIcon,
+      suffixIcon: _suffixIcon,
+      whiteSpace = "normal",
+      m,
+      mx,
+      my,
+      mt,
+      mr,
+      mb,
+      ml,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const prefixIcon = useIcon(icon || _prefixIcon, variant);
+    const fixedIcon = useIcon(_fixedIcon, variant);
+    const suffixIcon = useIcon(_suffixIcon, variant);
+    const cls = clsx({
+      [styles.button]: true,
+      [styles[variant]]: true,
+      [styles[size]]: true,
+      [styles.block]: block,
+    });
+
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const createElement = (props: any, children: ReactNode) => {
+      return render ? cloneElement(render, props, children) : <a {...props}>{children}</a>;
+    };
+
+    return createElement(
+      {
+        className: cls,
+        style: {
+          ...marginVariables({
+            m,
+            mx,
+            my,
+            mt,
+            mr,
+            mb,
+            ml,
+          }),
+          "--white-space": whiteSpace,
+        } as CSSProperties,
+        ...props,
+        ref: forwardedRef,
+      },
+      <>
+        {fixedIcon && <span className={styles.fixedIcon}>{fixedIcon}</span>}
+        <span className={styles.label}>
+          {prefixIcon && <span className={styles.icon}>{prefixIcon}</span>}
+          {children}
+          {suffixIcon && <span className={styles.suffixIcon}>{suffixIcon}</span>}
+        </span>
+      </>,
+    );
+  },
+);
+
+LinkButton.displayName = "Link";

package/src/components/Button/VariantIcon.tsx

@@ -0,0 +1,20 @@
+import { ReactNode, FC } from "react";
+import { AppleIcon } from "../../icons/AppleIcon";
+import { GoogleIcon } from "../../icons/GoogleIcon";
+import { LINEIcon } from "../../icons/LINEIcon";
+import type { BaseProps } from "./ButtonTypes";
+
+export const VariantIcon: FC<{ variant: BaseProps["variant"]; fallback?: ReactNode }> = ({
+  variant,
+  fallback,
+}) => {
+  return variant === "authGoogle" ? (
+    <GoogleIcon />
+  ) : variant === "authLINE" ? (
+    <LINEIcon />
+  ) : variant === "authApple" ? (
+    <AppleIcon />
+  ) : (
+    <>{fallback}</>
+  );
+};

package/src/components/Button/useIcon.tsx

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import { VariantIcon } from "./VariantIcon";
+import { Icon } from "../Icon/Icon";
+import type { ButtonProps } from "./ButtonTypes";
+
+export function useIcon(icon: ButtonProps["icon"], variant: ButtonProps["variant"]) {
+  return useMemo(() => {
+    if (icon === "default") {
+      return <VariantIcon variant={variant} />;
+    } else if (typeof icon === "string") {
+      return <Icon icon={icon}></Icon>;
+    } else {
+      return icon;
+    }
+  }, [icon, variant]);
+}

package/src/components/ButtonCard/ButtonCard.module.css

@@ -0,0 +1,35 @@
+.card {
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--size-spacing-md) var(--size-spacing-sm);
+  font-size: var(--text-button-lg-size);
+  font-weight: bold;
+  hyphens: auto;
+
+  /* TODO: Replaced by tokens when @ubie/design-tokens is up-to-date. */
+  line-height: 1.5;
+  color: var(--color-on-surface);
+  text-align: left;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  background-color: var(--color-ubie-white);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-md);
+  transition: background-color 0.3s var(--ease-out-quint);
+}
+
+@media (hover: hover) {
+  .card:hover:not(:disabled) {
+    background-color: var(--color-ubie-blue-100);
+  }
+}
+
+.card:disabled {
+  color: var(--color-placeholder);
+  cursor: initial;
+  background-color: var(--color-outline-variant);
+}

package/src/components/ButtonCard/ButtonCard.spec.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import { ButtonCard } from "./ButtonCard";
+
+describe("<ButtonCard>", () => {
+  it("receives the custom data attribute", () => {
+    render(<ButtonCard data-testid="button-custom-attribute">Test</ButtonCard>);
+    const button = screen.getByTestId("button-custom-attribute");
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it("A receives the id attribute", () => {
+    render(<ButtonCard id="button-id">Test</ButtonCard>);
+    const button = screen.getByRole("button");
+
+    expect(button.getAttribute("id")).toBe("button-id");
+  });
+});

package/src/components/ButtonCard/ButtonCard.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ButtonCard } from "./ButtonCard";
+import { Box } from "../Box/Box";
+import { Flex } from "../Flex/Flex";
+
+export default {
+  title: "Form/ButtonCard",
+  component: ButtonCard,
+  args: {
+    onClick: () => {},
+    children: "自分",
+  },
+} satisfies Meta<typeof ButtonCard>;
+
+const defaultArgs = {};
+
+type Story = StoryObj<typeof ButtonCard>;
+
+export const Default: Story = {
+  render: (args) => <ButtonCard {...args} />,
+  args: defaultArgs,
+};
+
+export const WrapText: Story = {
+  render: (args) => (
+    <Box width="200px">
+      <ButtonCard {...args} />
+    </Box>
+  ),
+  args: {
+    ...defaultArgs,
+    children: "自分自分自分自分自分自分自分自分自分自分自分自分自分自分自分自分",
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <ButtonCard {...args} />,
+  args: {
+    ...defaultArgs,
+    disabled: true,
+  },
+};
+
+export const Horizontal: Story = {
+  render: (args) => (
+    <Flex spacing="xs">
+      <ButtonCard {...args} />
+      <ButtonCard {...args} />
+    </Flex>
+  ),
+  args: {
+    ...defaultArgs,
+  },
+};

package/src/components/ButtonCard/ButtonCard.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { forwardRef, type PropsWithChildren, type ButtonHTMLAttributes } from "react";
+import styles from "./ButtonCard.module.css";
+
+type Props = PropsWithChildren<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">>;
+
+export const ButtonCard = forwardRef<HTMLButtonElement, Props>(
+  ({ children, type = "button", ...rest }, ref) => {
+    return (
+      <button type={type} ref={ref} className={styles.card} {...rest}>
+        {children}
+      </button>
+    );
+  },
+);
+
+ButtonCard.displayName = "ButtonCard";

package/src/components/Center/Center.module.css

@@ -0,0 +1,19 @@
+.center {
+  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-inline: auto;
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
+}
+
+.center.textCenter {
+  text-align: center;
+}
+
+.center.childrenCenter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}