@nationaldesignstudio/react 0.5.2 → 0.5.4

package/src/components/dev-tools/dev-toolbar/dev-toolbar.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DevToolbar } from "./dev-toolbar";
-
-const meta = {
-	title: "Dev Tools/DevToolbar",
-	component: DevToolbar,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		defaultExpanded: {
-			control: "boolean",
-		},
-	},
-} satisfies Meta<typeof DevToolbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const DemoContent = () => (
-	<div className="min-h-screen bg-gray-100 py-64">
-		<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)]">
-			<h1 className="typography-h2 mb-16">Dev Toolbar Demo</h1>
-			<p className="typography-body-medium text-gray-600 mb-8">
-				Click the bar at the bottom to expand, then toggle the Grid overlay.
-			</p>
-			<p className="typography-body-medium text-gray-600 mb-32">
-				Keyboard shortcut:{" "}
-				<kbd className="px-8 py-4 bg-gray-200 rounded-radius-8">⌘G</kbd> or{" "}
-				<kbd className="px-8 py-4 bg-gray-200 rounded-radius-8">Ctrl+G</kbd>
-			</p>
-
-			<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)]">
-				{["alpha", "beta", "gamma", "delta", "epsilon", "zeta"].map((id) => (
-					<div
-						key={id}
-						className="col-span-4 md:col-span-4 lg:col-span-8 bg-white p-16 rounded-radius-12 shadow"
-					>
-						<h3 className="typography-h4 mb-8">Card {id}</h3>
-						<p className="typography-body-small text-gray-500">
-							Sample content to visualize how the grid overlay aligns with your
-							layout.
-						</p>
-					</div>
-				))}
-			</div>
-		</div>
-	</div>
-);
-
-export const Default: Story = {
-	args: {
-		defaultExpanded: false,
-	},
-	render: (args) => (
-		<>
-			<DemoContent />
-			<DevToolbar {...args} />
-		</>
-	),
-};
-
-export const Expanded: Story = {
-	args: {
-		defaultExpanded: true,
-	},
-	render: (args) => (
-		<>
-			<DemoContent />
-			<DevToolbar {...args} />
-		</>
-	),
-};

package/src/components/dev-tools/dev-toolbar/index.ts

@@ -1 +0,0 @@
-export { DevToolbar, type DevToolbarProps } from "./dev-toolbar";

package/src/components/dev-tools/grid-overlay/index.ts

@@ -1 +0,0 @@
-export { GridOverlay, type GridOverlayProps } from "./grid-overlay";

package/src/components/dev-tools/index.ts

@@ -1,2 +0,0 @@
-export { DevToolbar, type DevToolbarProps } from "./dev-toolbar";
-export { GridOverlay, type GridOverlayProps } from "./grid-overlay";

package/src/components/foundation/typography/typography.stories.tsx

@@ -1,401 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta = {
-	title: "Foundation/Typography",
-	parameters: {
-		layout: "padded",
-	},
-};
-
-export default meta;
-
-/**
- * Typography Scale showcases all typography styles in the design system.
- * Each style is shown with its class name and a sample text.
- */
-export const TypeScale: StoryObj = {
-	render: () => (
-		<div className="space-y-48 p-24">
-			{/* Headings */}
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Headings
-				</h2>
-				<div className="space-y-24">
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-h1-display
-						</code>
-						<p className="typography-h1-display text-gray-900">
-							Display Heading
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-h1
-						</code>
-						<p className="typography-h1 text-gray-900">Heading 1</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-h2
-						</code>
-						<p className="typography-h2 text-gray-900">Heading 2</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-h3
-						</code>
-						<p className="typography-h3 text-gray-900">Heading 3</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-h4
-						</code>
-						<p className="typography-h4 text-gray-900">Heading 4</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-h5
-						</code>
-						<p className="typography-h5 text-gray-900">Heading 5</p>
-					</div>
-				</div>
-			</section>
-
-			{/* Body Text */}
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Body Text
-				</h2>
-				<div className="space-y-24">
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-body-large
-						</code>
-						<p className="typography-body-large text-gray-900 max-w-640">
-							Body large is used for important introductory text. The quick
-							brown fox jumps over the lazy dog.
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-body-medium
-						</code>
-						<p className="typography-body-medium text-gray-900 max-w-640">
-							Body medium is the default body text size for most content. The
-							quick brown fox jumps over the lazy dog.
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-body-small
-						</code>
-						<p className="typography-body-small text-gray-900 max-w-640">
-							Body small is used for secondary text and compact layouts. The
-							quick brown fox jumps over the lazy dog.
-						</p>
-					</div>
-				</div>
-			</section>
-
-			{/* Supporting Text */}
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Supporting Text
-				</h2>
-				<div className="space-y-24">
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-overline
-						</code>
-						<p className="typography-overline text-gray-700 uppercase tracking-wide">
-							Overline Text
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-caption
-						</code>
-						<p className="typography-caption text-gray-600">
-							Caption text for supplementary information
-						</p>
-					</div>
-				</div>
-			</section>
-
-			{/* UI Typography */}
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					UI Typography
-				</h2>
-				<div className="space-y-24">
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-ui-button-large
-						</code>
-						<p className="typography-ui-button-large text-gray-900">
-							Large Button Text
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-ui-button-medium
-						</code>
-						<p className="typography-ui-button-medium text-gray-900">
-							Medium Button Text
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-ui-button-small
-						</code>
-						<p className="typography-ui-button-small text-gray-900">
-							Small Button Text
-						</p>
-					</div>
-					<div>
-						<code className="text-12 text-gray-500 block mb-8">
-							typography-ui-label
-						</code>
-						<p className="typography-ui-label text-gray-900">Form Label</p>
-					</div>
-				</div>
-			</section>
-		</div>
-	),
-};
-
-/**
- * Responsive Typography demonstrates how typography scales across breakpoints.
- * Resize the viewport to see the typography adapt.
- */
-export const ResponsiveTypography: StoryObj = {
-	render: () => (
-		<div className="space-y-32 p-24">
-			<div className="bg-gray-100 p-16 rounded-8">
-				<p className="typography-body-small text-gray-700 mb-8">
-					Resize the viewport to see responsive typography in action
-				</p>
-				<p className="typography-caption text-gray-500">
-					Mobile (&lt;768px) | Tablet (768px-1440px) | Desktop (&gt;1440px)
-				</p>
-			</div>
-
-			<section>
-				<h3 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Responsive Headings
-				</h3>
-				<div className="space-y-24">
-					<div className="border-l-4 border-indigo-500 pl-16">
-						<code className="text-12 text-gray-500 block mb-4">
-							typography-h1 (responsive)
-						</code>
-						<p className="typography-h1 text-gray-900">Responsive H1</p>
-						<p className="typography-caption text-gray-500 mt-4">
-							48px (sm) → 72px (md) → 96px (lg)
-						</p>
-					</div>
-					<div className="border-l-4 border-indigo-500 pl-16">
-						<code className="text-12 text-gray-500 block mb-4">
-							typography-h2 (responsive)
-						</code>
-						<p className="typography-h2 text-gray-900">Responsive H2</p>
-						<p className="typography-caption text-gray-500 mt-4">
-							48px (sm) → 64px (md) → 72px (lg)
-						</p>
-					</div>
-					<div className="border-l-4 border-indigo-500 pl-16">
-						<code className="text-12 text-gray-500 block mb-4">
-							typography-h3 (responsive)
-						</code>
-						<p className="typography-h3 text-gray-900">Responsive H3</p>
-						<p className="typography-caption text-gray-500 mt-4">
-							32px (sm) → 48px (md) → 64px (lg)
-						</p>
-					</div>
-				</div>
-			</section>
-
-			<section>
-				<h3 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Breakpoint-Specific Utilities
-				</h3>
-				<div className="space-y-16">
-					<div className="grid grid-cols-1 md:grid-cols-3 gap-16">
-						<div className="bg-gray-50 p-16 rounded-8">
-							<code className="text-12 text-gray-500 block mb-8">
-								typography-h4-small
-							</code>
-							<p className="typography-h4-small text-gray-900">H4 Small</p>
-						</div>
-						<div className="bg-gray-50 p-16 rounded-8">
-							<code className="text-12 text-gray-500 block mb-8">
-								typography-h4-medium
-							</code>
-							<p className="typography-h4-medium text-gray-900">H4 Medium</p>
-						</div>
-						<div className="bg-gray-50 p-16 rounded-8">
-							<code className="text-12 text-gray-500 block mb-8">
-								typography-h4-large
-							</code>
-							<p className="typography-h4-large text-gray-900">H4 Large</p>
-						</div>
-					</div>
-				</div>
-			</section>
-		</div>
-	),
-};
-
-/**
- * Typography specimen shows a sample page layout using the typography system.
- */
-export const Specimen: StoryObj = {
-	render: () => (
-		<article className="max-w-800 mx-auto p-32">
-			<header className="mb-48">
-				<p className="typography-overline text-indigo-600 uppercase tracking-wide mb-8">
-					Design System
-				</p>
-				<h1 className="typography-h1 text-gray-900 mb-16">
-					Typography Specimen
-				</h1>
-				<p className="typography-body-large text-gray-700">
-					A demonstration of the typography system in a realistic content
-					layout, showing how different styles work together.
-				</p>
-			</header>
-
-			<section className="mb-48">
-				<h2 className="typography-h3 text-gray-900 mb-16">
-					The Foundation of Good Design
-				</h2>
-				<p className="typography-body-medium text-gray-800 mb-16">
-					Typography is the art and technique of arranging type to make written
-					language legible, readable, and appealing when displayed. The
-					arrangement of type involves selecting typefaces, point sizes, line
-					lengths, line-spacing, and letter-spacing.
-				</p>
-				<p className="typography-body-medium text-gray-800 mb-16">
-					The term typography is also applied to the style, arrangement, and
-					appearance of the letters, numbers, and symbols created by the
-					process. Type design is a closely related craft, sometimes considered
-					part of typography.
-				</p>
-			</section>
-
-			<section className="mb-48">
-				<h3 className="typography-h4 text-gray-900 mb-16">Key Principles</h3>
-				<p className="typography-body-medium text-gray-800 mb-16">
-					Most typefaces can be classified into one of four basic groups: those
-					with serifs, those without serifs, scripts and decorative styles.
-				</p>
-
-				<div className="bg-gray-50 p-24 rounded-8 mb-16">
-					<h4 className="typography-h5 text-gray-900 mb-8">
-						Hierarchy Matters
-					</h4>
-					<p className="typography-body-small text-gray-700">
-						Visual hierarchy guides readers through content by creating clear
-						distinctions between headings, body text, and supporting elements.
-					</p>
-				</div>
-
-				<p className="typography-body-medium text-gray-800">
-					Good typography requires attention to detail and an understanding of
-					how type creates meaning and emotion.
-				</p>
-			</section>
-
-			<footer className="border-t border-gray-200 pt-24">
-				<p className="typography-caption text-gray-500">
-					Typography specimen created for the NDS Design System
-				</p>
-			</footer>
-		</article>
-	),
-};
-
-/**
- * Font comparison shows the different font families in the design system.
- */
-export const FontFamilies: StoryObj = {
-	render: () => (
-		<div className="space-y-48 p-24">
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Heading Font: Inter Tight
-				</h2>
-				<div className="space-y-16">
-					<p className="typography-h2 text-gray-900">
-						The quick brown fox jumps over the lazy dog
-					</p>
-					<p className="typography-h4 text-gray-800">
-						ABCDEFGHIJKLMNOPQRSTUVWXYZ
-					</p>
-					<p className="typography-h4 text-gray-700">
-						abcdefghijklmnopqrstuvwxyz
-					</p>
-					<p className="typography-h4 text-gray-600">0123456789</p>
-				</div>
-			</section>
-
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Body Font: Inter
-				</h2>
-				<div className="space-y-16">
-					<p className="typography-body-large text-gray-900">
-						The quick brown fox jumps over the lazy dog
-					</p>
-					<p className="typography-body-medium text-gray-800">
-						ABCDEFGHIJKLMNOPQRSTUVWXYZ
-					</p>
-					<p className="typography-body-medium text-gray-700">
-						abcdefghijklmnopqrstuvwxyz
-					</p>
-					<p className="typography-body-medium text-gray-600">0123456789</p>
-				</div>
-			</section>
-
-			<section>
-				<h2 className="typography-h5 text-gray-500 mb-24 uppercase tracking-wide">
-					Font Weights
-				</h2>
-				<div className="grid grid-cols-2 gap-24">
-					<div>
-						<p className="typography-caption text-gray-500 mb-4">
-							Regular (400)
-						</p>
-						<p className="typography-body-medium font-normal text-gray-900">
-							The quick brown fox
-						</p>
-					</div>
-					<div>
-						<p className="typography-caption text-gray-500 mb-4">
-							Medium (500)
-						</p>
-						<p className="typography-body-medium font-medium text-gray-900">
-							The quick brown fox
-						</p>
-					</div>
-					<div>
-						<p className="typography-caption text-gray-500 mb-4">
-							Semibold (600)
-						</p>
-						<p className="typography-body-medium font-semibold text-gray-900">
-							The quick brown fox
-						</p>
-					</div>
-					<div>
-						<p className="typography-caption text-gray-500 mb-4">Bold (700)</p>
-						<p className="typography-body-medium font-bold text-gray-900">
-							The quick brown fox
-						</p>
-					</div>
-				</div>
-			</section>
-		</div>
-	),
-};