@phsa.tec/design-system-react 0.1.10 → 0.3.0

package/README.md

@@ -1,187 +1,245 @@
-# 🎨 PHSA Design System React
+# PHSA Design System React
 
-A modern React component library built with TypeScript, Tailwind CSS, and Radix UI.
+A modern, **fully isolated** React component library built with TypeScript, Tailwind CSS, and Radix UI.
 
-## 📚 Documentation
+## Features
 
-🌐 **[View Live Documentation](https://henriques4nti4go.github.io/phsa-design-system/)**
+- **Zero Conflicts** - Fully isolated CSS, won't interfere with your project's styles
+- **Customizable** - Via CSS Variables or Tailwind Preset
+- **Accessible** - Built with Radix UI primitives
+- **Dark Mode** - Native dark theme support
+- **TypeScript** - Full type support
 
-## 🚀 Installation
+## Documentation
+
+[View Full Documentation](https://henriques4nti4go.github.io/phsa-design-system/)
+
+## Installation
 
 ```bash
 npm install @phsa.tec/design-system-react
+# or
+yarn add @phsa.tec/design-system-react
+# or
+pnpm add @phsa.tec/design-system-react
 ```
 
-## ⚙️ Setup
+## Basic Usage
 
-### 1. Import Styles
+```tsx
+// 1. Import CSS (required)
+import "@phsa.tec/design-system-react/styles.css";
 
-Add this import to your main CSS file or app entry point:
+// 2. Import components
+import { DesignSystemProvider, Button, Card } from "@phsa.tec/design-system-react";
 
-```typescript
-import "@phsa.tec/design-system-react/styles";
+function App() {
+  return (
+    <DesignSystemProvider>
+      <Card>
+        <Button>Click me</Button>
+      </Card>
+    </DesignSystemProvider>
+  );
+}
 ```
 
-### 2. Configure Tailwind CSS
+## Customization
 
-Update your `tailwind.config.js`:
+### Option 1: CSS Variables (Recommended)
 
-```javascript
+Override CSS variables in your stylesheet:
+
+```css
+/* globals.css */
+:root {
+  /* Primary colors */
+  --primary: 220 90% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+
+  /* Feedback colors */
+  --destructive: 0 84% 60%;
+  --success: 142 76% 36%;
+  --warning: 38 92% 50%;
+
+  /* Neutral colors */
+  --background: 0 0% 100%;
+  --foreground: 222 84% 5%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --border: 214 32% 91%;
+
+  /* Other */
+  --radius: 0.5rem;
+  --font-family: "Inter", sans-serif;
+}
+
+/* Dark mode */
+.dark {
+  --background: 222 84% 5%;
+  --foreground: 210 40% 98%;
+  /* ... other variables */
+}
+```
+
+### Option 2: Tailwind Preset (Advanced)
+
+If your project uses Tailwind CSS, you can extend with our preset:
+
+```js
+// tailwind.config.js
 module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@phsa.tec/design-system-react/**/*.{js,ts,jsx,tsx}",
-  ],
+  presets: [require("@phsa.tec/design-system-react/tailwind-preset")],
   theme: {
     extend: {
+      // Your customizations
       colors: {
-        border: "hsl(var(--border))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
+          DEFAULT: "#your-color",
         },
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
 };
 ```
 
-### 3. Add CSS Variables
-
-Add these variables to your global CSS file:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 150 6% 25%;
-    --primary: 145 63% 42%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 150 10% 96%;
-    --secondary-foreground: 150 6% 25%;
-    --muted: 150 10% 96%;
-    --muted-foreground: 150 6% 45%;
-    --accent: 150 10% 96%;
-    --accent-foreground: 150 6% 25%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --success: 145 63% 42%;
-    --success-foreground: 0 0% 98%;
-    --border: 150 12% 88%;
-    --input: 150 12% 88%;
-    --ring: 145 63% 42%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 150 15% 4%;
-    --foreground: 150 10% 95%;
-    --primary: 145 63% 48%;
-    --primary-foreground: 150 15% 8%;
-    --secondary: 150 12% 12%;
-    --secondary-foreground: 150 10% 95%;
-    --muted: 150 12% 12%;
-    --muted-foreground: 150 8% 60%;
-    --accent: 150 12% 12%;
-    --accent-foreground: 150 10% 95%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 150 12% 18%;
-    --input: 150 12% 18%;
-    --ring: 145 63% 48%;
-  }
-}
+## Available CSS Variables
+
+### Colors
+
+| Variable | Description |
+|----------|-------------|
+| `--primary` | Primary color |
+| `--primary-foreground` | Text on primary color |
+| `--secondary` | Secondary color |
+| `--secondary-foreground` | Text on secondary color |
+| `--destructive` | Error/danger color |
+| `--success` | Success color |
+| `--warning` | Warning color |
+| `--muted` | Muted color |
+| `--muted-foreground` | Muted text |
+| `--background` | Page background |
+| `--foreground` | Main text |
+| `--border` | Border color |
+| `--input` | Input color |
+| `--ring` | Focus ring color |
+
+### Layout
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--radius` | Base border radius | `0.5rem` |
+| `--font-family` | Font family | `"Roboto"` |
+
+### Spacing
+
+| Variable | Description |
+|----------|-------------|
+| `--spacing-xs` | Extra small |
+| `--spacing-sm` | Small |
+| `--spacing-md` | Medium |
+| `--spacing-lg` | Large |
+| `--spacing-xl` | Extra large |
+
+## Available Components
+
+### Layout
+- `Card`, `CardHeader`, `CardContent`, `CardFooter`
+- `Sheet`, `SheetContent`, `SheetHeader`
+- `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
+- `Separator`
+
+### Forms
+- `Button`
+- `Input`
+- `Select`, `SelectTrigger`, `SelectContent`, `SelectItem`
+- `Checkbox`
+- `Switch`
+- `Label`
+
+### Data Display
+- `DataTable`
+- `Badge`
+- `Avatar`
+
+### Feedback
+- `Dialog`, `DialogContent`, `DialogHeader`
+- `AlertDialog`
+- `Toast`, `Toaster`
+- `Alert`
+- `Spinner`
+
+### Navigation
+- `DropdownMenu`
+- `Command`
+- `Popover`
+
+## Dark Mode
+
+Add the `dark` class to the root element:
+
+```tsx
+// With next-themes
+import { ThemeProvider } from "next-themes";
+import { DesignSystemProvider } from "@phsa.tec/design-system-react";
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system">
+      <DesignSystemProvider>
+        {/* Your app */}
+      </DesignSystemProvider>
+    </ThemeProvider>
+  );
 }
 ```
 
-## 🎯 Usage
+## Compatibility
+
+- Projects **without** Tailwind CSS
+- Projects **with** Tailwind CSS (no conflicts)
+- Next.js, Vite, Create React App
+- React 18+
+
+## Package Exports
 
 ```typescript
-import {
-  Button,
-  Input,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@phsa.tec/design-system-react";
+// Components
+import { Button, Card } from "@phsa.tec/design-system-react";
 
-function App() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Hello World</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          <Input placeholder="Enter text..." />
-          <Button>Click me</Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
+// CSS (required)
+import "@phsa.tec/design-system-react/styles.css";
+
+// Tailwind Preset (optional)
+// In tailwind.config.js:
+// presets: [require("@phsa.tec/design-system-react/tailwind-preset")]
 ```
 
-## 🧩 Available Components
+## Development
 
-- **Layout**: Card, Sheet, Tabs, Separator
-- **Forms**: Input, Button, Select, Checkbox, Switch, Form
-- **Data**: DataTable, Badge, Avatar
-- **Feedback**: Dialog, AlertDialog, Toast, Alert
-- **Navigation**: DropdownMenu, Command
+```bash
+# Install dependencies
+yarn install
 
-## 🌙 Dark Mode (Optional)
+# Storybook
+yarn storybook
 
-For theme switching support:
+# Build library
+yarn build:lib
 
-```bash
-npm install next-themes
+# Watch mode
+yarn build:lib:watch
+
+# Tests
+yarn test
 ```
 
-```typescript
-import { ThemeProvider } from "next-themes";
+## License
 
-function App() {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      {/* Your app */}
-    </ThemeProvider>
-  );
-}
-```
+MIT
+
+---
+
+Built by the PHSA team