ofd-shared-ui

A service like Uber Eats with restaurant listings, menus, order tracking, and delivery logistics.

🧱 Atomic UI Library

A scalable, atomic design-based component library built with React, Material UI, and custom design tokens.

✨ Features

• ⚛️ Atomic Design (Atoms, Molecules, Organisms)
• 🎨 MUI + Custom Design Tokens (Color, Typography, Spacing)
• 📚 Storybook integration for UI preview & documentation
• 🧪 Unit Testing with Jest & React Testing Library
• ⚙️ Custom Vite/Webpack Config
• 📦 Build-ready for npm publish or internal usage

📁 Folder Structure

src/ ├── components/ # Atomic components (Button, Input, etc.) │ └── Button/ │ ├── Button.tsx │ ├── Button.test.tsx │ ├── Button.stories.tsx │ └── index.ts ├── tokens/ # Design tokens (color, spacing, etc.) │ └── colors.ts ├── theme/ # MUI Theme creation from tokens │ └── index.ts └── index.ts # Barrel export for all components

🚀 Getting Started

1. Install Dependencies

pnpm install
# or
npm install
# or
yarn install


2. Run Storybook
pnpm storybook

3. Run Dev Server (for testing isolated components)
pnpm dev

4. Run Tests
pnpm test

🧪 Testing
Unit tests powered by Jest and React Testing Library

All components must include basic test coverage

Use jest --coverage to view test coverage

🧩 Storybook
Storybook is used to document and test components in isolation.

pnpm storybook

Features:
Theme integration with MUI

Live interactive props

Custom color tokens visualized

🎨 Theming
Design tokens are defined in src/tokens/ and consumed via MUI’s createTheme.

// Example: tokens/colors.ts
export const colors = {
  primary: { main: '#1976d2', contrastText: '#fff' },
  secondary: { main: '#dc004e' },
};

🧱 Creating Components
Use atomic structure:

src/components/AtomName/
├── AtomName.tsx
├── AtomName.stories.tsx
├── AtomName.test.tsx
└── index.ts

Each component should:

Use MUI as a base

Support theming (no inline styles unless necessary)

Be unit tested

Have a Storybook story

📦 Build for Distribution

pnpm build

Bundle output is generated using vite build and configured for reuse.

🧾 License
MIT

🤝 Contributing
Contributions, issues and feature requests are welcome!
Please create an issue or pull request.

🛠 Tech Stack
React

Material UI

Storybook

Jest

Vite


---

Would you like:

- A **CLI script to scaffold new atomic components**?
- A **GitHub Actions CI/CD pipeline** for lint + test + publish?

Let me know and I’ll add them too.