create-lego-one 2.0.9 → 2.0.12

package/template/host/src/kernel/channels/hooks.ts

@@ -0,0 +1,168 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { channelBus } from './ChannelBus';
+import { ChannelName, type ChannelMessage, type ChannelSubscriber } from './types';
+
+/**
+ * Subscribe to a Garfish channel
+ *
+ * @param channel - The channel name to subscribe to
+ * @param callback - The callback function when messages are received
+ * @param deps - Dependencies for re-subscription
+ */
+export function useChannel<T extends ChannelMessage>(
+  channel: ChannelName,
+  callback: ChannelSubscriber<T>,
+  deps: React.DependencyList = []
+) {
+  const callbackRef = useRef(callback);
+
+  // Update callback ref without causing re-subscription
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const unsubscribe = channelBus.subscribe<T>(channel, (data) => {
+      callbackRef.current(data);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [channel, ...deps]);
+}
+
+/**
+ * Publish to a Garfish channel
+ *
+ * @returns A function to publish messages
+ */
+export function usePublish() {
+  return useCallback(<T extends ChannelMessage>(message: T) => {
+    channelBus.publish(message);
+  }, []);
+}
+
+/**
+ * Publish toast notifications
+ *
+ * @returns A function to publish toast messages
+ */
+export function useToastChannel() {
+  const publish = usePublish();
+
+  return useCallback((data: any) => {
+    publish({
+      channel: ChannelName.TOAST,
+      data: {
+        ...data,
+        id: `toast_${Date.now()}`,
+        timestamp: Date.now(),
+        source: 'plugin',
+      },
+    });
+  }, [publish]);
+}
+
+/**
+ * Publish navigation events
+ *
+ * @returns A function to publish navigation messages
+ */
+export function useNavigationChannel() {
+  const publish = usePublish();
+
+  return useCallback((path: string, replace = false) => {
+    publish({
+      channel: ChannelName.NAVIGATION,
+      data: {
+        path,
+        replace,
+        id: `nav_${Date.now()}`,
+        timestamp: Date.now(),
+        source: 'plugin',
+      },
+    });
+  }, [publish]);
+}
+
+/**
+ * Publish state updates
+ *
+ * @returns A function to publish state update messages
+ */
+export function useStateUpdateChannel() {
+  const publish = usePublish();
+
+  return useCallback((key: string, value: unknown) => {
+    publish({
+      channel: ChannelName.STATE_UPDATE,
+      data: {
+        key,
+        value,
+        id: `state_${Date.now()}`,
+        timestamp: Date.now(),
+        source: 'plugin',
+      },
+    });
+  }, [publish]);
+}
+
+/**
+ * Publish plugin ready event
+ *
+ * Call this when your plugin has finished initializing
+ */
+export function usePluginReady(pluginName: string, version: string) {
+  const publish = usePublish();
+
+  useEffect(() => {
+    publish({
+      channel: ChannelName.PLUGIN_READY,
+      data: {
+        pluginName,
+        version,
+        id: `ready_${Date.now()}`,
+        timestamp: Date.now(),
+        source: pluginName,
+      },
+    });
+  }, [pluginName, version, publish]);
+}
+
+/**
+ * Publish plugin error event
+ *
+ * Call this when your plugin encounters an error
+ */
+export function usePublishPluginError() {
+  const publish = usePublish();
+
+  return useCallback((pluginName: string, error: string, stack?: string) => {
+    publish({
+      channel: ChannelName.PLUGIN_ERROR,
+      data: {
+        pluginName,
+        error,
+        stack,
+        id: `error_${Date.now()}`,
+        timestamp: Date.now(),
+        source: pluginName,
+      },
+    });
+  }, [publish]);
+}
+
+/**
+ * Listen for auth changes
+ */
+export function useAuthChannel(callback: (data: any) => void) {
+  return useChannel(ChannelName.AUTH_CHANGE, callback as any, []);
+}
+
+/**
+ * Listen for organization changes
+ */
+export function useOrganizationChannel(callback: (data: any) => void) {
+  return useChannel(ChannelName.ORGANIZATION_CHANGE, callback as any, []);
+}

package/template/host/src/kernel/channels/index.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './events';
+export * from './ChannelBus';
+export * from './hooks';
+export * from './ChannelProvider';
+export * from './integrations/ToastIntegration';

package/template/host/src/kernel/channels/integrations/ToastIntegration.tsx

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { toast } from '../../components/ui/use-toast';
+import { channelBus } from '../ChannelBus';
+import { ChannelName, type ChannelMessage } from '../types';
+
+/**
+ * ToastIntegration - Listens to toast channel events and displays them
+ *
+ * This component subscribes to the TOAST channel and shows toasts
+ * when plugins publish events to it. This demonstrates plugin → host communication.
+ */
+export function ToastIntegration() {
+  useEffect(() => {
+    // Subscribe to toast channel
+    const unsubscribe = channelBus.subscribe(
+      ChannelName.TOAST,
+      (message: ChannelMessage) => {
+        if (message.channel === ChannelName.TOAST) {
+          const { type, title, description } = message.data as any;
+
+          // Map toast type to variant
+          const variant = type === 'error' || type === 'warning' ? 'destructive' : 'default';
+
+          // Show toast
+          toast({
+            variant,
+            title,
+            description,
+          });
+
+          console.log(`[ToastIntegration] Received toast:`, { type, title, description });
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  // This component doesn't render anything
+  return null;
+}
+
+/**
+ * Hook to publish toast events (for plugins to use)
+ */
+export function usePublishToast() {
+  return (data: any) => {
+    channelBus.publish({
+      channel: ChannelName.TOAST,
+      data: {
+        ...data,
+        id: `toast_${Date.now()}`,
+        timestamp: Date.now(),
+        source: 'plugin',
+      },
+    });
+  };
+}

package/template/host/src/kernel/channels/plugin-hooks.ts

@@ -0,0 +1,72 @@
+import { useCallback } from 'react';
+import { useNavigate } from '@modern-js/runtime/router';
+import { channelBus } from './ChannelBus';
+import { ChannelName, type ToastEventData } from './types';
+
+/**
+ * Helper hook for plugins to access kernel channels
+ *
+ * This hook can be used from any plugin via the window bridge:
+ * window.__LEGO_KERNEL_STATE__?.usePluginChannels?.()
+ */
+export function usePluginChannels() {
+  const navigate = useNavigate();
+
+  // Show toast notification
+  const toast = useCallback((data: Omit<ToastEventData, 'id' | 'timestamp' | 'source'>) => {
+    channelBus.publish({
+      channel: ChannelName.TOAST,
+      data: {
+        ...data,
+        id: `toast_${Date.now()}`,
+        timestamp: Date.now(),
+        source: 'plugin',
+      },
+    });
+  }, []);
+
+  // Navigate to a path
+  const navigateTo = useCallback((path: string, replace = false) => {
+    // Use direct navigation instead of publishing to channel
+    // This avoids circular dependencies and works more reliably
+    navigate(path, { replace });
+  }, [navigate]);
+
+  // Subscribe to auth changes
+  const onAuthChange = useCallback((callback: (data: any) => void) => {
+    return channelBus.subscribe(ChannelName.AUTH_CHANGE, callback as any);
+  }, []);
+
+  // Subscribe to organization changes
+  const onOrganizationChange = useCallback((callback: (data: any) => void) => {
+    return channelBus.subscribe(ChannelName.ORGANIZATION_CHANGE, callback as any);
+  }, []);
+
+  return {
+    toast,
+    navigateTo,
+    onAuthChange,
+    onOrganizationChange,
+  };
+}
+
+/**
+ * Register plugin channels helper to window bridge
+ */
+export function registerPluginChannels() {
+  if (typeof window !== 'undefined') {
+    (window as any).__LEGO_PLUGIN_CHANNELS__ = {
+      toast: (data: Omit<ToastEventData, 'id' | 'timestamp' | 'source'>) => {
+        channelBus.publish({
+          channel: ChannelName.TOAST,
+          data: {
+            ...data,
+            id: `toast_${Date.now()}`,
+            timestamp: Date.now(),
+            source: 'plugin',
+          },
+        });
+      },
+    };
+  }
+}

package/template/host/src/kernel/channels/types.ts

@@ -0,0 +1,112 @@
+import type { Garfish } from 'garfish';
+
+/**
+ * Channel names for different communication topics
+ */
+export enum ChannelName {
+  TOAST = 'lego:toast',
+  NAVIGATION = 'lego:navigation',
+  STATE_UPDATE = 'lego:state:update',
+  PLUGIN_READY = 'lego:plugin:ready',
+  PLUGIN_ERROR = 'lego:plugin:error',
+  AUTH_CHANGE = 'lego:auth:change',
+  ORGANIZATION_CHANGE = 'lego:organization:change',
+}
+
+/**
+ * Base event interface
+ */
+export interface ChannelEvent {
+  id: string;
+  timestamp: number;
+  source?: string; // Plugin name or 'host'
+}
+
+/**
+ * Toast event data
+ */
+export interface ToastEventData extends ChannelEvent {
+  type: 'success' | 'error' | 'info' | 'warning';
+  title: string;
+  description?: string;
+  duration?: number;
+}
+
+/**
+ * Navigation event data
+ */
+export interface NavigationEventData extends ChannelEvent {
+  path: string;
+  replace?: boolean;
+}
+
+/**
+ * State update event data
+ */
+export interface StateUpdateEventData extends ChannelEvent {
+  key: string;
+  value: unknown;
+}
+
+/**
+ * Plugin ready event data
+ */
+export interface PluginReadyEventData extends ChannelEvent {
+  pluginName: string;
+  version: string;
+}
+
+/**
+ * Plugin error event data
+ */
+export interface PluginErrorEventData extends ChannelEvent {
+  pluginName: string;
+  error: string;
+  stack?: string;
+}
+
+/**
+ * Auth change event data
+ */
+export interface AuthChangeEventData extends ChannelEvent {
+  isAuthenticated: boolean;
+  userId?: string;
+  organizationId?: string;
+}
+
+/**
+ * Organization change event data
+ */
+export interface OrganizationChangeEventData extends ChannelEvent {
+  organizationId: string;
+  organizationName: string;
+}
+
+/**
+ * Channel message payload
+ */
+export type ChannelMessage =
+  | { channel: ChannelName.TOAST; data: ToastEventData }
+  | { channel: ChannelName.NAVIGATION; data: NavigationEventData }
+  | { channel: ChannelName.STATE_UPDATE; data: StateUpdateEventData }
+  | { channel: ChannelName.PLUGIN_READY; data: PluginReadyEventData }
+  | { channel: ChannelName.PLUGIN_ERROR; data: PluginErrorEventData }
+  | { channel: ChannelName.AUTH_CHANGE; data: AuthChangeEventData }
+  | { channel: ChannelName.ORGANIZATION_CHANGE; data: OrganizationChangeEventData };
+
+/**
+ * Channel subscriber callback
+ */
+export type ChannelSubscriber<T = ChannelMessage> = (data: T) => void | Promise<void>;
+
+/**
+ * Channel API
+ */
+export interface ChannelAPI {
+  publish: <T extends ChannelMessage>(message: T) => void;
+  subscribe: <T extends ChannelMessage>(
+    channel: ChannelName,
+    callback: ChannelSubscriber<T>
+  ) => () => void; // Returns unsubscribe function
+  unsubscribe: (channel: ChannelName, callback: ChannelSubscriber) => void;
+}

package/template/host/src/kernel/components/__tests__/Badge.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Badge } from '../ui/badge';
+
+describe('Badge Component', () => {
+  it('should render children', () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText('New')).toBeInTheDocument();
+  });
+
+  it('should apply default variant classes', () => {
+    render(<Badge>Default</Badge>);
+    expect(screen.getByText('Default')).toHaveClass('bg-primary');
+  });
+
+  it('should apply secondary variant classes', () => {
+    render(<Badge variant="secondary">Secondary</Badge>);
+    expect(screen.getByText('Secondary')).toHaveClass('bg-secondary');
+  });
+
+  it('should apply destructive variant classes', () => {
+    render(<Badge variant="destructive">Error</Badge>);
+    expect(screen.getByText('Error')).toHaveClass('bg-destructive');
+  });
+
+  it('should apply outline variant classes', () => {
+    render(<Badge variant="outline">Outline</Badge>);
+    expect(screen.getByText('Outline')).toHaveClass('border');
+  });
+
+  it('should apply custom className', () => {
+    render(<Badge className="custom-class">Custom</Badge>);
+    expect(screen.getByText('Custom')).toHaveClass('custom-class');
+  });
+});

package/template/host/src/kernel/components/__tests__/Button.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '../ui/button';
+
+describe('Button Component', () => {
+  it('should render children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('should call onClick when clicked', async () => {
+    const handleClick = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    await user.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call onClick when disabled', async () => {
+    const handleClick = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Button onClick={handleClick} disabled>
+        Click me
+      </Button>
+    );
+
+    await user.click(screen.getByText('Click me'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('should apply variant classes correctly', () => {
+    const { rerender } = render(<Button variant="default">Default</Button>);
+    expect(screen.getByText('Default')).toHaveClass('bg-primary');
+
+    rerender(<Button variant="destructive">Destructive</Button>);
+    expect(screen.getByText('Destructive')).toHaveClass('bg-destructive');
+
+    rerender(<Button variant="outline">Outline</Button>);
+    expect(screen.getByText('Outline')).toHaveClass('border-input');
+
+    rerender(<Button variant="ghost">Ghost</Button>);
+    expect(screen.getByText('Ghost')).toHaveClass('hover:bg-accent');
+  });
+
+  it('should apply size classes correctly', () => {
+    const { rerender } = render(<Button size="default">Default</Button>);
+    expect(screen.getByText('Default')).toHaveClass('h-10');
+
+    rerender(<Button size="sm">Small</Button>);
+    expect(screen.getByText('Small')).toHaveClass('h-9');
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByText('Large')).toHaveClass('h-11');
+
+    rerender(<Button size="icon">Icon</Button>);
+    expect(screen.getByText('Icon')).toHaveClass('h-10', 'w-10');
+  });
+});

package/template/host/src/kernel/components/__tests__/Input.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Input } from '../ui/input';
+
+describe('Input Component', () => {
+  it('should render input element', () => {
+    render(<Input />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should accept and update text input', async () => {
+    const user = userEvent.setup();
+    render(<Input placeholder="Enter text" />);
+
+    const input = screen.getByPlaceholderText('Enter text');
+    await user.type(input, 'Hello World');
+
+    expect(input).toHaveValue('Hello World');
+  });
+
+  it('should call onChange when value changes', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Input onChange={handleChange} />);
+
+    await user.type(screen.getByRole('textbox'), 'a');
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it('should be disabled when disabled prop is true', async () => {
+    const user = userEvent.setup();
+    render(<Input disabled />);
+
+    const input = screen.getByRole('textbox');
+    expect(input).toBeDisabled();
+
+    await user.type(input, 'test');
+    expect(input).toHaveValue('');
+  });
+
+  it('should apply custom className', () => {
+    render(<Input className="custom-class" />);
+    expect(screen.getByRole('textbox')).toHaveClass('custom-class');
+  });
+
+  it('should accept all standard input props', () => {
+    render(
+      <Input
+        type="email"
+        name="email"
+        placeholder="email@example.com"
+        required
+      />
+    );
+
+    const input = screen.getByPlaceholderText('email@example.com');
+    expect(input).toHaveAttribute('type', 'email');
+    expect(input).toHaveAttribute('name', 'email');
+    expect(input).toBeRequired();
+  });
+});

package/template/host/src/kernel/components/index.ts

@@ -0,0 +1,32 @@
+export * from './ui/avatar';
+export * from './ui/badge';
+export * from './ui/button';
+export * from './ui/card';
+export * from './ui/input';
+export * from './ui/label';
+export * from './ui/alert';
+export * from './ui/dialog';
+export * from './ui/dropdown-menu';
+export * from './ui/select';
+export * from './ui/switch';
+export * from './ui/tabs';
+export * from './ui/separator';
+export * from './ui/popover';
+export * from './ui/scroll-area';
+export * from './ui/progress';
+export * from './ui/tooltip';
+// Exclude Toast to avoid naming conflict with shared-state Toast type
+export {
+  ToastProvider,
+  ToastViewport,
+  ToastAction,
+  ToastClose,
+  ToastTitle,
+  ToastDescription,
+  type ToastProps,
+  type ToastActionElement,
+} from './ui/toast';
+export * from './ui/toaster';
+export * from './ui/use-toast';
+export * from './ui/table';
+export * from './ui/skeleton';

package/template/host/src/kernel/components/ui/alert.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };