@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-datetime-picker/WakaDateTimePicker.stories.tsx

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDateTimePicker } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaDateTimePicker> = {
+  title: 'Components/Forms/WakaDateTimePicker',
+  component: WakaDateTimePicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A comprehensive date/time picker with single date, range, multiple selection, presets and validation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['date', 'time', 'datetime', 'range', 'multiple'],
+      description: 'Picker variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    locale: {
+      control: 'select',
+      options: ['fr', 'en', 'es', 'de'],
+      description: 'Locale for date formatting',
+    },
+    timeFormat: {
+      control: 'select',
+      options: ['12h', '24h'],
+      description: 'Time format',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the picker',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDateTimePicker>
+
+export const Default: Story = {
+  render: function DatePickerDemo() {
+    const [date, setDate] = React.useState<Date | null>(null)
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          label="Select Date"
+          placeholder="Pick a date"
+        />
+      </div>
+    )
+  },
+}
+
+export const DateOnly: Story = {
+  render: function DateOnlyDemo() {
+    const [date, setDate] = React.useState<Date | null>(new Date())
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          variant="date"
+          label="Date"
+        />
+      </div>
+    )
+  },
+}
+
+export const TimeOnly: Story = {
+  render: function TimeOnlyDemo() {
+    const [time, setTime] = React.useState<Date | null>(new Date())
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={time}
+          onChange={(t) => setTime(t as Date | null)}
+          variant="time"
+          label="Time"
+          timeFormat="24h"
+        />
+      </div>
+    )
+  },
+}
+
+export const DateTime: Story = {
+  render: function DateTimeDemo() {
+    const [datetime, setDatetime] = React.useState<Date | null>(new Date())
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={datetime}
+          onChange={(dt) => setDatetime(dt as Date | null)}
+          variant="datetime"
+          label="Date & Time"
+          showSeconds={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const DateRange: Story = {
+  render: function DateRangeDemo() {
+    const [range, setRange] = React.useState<{ from?: Date; to?: Date } | null>(null)
+
+    return (
+      <div className="w-[400px]">
+        <WakaDateTimePicker
+          value={range}
+          onChange={(r) => setRange(r as { from?: Date; to?: Date } | null)}
+          variant="range"
+          label="Date Range"
+          monthsShown={2}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithPresets: Story = {
+  render: function PresetsDemo() {
+    const [range, setRange] = React.useState<{ from?: Date; to?: Date } | null>(null)
+
+    return (
+      <div className="w-[400px]">
+        <WakaDateTimePicker
+          value={range}
+          onChange={(r) => setRange(r as { from?: Date; to?: Date } | null)}
+          variant="range"
+          label="Date Range with Presets"
+          showPresets
+          monthsShown={2}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultipleDates: Story = {
+  render: function MultipleDatesDemo() {
+    const [dates, setDates] = React.useState<Date[] | null>([])
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={dates}
+          onChange={(d) => setDates(d as Date[] | null)}
+          variant="multiple"
+          label="Select Multiple Dates"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithMinMax: Story = {
+  render: function MinMaxDemo() {
+    const [date, setDate] = React.useState<Date | null>(null)
+    const today = new Date()
+    const minDate = new Date(today.getFullYear(), today.getMonth(), 1)
+    const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          label="Select Date (This Month Only)"
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithValidation: Story = {
+  render: function ValidationDemo() {
+    const [date, setDate] = React.useState<Date | null>(null)
+
+    return (
+      <div className="w-[300px]">
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          label="No Weekends"
+          validation={{
+            disabledDaysOfWeek: [0, 6],
+            message: 'Weekends are not available',
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const Inline: Story = {
+  render: function InlineDemo() {
+    const [date, setDate] = React.useState<Date | null>(new Date())
+
+    return (
+      <div className="w-[350px]">
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          label="Inline Calendar"
+          inline
+        />
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    return (
+      <div className="space-y-4 w-[300px]">
+        <WakaDateTimePicker
+          value={new Date()}
+          size="sm"
+          label="Small"
+        />
+        <WakaDateTimePicker
+          value={new Date()}
+          size="md"
+          label="Medium"
+        />
+        <WakaDateTimePicker
+          value={new Date()}
+          size="lg"
+          label="Large"
+        />
+      </div>
+    )
+  },
+}
+
+export const Locales: Story = {
+  render: function LocalesDemo() {
+    const [date, setDate] = React.useState<Date | null>(new Date())
+
+    return (
+      <div className="space-y-4 w-[300px]">
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          locale="fr"
+          label="French"
+        />
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          locale="en"
+          label="English"
+        />
+        <WakaDateTimePicker
+          value={date}
+          onChange={(d) => setDate(d as Date | null)}
+          locale="de"
+          label="German"
+        />
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaDateTimePicker
+        label="Required Date"
+        required
+        error="This field is required"
+      />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaDateTimePicker
+        value={new Date()}
+        label="Disabled"
+        disabled
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaDateTimePicker
+        value={new Date()}
+        label="Read Only"
+        readOnly
+      />
+    </div>
+  ),
+}

package/src/components/waka-deployment-lane/WakaDeploymentLane.stories.tsx

@@ -0,0 +1,292 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaDeploymentLane, useDeploymentLane } from './index'
+import type { Environment, Deployment } from './index'
+import * as React from 'react'
+
+const sampleEnvironments: Environment[] = [
+  {
+    id: 'dev',
+    name: 'Development',
+    deployments: [
+      { id: 'deploy-1', version: '2.1.0', commit: 'abc123f', status: 'running', deployedAt: new Date(Date.now() - 30 * 60 * 1000), deployedBy: 'john.doe' },
+      { id: 'deploy-2', version: '2.0.5', commit: 'def456a', status: 'stopped', deployedAt: new Date(Date.now() - 2 * 60 * 60 * 1000), deployedBy: 'jane.smith' },
+    ],
+  },
+  {
+    id: 'staging',
+    name: 'Staging',
+    deployments: [
+      { id: 'deploy-3', version: '2.0.5', commit: 'def456a', status: 'running', deployedAt: new Date(Date.now() - 4 * 60 * 60 * 1000), deployedBy: 'jane.smith' },
+    ],
+  },
+  {
+    id: 'prod',
+    name: 'Production',
+    requiresApproval: true,
+    approvers: ['admin', 'tech-lead', 'cto'],
+    deployments: [
+      { id: 'deploy-4', version: '2.0.4', commit: 'ghi789b', status: 'running', deployedAt: new Date(Date.now() - 24 * 60 * 60 * 1000), deployedBy: 'admin' },
+    ],
+  },
+]
+
+const deployingEnvironments: Environment[] = [
+  {
+    id: 'dev',
+    name: 'Development',
+    deployments: [
+      { id: 'deploy-1', version: '2.1.1', commit: 'xyz789c', status: 'deploying', deployedAt: new Date(), deployedBy: 'dev-bot' },
+      { id: 'deploy-2', version: '2.1.0', commit: 'abc123f', status: 'running', deployedAt: new Date(Date.now() - 30 * 60 * 1000), deployedBy: 'john.doe' },
+    ],
+  },
+  {
+    id: 'staging',
+    name: 'Staging',
+    deployments: [
+      { id: 'deploy-3', version: '2.1.0', commit: 'abc123f', status: 'running', deployedAt: new Date(Date.now() - 60 * 60 * 1000) },
+    ],
+  },
+  {
+    id: 'prod',
+    name: 'Production',
+    requiresApproval: true,
+    deployments: [
+      { id: 'deploy-4', version: '2.0.5', commit: 'def456a', status: 'running', deployedAt: new Date(Date.now() - 12 * 60 * 60 * 1000) },
+    ],
+  },
+]
+
+const failedEnvironments: Environment[] = [
+  {
+    id: 'dev',
+    name: 'Development',
+    deployments: [
+      { id: 'deploy-1', version: '2.1.1', commit: 'xyz789c', status: 'failed', deployedAt: new Date(Date.now() - 15 * 60 * 1000), deployedBy: 'dev-bot' },
+      { id: 'deploy-2', version: '2.1.0', commit: 'abc123f', status: 'running', deployedAt: new Date(Date.now() - 60 * 60 * 1000) },
+    ],
+  },
+  {
+    id: 'staging',
+    name: 'Staging',
+    deployments: [
+      { id: 'deploy-3', version: '2.1.0', commit: 'abc123f', status: 'running', deployedAt: new Date(Date.now() - 2 * 60 * 60 * 1000) },
+    ],
+  },
+  {
+    id: 'prod',
+    name: 'Production',
+    requiresApproval: true,
+    deployments: [],
+  },
+]
+
+const meta: Meta<typeof WakaDeploymentLane> = {
+  title: 'Components/DevOps/WakaDeploymentLane',
+  component: WakaDeploymentLane,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A deployment lane visualization with environment stages, version tracking, promotion workflow, approval gates, and drag-and-drop support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+      description: 'Enable drag and drop between environments',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaDeploymentLane>
+
+export const Default: Story = {
+  args: {
+    environments: sampleEnvironments,
+  },
+  render: (args) => (
+    <WakaDeploymentLane
+      {...args}
+      onPromote={(deploymentId, fromEnv, toEnv) => console.log('Promote:', deploymentId, fromEnv, '->', toEnv)}
+      onRollback={(deploymentId, envId) => console.log('Rollback:', deploymentId, 'in', envId)}
+    />
+  ),
+}
+
+export const Deploying: Story = {
+  render: () => (
+    <WakaDeploymentLane
+      environments={deployingEnvironments}
+      onPromote={(deploymentId, fromEnv, toEnv) => console.log('Promote:', deploymentId, fromEnv, '->', toEnv)}
+    />
+  ),
+}
+
+export const WithFailure: Story = {
+  render: () => (
+    <WakaDeploymentLane
+      environments={failedEnvironments}
+      onPromote={(deploymentId, fromEnv, toEnv) => console.log('Promote:', deploymentId, fromEnv, '->', toEnv)}
+      onRollback={(deploymentId, envId) => console.log('Rollback:', deploymentId, 'in', envId)}
+    />
+  ),
+}
+
+export const NoDragDrop: Story = {
+  render: () => (
+    <WakaDeploymentLane
+      environments={sampleEnvironments}
+      draggable={false}
+      onPromote={(deploymentId, fromEnv, toEnv) => console.log('Promote:', deploymentId, fromEnv, '->', toEnv)}
+    />
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      environments,
+      promoteDeployment,
+      rollbackDeployment,
+      addDeployment,
+      updateDeploymentStatus,
+    } = useDeploymentLane(sampleEnvironments)
+
+    const handlePromote = (deploymentId: string, fromEnv: string, toEnv: string) => {
+      promoteDeployment(deploymentId, fromEnv, toEnv)
+      // Simulate deployment completion
+      setTimeout(() => {
+        const newDeploymentId = `${deploymentId}-${toEnv}`
+        updateDeploymentStatus(newDeploymentId, toEnv, 'running')
+      }, 2000)
+    }
+
+    const handleDeploy = () => {
+      const version = `2.${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}`
+      addDeployment('dev', {
+        version,
+        commit: Math.random().toString(36).substring(2, 9),
+        status: 'deploying',
+        deployedAt: new Date(),
+        deployedBy: 'demo-user',
+      })
+    }
+
+    return (
+      <div className="space-y-4">
+        <WakaDeploymentLane
+          environments={environments}
+          onPromote={handlePromote}
+          onRollback={rollbackDeployment}
+        />
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleDeploy}
+            className="px-4 py-2 text-sm rounded bg-primary text-primary-foreground"
+          >
+            Deploy New Version
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const ManyEnvironments: Story = {
+  render: () => {
+    const manyEnvs: Environment[] = [
+      {
+        id: 'dev',
+        name: 'Development',
+        deployments: [{ id: '1', version: '3.0.0', status: 'running', deployedAt: new Date() }],
+      },
+      {
+        id: 'test',
+        name: 'Testing',
+        deployments: [{ id: '2', version: '2.9.5', status: 'running', deployedAt: new Date(Date.now() - 60 * 60 * 1000) }],
+      },
+      {
+        id: 'qa',
+        name: 'QA',
+        requiresApproval: true,
+        approvers: ['qa-lead'],
+        deployments: [{ id: '3', version: '2.9.4', status: 'running', deployedAt: new Date(Date.now() - 4 * 60 * 60 * 1000) }],
+      },
+      {
+        id: 'staging',
+        name: 'Staging',
+        deployments: [{ id: '4', version: '2.9.3', status: 'running', deployedAt: new Date(Date.now() - 12 * 60 * 60 * 1000) }],
+      },
+      {
+        id: 'prod',
+        name: 'Production',
+        requiresApproval: true,
+        approvers: ['cto', 'tech-lead', 'devops'],
+        deployments: [{ id: '5', version: '2.9.2', status: 'running', deployedAt: new Date(Date.now() - 24 * 60 * 60 * 1000) }],
+      },
+    ]
+
+    return (
+      <div className="overflow-x-auto pb-4">
+        <WakaDeploymentLane environments={manyEnvs} />
+      </div>
+    )
+  },
+}
+
+export const EmptyEnvironments: Story = {
+  render: () => {
+    const emptyEnvs: Environment[] = [
+      { id: 'dev', name: 'Development', deployments: [] },
+      { id: 'staging', name: 'Staging', deployments: [] },
+      { id: 'prod', name: 'Production', requiresApproval: true, deployments: [] },
+    ]
+
+    return <WakaDeploymentLane environments={emptyEnvs} />
+  },
+}
+
+export const SingleEnvironment: Story = {
+  render: () => {
+    const singleEnv: Environment[] = [
+      {
+        id: 'prod',
+        name: 'Production',
+        deployments: [
+          { id: '1', version: '2.5.0', commit: 'abc123f', status: 'running', deployedAt: new Date(), deployedBy: 'admin' },
+          { id: '2', version: '2.4.5', commit: 'def456a', status: 'stopped', deployedAt: new Date(Date.now() - 24 * 60 * 60 * 1000) },
+          { id: '3', version: '2.4.4', commit: 'ghi789b', status: 'stopped', deployedAt: new Date(Date.now() - 48 * 60 * 60 * 1000) },
+        ],
+      },
+    ]
+
+    return <WakaDeploymentLane environments={singleEnv} />
+  },
+}
+
+export const CICDDashboard: Story = {
+  render: () => (
+    <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">Deployment Pipeline</h2>
+          <p className="text-sm text-muted-foreground">my-app / main branch</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500" />
+          <span className="text-sm text-muted-foreground">All systems operational</span>
+        </div>
+      </div>
+
+      <WakaDeploymentLane
+        environments={sampleEnvironments}
+        onPromote={(deploymentId, fromEnv, toEnv) => console.log('Promote:', deploymentId, fromEnv, '->', toEnv)}
+        onRollback={(deploymentId, envId) => console.log('Rollback:', deploymentId, 'in', envId)}
+      />
+    </div>
+  ),
+}