@wakastellar/ui 3.5.2 → 4.0.0

package/src/blocks/error-pages/ErrorPages.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<typeof WakaErrorPage> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     type: {
       control: 'select',
@@ -65,41 +64,35 @@ export default meta
 type Story = StoryObj<typeof WakaErrorPage>
 
 export const Default404: Story = {
-  render: () => (
-    <Error404Page
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    LinkComponent: MockLink,
+  },
+  render: (args) => <Error404Page {...args} />,
 }
 
 export const Error500: Story = {
-  render: () => (
-    <Error500Page
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    LinkComponent: MockLink,
+  },
+  render: (args) => <Error500Page {...args} />,
 }
 
 export const Error403: Story = {
-  render: () => (
-    <Error403Page
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    LinkComponent: MockLink,
+  },
+  render: (args) => <Error403Page {...args} />,
 }
 
 export const Maintenance: Story = {
-  render: () => (
-    <MaintenancePage
-      description="Nous effectuons une maintenance planifiée. Nous serons de retour dans environ 2 heures."
-    />
-  ),
+  args: {
+    description: "Nous effectuons une maintenance planifiée. Nous serons de retour dans environ 2 heures.",
+  },
+  render: (args) => <MaintenancePage {...args} />,
 }
 
 export const Offline: Story = {
-  render: () => (
-    <OfflinePage />
-  ),
+  render: (args) => <OfflinePage {...args} />,
 }
 
 export const AllErrorTypes: Story = {
@@ -125,24 +118,22 @@ export const AllErrorTypes: Story = {
 }
 
 export const SplitLayout: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="404"
-      layout="split"
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    type: "404",
+    layout: "split",
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const SplitLayout500: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="500"
-      layout="split"
-      showRefreshButton
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    type: "500",
+    layout: "split",
+    showRefreshButton: true,
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const SmallSize: Story = {
@@ -158,40 +149,36 @@ export const SmallSize: Story = {
 }
 
 export const LargeSize: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="404"
-      size="lg"
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    type: "404",
+    size: "lg",
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const NoCode: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="404"
-      showCode={false}
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    type: "404",
+    showCode: false,
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const NoIllustration: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="404"
-      showIllustration={false}
-      LinkComponent={MockLink}
-    />
-  ),
+  args: {
+    type: "404",
+    showIllustration: false,
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const CustomActions: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="404"
-      actions={[
+  args: {
+    type: "404",
+    actions: [
         {
           label: 'Rechercher',
           icon: <Search className="h-4 w-4" />,
@@ -210,10 +197,10 @@ export const CustomActions: Story = {
           variant: 'ghost',
           href: '/contact',
         },
-      ]}
-      LinkComponent={MockLink}
-    />
-  ),
+      ],
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const CustomContent: Story = {
@@ -237,17 +224,14 @@ export const CustomContent: Story = {
 }
 
 export const CustomIllustration: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="404"
-      illustration={
-        <div className="w-48 h-48 flex items-center justify-center text-8xl">
+  args: {
+    type: "404",
+    illustration: <div className="w-48 h-48 flex items-center justify-center text-8xl">
           🤷‍♂️
-        </div>
-      }
-      LinkComponent={MockLink}
-    />
-  ),
+        </div>,
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const WithSearchForm: Story = {
@@ -363,39 +347,37 @@ export const EmbeddedInPage: Story = {
 }
 
 export const CustomErrorCode: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="custom"
-      code="418"
-      title="I'm a teapot"
-      description="The server refuses to brew coffee because it is, permanently, a teapot."
-      actions={[
+  args: {
+    type: "custom",
+    code: "418",
+    title: "I'm a teapot",
+    description: "The server refuses to brew coffee because it is, permanently, a teapot.",
+    actions: [
         {
           label: 'Make Tea Instead',
           variant: 'default',
           onClick: () => alert('☕ Here is your tea!'),
         },
-      ]}
-    />
-  ),
+      ],
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }
 
 export const ServiceUnavailable: Story = {
-  render: () => (
-    <WakaErrorPage
-      type="503"
-      title="Service Temporarily Unavailable"
-      description="Our servers are currently experiencing high traffic. Please try again in a few minutes."
-      showRefreshButton
-      showBackButton={false}
-      actions={[
+  args: {
+    type: "503",
+    title: "Service Temporarily Unavailable",
+    description: "Our servers are currently experiencing high traffic. Please try again in a few minutes.",
+    showRefreshButton: true,
+    showBackButton: false,
+    actions: [
         {
           label: 'Check Status',
           variant: 'outline',
           href: '/status',
         },
-      ]}
-      LinkComponent={MockLink}
-    />
-  ),
+      ],
+    LinkComponent: MockLink,
+  },
+  render: (args) => <WakaErrorPage {...args} />,
 }

package/src/blocks/faq/FAQ.mdx

@@ -0,0 +1,113 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './FAQ.stories'
+
+<Meta of={Stories} />
+
+# FAQ
+
+FAQ accordion block with anchor links, search, and category grouping.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { FAQ } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add faq`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Categories
+
+<Canvas of={Stories.WithCategories} />
+
+### Cards Layout
+
+<Canvas of={Stories.CardsLayout} />
+
+### Grouped Layout
+
+<Canvas of={Stories.GroupedLayout} />
+
+### With Feedback
+
+<Canvas of={Stories.WithFeedback} />
+
+### Allow Multiple
+
+<Canvas of={Stories.AllowMultiple} />
+
+### No Search
+
+<Canvas of={Stories.NoSearch} />
+
+### Small Size
+
+<Canvas of={Stories.SmallSize} />
+
+### Large Size
+
+<Canvas of={Stories.LargeSize} />
+
+### Custom Categories
+
+<Canvas of={Stories.CustomCategories} />
+
+### With Rich Answer
+
+<Canvas of={Stories.WithRichAnswer} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Empty
+
+<Canvas of={Stories.Empty} />
+
+### Many Items
+
+<Canvas of={Stories.ManyItems} />
+
+### In Page Context
+
+<Canvas of={Stories.InPageContext} />
+
+### Support Page
+
+<Canvas of={Stories.SupportPage} />
+
+
+## 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/faq.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/faq/FAQ.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<typeof WakaFAQ> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     layout: {
       control: 'select',
@@ -414,3 +413,19 @@ export const SupportPage: 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: "default",
+    size: "sm",
+    showSearch: false,
+    showCategoryFilter: false,
+    showFeedback: false,
+    allowMultiple: false,
+  },
+  render: (args) => <WakaFAQ {...args} />,
+}

package/src/blocks/file-manager/FileManager.mdx

@@ -0,0 +1,105 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './FileManager.stories'
+
+<Meta of={Stories} />
+
+# FileManager
+
+Tree + grid file browser block with upload, rename, move, and preview actions.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { FileManager } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add file-manager`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Grid View
+
+<Canvas of={Stories.GridView} />
+
+### List View
+
+<Canvas of={Stories.ListView} />
+
+### With Selection
+
+<Canvas of={Stories.WithSelection} />
+
+### Many Files
+
+<Canvas of={Stories.ManyFiles} />
+
+### Mixed File Types
+
+<Canvas of={Stories.MixedFileTypes} />
+
+### With Starred Files
+
+<Canvas of={Stories.WithStarredFiles} />
+
+### With Shared Files
+
+<Canvas of={Stories.WithSharedFiles} />
+
+### Deep Navigation
+
+<Canvas of={Stories.DeepNavigation} />
+
+### Empty Folder
+
+<Canvas of={Stories.EmptyFolder} />
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+### No Header
+
+<Canvas of={Stories.NoHeader} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Cloud Storage
+
+<Canvas of={Stories.CloudStorage} />
+
+
+## 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/file-manager.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/file-manager/FileManager.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof WakaFileManager> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     viewMode: {
       control: 'select',
@@ -411,3 +410,18 @@ export const CloudStorage: 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: {
+    viewMode: "grid",
+    showSearch: false,
+    showHeader: false,
+    showActions: false,
+    loading: false,
+  },
+  render: (args) => <WakaFileManager {...args} />,
+}

package/src/blocks/file-scan-uploader/FileScanUploader.stories.tsx

@@ -255,3 +255,11 @@ export const CustomMaxSize: Story = {
     acceptedTypes: [".pdf", ".docx", ".xlsx", ".jpg", ".png"],
   },
 }
+
+/**
+ * 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) => <FileScanUploader {...args} />,
+}

package/src/blocks/file-scan-uploader/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 { useState, useCallback, useRef } from "react"

package/src/blocks/footer/Footer.mdx

@@ -0,0 +1,101 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Footer.stories'
+
+<Meta of={Stories} />
+
+# Footer
+
+Application footer with link columns, language switcher, social icons, and copyright row.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Footer } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add footer`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With All Sections
+
+<Canvas of={Stories.WithAllSections} />
+
+### Two Columns
+
+<Canvas of={Stories.TwoColumns} />
+
+### No Social Links
+
+<Canvas of={Stories.NoSocialLinks} />
+
+### Only Social Links
+
+<Canvas of={Stories.OnlySocialLinks} />
+
+### Minimal Footer
+
+<Canvas of={Stories.MinimalFooter} />
+
+### Many Columns
+
+<Canvas of={Stories.ManyColumns} />
+
+### Long Links
+
+<Canvas of={Stories.LongLinks} />
+
+### In Page Context
+
+<Canvas of={Stories.InPageContext} />
+
+### Dark Variant
+
+<Canvas of={Stories.DarkVariant} />
+
+### Custom Copyright
+
+<Canvas of={Stories.CustomCopyright} />
+
+### Ecommerce Footer
+
+<Canvas of={Stories.EcommerceFooter} />
+
+### Saa S Footer
+
+<Canvas of={Stories.SaaSFooter} />
+
+
+## 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/footer.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)