@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/blocks/login/Login.mdx

@@ -0,0 +1,105 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Login.stories'
+
+<Meta of={Stories} />
+
+# Login
+
+Login surface with email/password, OAuth providers, and forgot-password link.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Login } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add login`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Social Login
+
+<Canvas of={Stories.WithSocialLogin} />
+
+### With Config
+
+<Canvas of={Stories.WithConfig} />
+
+### All SSO Providers
+
+<Canvas of={Stories.AllSSOProviders} />
+
+### SSO Only
+
+<Canvas of={Stories.SSOOnly} />
+
+### With Custom Logo
+
+<Canvas of={Stories.WithCustomLogo} />
+
+### With Custom Colors
+
+<Canvas of={Stories.WithCustomColors} />
+
+### Dark Mode
+
+<Canvas of={Stories.DarkMode} />
+
+### No Sign Up
+
+<Canvas of={Stories.NoSignUp} />
+
+### No Forgot Password
+
+<Canvas of={Stories.NoForgotPassword} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### With Waka Powered
+
+<Canvas of={Stories.WithWakaPowered} />
+
+### France Connect
+
+<Canvas of={Stories.FranceConnect} />
+
+### Split Layout
+
+<Canvas of={Stories.SplitLayout} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/blocks/login.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/login/Login.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof Login> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     showSocialLogin: {
       control: 'boolean',
@@ -441,3 +440,14 @@ export const SplitLayout: Story = {
     </div>
   ),
 }
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  args: {
+    showSocialLogin: false,
+  },
+  render: (args) => <Login {...args} />,
+}

package/src/blocks/login/index.tsx

@@ -7,7 +7,7 @@ import { Input } from "../../components/input"
 import { Label } from "../../components/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
 import { Separator } from "../../components/separator"
-import { Github, Mail, Apple, Linkedin, Facebook, Instagram } from "lucide-react"
+import { Globe, Mail, Apple, ExternalLink, Users, Camera } from "lucide-react"
 import { useTheme } from "../../context/theme-provider"
 import type { LoginConfig } from "./types"
 
@@ -38,9 +38,9 @@ export interface LoginProps {
   onSSOMicrosoft?: () => void
   onSSOApple?: () => void
   onSSOLinkedIn?: () => void
-  onSSOGithub?: () => void
-  onSSOFacebook?: () => void
-  onSSOInstagram?: () => void
+  onSSOGlobe?: () => void
+  onSSOUsers?: () => void
+  onSSOCamera?: () => void
   onSSOFranceConnect?: () => void
   /** Afficher la connexion sociale (déprécié, utilise config.signup_options) */
   showSocialLogin?: boolean
@@ -63,9 +63,9 @@ export function Login({
   onSSOMicrosoft,
   onSSOApple,
   onSSOLinkedIn,
-  onSSOGithub,
-  onSSOFacebook,
-  onSSOInstagram,
+  onSSOGlobe,
+  onSSOUsers,
+  onSSOCamera,
   onSSOFranceConnect,
   showSocialLogin = false,
   className,
@@ -113,8 +113,8 @@ export function Login({
     // Mode legacy (sans config)
     if (!config?.signup_options) {
       if (showSocialLogin) {
-        if (onSSOGithub) {
-          ssoList.push({ id: "github", label: "GitHub", icon: <Github className="h-4 w-4" />, onClick: onSSOGithub })
+        if (onSSOGlobe) {
+          ssoList.push({ id: "github", label: "GitHub", icon: <Globe className="h-4 w-4" />, onClick: onSSOGlobe })
         }
         if (onSSOGoogle) {
           ssoList.push({ id: "google", label: "Google", icon: <Mail className="h-4 w-4" />, onClick: onSSOGoogle })
@@ -137,23 +137,23 @@ export function Login({
       ssoList.push({ id: "apple", label: "Apple", icon: <Apple className="h-4 w-4" />, onClick: onSSOApple })
     }
     if (options.allow_sso_linkedIn) {
-      ssoList.push({ id: "linkedin", label: "LinkedIn", icon: <Linkedin className="h-4 w-4" />, onClick: onSSOLinkedIn })
+      ssoList.push({ id: "linkedin", label: "LinkedIn", icon: <ExternalLink className="h-4 w-4" />, onClick: onSSOLinkedIn })
     }
     if (options.allow_sso_github) {
-      ssoList.push({ id: "github", label: "GitHub", icon: <Github className="h-4 w-4" />, onClick: onSSOGithub })
+      ssoList.push({ id: "github", label: "GitHub", icon: <Globe className="h-4 w-4" />, onClick: onSSOGlobe })
     }
     if (options.allow_sso_facebook) {
-      ssoList.push({ id: "facebook", label: "Facebook", icon: <Facebook className="h-4 w-4" />, onClick: onSSOFacebook })
+      ssoList.push({ id: "facebook", label: "Users", icon: <Users className="h-4 w-4" />, onClick: onSSOUsers })
     }
     if (options.allow_sso_instagram) {
-      ssoList.push({ id: "instagram", label: "Instagram", icon: <Instagram className="h-4 w-4" />, onClick: onSSOInstagram })
+      ssoList.push({ id: "instagram", label: "Camera", icon: <Camera className="h-4 w-4" />, onClick: onSSOCamera })
     }
     if (options.allow_sso_france_connect) {
       ssoList.push({ id: "france-connect", label: "France Connect", icon: <Mail className="h-4 w-4" />, onClick: onSSOFranceConnect })
     }
     
     return ssoList
-  }, [config?.signup_options, showSocialLogin, onSSOGoogle, onSSOMicrosoft, onSSOApple, onSSOLinkedIn, onSSOGithub, onSSOFacebook, onSSOInstagram, onSSOFranceConnect])
+  }, [config?.signup_options, showSocialLogin, onSSOGoogle, onSSOMicrosoft, onSSOApple, onSSOLinkedIn, onSSOGlobe, onSSOUsers, onSSOCamera, onSSOFranceConnect])
 
   // Vérifie si la connexion classique est autorisée
   // Si config n'est pas fourni, on autorise le login par défaut

package/src/blocks/on-call-schedule/OnCallSchedule.stories.tsx

@@ -379,3 +379,11 @@ export const IncidentDashboard: Story = {
     )
   },
 }
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <OnCallScheduleBlock {...args} />,
+}

package/src/blocks/on-call-schedule/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/blocks/player-profile/PlayerProfile.stories.tsx

@@ -314,3 +314,11 @@ export const GameProfile: Story = {
     </div>
   ),
 }
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <PlayerProfile {...args} />,
+}

package/src/blocks/player-profile/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-engagement` (workspace package
+ * `packages/ui-blocks-engagement`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-engagement'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-engagement` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/blocks/pricing/WakaPricing.mdx

@@ -0,0 +1,101 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaPricing.stories'
+
+<Meta of={Stories} />
+
+# WakaPricing
+
+Pricing comparison block with tiers, feature matrix, and CTA buttons.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaPricing } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add pricing`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Without Billing Toggle
+
+<Canvas of={Stories.WithoutBillingToggle} />
+
+### Two Plans
+
+<Canvas of={Stories.TwoPlans} />
+
+### Four Plans
+
+<Canvas of={Stories.FourPlans} />
+
+### Table Layout
+
+<Canvas of={Stories.TableLayout} />
+
+### With FAQ
+
+<Canvas of={Stories.WithFAQ} />
+
+### Controlled Billing Period
+
+<Canvas of={Stories.ControlledBillingPeriod} />
+
+### With Tooltips
+
+<Canvas of={Stories.WithTooltips} />
+
+### Custom Currency
+
+<Canvas of={Stories.CustomCurrency} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Partial Features
+
+<Canvas of={Stories.PartialFeatures} />
+
+### Disabled Plans
+
+<Canvas of={Stories.DisabledPlans} />
+
+### Complete Pricing Page
+
+<Canvas of={Stories.CompletePricingPage} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/blocks/pricing.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/pricing/WakaPricing.stories.tsx

@@ -21,7 +21,6 @@ const meta: Meta<typeof WakaPricing> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     layout: {
       control: 'select',
@@ -44,28 +43,26 @@ export default meta
 type Story = StoryObj<typeof WakaPricing>
 
 export const Default: Story = {
-  render: () => (
-    <WakaPricing
-      title="Choose your plan"
-      description="Start free and scale as you grow. No hidden fees."
-      plans={defaultPricingPlans}
-      yearlyDiscount="20%"
-      faq={defaultPricingFAQ}
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    title: "Choose your plan",
+    description: "Start free and scale as you grow. No hidden fees.",
+    plans: defaultPricingPlans,
+    yearlyDiscount: "20%",
+    faq: defaultPricingFAQ,
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaPricing {...args} />,
 }
 
 export const WithoutBillingToggle: Story = {
-  render: () => (
-    <WakaPricing
-      title="Simple Pricing"
-      description="One price, all features included."
-      plans={defaultPricingPlans}
-      showBillingToggle={false}
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    title: "Simple Pricing",
+    description: "One price, all features included.",
+    plans: defaultPricingPlans,
+    showBillingToggle: false,
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaPricing {...args} />,
 }
 
 export const TwoPlans: Story = {
@@ -183,17 +180,16 @@ export const FourPlans: Story = {
 }
 
 export const TableLayout: Story = {
-  render: () => (
-    <WakaPricing
-      title="Compare Plans"
-      description="See all features side by side"
-      plans={defaultPricingPlans}
-      layout="table"
-      showComparison
-      yearlyDiscount="20%"
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    title: "Compare Plans",
+    description: "See all features side by side",
+    plans: defaultPricingPlans,
+    layout: "table",
+    showComparison: true,
+    yearlyDiscount: "20%",
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaPricing {...args} />,
 }
 
 export const WithFAQ: Story = {

package/src/blocks/profile/Profile.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<typeof WakaProfile> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     layout: {
       control: 'select',
@@ -369,3 +368,18 @@ export const CompactInList: Story = {
     )
   },
 }
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  args: {
+    layout: "card",
+    editable: false,
+    showSocialLinks: false,
+    showStats: false,
+    useTabs: false,
+  },
+  render: (args) => <WakaProfile {...args} />,
+}

package/src/blocks/profile/WakaProfile.mdx

@@ -0,0 +1,109 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Profile.stories'
+
+<Meta of={Stories} />
+
+# WakaProfile
+
+User profile surface with avatar, identity, contact info, and edit-mode toggle.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaProfile } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add profile`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Editable
+
+<Canvas of={Stories.Editable} />
+
+### With Stats
+
+<Canvas of={Stories.WithStats} />
+
+### Page Layout
+
+<Canvas of={Stories.PageLayout} />
+
+### Page Layout With Tabs
+
+<Canvas of={Stories.PageLayoutWithTabs} />
+
+### Compact Layout
+
+<Canvas of={Stories.CompactLayout} />
+
+### No Social Links
+
+<Canvas of={Stories.NoSocialLinks} />
+
+### Minimal Profile
+
+<Canvas of={Stories.MinimalProfile} />
+
+### Full Profile
+
+<Canvas of={Stories.FullProfile} />
+
+### Custom Sections
+
+<Canvas of={Stories.CustomSections} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Read Only
+
+<Canvas of={Stories.ReadOnly} />
+
+### With Avatar
+
+<Canvas of={Stories.WithAvatar} />
+
+### In Page Context
+
+<Canvas of={Stories.InPageContext} />
+
+### Compact In List
+
+<Canvas of={Stories.CompactInList} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/blocks/profile.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/profile/index.tsx

@@ -33,9 +33,8 @@ import {
   X,
   Loader2,
   Link as LinkIcon,
-  Twitter,
-  Github,
-  Linkedin,
+  Share2,
+  ExternalLink,
 } from "lucide-react"
 
 // ============================================
@@ -328,11 +327,11 @@ function SocialLinks({ links, isEditing }: SocialLinksProps) {
   const getIcon = (type: ProfileSocialLink["type"]) => {
     switch (type) {
       case "twitter":
-        return <Twitter className="h-4 w-4" />
+        return <Share2 className="h-4 w-4" />
       case "github":
-        return <Github className="h-4 w-4" />
+        return <Globe className="h-4 w-4" />
       case "linkedin":
-        return <Linkedin className="h-4 w-4" />
+        return <ExternalLink className="h-4 w-4" />
       case "website":
         return <Globe className="h-4 w-4" />
       default:

package/src/blocks/quarantine-manager/QuarantineManager.stories.tsx

@@ -207,3 +207,11 @@ export const SingleFile: Story = {
     },
   },
 }
+
+/**
+ * Playground — generated to make the Storybook Controls panel functional.
+ * Exposes a default arg set wired to the component via {...args}.
+ */
+export const Playground: Story = {
+  render: (args) => <QuarantineManager {...args} />,
+}

package/src/blocks/quarantine-manager/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"