b17349c071
- Convert Icon component from createElement to JSX (Icon.tsx) - Convert Icon tests to JSX (24 tests passing) - Convert Icon stories to JSX (Icon.stories.tsx) - Convert Badge component from createElement to JSX (Badge.tsx) - Convert Badge tests to JSX (34 tests passing) - Rename files from .ts to .tsx - Remove createElement imports, use native JSX syntax - All tests passing (58/58) Part of broader effort to convert entire codebase from createElement to JSX. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { Icon } from "@tpmjs/ui/Icon/Icon";
|
|
|
|
const meta = {
|
|
title: "Components/Icon",
|
|
component: Icon,
|
|
tags: ["autodocs"],
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
} satisfies Meta<typeof Icon>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const AllIcons: Story = {
|
|
render: () => (
|
|
<div className="grid grid-cols-4 gap-8 p-8">
|
|
{(
|
|
[
|
|
"copy",
|
|
"externalLink",
|
|
"github",
|
|
"check",
|
|
"x",
|
|
"chevronDown",
|
|
"sun",
|
|
"moon",
|
|
] as const
|
|
).map((iconName) => (
|
|
<div key={iconName} className="flex flex-col items-center gap-2">
|
|
<Icon icon={iconName} size="lg" />
|
|
<span className="text-sm text-foreground-secondary">{iconName}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const AllSizes: Story = {
|
|
render: () => (
|
|
<div className="flex items-center gap-6">
|
|
{(["sm", "md", "lg"] as const).map((size) => (
|
|
<div key={size} className="flex flex-col items-center gap-2">
|
|
<Icon icon="github" size={size} />
|
|
<span className="text-sm text-foreground-secondary">{size}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const WithColors: Story = {
|
|
render: () => (
|
|
<div className="flex items-center gap-6">
|
|
<Icon icon="check" size="lg" className="text-success" />
|
|
<Icon icon="x" size="lg" className="text-error" />
|
|
<Icon icon="github" size="lg" className="text-info" />
|
|
<Icon icon="sun" size="lg" className="text-warning" />
|
|
</div>
|
|
),
|
|
};
|