Changes

9 changed files (+102/-35)

• bun.lockb
• packages/pwa/src/main.tsx
  • @@ -1,14 +1,11 @@
    // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only - import { ListRequestSchema } from "@yamori/proto/yamori/workspace/v1/list_request_pb.js"; - import { ListResponseSchema } from "@yamori/proto/yamori/workspace/v1/list_response_pb.js"; import { ProtoRPCProvider, type ProtoRPC, - useMethodQuery, ThemeProvider, - WorkspaceList, + WorkspaceSelectionPage, } from "@yamori/react_ui"; import { type FC } from "react"; import { createRoot } from "react-dom/client";
  • @@ -21,31 +18,7 @@ type: "module",
    }); const App: FC = () => { - const list = useMethodQuery({ - service: "yamori.workspace.v1.KeyValueStorageBasedWorkspaceService", - method: "List", - request: { - schema: ListRequestSchema, - data: {}, - }, - response: { - schema: ListResponseSchema, - }, - }); - - if (!list.isSuccess) { - return <p>Loading</p>; - } - - if (list.data.result.case === "systemError") { - return <p>System Error: {list.data.result.value.code}</p>; - } - - if (!list.data.result.case) { - return <p>Message Error (MISSING_CASE)</p>; - } - - return <WorkspaceList workspaces={list.data.result.value.workspaces} />; + return <WorkspaceSelectionPage />; }; const root = createRoot(document.body);
• packages/react_ui/.storybook/preview.tsx
  • @@ -3,15 +3,28 @@ // SPDX-License-Identifier: AGPL-3.0-only
    import { Preview } from "@storybook/react"; - import { ThemeProvider } from "../src/lib.ts"; + import { ProtoRPCProvider, type ProtoRPC, ThemeProvider } from "../src/lib.ts"; import css from "./preview.module.css"; + const rpc = { + send() { + // TODO: Implement + return new Promise((_resolve, reject) => { + setTimeout(() => { + reject(new Error("Not implemented")); + }, 1_000); + }); + }, + } satisfies ProtoRPC; + export default { decorators: [ (Story) => ( - <ThemeProvider className={css.theme}> - <Story /> - </ThemeProvider> + <ProtoRPCProvider rpc={rpc}> + <ThemeProvider className={css.theme}> + <Story /> + </ThemeProvider> + </ProtoRPCProvider> ), ], } satisfies Preview;
• packages/react_ui/package.json
  • @@ -22,9 +22,12 @@ "react": "19.x.x"
    }, "dependencies": { "@bufbuild/protobuf": "^2.2.2", + "@radix-ui/react-icons": "^1.3.2", "@radix-ui/themes": "^3.1.6", "@tanstack/react-query": "^5.62.8", - "@yamori/proto": "workspace:*" + "@yamori/proto": "workspace:*", + "i": "^0.3.7", + "npm": "^11.0.0" }, "devDependencies": { "@storybook/addon-essentials": "^8.4.7",
• packages/react_ui/src/components/WorkspaceList.stories.tsx > packages/react_ui/src/components/WorkspaceSelectionPage/WorkspaceList.stories.tsx
• packages/react_ui/src/components/WorkspaceList.tsx > packages/react_ui/src/components/WorkspaceSelectionPage/WorkspaceList.tsx
• packages/react_ui/src/components/WorkspaceSelectionPage.stories.tsx (new)
  • @@ -0,0 +1,14 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import type { Meta, StoryObj } from "@storybook/react"; + + import { WorkspaceSelectionPage } from "./WorkspaceSelectionPage.tsx"; + + export default { + component: WorkspaceSelectionPage, + } satisfies Meta<typeof WorkspaceSelectionPage>; + + type Story = StoryObj<typeof WorkspaceSelectionPage>; + + export const Default: Story = {};
• packages/react_ui/src/components/WorkspaceSelectionPage.tsx (new)
  • @@ -0,0 +1,64 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; + import { Box, Callout, Flex, Spinner, Text } from "@radix-ui/themes"; + import { ListRequestSchema } from "@yamori/proto/yamori/workspace/v1/list_request_pb.js"; + import { ListResponseSchema } from "@yamori/proto/yamori/workspace/v1/list_response_pb.js"; + import { type FC } from "react"; + + import { useMethodQuery } from "../contexts/Service.tsx"; + + import { WorkspaceList } from "./WorkspaceSelectionPage/WorkspaceList.tsx"; + + export interface WorkspaceSelectionPageProps { + className?: string | undefined; + } + + export const WorkspaceSelectionPage: FC<WorkspaceSelectionPageProps> = () => { + const list = useMethodQuery({ + service: "yamori.workspace.v1.KeyValueStorageBasedWorkspaceService", + method: "List", + request: { + schema: ListRequestSchema, + data: {}, + }, + response: { + schema: ListResponseSchema, + }, + }); + + if (list.status === "pending") { + return ( + <Flex align="center" gap="3"> + <Spinner /> + <Text>ワークスペースを読込中...</Text> + </Flex> + ); + } + + if (!list.data) { + // TODO: Handle error + return ( + <Box> + <Text>{String(list.error)}</Text> + </Box> + ); + } + + return ( + <Flex direction="column"> + {!!list.error && ( + <Callout.Root color="red"> + <Callout.Icon> + <ExclamationTriangleIcon /> + </Callout.Icon> + <Callout.Text>一覧の取得に失敗しました</Callout.Text> + </Callout.Root> + )} + {list.data.result.case === "ok" && ( + <WorkspaceList workspaces={list.data.result.value.workspaces} /> + )} + </Flex> + ); + };
• packages/react_ui/src/lib.ts
  • @@ -4,6 +4,6 @@
    import "@radix-ui/themes/styles.css"; export * from "./components/ThemeProvider.tsx"; - export * from "./components/WorkspaceList.tsx"; + export * from "./components/WorkspaceSelectionPage.tsx"; export * from "./contexts/Service.tsx";