Quantum Component Library

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

Installation

npm install quantum-component-library

Usage

Full Library Import (Default)

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

Modular Imports (Recommended)

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

Components

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

Hooks

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

Types

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

Authentication

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

GraphQL

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

Generated GraphQL Code

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

Utilities

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

Services

// 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

Available Modules

| 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

# 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