@hanzo/ui 5.0.0 → 5.0.2

package/bin/registry-mcp.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+// This is the main entry point for the MCP server
+// It should be runnable directly with npx @hanzo/ui registry:mcp
+
+/**
+ * This script starts the MCP server for Hanzo UI
+ * It can be run with npx @hanzo/ui registry:mcp
+ */
+const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js");
+
+// Import the server dynamically based on where it's available
+async function loadServer() {
+  try {
+    // Try loading from dist directory (published package)
+    return require("../dist/mcp/index.js").server;
+  } catch (error) {
+    try {
+      // Fallback to direct import (development)
+      return require("../mcp/index.js").server;
+    } catch (innerError) {
+      console.error("Failed to load the MCP server implementation:", innerError);
+      process.exit(1);
+    }
+  }
+}
+
+// Start HTTP server if requested
+async function startHttpServer(server) {
+  try {
+    // Dynamically import the HTTP transport - we don't want to require
+    // this dependency if we're not using HTTP mode
+    const { HttpServerTransport } = require("@modelcontextprotocol/sdk/server/http.js");
+    
+    // Get port from environment or use default
+    const port = process.env.MCP_PORT || 3333;
+    
+    // Create HTTP transport
+    const transport = new HttpServerTransport({
+      port: parseInt(port, 10),
+      cors: {
+        origin: "*",  // Allow any origin
+        methods: ["GET", "POST"],
+        allowedHeaders: ["Content-Type"],
+      },
+    });
+    
+    // Connect the server to the transport
+    await server.connect(transport);
+    
+    console.error(`MCP HTTP server listening on port ${port}`);
+    console.error(`You can access the server at http://localhost:${port}`);
+  } catch (error) {
+    console.error("Failed to start HTTP server:", error);
+    console.error("Falling back to STDIO mode...");
+    return false;
+  }
+  
+  return true;
+}
+
+async function main() {
+  try {
+    console.error("Loading Hanzo UI MCP server...");
+    
+    // Default registry URL if not set
+    if (!process.env.REGISTRY_URL) {
+      process.env.REGISTRY_URL = "https://ui.hanzo.ai/registry/registry.json";
+      console.error(`Using default registry URL: ${process.env.REGISTRY_URL}`);
+      console.error("You can set a custom registry URL with the REGISTRY_URL environment variable.");
+    }
+
+    // Load the server
+    const server = await loadServer();
+    
+    // Check if we should use HTTP mode
+    const useHttp = process.env.MCP_HTTP_MODE === "true";
+    
+    if (useHttp) {
+      // Try to start HTTP server, fall back to stdio if it fails
+      const httpStarted = await startHttpServer(server);
+      if (!httpStarted) {
+        // Fall back to stdio
+        const transport = new StdioServerTransport();
+        await server.connect(transport);
+      }
+    } else {
+      // Use stdio mode
+      const transport = new StdioServerTransport();
+      await server.connect(transport);
+      console.error("MCP server running in stdio mode");
+    }
+  } catch (error) {
+    console.error("Error starting MCP server:", error);
+    process.exit(1);
+  }
+}
+
+// Start the server
+main();

package/bin/start-mcp-server.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Set the registry URL
+export REGISTRY_URL=${REGISTRY_URL:-"https://ui.hanzo.ai/registry/registry.json"}
+
+echo "Starting Hanzo UI MCP server with registry URL: $REGISTRY_URL"
+echo "This server enables AI assistants to interact with the Hanzo UI component library."
+echo "Use this as the URL for 'npx @hanzo/ui registry:mcp' in your MCP configuration."
+echo ""
+echo "Press Ctrl+C to stop the server."
+
+# Find the CLI script
+if [ -f "./bin/cli.js" ]; then
+  # In development directory structure
+  node ./bin/cli.js registry:mcp
+elif [ -f "./node_modules/@hanzo/ui/bin/cli.js" ]; then
+  # Installed as dependency
+  node ./node_modules/@hanzo/ui/bin/cli.js registry:mcp
+else
+  # Use npx as fallback
+  npx @hanzo/ui registry:mcp
+fi

package/bin/test-mcp.sh

@@ -0,0 +1,52 @@
+#!/bin/bash
+
+# Test script for verifying the Hanzo UI MCP functionality
+
+# Set a test registry URL
+export REGISTRY_URL="https://ui.hanzo.com/registry/registry.json"
+
+echo "Testing Hanzo UI MCP Server"
+echo "============================"
+echo ""
+echo "This script will test the following functionalities:"
+echo "1. Loading the server from NPX"
+echo "2. Server startup with custom registry URL"
+echo ""
+
+# First test: Simple command check
+echo "Test 1: Check if the NPX command is recognized"
+# Just check if the command exists without running it
+which npx > /dev/null 2>&1
+if [ $? -eq 0 ]; then
+  echo "✅ NPX is available"
+else
+  echo "❌ NPX is not installed"
+  exit 1
+fi
+
+# Second test: Server startup check
+echo ""
+echo "Test 2: Server startup (will exit automatically after 3 seconds)"
+echo "Running: REGISTRY_URL=$REGISTRY_URL timeout 3 npx @hanzo/ui registry:mcp"
+echo ""
+echo "Expected output: You should see the server startup message"
+echo ""
+
+# Run with timeout to automatically kill after 3 seconds
+# This works because the MCP server doesn't terminate on its own
+timeout 3 npx @hanzo/ui registry:mcp 2>&1 | grep "Starting Hanzo UI MCP server"
+
+if [ $? -eq 0 ]; then
+  echo ""
+  echo "✅ Server startup message detected"
+else
+  echo ""
+  echo "❌ Server failed to start properly"
+  exit 1
+fi
+
+echo ""
+echo "All tests completed successfully!"
+echo ""
+echo "The Hanzo UI MCP server is ready to be used in your MCP configuration with:"
+echo "npx @hanzo/ui registry:mcp"

package/bin/update-registry.js

@@ -0,0 +1,196 @@
+#!/usr/bin/env node
+
+/**
+ * This script updates the registry.json file based on components
+ * found in the registry directory. It's similar to the approach used by hanzo/ui.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+// Configuration
+const REGISTRY_DIR = path.resolve(__dirname, '../registry');
+const PUBLIC_DIR = path.resolve(__dirname, '../public');
+const OUTPUT_FILE = path.resolve(__dirname, '../registry.json');
+const REGISTRY_STYLES = ['default', 'new-york']; // Add other styles as needed
+
+// Schema for registry.json
+const registrySchema = {
+  "$schema": "https://ui.hanzo.com/schema/registry.json",
+  "name": "hanzo",
+  "homepage": "https://ui.hanzo.ai",
+  "items": []
+};
+
+/**
+ * Main function to update the registry
+ */
+async function updateRegistry() {
+  try {
+    console.log('Updating registry.json...');
+    
+    // Find all registry components
+    const items = [];
+    
+    // Process each style directory
+    for (const style of REGISTRY_STYLES) {
+      const styleDir = path.join(REGISTRY_DIR, style);
+      
+      // Skip if style directory doesn't exist
+      if (!fs.existsSync(styleDir)) {
+        console.log(`Style directory not found: ${style}`);
+        continue;
+      }
+      
+      // Process UI components
+      const uiDir = path.join(styleDir, 'ui');
+      if (fs.existsSync(uiDir)) {
+        const uiComponents = glob.sync(`${uiDir}/**/!(*.test|*.spec).{ts,tsx,js,jsx}`);
+        
+        for (const filePath of uiComponents) {
+          const relativePath = path.relative(REGISTRY_DIR, filePath);
+          const dirName = path.basename(path.dirname(filePath));
+          const fileName = path.basename(filePath);
+          
+          // Skip index files and non-component files
+          if (fileName === 'index.ts' || fileName === 'index.tsx') continue;
+          
+          // Component name is usually the directory name
+          const name = dirName;
+          
+          // Check if component already exists in the registry
+          if (!items.find(item => item.name === name && item.type === 'registry:component')) {
+            const componentMeta = {
+              name,
+              type: 'registry:component',
+              description: `A ${name} component for your UI.`,
+              files: [
+                {
+                  path: relativePath,
+                  type: 'registry:component'
+                }
+              ],
+              registryDependencies: []
+            };
+            
+            // Try to parse dependencies from the file content
+            try {
+              const content = fs.readFileSync(filePath, 'utf8');
+              
+              // Find import statements for other components
+              const dependencies = [];
+              const importRegex = /import.*from ['"]@\/components\/ui\/([^'"]+)['"]/g;
+              let match;
+              
+              while ((match = importRegex.exec(content)) !== null) {
+                const dependency = match[1];
+                if (!dependencies.includes(dependency)) {
+                  dependencies.push(dependency);
+                }
+              }
+              
+              if (dependencies.length > 0) {
+                componentMeta.registryDependencies = dependencies;
+              }
+            } catch (error) {
+              console.warn(`Error parsing dependencies for ${name}:`, error.message);
+            }
+            
+            items.push(componentMeta);
+          }
+        }
+      }
+      
+      // Process other component types (blocks, etc.)
+      const blockDir = path.join(styleDir, 'block');
+      if (fs.existsSync(blockDir)) {
+        const blocks = glob.sync(`${blockDir}/**/!(*.test|*.spec).{ts,tsx,js,jsx}`);
+        
+        for (const filePath of blocks) {
+          const relativePath = path.relative(REGISTRY_DIR, filePath);
+          const dirName = path.basename(path.dirname(filePath));
+          
+          // Skip helper files
+          if (dirName === 'utils' || dirName === 'helpers') continue;
+          
+          // Block name is usually the directory name
+          const name = dirName;
+          
+          // Check if block already exists in the registry
+          if (!items.find(item => item.name === name && item.type === 'registry:block')) {
+            items.push({
+              name,
+              type: 'registry:block',
+              description: `A ${name} block for your UI.`,
+              files: [
+                {
+                  path: relativePath,
+                  type: 'registry:block'
+                }
+              ]
+            });
+          }
+        }
+      }
+    }
+    
+    // Add style definition
+    for (const style of REGISTRY_STYLES) {
+      items.push({
+        name: style,
+        type: 'registry:style',
+        description: `The ${style} style for Hanzo UI components.`,
+        files: []
+      });
+    }
+    
+    // Update registry.json
+    registrySchema.items = items;
+    
+    // Create output directory if it doesn't exist
+    const outputDir = path.dirname(OUTPUT_FILE);
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+    
+    // Write registry.json
+    fs.writeFileSync(OUTPUT_FILE, JSON.stringify(registrySchema, null, 2), 'utf8');
+    console.log(`Registry updated with ${items.length} items.`);
+    
+    // Create public/r directory if it doesn't exist
+    const publicRDir = path.join(PUBLIC_DIR, 'r');
+    if (!fs.existsSync(publicRDir)) {
+      fs.mkdirSync(publicRDir, { recursive: true });
+    }
+    
+    // Generate individual component JSON files
+    console.log('Generating individual component JSON files...');
+    for (const item of items) {
+      const componentFile = path.join(publicRDir, `${item.name}.json`);
+      
+      // Add content to files if they exist
+      if (item.files && item.files.length > 0) {
+        for (const file of item.files) {
+          const filePath = path.join(REGISTRY_DIR, file.path);
+          if (fs.existsSync(filePath)) {
+            file.content = fs.readFileSync(filePath, 'utf8');
+          }
+        }
+      }
+      
+      // Write component JSON file
+      fs.writeFileSync(componentFile, JSON.stringify(item, null, 2), 'utf8');
+    }
+    
+    console.log(`Generated ${items.length} component JSON files.`);
+    console.log('Registry update complete!');
+    
+  } catch (error) {
+    console.error('Error updating registry:', error);
+    process.exit(1);
+  }
+}
+
+// Run the update
+updateRegistry();

package/blocks/auth/index.ts

@@ -0,0 +1,6 @@
+export { LoginBasic } from './login-basic'
+export { LoginSocial } from './login-social'
+export { Login2FA } from './login-2fa'
+export { Signup } from './signup'
+export { PasswordReset } from './password-reset'
+export { MagicLink } from './magic-link'

package/blocks/auth/login-2fa.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import { Label } from '@hanzo/ui/primitives'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@hanzo/ui/primitives'
+
+interface Login2FAProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string, password: string, code?: string) => void
+  onResendCode?: () => void
+  onForgotPassword?: () => void
+  onSignUp?: () => void
+}
+
+export function Login2FA({
+  className,
+  onSubmit,
+  onResendCode,
+  onForgotPassword,
+  onSignUp,
+  ...props
+}: Login2FAProps) {
+  const [step, setStep] = useState<'credentials' | '2fa'>('credentials')
+  const [credentials, setCredentials] = useState({ email: '', password: '' })
+  const [otpValue, setOtpValue] = useState('')
+
+  const handleCredentialsSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    setCredentials({ email, password })
+    setStep('2fa')
+  }
+
+  const handleOTPSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    onSubmit?.(credentials.email, credentials.password, otpValue)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">
+            {step === 'credentials' ? 'Login' : 'Two-factor authentication'}
+          </CardTitle>
+          <CardDescription>
+            {step === 'credentials'
+              ? 'Enter your email and password to login'
+              : 'Enter the 6-digit code from your authenticator app'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {step === 'credentials' ? (
+            <form onSubmit={handleCredentialsSubmit}>
+              <div className="flex flex-col gap-6">
+                <div className="grid gap-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="m@example.com"
+                    required
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <div className="flex items-center">
+                    <Label htmlFor="password">Password</Label>
+                    {onForgotPassword && (
+                      <button
+                        type="button"
+                        onClick={onForgotPassword}
+                        className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                      >
+                        Forgot your password?
+                      </button>
+                    )}
+                  </div>
+                  <Input id="password" name="password" type="password" required />
+                </div>
+                <Button type="submit" className="w-full">
+                  Continue
+                </Button>
+              </div>
+              {onSignUp && (
+                <div className="mt-4 text-center text-sm">
+                  Don&apos;t have an account?{' '}
+                  <button
+                    type="button"
+                    onClick={onSignUp}
+                    className="underline underline-offset-4"
+                  >
+                    Sign up
+                  </button>
+                </div>
+              )}
+            </form>
+          ) : (
+            <form onSubmit={handleOTPSubmit}>
+              <div className="flex flex-col gap-6">
+                <div className="flex justify-center">
+                  <InputOTP
+                    maxLength={6}
+                    value={otpValue}
+                    onChange={(value) => setOtpValue(value)}
+                  >
+                    <InputOTPGroup>
+                      <InputOTPSlot index={0} />
+                      <InputOTPSlot index={1} />
+                      <InputOTPSlot index={2} />
+                    </InputOTPGroup>
+                    <InputOTPSeparator />
+                    <InputOTPGroup>
+                      <InputOTPSlot index={3} />
+                      <InputOTPSlot index={4} />
+                      <InputOTPSlot index={5} />
+                    </InputOTPGroup>
+                  </InputOTP>
+                </div>
+                <Button type="submit" className="w-full" disabled={otpValue.length !== 6}>
+                  Verify
+                </Button>
+                <div className="flex flex-col gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => setStep('credentials')}
+                  >
+                    Back to login
+                  </Button>
+                  {onResendCode && (
+                    <button
+                      type="button"
+                      onClick={onResendCode}
+                      className="text-center text-sm underline underline-offset-4"
+                    >
+                      Didn&apos;t receive a code? Resend
+                    </button>
+                  )}
+                </div>
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/blocks/auth/login-basic.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import { Label } from '@hanzo/ui/primitives'
+
+interface LoginBasicProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string, password: string) => void
+  onForgotPassword?: () => void
+  onSignUp?: () => void
+}
+
+export function LoginBasic({
+  className,
+  onSubmit,
+  onForgotPassword,
+  onSignUp,
+  ...props
+}: LoginBasicProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    onSubmit?.(email, password)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit}>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  {onForgotPassword && (
+                    <button
+                      type="button"
+                      onClick={onForgotPassword}
+                      className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                    >
+                      Forgot your password?
+                    </button>
+                  )}
+                </div>
+                <Input id="password" name="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+            </div>
+            {onSignUp && (
+              <div className="mt-4 text-center text-sm">
+                Don&apos;t have an account?{' '}
+                <button
+                  type="button"
+                  onClick={onSignUp}
+                  className="underline underline-offset-4"
+                >
+                  Sign up
+                </button>
+              </div>
+            )}
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}