feat: 同じデザインを複数のHTMLタグに適用する

package.json

@@ -14,6 +14,7 @@
 		"prepare": "husky install"
 	},
 	"dependencies": {
+		"clsx": "^2.1.1",
 		"next": "15.1.3",
 		"react": "19.0.0",
 		"react-dom": "19.0.0"

src/components/Sample.stories.tsx

@@ -1,7 +1,7 @@
-import type { ComponentStoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react";
 import { Sample } from "./Sample";
 
-type Story = ComponentStoryObj<typeof Sample>;
+type Story = StoryObj<typeof Sample>;
 
 const config = {
 	component: Sample,

src/components/comlete/button.module.css

@@ -0,0 +1,22 @@
+.button {
+	padding: 10px 20px;
+	border: none;
+	border-radius: 5px;
+	font-size: 16px;
+	cursor: pointer;
+	text-decoration: none;
+	width: 100%;
+	max-width: 320px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+}
+
+.primary {
+	background-color: #007bff;
+}
+
+.secondary {
+	background-color: #6c757d;
+}

src/components/comlete/buttonCommon.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+import styles from "./button.module.css";
+
+export type ButtonColor = "primary" | "secondary";
+
+const getButtonClassName = (color: ButtonColor) =>
+	clsx(styles.button, styles[color]);
+
+export default getButtonClassName;

src/components/comlete/buttton.stories.tsx

@@ -0,0 +1,11 @@
+import type { StoryObj } from "@storybook/react";
+import { Button } from "./use";
+
+type Story = StoryObj<typeof Button>;
+
+const config = {
+	component: Button,
+};
+export default config;
+
+export const Default: Story = {};

src/components/comlete/use.tsx

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+import getButtonClassName from "./buttonCommon";
+
+export const Button: FC = () => (
+	<button type="button" className={getButtonClassName("primary")}>
+		ボタン
+	</button>
+);

src/components/initial/button.module.css

@@ -0,0 +1,22 @@
+.button {
+	padding: 10px 20px;
+	border: none;
+	border-radius: 5px;
+	font-size: 16px;
+	cursor: pointer;
+	text-decoration: none;
+	width: 100%;
+	max-width: 320px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+}
+
+.primary {
+	background-color: #007bff;
+}
+
+.secondary {
+	background-color: #6c757d;
+}

src/components/initial/button.tsx

@@ -0,0 +1,22 @@
+import {
+	type ComponentPropsWithoutRef,
+	type ReactNode,
+	forwardRef,
+} from "react";
+import getButtonClassName, { type ButtonColor } from "./buttonCommon";
+
+type Props = {
+	children: ReactNode;
+	color?: ButtonColor;
+} & ComponentPropsWithoutRef<"button">;
+
+export const Button = forwardRef<HTMLButtonElement, Props>(function button(
+	{ children, type = "button", color = "primary", ...props },
+	ref,
+) {
+	return (
+		<button ref={ref} type={type} className={getButtonClassName(color)}>
+			{children}
+		</button>
+	);
+});

src/components/initial/buttonCommon.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+import styles from "./button.module.css";
+
+export type ButtonColor = "primary" | "secondary";
+
+const getButtonClassName = (color: ButtonColor) =>
+	clsx(styles.button, styles[color]);
+
+export default getButtonClassName;

src/components/initial/buttton.stories.tsx

@@ -0,0 +1,16 @@
+import type { StoryObj } from "@storybook/react";
+import { Button } from "./button";
+
+type Story = StoryObj<typeof Button>;
+
+const config = {
+	component: Button,
+	args: { children: "ボタン" },
+};
+export default config;
+
+export const Default: Story = {};
+
+export const Secondary: Story = {
+	args: { color: "secondary" },
+};

src/components/initial/link-button.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import {
+	type ComponentPropsWithoutRef,
+	type ReactNode,
+	forwardRef,
+} from "react";
+import styles from "./button.module.css";
+import getButtonClassName, { type ButtonColor } from "./buttonCommon";
+
+type Props = {
+	children: ReactNode;
+	color?: ButtonColor;
+	href: string;
+} & ComponentPropsWithoutRef<"a">;
+
+export const LinkButton = forwardRef<HTMLAnchorElement, Props>(function button(
+	{ children, href, color = "primary", ...props },
+	ref,
+) {
+	return (
+		<a ref={ref} href={href} className={getButtonClassName(color)}>
+			{children}
+		</a>
+	);
+});

src/components/initial/link-buttton.stories.tsx

@@ -0,0 +1,16 @@
+import type { StoryObj } from "@storybook/react";
+import { LinkButton } from "./link-button";
+
+type Story = StoryObj<typeof LinkButton>;
+
+const config = {
+	component: LinkButton,
+	args: { children: "ボタン", href: "/" },
+};
+export default config;
+
+export const Default: Story = {};
+
+export const Secondary: Story = {
+	args: { color: "secondary" },
+};

src/components/modify/button.module.css

@@ -0,0 +1,22 @@
+.button {
+	padding: 10px 20px;
+	border: none;
+	border-radius: 5px;
+	font-size: 16px;
+	cursor: pointer;
+	text-decoration: none;
+	width: 100%;
+	max-width: 320px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+}
+
+.primary {
+	background-color: #007bff;
+}
+
+.secondary {
+	background-color: #6c757d;
+}

src/components/modify/button.tsx

@@ -0,0 +1,43 @@
+import {
+	type ComponentPropsWithoutRef,
+	type ElementType,
+	type ForwardedRef,
+	forwardRef,
+} from "react";
+import getButtonClassName, { type ButtonColor } from "./buttonCommon";
+
+type ThemeProps = {
+	color?: ButtonColor;
+};
+
+type DistributiveOmit<T, K extends keyof T> = T extends unknown
+	? Omit<T, K>
+	: never;
+
+type As<T extends ElementType = ElementType> = { tag?: T };
+
+type PolymorphicProps<E extends ElementType, P> = As<E> &
+	P &
+	DistributiveOmit<ComponentPropsWithoutRef<E>, keyof P | "tag">;
+
+type Props<E extends ElementType = "button"> = PolymorphicProps<E, ThemeProps>;
+
+export const Button = forwardRef(function button<
+	E extends ElementType = "button",
+>(
+	{ tag, color = "primary", children, disabled, ...props }: Props<E>,
+	ref: ForwardedRef<ComponentPropsWithoutRef<E>["ref"]>,
+) {
+	const Tag = tag || "button";
+
+	return (
+		<Tag
+			ref={ref}
+			{...((!tag || tag === "button") && { type: "button", disabled })}
+			{...props}
+			className={getButtonClassName(color)}
+		>
+			{children}
+		</Tag>
+	);
+});

src/components/modify/buttonCommon.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+import styles from "./button.module.css";
+
+export type ButtonColor = "primary" | "secondary";
+
+const getButtonClassName = (color: ButtonColor) =>
+	clsx(styles.button, styles[color]);
+
+export default getButtonClassName;

src/components/modify/buttton.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj } from "@storybook/react";
+import { Button } from "./button";
+
+type Story = StoryObj<typeof Button>;
+
+const config = {
+	component: Button,
+	args: { children: "ボタン" },
+};
+export default config;
+
+export const Default: Story = {};
+
+export const Secondary: Story = {
+	args: { color: "secondary" },
+};
+
+export const Link: Story = {
+	args: { tag: "a", href: "/" },
+};
+
+export const Div: Story = {
+	args: { tag: "div" },
+};