@nationaldesignstudio/react 0.0.7 → 0.0.9

package/src/stories/TokenShowcase.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { ComponentProps } from "react";
+import {
+	ColorTokens,
+	ResponsiveTypography,
+	SemanticSpacingTokens,
+	SpacingTokens,
+	TokenShowcase,
+	TypographyTokens,
+} from "./TokenShowcase";
+
+const meta = {
+	title: "Design System/Tokens",
+	component: TokenShowcase,
+	parameters: {
+		layout: "fullscreen",
+		docs: {
+			description: {
+				component:
+					"Design tokens from the design system. These tokens provide a consistent foundation for colors, spacing, and typography across the application.",
+			},
+		},
+	},
+	tags: ["autodocs"],
+} satisfies Meta<ComponentProps<typeof TokenShowcase>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllTokens: Story = {};
+
+export const Colors: Story = {
+	render: () => (
+		<div className="p-8">
+			<ColorTokens />
+		</div>
+	),
+};
+
+export const Spacing: Story = {
+	render: () => (
+		<div className="p-8 min-h-screen">
+			<div className="max-w-4xl mx-auto">
+				<SpacingTokens />
+			</div>
+		</div>
+	),
+};
+
+export const Typography: Story = {
+	render: () => (
+		<div className="p-8 min-h-screen">
+			<div className="max-w-6xl mx-auto">
+				<TypographyTokens />
+			</div>
+		</div>
+	),
+};
+
+export const SemanticSpacing: Story = {
+	render: () => (
+		<div className="p-8 min-h-screen">
+			<div className="max-w-4xl mx-auto">
+				<SemanticSpacingTokens />
+			</div>
+		</div>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Purpose-driven spacing tokens for components (buttons, cards, forms), layouts (hero, sections, containers, grids), and content stacks (vertical rhythm between elements).",
+			},
+		},
+	},
+};
+
+export const Breakpoints: Story = {
+	render: () => (
+		<div className="p-8">
+			<ResponsiveTypography />
+		</div>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Typography that adapts across breakpoints. Use the viewport toolbar to switch between sm (320px), md (768px), and lg (1440px).",
+			},
+		},
+	},
+};