@wakastellar/ui 2.3.4 → 2.4.0

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

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Text, Heading, Blockquote, Kbd } from './index'
+
+const meta: Meta = {
+  title: 'Components/Typography',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A collection of typography components for consistent text styling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj
+
+export const Headings: Story = {
+  render: () => (
+    <div className="space-y-4 w-[600px]">
+      <Heading level="h1">Heading 1</Heading>
+      <Heading level="h2">Heading 2</Heading>
+      <Heading level="h3">Heading 3</Heading>
+      <Heading level="h4">Heading 4</Heading>
+      <Heading level="h5">Heading 5</Heading>
+      <Heading level="h6">Heading 6</Heading>
+    </div>
+  ),
+}
+
+export const HeadingVariants: Story = {
+  render: () => (
+    <div className="space-y-4 w-[600px]">
+      <Heading level="h2" variant="default">Default Heading</Heading>
+      <Heading level="h2" variant="gradient">Gradient Heading</Heading>
+      <Heading level="h2" variant="muted">Muted Heading</Heading>
+    </div>
+  ),
+}
+
+export const TextVariants: Story = {
+  render: () => (
+    <div className="space-y-2 w-[400px]">
+      <Text variant="default">Default text style</Text>
+      <Text variant="muted">Muted text for secondary content</Text>
+      <Text variant="destructive">Destructive text for errors</Text>
+      <Text variant="success">Success text for confirmations</Text>
+      <Text variant="warning">Warning text for cautions</Text>
+      <Text variant="link">Link text style</Text>
+    </div>
+  ),
+}
+
+export const TextSizes: Story = {
+  render: () => (
+    <div className="space-y-2 w-[400px]">
+      <Text size="xs">Extra small text (xs)</Text>
+      <Text size="sm">Small text (sm)</Text>
+      <Text size="base">Base text (base)</Text>
+      <Text size="lg">Large text (lg)</Text>
+      <Text size="xl">Extra large text (xl)</Text>
+    </div>
+  ),
+}
+
+export const TextWeights: Story = {
+  render: () => (
+    <div className="space-y-2 w-[400px]">
+      <Text weight="normal">Normal weight text</Text>
+      <Text weight="medium">Medium weight text</Text>
+      <Text weight="semibold">Semibold weight text</Text>
+      <Text weight="bold">Bold weight text</Text>
+    </div>
+  ),
+}
+
+export const TextAlignment: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <Text align="left" className="border p-2">Left aligned text</Text>
+      <Text align="center" className="border p-2">Center aligned text</Text>
+      <Text align="right" className="border p-2">Right aligned text</Text>
+      <Text align="justify" className="border p-2">
+        Justified text that spans multiple lines to demonstrate the justify alignment properly across the full width of the container.
+      </Text>
+    </div>
+  ),
+}
+
+export const TruncatedText: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <Text truncate>
+        This is a very long text that will be truncated with an ellipsis at the end.
+      </Text>
+    </div>
+  ),
+}
+
+export const Blockquotes: Story = {
+  render: () => (
+    <div className="space-y-6 w-[500px]">
+      <Blockquote>
+        A simple blockquote without attribution.
+      </Blockquote>
+      <Blockquote author="Oscar Wilde">
+        Be yourself; everyone else is already taken.
+      </Blockquote>
+      <Blockquote variant="primary" author="Albert Einstein">
+        Imagination is more important than knowledge.
+      </Blockquote>
+    </div>
+  ),
+}
+
+export const BlockquoteVariants: Story = {
+  render: () => (
+    <div className="space-y-6 w-[500px]">
+      <Blockquote variant="default">Default blockquote style</Blockquote>
+      <Blockquote variant="primary">Primary blockquote style</Blockquote>
+      <Blockquote variant="success">Success blockquote style</Blockquote>
+      <Blockquote variant="warning">Warning blockquote style</Blockquote>
+      <Blockquote variant="destructive">Destructive blockquote style</Blockquote>
+    </div>
+  ),
+}
+
+export const KeyboardKeys: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <span className="text-sm">Copy:</span>
+        <Kbd>⌘</Kbd>
+        <span className="text-muted-foreground">+</span>
+        <Kbd>C</Kbd>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm">Paste:</span>
+        <Kbd>⌘</Kbd>
+        <span className="text-muted-foreground">+</span>
+        <Kbd>V</Kbd>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm">Save:</span>
+        <Kbd>⌘</Kbd>
+        <span className="text-muted-foreground">+</span>
+        <Kbd>S</Kbd>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm">Search:</span>
+        <Kbd>⌘</Kbd>
+        <span className="text-muted-foreground">+</span>
+        <Kbd>K</Kbd>
+      </div>
+    </div>
+  ),
+}
+
+export const KbdSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="text-center">
+        <Kbd size="sm">Ctrl</Kbd>
+        <p className="text-xs text-muted-foreground mt-1">Small</p>
+      </div>
+      <div className="text-center">
+        <Kbd size="default">Ctrl</Kbd>
+        <p className="text-xs text-muted-foreground mt-1">Default</p>
+      </div>
+      <div className="text-center">
+        <Kbd size="lg">Ctrl</Kbd>
+        <p className="text-xs text-muted-foreground mt-1">Large</p>
+      </div>
+    </div>
+  ),
+}
+
+export const FullExample: Story = {
+  render: () => (
+    <article className="prose dark:prose-invert max-w-[600px] space-y-6">
+      <Heading level="h1">Welcome to Typography</Heading>
+      <Text variant="muted" size="lg">
+        A comprehensive set of typography components for your application.
+      </Text>
+
+      <Heading level="h2">Getting Started</Heading>
+      <Text>
+        Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
+      </Text>
+
+      <Blockquote author="Robert Bringhurst" variant="primary">
+        Typography exists to honor content.
+      </Blockquote>
+
+      <Heading level="h3">Keyboard Shortcuts</Heading>
+      <Text>
+        Use <Kbd>⌘</Kbd> + <Kbd>B</Kbd> for bold and <Kbd>⌘</Kbd> + <Kbd>I</Kbd> for italic.
+      </Text>
+
+      <Text variant="muted" size="sm">
+        These typography components support dark mode and are fully customizable.
+      </Text>
+    </article>
+  ),
+}

package/src/components/waka-3d-pie-chart/Waka3DPieChart.stories.tsx

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Waka3DPieChart, WakaPieChart, WakaDonutChart, use3DPieChart } from './index'
+import type { PieSlice } from './index'
+import * as React from 'react'
+
+const browserData: PieSlice[] = [
+  { id: 'chrome', label: 'Chrome', value: 45 },
+  { id: 'safari', label: 'Safari', value: 25 },
+  { id: 'firefox', label: 'Firefox', value: 15 },
+  { id: 'edge', label: 'Edge', value: 10 },
+  { id: 'other', label: 'Other', value: 5 },
+]
+
+const salesData: PieSlice[] = [
+  { id: 'electronics', label: 'Electronics', value: 35000, color: '#3b82f6' },
+  { id: 'clothing', label: 'Clothing', value: 25000, color: '#22c55e' },
+  { id: 'food', label: 'Food & Beverages', value: 20000, color: '#f59e0b' },
+  { id: 'furniture', label: 'Furniture', value: 15000, color: '#8b5cf6' },
+  { id: 'books', label: 'Books', value: 5000, color: '#ec4899' },
+]
+
+const trafficData: PieSlice[] = [
+  { id: 'organic', label: 'Organic', value: 40 },
+  { id: 'direct', label: 'Direct', value: 25 },
+  { id: 'referral', label: 'Referral', value: 20 },
+  { id: 'social', label: 'Social', value: 10 },
+  { id: 'email', label: 'Email', value: 5 },
+]
+
+const meta: Meta<typeof Waka3DPieChart> = {
+  title: 'Components/Charts/Waka3DPieChart',
+  component: Waka3DPieChart,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A 3D pie/donut chart with rotation, explosion effects, and interactive features.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 200, max: 500, step: 50 },
+      description: 'Chart size in pixels',
+    },
+    depth: {
+      control: { type: 'range', min: 0, max: 60, step: 5 },
+      description: '3D depth in pixels',
+    },
+    rotation: {
+      control: { type: 'range', min: -180, max: 180, step: 15 },
+      description: 'Initial rotation angle',
+    },
+    innerRadius: {
+      control: { type: 'range', min: 0, max: 100, step: 10 },
+      description: 'Inner radius for donut',
+    },
+    rotateOnHover: {
+      control: 'boolean',
+      description: 'Rotate on hover',
+    },
+    explodeOnClick: {
+      control: 'boolean',
+      description: 'Explode slice on click',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Show tooltips',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show legend',
+    },
+    legendPosition: {
+      control: 'select',
+      options: ['right', 'bottom'],
+      description: 'Legend position',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Waka3DPieChart>
+
+export const Default: Story = {
+  args: {
+    data: browserData,
+  },
+  render: (args) => <Waka3DPieChart {...args} />,
+}
+
+export const ThreeDDepths: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-8">
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} depth={0} showLegend={false} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">Flat (0px)</p>
+      </div>
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} depth={20} showLegend={false} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">Light 3D (20px)</p>
+      </div>
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} depth={40} showLegend={false} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">Deep 3D (40px)</p>
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} size={200} showLegend={false} />
+        <p className="text-sm text-muted-foreground mt-2">200px</p>
+      </div>
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} size={300} showLegend={false} />
+        <p className="text-sm text-muted-foreground mt-2">300px</p>
+      </div>
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} size={400} showLegend={false} />
+        <p className="text-sm text-muted-foreground mt-2">400px</p>
+      </div>
+    </div>
+  ),
+}
+
+export const RotationAngles: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} rotation={-60} showLegend={false} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">-60°</p>
+      </div>
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} rotation={0} showLegend={false} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">0°</p>
+      </div>
+      <div className="text-center">
+        <Waka3DPieChart data={browserData} rotation={60} showLegend={false} size={200} />
+        <p className="text-sm text-muted-foreground mt-2">+60°</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithCustomColors: Story = {
+  render: () => <Waka3DPieChart data={salesData} size={350} />,
+}
+
+export const ExplodeOnClick: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">Click slices to explode them</p>
+      <Waka3DPieChart
+        data={browserData}
+        explodeOnClick
+        explodeDistance={25}
+        size={350}
+      />
+    </div>
+  ),
+}
+
+export const LegendPositions: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Legend Right</p>
+        <Waka3DPieChart data={browserData} legendPosition="right" size={250} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Legend Bottom</p>
+        <Waka3DPieChart data={browserData} legendPosition="bottom" size={250} />
+      </div>
+    </div>
+  ),
+}
+
+export const NoLegend: Story = {
+  render: () => <Waka3DPieChart data={browserData} showLegend={false} size={300} />,
+}
+
+export const FlatPieChart: Story = {
+  render: () => <WakaPieChart data={browserData} size={300} />,
+}
+
+export const DonutChart: Story = {
+  render: () => (
+    <WakaDonutChart
+      data={browserData}
+      thickness={40}
+      size={300}
+      centerContent={
+        <div className="text-center">
+          <p className="text-2xl font-bold">100%</p>
+          <p className="text-xs text-muted-foreground">Total</p>
+        </div>
+      }
+    />
+  ),
+}
+
+export const DonutThicknesses: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaDonutChart data={browserData} thickness={20} size={200} showLegend={false} />
+        <p className="text-sm text-muted-foreground mt-2">20% thickness</p>
+      </div>
+      <div className="text-center">
+        <WakaDonutChart data={browserData} thickness={40} size={200} showLegend={false} />
+        <p className="text-sm text-muted-foreground mt-2">40% thickness</p>
+      </div>
+      <div className="text-center">
+        <WakaDonutChart data={browserData} thickness={60} size={200} showLegend={false} />
+        <p className="text-sm text-muted-foreground mt-2">60% thickness</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { explodedSlice, hoveredSlice, toggleExplode, setHoveredSlice, reset } = use3DPieChart()
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {browserData.map((slice) => (
+            <button
+              key={slice.id}
+              onClick={() => toggleExplode(slice.id)}
+              onMouseEnter={() => setHoveredSlice(slice.id)}
+              onMouseLeave={() => setHoveredSlice(null)}
+              className={`px-3 py-1 text-sm border rounded transition-colors ${
+                explodedSlice === slice.id ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+              }`}
+            >
+              {slice.label}
+            </button>
+          ))}
+          <button onClick={reset} className="px-3 py-1 text-sm border rounded hover:bg-muted">
+            Reset
+          </button>
+        </div>
+        <Waka3DPieChart data={browserData} size={300} explodeOnClick={false} />
+        <p className="text-sm text-muted-foreground">
+          Hovered: {hoveredSlice || 'None'} | Exploded: {explodedSlice || 'None'}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const TrafficSourcesDashboard: Story = {
+  render: () => {
+    const [selectedSlice, setSelectedSlice] = React.useState<PieSlice | null>(null)
+
+    return (
+      <div className="w-[600px] p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold mb-4">Traffic Sources</h3>
+        <div className="flex gap-6">
+          <Waka3DPieChart
+            data={trafficData}
+            size={300}
+            onSliceClick={(slice) => setSelectedSlice(slice)}
+            explodeOnClick
+          />
+          {selectedSlice && (
+            <div className="flex-1 p-4 border rounded-lg bg-muted/30">
+              <h4 className="font-medium text-lg">{selectedSlice.label}</h4>
+              <p className="text-3xl font-bold text-primary mt-2">
+                {selectedSlice.value}%
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">of total traffic</p>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Comparison: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <h3 className="text-lg font-semibold text-center">Pie vs Donut vs 3D Pie</h3>
+      <div className="flex gap-8">
+        <div className="text-center">
+          <WakaPieChart data={browserData} size={200} showLegend={false} />
+          <p className="text-sm text-muted-foreground mt-2">Flat Pie</p>
+        </div>
+        <div className="text-center">
+          <WakaDonutChart data={browserData} size={200} thickness={35} showLegend={false} />
+          <p className="text-sm text-muted-foreground mt-2">Donut</p>
+        </div>
+        <div className="text-center">
+          <Waka3DPieChart data={browserData} size={200} depth={30} showLegend={false} />
+          <p className="text-sm text-muted-foreground mt-2">3D Pie</p>
+        </div>
+      </div>
+    </div>
+  ),
+}