Dropdownを作る

package.json

@@ -27,14 +27,15 @@
  "type-check": "tsc --noEmit",
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build",
- "test": "vitest",
- "test:ui": "vitest --ui",
- "coverage": "vitest run --coverage",
+ "test": "TZ=UTC vitest",
+ "test:ui": "TZ=UTC vitest --ui",
+ "coverage": "TZ=UTC vitest run --coverage",
  "test-storybook": "test-storybook",
  "test-storybook:ci": "pnpm dlx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook --quiet && pnpm dlx http-server storybook-static --port 6006 --silent\" \"pnpm dlx wait-on tcp:6006 && pnpm run test-storybook --maxWorkers=2\"",
  "install-playwright": "playwright install --with-deps"
  },
  "dependencies": {
+ "@floating-ui/react": "0.26.24",
  "@mdx-js/loader": "3.0.1",
  "@mdx-js/react": "3.0.1",
  "@next/env": "14.2.13",

src/app/_styles/globals.css

@@ -24,7 +24,7 @@
  --bg-warning: 254 249 195;
  --bg-success: 220 252 231;
  --bg-info: 219 234 254;
- --bg-hover: 243 244 246;
+ --bg-hover: 229 231 235;
  --bg-active: 209 213 219;
  --bg-transparent: transparent;
  --bg-back-drop: 0 0 0 0.5;

src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownMenu } from './dropdown-menu';
+import { MoonStar } from 'lucide-react';
+
+const meta: Meta<typeof DropdownMenu.Root> = {
+ title: 'components/dropdown-menu',
+ component: DropdownMenu.Root,
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu.Root>;
+
+export const Default: Story = {
+ render: () => (
+ <DropdownMenu.Root>
+ <DropdownMenu.Trigger text="Options" />
+ <DropdownMenu.Content>
+ <DropdownMenu.Item
+ label="Item 1"
+ onClick={() => console.log(1)}
+ />
+ <DropdownMenu.Item
+ label="Item 2"
+ onClick={() => console.log(2)}
+ />
+ <DropdownMenu.Item
+ label="Item 3"
+ onClick={() => console.log(3)}
+ />
+ </DropdownMenu.Content>
+ </DropdownMenu.Root>
+ ),
+};
+
+export const TriggerByIcon: Story = {
+ render: () => (
+ <DropdownMenu.Root>
+ <DropdownMenu.IconTrigger
+ icon={<MoonStar className="size-8" />}
+ label="Options"
+ />
+ <DropdownMenu.Content>
+ <DropdownMenu.Item
+ label="Item 1"
+ onClick={() => console.log(1)}
+ />
+ <DropdownMenu.Item
+ label="Item 2"
+ onClick={() => console.log(2)}
+ />
+ <DropdownMenu.Item
+ label="Item 3"
+ onClick={() => console.log(3)}
+ />
+ </DropdownMenu.Content>
+ </DropdownMenu.Root>
+ ),
+};