comapeo-cloud-app/src/components/shared/MapScreenLayout/MapScreenLayout.stories.tsx at 4f428f16b8f37752b3b6e157c0403fb3f72a33b2 · digidem/comapeo-cloud-app · GitHub

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
import type { Meta, StoryObj } from '@storybook/tanstack-react';

import { MapScreenLayout } from '@/components/shared/MapScreenLayout/MapScreenLayout';

const meta: Meta<typeof MapScreenLayout> = {
  title: 'Components/MapScreenLayout',
  component: MapScreenLayout,
  parameters: {
    layout: 'fullscreen',
  },
  decorators: [
    (Story) => (
      <div style={{ height: 600 }}>
        <Story />
      </div>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof MapScreenLayout>;

export const Default: Story = {
  args: {},
};

export const WithTopRight: Story = {
  args: {
    topRight: (
      <button
        type="button"
        className="inline-flex h-11 w-11 items-center justify-center rounded-button bg-surface-card text-text-muted hover:bg-surface-container-low hover:text-text transition-colors"
        aria-label="Grid view"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <rect x="3" y="3" width="7" height="7" />
          <rect x="14" y="3" width="7" height="7" />
          <rect x="14" y="14" width="7" height="7" />
          <rect x="3" y="14" width="7" height="7" />
        </svg>
      </button>
    ),
  },
};

export const WithBottomButtons: Story = {
  args: {
    bottomLeft: (
      <button
        type="button"
        className="rounded-button bg-surface-card px-4 py-2 text-sm shadow-card"
      >
        Filters
      </button>
    ),
    bottomRight: (
      <button
        type="button"
        className="rounded-button bg-primary px-4 py-2 text-sm text-white shadow-card"
      >
        Export
      </button>
    ),
  },
};

export const WithSidebar: Story = {
  args: {
    sidebar: (
      <div className="flex flex-col gap-4">
        <h2 className="text-sm font-semibold">Sidebar</h2>
        <p className="text-xs text-text-muted">Desktop sidebar content</p>
      </div>
    ),
  },
};

export const NonInteractive: Story = {
  args: {},
};