@nationaldesignstudio/react 0.5.2 → 0.5.4

package/src/stories/theme-provider.stories.tsx

@@ -1,349 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "../components/atoms/button";
-import {
-	Card,
-	CardActions,
-	CardBody,
-	CardContent,
-	CardDescription,
-	CardTitle,
-} from "../components/organisms/card";
-import { ThemeProvider } from "../theme";
-
-function ThemeDemo({ title }: { title?: string }) {
-	return (
-		<div className="p-6">
-			<div className="bg-bg-page p-6 rounded-lg min-h-[300px]">
-				{title && (
-					<h2 className="typography-h5 text-text-primary mb-4">{title}</h2>
-				)}
-
-				{/* Typography showcase */}
-				<div className="mb-6">
-					<p className="typography-body-large text-text-primary mb-2">
-						Primary text using typography tokens
-					</p>
-					<p className="typography-body-small text-text-secondary">
-						Secondary text for supporting content
-					</p>
-				</div>
-
-				{/* Button variants */}
-				<div className="flex flex-wrap gap-3 mb-6">
-					<Button variant="primary">Primary</Button>
-					<Button variant="primary-outline">Primary Outline</Button>
-					<Button variant="ghost">Ghost</Button>
-				</div>
-
-				{/* Card component */}
-				<Card className="max-w-sm">
-					<CardContent>
-						<CardBody>
-							<CardTitle>Card Title</CardTitle>
-							<CardDescription>
-								This card demonstrates surface tokens including border radius
-								and stroke width.
-							</CardDescription>
-						</CardBody>
-						<CardActions>
-							<Button variant="primary" size="sm">
-								Action
-							</Button>
-							<Button variant="primary-outline" size="sm">
-								Cancel
-							</Button>
-						</CardActions>
-					</CardContent>
-				</Card>
-			</div>
-		</div>
-	);
-}
-
-const meta: Meta<typeof ThemeProvider> = {
-	title: "Theme/ThemeProvider",
-	component: ThemeProvider,
-	parameters: {
-		layout: "fullscreen",
-		docs: {
-			description: {
-				component: `
-The ThemeProvider component applies theme tokens as CSS variables using type-safe theme names.
-
-## Props
-
-- \`color\`: Color theme name - "base" | "dark" | "institution" | "civic" (defaults to "base")
-- \`surface\`: Surface theme name - "base" | "sharp" | "framed" | "soft" (defaults to "base")
-
-## Usage
-
-\`\`\`tsx
-import { ThemeProvider, useCSSVars } from '@nationaldesignstudio/react';
-
-// Use defaults (base themes)
-function App() {
-  return (
-    <ThemeProvider>
-      <Layout />
-    </ThemeProvider>
-  );
-}
-
-// Use specific themes
-function ThemedApp() {
-  return (
-    <ThemeProvider color="civic" surface="sharp">
-      <Layout />
-    </ThemeProvider>
-  );
-}
-
-function Layout() {
-  const cssVars = useCSSVars();
-  return (
-    <div style={cssVars}>
-      <Button variant="primary">Click me</Button>
-    </div>
-  );
-}
-\`\`\`
-				`,
-			},
-		},
-	},
-	tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof ThemeProvider>;
-
-// =============================================================================
-// Color Theme Stories
-// =============================================================================
-
-/**
- * Base color theme - the default light color palette.
- */
-export const BaseColor: Story = {
-	render: () => (
-		<ThemeProvider color="base">
-			<ThemeDemo title="Base Color Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Dark color theme - inverted colors for dark mode.
- */
-export const DarkColor: Story = {
-	render: () => (
-		<ThemeProvider color="dark">
-			<ThemeDemo title="Dark Color Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Institution color theme - warm brown palette with green accents.
- */
-export const InstitutionColor: Story = {
-	render: () => (
-		<ThemeProvider color="institution">
-			<ThemeDemo title="Institution Color Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Civic color theme - for government/public sector applications.
- */
-export const CivicColor: Story = {
-	render: () => (
-		<ThemeProvider color="civic">
-			<ThemeDemo title="Civic Color Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Color theme comparison - all color variants side by side.
- */
-export const ColorComparison: Story = {
-	render: () => (
-		<div className="grid grid-cols-2 gap-4">
-			<ThemeProvider color="base">
-				<ThemeDemo title="Base" />
-			</ThemeProvider>
-			<ThemeProvider color="dark">
-				<ThemeDemo title="Dark" />
-			</ThemeProvider>
-			<ThemeProvider color="institution">
-				<ThemeDemo title="Institution" />
-			</ThemeProvider>
-			<ThemeProvider color="civic">
-				<ThemeDemo title="Civic" />
-			</ThemeProvider>
-		</div>
-	),
-};
-
-// =============================================================================
-// Surface Theme Stories
-// =============================================================================
-
-/**
- * Base surface theme - default border radius and stroke widths.
- */
-export const BaseSurface: Story = {
-	render: () => (
-		<ThemeProvider surface="base">
-			<ThemeDemo title="Base Surface Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Sharp surface theme - minimal border radius for an angular look.
- */
-export const SharpSurface: Story = {
-	render: () => (
-		<ThemeProvider surface="sharp">
-			<ThemeDemo title="Sharp Surface Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Framed surface theme - heavier borders and no button radius.
- */
-export const FramedSurface: Story = {
-	render: () => (
-		<ThemeProvider surface="framed">
-			<ThemeDemo title="Framed Surface Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Soft surface theme - large rounded corners and minimal strokes.
- */
-export const SoftSurface: Story = {
-	render: () => (
-		<ThemeProvider surface="soft">
-			<ThemeDemo title="Soft Surface Theme" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Surface theme comparison - all surface variants side by side.
- * Notice the different border radius and stroke widths on buttons and cards.
- */
-export const SurfaceComparison: Story = {
-	render: () => (
-		<div className="grid grid-cols-2 gap-4">
-			<ThemeProvider surface="base">
-				<ThemeDemo title="Base" />
-			</ThemeProvider>
-			<ThemeProvider surface="sharp">
-				<ThemeDemo title="Sharp" />
-			</ThemeProvider>
-			<ThemeProvider surface="framed">
-				<ThemeDemo title="Framed" />
-			</ThemeProvider>
-			<ThemeProvider surface="soft">
-				<ThemeDemo title="Soft" />
-			</ThemeProvider>
-		</div>
-	),
-};
-
-// =============================================================================
-// Combined Theme Stories
-// =============================================================================
-
-/**
- * Civic color + Sharp surface - example of combining color and surface themes.
- */
-export const CivicSharp: Story = {
-	render: () => (
-		<ThemeProvider color="civic" surface="sharp">
-			<ThemeDemo title="Civic + Sharp" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Institution color + Framed surface - example of combining color and surface themes.
- */
-export const InstitutionFramed: Story = {
-	render: () => (
-		<ThemeProvider color="institution" surface="framed">
-			<ThemeDemo title="Institution + Framed" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Dark color + Sharp surface - angular dark mode.
- */
-export const DarkSharp: Story = {
-	render: () => (
-		<ThemeProvider color="dark" surface="sharp">
-			<ThemeDemo title="Dark + Sharp" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Civic color + Soft surface - rounded, friendly civic theme.
- */
-export const CivicSoft: Story = {
-	render: () => (
-		<ThemeProvider color="civic" surface="soft">
-			<ThemeDemo title="Civic + Soft" />
-		</ThemeProvider>
-	),
-};
-
-/**
- * Default theme - no props needed, uses base for both.
- */
-export const Default: Story = {
-	render: () => (
-		<ThemeProvider>
-			<ThemeDemo title="Default (Base + Base)" />
-		</ThemeProvider>
-	),
-};
-
-// =============================================================================
-// Interactive Playground
-// =============================================================================
-
-/**
- * Interactive playground - use controls to select any combination of themes.
- */
-export const Playground: Story = {
-	args: {
-		color: "base",
-		surface: "base",
-	},
-	argTypes: {
-		color: {
-			control: "select",
-			options: ["base", "dark", "institution", "civic"],
-			description: "Color theme",
-		},
-		surface: {
-			control: "select",
-			options: ["base", "sharp", "framed", "soft"],
-			description: "Surface theme",
-		},
-	},
-	render: (args) => (
-		<ThemeProvider color={args.color} surface={args.surface}>
-			<ThemeDemo title={`${args.color} + ${args.surface}`} />
-		</ThemeProvider>
-	),
-};

package/src/stories/token-showcase.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { ComponentProps } from "react";
-import {
-	ColorTokens,
-	ResponsiveTypography,
-	SpacingTokens,
-	TokenShowcase,
-	TypographyTokens,
-} from "./token-showcase";
-
-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 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).",
-			},
-		},
-	},
-};