Component Creation

packages/components/
  package.json          # @godui/components
  styles.css            # theme tokens + @source "./src" + @layer components
  src/
    index.ts            # re-exports all components
    shimmer-button.tsx
    magic-button.tsx

import * as React from "react";

export type MyComponentVariant = "primary" | "secondary";
export type MyComponentProps = React.HTMLAttributes<HTMLDivElement> & {
  variant?: MyComponentVariant;
};

const variantClasses: Record<MyComponentVariant, string> = {
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
};

const MyComponent = React.forwardRef<HTMLDivElement, MyComponentProps>(
  ({ className, variant = "primary", ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={`base-classes ${variantClasses[variant]} ${className ?? ""}`}
        {...props}
      />
    );
  },
);
MyComponent.displayName = "MyComponent";

export { MyComponent };

export { MyComponent, type MyComponentProps, type MyComponentVariant } from "./my-component";

@import "tailwindcss";
@import "./theme/light.css";
@import "./theme/dark.css";

@source "./src";

@import "tailwindcss";
@import "@godui/components/fonts/vite.css";
@import "@godui/components/styles.css";

@source "../node_modules/@godui/components/src";

@source "../../../../packages/components/src";

import { MyComponent, type MyComponentProps } from "@godui/components";
import type { Meta, StoryObj } from "@storybook/react-vite";

const meta = {
  title: "Components/MyComponent",
  component: MyComponent,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof MyComponent>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    children: "Default",
    variant: "primary",
  } satisfies MyComponentProps,
};

---
title: My Component
description: Short description.
---

import { MyComponent } from "@godui/components";

<ComponentPreview code={`import { MyComponent } from "@godui/components";

export function MyComponentDemo() {
  return <MyComponent variant="primary">Example</MyComponent>;
}`}>
  <MyComponent variant="primary">Example</MyComponent>
</ComponentPreview>

## Installation

<ComponentInstall componentName="MyComponent" />

## Usage

\`\`\`tsx
import { MyComponent } from "@godui/components";
\`\`\`

\`\`\`tsx
<MyComponent variant="primary">Example</MyComponent>
\`\`\`

## Props

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `variant` | `"primary" \| "secondary"` | `"primary"` | Visual style |

{
  "title": "Components",
  "pages": ["button", "my-component"]
}

const variantClasses: Record<string, string> = {
  primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
  outline: "border border-border bg-background hover:bg-accent",
};

"bg-primary"       // var(--color-primary)
"text-foreground"  // var(--color-foreground)
"rounded-lg"       // var(--radius-lg)
"shadow-sm"        // var(--shadow-sm)

@layer components {
  .my-component { /* ... */ }
}