@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/card/Card.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './index'
+import { Button } from '../button'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A container component for grouping related content and actions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  args: {
+    className: 'w-[350px]',
+  },
+  render: (args) => (
+    <Card {...args}>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card Footer</p>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <label htmlFor="name" className="text-sm font-medium">Name</label>
+              <input id="name" placeholder="Name of your project" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          You have 3 unread messages.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const WithImage: Story = {
+  render: () => (
+    <Card className="w-[350px] overflow-hidden">
+      <div className="h-48 bg-gradient-to-br from-primary/20 to-primary/5" />
+      <CardHeader>
+        <CardTitle>Beautiful Gradient</CardTitle>
+        <CardDescription>A card with a gradient header</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          Cards can include images, gradients, or any other visual elements.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Interactive: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  render: () => (
+    <div className="grid gap-4 md:grid-cols-2">
+      <Card className="w-[250px]">
+        <CardHeader>
+          <CardTitle>Total Revenue</CardTitle>
+          <CardDescription>+20.1% from last month</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">$45,231.89</div>
+        </CardContent>
+      </Card>
+      <Card className="w-[250px]">
+        <CardHeader>
+          <CardTitle>Subscriptions</CardTitle>
+          <CardDescription>+180.1% from last month</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+2350</div>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+}

package/src/components/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Checkbox } from './index'
+import { Label } from '../label'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A control that allows the user to toggle between checked and not checked.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'The controlled checked state of the checkbox',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'When true, prevents the user from interacting with the checkbox',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {
+    id: 'terms',
+    disabled: false,
+  },
+  render: (args) => (
+    <div className="flex items-center space-x-2">
+      <Checkbox {...args} />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+}
+
+export const Checked: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="checked" defaultChecked />
+      <Label htmlFor="checked">This is checked by default</Label>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox id="disabled" disabled />
+        <Label htmlFor="disabled" className="text-muted-foreground">Disabled unchecked</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="disabled-checked" disabled defaultChecked />
+        <Label htmlFor="disabled-checked" className="text-muted-foreground">Disabled checked</Label>
+      </div>
+    </div>
+  ),
+}
+
+export const WithText: Story = {
+  render: () => (
+    <div className="items-top flex space-x-2">
+      <Checkbox id="terms1" />
+      <div className="grid gap-1.5 leading-none">
+        <Label htmlFor="terms1">Accept terms and conditions</Label>
+        <p className="text-sm text-muted-foreground">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center space-x-2">
+        <Checkbox id="email" />
+        <Label htmlFor="email">Email notifications</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="sms" />
+        <Label htmlFor="sms">SMS notifications</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="push" defaultChecked />
+        <Label htmlFor="push">Push notifications</Label>
+      </div>
+    </div>
+  ),
+}

package/src/components/code/Code.stories.tsx

@@ -0,0 +1,402 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Code } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof Code> = {
+  title: 'Components/Display/Code',
+  component: Code,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A code display component with syntax highlighting, line numbers, and copy functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['inline', 'block'],
+      description: 'Display variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'base', 'lg'],
+      description: 'Font size',
+    },
+    language: {
+      control: 'text',
+      description: 'Programming language for syntax highlighting',
+    },
+    showLineNumbers: {
+      control: 'boolean',
+      description: 'Show line numbers',
+    },
+    copyable: {
+      control: 'boolean',
+      description: 'Show copy button',
+    },
+    filename: {
+      control: 'text',
+      description: 'Filename to display in header',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Code>
+
+export const Inline: Story = {
+  render: () => (
+    <p className="text-base">
+      Use the <Code>npm install</Code> command to install dependencies, or run{' '}
+      <Code>yarn add package-name</Code> if you prefer Yarn.
+    </p>
+  ),
+}
+
+export const Block: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="typescript" copyable>
+{`function greet(name: string): string {
+  return \`Hello, \${name}!\`
+}
+
+const message = greet("World")
+console.log(message)`}
+      </Code>
+    </div>
+  ),
+}
+
+export const WithFilename: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="typescript" filename="src/utils/greet.ts" copyable>
+{`export function greet(name: string): string {
+  return \`Hello, \${name}!\`
+}
+
+export function farewell(name: string): string {
+  return \`Goodbye, \${name}!\`
+}`}
+      </Code>
+    </div>
+  ),
+}
+
+export const WithLineNumbers: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="javascript" showLineNumbers copyable>
+{`const express = require('express')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+app.listen(port, () => {
+  console.log(\`Server running at http://localhost:\${port}\`)
+})`}
+      </Code>
+    </div>
+  ),
+}
+
+export const Languages: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">TypeScript</p>
+        <Code variant="block" language="typescript" copyable>
+{`interface User {
+  id: number
+  name: string
+  email: string
+}
+
+const users: User[] = []`}
+        </Code>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Python</p>
+        <Code variant="block" language="python" copyable>
+{`def fibonacci(n: int) -> list[int]:
+    if n <= 0:
+        return []
+    elif n == 1:
+        return [0]
+
+    fib = [0, 1]
+    for i in range(2, n):
+        fib.append(fib[i-1] + fib[i-2])
+    return fib`}
+        </Code>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Bash</p>
+        <Code variant="block" language="bash" copyable>
+{`#!/bin/bash
+
+echo "Installing dependencies..."
+npm install
+
+echo "Building project..."
+npm run build
+
+echo "Done!"`}
+        </Code>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">JSON</p>
+        <Code variant="block" language="json" copyable>
+{`{
+  "name": "@wakastellar/ui",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}`}
+        </Code>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">CSS</p>
+        <Code variant="block" language="css" copyable>
+{`.button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}`}
+        </Code>
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <Code variant="block" language="javascript" size="sm">
+{`const sum = (a, b) => a + b
+console.log(sum(1, 2))`}
+        </Code>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Base (Default)</p>
+        <Code variant="block" language="javascript" size="base">
+{`const sum = (a, b) => a + b
+console.log(sum(1, 2))`}
+        </Code>
+      </div>
+
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <Code variant="block" language="javascript" size="lg">
+{`const sum = (a, b) => a + b
+console.log(sum(1, 2))`}
+        </Code>
+      </div>
+    </div>
+  ),
+}
+
+export const MaxHeight: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="typescript" maxHeight={200} copyable>
+{`// This is a long code block that will scroll
+interface User {
+  id: number
+  name: string
+  email: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+interface Post {
+  id: number
+  title: string
+  content: string
+  authorId: number
+  published: boolean
+  createdAt: Date
+  updatedAt: Date
+}
+
+interface Comment {
+  id: number
+  content: string
+  postId: number
+  authorId: number
+  createdAt: Date
+}
+
+type CreateUserInput = Omit<User, 'id' | 'createdAt' | 'updatedAt'>
+type UpdateUserInput = Partial<CreateUserInput>
+
+type CreatePostInput = Omit<Post, 'id' | 'createdAt' | 'updatedAt'>
+type UpdatePostInput = Partial<CreatePostInput>`}
+      </Code>
+    </div>
+  ),
+}
+
+export const ReactComponent: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <Code variant="block" language="tsx" filename="Button.tsx" copyable showLineNumbers>
+{`import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'outline' | 'ghost'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md font-medium',
+          'transition-colors focus-visible:outline-none focus-visible:ring-2',
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+Button.displayName = 'Button'`}
+      </Code>
+    </div>
+  ),
+}
+
+export const SQL: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="sql" copyable>
+{`SELECT
+  users.id,
+  users.name,
+  users.email,
+  COUNT(posts.id) as post_count
+FROM users
+LEFT JOIN posts ON posts.author_id = users.id
+WHERE users.created_at >= '2024-01-01'
+GROUP BY users.id, users.name, users.email
+HAVING COUNT(posts.id) > 5
+ORDER BY post_count DESC
+LIMIT 10;`}
+      </Code>
+    </div>
+  ),
+}
+
+export const Docker: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="docker" filename="Dockerfile" copyable>
+{`FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/node_modules ./node_modules
+
+EXPOSE 3000
+
+CMD ["node", "dist/server.js"]`}
+      </Code>
+    </div>
+  ),
+}
+
+export const YAML: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <Code variant="block" language="yaml" filename=".github/workflows/ci.yml" copyable>
+{`name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build`}
+      </Code>
+    </div>
+  ),
+}
+
+export const InParagraph: Story = {
+  render: () => (
+    <div className="max-w-prose space-y-4">
+      <p>
+        To install the package, run <Code>npm install @wakastellar/ui</Code> in your terminal.
+        Make sure you have Node.js version 18 or higher installed.
+      </p>
+      <p>
+        Import the components you need: <Code>{`import { Button } from '@wakastellar/ui'`}</Code>.
+        The library supports both ESM and CommonJS module formats.
+      </p>
+      <p>
+        For TypeScript users, types are included automatically. You can use the{' '}
+        <Code>ButtonProps</Code> type to extend the component's props.
+      </p>
+    </div>
+  ),
+}