open-index/open-npm huggingface dataset:
npm package: @padiworks/padiworks-ui-system
Description: A React project bootstrapped with **Vite**, styled using **TailwindCSS**, and documented with **Storybook**.   Unit and component tests are handled with **Vitest** + **Storybook Addon Vitest**.
Latest version: 0.0.6

# 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
```bash
git clone https://github.com/PadiWorks/Padiworks-ui-system.git
cd padiworks-system-ui
```

### 2. Install Dependencies
```bash
npm install
```
(or use `yarn install` / `pnpm install` if your team prefers)

---

## 🖥️ Development

### Run the App
```bash
npm run dev
```
This starts the Vite dev server. Open [http://localhost:5173](http://localhost:5173) in your browser.

### Run Storybook
```bash
npm run storybook
```
This launches Storybook on [http://localhost:6006](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
```bash
npm run test
```

### Run Tests with UI (optional)
```bash
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

---