one-north-cla 0.0.0

package/README.md

@@ -0,0 +1,144 @@
+# 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
+
+```bash
+# 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
+
+```bash
+# 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**:
+   ```bash
+   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.