shru-design-system 0.1.0 → 0.1.1

package/README.md

@@ -1,59 +1,184 @@
 # shru-design-system
 
-A minimal React component library.
+A React component library with atoms and molecules built on Radix UI and Tailwind CSS.
 
-## Setup
+## Installation
 
 ```bash
-npm install
-npm run build
+npm install shru-design-system
 ```
 
-## Development
+## Quick Setup
 
-The package is built using `tsup` and outputs both ESM and CJS formats.
+After installation, run the setup script to configure Tailwind CSS:
 
-## Testing
+```bash
+npx shru-design-system-init
+```
+
+Or it will run automatically after `npm install` (you can skip this step if it already ran).
+
+## Manual Setup
+
+If you prefer to set up manually or the automatic setup didn't work:
 
-A test app is available in the `test/` folder:
+### 1. Install Tailwind CSS
 
 ```bash
-cd test
-npm install
-npm run dev
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
 ```
 
-The test app installs the package locally using `file:..` and demonstrates the Button component.
-
-## Package Structure
+### 2. Configure Tailwind
+
+Update `tailwind.config.js`:
+
+```js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/shru-design-system/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        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))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
+```
 
+### 3. Add CSS Variables
+
+Create or update `src/index.css`:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  
+  * {
+    border-color: hsl(var(--border));
+  }
+  
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
 ```
-.
-├── src/
-│   ├── Button.tsx    # Button component
-│   └── index.ts      # Package exports
-├── dist/             # Built output (ESM + CJS)
-├── test/             # Test application
-└── package.json      # Package configuration
+
+### 4. Import CSS
+
+Import the CSS file in your entry point (e.g., `src/main.tsx`):
+
+```tsx
+import './index.css'
 ```
 
 ## Usage
 
 ```tsx
-import { Button } from 'shru-design-system'
+import { Button, Badge, Modal, Select } from 'shru-design-system'
 
 function App() {
   return (
-    <Button variant="primary" size="md">
-      Click me
-    </Button>
+    <div>
+      <Button variant="default">Click me</Button>
+      <Badge>New</Badge>
+      
+      <Modal>
+        <ModalTrigger asChild>
+          <Button>Open Modal</Button>
+        </ModalTrigger>
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>Hello</ModalTitle>
+            <ModalDescription>This is a modal</ModalDescription>
+          </ModalHeader>
+        </ModalContent>
+      </Modal>
+    </div>
   )
 }
 ```
 
-## Button Props
+## Components
+
+### Atoms
+- **Button** - Versatile button with multiple variants and sizes
+- **Badge** - Small status indicators
+
+### Molecules
+- **Modal** - Dialog component with overlay
+- **Select** - Dropdown select component
+
+## Peer Dependencies
+
+Make sure to install these peer dependencies:
+
+```bash
+npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select class-variance-authority clsx tailwind-merge lucide-react
+```
 
-- `variant`: "primary" | "secondary" | "outline" (default: "primary")
-- `size`: "sm" | "md" | "lg" (default: "md")
-- All standard HTML button attributes are supported
+## License
 
+MIT

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "shru-design-system",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A React component library with atoms and molecules built on Radix UI and Tailwind CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "scripts"
   ],
+  "bin": {
+    "shru-design-system-init": "./scripts/init.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,7 +21,8 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --dts --format esm,cjs",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "postinstall": "node scripts/init.js || true"
   },
   "peerDependencies": {
     "react": ">=18",

package/scripts/init.js

@@ -0,0 +1,305 @@
+#!/usr/bin/env node
+
+/**
+ * shru-design-system init script
+ * Sets up Tailwind CSS and required configuration
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function checkPackageInstalled(packageName) {
+  try {
+    require.resolve(packageName);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function installPackage(packageName, isDev = true) {
+  log(`Installing ${packageName}...`, 'blue');
+  try {
+    execSync(`npm install ${isDev ? '-D' : ''} ${packageName}`, { stdio: 'inherit' });
+    return true;
+  } catch (error) {
+    log(`Failed to install ${packageName}`, 'red');
+    return false;
+  }
+}
+
+function createTailwindConfig() {
+  const configPath = path.join(process.cwd(), 'tailwind.config.js');
+  
+  if (fs.existsSync(configPath)) {
+    log('tailwind.config.js already exists. Updating it...', 'yellow');
+    const existing = fs.readFileSync(configPath, 'utf8');
+    
+    // Check if our config is already there
+    if (existing.includes('shru-design-system')) {
+      log('Configuration already includes shru-design-system setup.', 'green');
+      return;
+    }
+    
+    // Try to merge (basic approach - user might need to do this manually)
+    log('Please manually merge the Tailwind config. See docs for details.', 'yellow');
+    return;
+  }
+  
+  const config = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/shru-design-system/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        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))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
+`;
+
+  fs.writeFileSync(configPath, config);
+  log('Created tailwind.config.js', 'green');
+}
+
+function createPostCSSConfig() {
+  const configPath = path.join(process.cwd(), 'postcss.config.js');
+  
+  if (fs.existsSync(configPath)) {
+    log('postcss.config.js already exists. Skipping...', 'yellow');
+    return;
+  }
+  
+  const config = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`;
+
+  fs.writeFileSync(configPath, config);
+  log('Created postcss.config.js', 'green');
+}
+
+function createCSSFile() {
+  const cssPath = path.join(process.cwd(), 'src', 'index.css');
+  const cssDir = path.dirname(cssPath);
+  
+  // Create src directory if it doesn't exist
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+  
+  if (fs.existsSync(cssPath)) {
+    log('src/index.css already exists. Checking if variables are defined...', 'yellow');
+    const existing = fs.readFileSync(cssPath, 'utf8');
+    
+    if (existing.includes('--primary')) {
+      log('CSS variables already defined.', 'green');
+      return;
+    }
+    
+    // Append to existing file
+    const cssVars = `
+
+/* shru-design-system CSS variables */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  
+  * {
+    border-color: hsl(var(--border));
+  }
+  
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+`;
+    fs.appendFileSync(cssPath, cssVars);
+    log('Added CSS variables to existing index.css', 'green');
+    return;
+  }
+  
+  const css = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  
+  * {
+    border-color: hsl(var(--border));
+  }
+  
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+`;
+
+  fs.writeFileSync(cssPath, css);
+  log('Created src/index.css', 'green');
+}
+
+function checkMainFile() {
+  const possiblePaths = [
+    path.join(process.cwd(), 'src', 'main.tsx'),
+    path.join(process.cwd(), 'src', 'main.ts'),
+    path.join(process.cwd(), 'src', 'index.tsx'),
+    path.join(process.cwd(), 'src', 'index.ts'),
+    path.join(process.cwd(), 'src', 'App.tsx'),
+  ];
+  
+  for (const filePath of possiblePaths) {
+    if (fs.existsSync(filePath)) {
+      const content = fs.readFileSync(filePath, 'utf8');
+      if (!content.includes("index.css") && !content.includes("'./index.css'")) {
+        log(`\n⚠️  Don't forget to import the CSS file in your entry point:`, 'yellow');
+        log(`   import './index.css'`, 'blue');
+        log(`   Add this to: ${filePath}\n`, 'yellow');
+      } else {
+        log('CSS import found in entry file.', 'green');
+      }
+      return;
+    }
+  }
+  
+  log('\n⚠️  Could not find entry file. Please manually import:', 'yellow');
+  log("   import './index.css'", 'blue');
+}
+
+// Main execution
+function main() {
+  log('\n🚀 Setting up shru-design-system...\n', 'blue');
+  
+  // Check and install Tailwind
+  if (!checkPackageInstalled('tailwindcss')) {
+    log('Tailwind CSS not found. Installing...', 'yellow');
+    if (!installPackage('tailwindcss@^3.4.0')) {
+      log('Failed to install Tailwind CSS. Please install manually.', 'red');
+      process.exit(1);
+    }
+  } else {
+    log('Tailwind CSS already installed.', 'green');
+  }
+  
+  // Check and install PostCSS
+  if (!checkPackageInstalled('postcss')) {
+    installPackage('postcss');
+  }
+  
+  // Check and install Autoprefixer
+  if (!checkPackageInstalled('autoprefixer')) {
+    installPackage('autoprefixer');
+  }
+  
+  // Create configuration files
+  createTailwindConfig();
+  createPostCSSConfig();
+  createCSSFile();
+  checkMainFile();
+  
+  log('\n✅ Setup complete!', 'green');
+  log('\nNext steps:', 'blue');
+  log('1. Make sure to import the CSS file in your entry point:', 'yellow');
+  log("   import './index.css'", 'blue');
+  log('2. Start using components:', 'yellow');
+  log("   import { Button } from 'shru-design-system'", 'blue');
+  log('\n');
+}
+
+main();
+