@wakastellar/ui 2.4.0 → 3.1.0

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

@@ -1,44 +1,54 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaPasswordStrength, WakaPasswordStrengthIndicator } from './index'
-import * as React from 'react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPasswordStrength } from "./index"
+import { useState } from "react"
 
 const meta: Meta<typeof WakaPasswordStrength> = {
-  title: 'Components/Forms/WakaPasswordStrength',
+  title: "Forms/WakaPasswordStrength",
   component: WakaPasswordStrength,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A password strength indicator with animated bar, checklist, and configurable requirements.',
-      },
-    },
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'default', 'lg'],
-      description: 'Size of the component',
+    password: {
+      control: "text",
+      description: "Mot de passe à évaluer",
     },
     showInput: {
-      control: 'boolean',
-      description: 'Show password input',
+      control: "boolean",
+      description: "Afficher le champ de saisie",
     },
-    showStrengthBar: {
-      control: 'boolean',
-      description: 'Show strength bar',
+    showRequirements: {
+      control: "boolean",
+      description: "Afficher les exigences",
     },
-    showChecklist: {
-      control: 'boolean',
-      description: 'Show requirements checklist',
+    showStrengthBar: {
+      control: "boolean",
+      description: "Afficher la barre de force",
     },
     showStrengthLabel: {
-      control: 'boolean',
-      description: 'Show strength label',
+      control: "boolean",
+      description: "Afficher le label de force",
+    },
+    minLength: {
+      control: "number",
+      description: "Longueur minimale requise",
     },
-    animated: {
-      control: 'boolean',
-      description: 'Enable animations',
+    requireUppercase: {
+      control: "boolean",
+      description: "Exiger une majuscule",
+    },
+    requireLowercase: {
+      control: "boolean",
+      description: "Exiger une minuscule",
+    },
+    requireNumber: {
+      control: "boolean",
+      description: "Exiger un chiffre",
+    },
+    requireSpecial: {
+      control: "boolean",
+      description: "Exiger un caractère spécial",
     },
   },
 }
@@ -47,272 +57,126 @@ 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>
-    )
+  args: {
+    showInput: true,
+    showRequirements: true,
+    showStrengthBar: true,
+    showStrengthLabel: true,
+    minLength: 8,
+    requireUppercase: true,
+    requireLowercase: true,
+    requireNumber: true,
+    requireSpecial: true,
   },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
+    </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 WeakPassword: Story = {
+  args: {
+    password: "abc",
+    showInput: false,
+    showRequirements: true,
+    showStrengthBar: true,
+    showStrengthLabel: true,
   },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
+    </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 FairPassword: Story = {
+  args: {
+    password: "Password1",
+    showInput: false,
+    showRequirements: true,
+    showStrengthBar: true,
+    showStrengthLabel: true,
   },
-}
-
-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}
-        />
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
       </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 GoodPassword: Story = {
+  args: {
+    password: "Password123!",
+    showInput: false,
+    showRequirements: true,
+    showStrengthBar: true,
+    showStrengthLabel: true,
   },
-}
-
-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"
-          />
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
         </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 StrongPassword: Story = {
+  args: {
+    password: "MyStr0ng!P@ssword2024",
+    showInput: false,
+    showRequirements: true,
+    showStrengthBar: true,
+    showStrengthLabel: true,
   },
-}
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="w-[350px]">
-      <WakaPasswordStrength
-        password="SecureP@ss123"
-        label="Password"
-        disabled
-      />
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
     </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 BarOnly: Story = {
+  args: {
+    showInput: true,
+    showRequirements: false,
+    showStrengthBar: true,
+    showStrengthLabel: true,
   },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
+    </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 RequirementsOnly: Story = {
+  args: {
+    showInput: true,
+    showRequirements: true,
+    showStrengthBar: false,
+    showStrengthLabel: false,
   },
-}
-
-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>
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
     </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>
-    )
+export const SimpleRequirements: Story = {
+  args: {
+    showInput: true,
+    showRequirements: true,
+    showStrengthBar: true,
+    minLength: 6,
+    requireUppercase: false,
+    requireLowercase: true,
+    requireNumber: true,
+    requireSpecial: false,
   },
+  render: (args) => (
+    <div style={{ width: 350 }}>
+      <WakaPasswordStrength {...args} />
+    </div>
+  ),
 }

package/src/components/waka-payment-method-picker/WakaPaymentMethodPicker.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPaymentMethodPicker } from "./index"
+import { useState } from "react"
+
+const meta: Meta<typeof WakaPaymentMethodPicker> = {
+  title: "E-commerce/WakaPaymentMethodPicker",
+  component: WakaPaymentMethodPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showAddNew: {
+      control: "boolean",
+      description: "Afficher le bouton ajouter",
+    },
+    showDelete: {
+      control: "boolean",
+      description: "Afficher le bouton supprimer",
+    },
+    disabled: {
+      control: "boolean",
+      description: "État désactivé",
+    },
+    orientation: {
+      control: "select",
+      options: ["vertical", "horizontal"],
+      description: "Orientation des cartes",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPaymentMethodPicker>
+
+const paymentMethods = [
+  {
+    id: "1",
+    type: "card" as const,
+    brand: "visa" as const,
+    last4: "4242",
+    expiryMonth: 12,
+    expiryYear: 2025,
+    isDefault: true,
+  },
+  {
+    id: "2",
+    type: "card" as const,
+    brand: "mastercard" as const,
+    last4: "8888",
+    expiryMonth: 6,
+    expiryYear: 2026,
+    isDefault: false,
+  },
+  {
+    id: "3",
+    type: "bank" as const,
+    bankName: "BNP Paribas",
+    last4: "1234",
+    isDefault: false,
+  },
+]
+
+export const Default: Story = {
+  args: {
+    methods: paymentMethods,
+    selectedId: "1",
+    showAddNew: true,
+    showDelete: true,
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaPaymentMethodPicker {...args} />
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: {
+    methods: paymentMethods,
+    selectedId: "1",
+    showAddNew: true,
+    orientation: "horizontal",
+  },
+  render: (args) => <WakaPaymentMethodPicker {...args} />,
+}
+
+export const SingleCard: Story = {
+  args: {
+    methods: [paymentMethods[0]],
+    selectedId: "1",
+    showAddNew: true,
+    showDelete: false,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaPaymentMethodPicker {...args} />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  args: {
+    methods: [],
+    showAddNew: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaPaymentMethodPicker {...args} />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    methods: paymentMethods,
+    selectedId: "1",
+    showAddNew: false,
+    showDelete: false,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaPaymentMethodPicker {...args} />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    methods: paymentMethods,
+    selectedId: "1",
+    disabled: true,
+  },
+  render: (args) => (
+    <div style={{ width: 400 }}>
+      <WakaPaymentMethodPicker {...args} />
+    </div>
+  ),
+}
+