@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-autocomplete/WakaAutocomplete.stories.tsx

@@ -1,31 +1,50 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaAutocomplete, type AutocompleteOption } from './index'
-import * as React from 'react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAutocomplete, type AutocompleteOption } from "./index"
+import { useState } from "react"
 
 const meta: Meta<typeof WakaAutocomplete> = {
-  title: 'Components/Forms/WakaAutocomplete',
+  title: "Forms/WakaAutocomplete",
   component: WakaAutocomplete,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'An autocomplete component with async search, multi-select, and creatable options.',
-      },
-    },
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
+    placeholder: {
+      control: "text",
+      description: "Texte placeholder",
+    },
     multiple: {
-      control: 'boolean',
-      description: 'Enable multi-select mode',
+      control: "boolean",
+      description: "Mode sélection multiple",
     },
     creatable: {
-      control: 'boolean',
-      description: 'Allow creating new options',
+      control: "boolean",
+      description: "Permet de créer de nouvelles options",
+    },
+    loading: {
+      control: "boolean",
+      description: "État de chargement",
     },
     disabled: {
-      control: 'boolean',
-      description: 'Disable the component',
+      control: "boolean",
+      description: "État désactivé",
+    },
+    error: {
+      control: "text",
+      description: "Message d'erreur",
+    },
+    label: {
+      control: "text",
+      description: "Label du champ",
+    },
+    description: {
+      control: "text",
+      description: "Description du champ",
+    },
+    emptyMessage: {
+      control: "text",
+      description: "Message quand aucun résultat",
     },
   },
 }
@@ -33,192 +52,133 @@ const meta: Meta<typeof WakaAutocomplete> = {
 export default meta
 type Story = StoryObj<typeof WakaAutocomplete>
 
-const fruits: AutocompleteOption[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-  { value: 'fig', label: 'Fig' },
-  { value: 'grape', label: 'Grape' },
-  { value: 'honeydew', label: 'Honeydew' },
+const options: AutocompleteOption[] = [
+  { value: "react", label: "React" },
+  { value: "vue", label: "Vue.js" },
+  { value: "angular", label: "Angular" },
+  { value: "svelte", label: "Svelte" },
+  { value: "nextjs", label: "Next.js" },
+  { value: "nuxt", label: "Nuxt" },
+  { value: "remix", label: "Remix" },
+  { value: "astro", label: "Astro" },
 ]
 
 const groupedOptions: AutocompleteOption[] = [
-  { value: 'apple', label: 'Apple', group: 'Fruits' },
-  { value: 'banana', label: 'Banana', group: 'Fruits' },
-  { value: 'cherry', label: 'Cherry', group: 'Fruits' },
-  { value: 'carrot', label: 'Carrot', group: 'Vegetables' },
-  { value: 'broccoli', label: 'Broccoli', group: 'Vegetables' },
-  { value: 'spinach', label: 'Spinach', group: 'Vegetables' },
+  { value: "react", label: "React", group: "Frameworks" },
+  { value: "vue", label: "Vue.js", group: "Frameworks" },
+  { value: "angular", label: "Angular", group: "Frameworks" },
+  { value: "typescript", label: "TypeScript", group: "Languages" },
+  { value: "javascript", label: "JavaScript", group: "Languages" },
+  { value: "python", label: "Python", group: "Languages" },
 ]
 
 export const Default: Story = {
-  render: function AutocompleteDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>(null)
+  args: {
+    options,
+    placeholder: "Sélectionner un framework...",
+    label: "Framework",
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
+    </div>
+  ),
+}
 
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={fruits}
-          value={value as string | undefined}
-          onChange={setValue}
-          placeholder="Select a fruit..."
-          label="Favorite Fruit"
-        />
-      </div>
-    )
+export const WithDescription: Story = {
+  args: {
+    options,
+    placeholder: "Sélectionner...",
+    label: "Framework préféré",
+    description: "Choisissez votre framework frontend préféré",
   },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
+    </div>
+  ),
 }
 
 export const Multiple: Story = {
-  render: function MultipleDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>([])
-
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={fruits}
-          value={value as string[]}
-          onChange={setValue}
-          multiple
-          placeholder="Select fruits..."
-          label="Favorite Fruits"
-          description="You can select multiple options"
-        />
-      </div>
-    )
+  args: {
+    options,
+    placeholder: "Sélectionner plusieurs...",
+    label: "Frameworks",
+    multiple: true,
   },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
+    </div>
+  ),
 }
 
 export const Creatable: Story = {
-  render: function CreatableDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>(null)
-
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={fruits}
-          value={value as string | undefined}
-          onChange={setValue}
-          creatable
-          placeholder="Select or create..."
-          label="Fruit"
-          description="Type to create a new option"
-        />
-      </div>
-    )
+  args: {
+    options,
+    placeholder: "Sélectionner ou créer...",
+    label: "Framework",
+    creatable: true,
   },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
+    </div>
+  ),
 }
 
 export const WithGroups: Story = {
-  render: function GroupedDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>(null)
-
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={groupedOptions}
-          value={value as string | undefined}
-          onChange={setValue}
-          placeholder="Select an item..."
-          label="Food"
-        />
-      </div>
-    )
-  },
-}
-
-export const AsyncSearch: Story = {
-  render: function AsyncDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>(null)
-
-    const searchFn = async (query: string): Promise<AutocompleteOption[]> => {
-      await new Promise((resolve) => setTimeout(resolve, 500))
-      return fruits.filter((f) =>
-        f.label.toLowerCase().includes(query.toLowerCase())
-      )
-    }
-
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={[]}
-          value={value as string | undefined}
-          onChange={setValue}
-          onSearch={searchFn}
-          placeholder="Search fruits..."
-          label="Async Search"
-          description="Type to search"
-        />
-      </div>
-    )
+  args: {
+    options: groupedOptions,
+    placeholder: "Sélectionner...",
+    label: "Technologie",
   },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
+    </div>
+  ),
 }
 
-export const WithMaxSelections: Story = {
-  render: function MaxSelectionsDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>([])
-
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={fruits}
-          value={value as string[]}
-          onChange={setValue}
-          multiple
-          maxSelections={3}
-          placeholder="Select up to 3 fruits..."
-          label="Limited Selection"
-          description="Maximum 3 selections allowed"
-        />
-      </div>
-    )
+export const Loading: Story = {
+  args: {
+    options: [],
+    placeholder: "Chargement...",
+    label: "Framework",
+    loading: true,
   },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
+    </div>
+  ),
 }
 
 export const WithError: Story = {
-  render: function ErrorDemo() {
-    const [value, setValue] = React.useState<string | string[] | null>(null)
-
-    return (
-      <div className="w-[300px]">
-        <WakaAutocomplete
-          options={fruits}
-          value={value as string | undefined}
-          onChange={setValue}
-          placeholder="Select a fruit..."
-          label="Required Field"
-          error="This field is required"
-        />
-      </div>
-    )
+  args: {
+    options,
+    placeholder: "Sélectionner...",
+    label: "Framework",
+    error: "Ce champ est obligatoire",
   },
-}
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <WakaAutocomplete
-        options={fruits}
-        value="apple"
-        disabled
-        placeholder="Select a fruit..."
-        label="Disabled"
-      />
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
     </div>
   ),
 }
 
-export const Loading: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <WakaAutocomplete
-        options={fruits}
-        loading
-        placeholder="Loading..."
-        label="Loading State"
-      />
+export const Disabled: Story = {
+  args: {
+    options,
+    placeholder: "Désactivé",
+    label: "Framework",
+    disabled: true,
+    value: "react",
+  },
+  render: (args) => (
+    <div style={{ width: 300 }}>
+      <WakaAutocomplete {...args} />
     </div>
   ),
 }

package/src/components/waka-biometric-prompt/WakaBiometricPrompt.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaBiometricPrompt } from "./index"
+
+const meta: Meta<typeof WakaBiometricPrompt> = {
+  title: "Security/WakaBiometricPrompt",
+  component: WakaBiometricPrompt,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    type: { control: "select", options: ["fingerprint", "face", "iris", "voice"], description: "Type biométrique" },
+    state: { control: "select", options: ["idle", "scanning", "success", "error"], description: "État" },
+    showFallback: { control: "boolean", description: "Afficher option de secours" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBiometricPrompt>
+
+export const Default: Story = {
+  args: { type: "fingerprint", state: "idle", title: "Authentification biométrique", subtitle: "Placez votre doigt sur le capteur" },
+  render: (args) => <WakaBiometricPrompt {...args} />,
+}
+
+export const FaceID: Story = {
+  args: { type: "face", state: "idle", title: "Face ID", subtitle: "Regardez vers la caméra" },
+  render: (args) => <WakaBiometricPrompt {...args} />,
+}
+
+export const Scanning: Story = {
+  args: { type: "fingerprint", state: "scanning", title: "Scan en cours...", subtitle: "Ne bougez pas" },
+  render: (args) => <WakaBiometricPrompt {...args} />,
+}
+
+export const Success: Story = {
+  args: { type: "fingerprint", state: "success", title: "Authentifié !", subtitle: "Accès autorisé" },
+  render: (args) => <WakaBiometricPrompt {...args} />,
+}
+
+export const Error: Story = {
+  args: { type: "fingerprint", state: "error", title: "Échec", subtitle: "Empreinte non reconnue", showFallback: true },
+  render: (args) => <WakaBiometricPrompt {...args} />,
+}
+
+export const WithFallback: Story = {
+  args: { type: "face", state: "idle", title: "Face ID", showFallback: true, fallbackLabel: "Utiliser le code PIN" },
+  render: (args) => <WakaBiometricPrompt {...args} />,
+}
+