-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only
import { create } from "@bufbuild/protobuf";
import { ListResponseSchema } from "@yamori/proto/yamori/workspace/v1/list_response_pb.js";
import { KeyValueStorageBasedWorkspaceService } from "@yamori/proto/yamori/workspace/v1/key_value_storage_based_workspace_service_pb.js";
import type { Meta, StoryObj } from "@storybook/react";
import {
withMockedBackend,
mock,
} from "../../.storybook/decorators/withMockedBackend.tsx";
import { WorkspaceSelectionPage } from "./WorkspaceSelectionPage.tsx";
export default {
component: WorkspaceSelectionPage,
} satisfies Meta<typeof WorkspaceSelectionPage>;
type Story = StoryObj<typeof WorkspaceSelectionPage>;
const success = create(ListResponseSchema, {
result: {
case: "ok",
value: {
workspaces: [
{
id: { value: "ws-foo" },
displayName: "株式会社あああ",
},
{
id: { value: "ws-bar" },
displayName: "有限会社いいい",
},
],
},
},
});
export const Success: Story = {
decorators: [
withMockedBackend([
mock(KeyValueStorageBasedWorkspaceService.method.list, () => success),
]),
],
};
export const SlowLoad: Story = {
decorators: [
withMockedBackend([
mock(KeyValueStorageBasedWorkspaceService.method.list, () => success, {
delayMs: 2_000,
}),
]),
],
};
export const NoWorkspaces: Story = {
decorators: [
withMockedBackend([
mock(KeyValueStorageBasedWorkspaceService.method.list, () => {
return create(ListResponseSchema, {
result: {
case: "ok",
value: {
workspaces: [],
},
},
});
}),
]),
],
};
const systemError = create(ListResponseSchema, {
result: {
case: "systemError",
value: {
code: "SAMPLE_ERR",
message: "This is sample error message",
},
},
});
export const ListLoadError: Story = {
decorators: [
withMockedBackend([
mock(KeyValueStorageBasedWorkspaceService.method.list, () => systemError, {
delayMs: 200,
}),
]),
],
};
export const FlakyListLoading: Story = {
decorators: [
withMockedBackend([
mock(
KeyValueStorageBasedWorkspaceService.method.list,
() => (Math.random() >= 0.5 ? success : systemError),
{ delayMs: 200 },
),
]),
],
};
export const Playground: Story = {};