@nationaldesignstudio/react 0.0.10 → 0.0.11

package/src/stories/TokenShowcase.stories.tsx

@@ -1,92 +0,0 @@
-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).",
-			},
-		},
-	},
-};