DinoCollab Shared

DinoCollab shared utilities and components for React applications.

Key Features

• Tree-shakable modules: Import only what you need to avoid bundle bloat
• TypeScript support: Full type definitions with excellent IDE support
• MUI compatibility: Built with Material-UI v5 components and theming
• Module resolution compatibility: Works with both old and new TypeScript moduleResolution settings

Installation

npm install dinocollab-shared

Usage

Import specific modules (recommended for tree-shaking):

// Layout components - works with all moduleResolution settings
import { AppHeader, AppFooter } from 'dinocollab-shared/layout-global'

// This will only bundle the layout-global module, not the entire library

Import from main entry (only for shared utilities):

// Main entry point (currently minimal to avoid bundle bloat)
import { /* shared utilities */ } from 'dinocollab-shared'

Compatibility

This package supports both legacy and modern TypeScript configurations:

• ✅ moduleResolution: "node" (legacy)
• ✅ moduleResolution: "node16"
• ✅ moduleResolution: "nodenext"
• ✅ moduleResolution: "bundler"

No configuration changes needed in your project!

Architecture

• Modular design: Each feature is a separate submodule
• Build optimization: Uses Rollup for optimal bundling and tree-shaking
• TypeScript configuration: Proper declaration files and source maps
• Peer dependencies: Avoids version conflicts with consuming applications

Development

# Build the library
npm run build

# The build outputs:
# - dist/index.js (main entry)
# - dist/layout-global/ (submodule directory)
# - dist/layout-global.js (legacy proxy for moduleResolution compatibility)
# - dist/layout-global.d.ts (type declarations proxy)
# - dist/types/ (TypeScript declarations)

Module Structure

src/
├── index.ts              # Main entry (minimal exports)
├── layout-global/        # Layout components module
│   ├── index.ts         # Module exports
│   ├── app-header.tsx   # Header component
│   ├── app-footer.tsx   # Footer component
│   └── ...
└── components/          # Shared components
    └── ...