OneNorthCLA - Component Library Architecture

A modern React component UI library built with TypeScript, Vite, and TailwindCSS.

🤝 Contributing

The following configurations have been carefully established to ensure code quality, consistency, and reliable automated checks across this repository.

Do not modify these configurations without explicit agreement from the team lead or repository owner:

• Husky hooks (.husky/)
• ESLint configuration (eslint.config.js)
• Prettier rules (.prettierrc / package.json)
• TypeScript configuration (tsconfig*.json)

Unauthorized changes may break automated checks, introduce inconsistencies, or disrupt development workflows.

1. Follow the established component patterns
2. Add Storybook stories for new components
3. Ensure TypeScript compilation passes
4. Update documentation as needed within the docs/ directory

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build for production
npm run build

📁 Project Structure

OneNorthCLA/
├── src/
│   ├── components/   
│   │   ├── composites/ 
│   │   │   ├── ContentCarouselMultiple/
│   │   │   └──ContentPrimaryFeatureDetail/
│   │   └── foundations/  
│   │       ├── BackgroundVideo/
│   │       ├── Button/
│   │       ├── ButtonSocial/
│   │       ├── PageMargins/
│   │       ├── PlayButton/
│   │       ├── Share/
│   │       └── TextCta/
│   ├── lib/                 # Utilities and helpers
│   │   ├── hooks/
│   │   └── utils/
│   └── assets/              # Static assets
└── public/                  # Public assets

🏗️ Architecture Overview

Component Separation

This project follows a clean architecture pattern that separates concerns:

• Base Components (src/components/): Pure React components with no Sitecore dependencies
• Utilities (src/lib/): Shared utilities, hooks, and the component factory

Key Design Principles

1. Separation of Concerns: Base components are framework-agnostic
2. Composition over Inheritance: Components are designed to be composable
3. Type Safety: Full TypeScript support throughout the codebase
4. Storybook Integration: Comprehensive documentation and testing via Storybook

🧩 Available Components

🛠️ Development

Prerequisites

• Node.js 18+
• Any package manager
• Do not commit lockfile

Scripts

# Development
npm run dev              # Start Vite dev server
npm run storybook        # Start Storybook

# Building
npm run build            # Build for production
npm run build-storybook  # Build Storybook

# Quality
npm run lint             # Run ESLint
npm run preview          # Preview production build
npm run type-check       # Run TSC

Adding New Components

1. Create Base Component:

   mkdir src/components/NewComponent
   touch src/components/NewComponent/index.ts
   touch src/components/NewComponent/NewComponent.tsx
   touch src/components/NewComponent/NewComponent.stories.tsx

2. Update Exports:

   • Add to src/components/index.ts

📚 Documentation

• Storybook: Run npm run storybook for interactive component documentation
• TypeScript: Full type definitions for all components

🔧 Configuration

Vite Configuration

• React with Fast Refresh
• TypeScript support
• SVG imports as React components
• Tailwind CSS integration

ESLint Configuration

• TypeScript-aware linting
• React-specific rules
• Storybook integration

Storybook Configuration

• Component documentation
• Interactive examples
• Preview example usage as code

📄 License

This project is private and proprietary to OneNorth.