swatchkit 0.0.1

package/README.md

@@ -0,0 +1,57 @@
+# SwatchKit
+
+**SwatchKit** is a lightweight, zero-configuration tool for creating HTML pattern libraries. It follows the "Magic Folder" principle: you drop files in, and a documentation site comes out.
+
+## How it works
+
+1.  **Drop Patterns:** Add `.html` files (or folders) to `src/patterns/`.
+2.  **Add Styles:** Add standard CSS to `src/css/styles.css`.
+3.  **Build:** Run `node build.js`.
+
+## Features
+
+### 1. The Magic Folder
+*   **Single File:** Drop `button.html` into `src/patterns/`. It automatically appears in the library.
+*   **Component Folder:** Drop a folder like `src/patterns/carousel/` containing `index.html`. It works exactly the same way.
+
+### 2. Automatic JS Bundling
+If your component needs client-side JavaScript, just add a `.js` file to its folder.
+*   Example: `src/patterns/carousel/script.js`
+*   **SwatchKit** will automatically find it, wrap it in an IIFE (to protect scope), and bundle it into the final site. You can have multiple JS files per pattern.
+
+### 3. Zero Config
+No config files. No build pipelines. No complex templating engines. Just HTML, CSS, and JS.
+
+## Usage
+
+### Using npx (Recommended)
+
+Run directly without installing:
+```bash
+npx swatchkit
+```
+
+### Installing locally
+
+Install as a dev dependency:
+```bash
+npm install -D swatchkit
+```
+
+Then add to your `package.json` scripts:
+```json
+"scripts": {
+  "build:patterns": "swatchkit"
+}
+```
+
+And run:
+```bash
+npm run build:patterns
+```
+
+### View the library
+After building, open the generated file:
+```bash
+open dist/index.html
+```

package/build.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const config = {
+  srcDir: path.join(process.cwd(), 'src'),
+  cssDir: path.join(process.cwd(), 'src/css'),
+  patternsDir: path.join(process.cwd(), 'src/patterns'),
+  layoutFile: path.join(__dirname, 'src/layout.html'),
+  distDir: path.join(process.cwd(), 'dist'),
+  distCssDir: path.join(process.cwd(), 'dist/css'),
+  distJsDir: path.join(process.cwd(), 'dist/js'),
+  outputFile: path.join(process.cwd(), 'dist/index.html'),
+  outputJsFile: path.join(process.cwd(), 'dist/js/patterns.js')
+};
+
+function build() {
+  console.log('[SwatchKit] Starting build...');
+
+  // 1. Check if patterns directory exists
+  if (!fs.existsSync(config.patternsDir)) {
+    console.error('Error: No patterns found. Create src/patterns to get started.');
+    process.exit(1);
+  }
+
+  // 2. Ensure dist directories exist
+  [config.distDir, config.distCssDir, config.distJsDir].forEach(dir => {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  });
+
+  // 3. Copy CSS files
+  console.log('Copying CSS...');
+  if (fs.existsSync(config.cssDir)) {
+      const cssFiles = fs.readdirSync(config.cssDir).filter(file => file.endsWith('.css'));
+      cssFiles.forEach(file => {
+          fs.copyFileSync(path.join(config.cssDir, file), path.join(config.distCssDir, file));
+      });
+  }
+
+  // 4. Read patterns & JS
+  console.log('Processing patterns...');
+  const patterns = [];
+  const scripts = [];
+
+  const items = fs.readdirSync(config.patternsDir);
+
+  items.forEach(item => {
+      const itemPath = path.join(config.patternsDir, item);
+      const stat = fs.statSync(itemPath);
+      
+      let name, content, id;
+
+      // Handle Directory Pattern (Folder with index.html + optional JS files)
+      if (stat.isDirectory()) {
+        const indexFile = path.join(itemPath, 'index.html');
+        
+        if (fs.existsSync(indexFile)) {
+          name = item;
+          id = item;
+          content = fs.readFileSync(indexFile, 'utf-8');
+
+          // Find all .js files in this directory
+          const jsFiles = fs.readdirSync(itemPath).filter(file => file.endsWith('.js'));
+          
+          jsFiles.forEach(jsFile => {
+             const scriptContent = fs.readFileSync(path.join(itemPath, jsFile), 'utf-8');
+             scripts.push(`
+/* --- Pattern: ${name} / File: ${jsFile} --- */
+(function() {
+${scriptContent}
+})();
+`);
+          });
+        }
+      } 
+      // Handle Single File Pattern (.html)
+      else if (item.endsWith('.html')) {
+        name = path.basename(item, '.html');
+        id = name;
+        content = fs.readFileSync(itemPath, 'utf-8');
+      }
+
+      if (name && content) {
+        patterns.push({ name, id, content });
+      }
+    });
+
+  // 5. Generate HTML fragments
+  const sidebarLinks = patterns.map(p => 
+    `<a href="#${p.id}">${p.name}</a>`
+  ).join('\n');
+
+  const patternBlocks = patterns.map(p => {
+    const escapedContent = p.content
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+
+    return `
+      <section id="${p.id}">
+        <h2>${p.name}</h2>
+        <div class="preview">${p.content}</div>
+        <pre><code>${escapedContent}</code></pre>
+      </section>
+    `;
+  }).join('\n');
+
+  // 6. Write JS Bundle
+  if (scripts.length > 0) {
+    fs.writeFileSync(config.outputJsFile, scripts.join('\n'));
+    console.log(`Bundled ${scripts.length} scripts to ${config.outputJsFile}`);
+  } else {
+    // Write empty file if no scripts so browser doesn't 404
+    fs.writeFileSync(config.outputJsFile, '// No pattern scripts found');
+  }
+
+  // 7. Read layout and replace placeholders
+  let layout = fs.readFileSync(config.layoutFile, 'utf-8');
+  
+  const finalHtml = layout
+    .replace('<!-- SIDEBAR_LINKS -->', sidebarLinks)
+    .replace('<!-- PATTERNS -->', patternBlocks);
+
+  // 8. Write output
+  fs.writeFileSync(config.outputFile, finalHtml);
+  
+  console.log(`Build complete! Generated ${config.outputFile}`);
+}
+
+build();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "swatchkit",
+  "version": "0.0.1",
+  "description": "A lightweight tool for creating HTML pattern libraries.",
+  "main": "build.js",
+  "bin": {
+    "swatchkit": "./build.js"
+  },
+  "files": [
+    "build.js",
+    "src/layout.html"
+  ],
+  "scripts": {
+    "start": "node build.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cwebley/swatchkit.git"
+  },
+  "author": "cwebley",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/cwebley/swatchkit/issues"
+  },
+  "homepage": "https://github.com/cwebley/swatchkit#readme"
+}

package/src/layout.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SwatchKit</title>
+    <link rel="stylesheet" href="/css/global.css" />
+    <style>
+        body {
+            display: flex;
+            margin: 0;
+            min-height: 100vh;
+            font-family: system-ui, -apple-system, sans-serif;
+        }
+        aside {
+            width: 250px;
+            background-color: #f7f7f7;
+            border-right: 1px solid #e5e5e5;
+            padding: 2rem 1.5rem;
+            flex-shrink: 0;
+            height: 100vh;
+            position: sticky;
+            top: 0;
+            overflow-y: auto;
+        }
+        aside h2 {
+            margin-top: 0;
+            font-size: 1.25rem;
+            margin-bottom: 1.5rem;
+        }
+        aside nav {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+        aside nav a {
+            text-decoration: none;
+            color: #333;
+        }
+        aside nav a:hover {
+            color: #000;
+            text-decoration: underline;
+        }
+        main {
+            flex: 1;
+            padding: 3rem;
+            max-width: 1200px;
+        }
+        section {
+            margin-bottom: 4rem;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 2rem;
+        }
+        section h2 {
+            margin-top: 0;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .preview {
+            border: 1px solid #e5e5e5;
+            padding: 2rem;
+            border-radius: 4px;
+            background: white;
+            margin-bottom: 1.5rem;
+        }
+        pre {
+            background: #2d2d2d;
+            color: #fff;
+            padding: 1rem;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <aside>
+        <header>
+            <h2>SwatchKit</h2>
+        </header>
+        <nav>
+            <!-- SIDEBAR_LINKS -->
+        </nav>
+    </aside>
+    <main>
+        <!-- PATTERNS -->
+    </main>
+    <script src="js/patterns.js"></script>
+</body>
+</html>