feat: Storybook導入 + Buttonコンポーネントの追加 (#24)

.gitignore

@@ -9,3 +9,5 @@ node_modules
 
 /public/~partytown/
 /.snaplet/
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+	stories: ["../app/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+		"@storybook/addon-actions",
+		"@storybook/addon-a11y",
+		"@storybook/addon-themes",
+	],
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">

.storybook/preview.ts

@@ -0,0 +1,28 @@
+import "~/tailwind.css";
+
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview, ReactRenderer } from "@storybook/react";
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		actions: {
+			argTypesRegex: "^on[A-Z].*",
+		},
+	},
+	decorators: [
+		withThemeByClassName<ReactRenderer>({
+			themes: {
+				pink: "font-delagothic text-white",
+			},
+			defaultTheme: "pink",
+		}),
+	],
+};
+
+export default preview;

.vscode/settings.json

@@ -2,6 +2,10 @@
 	"[javascript][javascriptreact][typescript][typescriptreact][css][scss][html][json][jsonc][yaml]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
+	"tailwindCSS.experimental.classRegex": [
+		["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+		["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+	],
 	"typescript.enablePromptUseWorkspaceTsdk": true,
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

app/components/Button.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+	title: "Components/Button",
+	component: Button,
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["pink", "cyan", "emerald", "yellow"],
+		},
+		background: {
+			control: "boolean",
+		},
+	},
+};
+
+export default meta;
+
+export const Pink: StoryObj<typeof Button> = {
+	args: {
+		children: "ボタン",
+		variant: "pink",
+	},
+};
+
+export const Cyan: StoryObj<typeof Button> = {
+	args: {
+		children: "ボタン",
+		variant: "cyan",
+	},
+};
+
+export const Emerald: StoryObj<typeof Button> = {
+	args: {
+		children: "ボタン",
+		variant: "emerald",
+	},
+};
+
+export const Yellow: StoryObj<typeof Button> = {
+	args: {
+		children: "ボタン",
+		variant: "yellow",
+	},
+};
+
+export const NoBackground: StoryObj<typeof Button> = {
+	args: {
+		children: "ボタン",
+		background: false,
+	},
+};

app/components/Button.tsx

@@ -0,0 +1,71 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "~/libs/utils";
+
+const buttonVariants = cva("px-5 py-2 relative", {
+	variants: {},
+});
+
+const buttonThemeVariants = cva(
+	"-rotate-6 absolute inset-0 skew-x-12 border-2 border-white bg-size-button",
+	{
+		variants: {
+			variant: {
+				pink: "bg-button-pink bg-pink-400",
+				cyan: "bg-button-cyan bg-cyan-400",
+				emerald: "bg-button-emerald bg-emerald-400",
+				yellow: "bg-button-yellow bg-yellow-400",
+			},
+		},
+		defaultVariants: {
+			variant: "pink",
+		},
+	},
+);
+
+const buttonBgVariants = cva(
+	"-skew-x-12 absolute inset-0 rotate-3 bg-button-bg bg-size-button-bg bg-zinc-600",
+	{
+		variants: {
+			background: {
+				true: "",
+				false: "hidden",
+			},
+		},
+		defaultVariants: {
+			background: true,
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants>,
+		VariantProps<typeof buttonThemeVariants>,
+		VariantProps<typeof buttonBgVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{ className, asChild = false, children, variant, background, ...props },
+		ref,
+	) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp className={cn(buttonVariants({ className }))} ref={ref} {...props}>
+				<div className="absolute inset-0 drop-shadow-md">
+					<span className={buttonBgVariants({ background })} />
+					<span className={buttonThemeVariants({ variant })} />
+				</div>
+				<span className="drop-shadow-base">{children}</span>
+			</Comp>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

app/libs/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

app/root.tsx

@@ -1,12 +1,13 @@
+import "./tailwind.css";
+
+import { Partytown } from "@builder.io/partytown/react";
 import {
 	Links,
 	Meta,
 	Outlet,
 	Scripts,
 	ScrollRestoration,
 } from "@remix-run/react";
-import "./tailwind.css";
-import { Partytown } from "@builder.io/partytown/react";
 import { Suspense } from "react";
 import { Loading } from "./components/Loading";
 
@@ -16,6 +17,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
 			<head>
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link
+					rel="preconnect"
+					href="https://fonts.gstatic.com"
+					crossOrigin="anonymous"
+				/>
 				<Partytown debug forward={["dataLayer.push"]} />
 				{import.meta.env.VITE_GOOGLE_ANALYTICS_ID && (
 					<>
@@ -31,12 +38,16 @@ export function Layout({ children }: { children: React.ReactNode }) {
 								__html: `window.dataLayer||=[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','${import.meta.env.VITE_GOOGLE_ANALYTICS_ID}')`,
 							}}
 						/>
+						<link
+							href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap"
+							rel="stylesheet"
+						/>
 					</>
 				)}
 				<Meta />
 				<Links />
 			</head>
-			<body>
+			<body className="font-delagothic">
 				{children}
 				<ScrollRestoration />
 				<Scripts />

components.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "app/tailwind.css",
+		"baseColor": "zinc",
+		"cssVariables": false,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "~/components",
+		"utils": "~/libs/utils",
+		"ui": "~/components",
+		"lib": "~/libs",
+		"hooks": "~/hooks"
+	}
+}