From e48866369ba208fac91226cd9492695d0ba5d522 Mon Sep 17 00:00:00 2001 From: tianshen Date: Tue, 7 Apr 2026 17:39:50 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20feat(modal):=20=E9=96=8B?= =?UTF-8?q?=E9=96=89=E3=83=A2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?= =?UTF-8?q?=E8=AA=BF=E6=95=B4=EF=BC=88=E3=83=95=E3=82=A7=E3=83=BC=E3=83=89?= =?UTF-8?q?+=E8=BB=BD=E3=81=84=E6=B5=AE=E3=81=8D=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Overlay/Content のアニメーションを短くし、reduced-motion では opacity のみに退化させた。 Made-with: Cursor --- .gitignore | 4 ++ src/app/globals.css | 55 +++++++++++++++++++++++ src/components/ui/modal/index.stories.tsx | 52 +++++++++++++++++++++ src/components/ui/modal/index.tsx | 43 +++++++++++++----- 4 files changed, 142 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index c32bc99e..722fe85a 100644 --- a/.gitignore +++ b/.gitignore @@ -52,6 +52,10 @@ next-env.d.ts !.cursor/rules/ !.cursor/skills +# sparkle-design-internal をワークスペース内に置いた場合（スキルは .cursor/skills に同期） +# en: Local clone of internal repo at repo root — avoid accidental commits +/sparkle-design-internal/ + # vscode # .vscode diff --git a/src/app/globals.css b/src/app/globals.css index 7a5c3bae..a997b818 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -126,6 +126,61 @@ height: 0; } } + +@keyframes sparkle-overlay-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes sparkle-overlay-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes sparkle-modal-in { + from { + opacity: 0; + transform: translateY(8px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0px) scale(1); + } +} +@keyframes sparkle-modal-out { + from { + opacity: 1; + transform: translateY(0px) scale(1); + } + to { + opacity: 0; + transform: translateY(6px) scale(0.98); + } +} + +@keyframes sparkle-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes sparkle-fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} @utility accordion-down { animation: accordion-down 0.2s ease-out; } diff --git a/src/components/ui/modal/index.stories.tsx b/src/components/ui/modal/index.stories.tsx index fb60b22c..6132778c 100644 --- a/src/components/ui/modal/index.stories.tsx +++ b/src/components/ui/modal/index.stories.tsx @@ -234,3 +234,55 @@ export const EnabledOverlayClickToClose: Story = { ); }, }; + +/** + * 開閉モーション（オーバーレイフェード＋パネル fade／zoom）の確認用。 + * en: For verifying open/close motion (overlay fade + panel fade/zoom). + */ +export const MotionPreview: Story = { + parameters: { + layout: "fullscreen", + docs: { + description: { + story: + "全画面レイアウトでスクリムとパネルの動きを確認する。**開く**：トリガーボタン。**閉じる**：×／キャンセル／保存／Esc。オーバーレイクリックは既定で閉じない（仕様確認用）。オーバーレイはフェード（Open 180ms / Close 160ms）、コンテンツは opacity + translateY + scale（Open 240ms / delay 20ms、Close 200ms）で出入りする。\n\nen: Use fullscreen to judge scrim and panel motion. Trigger opens; close via ×, footer buttons, or Esc. Overlay fades (open 180ms, close 160ms). Content enters/leaves with opacity + translateY + scale (open 240ms with 20ms delay, close 200ms).", + }, + }, + }, + render: () => { + const [open, setOpen] = useState(false); + return ( +
+ + + + + + + モーション確認 + + + +

+ 開閉を繰り返して、オーバーレイのフェードとパネルのスケール／不透明度の同期を確認してください。 +

+ + + + + + + +
+ ); + }, +}; diff --git a/src/components/ui/modal/index.tsx b/src/components/ui/modal/index.tsx index e0024e7f..ac27870b 100644 --- a/src/components/ui/modal/index.tsx +++ b/src/components/ui/modal/index.tsx @@ -127,7 +127,13 @@ function ModalOverlay({ - - {children} - + + {children} + + ); } From d06025e787fe87f6c3ac3aa92c2f25c9e6f8b323 Mon Sep 17 00:00:00 2001 From: tianshen Date: Tue, 7 Apr 2026 17:44:30 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E2=99=BF=20fix(storybook):=20Link=20story?= =?UTF-8?q?=20=E3=81=AE=20href=20=E3=82=92=E6=9C=89=E5=8A=B9=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit jsx-a11y/anchor-is-valid を満たすため、Storybook の Link ストーリーで # を使わないようにした。 Made-with: Cursor --- src/components/ui/link/index.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ui/link/index.stories.tsx b/src/components/ui/link/index.stories.tsx index f27d460d..f63599bd 100644 --- a/src/components/ui/link/index.stories.tsx +++ b/src/components/ui/link/index.stories.tsx @@ -26,7 +26,7 @@ export const Default: Story = { args: { children: "リンクテキスト", isOpenInNew: false, - href: "#", + href: "/", }, }; @@ -34,7 +34,7 @@ export const ExternalLink: Story = { args: { children: "リンクテキスト", isOpenInNew: true, - href: "#", + href: "https://example.com", }, }; @@ -45,7 +45,7 @@ export const ExternalLink: Story = { export const AsChild: Story = { render: () => ( - next/link 等に置き換え可能 + next/link 等に置き換え可能 ), }; @@ -71,6 +71,6 @@ export const CustomTypography: Story = { args: { children: "カスタムタイポグラフィ", className: "character-4-bold-pro", - href: "#", + href: "/", }, }; From 01fe0837e35639016c774cdb09ec8cf74ede9ab8 Mon Sep 17 00:00:00 2001 From: tianshen Date: Tue, 7 Apr 2026 17:50:10 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=94=A7=20chore:=20Vercel=20=E3=81=AE?= =?UTF-8?q?=20postinstall=20=E5=A4=B1=E6=95=97=E3=82=92=E5=9B=9E=E9=81=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit postinstall の lightningcss version チェックが環境によって失敗するため削除する。 Made-with: Cursor --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 4322518a..056e2df2 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "build:registry:merge": "node scripts/merge-registry.mjs", "build:registry:vercel": "bash scripts/build-registry-vercel.sh", "preinstall": "npx only-allow pnpm", - "postinstall": "npx lightningcss --version || true", "build:package": "rm -rf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json", "format": "prettier --config ./.prettierrc -w \"**/*.{js,ts,tsx,css,md,json}\"", "format:check": "prettier --config ./.prettierrc --check \"**/*.{js,ts,tsx,css,md,json}\"", From 4ed686c02bf4e2c1a19600643ae1720b239cc19d Mon Sep 17 00:00:00 2001 From: tianshen Date: Tue, 7 Apr 2026 18:02:33 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BF=20fix(storybook):=20AsChild=20?= =?UTF-8?q?=E3=81=AE=E5=86=85=E9=83=A8=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92?= =?UTF-8?q?=20next/link=20=E3=81=AB=E7=BD=AE=E6=8F=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Next.js の no-html-link-for-pages に従い、Story 内の を next/link に変更する。 Made-with: Cursor --- src/components/ui/link/index.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ui/link/index.stories.tsx b/src/components/ui/link/index.stories.tsx index f63599bd..6300dc71 100644 --- a/src/components/ui/link/index.stories.tsx +++ b/src/components/ui/link/index.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import NextLink from "next/link"; import React from "react"; import { Link } from "./index"; @@ -45,7 +46,7 @@ export const ExternalLink: Story = { export const AsChild: Story = { render: () => ( - next/link 等に置き換え可能 + next/link 等に置き換え可能 ), };