@hanzo/ui 4.8.5 → 4.9.0

package/bin/registry-mcp.js

@@ -1,100 +0,0 @@
-#!/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

@@ -1,22 +0,0 @@
-#!/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

@@ -1,52 +0,0 @@
-#!/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

@@ -1,196 +0,0 @@
-#!/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

@@ -1,6 +0,0 @@
-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

@@ -1,165 +0,0 @@
-'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

@@ -1,94 +0,0 @@
-'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>
-  )
-}