@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-resource-gauge/WakaResourceGauge.stories.tsx

@@ -0,0 +1,366 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaResourceGauge,
+  WakaResourceGaugeGroup,
+  WakaCpuGauge,
+  WakaRamGauge,
+  WakaStorageGauge,
+  WakaNetworkGauge,
+  useResourceGauge,
+} from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaResourceGauge> = {
+  title: 'Components/Charts/WakaResourceGauge',
+  component: WakaResourceGauge,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A circular gauge component for displaying resource usage (CPU, RAM, Storage, etc.) with customizable thresholds, animations, and color zones.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Current value',
+    },
+    max: {
+      control: { type: 'range', min: 50, max: 200, step: 10 },
+      description: 'Maximum value',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Gauge size',
+    },
+    variant: {
+      control: 'select',
+      options: ['full', 'semi', 'quarter'],
+      description: 'Gauge variant',
+    },
+    showValue: {
+      control: 'boolean',
+      description: 'Show value in center',
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Show label',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+    glowOnDanger: {
+      control: 'boolean',
+      description: 'Enable glow effect in danger zone',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaResourceGauge>
+
+export const Default: Story = {
+  args: {
+    value: 65,
+    label: 'CPU',
+  },
+  render: (args) => <WakaResourceGauge {...args} />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <WakaResourceGauge value={45} label="Small" size="sm" />
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={65} label="Medium" size="md" />
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={85} label="Large" size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex items-start gap-8">
+      <div className="text-center">
+        <WakaResourceGauge value={72} label="Full" variant="full" />
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={72} label="Semi" variant="semi" />
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={72} label="Quarter" variant="quarter" />
+      </div>
+    </div>
+  ),
+}
+
+export const ThresholdZones: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaResourceGauge value={45} label="Safe Zone" />
+        <p className="text-xs text-green-600 mt-1">Below 70%</p>
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={78} label="Warning Zone" />
+        <p className="text-xs text-yellow-600 mt-1">70% - 85%</p>
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={92} label="Danger Zone" />
+        <p className="text-xs text-red-600 mt-1">Above 85%</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomThresholds: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaResourceGauge
+          value={55}
+          label="Conservative"
+          thresholds={{ warning: 50, danger: 70 }}
+        />
+        <p className="text-xs text-muted-foreground mt-1">Warn at 50%</p>
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge
+          value={55}
+          label="Default"
+          thresholds={{ warning: 70, danger: 85 }}
+        />
+        <p className="text-xs text-muted-foreground mt-1">Warn at 70%</p>
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge
+          value={55}
+          label="Lenient"
+          thresholds={{ warning: 80, danger: 95 }}
+        />
+        <p className="text-xs text-muted-foreground mt-1">Warn at 80%</p>
+      </div>
+    </div>
+  ),
+}
+
+export const PresetGauges: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <WakaCpuGauge value={67} />
+      <WakaRamGauge value={48} max={64} />
+      <WakaStorageGauge value={256} max={512} />
+      <WakaNetworkGauge value={450} max={1000} />
+    </div>
+  ),
+}
+
+export const WithHistory: Story = {
+  render: () => {
+    const history = [45, 52, 48, 55, 62, 58, 65, 72, 68, 75, 82, 78, 85, 88, 82]
+
+    return (
+      <div className="flex gap-8">
+        <WakaResourceGauge
+          value={82}
+          label="With Sparkline"
+          history={history}
+        />
+        <WakaResourceGauge
+          value={65}
+          label="No Sparkline"
+        />
+      </div>
+    )
+  },
+}
+
+export const GaugeGroup: Story = {
+  render: () => (
+    <WakaResourceGaugeGroup
+      gauges={[
+        { id: 'cpu', value: 72, label: 'CPU' },
+        { id: 'ram', value: 58, label: 'RAM', unit: 'GB', max: 64 },
+        { id: 'disk', value: 340, label: 'Disk', unit: 'GB', max: 500 },
+        { id: 'net', value: 45, label: 'Network', unit: 'Mbps' },
+      ]}
+      gap="lg"
+    />
+  ),
+}
+
+export const VerticalGroup: Story = {
+  render: () => (
+    <WakaResourceGaugeGroup
+      gauges={[
+        { id: 'cpu', value: 72, label: 'CPU', size: 'sm' },
+        { id: 'ram', value: 58, label: 'RAM', size: 'sm' },
+        { id: 'disk', value: 85, label: 'Disk', size: 'sm' },
+      ]}
+      direction="vertical"
+      gap="md"
+    />
+  ),
+}
+
+export const NoValue: Story = {
+  render: () => (
+    <WakaResourceGauge value={75} label="CPU" showValue={false} />
+  ),
+}
+
+export const NoLabel: Story = {
+  render: () => (
+    <WakaResourceGauge value={75} label="CPU" showLabel={false} />
+  ),
+}
+
+export const NoGlow: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="text-center">
+        <WakaResourceGauge value={92} label="With Glow" glowOnDanger />
+      </div>
+      <div className="text-center">
+        <WakaResourceGauge value={92} label="No Glow" glowOnDanger={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaResourceGauge value={75} label="Static" animated={false} />
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { value, percentage, history, updateValue } = useResourceGauge(50, 100)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 justify-center">
+          <button
+            onClick={() => updateValue(value - 10)}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            -10
+          </button>
+          <button
+            onClick={() => updateValue(value + 10)}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            +10
+          </button>
+          <button
+            onClick={() => updateValue(Math.floor(Math.random() * 100))}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Random
+          </button>
+        </div>
+        <WakaResourceGauge
+          value={value}
+          label="Interactive"
+          history={history}
+        />
+        <p className="text-sm text-muted-foreground text-center">
+          Value: {value} | Percentage: {percentage.toFixed(1)}%
+        </p>
+      </div>
+    )
+  },
+}
+
+export const ServerDashboard: Story = {
+  render: () => {
+    const cpuHistory = [42, 45, 48, 52, 55, 58, 62, 65, 68, 72]
+    const ramHistory = [55, 54, 56, 58, 57, 59, 61, 60, 62, 64]
+
+    return (
+      <div className="w-[600px] p-6 border rounded-lg">
+        <div className="flex justify-between items-start mb-6">
+          <div>
+            <h3 className="text-lg font-semibold">Server Status</h3>
+            <p className="text-sm text-muted-foreground">Production Web Server 01</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-sm text-green-600">Healthy</span>
+          </div>
+        </div>
+        <div className="flex justify-center gap-12">
+          <WakaResourceGauge
+            value={72}
+            label="CPU"
+            size="lg"
+            history={cpuHistory}
+          />
+          <WakaResourceGauge
+            value={64}
+            label="RAM"
+            unit="GB"
+            max={128}
+            size="lg"
+            history={ramHistory}
+          />
+          <WakaResourceGauge
+            value={340}
+            label="Disk"
+            unit="GB"
+            max={500}
+            size="lg"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CompactResourceMonitor: Story = {
+  render: () => (
+    <div className="w-[300px] p-4 border rounded-lg">
+      <h4 className="text-sm font-medium mb-4">Resource Monitor</h4>
+      <div className="flex justify-around">
+        <WakaResourceGauge value={72} label="CPU" size="sm" variant="semi" />
+        <WakaResourceGauge value={58} label="RAM" size="sm" variant="semi" />
+        <WakaResourceGauge value={45} label="Net" size="sm" variant="semi" />
+      </div>
+    </div>
+  ),
+}
+
+export const CriticalAlert: Story = {
+  render: () => (
+    <div className="p-6 border border-red-200 bg-red-50 rounded-lg dark:border-red-900 dark:bg-red-950/50">
+      <div className="flex items-center gap-4 mb-4">
+        <div className="w-3 h-3 rounded-full bg-red-500 animate-pulse" />
+        <h3 className="text-lg font-semibold text-red-700 dark:text-red-400">Critical Resource Alert</h3>
+      </div>
+      <div className="flex gap-8 justify-center">
+        <WakaResourceGauge
+          value={95}
+          label="CPU"
+          size="lg"
+          glowOnDanger
+        />
+        <WakaResourceGauge
+          value={92}
+          label="Memory"
+          size="lg"
+          glowOnDanger
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-rich-text-editor/WakaRichTextEditor.stories.tsx

@@ -0,0 +1,238 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaRichTextEditor } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaRichTextEditor> = {
+  title: 'Components/Forms/WakaRichTextEditor',
+  component: WakaRichTextEditor,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A rich text editor with toolbar, formatting options, and character count.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showCharacterCount: {
+      control: 'boolean',
+      description: 'Show character count',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the editor',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Make content editable',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaRichTextEditor>
+
+export const Default: Story = {
+  render: function EditorDemo() {
+    const [content, setContent] = React.useState('<p>Start typing...</p>')
+
+    return (
+      <div className="w-[600px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Content"
+          placeholder="Write something..."
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCharacterCount: Story = {
+  render: function CharCountDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[600px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Description"
+          showCharacterCount
+          maxLength={500}
+          placeholder="Enter description (max 500 characters)"
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomToolbar: Story = {
+  render: function CustomToolbarDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[600px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Simple Editor"
+          toolbar={[
+            ['bold', 'italic', 'underline'],
+            ['bulletList', 'orderedList'],
+            ['undo', 'redo'],
+          ]}
+          placeholder="Simple toolbar..."
+        />
+      </div>
+    )
+  },
+}
+
+export const FullToolbar: Story = {
+  render: function FullToolbarDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[700px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Full Editor"
+          toolbar={[
+            ['bold', 'italic', 'underline', 'strike'],
+            ['h1', 'h2', 'h3'],
+            ['bulletList', 'orderedList', 'blockquote'],
+            ['alignLeft', 'alignCenter', 'alignRight'],
+            ['link', 'code'],
+            ['undo', 'redo'],
+          ]}
+          minHeight={300}
+          showCharacterCount
+        />
+      </div>
+    )
+  },
+}
+
+export const WithDescription: Story = {
+  render: function DescriptionDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[600px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Article Content"
+          description="Write your article content. Use the toolbar to format text."
+          placeholder="Start writing your article..."
+          minHeight={250}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: function ErrorDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[600px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Required Content"
+          error="Content is required"
+          placeholder="Enter required content..."
+        />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaRichTextEditor
+        value="<p>This content cannot be edited.</p>"
+        label="Disabled Editor"
+        disabled
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaRichTextEditor
+        value="<p><strong>Read-only content</strong></p><p>This content is displayed but cannot be edited.</p>"
+        label="Read Only"
+        editable={false}
+      />
+    </div>
+  ),
+}
+
+export const MinimalHeight: Story = {
+  render: function MinimalDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[600px]">
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Short Note"
+          minHeight={100}
+          toolbar={[['bold', 'italic'], ['undo', 'redo']]}
+          placeholder="Quick note..."
+        />
+      </div>
+    )
+  },
+}
+
+export const BlogPostEditor: Story = {
+  render: function BlogPostDemo() {
+    const [content, setContent] = React.useState('')
+
+    return (
+      <div className="w-[700px] space-y-4 p-4 border rounded-lg">
+        <div>
+          <h3 className="font-semibold text-lg">Create Blog Post</h3>
+          <p className="text-sm text-muted-foreground">
+            Write and format your blog post content
+          </p>
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Title</label>
+          <input
+            type="text"
+            className="w-full px-3 py-2 border rounded-md"
+            placeholder="Enter post title..."
+          />
+        </div>
+        <WakaRichTextEditor
+          value={content}
+          onChange={setContent}
+          label="Content"
+          minHeight={350}
+          showCharacterCount
+          toolbar={[
+            ['bold', 'italic', 'underline'],
+            ['h2', 'h3'],
+            ['bulletList', 'orderedList', 'blockquote'],
+            ['link', 'code'],
+            ['undo', 'redo'],
+          ]}
+          placeholder="Write your blog post content..."
+        />
+      </div>
+    )
+  },
+}