@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/stories/GridSystem.stories.tsx

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-/**
- * Spatial Grid System
- *
- * Responsive grid tokens that adapt across breakpoints:
- * - Large (lg): 1440px+ - 24 columns, 72px margin, 24px gutter
- * - Medium (md): 768px+ - 12 columns, 56px margin, 20px gutter
- * - Small (sm): 320px+ - 4 columns, 24px margin, 12px gutter
- */
-
-const GridColumn = ({ index }: { index: number }) => (
-	<div className="h-12 bg-brand-primary/20 border border-brand-primary/40 rounded flex items-center justify-center">
-		<span className="text-xs font-mono text-brand-primary">{index + 1}</span>
-	</div>
-);
-
-const GridVisualization = () => (
-	<div className="w-full bg-gray-100 py-8">
-		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<div className="grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				{Array.from({ length: 24 }).map((_, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: Static grid columns never reorder
-					<GridColumn key={i} index={i} />
-				))}
-			</div>
-		</div>
-	</div>
-);
-
-const meta = {
-	title: "Design System/Grid System",
-	component: GridVisualization,
-	parameters: {
-		layout: "fullscreen",
-	},
-} satisfies Meta<typeof GridVisualization>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Desktop: Story = {
-	globals: { viewport: { value: "lg" } },
-};
-
-export const Tablet: Story = {
-	globals: { viewport: { value: "md" } },
-};
-
-export const Mobile: Story = {
-	globals: { viewport: { value: "sm" } },
-};
-
-const ColumnSpans = () => (
-	<div className="w-full py-8 px-[var(--spatial-grid-large-margin)]">
-		<div className="max-w-[90rem] mx-auto grid grid-cols-24 gap-[var(--spatial-grid-large-gutter)]">
-			<div className="col-span-full h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">col-span-full</code>
-			</div>
-			<div className="col-start-4 col-end-22 h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">
-					col-start-4 col-end-22 (18 cols)
-				</code>
-			</div>
-			<div className="col-start-7 col-end-19 h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">
-					col-start-7 col-end-19 (12 cols)
-				</code>
-			</div>
-			<div className="col-start-9 col-end-17 h-12 bg-gray-200 rounded flex items-center px-4">
-				<code className="text-sm font-mono">
-					col-start-9 col-end-17 (8 cols)
-				</code>
-			</div>
-		</div>
-	</div>
-);
-
-export const Spans: Story = {
-	render: () => <ColumnSpans />,
-	globals: { viewport: { value: "lg" } },
-};