a6753cd8e6
Implement theme system: - Add next-themes for theme management with light mode as default - Swap CSS variable definitions in globals.css (light in :root, dark in .dark class) - Create ThemeProvider component wrapping next-themes - Create ThemeToggle component with sun/moon icons - Update root layout with ThemeProvider Build full homepage: - Add Header component with navigation and theme toggle - Create hero section with gradient background and search - Add Featured Tools section with 6 tool cards (icons, badges, usage stats) - Add Browse by Category section with 12 colored category tiles - Add Platform Statistics section with 4 metric cards - Add footer with copyright and links - Create homePageData.ts with comprehensive mock data Add Storybook stories: - Icon.stories.ts (AllIcons, AllSizes, WithColors) - Badge.stories.ts (Default, AllVariants, AllSizes, WithLongText) - Input.stories.ts (Default, WithLabel, AllStates, AllSizes, PasswordInput) - ProgressBar.stories.ts (Default, AllVariants, AllSizes, WithLabel, edge cases) - CodeBlock.stories.ts (Default, multiple languages, LongCode) - Tabs.stories.ts (Default, AllSizes, WithCounts, ManyTabs) Fix production build issues: - Export IconName type from Icon.ts - Add sun and moon icons to icons.ts - Fix Icon prop naming (icon not name) - Fix Icon size constraints (remove xl, use lg) - Update ThemeProvider types using ComponentProps - Add explicit return types where needed - Remove unused imports - Replace forEach with for...of in variants system - Fix template literals in storybook stories 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
91 lines
2 KiB
TypeScript
91 lines
2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { Tabs } from "@tpmjs/ui/Tabs/Tabs";
|
|
import type { Tab } from "@tpmjs/ui/Tabs/types";
|
|
import { createElement } from "react";
|
|
|
|
const meta = {
|
|
title: "Components/Tabs",
|
|
component: Tabs,
|
|
tags: ["autodocs"],
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
} satisfies Meta<typeof Tabs>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
const mockTabs: Tab[] = [
|
|
{ id: "overview", label: "Overview" },
|
|
{ id: "usage", label: "Usage" },
|
|
{ id: "api", label: "API" },
|
|
];
|
|
|
|
export const Default: Story = {
|
|
render: () =>
|
|
createElement(Tabs, {
|
|
tabs: mockTabs,
|
|
activeTab: "overview",
|
|
onTabChange: (id: string) => console.log("Tab changed:", id),
|
|
}),
|
|
};
|
|
|
|
export const AllSizes: Story = {
|
|
render: () =>
|
|
createElement(
|
|
"div",
|
|
{ className: "flex flex-col gap-8 w-full" },
|
|
createElement(Tabs, {
|
|
tabs: mockTabs,
|
|
activeTab: "overview",
|
|
size: "sm",
|
|
onTabChange: () => {},
|
|
}),
|
|
createElement(Tabs, {
|
|
tabs: mockTabs,
|
|
activeTab: "overview",
|
|
size: "md",
|
|
onTabChange: () => {},
|
|
}),
|
|
createElement(Tabs, {
|
|
tabs: mockTabs,
|
|
activeTab: "overview",
|
|
size: "lg",
|
|
onTabChange: () => {},
|
|
}),
|
|
),
|
|
};
|
|
|
|
export const WithCounts: Story = {
|
|
render: () =>
|
|
createElement(Tabs, {
|
|
tabs: [
|
|
{ id: "all", label: "All Tools", count: 1234 },
|
|
{ id: "featured", label: "Featured", count: 42 },
|
|
{ id: "recent", label: "Recent", count: 18 },
|
|
],
|
|
activeTab: "all",
|
|
onTabChange: () => {},
|
|
}),
|
|
};
|
|
|
|
export const ManyTabs: Story = {
|
|
render: () =>
|
|
createElement(
|
|
"div",
|
|
{ className: "w-96" },
|
|
createElement(Tabs, {
|
|
tabs: [
|
|
{ id: "tab1", label: "Overview" },
|
|
{ id: "tab2", label: "Documentation" },
|
|
{ id: "tab3", label: "Examples" },
|
|
{ id: "tab4", label: "API Reference" },
|
|
{ id: "tab5", label: "Configuration" },
|
|
{ id: "tab6", label: "Changelog" },
|
|
{ id: "tab7", label: "Contributing" },
|
|
],
|
|
activeTab: "tab1",
|
|
onTabChange: () => {},
|
|
}),
|
|
),
|
|
};
|