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
• pnpm (v8 or higher) - Installation guide
• Docker (v20 or higher) - Download here
• Git - Download here

🚀 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

git clone <repository-url>
cd tcce-design-system

2. Build the Docker image

# Build the image
docker build -t tcce-design-system .

# Or use the npm script
npm run docker:build

3. Run the container

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

# Install pnpm globally if not already installed
npm install -g pnpm

# Install project dependencies
pnpm install

2. Start development server

# Start Storybook for component development
pnpm run storybook

# Or start Vite development server
pnpm run dev

3. Access the application

• Storybook: http://localhost:6006
• Vite Dev Server: 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

# 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

# Build the library
pnpm run build

# The built files will be in the `dist/` directory

Storybook Build

# 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 file for details.

👥 Team

• Author: BizAppsTotal [email protected]
• 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