gea-lib 1.0.0

package/README.md

@@ -0,0 +1,100 @@
+# GeaJS Library Scaffolder (`gea-lib`)
+
+⚡ A fast, flexible, and interactive scaffolding tool to easily bootstrap modern, reactive libraries for GeaJS. With this tool, you can set up a new GeaJS library in seconds with TypeScript or JavaScript, complete with automatic git initialization and dependency installation.
+
+## Features
+
+- 📦 **Pre-configured Templates:** Ready-to-go templates for both JavaScript (`js`) and TypeScript (`ts`).
+- ⚙️ **Interactive CLI:** Step-by-step prompts to select your project name, language, and initial setup preferences.
+- 🚀 **Silent Mode (Non-Interactive):** Fast creation using CLI flags to skip prompts.
+- 🛠️ **Auto-configuration:** Automatic Git initialization and dependency installation using your active package manager (`npm`, `yarn`, `pnpm`, `bun`).
+
+---
+
+## Usage
+
+You can run this tool remotely using `npx` (recommended), or run it locally during development.
+
+### 1. Remote Execution (Recommended)
+
+Since the package is published on npm, you can generate a new GeaJS library anywhere without installing it globally:
+
+```bash
+# Using npx (runs interactively by default)
+npx gea-lib
+```
+
+---
+
+### 2. Command Line Options
+
+You can skip or pre-configure choices by passing arguments to the command:
+
+```bash
+npx gea-lib <project-name> [options]
+```
+
+#### Available Options:
+
+| Option | Description |
+| :--- | :--- |
+| `<project-name>` | The name of the project/directory to create (e.g., `my-awesome-lib`). |
+| `--ts` / `--typescript` | Use the TypeScript template. |
+| `--js` / `--javascript` | Use the JavaScript template. |
+| `--git` | Automatically initialize a git repository. |
+| `--no-git` | Skip initializing a git repository. |
+| `--install` | Automatically install dependencies. |
+| `--no-install` | Skip installing dependencies. |
+| `-y` / `--yes` | Use default choices for all prompts (creates `gea-library` in TypeScript with git and install). |
+
+#### Examples:
+
+**Create a TypeScript project with git and installed dependencies silently:**
+```bash
+npx gea-lib my-ts-lib -y
+```
+
+**Create a JavaScript project and skip dependency installation:**
+```bash
+npx gea-lib my-js-lib --js --no-install
+```
+
+---
+
+### 3. Local Development & Installation
+
+If you are developing this scaffolder tool locally, you can use these methods:
+
+#### Run locally:
+```bash
+# In the scaffolder root directory
+node ./bin/index.js
+# Or:
+npm start
+```
+
+#### Link locally for testing:
+```bash
+# Create a global symlink of the package
+npm link
+
+# Run it from anywhere on your machine:
+gea-lib my-library
+```
+
+---
+
+## Developing Your New Library
+
+Once your project is created, navigate into the directory and run these commands to start developing:
+
+```bash
+# Go to the project directory
+cd <project-name>
+
+# Start the interactive sandbox demo environment
+npm run dev
+
+# Build the library for NPM distribution
+npm run build
+```

package/bin/index.js

@@ -0,0 +1,214 @@
+#!/usr/bin/env node
+
+import { promises as fs } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { spawn } from 'child_process';
+import prompts from 'prompts';
+import pc from 'picocolors';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Helper: Run a command in a child process
+function runCommand(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    const process = spawn(command, args, { stdio: 'inherit', shell: true, ...options });
+    process.on('close', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Command failed with exit code ${code}`));
+      }
+    });
+    process.on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+// Helper: Convert project-name to CamelCase library name
+function toCamelCase(str) {
+  return str
+    .replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
+    .replace(/[^a-zA-Z0-9]/g, '');
+}
+
+// Helper: Recursively copy directory and replace placeholders
+async function copyDir(src, dest, replacements) {
+  const stat = await fs.lstat(src);
+  if (stat.isDirectory()) {
+    await fs.mkdir(dest, { recursive: true });
+    const entries = await fs.readdir(src);
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry);
+      let destEntryName = entry;
+      // Rename _gitignore to .gitignore
+      if (entry === '_gitignore') {
+        destEntryName = '.gitignore';
+      }
+      const destPath = path.join(dest, destEntryName);
+      await copyDir(srcPath, destPath, replacements);
+    }
+  } else {
+    // Read file, replace templates, write to dest
+    let content = await fs.readFile(src, 'utf8');
+    for (const [key, value] of Object.entries(replacements)) {
+      const regex = new RegExp(`<%\\s*${key}\\s*%>`, 'g');
+      content = content.replace(regex, value);
+    }
+    await fs.writeFile(dest, content, 'utf8');
+  }
+}
+
+// Helper: Detect the active package manager
+function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent || '';
+  if (userAgent.includes('yarn')) return 'yarn';
+  if (userAgent.includes('pnpm')) return 'pnpm';
+  if (userAgent.includes('bun')) return 'bun';
+  return 'npm';
+}
+
+async function main() {
+  console.log('\n' + pc.cyan(pc.bold('⚡ GeaJS Library Scaffolder ⚡')) + '\n');
+
+  const args = process.argv.slice(2);
+  const cliOptions = {
+    projectName: args.find(a => !a.startsWith('-')),
+    language: args.includes('--ts') || args.includes('--typescript') ? 'ts' : (args.includes('--js') || args.includes('--javascript') ? 'js' : null),
+    gitInit: args.includes('--no-git') ? false : (args.includes('--git') ? true : null),
+    installDeps: args.includes('--no-install') ? false : (args.includes('--install') ? true : null),
+    yes: args.includes('-y') || args.includes('--yes')
+  };
+
+  let projectName = cliOptions.projectName;
+  let language = cliOptions.language;
+  let gitInit = cliOptions.gitInit;
+  let installDeps = cliOptions.installDeps;
+
+  if (cliOptions.yes) {
+    if (!projectName) projectName = 'gea-library';
+    if (!language) language = 'ts';
+    if (gitInit === null) gitInit = true;
+    if (installDeps === null) installDeps = true;
+  } else {
+    const questions = [];
+
+    if (!projectName) {
+      questions.push({
+        type: 'text',
+        name: 'projectName',
+        message: 'Project name:',
+        initial: 'gea-library',
+        validate: (value) => (value.trim().length > 0 ? true : 'Please enter a project name')
+      });
+    }
+
+    if (!language) {
+      questions.push({
+        type: 'select',
+        name: 'language',
+        message: 'Select programming language:',
+        choices: [
+          { title: pc.blue('TypeScript'), value: 'ts' },
+          { title: pc.yellow('JavaScript'), value: 'js' }
+        ],
+        initial: 0
+      });
+    }
+
+    if (gitInit === null) {
+      questions.push({
+        type: 'confirm',
+        name: 'gitInit',
+        message: 'Initialize a git repository?',
+        initial: true
+      });
+    }
+
+    if (installDeps === null) {
+      questions.push({
+        type: 'confirm',
+        name: 'installDeps',
+        message: 'Install dependencies automatically?',
+        initial: true
+      });
+    }
+
+    if (questions.length > 0) {
+      const response = await prompts(questions, {
+        onCancel: () => {
+          console.log(pc.red('\n✖ Scaffolding cancelled.'));
+          process.exit(1);
+        }
+      });
+
+      if (!projectName) projectName = response.projectName;
+      if (!language) language = response.language;
+      if (gitInit === null) gitInit = response.gitInit;
+      if (installDeps === null) installDeps = response.installDeps;
+    }
+  }
+
+  const projectDir = path.resolve(process.cwd(), projectName);
+  const pkgName = path.basename(projectName).toLowerCase().replace(/[^a-z0-9-_]/g, '');
+  const libraryName = toCamelCase(pkgName);
+
+  console.log(`\nCreating GeaJS library in ${pc.green(projectDir)}...\n`);
+
+  // Source template path
+  const templatePath = path.resolve(__dirname, '../templates', language);
+
+  try {
+    // Copy template files
+    await copyDir(templatePath, projectDir, {
+      projectName: pkgName,
+      libraryName: libraryName
+    });
+
+    // Git initialization
+    if (gitInit) {
+      console.log(pc.dim('Initializing git repository...'));
+      try {
+        await runCommand('git', ['init'], { cwd: projectDir });
+      } catch (err) {
+        console.warn(pc.yellow('⚠ Could not initialize git repository: ' + err.message));
+      }
+    }
+
+    // Dependency installation
+    const pkgManager = detectPackageManager();
+    if (installDeps) {
+      console.log(pc.dim(`Installing dependencies using ${pkgManager}...`));
+      try {
+        const installArgs = pkgManager === 'yarn' ? [] : ['install'];
+        await runCommand(pkgManager, installArgs, { cwd: projectDir });
+        console.log(pc.green('\n✔ Dependencies installed successfully!'));
+      } catch (err) {
+        console.error(pc.red(`\n✖ Failed to install dependencies: ${err.message}`));
+      }
+    }
+
+    // Success Screen
+    console.log('\n' + pc.green(pc.bold('🎉 Project created successfully!')) + '\n');
+    console.log('To get started:');
+    
+    if (path.resolve(process.cwd()) !== projectDir) {
+      console.log(`  ${pc.cyan(`cd ${projectName}`)}`);
+    }
+
+    if (!installDeps) {
+      console.log(`  ${pc.cyan(`${pkgManager} install`)}`);
+    }
+
+    console.log(`  ${pc.cyan(`${pkgManager} run dev`)}  ${pc.dim('# Starts interactive demo sandbox')}`);
+    console.log(`  ${pc.cyan(`${pkgManager} run build`)} ${pc.dim('# Builds library for NPM distribution')}`);
+    console.log('\nHappy coding with GeaJS!\n');
+
+  } catch (error) {
+    console.error(pc.red(`\n✖ Scaffolding failed: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "gea-lib",
+  "version": "1.0.0",
+  "description": "Scaffold a modern, reactive library for GeaJS",
+  "type": "module",
+  "bin": {
+    "gea-lib": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "scripts": {
+    "start": "node ./bin/index.js"
+  },
+  "keywords": [
+    "geajs",
+    "gea",
+    "reactive",
+    "library",
+    "scaffolder",
+    "create"
+  ],
+  "author": "Mehmet Fıskındal",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mehmetfiskindal/gea-lib.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mehmetfiskindal/gea-lib/issues"
+  },
+  "homepage": "https://github.com/mehmetfiskindal/gea-lib#readme",
+  "dependencies": {
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2"
+  }
+}

package/templates/js/README.md

@@ -0,0 +1,39 @@
+# <% projectName %>
+
+A modern, high-performance, and reactive component library for **GeaJS**.
+
+Built with compiler-first reactivity, proxy-based state management, and modern glassmorphic designs.
+
+## Features
+
+- ⚡ **No Virtual DOM**: Built on GeaJS, compile-time JSX transformations for surgical DOM patching.
+- 🎨 **Premium Styling**: Pre-configured responsive styles, micro-animations, and glassmorphic designs.
+- 🛠️ **Playground Included**: An interactive visual sandbox to test and showcase your components in real-time.
+
+## Development
+
+To start the interactive playground:
+
+```bash
+npm install
+npm run dev
+```
+
+## Production Build
+
+To build your library for distribution:
+
+```bash
+npm run build
+```
+
+The build process bundles your components into `dist/index.js` (ES Modules).
+
+## Usage
+
+Register components in your main application:
+
+```javascript
+import { Button, Card, counterStore } from '<% projectName %>';
+import '<% projectName %>/style.css';
+```

package/templates/js/_gitignore

@@ -0,0 +1,42 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Compiler outputs
+dist/
+tmp/
+out/
+.docusaurus/
+
+# IDEs and editors
+.idea/
+.vscode/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Test coverage
+coverage/
+.nyc_output/
+
+# Build environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

package/templates/js/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "<% projectName %>",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@geajs/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@geajs/core": "^1.0.0",
+    "@geajs/vite-plugin": "^1.0.0",
+    "vite": "^8.0.0",
+    "vitest": "^2.0.0",
+    "jsdom": "^24.1.0"
+  }
+}

package/templates/js/playground/app.jsx

@@ -0,0 +1,80 @@
+import { Component } from '@geajs/core';
+import { Button, Card, counterStore } from '../src';
+
+export default class App extends Component {
+  template() {
+    return (
+      <div style="max-width: 800px; width: 100%; padding: 2rem;">
+        <div style="text-align: center; margin-bottom: 3rem;">
+          <h1 style="font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; letter-spacing: -0.05em;">
+            GeaJS Library Playground
+          </h1>
+          <p style="color: var(--text-secondary); font-size: 1.1rem;">
+            Interactive sandbox demonstrating your reactive components
+          </p>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
+          
+          {/* Reactive Counter Card */}
+          <Card 
+            title="Reactive State Demo" 
+            footer={
+              <Button variant="glass" click={() => counterStore.reset()}>
+                Reset Counter
+              </Button>
+            }
+          >
+            <p style="margin-bottom: 1.5rem;">
+              GeaJS utilizes deep proxies to surgically update the DOM. Click the buttons below to see the reactivity in action.
+            </p>
+            
+            <div style="display: flex; align-items: center; justify-content: center; gap: 2rem; margin: 2rem 0; padding: 1.5rem; background: rgba(255,255,255,0.02); border-radius: 16px; border: 1px dashed rgba(255,255,255,0.08);">
+              <Button variant="secondary" click={() => counterStore.decrement()}>-</Button>
+              <span style="font-family: var(--font-mono); font-size: 3rem; font-weight: bold; min-width: 80px; text-align: center; color: #ffffff;">
+                {counterStore.count}
+              </span>
+              <Button variant="primary" click={() => counterStore.increment()}>+</Button>
+            </div>
+          </Card>
+
+          {/* Button Variant Showcase */}
+          <Card title="Button Variants">
+            <p style="margin-bottom: 1.5rem;">
+              Beautiful styled buttons with hover glows and tap micro-animations.
+            </p>
+            
+            <div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
+              <Button variant="primary" click={() => alert('Primary clicked!')}>
+                Primary Glow
+              </Button>
+              <Button variant="secondary" click={() => alert('Secondary clicked!')}>
+                Secondary Glow
+              </Button>
+              <Button variant="glass" click={() => alert('Glass clicked!')}>
+                Glassmorphic
+              </Button>
+              <Button variant="primary" disabled={true}>
+                Disabled
+              </Button>
+            </div>
+          </Card>
+
+          {/* Integration Guide */}
+          <Card title="How to Import">
+            <p style="margin-bottom: 1rem;">Import components directly into your GeaJS project:</p>
+            <pre style="background: rgba(0,0,0,0.3); padding: 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); font-family: var(--font-mono); font-size: 0.9rem; color: #a78bfa; overflow-x: auto; white-space: pre-wrap;">
+{`import { Button, Card } from 'your-library-name';
+
+// In template:
+<Card title="My Card">
+  <Button click={() => doSomething()}>Click Me</Button>
+</Card>`}
+            </pre>
+          </Card>
+          
+        </div>
+      </div>
+    );
+  }
+}

package/templates/js/playground/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><% projectName %> - Component Library Playground</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/playground/main.js"></script>
+  </body>
+</html>

package/templates/js/playground/main.js

@@ -0,0 +1,5 @@
+import App from './app';
+import './style.css';
+
+const app = new App();
+app.render(document.getElementById('app'));

package/templates/js/playground/style.css

@@ -0,0 +1,49 @@
+:root {
+  --bg-color: #030014;
+  --panel-bg: rgba(255, 255, 255, 0.03);
+  --panel-border: rgba(255, 255, 255, 0.08);
+  --primary-color: #7c3aed;
+  --primary-glow: rgba(124, 58, 237, 0.3);
+  --secondary-color: #06b6d4;
+  --secondary-glow: rgba(6, 182, 212, 0.3);
+  --accent-color: #ec4899;
+  --text-primary: #f3f4f6;
+  --text-secondary: #9ca3af;
+  --font-sans: 'Outfit', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-x: hidden;
+  background-image: 
+    radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
+    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%);
+}
+
+/* Scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-color);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--panel-border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-color);
+}

package/templates/js/src/components/Button.css

@@ -0,0 +1,74 @@
+.gea-btn {
+  font-family: var(--font-sans, 'Outfit', sans-serif);
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  position: relative;
+  overflow: hidden;
+  color: #ffffff;
+}
+
+.gea-btn::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.1);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.gea-btn:hover::after {
+  opacity: 1;
+}
+
+.gea-btn:active {
+  transform: scale(0.97);
+}
+
+.gea-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Variants */
+.gea-btn-primary {
+  background: linear-gradient(135deg, var(--primary-color, #7c3aed) 0%, #6d28d9 100%);
+  box-shadow: 0 4px 15px var(--primary-glow, rgba(124, 58, 237, 0.3));
+}
+
+.gea-btn-primary:hover {
+  box-shadow: 0 6px 20px var(--primary-glow, rgba(124, 58, 237, 0.5));
+  transform: translateY(-1px);
+}
+
+.gea-btn-secondary {
+  background: linear-gradient(135deg, var(--secondary-color, #06b6d4) 0%, #0891b2 100%);
+  box-shadow: 0 4px 15px var(--secondary-glow, rgba(6, 182, 212, 0.3));
+}
+
+.gea-btn-secondary:hover {
+  box-shadow: 0 6px 20px var(--secondary-glow, rgba(6, 182, 212, 0.5));
+  transform: translateY(-1px);
+}
+
+.gea-btn-glass {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.gea-btn-glass:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}