yamori

有給休暇計算を主目的とした簡易勤怠管理システム

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
// SPDX-FileCopyrightText: 2025 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { create } from "@bufbuild/protobuf";
import { Pencil2Icon, TrashIcon } from "@radix-ui/react-icons";
import { Button, IconButton } from "@radix-ui/themes";
import type { Meta, StoryObj } from "@storybook/react";
import { UserSchema } from "@yamori/proto/yamori/workspace/v2/user_pb.js";

import { withInmemoryRouter } from "../../.storybook/decorators/withInmemoryRouter.tsx";

import { ThirdPartyNoticeProvider } from "../components/CopyrightNotice.ts";

import { LoggedInLayout } from "./LoggedInLayout.tsx";

export default {
	component: LoggedInLayout,
	args: {
		title: "TITLE",
		children: "CHILDREN",
		user: create(UserSchema, {}),
	},
	parameters: {
		layout: "fullscreen",
	},
	decorators: [
		(Story) => (
			<ThirdPartyNoticeProvider text="Foo">
				<Story />
			</ThirdPartyNoticeProvider>
		),
		withInmemoryRouter(),
	],
} satisfies Meta<typeof LoggedInLayout>;

type Story = StoryObj<typeof LoggedInLayout>;

export const Defaults: Story = {};

export const MenuOpened: Story = {
	args: {
		defaultMenuOpened: true,
	},
};

export const WithTextAction: Story = {
	args: {
		actions: <Button></Button>,
	},
};

export const WithIconActions: Story = {
	args: {
		actions: (
			<>
				<IconButton variant="surface">
					<TrashIcon />
				</IconButton>
				<IconButton variant="surface">
					<Pencil2Icon />
				</IconButton>
			</>
		),
	},
};

export const LongContents: Story = {
	args: {
		children: (
			<ul>
				{Array.from({ length: 100 }, (_, i) => (
					<li key={i}>Foo</li>
				))}
			</ul>
		),
	},
};