@phsa.tec/design-system-react 0.1.0 → 0.1.1

package/README.md

@@ -1,36 +1,282 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# 🎨 PHSA Design System
 
-## Getting Started
+A comprehensive React design system built with modern tools and best practices, featuring reusable components, consistent styling, and powerful layout solutions.
 
-First, run the development server:
+## ✨ Features
+
+- 🧩 **Modular Components** - Reusable React components built with TypeScript
+- 🎭 **Storybook Integration** - Interactive component documentation and testing
+- 🎨 **Tailwind CSS** - Utility-first CSS framework for rapid styling
+- 🔧 **Form Management** - Integrated with React Hook Form for robust form handling
+- 📊 **Data Tables** - Advanced table components with TanStack Table
+- 🌙 **Theme Support** - Dark/light mode with next-themes
+- 🔍 **Type Safety** - Full TypeScript support
+- 🧪 **Testing Ready** - Jest and Testing Library setup
+- 📱 **Responsive Design** - Mobile-first approach
+
+## 🛠️ Tech Stack
+
+- **Framework**: Next.js 15
+- **UI Library**: Radix UI primitives
+- **Styling**: Tailwind CSS
+- **State Management**: Zustand
+- **Forms**: React Hook Form + Zod validation
+- **Data Fetching**: TanStack Query
+- **Icons**: Lucide React
+- **Documentation**: Storybook
+- **Testing**: Jest + Testing Library
+- **Language**: TypeScript
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+Make sure you have Node.js installed on your machine (version 18 or higher recommended).
+
+### Installation
+
+#### Option 1: Install from npm (Recommended)
+
+Install the published package directly from npm:
 
 ```bash
-npm run dev
-# or
-yarn dev
+npm install @phsa.tec/design-system-react
 # or
-pnpm dev
+yarn add @phsa.tec/design-system-react
 # or
-bun dev
+pnpm add @phsa.tec/design-system-react
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+View the package on npm: [https://www.npmjs.com/package/@phsa.tec/design-system-react](https://www.npmjs.com/package/@phsa.tec/design-system-react)
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+#### Option 2: Development Setup
+
+For contributing or local development:
+
+1. **Clone the repository**
+
+   ```bash
+   git clone <repository-url>
+   cd phsa-design-system
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   # or
+   yarn install
+   # or
+   pnpm install
+   ```
+
+### 🏃 Running the Project
+
+#### Development Server
+
+Start the Next.js development server:
+
+```bash
+npm run dev
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Open [http://localhost:3000](http://localhost:3000) to view the application.
 
-## Learn More
+#### Storybook
+
+Launch Storybook for component development and documentation:
+
+```bash
+npm run storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) to view the component library.
+
+#### Build for Production
+
+```bash
+npm run build
+npm run start
+```
+
+#### Testing
+
+```bash
+npm run test
+```
+
+#### Linting
+
+```bash
+npm run lint
+```
+
+## 📁 Project Structure
+
+```
+src/
+├── components/          # Reusable components
+│   ├── ui/             # Base UI components
+│   ├── layout/         # Layout components (Crud, etc.)
+│   └── dataInput/      # Form input components
+├── hooks/              # Custom React hooks
+├── lib/                # Utility functions
+├── styles/             # Global styles
+└── types/              # TypeScript type definitions
+```
+
+This README provides a comprehensive overview of your design system project, including:
+
+1. **Clear project description** with emoji icons for visual appeal
+2. **Feature highlights** showcasing the main capabilities
+3. **Complete tech stack** listing all major dependencies
+4. **Step-by-step setup instructions** for new developers
+5. **Project structure** to help navigate the codebase
+6. **Component documentation** explaining key features
+7. **Theming and configuration** guides
+8. **Contributing guidelines** for team collaboration
+9. **Scripts reference** for quick command lookup
+10. **Professional formatting** with proper sections and styling
+
+The README is written in English as requested and provides everything a developer would need to understand, set up, and contribute to your design system project.
+
+## 🧩 Key Components
+
+### Layout Components
+
+- **CrudLayout** - Complete CRUD operations layout with forms, tables, and modals
+- **DataTable** - Advanced table component with sorting, filtering, and pagination
+
+### Form Components
+
+- **Input** - Flexible input component with validation
+- **Button** - Customizable button with variants
+- **Select** - Dropdown selection component
+- **Form controls** - Checkbox, Switch, and more
+
+### UI Components
+
+- **Dialog/Modal** - Accessible modal components
+- **Toast** - Notification system
+- **Avatar** - User avatar component
+- **Tooltip** - Contextual help tooltips
+
+## 📚 Documentation
+
+Visit our Storybook documentation to explore all available components:
+
+```bash
+npm run storybook
+```
+
+Each component includes:
+
+- 📖 **Usage examples**
+- ⚙️ **Props documentation**
+- 🎮 **Interactive controls**
+- 💡 **Best practices**
+
+## 🎨 Theming
+
+The design system supports customizable themes through Tailwind CSS and next-themes:
+
+```tsx
+import { ThemeProvider } from "next-themes";
+
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system">
+      {/* Your app */}
+    </ThemeProvider>
+  );
+}
+```
+
+## 🔧 Configuration
+
+### Tailwind CSS
+
+Customize the design tokens in `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Your custom colors
+      },
+      spacing: {
+        // Your custom spacing
+      },
+    },
+  },
+};
+```
+
+### Component Variants
+
+Components use `class-variance-authority` for consistent variant management:
+
+```tsx
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary text-secondary-foreground",
+      },
+    },
+  }
+);
+```
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Guidelines
+
+- Follow TypeScript best practices
+- Add Storybook stories for new components
+- Include tests for complex logic
+- Follow the existing code style
+- Update documentation as needed
+
+## 📝 Scripts Reference
+
+| Command                   | Description              |
+| ------------------------- | ------------------------ |
+| `npm run dev`             | Start development server |
+| `npm run build`           | Build for production     |
+| `npm run start`           | Start production server  |
+| `npm run lint`            | Run ESLint               |
+| `npm run storybook`       | Start Storybook          |
+| `npm run build-storybook` | Build Storybook          |
+| `npm run test`            | Run tests                |
+
+## 📦 Publishing
+
+This package is configured for publishing to npm:
+
+```bash
+npm publish
+```
 
-To learn more about Next.js, take a look at the following resources:
+## 📄 License
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## 🙏 Acknowledgments
 
-## Deploy on Vercel
+- [Radix UI](https://radix-ui.com/) for accessible component primitives
+- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework
+- [Shadcn/ui](https://ui.shadcn.com/) for component inspiration
+- [Storybook](https://storybook.js.org/) for component documentation
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+---
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Built with ❤️ by the PHSA team

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phsa.tec/design-system-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "main": "./src/index.ts",
   "scripts": {