Changes
8 changed files (+145/-22)
-
-
@@ -0,0 +1,52 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Button } from "@radix-ui/themes"; import type { Meta, StoryObj } from "@storybook/react"; import * as Empty from "./Empty.ts"; export default { component: Empty.Root, args: { children: ( <> <Empty.Title>Title</Empty.Title> <Empty.Description>Description Text.</Empty.Description> <Empty.Actions> <Button>Foo</Button> <Button variant="outline">Bar</Button> </Empty.Actions> </> ), }, } satisfies Meta<(typeof Empty)["Root"]>; type Story = StoryObj<(typeof Empty)["Root"]>; export const Defaults: Story = {}; export const WithoutActions: Story = { args: { children: ( <> <Empty.Title>Title</Empty.Title> <Empty.Description>Description Text.</Empty.Description> </> ), }, }; export const WithoutDescription: Story = { args: { children: ( <> <Empty.Title>Title</Empty.Title> <Empty.Actions> <Button>Foo</Button> <Button variant="outline">Bar</Button> </Empty.Actions> </> ), }, };
-
-
-
@@ -0,0 +1,7 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only export * from "./Empty/Root.tsx"; export * from "./Empty/Title.tsx"; export * from "./Empty/Actions.tsx"; export * from "./Empty/Description.tsx";
-
-
-
@@ -0,0 +1,17 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Flex } from "@radix-ui/themes"; import { type FC, type ReactElement } from "react"; export interface ActionsProps { children: ReactElement | ReactElement[]; } export const Actions: FC<ActionsProps> = ({ children }) => { return ( <Flex direction="column" display="inline-flex" minWidth="8rem" mt="4" gap="2"> {children} </Flex> ); };
-
-
-
@@ -0,0 +1,17 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Text } from "@radix-ui/themes"; import { type FC, type ReactNode } from "react"; export interface DescriptionProps { children: ReactNode; } export const Description: FC<DescriptionProps> = ({ children }) => { return ( <Text as="p" size="2" align="center"> {children} </Text> ); };
-
-
-
@@ -0,0 +1,17 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Flex } from "@radix-ui/themes"; import { type FC, type ReactNode } from "react"; interface RootProps { children: ReactNode; } export const Root: FC<RootProps> = ({ children }) => { return ( <Flex mt="7" direction="column" align="center" gap="3"> {children} </Flex> ); };
-
-
-
@@ -0,0 +1,11 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Heading, type HeadingProps } from "@radix-ui/themes"; import { type FC } from "react"; export type TitleProps = Omit<HeadingProps, "size">; export const Title: FC<TitleProps> = ({ as = "h2", ...rest }) => { return <Heading as={as} {...rest} size="4" />; };
-
-
-
@@ -4,13 +4,14 @@import "../../../../polyfill.ts"; import { CheckCircledIcon } from "@radix-ui/react-icons"; import { Button, Flex, Heading, Text, TextField } from "@radix-ui/themes"; import { Button, Flex, TextField } from "@radix-ui/themes"; import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js"; import { CreateRequestSchema } from "@yamori/proto/yamori/worker/v1/create_request_pb.js"; import { CreateResponseSchema } from "@yamori/proto/yamori/worker/v1/create_response_pb.js"; import { type FC, use } from "react"; import { useForm } from "react-hook-form"; import * as Empty from "../../../../components/Empty.ts"; import { ManagedErrorCallout } from "../../../../components/ErrorCallout.ts"; import * as FormField from "../../../../components/FormField.ts"; import { useMethodMutation } from "../../../../contexts/Service.tsx";
-
@@ -80,17 +81,17 @@ });if (!workspace.workerAddKey) { return ( <Flex mt="7" direction="column" align="center" gap="3"> <Heading as="h2" size="4"> 権限がありません </Heading> <Text as="p" size="2" align="center"> <Empty.Root> <Empty.Title>権限がありません</Empty.Title> <Empty.Description> このワークスペース上に労働者を登録する権限がありません。 </Text> <Button asChild mt="4" size="3"> <a href={`/${workspace.id?.value}/workers`}>一覧へ</a> </Button> </Flex> </Empty.Description> <Empty.Actions> <Button asChild size="3"> <a href={`/${workspace.id?.value}/workers`}>一覧へ</a> </Button> </Empty.Actions> </Empty.Root> ); }
-
-
-
@@ -3,12 +3,13 @@ // SPDX-License-Identifier: AGPL-3.0-onlyimport "../../../polyfill.ts"; import { Button, Flex, Heading, Text } from "@radix-ui/themes"; import { Button, Flex } from "@radix-ui/themes"; import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js"; import { ListRequestSchema } from "@yamori/proto/yamori/worker/v1/list_request_pb.js"; import { ListResponseSchema } from "@yamori/proto/yamori/worker/v1/list_response_pb.js"; import { type FC } from "react"; import * as Empty from "../../../components/Empty.ts"; import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts"; import { useMethodQuery } from "../../../contexts/Service.tsx"; import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";
-
@@ -52,19 +53,19 @@const Body: FC<BodyProps> = ({ workers, workspace }) => { if (workers.fetchStatus === "idle" && workers.data?.workers.length === 0) { return ( <Flex mt="7" direction="column" align="center" gap="3"> <Heading as="h2" size="4"> 労働者が登録されていません </Heading> <Text as="p" size="2" align="center"> <Empty.Root> <Empty.Title>労働者が登録されていません</Empty.Title> <Empty.Description> ワークスペース内に労働者がまだ一人も登録されていません。 </Text> </Empty.Description> {workspace.workerAddKey && ( <Button asChild mt="4" size="3"> <a href={`/${workspace.id?.value}/workers/new`}>登録する</a> </Button> <Empty.Actions> <Button asChild size="3"> <a href={`/${workspace.id?.value}/workers/new`}>登録する</a> </Button> </Empty.Actions> )} </Flex> </Empty.Root> ); }
-