Skip to content

Commit 1cabbdc

Browse files
yn1323claude
yn1323
and
claude
committed
refactor: 小コンポーネントのStoriesをVariantsパターンに統合してVRTキャプチャ削減
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8bd9216 commit 1cabbdc

File tree

9 files changed

+236
-143
lines changed

9 files changed

+236
-143
lines changed

‎src/components/features/Dashboard/RecruitmentCard/index.stories.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Flex, Text } from "@chakra-ui/react";
12
import type { Meta, StoryObj } from "@storybook/react-vite";
23
import { mockRecruitments } from "../storyMocks";
34
import { RecruitmentCard } from "./index";
@@ -13,16 +14,24 @@ const meta = {
1314
export default meta;
1415
type Story = StoryObj<typeof meta>;
1516

16-
export const Open: Story = {
17-
args: {
18-
recruitment: mockRecruitments[0],
19-
onOpenShiftBoard: () => {},
20-
},
21-
};
17+
const AllVariants = () => (
18+
<Flex direction="column" gap={4} p={4}>
19+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted">
20+
募集中
21+
</Text>
22+
<RecruitmentCard recruitment={mockRecruitments[0]} onOpenShiftBoard={() => {}} />
23+
24+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
25+
完了
26+
</Text>
27+
<RecruitmentCard recruitment={mockRecruitments[1]} onOpenShiftBoard={() => {}} />
28+
</Flex>
29+
);
2230

23-
export const Completed: Story = {
31+
export const Variants: Story = {
32+
render: () => <AllVariants />,
2433
args: {
25-
recruitment: mockRecruitments[1],
34+
recruitment: mockRecruitments[0],
2635
onOpenShiftBoard: () => {},
2736
},
2837
};

‎src/components/features/Dashboard/StaffListItem/index.stories.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box } from "@chakra-ui/react";
1+
import { Box, Flex, Text } from "@chakra-ui/react";
22
import type { Meta, StoryObj } from "@storybook/react-vite";
33
import { mockStaffs } from "../storyMocks";
44
import { StaffListItem } from "./index";
@@ -9,29 +9,33 @@ const meta = {
99
parameters: {
1010
layout: "padded",
1111
},
12-
decorators: [
13-
(Story) => (
14-
<Box border="1px solid" borderColor="gray.200" borderRadius="lg" overflow="hidden">
15-
<Story />
16-
</Box>
17-
),
18-
],
1912
} satisfies Meta<typeof StaffListItem>;
2013

2114
export default meta;
2215
type Story = StoryObj<typeof meta>;
2316

24-
export const Admin: Story = {
25-
args: {
26-
staff: mockStaffs[0],
27-
onEdit: () => {},
28-
onDelete: () => {},
29-
},
30-
};
17+
const AllVariants = () => (
18+
<Flex direction="column" gap={4} p={4}>
19+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted">
20+
管理者
21+
</Text>
22+
<Box border="1px solid" borderColor="gray.200" borderRadius="lg" overflow="hidden">
23+
<StaffListItem staff={mockStaffs[0]} onEdit={() => {}} onDelete={() => {}} />
24+
</Box>
3125

32-
export const Staff: Story = {
26+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
27+
スタッフ
28+
</Text>
29+
<Box border="1px solid" borderColor="gray.200" borderRadius="lg" overflow="hidden">
30+
<StaffListItem staff={mockStaffs[1]} onEdit={() => {}} onDelete={() => {}} />
31+
</Box>
32+
</Flex>
33+
);
34+
35+
export const Variants: Story = {
36+
render: () => <AllVariants />,
3337
args: {
34-
staff: mockStaffs[1],
38+
staff: mockStaffs[0],
3539
onEdit: () => {},
3640
onDelete: () => {},
3741
},

‎src/components/features/ShiftBoard/ShiftBoardHeader/index.stories.tsx‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Flex, Text } from "@chakra-ui/react";
12
import type { Meta, StoryObj } from "@storybook/react-vite";
23
import { ShiftBoardHeader } from "./index";
34

@@ -12,7 +13,34 @@ const meta = {
1213
export default meta;
1314
type Story = StoryObj<typeof meta>;
1415

15-
export const Normal: Story = {
16+
const AllVariants = () => (
17+
<Flex direction="column" gap={4}>
18+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" px={4} pt={4}>
19+
未確定
20+
</Text>
21+
<ShiftBoardHeader
22+
periodLabel="1/20(月)〜1/26(日) のシフト"
23+
confirmedAt={null}
24+
onConfirm={() => {}}
25+
viewMode="daily"
26+
onViewModeChange={() => {}}
27+
/>
28+
29+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" px={4} mt={2}>
30+
確定済み
31+
</Text>
32+
<ShiftBoardHeader
33+
periodLabel="1/20(月)〜1/26(日) のシフト"
34+
confirmedAt={new Date("2026-03-28T23:15:00")}
35+
onConfirm={() => {}}
36+
viewMode="overview"
37+
onViewModeChange={() => {}}
38+
/>
39+
</Flex>
40+
);
41+
42+
export const Variants: Story = {
43+
render: () => <AllVariants />,
1644
args: {
1745
periodLabel: "1/20(月)〜1/26(日) のシフト",
1846
confirmedAt: null,
@@ -21,11 +49,3 @@ export const Normal: Story = {
2149
onViewModeChange: () => {},
2250
},
2351
};
24-
25-
export const Confirmed: Story = {
26-
args: {
27-
...Normal.args,
28-
confirmedAt: new Date("2026-03-28T23:15:00"),
29-
viewMode: "overview",
30-
},
31-
};

‎src/components/features/ShiftBoard/ShiftBoardSPHeader/index.stories.tsx‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Flex, Text } from "@chakra-ui/react";
12
import type { Meta, StoryObj } from "@storybook/react-vite";
23
import { ShiftBoardSPHeader } from "./index";
34

@@ -15,7 +16,34 @@ const meta = {
1516
export default meta;
1617
type Story = StoryObj<typeof meta>;
1718

18-
export const Normal: Story = {
19+
const AllVariants = () => (
20+
<Flex direction="column" gap={4}>
21+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" px={4} pt={4}>
22+
未確定
23+
</Text>
24+
<ShiftBoardSPHeader
25+
periodLabel="1/20(月)〜1/26(日) のシフト"
26+
confirmedAt={null}
27+
onConfirm={() => {}}
28+
viewMode="daily"
29+
onViewModeChange={() => {}}
30+
/>
31+
32+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" px={4} mt={2}>
33+
確定済み
34+
</Text>
35+
<ShiftBoardSPHeader
36+
periodLabel="1/20(月)〜1/26(日) のシフト"
37+
confirmedAt={new Date("2026-03-28T23:15:00")}
38+
onConfirm={() => {}}
39+
viewMode="overview"
40+
onViewModeChange={() => {}}
41+
/>
42+
</Flex>
43+
);
44+
45+
export const Variants: Story = {
46+
render: () => <AllVariants />,
1947
args: {
2048
periodLabel: "1/20(月)〜1/26(日) のシフト",
2149
confirmedAt: null,
@@ -24,11 +52,3 @@ export const Normal: Story = {
2452
onViewModeChange: () => {},
2553
},
2654
};
27-
28-
export const Confirmed: Story = {
29-
args: {
30-
...Normal.args,
31-
confirmedAt: new Date("2026-03-28T23:15:00"),
32-
viewMode: "overview",
33-
},
34-
};

‎src/components/features/StaffView/ExpiredView/index.stories.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
1+
import { Flex, Text } from "@chakra-ui/react";
12
import type { Meta, StoryObj } from "@storybook/react-vite";
23
import { ExpiredView } from "./index";
34

45
const meta = {
5-
title: "features/StaffView/ExpiredView",
6+
title: "Features/StaffView/ExpiredView",
67
component: ExpiredView,
78
} satisfies Meta<typeof ExpiredView>;
89

910
export default meta;
1011
type Story = StoryObj<typeof meta>;
1112

12-
export const WithReissueLink: Story = {
13-
args: {
14-
recruitmentId: "abc123",
15-
},
16-
};
13+
const AllVariants = () => (
14+
<Flex direction="column" gap={4} p={4}>
15+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted">
16+
再発行リンクあり
17+
</Text>
18+
<ExpiredView recruitmentId="abc123" />
19+
20+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
21+
再発行リンクなし
22+
</Text>
23+
<ExpiredView recruitmentId={null} />
24+
</Flex>
25+
);
1726

18-
export const WithoutReissueLink: Story = {
27+
export const Variants: Story = {
28+
render: () => <AllVariants />,
1929
args: {
20-
recruitmentId: null,
30+
recruitmentId: "abc123",
2131
},
2232
};

‎src/components/features/StaffView/ReissueForm/index.stories.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { Flex, Text } from "@chakra-ui/react";
12
import type { Meta, StoryObj } from "@storybook/react-vite";
23
import { ReissueForm } from "./index";
34

45
const meta = {
5-
title: "features/StaffView/ReissueForm",
6+
title: "Features/StaffView/ReissueForm",
67
component: ReissueForm,
78
decorators: [
89
(Story) => (
@@ -16,16 +17,24 @@ const meta = {
1617
export default meta;
1718
type Story = StoryObj<typeof meta>;
1819

19-
export const Basic: Story = {
20-
args: {
21-
onSubmit: () => {},
22-
isSubmitting: false,
23-
},
24-
};
20+
const AllVariants = () => (
21+
<Flex direction="column" gap={4}>
22+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted">
23+
通常
24+
</Text>
25+
<ReissueForm onSubmit={() => {}} isSubmitting={false} />
26+
27+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
28+
送信中
29+
</Text>
30+
<ReissueForm onSubmit={() => {}} isSubmitting={true} />
31+
</Flex>
32+
);
2533

26-
export const Submitting: Story = {
34+
export const Variants: Story = {
35+
render: () => <AllVariants />,
2736
args: {
2837
onSubmit: () => {},
29-
isSubmitting: true,
38+
isSubmitting: false,
3039
},
3140
};

‎src/components/ui/Empty/index.stories.tsx‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Button, Icon } from "@chakra-ui/react";
1+
import { Button, Flex, Icon, Text } from "@chakra-ui/react";
22
import type { Meta, StoryObj } from "@storybook/react-vite";
33
import { LuInbox, LuPlus, LuSearch, LuUsers } from "react-icons/lu";
44
import { Empty } from ".";
55

66
const meta = {
7-
title: "ui/Empty",
7+
title: "UI/Empty",
88
component: Empty,
99
args: {
1010
title: "データがありません",
@@ -13,34 +13,40 @@ const meta = {
1313
} satisfies Meta<typeof Empty>;
1414
export default meta;
1515

16-
export const Basic: StoryObj<typeof meta> = {};
16+
const AllVariants = () => (
17+
<Flex direction="column" gap={4} p={4}>
18+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted">
19+
基本
20+
</Text>
21+
<Empty title="データがありません" description="新しいデータを追加してください" />
1722

18-
export const WithIcon: StoryObj<typeof meta> = {
19-
args: {
20-
icon: LuInbox,
21-
title: "受信トレイは空です",
22-
description: "新しいメッセージはありません",
23-
},
24-
};
23+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
24+
アイコン付き
25+
</Text>
26+
<Empty icon={LuInbox} title="受信トレイは空です" description="新しいメッセージはありません" />
2527

26-
export const WithAction: StoryObj<typeof meta> = {
27-
args: {
28-
icon: LuUsers,
29-
title: "スタッフがいません",
30-
description: "スタッフを追加して始めましょう",
31-
action: (
32-
<Button colorPalette="teal">
33-
<Icon as={LuPlus} mr={1} />
34-
スタッフを追加
35-
</Button>
36-
),
37-
},
38-
};
28+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
29+
アクション付き
30+
</Text>
31+
<Empty
32+
icon={LuUsers}
33+
title="スタッフがいません"
34+
description="スタッフを追加して始めましょう"
35+
action={
36+
<Button colorPalette="teal">
37+
<Icon as={LuPlus} mr={1} />
38+
スタッフを追加
39+
</Button>
40+
}
41+
/>
3942

40-
export const SearchNoResults: StoryObj<typeof meta> = {
41-
args: {
42-
icon: LuSearch,
43-
title: "検索結果が見つかりません",
44-
description: "別のキーワードで検索してみてください",
45-
},
43+
<Text fontSize="xs" fontWeight="semibold" color="fg.muted" mt={2}>
44+
検索結果なし
45+
</Text>
46+
<Empty icon={LuSearch} title="検索結果が見つかりません" description="別のキーワードで検索してみてください" />
47+
</Flex>
48+
);
49+
50+
export const Variants: StoryObj<typeof meta> = {
51+
render: () => <AllVariants />,
4652
};

0 commit comments

Comments
 (0)
⚡