tcce-design-system 0.1.1

package/README.md

@@ -0,0 +1,204 @@
+# TCCE Design System
+
+Library repository for the TCCE CRM Design System. This package provides reusable UI components built with React, TypeScript, and Tailwind CSS to ensure consistency across all CRM frontend applications.
+
+## 📋 Prerequisites
+
+Before getting started, ensure you have the following installed on your system:
+
+- **Node.js** (v18 or higher) - [Download here](https://nodejs.org/)
+- **pnpm** (v8 or higher) - [Installation guide](https://pnpm.io/installation)
+- **Docker** (v20 or higher) - [Download here](https://www.docker.com/get-started)
+- **Git** - [Download here](https://git-scm.com/)
+
+## 🚀 Quick Start
+
+### Option 1: Using Docker (Recommended)
+
+The easiest way to get started is using Docker, which ensures a consistent environment across all systems.
+
+#### 1. Clone the repository
+```bash
+git clone <repository-url>
+cd tcce-design-system
+```
+
+#### 2. Build the Docker image
+```bash
+# Build the image
+docker build -t tcce-design-system .
+
+# Or use the npm script
+npm run docker:build
+```
+
+#### 3. Run the container
+```bash
+# Run with volume mounting for development
+docker run -it --rm -p 6006:6006 --name tcce-design-system \
+  -v $(pwd):/usr/src/app \
+  -v /usr/src/app/node_modules \
+  tcce-design-system
+
+# Or use the npm script
+npm run docker:run
+```
+
+#### 4. Access the application
+- **Storybook**: Open [http://localhost:6006](http://localhost:6006) in your browser
+- The container will automatically start Storybook in development mode
+
+### Option 2: Local Development
+
+If you prefer to run the project locally without Docker:
+
+#### 1. Install dependencies
+```bash
+# Install pnpm globally if not already installed
+npm install -g pnpm
+
+# Install project dependencies
+pnpm install
+```
+
+#### 2. Start development server
+```bash
+# Start Storybook for component development
+pnpm run storybook
+
+# Or start Vite development server
+pnpm run dev
+```
+
+#### 3. Access the application
+- **Storybook**: [http://localhost:6006](http://localhost:6006)
+- **Vite Dev Server**: [http://localhost:5173](http://localhost:5173)
+
+## 🛠️ Development
+
+### Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `pnpm run dev` | Start Vite development server |
+| `pnpm run build` | Build the library for production |
+| `pnpm run storybook` | Start Storybook development server |
+| `pnpm run build-storybook` | Build static Storybook for deployment |
+| `pnpm run preview` | Preview the production build |
+| `pnpm run lint` | Run ESLint |
+| `pnpm run lint:fix` | Fix ESLint issues automatically |
+| `pnpm run format` | Format code with Prettier |
+| `pnpm run docker:build` | Build Docker image |
+| `pnpm run docker:run` | Run Docker container |
+
+### Project Structure
+
+```
+tcce-design-system/
+├── src/
+│   ├── components/          # Reusable UI components
+│   ├── types/              # TypeScript type definitions
+│   ├── main.ts             # Library entry point
+│   └── globals.css         # Global styles
+├── .storybook/             # Storybook configuration
+├── dist/                   # Built library output
+├── dockerfile              # Docker configuration
+├── package.json            # Dependencies and scripts
+└── vite.config.ts          # Vite build configuration
+```
+
+### Adding New Components
+
+1. Create your component in `src/components/`
+2. Add corresponding Storybook stories (`.stories.tsx` files)
+3. Export the component from `src/main.ts`
+4. Test your component in Storybook
+
+### Code Quality
+
+This project uses:
+- **ESLint** for code linting
+- **Prettier** for code formatting
+- **TypeScript** for type safety
+- **Tailwind CSS** for styling
+
+Run `pnpm run lint:fix` and `pnpm run format` before committing changes.
+
+## 🐳 Docker Configuration
+
+### Dockerfile Details
+
+The project includes a multi-stage Dockerfile optimized for production:
+
+- **Base Image**: Node.js 24 Alpine (lightweight)
+- **Package Manager**: pnpm (faster than npm/yarn)
+- **Port**: 6006 (Storybook default)
+- **Build Process**: Automated Storybook build
+
+### Docker Commands Reference
+
+```bash
+# Build image
+docker build -t tcce-design-system .
+
+# Run container (development with volume mounting)
+docker run -it --rm -p 6006:6006 --name tcce-design-system \
+  -v $(pwd):/usr/src/app \
+  -v /usr/src/app/node_modules \
+  tcce-design-system
+
+# Run container (production)
+docker run -d -p 6006:6006 --name tcce-design-system tcce-design-system
+
+# Stop and remove container
+docker stop tcce-design-system && docker rm tcce-design-system
+
+# View container logs
+docker logs tcce-design-system
+
+# Execute commands in running container
+docker exec -it tcce-design-system sh
+```
+
+## 📦 Building for Production
+
+### Library Build
+```bash
+# Build the library
+pnpm run build
+
+# The built files will be in the `dist/` directory
+```
+
+### Storybook Build
+```bash
+# Build static Storybook
+pnpm run build-storybook
+
+# The static files will be in the `storybook-static/` directory
+```
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 👥 Team
+
+- **Author**: BizAppsTotal <bizapps@tcce.biz>
+- **Version**: 0.1.4
+
+## 🆘 Troubleshooting
+
+### Common Issues
+
+**Docker build fails:**
+- Ensure Docker is running
+- Check if port 6006 is available
+- Try rebuilding without cache: `docker build --no-cache -t tcce-design-system .`
+
+**Storybook won't start:**
+- Clear node_modules and reinstall: `rm -rf node_modules && pnpm install`
+- Check if port 6006 is already in use
+
+**Build errors:**
+- Ensure all dependencies are installed: `pnpm install`
+- Check TypeScript errors: `pnpm run build`