Quantum Component Library

A modular React component library built with TypeScript and Vite, featuring code splitting for optimal bundle sizes.

Installation

``bash
npm install quantum-component-library
`

Usage

$3

`typescript
// Import everything (not recommended for production)
import * from 'quantum-component-library';
`

$3

The library is split into several modules for optimal tree-shaking and bundle sizes:

#### Components
`typescript
// Import only UI components
import { UpsertActivityForm, ParameterEditList } from 'quantum-component-library/components';
`

#### Hooks
`typescript
// Import only custom hooks
import { useGraphqlClient, useJointsForLimbIds } from 'quantum-component-library/hooks';
`

#### Types
`typescript
// Import only type definitions
import type { Activity, Analysis, Human } from 'quantum-component-library/types';
`

#### Authentication
`typescript
// Import only auth utilities
import { useAuthContext, useIsAuthenticated } from 'quantum-component-library/auth';
`

#### GraphQL
`typescript
// Import only GraphQL fragments and operations
import { ActivityFragment, SessionQueries } from 'quantum-component-library/graphql';
`

#### Generated GraphQL Code
`typescript
// Import only generated GraphQL types and utilities
import { FragmentMasking, gql } from 'quantum-component-library/generated';
`

#### Utilities
`typescript
// Import only utility functions
import { convertUnits, memoizeWithExpiry } from 'quantum-component-library/utils';
`

#### Services
`typescript
// Import only service functions
import { humanService } from 'quantum-component-library/services';
`

Code Splitting Benefits

- Reduced Bundle Size: Import only what you need
- Better Tree Shaking: Webpack and other bundlers can eliminate unused code more effectively
- Faster Loading: Smaller initial bundles load faster
- Better Caching: Changes to one module don't invalidate others

Build Configuration

This library uses Vite with multiple entry points and manual chunk splitting:

- Multiple Entry Points: Each module has its own entry point for granular imports
- Manual Chunk Splitting: Vendor dependencies are split into logical chunks (UI, GraphQL, React, etc.)
- Automatic Type Generation: TypeScript definitions are generated for all entry points

$3

| Module | Entry Point | Description |
|--------|-------------|-------------|
| components | src/components/index.ts | UI components |
| hooks | src/lib/hooks/index.ts | Custom React hooks |
| types | src/lib/types/index.ts | TypeScript type definitions |
| auth | src/lib/auth/index.ts | Authentication utilities |
| graphql | src/graphql/index.ts | GraphQL fragments and operations |
| generated | src/generated/index.ts | Generated GraphQL code |
| utils | src/lib/utils/index.ts | Utility functions |
| services | src/lib/services/index.ts | Service functions |

Development

`bash


Install dependencies

npm install

Start development server

npm run dev

Build the library

npm run build

Build for specific environments

npm run build:admin-prod
npm run build:client-qa
``