@wakastellar/ui 2.3.5 → 3.0.0

package/src/components/waka-env-var-editor/WakaEnvVarEditor.stories.tsx

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaEnvVarEditor, defaultEnvVariables } from './index'
+import type { EnvVariable } from './index'
+import * as React from 'react'
+
+const simpleVariables: EnvVariable[] = [
+  { key: 'NODE_ENV', value: 'development' },
+  { key: 'PORT', value: '3000' },
+  { key: 'DEBUG', value: 'true' },
+]
+
+const productionVariables: EnvVariable[] = [
+  { key: 'NODE_ENV', value: 'production', isRequired: true },
+  { key: 'DATABASE_URL', value: 'postgresql://prod-user:secure-pass@db.example.com:5432/production', isSecret: true, isRequired: true },
+  { key: 'REDIS_URL', value: 'redis://redis.example.com:6379', isSecret: true },
+  { key: 'API_KEY', value: 'pk_live_1234567890abcdefghijklmnopqrstuvwxyz', isSecret: true, isRequired: true },
+  { key: 'SECRET_KEY', value: 'sk_live_9876543210zyxwvutsrqponmlkjihgfedcba', isSecret: true, isRequired: true },
+  { key: 'LOG_LEVEL', value: 'warn' },
+  { key: 'SENTRY_DSN', value: 'https://abc123@sentry.io/12345', isSecret: true },
+  { key: 'ENABLE_METRICS', value: 'true' },
+]
+
+const variablesWithSources: EnvVariable[] = [
+  { key: 'DATABASE_URL', value: 'postgresql://localhost:5432/dev', source: 'local', isSecret: true },
+  { key: 'DATABASE_URL', value: 'postgresql://staging-db:5432/staging', source: 'staging', isSecret: true },
+  { key: 'DATABASE_URL', value: 'postgresql://prod-db:5432/production', source: 'production', isSecret: true },
+  { key: 'API_KEY', value: 'dev_key_123', source: 'local', isSecret: true },
+  { key: 'API_KEY', value: 'staging_key_456', source: 'staging', isSecret: true },
+  { key: 'API_KEY', value: 'prod_key_789', source: 'production', isSecret: true },
+]
+
+const incompleteVariables: EnvVariable[] = [
+  { key: 'NODE_ENV', value: 'production', isRequired: true },
+  { key: 'DATABASE_URL', value: '', isSecret: true, isRequired: true },
+  { key: 'API_KEY', value: '', isSecret: true, isRequired: true },
+  { key: 'OPTIONAL_VAR', value: '' },
+]
+
+const meta: Meta<typeof WakaEnvVarEditor> = {
+  title: 'Components/DevOps/WakaEnvVarEditor',
+  component: WakaEnvVarEditor,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An environment variable editor with secret masking, import/export, search, and validation for required variables.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    readOnly: {
+      control: 'boolean',
+      description: 'Read-only mode',
+    },
+    showSource: {
+      control: 'boolean',
+      description: 'Show source column',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaEnvVarEditor>
+
+export const Default: Story = {
+  args: {
+    variables: defaultEnvVariables,
+  },
+  render: (args) => (
+    <div className="w-[700px] h-[500px]">
+      <WakaEnvVarEditor
+        {...args}
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <div className="w-[700px] h-[400px]">
+      <WakaEnvVarEditor
+        variables={simpleVariables}
+        title="Development Variables"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const Production: Story = {
+  render: () => (
+    <div className="w-[700px] h-[500px]">
+      <WakaEnvVarEditor
+        variables={productionVariables}
+        title="Production Environment"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const WithSources: Story = {
+  render: () => (
+    <div className="w-[750px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Variables from different environments
+      </p>
+      <WakaEnvVarEditor
+        variables={variablesWithSources}
+        showSource
+        title="Multi-Environment Variables"
+        onChange={(vars) => console.log('Change:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const MissingRequired: Story = {
+  render: () => (
+    <div className="w-[700px] h-[400px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Shows warning indicators for empty required variables
+      </p>
+      <WakaEnvVarEditor
+        variables={incompleteVariables}
+        title="Incomplete Configuration"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[700px] h-[500px]">
+      <WakaEnvVarEditor
+        variables={productionVariables}
+        readOnly
+        title="Production Variables (Read Only)"
+        onExport={() => console.log('Export')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [variables, setVariables] = React.useState<EnvVariable[]>(simpleVariables)
+    const [saved, setSaved] = React.useState(false)
+
+    const handleSave = (vars: EnvVariable[]) => {
+      console.log('Saving:', vars)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 2000)
+    }
+
+    return (
+      <div className="w-[700px] h-[500px]">
+        {saved && (
+          <div className="mb-4 p-2 bg-green-500/10 border border-green-500/30 rounded text-sm text-green-500">
+            Variables saved successfully!
+          </div>
+        )}
+        <WakaEnvVarEditor
+          variables={variables}
+          onChange={setVariables}
+          onSave={handleSave}
+          onExport={() => {
+            const content = variables
+              .map((v) => `${v.key}=${v.value}`)
+              .join('\n')
+            console.log('Export content:\n', content)
+            alert('Check console for exported content')
+          }}
+          title="Interactive Editor"
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[700px] h-[400px]">
+      <WakaEnvVarEditor
+        variables={[]}
+        title="No Variables"
+        onChange={(vars) => console.log('Change:', vars)}
+        onSave={(vars) => console.log('Save:', vars)}
+      />
+    </div>
+  ),
+}
+
+export const ManyVariables: Story = {
+  render: () => {
+    const manyVars: EnvVariable[] = Array.from({ length: 30 }, (_, i) => ({
+      key: `VARIABLE_${i + 1}`,
+      value: `value_${i + 1}`,
+      isSecret: i % 3 === 0,
+      isRequired: i % 5 === 0,
+    }))
+
+    return (
+      <div className="w-[700px] h-[600px]">
+        <WakaEnvVarEditor
+          variables={manyVars}
+          title="Large Configuration"
+          onChange={(vars) => console.log('Change:', vars)}
+          onSave={(vars) => console.log('Save:', vars)}
+          onExport={() => console.log('Export')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ConfigurationPanel: Story = {
+  render: () => {
+    const [variables, setVariables] = React.useState<EnvVariable[]>(defaultEnvVariables)
+
+    return (
+      <div className="p-6 rounded-xl border bg-card">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h2 className="text-xl font-bold">Application Configuration</h2>
+            <p className="text-sm text-muted-foreground">Environment: Production</p>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-muted-foreground">{variables.length} variables</span>
+            <span className="text-muted-foreground">•</span>
+            <span className="text-yellow-500">{variables.filter((v) => v.isSecret).length} secrets</span>
+          </div>
+        </div>
+
+        <div className="w-[650px]">
+          <WakaEnvVarEditor
+            variables={variables}
+            onChange={setVariables}
+            onSave={(vars) => {
+              console.log('Saving configuration:', vars)
+              alert(`Saved ${vars.length} variables!`)
+            }}
+            onExport={() => {
+              const content = variables
+                .map((v) => `${v.key}=${v.isSecret ? '***' : v.value}`)
+                .join('\n')
+              console.log('Export (secrets masked):\n', content)
+            }}
+          />
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-error-shake/WakaErrorShake.stories.tsx

@@ -0,0 +1,410 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaErrorShake, WakaFormFieldShake, useErrorShake } from './index'
+import type { WakaErrorShakeRef } from './index'
+import * as React from 'react'
+import { Button } from '../button'
+import { AlertCircle } from 'lucide-react'
+
+const meta: Meta<typeof WakaErrorShake> = {
+  title: 'Components/Effects/WakaErrorShake',
+  component: WakaErrorShake,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An error shake animation component for visual feedback on errors or invalid input.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    intensity: {
+      control: 'select',
+      options: ['light', 'medium', 'strong'],
+      description: 'Shake intensity',
+    },
+    duration: {
+      control: { type: 'range', min: 200, max: 1000, step: 50 },
+      description: 'Animation duration in ms',
+    },
+    glitchEffect: {
+      control: 'boolean',
+      description: 'Enable glitch/distortion effect',
+    },
+    flashEffect: {
+      control: 'boolean',
+      description: 'Enable red flash effect',
+    },
+    flashColor: {
+      control: 'color',
+      description: 'Flash color',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaErrorShake>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    const handleShake = () => {
+      setTrigger(true)
+      setTimeout(() => setTrigger(false), 100)
+    }
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger}>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Error Content</h3>
+            <p className="text-sm text-muted-foreground">
+              This content will shake when triggered.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button variant="destructive" onClick={handleShake}>
+          Trigger Shake
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const Intensities: Story = {
+  render: () => {
+    const [triggers, setTriggers] = React.useState({
+      light: false,
+      medium: false,
+      strong: false,
+    })
+
+    const handleTrigger = (intensity: keyof typeof triggers) => {
+      setTriggers((prev) => ({ ...prev, [intensity]: true }))
+      setTimeout(() => setTriggers((prev) => ({ ...prev, [intensity]: false })), 100)
+    }
+
+    return (
+      <div className="flex gap-6">
+        {(['light', 'medium', 'strong'] as const).map((intensity) => (
+          <div key={intensity} className="flex flex-col items-center gap-4">
+            <WakaErrorShake trigger={triggers[intensity]} intensity={intensity}>
+              <div className="p-4 border rounded-lg bg-card w-[150px] text-center">
+                <span className="capitalize">{intensity}</span>
+              </div>
+            </WakaErrorShake>
+            <Button size="sm" variant="outline" onClick={() => handleTrigger(intensity)}>
+              Shake
+            </Button>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}
+
+export const WithGlitchEffect: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger} glitchEffect intensity="strong">
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2 text-destructive">Critical Error</h3>
+            <p className="text-sm text-muted-foreground">
+              This includes a glitch/distortion effect.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger Glitch
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const NoFlashEffect: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger} flashEffect={false}>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">No Flash</h3>
+            <p className="text-sm text-muted-foreground">
+              Only shake animation, no red flash.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          variant="outline"
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Shake Only
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const CustomFlashColor: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake trigger={trigger} flashColor="rgb(251, 146, 60)">
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Warning Flash</h3>
+            <p className="text-sm text-muted-foreground">
+              Orange flash color for warnings.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          className="bg-orange-500 hover:bg-orange-600"
+          onClick={() => {
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger Warning
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const FormFieldShake: Story = {
+  render: () => {
+    const [error, setError] = React.useState(false)
+    const [value, setValue] = React.useState('')
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!value.includes('@')) {
+        setError(true)
+      } else {
+        setError(false)
+        alert('Submitted!')
+      }
+    }
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[300px] space-y-4">
+        <div>
+          <label className="text-sm font-medium">Email</label>
+          <WakaFormFieldShake hasError={error}>
+            <input
+              type="text"
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value)
+                if (error) setError(false)
+              }}
+              className={`w-full mt-1 px-3 py-2 border rounded-md ${
+                error ? 'border-destructive' : ''
+              }`}
+              placeholder="Enter your email"
+            />
+          </WakaFormFieldShake>
+          {error && (
+            <p className="text-sm text-destructive mt-1 flex items-center gap-1">
+              <AlertCircle className="h-3 w-3" />
+              Please enter a valid email
+            </p>
+          )}
+        </div>
+        <Button type="submit" className="w-full">
+          Submit
+        </Button>
+      </form>
+    )
+  },
+}
+
+export const WithRef: Story = {
+  render: () => {
+    const ref = React.useRef<WakaErrorShakeRef>(null)
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake ref={ref}>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Controlled via Ref</h3>
+            <p className="text-sm text-muted-foreground">
+              Use the ref to trigger shake programmatically.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <div className="flex gap-2">
+          <Button variant="destructive" onClick={() => ref.current?.shake()}>
+            Shake
+          </Button>
+          <Button variant="outline" onClick={() => ref.current?.reset()}>
+            Reset
+          </Button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { shake, ShakeWrapper } = useErrorShake({
+      intensity: 'medium',
+      onComplete: () => console.log('Shake complete!'),
+    })
+
+    return (
+      <div className="space-y-6">
+        <ShakeWrapper>
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">Using Hook</h3>
+            <p className="text-sm text-muted-foreground">
+              Controlled via useErrorShake hook.
+            </p>
+          </div>
+        </ShakeWrapper>
+        <Button variant="destructive" onClick={shake}>
+          Trigger via Hook
+        </Button>
+      </div>
+    )
+  },
+}
+
+export const LoginFormExample: Story = {
+  render: () => {
+    const [username, setUsername] = React.useState('')
+    const [password, setPassword] = React.useState('')
+    const [errors, setErrors] = React.useState({ username: false, password: false })
+    const [loginError, setLoginError] = React.useState(false)
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+
+      const newErrors = {
+        username: !username,
+        password: !password,
+      }
+      setErrors(newErrors)
+
+      if (!newErrors.username && !newErrors.password) {
+        if (username !== 'admin' || password !== 'password') {
+          setLoginError(true)
+          setTimeout(() => setLoginError(false), 100)
+        } else {
+          alert('Login successful!')
+        }
+      }
+    }
+
+    return (
+      <WakaErrorShake trigger={loginError} intensity="medium">
+        <form onSubmit={handleSubmit} className="w-[320px] p-6 border rounded-lg bg-card">
+          <h2 className="text-xl font-bold mb-6 text-center">Login</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Username</label>
+              <WakaFormFieldShake hasError={errors.username}>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => {
+                    setUsername(e.target.value)
+                    setErrors((p) => ({ ...p, username: false }))
+                  }}
+                  className={`w-full mt-1 px-3 py-2 border rounded-md ${
+                    errors.username ? 'border-destructive' : ''
+                  }`}
+                  placeholder="Enter username"
+                />
+              </WakaFormFieldShake>
+              {errors.username && (
+                <p className="text-xs text-destructive mt-1">Username is required</p>
+              )}
+            </div>
+            <div>
+              <label className="text-sm font-medium">Password</label>
+              <WakaFormFieldShake hasError={errors.password}>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => {
+                    setPassword(e.target.value)
+                    setErrors((p) => ({ ...p, password: false }))
+                  }}
+                  className={`w-full mt-1 px-3 py-2 border rounded-md ${
+                    errors.password ? 'border-destructive' : ''
+                  }`}
+                  placeholder="Enter password"
+                />
+              </WakaFormFieldShake>
+              {errors.password && (
+                <p className="text-xs text-destructive mt-1">Password is required</p>
+              )}
+            </div>
+            <Button type="submit" className="w-full">
+              Sign In
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground mt-4 text-center">
+            Try: admin / password
+          </p>
+        </form>
+      </WakaErrorShake>
+    )
+  },
+}
+
+export const WithCallback: Story = {
+  render: () => {
+    const [trigger, setTrigger] = React.useState(false)
+    const [message, setMessage] = React.useState('')
+
+    return (
+      <div className="space-y-6">
+        <WakaErrorShake
+          trigger={trigger}
+          onComplete={() => setMessage('Shake animation completed!')}
+        >
+          <div className="p-6 border rounded-lg bg-card w-[300px]">
+            <h3 className="font-semibold mb-2">With Callback</h3>
+            <p className="text-sm text-muted-foreground">
+              Callback fires when animation ends.
+            </p>
+          </div>
+        </WakaErrorShake>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            setMessage('')
+            setTrigger(true)
+            setTimeout(() => setTrigger(false), 100)
+          }}
+        >
+          Trigger
+        </Button>
+        {message && (
+          <p className="text-sm text-muted-foreground">{message}</p>
+        )}
+      </div>
+    )
+  },
+}