TODO: UPDATE THIS AI-GENERATED README

SwiftSell React CPQ

A React-based Configure, Price, Quote (CPQ) solution with Threedium 3D visualization integration.

Overview

SwiftSell React CPQ is a modern TypeScript/React application designed to provide an interactive configure-price-quote experience with real-time 3D product visualization.

Features

• Dynamic Configuration Forms: Build flexible product configuration interfaces
• Real-time Pricing: Automatic price calculation based on configurations
• 3D Visualization: Integrated Threedium 3D model support
• Type-Safe: Full TypeScript support for robust development
• Context API: Centralized state management for CPQ operations

Project Structure

src/
├── components/          # React components
│   ├── ConfigurationForm.tsx
│   ├── fields/         # Form field components
│   │   ├── SelectField.tsx
│   │   └── TextField.tsx
│   └── index.ts
├── context/            # State management
│   ├── SwiftSellCPQContext.ts
│   ├── SwiftSellCPQProvider.tsx
│   └── useSwiftSellCPQ.ts
├── threedium/          # 3D visualization integration
│   ├── ThreediumAdapter.ts
│   └── useThreediumSync.ts
├── types/              # TypeScript type definitions
│   ├── cpq.ts
│   ├── ui.ts
│   └── index.ts
└── index.ts

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

npm install

Development

npm run dev

Build

npm run build

Usage

Basic Setup

Import the provider in your application root:

import { SwiftSellCPQProvider } from './context/SwiftSellCPQProvider';

function App() {
  return (
    <SwiftSellCPQProvider>
      {/* Your app components */}
    </SwiftSellCPQProvider>
  );
}

Using the CPQ Context

import { useSwiftSellCPQ } from './context/useSwiftSellCPQ';

function MyComponent() {
  const cpq = useSwiftSellCPQ();
  // Use CPQ state and functions
}

Technologies

• React - UI framework
• TypeScript - Static typing
• Context API - State management
• Threedium - 3D visualization

Configuration

See tsconfig.json and tsdown.config.ts for build and TypeScript configuration options.

Contributing

Please follow the existing code structure and TypeScript conventions when contributing.

License

[Add your license information here]

Support

For issues and questions, please open an issue in the repository.