@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-password-strength/WakaPasswordStrength.stories.tsx

@@ -0,0 +1,318 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPasswordStrength, WakaPasswordStrengthIndicator } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaPasswordStrength> = {
+  title: 'Components/Forms/WakaPasswordStrength',
+  component: WakaPasswordStrength,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A password strength indicator with animated bar, checklist, and configurable requirements.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size of the component',
+    },
+    showInput: {
+      control: 'boolean',
+      description: 'Show password input',
+    },
+    showStrengthBar: {
+      control: 'boolean',
+      description: 'Show strength bar',
+    },
+    showChecklist: {
+      control: 'boolean',
+      description: 'Show requirements checklist',
+    },
+    showStrengthLabel: {
+      control: 'boolean',
+      description: 'Show strength label',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPasswordStrength>
+
+export const Default: Story = {
+  render: function PasswordStrengthDemo() {
+    const [password, setPassword] = React.useState('')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          placeholder="Enter password"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithInitialValue: Story = {
+  render: function InitialValueDemo() {
+    const [password, setPassword] = React.useState('MyP@ssw0rd!')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+        />
+      </div>
+    )
+  },
+}
+
+export const BarOnly: Story = {
+  render: function BarOnlyDemo() {
+    const [password, setPassword] = React.useState('')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          showChecklist={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const ChecklistOnly: Story = {
+  render: function ChecklistOnlyDemo() {
+    const [password, setPassword] = React.useState('')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          showStrengthBar={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomRequirements: Story = {
+  render: function CustomRequirementsDemo() {
+    const [password, setPassword] = React.useState('')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          minLength={10}
+          requireUppercase
+          requireLowercase
+          requireNumber
+          requireSpecialChar={false}
+          customRequirements={[
+            {
+              key: 'noSpaces',
+              label: 'No spaces allowed',
+              validate: (p) => !p.includes(' '),
+              required: true,
+            },
+          ]}
+        />
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [password, setPassword] = React.useState('Test123!')
+
+    return (
+      <div className="space-y-8 w-[350px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Small</p>
+          <WakaPasswordStrength
+            password={password}
+            onPasswordChange={setPassword}
+            size="sm"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Default</p>
+          <WakaPasswordStrength
+            password={password}
+            onPasswordChange={setPassword}
+            size="default"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Large</p>
+          <WakaPasswordStrength
+            password={password}
+            onPasswordChange={setPassword}
+            size="lg"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: function ErrorDemo() {
+    const [password, setPassword] = React.useState('weak')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          error="Password does not meet requirements"
+        />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[350px]">
+      <WakaPasswordStrength
+        password="SecureP@ss123"
+        label="Password"
+        disabled
+      />
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: function NoAnimationDemo() {
+    const [password, setPassword] = React.useState('')
+
+    return (
+      <div className="w-[350px]">
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          animated={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const IndicatorOnly: Story = {
+  render: function IndicatorOnlyDemo() {
+    const [password, setPassword] = React.useState('')
+
+    return (
+      <div className="w-[350px] space-y-4">
+        <div>
+          <label className="text-sm font-medium">Password</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full mt-1 px-3 py-2 border rounded-md"
+            placeholder="Enter password"
+          />
+        </div>
+        <WakaPasswordStrengthIndicator password={password} />
+      </div>
+    )
+  },
+}
+
+export const StrengthLevels: Story = {
+  render: () => (
+    <div className="w-[350px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Weak</p>
+        <WakaPasswordStrength password="abc" showInput={false} showChecklist={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Fair</p>
+        <WakaPasswordStrength password="abc12345" showInput={false} showChecklist={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Good</p>
+        <WakaPasswordStrength password="Abc12345" showInput={false} showChecklist={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Strong</p>
+        <WakaPasswordStrength password="Abc12345!" showInput={false} showChecklist={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Very Strong</p>
+        <WakaPasswordStrength password="Abc12345!@#$XYZ" showInput={false} showChecklist={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const RegistrationForm: Story = {
+  render: function RegistrationDemo() {
+    const [password, setPassword] = React.useState('')
+    const [confirmPassword, setConfirmPassword] = React.useState('')
+    const [isValid, setIsValid] = React.useState(false)
+
+    return (
+      <div className="w-[400px] space-y-6 p-6 border rounded-lg">
+        <div>
+          <h3 className="font-semibold">Create Account</h3>
+          <p className="text-sm text-muted-foreground">Choose a strong password</p>
+        </div>
+
+        <WakaPasswordStrength
+          password={password}
+          onPasswordChange={setPassword}
+          label="Password"
+          onStrengthChange={(result) => setIsValid(result.isValid)}
+        />
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Confirm Password</label>
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            className="w-full px-3 py-2 border rounded-md"
+            placeholder="Confirm password"
+          />
+          {confirmPassword && password !== confirmPassword && (
+            <p className="text-sm text-destructive">Passwords do not match</p>
+          )}
+        </div>
+
+        <button
+          className="w-full py-2 px-4 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+          disabled={!isValid || password !== confirmPassword}
+        >
+          Create Account
+        </button>
+      </div>
+    )
+  },
+}

package/src/components/waka-pipeline-view/WakaPipelineView.stories.tsx

@@ -0,0 +1,386 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPipelineView } from './index'
+import type { PipelineStage, StageStatus } from './index'
+import * as React from 'react'
+
+const completedPipeline: PipelineStage[] = [
+  { id: 'checkout', name: 'Checkout', status: 'success', duration: 3 },
+  { id: 'install', name: 'Install', status: 'success', duration: 45 },
+  { id: 'lint', name: 'Lint', status: 'success', duration: 12 },
+  { id: 'test', name: 'Test', status: 'success', duration: 89 },
+  { id: 'build', name: 'Build', status: 'success', duration: 34 },
+  { id: 'deploy', name: 'Deploy', status: 'success', duration: 28 },
+]
+
+const runningPipeline: PipelineStage[] = [
+  { id: 'checkout', name: 'Checkout', status: 'success', duration: 3 },
+  { id: 'install', name: 'Install', status: 'success', duration: 45 },
+  { id: 'lint', name: 'Lint', status: 'success', duration: 12 },
+  { id: 'test', name: 'Test', status: 'running', duration: 42 },
+  { id: 'build', name: 'Build', status: 'pending' },
+  { id: 'deploy', name: 'Deploy', status: 'pending' },
+]
+
+const failedPipeline: PipelineStage[] = [
+  { id: 'checkout', name: 'Checkout', status: 'success', duration: 3 },
+  { id: 'install', name: 'Install', status: 'success', duration: 45 },
+  { id: 'lint', name: 'Lint', status: 'success', duration: 12 },
+  { id: 'test', name: 'Test', status: 'failed', duration: 156 },
+  { id: 'build', name: 'Build', status: 'skipped' },
+  { id: 'deploy', name: 'Deploy', status: 'skipped' },
+]
+
+const pipelineWithJobs: PipelineStage[] = [
+  { id: 'checkout', name: 'Checkout', status: 'success', duration: 3 },
+  {
+    id: 'test',
+    name: 'Test',
+    status: 'success',
+    duration: 156,
+    jobs: [
+      { id: 'unit', name: 'Unit Tests', status: 'success', duration: 45 },
+      { id: 'integration', name: 'Integration Tests', status: 'success', duration: 89 },
+      { id: 'e2e', name: 'E2E Tests', status: 'success', duration: 120 },
+    ],
+  },
+  {
+    id: 'build',
+    name: 'Build',
+    status: 'running',
+    jobs: [
+      { id: 'build-app', name: 'Build App', status: 'success', duration: 23 },
+      { id: 'build-docs', name: 'Build Docs', status: 'running' },
+      { id: 'build-storybook', name: 'Build Storybook', status: 'pending' },
+    ],
+  },
+  {
+    id: 'deploy',
+    name: 'Deploy',
+    status: 'pending',
+    jobs: [
+      { id: 'deploy-staging', name: 'Deploy Staging', status: 'pending' },
+      { id: 'deploy-prod', name: 'Deploy Production', status: 'pending' },
+    ],
+  },
+]
+
+const meta: Meta<typeof WakaPipelineView> = {
+  title: 'Components/DevOps/WakaPipelineView',
+  component: WakaPipelineView,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A CI/CD pipeline visualization with stage status, duration, parallel jobs, retry support, and horizontal/vertical layouts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Layout variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    showDuration: {
+      control: 'boolean',
+      description: 'Show duration for each stage',
+    },
+    showJobs: {
+      control: 'boolean',
+      description: 'Show parallel jobs within stages',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPipelineView>
+
+export const Default: Story = {
+  args: {
+    stages: completedPipeline,
+    variant: 'horizontal',
+    size: 'md',
+    showDuration: true,
+    showJobs: true,
+    animated: true,
+  },
+  render: (args) => <WakaPipelineView {...args} onStageClick={(id) => console.log('Clicked:', id)} />,
+}
+
+export const Running: Story = {
+  render: () => (
+    <WakaPipelineView
+      stages={runningPipeline}
+      onStageClick={(id) => console.log('Clicked:', id)}
+    />
+  ),
+}
+
+export const Failed: Story = {
+  render: () => (
+    <WakaPipelineView
+      stages={failedPipeline}
+      onStageClick={(id) => console.log('Clicked:', id)}
+      onRetry={(id) => console.log('Retry:', id)}
+    />
+  ),
+}
+
+export const WithJobs: Story = {
+  render: () => (
+    <WakaPipelineView
+      stages={pipelineWithJobs}
+      showJobs
+      onStageClick={(id) => console.log('Clicked:', id)}
+    />
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaPipelineView
+        stages={runningPipeline}
+        variant="vertical"
+        onStageClick={(id) => console.log('Clicked:', id)}
+      />
+    </div>
+  ),
+}
+
+export const VerticalWithJobs: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaPipelineView
+        stages={pipelineWithJobs}
+        variant="vertical"
+        showJobs
+        onStageClick={(id) => console.log('Clicked:', id)}
+      />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">Small</p>
+        <WakaPipelineView stages={completedPipeline} size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">Medium (Default)</p>
+        <WakaPipelineView stages={completedPipeline} size="md" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-4">Large</p>
+        <WakaPipelineView stages={completedPipeline} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const AllStatuses: Story = {
+  render: () => {
+    const allStatuses: PipelineStage[] = [
+      { id: '1', name: 'Pending', status: 'pending' },
+      { id: '2', name: 'Running', status: 'running' },
+      { id: '3', name: 'Success', status: 'success', duration: 30 },
+      { id: '4', name: 'Failed', status: 'failed', duration: 45 },
+      { id: '5', name: 'Skipped', status: 'skipped' },
+      { id: '6', name: 'Cancelled', status: 'cancelled' },
+    ]
+
+    return (
+      <div className="space-y-6">
+        <p className="text-sm text-muted-foreground">All possible stage statuses</p>
+        <WakaPipelineView stages={allStatuses} />
+      </div>
+    )
+  },
+}
+
+export const NoDuration: Story = {
+  render: () => (
+    <WakaPipelineView
+      stages={completedPipeline}
+      showDuration={false}
+    />
+  ),
+}
+
+export const NoAnimations: Story = {
+  render: () => (
+    <WakaPipelineView
+      stages={runningPipeline}
+      animated={false}
+    />
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [stages, setStages] = React.useState<PipelineStage[]>([
+      { id: 'checkout', name: 'Checkout', status: 'pending' },
+      { id: 'install', name: 'Install', status: 'pending' },
+      { id: 'lint', name: 'Lint', status: 'pending' },
+      { id: 'test', name: 'Test', status: 'pending' },
+      { id: 'build', name: 'Build', status: 'pending' },
+      { id: 'deploy', name: 'Deploy', status: 'pending' },
+    ])
+    const [currentIndex, setCurrentIndex] = React.useState(-1)
+
+    const runPipeline = () => {
+      setStages(prev => prev.map(s => ({ ...s, status: 'pending' as StageStatus, duration: undefined })))
+      setCurrentIndex(0)
+    }
+
+    React.useEffect(() => {
+      if (currentIndex < 0 || currentIndex >= stages.length) return
+
+      // Set current stage to running
+      setStages(prev => prev.map((s, i) => ({
+        ...s,
+        status: i === currentIndex ? 'running' : i < currentIndex ? 'success' : 'pending',
+      })))
+
+      // Complete after random duration
+      const duration = Math.floor(Math.random() * 3000) + 1000
+      const timer = setTimeout(() => {
+        setStages(prev => prev.map((s, i) => ({
+          ...s,
+          status: i <= currentIndex ? 'success' : 'pending',
+          duration: i === currentIndex ? Math.floor(duration / 1000) : s.duration,
+        })))
+        setCurrentIndex(prev => prev + 1)
+      }, duration)
+
+      return () => clearTimeout(timer)
+    }, [currentIndex, stages.length])
+
+    const isRunning = currentIndex >= 0 && currentIndex < stages.length
+    const isComplete = currentIndex >= stages.length
+
+    return (
+      <div className="space-y-6">
+        <WakaPipelineView
+          stages={stages}
+          onStageClick={(id) => console.log('Clicked:', id)}
+        />
+
+        <div className="flex items-center gap-4">
+          <button
+            onClick={runPipeline}
+            disabled={isRunning}
+            className="px-4 py-2 text-sm rounded bg-primary text-primary-foreground disabled:opacity-50"
+          >
+            {isComplete ? 'Run Again' : isRunning ? 'Running...' : 'Start Pipeline'}
+          </button>
+          {isComplete && (
+            <span className="text-sm text-green-500">Pipeline completed successfully!</span>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CICDDashboard: Story = {
+  render: () => {
+    const pipelines = [
+      {
+        name: 'main',
+        commit: 'fix: resolve memory leak in worker',
+        stages: completedPipeline,
+        time: '2 hours ago',
+        status: 'success' as const,
+      },
+      {
+        name: 'feature/auth',
+        commit: 'feat: add OAuth2 support',
+        stages: runningPipeline,
+        time: '5 minutes ago',
+        status: 'running' as const,
+      },
+      {
+        name: 'fix/api-timeout',
+        commit: 'fix: increase API timeout to 30s',
+        stages: failedPipeline,
+        time: '1 hour ago',
+        status: 'failed' as const,
+      },
+    ]
+
+    return (
+      <div className="w-[900px] p-6 rounded-xl border bg-card">
+        <h2 className="text-xl font-bold mb-6">CI/CD Pipelines</h2>
+
+        <div className="space-y-6">
+          {pipelines.map((pipeline) => (
+            <div key={pipeline.name} className="p-4 rounded-lg border bg-muted/20">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                  <div className={`w-2 h-2 rounded-full ${
+                    pipeline.status === 'success' ? 'bg-green-500' :
+                    pipeline.status === 'running' ? 'bg-blue-500 animate-pulse' :
+                    'bg-red-500'
+                  }`} />
+                  <span className="font-mono font-medium">{pipeline.name}</span>
+                  <span className="text-sm text-muted-foreground truncate max-w-[300px]">
+                    {pipeline.commit}
+                  </span>
+                </div>
+                <span className="text-xs text-muted-foreground">{pipeline.time}</span>
+              </div>
+
+              <WakaPipelineView
+                stages={pipeline.stages}
+                size="sm"
+                onRetry={pipeline.status === 'failed' ? (id) => console.log('Retry:', id) : undefined}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const LongPipeline: Story = {
+  render: () => {
+    const longPipeline: PipelineStage[] = [
+      { id: '1', name: 'Init', status: 'success', duration: 2 },
+      { id: '2', name: 'Checkout', status: 'success', duration: 5 },
+      { id: '3', name: 'Install', status: 'success', duration: 120 },
+      { id: '4', name: 'Lint', status: 'success', duration: 15 },
+      { id: '5', name: 'Type Check', status: 'success', duration: 25 },
+      { id: '6', name: 'Unit Tests', status: 'success', duration: 90 },
+      { id: '7', name: 'Integration', status: 'running', duration: 45 },
+      { id: '8', name: 'E2E Tests', status: 'pending' },
+      { id: '9', name: 'Build', status: 'pending' },
+      { id: '10', name: 'Docker', status: 'pending' },
+      { id: '11', name: 'Deploy Staging', status: 'pending' },
+      { id: '12', name: 'Smoke Tests', status: 'pending' },
+      { id: '13', name: 'Deploy Prod', status: 'pending' },
+    ]
+
+    return (
+      <div className="overflow-x-auto pb-4">
+        <WakaPipelineView
+          stages={longPipeline}
+          size="sm"
+        />
+      </div>
+    )
+  },
+}