feat(data): full-screen map view + shared MapScreenLayout component (#132)

src/components/shared/MapScreenLayout/MapScreenLayout.stories.tsx

@@ -0,0 +1,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: {},
+};

src/components/shared/MapScreenLayout/MapScreenLayout.tsx

@@ -0,0 +1,69 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { useIsDesktop } from '@/hooks/useIsDesktop';
+
+export interface MapScreenLayoutProps {
+  className?: string;
+  style?: CSSProperties;
+  sidebar?: ReactNode;
+  topLeft?: ReactNode;
+  topRight?: ReactNode;
+  bottomLeft?: ReactNode;
+  bottomRight?: ReactNode;
+  children?: ReactNode;
+}
+
+export function MapScreenLayout({
+  className,
+  style,
+  sidebar,
+  topLeft,
+  topRight,
+  bottomLeft,
+  bottomRight,
+  children,
+}: MapScreenLayoutProps) {
+  const isDesktop = useIsDesktop();
+
+  return (
+    <div
+      className={`flex h-full min-h-0 flex-col gap-3 overflow-hidden lg:flex-row ${className ?? ''}`}
+      style={style}
+    >
+      <div className="relative flex-1 min-h-0 overflow-hidden rounded-card bg-surface-card shadow-card">
+        {children}
+
+        {topLeft && (
+          <div className="absolute top-4 left-3 z-10 flex gap-2 items-center">
+            {topLeft}
+          </div>
+        )}
+
+        {topRight && (
+          <div className="absolute top-4 right-3 z-10 flex gap-2 items-center">
+            {topRight}
+          </div>
+        )}
+
+        {bottomLeft && (
+          <div className="absolute bottom-4 left-4 z-10 flex gap-2 items-center">
+            {bottomLeft}
+          </div>
+        )}
+
+        {bottomRight && (
+          <div className="absolute bottom-4 right-4 z-10 flex gap-2 items-center">
+            {bottomRight}
+          </div>
+        )}
+      </div>
+
+      {/* eslint-disable-next-line eqeqeq -- intentional null/undefined check */}
+      {isDesktop && sidebar != null && (
+        <aside className="flex w-full max-w-[380px] shrink-0 flex-col overflow-y-auto rounded-card bg-surface-card px-4 pb-4 pt-6 shadow-card">
+          {sidebar}
+        </aside>
+      )}
+    </div>
+  );
+}

src/components/shared/MapScreenLayout/index.ts

@@ -0,0 +1,2 @@
+export { MapScreenLayout } from './MapScreenLayout';
+export type { MapScreenLayoutProps } from './MapScreenLayout';