react_ui: ロゴ

Changes

6 changed files (+85/-4)

• packages/react_ui/src/components/Logo.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 { Logo } from "./Logo.tsx"; + + export default { + component: Logo, + } satisfies Meta<typeof Logo>; + + type Story = StoryObj<typeof Logo>; + + export const Defaults: Story = {};
• packages/react_ui/src/components/Logo.tsx (new)
  • @@ -0,0 +1,34 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: AGPL-3.0-only + + import { type CSSProperties, type FC } from "react"; + + export interface LogoProps { + className?: string; + style?: CSSProperties; + } + + export const Logo: FC<LogoProps> = (props) => { + return ( + <svg + {...props} + xmlns="http://www.w3.org/2000/svg" + fill="none" + role="img" + aria-label="Yamori" + width="auto" + height="1em" + viewBox="0 0 232 71" + > + <path + fill="currentColor" + fill-opacity=".8" + d="M231.073 19.281V70h-7.078V19.281h7.078ZM223.432 5.36c0-1.28.344-2.359 1.032-3.234.718-.875 1.765-1.313 3.14-1.313 1.375 0 2.422.438 3.141 1.313.719.875 1.078 1.953 1.078 3.234 0 1.25-.359 2.313-1.078 3.188-.719.844-1.766 1.265-3.141 1.265s-2.422-.421-3.14-1.265c-.688-.875-1.032-1.938-1.032-3.188ZM205.148 27.39V70h-7.079V19.281h6.844l.235 8.11Zm13.453-8.437v6.938a12.697 12.697 0 0 0-1.735-.235 15.824 15.824 0 0 0-1.828-.093c-1.719 0-3.234.359-4.547 1.078-1.281.718-2.375 1.734-3.281 3.047-.906 1.312-1.625 2.843-2.156 4.593-.5 1.75-.828 3.657-.985 5.719l-2.015 1.172c0-3.156.25-6.11.75-8.86.531-2.75 1.328-5.171 2.39-7.265 1.094-2.094 2.485-3.735 4.172-4.922 1.688-1.188 3.703-1.781 6.047-1.781.5 0 1.094.062 1.781.187.688.125 1.157.266 1.407.422ZM153.229 47.172v-5.016c0-3.906.484-7.343 1.453-10.312.969-2.969 2.312-5.453 4.031-7.453 1.719-2 3.734-3.5 6.047-4.5 2.344-1.032 4.875-1.547 7.594-1.547 2.812 0 5.375.515 7.687 1.547 2.344 1 4.375 2.5 6.094 4.5 1.75 2 3.094 4.484 4.031 7.453.969 2.968 1.453 6.406 1.453 10.312v5.016c0 3.906-.484 7.344-1.453 10.312-.937 2.938-2.281 5.422-4.031 7.453-1.719 2-3.75 3.5-6.094 4.5-2.312 1-4.844 1.5-7.594 1.5s-5.296-.5-7.64-1.5c-2.313-1-4.344-2.5-6.094-4.5-1.719-2.03-3.062-4.515-4.031-7.453-.969-2.968-1.453-6.406-1.453-10.312Zm7.078-5.016v5.016c0 2.812.281 5.312.844 7.5.593 2.187 1.421 4.031 2.484 5.531 1.094 1.5 2.375 2.64 3.844 3.422 1.5.75 3.156 1.125 4.968 1.125 2.032 0 3.797-.375 5.297-1.125 1.532-.781 2.797-1.922 3.797-3.422 1.031-1.5 1.797-3.344 2.297-5.531.5-2.188.75-4.688.75-7.5v-5.016c0-2.812-.297-5.297-.891-7.453-.562-2.187-1.39-4.031-2.484-5.531s-2.391-2.64-3.891-3.422c-1.468-.781-3.125-1.172-4.968-1.172-1.782 0-3.422.39-4.922 1.172-1.469.781-2.735 1.922-3.797 3.422-1.063 1.5-1.891 3.344-2.484 5.531-.563 2.156-.844 4.64-.844 7.453ZM95.145 29.5V70h-7.031V19.281h6.656l.375 10.219Zm-1.406 12.75-3.282-.656c.032-3.282.422-6.328 1.172-9.14.75-2.813 1.844-5.282 3.282-7.407 1.437-2.125 3.234-3.766 5.39-4.922 2.156-1.188 4.641-1.781 7.453-1.781 1.969 0 3.782.343 5.438 1.031 1.687.656 3.14 1.703 4.359 3.14 1.25 1.438 2.219 3.282 2.906 5.532.688 2.25 1.032 4.969 1.032 8.156V70h-7.032V36.578c0-2.937-.39-5.266-1.171-6.984-.782-1.719-1.86-2.953-3.235-3.703-1.375-.782-3-1.172-4.875-1.172-2.156 0-3.969.5-5.437 1.5-1.469 1-2.64 2.36-3.516 4.078-.844 1.687-1.469 3.578-1.875 5.672a38.196 38.196 0 0 0-.61 6.281Zm27.656-4.64-4.688 1.124c.032-2.656.422-5.203 1.172-7.64.75-2.438 1.844-4.61 3.282-6.516a16.26 16.26 0 0 1 5.25-4.547c2.093-1.125 4.484-1.687 7.171-1.687 2.313 0 4.344.36 6.094 1.078a11.086 11.086 0 0 1 4.453 3.328c1.25 1.469 2.188 3.375 2.813 5.719.625 2.312.937 5.078.937 8.297V70h-7.078V36.672c0-3.125-.39-5.547-1.172-7.266-.75-1.718-1.812-2.922-3.187-3.61-1.375-.718-3-1.077-4.875-1.077-1.656 0-3.11.375-4.36 1.125-1.25.718-2.296 1.703-3.14 2.953-.844 1.219-1.5 2.594-1.969 4.125a18.307 18.307 0 0 0-.703 4.687Z" + /> + <path + fill="currentColor" + d="M68.914 58.797V34.75c0-1.625-.203-2.906-.61-3.844-.375-.968-.953-1.672-1.734-2.11-.781-.437-1.75-.655-2.906-.655-1.219 0-2.25.25-3.094.75-.813.5-1.422 1.218-1.828 2.156-.406.906-.61 2-.61 3.281H45.712c0-2.156.422-4.187 1.265-6.094a15.072 15.072 0 0 1 3.657-5.109c1.624-1.5 3.562-2.672 5.812-3.516 2.281-.843 4.813-1.265 7.594-1.265 3.343 0 6.312.562 8.906 1.687 2.594 1.125 4.64 2.907 6.14 5.344 1.5 2.438 2.25 5.61 2.25 9.516v22.968c0 2.688.141 4.938.422 6.75.313 1.782.766 3.313 1.36 4.594V70H70.6c-.562-1.344-.984-3.031-1.265-5.063a45.412 45.412 0 0 1-.422-6.14Zm1.547-19.781.046 7.64H65.54c-1.375 0-2.578.203-3.61.61-1.03.406-1.906.984-2.625 1.734a7.328 7.328 0 0 0-1.547 2.672c-.343 1-.515 2.078-.515 3.234 0 1.344.187 2.469.562 3.375.375.907.938 1.594 1.688 2.063.75.437 1.656.656 2.719.656 1.562 0 2.906-.328 4.03-.984 1.157-.657 2.016-1.438 2.579-2.344.594-.938.797-1.813.61-2.625l2.812 4.922c-.313 1.187-.797 2.422-1.453 3.703a17.853 17.853 0 0 1-2.485 3.562c-1 1.094-2.218 1.985-3.656 2.672-1.437.688-3.14 1.031-5.11 1.031-2.75 0-5.25-.609-7.5-1.828-2.218-1.25-3.984-2.984-5.296-5.203-1.281-2.25-1.922-4.922-1.922-8.015 0-2.563.422-4.875 1.266-6.938.843-2.094 2.078-3.86 3.703-5.297 1.656-1.468 3.75-2.61 6.281-3.422 2.531-.812 5.5-1.218 8.906-1.218h5.485ZM14.953 1.75l10.969 31.313L36.797 1.75h14.156L32.391 45.11V70H19.359V45.11L.844 1.75h14.11Z" + /> + </svg> + ); + };
• packages/react_ui/src/pages/:workspace/Layout.module.css
  • @@ -17,6 +17,18 @@
    view-transition-name: menu; } + .logo { + display: inline-flex; + padding: var(--space-1); + + border-radius: var(--radius-1); + color: var(--gray-12); + } + .logo:focus-visible { + color: var(--focus-11); + outline: 2px solid var(--focus-a8); + } + @keyframes slidein { from { transform: translateX(-100%);
• packages/react_ui/src/pages/:workspace/Layout.stories.tsx
  • @@ -7,6 +7,8 @@ import { Button, IconButton } from "@radix-ui/themes";
    import type { Meta, StoryObj } from "@storybook/react"; import { WorkspaceSchema } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js"; + import { withInmemoryRouter } from "../../../.storybook/decorators/withInmemoryRouter.tsx"; + import { ThirdPartyNoticeProvider } from "../../components/CopyrightNotice.ts"; import { Layout } from "./Layout.tsx";
  • @@ -32,6 +34,7 @@ <ThirdPartyNoticeProvider text="Foo">
    <Story /> </ThirdPartyNoticeProvider> ), + withInmemoryRouter(), ], } satisfies Meta<typeof Layout>;
• packages/react_ui/src/pages/:workspace/Layout.tsx
  • @@ -17,6 +17,7 @@ import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
    import { type FC, type ReactNode, use, useCallback, useState } from "react"; import * as CopyrightNotice from "../../components/CopyrightNotice.ts"; + import { Logo } from "../../components/Logo.tsx"; import * as NavigationMenu from "../../components/NavigationMenu.ts"; import { URLContext } from "../../contexts/Router.tsx"; import { useViewTransition } from "../../hooks/useViewTransition.ts";
  • @@ -70,7 +71,16 @@ height="100%"
    columns={{ initial: "1", md: "minmax(15rem, max-content) minmax(0, 1fr)" }} rows="max-content minmax(0, 1fr)" > - <Box className={css.appbar} display={{ initial: "none", md: "block" }} /> + <Flex + className={css.appbar} + display={{ initial: "none", md: "flex" }} + align="center" + justify="center" + > + <a className={css.logo} href="/"> + <Logo /> + </a> + </Flex> <Flex className={css.appbar} p="2" align="center" gapX="3"> <Box display={{ md: "none" }}> <IconButton variant="soft" onClick={toggleMenu}>
• packages/react_ui/src/pages/root/Layout.tsx
  • @@ -18,6 +18,7 @@ } from "@radix-ui/themes";
    import { type FC, type ReactNode } from "react"; import * as CopyrightNotice from "../../components/CopyrightNotice.ts"; + import { Logo } from "../../components/Logo.tsx"; import css from "./Layout.module.css";
  • @@ -39,14 +40,21 @@ <Grid
    className={`${css.bgGrid} ${className || ""}`} inset="0" height="100%" - p="4" + p={{ initial: "2", md: "4" }} pb="2" - px={{ initial: "2", md: "4" }} columns={{ initial: "1", md: "minmax(0, 1fr) 30rem" }} - rows="minmax(0, 1fr) max-content" + rows={{ + initial: "max-content minmax(0, 1fr) max-content", + md: "minmax(0, 1fr) max-content", + }} gap="2" {...rest} > + <Text asChild size="6"> + <Flex justify="center" align="center" py="1"> + <Logo /> + </Flex> + </Text> <Box asChild gridColumn="-2 / -1"> <Card> <Theme asChild panelBackground="solid">