@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/blocks/calendar-view/CalendarView.mdx

@@ -0,0 +1,101 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './CalendarView.stories'
+
+<Meta of={Stories} />
+
+# CalendarView
+
+Full month/week/day calendar surface with event rendering, drag-to-create, and timezone support.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { CalendarView } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add calendar-view`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Month View
+
+<Canvas of={Stories.MonthView} />
+
+### Agenda View
+
+<Canvas of={Stories.AgendaView} />
+
+### Many Events
+
+<Canvas of={Stories.ManyEvents} />
+
+### With Locations
+
+<Canvas of={Stories.WithLocations} />
+
+### All Day Events
+
+<Canvas of={Stories.AllDayEvents} />
+
+### Week Starts Sunday
+
+<Canvas of={Stories.WeekStartsSunday} />
+
+### No Header
+
+<Canvas of={Stories.NoHeader} />
+
+### Read Only
+
+<Canvas of={Stories.ReadOnly} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Colorful Events
+
+<Canvas of={Stories.ColorfulEvents} />
+
+### Empty Calendar
+
+<Canvas of={Stories.EmptyCalendar} />
+
+### Team Calendar
+
+<Canvas of={Stories.TeamCalendar} />
+
+
+## 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/calendar-view.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/calendar-view/CalendarView.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof WakaCalendarView> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     viewMode: {
       control: 'select',
@@ -396,3 +395,18 @@ export const TeamCalendar: 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: "month",
+    showHeader: false,
+    showViewSelector: false,
+    showAddButton: false,
+    weekStartsOn: "0",
+  },
+  render: (args) => <WakaCalendarView {...args} />,
+}

package/src/blocks/chat/Chat.mdx

@@ -0,0 +1,121 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './Chat.stories'
+
+<Meta of={Stories} />
+
+# Chat
+
+Embeddable chat block (sidebar widget or full surface) with messages, presence, and typing indicator.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { Chat } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add chat`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Full Layout
+
+<Canvas of={Stories.FullLayout} />
+
+### Embedded Layout
+
+<Canvas of={Stories.EmbeddedLayout} />
+
+### Floating Layout
+
+<Canvas of={Stories.FloatingLayout} />
+
+### Widget Layout
+
+<Canvas of={Stories.WidgetLayout} />
+
+### Widget Minimized
+
+<Canvas of={Stories.WidgetMinimized} />
+
+### No Conversation Selected
+
+<Canvas of={Stories.NoConversationSelected} />
+
+### With Unread Messages
+
+<Canvas of={Stories.WithUnreadMessages} />
+
+### Many Messages
+
+<Canvas of={Stories.ManyMessages} />
+
+### With Attachments
+
+<Canvas of={Stories.WithAttachments} />
+
+### With Reply
+
+<Canvas of={Stories.WithReply} />
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+### Sending
+
+<Canvas of={Stories.Sending} />
+
+### With Close Button
+
+<Canvas of={Stories.WithCloseButton} />
+
+### No Date Separators
+
+<Canvas of={Stories.NoDateSeparators} />
+
+### Custom Placeholder
+
+<Canvas of={Stories.CustomPlaceholder} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Support Chat
+
+<Canvas of={Stories.SupportChat} />
+
+
+## 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/chat.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/chat/Chat.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof WakaChat> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     layout: {
       control: 'select',
@@ -58,32 +57,30 @@ export default meta
 type Story = StoryObj<typeof WakaChat>
 
 export const Default: Story = {
-  render: () => (
-    <WakaChat
-      messages={defaultChatMessages}
-      conversations={defaultChatConversations}
-      activeConversation={defaultChatConversations[0]}
-      currentUser={defaultChatUser}
-      onSendMessage={(content) => console.log('Send:', content)}
-      onConversationSelect={(conv) => console.log('Select:', conv)}
-      onAudioCall={() => console.log('Audio call')}
-      onVideoCall={() => console.log('Video call')}
-    />
-  ),
+  args: {
+    messages: defaultChatMessages,
+    conversations: defaultChatConversations,
+    activeConversation: defaultChatConversations[0],
+    currentUser: defaultChatUser,
+    onSendMessage: (content) => console.log('Send:', content),
+    onConversationSelect: (conv) => console.log('Select:', conv),
+    onAudioCall: () => console.log('Audio call'),
+    onVideoCall: () => console.log('Video call'),
+  },
+  render: (args) => <WakaChat {...args} />,
 }
 
 export const FullLayout: Story = {
-  render: () => (
-    <WakaChat
-      messages={defaultChatMessages}
-      conversations={defaultChatConversations}
-      activeConversation={defaultChatConversations[0]}
-      currentUser={defaultChatUser}
-      layout="full"
-      onSendMessage={(content) => console.log('Send:', content)}
-      onConversationSelect={(conv) => console.log('Select:', conv)}
-    />
-  ),
+  args: {
+    messages: defaultChatMessages,
+    conversations: defaultChatConversations,
+    activeConversation: defaultChatConversations[0],
+    currentUser: defaultChatUser,
+    layout: "full",
+    onSendMessage: (content) => console.log('Send:', content),
+    onConversationSelect: (conv) => console.log('Select:', conv),
+  },
+  render: (args) => <WakaChat {...args} />,
 }
 
 export const EmbeddedLayout: Story = {
@@ -153,14 +150,13 @@ export const WidgetMinimized: Story = {
 }
 
 export const NoConversationSelected: Story = {
-  render: () => (
-    <WakaChat
-      messages={[]}
-      conversations={defaultChatConversations}
-      currentUser={defaultChatUser}
-      onConversationSelect={(conv) => console.log('Select:', conv)}
-    />
-  ),
+  args: {
+    messages: [],
+    conversations: defaultChatConversations,
+    currentUser: defaultChatUser,
+    onConversationSelect: (conv) => console.log('Select:', conv),
+  },
+  render: (args) => <WakaChat {...args} />,
 }
 
 export const WithUnreadMessages: Story = {
@@ -298,28 +294,26 @@ export const WithReply: Story = {
 }
 
 export const Loading: Story = {
-  render: () => (
-    <WakaChat
-      messages={[]}
-      conversations={defaultChatConversations}
-      activeConversation={defaultChatConversations[0]}
-      currentUser={defaultChatUser}
-      loading
-    />
-  ),
+  args: {
+    messages: [],
+    conversations: defaultChatConversations,
+    activeConversation: defaultChatConversations[0],
+    currentUser: defaultChatUser,
+    loading: true,
+  },
+  render: (args) => <WakaChat {...args} />,
 }
 
 export const Sending: Story = {
-  render: () => (
-    <WakaChat
-      messages={defaultChatMessages}
-      conversations={defaultChatConversations}
-      activeConversation={defaultChatConversations[0]}
-      currentUser={defaultChatUser}
-      sending
-      onSendMessage={(content) => console.log('Send:', content)}
-    />
-  ),
+  args: {
+    messages: defaultChatMessages,
+    conversations: defaultChatConversations,
+    activeConversation: defaultChatConversations[0],
+    currentUser: defaultChatUser,
+    sending: true,
+    onSendMessage: (content) => console.log('Send:', content),
+  },
+  render: (args) => <WakaChat {...args} />,
 }
 
 export const WithCloseButton: Story = {

package/src/blocks/chat-interface/ChatInterface.mdx

@@ -0,0 +1,109 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './ChatInterface.stories'
+
+<Meta of={Stories} />
+
+# ChatInterface
+
+Full-page chat layout with conversation list, thread view, and composer; complement to the WakaChat widget.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { ChatInterface } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add chat-interface`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### No Conversation Selected
+
+<Canvas of={Stories.NoConversationSelected} />
+
+### With Sidebar
+
+<Canvas of={Stories.WithSidebar} />
+
+### Without Sidebar
+
+<Canvas of={Stories.WithoutSidebar} />
+
+### With Typing Indicator
+
+<Canvas of={Stories.WithTypingIndicator} />
+
+### Multiple Typing
+
+<Canvas of={Stories.MultipleTyping} />
+
+### Group Conversation
+
+<Canvas of={Stories.GroupConversation} />
+
+### Many Messages
+
+<Canvas of={Stories.ManyMessages} />
+
+### With Reactions
+
+<Canvas of={Stories.WithReactions} />
+
+### With Attachments
+
+<Canvas of={Stories.WithAttachments} />
+
+### Search Conversations
+
+<Canvas of={Stories.SearchConversations} />
+
+### Interactive
+
+<Canvas of={Stories.Interactive} />
+
+### Empty Conversations
+
+<Canvas of={Stories.EmptyConversations} />
+
+### Message Statuses
+
+<Canvas of={Stories.MessageStatuses} />
+
+### Pinned Conversations
+
+<Canvas of={Stories.PinnedConversations} />
+
+
+## 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/chat-interface.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/blocks/chat-interface/ChatInterface.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof ChatInterface> = {
       },
     },
   },
-  tags: ['autodocs'],
   argTypes: {
     showSidebar: {
       control: 'boolean',
@@ -27,78 +26,69 @@ export default meta
 type Story = StoryObj<typeof ChatInterface>
 
 export const Default: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      conversations={defaultConversations}
-      selectedConversation={defaultConversations[0]}
-      messages={defaultMessages}
-      onSendMessage={(content) => console.log('Send:', content)}
-      onSelectConversation={(conv) => console.log('Select:', conv)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    conversations: defaultConversations,
+    selectedConversation: defaultConversations[0],
+    messages: defaultMessages,
+    onSendMessage: (content) => console.log('Send:', content),
+    onSelectConversation: (conv) => console.log('Select:', conv),
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const NoConversationSelected: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      conversations={defaultConversations}
-      onSelectConversation={(conv) => console.log('Select:', conv)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    conversations: defaultConversations,
+    onSelectConversation: (conv) => console.log('Select:', conv),
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const WithSidebar: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      conversations={defaultConversations}
-      selectedConversation={defaultConversations[0]}
-      messages={defaultMessages}
-      showSidebar
-      onSendMessage={(content) => console.log('Send:', content)}
-      onSelectConversation={(conv) => console.log('Select:', conv)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    conversations: defaultConversations,
+    selectedConversation: defaultConversations[0],
+    messages: defaultMessages,
+    showSidebar: true,
+    onSendMessage: (content) => console.log('Send:', content),
+    onSelectConversation: (conv) => console.log('Select:', conv),
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const WithoutSidebar: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      selectedConversation={defaultConversations[0]}
-      messages={defaultMessages}
-      showSidebar={false}
-      onSendMessage={(content) => console.log('Send:', content)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    selectedConversation: defaultConversations[0],
+    messages: defaultMessages,
+    showSidebar: false,
+    onSendMessage: (content) => console.log('Send:', content),
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const WithTypingIndicator: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      conversations={defaultConversations}
-      selectedConversation={defaultConversations[0]}
-      messages={defaultMessages}
-      typingUsers={[defaultUsers[1]]}
-      onSendMessage={(content) => console.log('Send:', content)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    conversations: defaultConversations,
+    selectedConversation: defaultConversations[0],
+    messages: defaultMessages,
+    typingUsers: [defaultUsers[1]],
+    onSendMessage: (content) => console.log('Send:', content),
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const MultipleTyping: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      conversations={defaultConversations}
-      selectedConversation={defaultConversations[2]} // Group conversation
-      messages={defaultMessages}
-      typingUsers={[defaultUsers[1], defaultUsers[2]]}
-      onSendMessage={(content) => console.log('Send:', content)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    conversations: defaultConversations,
+    selectedConversation: defaultConversations[2],
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const GroupConversation: Story = {
@@ -335,13 +325,12 @@ export const Interactive: Story = {
 }
 
 export const EmptyConversations: Story = {
-  render: () => (
-    <ChatInterface
-      currentUser={defaultUsers[0]}
-      conversations={[]}
-      onSelectConversation={(conv) => console.log('Select:', conv)}
-    />
-  ),
+  args: {
+    currentUser: defaultUsers[0],
+    conversations: [],
+    onSelectConversation: (conv) => console.log('Select:', conv),
+  },
+  render: (args) => <ChatInterface {...args} />,
 }
 
 export const MessageStatuses: Story = {