From 3043cde737df6af9311507583bd5042439ad7189 Mon Sep 17 00:00:00 2001
From: Haruko Sugimoto <haruko.sugimoto@goodpatch.com>
Date: Tue, 7 Apr 2026 18:01:05 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Update=20.gitignore=20and?=
 =?UTF-8?q?=20Storybook=20configuration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added .claude/skills/ to .gitignore for internal files.
- Enhanced Storybook main configuration to include Vite path aliasing for "@/ imports".
- Improved dialog component animations for open/close states with detailed easing effects.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .gitignore                         |  3 +++
 .storybook/main.ts                 | 20 ++++++++++++++++++++
 src/components/ui/dialog/index.tsx | 16 ++++++++++++++--
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index c32bc99e..52a4c637 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,6 +52,9 @@ next-env.d.ts
 !.cursor/rules/
 !.cursor/skills
 
+# claude skills (internal, not for version control)
+.claude/skills/
+
 # vscode
 # .vscode
 
diff --git a/.storybook/main.ts b/.storybook/main.ts
index d1a12a0e..4bd54675 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,15 @@
 // Storybook のメイン設定ファイル
 // en: Main configuration for Storybook
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
 import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
 
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 
@@ -32,5 +40,17 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: "react-docgen-typescript",
   },
+
+  // Vite のパスエイリアス設定
+  // en: Configure Vite path aliases to resolve @/ imports
+  viteFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "@": path.resolve(dirname, "../src"),
+      };
+    }
+    return config;
+  },
 };
 export default config;
diff --git a/src/components/ui/dialog/index.tsx b/src/components/ui/dialog/index.tsx
index 26d3d171..95161307 100644
--- a/src/components/ui/dialog/index.tsx
+++ b/src/components/ui/dialog/index.tsx
@@ -94,7 +94,13 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50",
+        // オープン：ease-out で 400ms フェードイン
+        // en: open — fade-in over 400ms with ease-out
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:animation-duration-400 data-[state=open]:[--tw-ease:ease-out]",
+        // クローズ：ease-in で 3000ms フェードアウト
+        // en: close — fade-out over 3000ms with ease-in
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:animation-duration-3000 data-[state=closed]:[--tw-ease:ease-in]",
         className
       )}
       {...props}
@@ -116,7 +122,13 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-popout duration-200 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-white p-6 shadow-popout sm:max-w-lg",
+          // オープン：下から 6px スライドアップ + フェードイン + scale 0.97→1.0（expo-out）
+          // en: open — slide up 6px + fade-in + scale 0.97→1.0 with expo-out easing
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=open]:zoom-in-97 data-[state=open]:animation-duration-400 data-[state=open]:[--tw-ease:cubic-bezier(0.16,1,0.3,1)]",
+          // クローズ：スライドなし・スケールのみでその場に収縮
+          // en: close — scale-only shrink, no slide
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-97 data-[state=closed]:animation-duration-300 data-[state=closed]:[--tw-ease:cubic-bezier(0.4,0,1,1)]",
           className
         )}
         {...props}