import { Toolbox } from '@repo/view-builder/toolbox/Toolbox';
import { SchemaProvider } from '@repo/view-builder/hooks/useSchemaState';

function MyToolbox() {
  return (
    <SchemaProvider>
      <Toolbox />
    </SchemaProvider>
  );
}

<Toolbox
  theme="dark"
  showDescriptions={true}
  categories={['basic', 'advanced', 'layout']}
  searchEnabled={true}
/>

import { Toolbox } from '@repo/view-builder/toolbox/Toolbox';

const customFieldTypes = [
  {
    type: 'signature',
    label: 'Signature Field',
    category: 'advanced',
    icon: 'pen',
    description: 'Field for capturing signatures',
    defaultProps: {
      required: false,
      width: 300,
      height: 150
    }
  },
  {
    type: 'rating',
    label: 'Rating Field',
    category: 'advanced',
    icon: 'star',
    description: 'Field for capturing ratings',
    defaultProps: {
      required: false,
      maxRating: 5
    }
  }
];

function CustomToolbox() {
  return <Toolbox customFieldTypes={customFieldTypes} />;
}

import { DragDropCanvas } from '@repo/view-builder/canvas/DragDropCanvas';
import { Toolbox } from '@repo/view-builder/toolbox/Toolbox';
import { SchemaProvider } from '@repo/view-builder/hooks/useSchemaState';

function BuilderInterface() {
  return (
    <SchemaProvider>
      <div className="grid grid-cols-4 gap-4">
        <div className="col-span-1">
          <Toolbox />
        </div>
        <div className="col-span-3">
          <DragDropCanvas />
        </div>
      </div>
    </SchemaProvider>
  );
}

import { Toolbox } from '@repo/view-builder/toolbox/Toolbox';

const fieldTemplates = {
  emailField: {
    type: 'string',
    label: 'Email Address',
    required: true,
    validation: {
      pattern: '^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$',
      message: 'Please enter a valid email address'
    }
  },
  phoneField: {
    type: 'string',
    label: 'Phone Number',
    required: true,
    validation: {
      pattern: '^\\+?[0-9]{10,15}$',
      message: 'Please enter a valid phone number'
    }
  }
};

function TemplatedToolbox() {
  return <Toolbox fieldTemplates={fieldTemplates} />;
}

import { Toolbox } from '@repo/view-builder/toolbox/Toolbox';

const customCategories = [
  {
    id: 'personal',
    label: 'Personal Information',
    icon: 'user',
    fields: ['name', 'email', 'phone', 'address']
  },
  {
    id: 'payment',
    label: 'Payment Information',
    icon: 'credit-card',
    fields: ['cardNumber', 'expiryDate', 'cvv', 'billingAddress']
  }
];

function CategorizedToolbox() {
  return <Toolbox categories={customCategories} />;
}