Padiworks System UI

A React project bootstrapped with Vite, styled using TailwindCSS, and documented with Storybook.
Unit and component tests are handled with Vitest + Storybook Addon Vitest.

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/PadiWorks/Padiworks-ui-system.git
cd padiworks-system-ui

2. Install Dependencies

npm install

(or use yarn install / pnpm install if your team prefers)

🖥️ Development

Run the App

npm run dev

This starts the Vite dev server. Open http://localhost:5173 in your browser.

Run Storybook

npm run storybook

This launches Storybook on http://localhost:6006, where you can explore components in isolation.

We organize stories under src/stories/:

src/stories/
  button/
    Button.tsx
    Button.stories.ts

🧪 Testing

We use Vitest with Storybook’s Vitest addon for integration.

Run Tests

npm run test

Run Tests with UI (optional)

npm run test:ui

📂 Project Structure

project/
  ├─ .storybook/          # Storybook config
  ├─ public/              # Static assets
  ├─ src/
  │   ├─ components/      # Reusable React components
  │   ├─ stories/         # Storybook stories
  │   │   └─ button/
  │   │       ├─ Button.tsx
  │   │       └─ Button.stories.ts
  │   └─ App.tsx          # Main app entry
  └─ vite.config.ts       # Vite config

📖 Useful Commands

| Command | Description | |---------------------------|-------------------------------------------| | npm run dev | Start the Vite development server | | npm run build | Build the project for production | | npm run preview | Preview the production build locally | | npm run storybook | Start Storybook for component development | | npm run build-storybook | Build a static Storybook site | | npm run test | Run Vitest test suite |

🤝 Contributing

• Keep components inside src/components/
• Write stories for each component in src/stories/
• Use consistent naming: ComponentName.stories.ts
• Run npm run storybook to preview your stories before pushing

🛠️ Tech Stack

• React 18 + Vite (fast dev/build tool)
• TailwindCSS (utility-first styling)
• Storybook (UI component explorer)
• Vitest (unit + integration testing)
• TypeScript (type safety)

📌 Notes

• Make sure Node.js >= 18 is installed
• Storybook stories must be placed under src/stories/ with the .stories.tsx or .stories.ts suffix
• If you encounter issues with Node imports (path, url), ensure @types/node is installed