@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/error-boundary/ErrorBoundary.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ErrorBoundary, ErrorFallbackProps } from "./index"
+import { Button } from "../button"
+import * as React from "react"
+
+// Component that throws an error
+const BuggyComponent = ({ shouldThrow }: { shouldThrow: boolean }) => {
+  if (shouldThrow) {
+    throw new Error("This is a simulated error!")
+  }
+  return (
+    <div className="p-4 border rounded-lg bg-green-50 text-green-800">
+      ✅ Component rendered successfully
+    </div>
+  )
+}
+
+// Interactive demo
+const ErrorBoundaryDemo = () => {
+  const [shouldThrow, setShouldThrow] = React.useState(false)
+  const [key, setKey] = React.useState(0)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Button onClick={() => setShouldThrow(true)} variant="destructive">
+          Trigger Error
+        </Button>
+        <Button
+          onClick={() => {
+            setShouldThrow(false)
+            setKey((k) => k + 1)
+          }}
+          variant="outline"
+        >
+          Reset
+        </Button>
+      </div>
+
+      <ErrorBoundary
+        key={key}
+        componentName="BuggyComponent"
+        onError={(error) => console.log("Error caught:", error)}
+        onReset={() => console.log("Boundary reset")}
+      >
+        <BuggyComponent shouldThrow={shouldThrow} />
+      </ErrorBoundary>
+    </div>
+  )
+}
+
+// Custom fallback demo
+const CustomFallback = ({ error, resetErrorBoundary }: ErrorFallbackProps) => (
+  <div className="p-6 bg-red-50 border-2 border-red-200 rounded-xl text-center space-y-4">
+    <div className="text-4xl">💥</div>
+    <h3 className="text-lg font-bold text-red-700">Oops! Something broke</h3>
+    <p className="text-sm text-red-600">{error.message}</p>
+    <Button onClick={resetErrorBoundary} variant="outline" size="sm">
+      Try Again
+    </Button>
+  </div>
+)
+
+const meta: Meta<typeof ErrorBoundary> = {
+  title: "Components/Feedback/ErrorBoundary",
+  component: ErrorBoundary,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    componentName: {
+      control: "text",
+      description: "Name of the component for error context",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorBoundary>
+
+export const Default: Story = {
+  render: () => <ErrorBoundaryDemo />,
+}
+
+export const WithCustomFallback: Story = {
+  render: () => {
+    const [shouldThrow, setShouldThrow] = React.useState(false)
+    const [key, setKey] = React.useState(0)
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setShouldThrow(true)} variant="destructive">
+          Trigger Error
+        </Button>
+
+        <ErrorBoundary
+          key={key}
+          fallback={(props) => <CustomFallback {...props} />}
+          onReset={() => {
+            setShouldThrow(false)
+            setKey((k) => k + 1)
+          }}
+        >
+          <BuggyComponent shouldThrow={shouldThrow} />
+        </ErrorBoundary>
+      </div>
+    )
+  },
+}
+
+export const WithComponentName: Story = {
+  render: () => (
+    <ErrorBoundary componentName="UserProfile">
+      <div className="p-4 border rounded-lg">
+        Content that could potentially throw an error
+      </div>
+    </ErrorBoundary>
+  ),
+}
+

package/src/components/index.ts

@@ -303,12 +303,33 @@ export * from './waka-permission-matrix'
 export * from './waka-audit-log'
 export * from './waka-security-score'
 export * from './waka-biometric-prompt'
-export * from './waka-device-trust'
+// waka-device-trust: Explicit export to avoid DeviceType conflict with waka-session-manager
+export {
+  WakaDeviceTrust,
+  useDeviceTrust,
+  type TrustedDevice,
+  type TrustStatus,
+  type ExpiryPeriod,
+  type DeviceTrustConfig,
+  type DeviceType as DeviceTrustDeviceType,
+  type WakaDeviceTrustProps,
+  type UseDeviceTrustOptions,
+} from './waka-device-trust'
 
 // Communication & Collaboration Components
 export * from './waka-chat-bubble'
 export * from './waka-typing-indicator'
-export * from './waka-video-call'
+// waka-video-call: Explicit export to avoid Participant conflict with waka-tournament-bracket
+export {
+  WakaVideoCall,
+  useVideoCall,
+  type Participant as VideoCallParticipant,
+  type ConnectionQuality,
+  type VideoCallLayout,
+  type VideoCallState,
+  type WakaVideoCallProps,
+  type UseVideoCallOptions,
+} from './waka-video-call'
 export * from './waka-thread-view'
 export * from './waka-reaction-picker'
 export * from './waka-voice-message'
@@ -318,7 +339,19 @@ export * from './waka-funnel-chart'
 export * from './waka-cohort-table'
 export * from './waka-kpi-dashboard'
 export * from './waka-goal-progress'
-export * from './waka-heatmap'
+// waka-heatmap: Explicit export to avoid ColorScheme conflict with waka-status-matrix
+export {
+  WakaHeatmap,
+  useHeatmap,
+  type WakaHeatmapProps,
+  type HeatmapCell,
+  type HeatmapData,
+  type HeatmapSelection,
+  type ColorScheme as HeatmapColorScheme,
+  type ColorSchemeType as HeatmapColorSchemeType,
+  type UseHeatmapOptions,
+  type UseHeatmapReturn,
+} from './waka-heatmap'
 export * from './waka-sankey-diagram'
 export * from './waka-treemap-chart'
 
@@ -328,7 +361,15 @@ export * from './waka-address-autocomplete'
 export * from './waka-phone-input'
 export * from './waka-credit-card-input'
 export * from './waka-tag-input'
-export * from './waka-slider-range'
+// waka-slider-range: Explicit export to avoid ValueFormat conflict with waka-funnel-chart
+export {
+  WakaSliderRange,
+  useSliderRange,
+  type WakaSliderRangeProps,
+  type ValueFormat as SliderValueFormat,
+  type UseSliderRangeOptions,
+  type UseSliderRangeReturn,
+} from './waka-slider-range'
 export * from './waka-rating-input'
 export * from './waka-schedule-picker'
 

package/src/components/language-selector/LanguageSelector.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { LanguageSelector, Language } from "./index"
+
+const sampleLanguages: Language[] = [
+  { code: "en", label: "English", flagEmoji: "🇺🇸" },
+  { code: "fr", label: "Français", flagEmoji: "🇫🇷" },
+  { code: "de", label: "Deutsch", flagEmoji: "🇩🇪" },
+  { code: "es", label: "Español", flagEmoji: "🇪🇸" },
+  { code: "it", label: "Italiano", flagEmoji: "🇮🇹" },
+  { code: "pt", label: "Português", flagEmoji: "🇵🇹" },
+  { code: "ja", label: "日本語", flagEmoji: "🇯🇵" },
+]
+
+const meta: Meta<typeof LanguageSelector> = {
+  title: "Components/UI/LanguageSelector",
+  component: LanguageSelector,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "compact", "minimal"],
+      description: "Style variant of the selector",
+    },
+    showFlags: {
+      control: "boolean",
+      description: "Show flag icons",
+    },
+    showLabels: {
+      control: "boolean",
+      description: "Show language labels",
+    },
+    isLoading: {
+      control: "boolean",
+      description: "Loading state",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof LanguageSelector>
+
+export const Default: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "en",
+    showFlags: true,
+    showLabels: true,
+    variant: "default",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "fr",
+    showFlags: true,
+    showLabels: true,
+    variant: "compact",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const Minimal: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "de",
+    showFlags: true,
+    variant: "minimal",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const WithoutFlags: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "es",
+    showFlags: false,
+    showLabels: true,
+    variant: "default",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const IconOnly: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "ja",
+    showFlags: true,
+    showLabels: false,
+    variant: "compact",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+
+export const Loading: Story = {
+  args: {
+    languages: sampleLanguages,
+    value: "en",
+    isLoading: true,
+    variant: "default",
+  },
+  render: (args) => <LanguageSelector {...args} />,
+}
+

package/src/components/theme-selector/ThemeSelector.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ThemeSelector, ThemeSelectorProps } from "./index"
+import { ThemeProvider } from "../../context/theme-provider"
+
+const meta: Meta<typeof ThemeSelector> = {
+  title: "Components/UI/ThemeSelector",
+  component: ThemeSelector,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ThemeProvider
+        themes={[
+          { id: "default", label: "Default", previewColor: "#6366f1" },
+          { id: "dark", label: "Dark", previewColor: "#1e293b" },
+          { id: "sunset", label: "Sunset", previewColor: "#f97316" },
+          { id: "ocean", label: "Ocean", previewColor: "#0ea5e9" },
+          { id: "forest", label: "Forest", previewColor: "#22c55e" },
+        ]}
+        defaultTheme="default"
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "full", "compact", "select"],
+      description: "Style variant of the selector",
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessibility label",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ThemeSelector>
+
+export const Default: Story = {
+  args: {
+    variant: "default",
+  },
+  render: (args) => <ThemeSelector {...args} />,
+}
+
+export const Compact: Story = {
+  args: {
+    variant: "compact",
+  },
+  render: (args) => <ThemeSelector {...args} />,
+}
+
+export const Select: Story = {
+  args: {
+    variant: "select",
+    className: "w-[200px]",
+  },
+  render: (args) => <ThemeSelector {...args} />,
+}
+
+export const Full: Story = {
+  args: {
+    variant: "full",
+    className: "w-[400px]",
+  },
+  render: (args) => <ThemeSelector {...args} />,
+}
+

package/src/components/toaster/Toaster.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Toaster } from "./index"
+import { useToast } from "../../hooks/useToast"
+import { Button } from "../button"
+
+const ToasterDemo = () => {
+  const { toast } = useToast()
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button
+        onClick={() =>
+          toast({
+            title: "Success!",
+            description: "Your action was completed successfully.",
+          })
+        }
+      >
+        Show Default Toast
+      </Button>
+
+      <Button
+        variant="destructive"
+        onClick={() =>
+          toast({
+            title: "Error!",
+            description: "Something went wrong.",
+            variant: "destructive",
+          })
+        }
+      >
+        Show Error Toast
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast({
+            title: "Scheduled",
+            description: "Event has been scheduled for tomorrow.",
+          })
+        }
+      >
+        Show Info Toast
+      </Button>
+
+      <Toaster />
+    </div>
+  )
+}
+
+const meta: Meta<typeof Toaster> = {
+  title: "Components/Feedback/Toaster",
+  component: Toaster,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Toaster>
+
+export const Default: Story = {
+  render: () => <ToasterDemo />,
+}
+

package/src/components/waka-activity-feed/WakaActivityFeed.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaActivityFeed, Activity, ActivityType } from "./index"
+
+const sampleActivities: Activity[] = [
+  {
+    id: "1",
+    type: "achievement",
+    user: { id: "u1", name: "Alice Johnson", avatar: "https://i.pravatar.cc/150?u=alice" },
+    content: "Unlocked the 'Early Bird' achievement",
+    timestamp: new Date(Date.now() - 5 * 60 * 1000),
+    likes: 12,
+    liked: false,
+  },
+  {
+    id: "2",
+    type: "level_up",
+    user: { id: "u2", name: "Bob Smith" },
+    content: "Reached Level 25",
+    timestamp: new Date(Date.now() - 15 * 60 * 1000),
+    likes: 8,
+    liked: true,
+  },
+  {
+    id: "3",
+    type: "challenge",
+    user: { id: "u3", name: "Carol White", avatar: "https://i.pravatar.cc/150?u=carol" },
+    content: "Completed the Weekly Challenge",
+    timestamp: new Date(Date.now() - 60 * 60 * 1000),
+    likes: 24,
+  },
+  {
+    id: "4",
+    type: "purchase",
+    user: { id: "u4", name: "Dave Brown" },
+    content: "Purchased Premium Subscription",
+    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
+    likes: 3,
+  },
+  {
+    id: "5",
+    type: "milestone",
+    user: { id: "u5", name: "Eve Davis", avatar: "https://i.pravatar.cc/150?u=eve" },
+    content: "Reached 1000 XP milestone",
+    timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000),
+    likes: 45,
+  },
+]
+
+const meta: Meta<typeof WakaActivityFeed> = {
+  title: "Components/Gamification/WakaActivityFeed",
+  component: WakaActivityFeed,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showLikes: {
+      control: "boolean",
+      description: "Show like button and count",
+    },
+    groupSimilar: {
+      control: "boolean",
+      description: "Group similar activities",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+    hasMore: {
+      control: "boolean",
+      description: "Show load more button",
+    },
+    loading: {
+      control: "boolean",
+      description: "Loading state",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaActivityFeed>
+
+export const Default: Story = {
+  args: {
+    activities: sampleActivities,
+    showLikes: true,
+    animated: true,
+    hasMore: true,
+  },
+  render: (args) => <WakaActivityFeed {...args} />,
+}
+
+export const WithoutLikes: Story = {
+  args: {
+    activities: sampleActivities,
+    showLikes: false,
+    animated: true,
+  },
+  render: (args) => <WakaActivityFeed {...args} />,
+}
+
+export const Loading: Story = {
+  args: {
+    activities: sampleActivities.slice(0, 2),
+    loading: true,
+  },
+  render: (args) => <WakaActivityFeed {...args} />,
+}
+
+export const Empty: Story = {
+  args: {
+    activities: [],
+  },
+  render: (args) => <WakaActivityFeed {...args} />,
+}
+

package/src/components/waka-ad-banner/WakaAdBanner.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaAdBanner } from "./index"
+import { WakaAdProvider } from "../waka-ad-provider"
+
+const mockAdConfig = {
+  network: "custom" as const,
+  customAdServer: "https://ads.example.com",
+  testMode: true,
+  debugMode: true,
+}
+
+const meta: Meta<typeof WakaAdBanner> = {
+  title: "Components/Ads/WakaAdBanner",
+  component: WakaAdBanner,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <WakaAdProvider config={mockAdConfig}>
+        <Story />
+      </WakaAdProvider>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["leaderboard", "rectangle", "skyscraper", "billboard", "mobile-banner", "custom"],
+      description: "Ad size preset",
+    },
+    showBadge: {
+      control: "boolean",
+      description: "Show sponsored badge",
+    },
+    badgePosition: {
+      control: "select",
+      options: ["top-left", "top-right", "bottom-left", "bottom-right"],
+      description: "Position of the sponsored badge",
+    },
+    lazyLoad: {
+      control: "boolean",
+      description: "Enable lazy loading",
+    },
+    refreshInterval: {
+      control: "number",
+      description: "Auto-refresh interval in seconds",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaAdBanner>
+
+export const Rectangle: Story = {
+  args: {
+    slotId: "ad-rectangle-1",
+    size: "rectangle",
+    showBadge: true,
+    badgePosition: "top-right",
+  },
+  render: (args) => <WakaAdBanner {...args} />,
+}
+
+export const Leaderboard: Story = {
+  args: {
+    slotId: "ad-leaderboard-1",
+    size: "leaderboard",
+    showBadge: true,
+  },
+  render: (args) => <WakaAdBanner {...args} />,
+}
+
+export const Skyscraper: Story = {
+  args: {
+    slotId: "ad-skyscraper-1",
+    size: "skyscraper",
+    showBadge: true,
+  },
+  render: (args) => <WakaAdBanner {...args} />,
+}
+
+export const MobileBanner: Story = {
+  args: {
+    slotId: "ad-mobile-1",
+    size: "mobile-banner",
+    showBadge: false,
+  },
+  render: (args) => <WakaAdBanner {...args} />,
+}
+
+export const Custom: Story = {
+  args: {
+    slotId: "ad-custom-1",
+    size: "custom",
+    customWidth: 400,
+    customHeight: 150,
+    showBadge: true,
+  },
+  render: (args) => <WakaAdBanner {...args} />,
+}
+