create-githat-app 0.1.1

package/README.md

@@ -0,0 +1,223 @@
+# create-githat-app
+
+**Ship authenticated apps in seconds, not weeks.**
+
+`create-githat-app` scaffolds a complete, production-ready application with authentication, team management, and a polished dashboard — all wired up and ready to go. One command. Zero boilerplate.
+
+[![npm version](https://img.shields.io/npm/v/create-githat-app.svg)](https://www.npmjs.com/package/create-githat-app)
+[![license](https://img.shields.io/npm/l/create-githat-app.svg)](https://github.com/GitHat-IO/create-githat-app/blob/main/LICENSE)
+
+---
+
+## Quick Start
+
+```bash
+npx create-githat-app my-app
+```
+
+That's it. You now have a fully functional app with sign-in, sign-up, protected routes, a dashboard, team management, API keys, and more.
+
+```bash
+cd my-app
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) and see it live.
+
+---
+
+## What You Get
+
+Every scaffolded app comes with **all of this** out of the box:
+
+- **Authentication** — Sign in, sign up, sign out, fully wired
+- **Forgot / Reset Password** — Complete recovery flow
+- **Protected Routes** — Middleware (Next.js) or route guards (React)
+- **Dashboard** — Sidebar navigation, responsive layout
+- **Settings** — Profile editing, avatar upload, password change
+- **Team Management** — Invite members, change roles, remove users
+- **API Keys** — Create apps, view and copy publishable/secret keys
+- **Email Verification** — Banner prompting unverified users
+- **Org Switcher** — Switch between organizations seamlessly
+- **Dark Theme** — Beautiful dark UI, responsive on all devices
+
+No glue code. No half-baked starters. A **complete application** from the first `npm run dev`.
+
+---
+
+## Frameworks
+
+| Framework                | Router             | Styling               | Dev Server          |
+|--------------------------|--------------------|-----------------------|---------------------|
+| **Next.js** (App Router) | File-based routing | CSS Modules / globals | `next dev` on :3000 |
+| **React** (Vite)         | React Router DOM   | CSS / inline styles   | `vite` on :5173     |
+
+---
+
+## CLI Options & Flags
+
+```bash
+npx create-githat-app [project-name] [options]
+```
+
+| Option                    | Description                                          |
+|---------------------------|------------------------------------------------------|
+| `project-name`            | Directory name for your app (prompted if omitted)    |
+| `--js`                    | Use JavaScript instead of TypeScript (Next.js only)  |
+| `--key <publishable_key>` | Set your GitHat publishable key upfront              |
+
+### Examples
+
+```bash
+# Interactive — prompts for everything
+npx create-githat-app
+
+# Named project with defaults
+npx create-githat-app my-app
+
+# JavaScript project with key pre-configured
+npx create-githat-app my-app --js --key pk_live_abc123
+```
+
+---
+
+## Interactive Prompts
+
+When you run the CLI, you'll be guided through:
+
+1. **Project name** — if not provided as an argument
+2. **Framework** — Next.js (App Router) or React (Vite)
+3. **Package manager** — npm, pnpm, or yarn
+4. **Publishable key** — optional; you can add it to `.env` later
+5. **Features** — multi-select the pages you want:
+   - Dashboard
+   - Settings (profile, avatar, password)
+   - Team management (invites, roles)
+   - Apps (API key management)
+   - Forgot Password (recovery flow)
+
+Select only what you need, or grab them all.
+
+---
+
+## Project Structure
+
+### Next.js (App Router)
+
+```text
+my-app/
+├── app/
+│   ├── layout.tsx              # GitHatProvider wrapper
+│   ├── page.tsx                # Home with sign-in/up buttons
+│   ├── globals.css
+│   ├── middleware.ts           # Auth route protection
+│   ├── (auth)/
+│   │   ├── sign-in/page.tsx
+│   │   ├── sign-up/page.tsx
+│   │   ├── forgot-password/page.tsx
+│   │   └── reset-password/page.tsx
+│   └── dashboard/
+│       ├── layout.tsx          # Protected layout + sidebar
+│       ├── page.tsx
+│       ├── settings/page.tsx
+│       ├── team/page.tsx
+│       └── apps/page.tsx
+├── .env.local
+├── .env.example
+├── package.json
+└── next.config.mjs
+```
+
+### React (Vite)
+
+```text
+my-app/
+├── src/
+│   ├── main.jsx               # BrowserRouter + GitHatProvider
+│   ├── App.jsx                # Route definitions
+│   ├── pages/
+│   │   ├── Home.jsx
+│   │   ├── SignIn.jsx
+│   │   ├── SignUp.jsx
+│   │   ├── Dashboard.jsx
+│   │   ├── DashboardLayout.jsx
+│   │   ├── Settings.jsx
+│   │   ├── Team.jsx
+│   │   ├── Apps.jsx
+│   │   ├── ForgotPassword.jsx
+│   │   └── ResetPassword.jsx
+│   └── components/
+│       ├── Sidebar.jsx
+│       └── VerifyEmailBanner.jsx
+├── .env
+├── .env.example
+├── index.html
+└── vite.config.js
+```
+
+---
+
+## Configuration
+
+After scaffolding, add your GitHat publishable key to the environment file:
+
+**Next.js** — `.env.local`
+
+```env
+NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here
+```
+
+**React (Vite)** — `.env`
+
+```env
+VITE_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here
+```
+
+If you passed `--key pk_live_xxx` during setup, this is already configured for you.
+
+> A `.env.example` file is included in every project for reference.
+
+---
+
+## Getting Your Publishable Key
+
+1. Go to [https://githat.io](https://githat.io) and create an account
+2. Create an organization (or use your default one)
+3. Navigate to **Apps** in the dashboard
+4. Create a new app and copy the **Publishable Key**
+5. Paste it into your `.env.local` or `.env` file
+
+---
+
+## Dependencies
+
+The CLI installs only what your chosen framework needs:
+
+**Next.js projects:**
+
+- `@githat/nextjs` — GitHat SDK (auth provider, components, hooks)
+- `next` — Next.js framework
+- `react` / `react-dom` — React
+
+**React (Vite) projects:**
+
+- `@githat/nextjs` — GitHat SDK (works with any React setup)
+- `react` / `react-dom` — React
+- `react-router-dom` — Client-side routing
+- `vite` / `@vitejs/plugin-react` — Build tooling
+
+---
+
+## Links
+
+- **GitHat Platform** — [https://githat.io](https://githat.io)
+- **SDK Documentation** — [@githat/nextjs on npm](https://www.npmjs.com/package/@githat/nextjs)
+- **CLI on npm** — [create-githat-app](https://www.npmjs.com/package/create-githat-app)
+- **GitHub** — [GitHat-IO/create-githat-app](https://github.com/GitHat-IO/create-githat-app)
+- **Report Issues** — [GitHub Issues](https://github.com/GitHat-IO/create-githat-app/issues)
+
+---
+
+## License
+
+Proprietary — see [LICENSE](../../LICENSE) for details.

package/bin/index.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+const { cli } = require('../src/cli');
+cli(process.argv.slice(2)).catch((err) => {
+  console.error(err.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-githat-app",
+  "version": "0.1.1",
+  "description": "Scaffold a new app with GitHat identity built in",
+  "bin": {
+    "create-githat-app": "./bin/index.js"
+  },
+  "files": ["bin", "src"],
+  "scripts": {
+    "test": "node bin/index.js --help"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "keywords": ["githat", "nextjs", "react", "vite", "create-app", "cli", "auth", "identity"],
+  "license": "SEE LICENSE IN LICENSE",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GitHat-IO/MicroFrontEnds.git"
+  }
+}

package/src/cli.js

@@ -0,0 +1,131 @@
+const prompts = require('prompts');
+const { scaffold } = require('./scaffold');
+
+// ANSI color helpers (zero dependencies)
+const c = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  cyan: '\x1b[36m',
+  magenta: '\x1b[35m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+};
+
+function banner() {
+  console.log(`
+  ${c.magenta}┌─────────────────────────────────────┐${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.bold}${c.magenta}◆${c.reset} ${c.bold}create-githat-app${c.reset}              ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}   ${c.dim}Identity for your application${c.reset}     ${c.magenta}│${c.reset}
+  ${c.magenta}│${c.reset}                                     ${c.magenta}│${c.reset}
+  ${c.magenta}└─────────────────────────────────────┘${c.reset}
+`);
+}
+
+async function cli(args) {
+  let projectName = args[0];
+
+  if (args.includes('--help') || args.includes('-h')) {
+    banner();
+    console.log(`  ${c.bold}Usage:${c.reset} create-githat-app ${c.cyan}[project-name]${c.reset}
+
+  Scaffold a new app with GitHat identity built in.
+
+  ${c.bold}Options:${c.reset}
+    ${c.cyan}--help, -h${c.reset}    Show this help message
+    ${c.cyan}--ts${c.reset}          Use TypeScript (default)
+    ${c.cyan}--js${c.reset}          Use JavaScript
+    ${c.cyan}--key <key>${c.reset}   GitHat publishable key (pk_live_...)
+
+  ${c.bold}Examples:${c.reset}
+    ${c.dim}$${c.reset} npx create-githat-app my-app
+    ${c.dim}$${c.reset} npx create-githat-app my-app --js
+    ${c.dim}$${c.reset} npx create-githat-app my-app --key pk_live_abc123
+
+  ${c.dim}Docs: https://githat.io/docs/cli${c.reset}
+`);
+    return;
+  }
+
+  banner();
+
+  if (!projectName) {
+    const res = await prompts({
+      type: 'text',
+      name: 'name',
+      message: `${c.bold}Project name${c.reset}`,
+      initial: 'my-githat-app',
+    });
+    if (!res.name) process.exit(0);
+    projectName = res.name;
+  }
+
+  const useTS = args.includes('--js') ? false : true;
+  const keyIdx = args.indexOf('--key');
+  let publishableKey = keyIdx !== -1 ? args[keyIdx + 1] : '';
+
+  const responses = await prompts([
+    {
+      type: 'select',
+      name: 'framework',
+      message: `${c.bold}Framework${c.reset}`,
+      choices: [
+        { title: `Next.js ${c.dim}(App Router)${c.reset}`, value: 'nextjs' },
+        { title: `React ${c.dim}(Vite)${c.reset}`, value: 'react' },
+      ],
+      initial: 0,
+    },
+    {
+      type: 'select',
+      name: 'pm',
+      message: `${c.bold}Package manager${c.reset}`,
+      choices: [
+        { title: 'npm', value: 'npm' },
+        { title: 'pnpm', value: 'pnpm' },
+        { title: 'yarn', value: 'yarn' },
+      ],
+      initial: 0,
+    },
+    {
+      type: publishableKey ? null : 'text',
+      name: 'key',
+      message: `${c.bold}Publishable key${c.reset} ${c.dim}(optional — get one at githat.io/dashboard/apps)${c.reset}`,
+    },
+    {
+      type: 'multiselect',
+      name: 'features',
+      message: `${c.bold}Include pages${c.reset}`,
+      choices: [
+        { title: `Dashboard ${c.dim}(protected home)${c.reset}`, value: 'dashboard', selected: true },
+        { title: `Settings ${c.dim}(profile, avatar, password)${c.reset}`, value: 'settings', selected: true },
+        { title: `Team ${c.dim}(org members, invites)${c.reset}`, value: 'team', selected: true },
+        { title: `Apps ${c.dim}(API keys)${c.reset}`, value: 'apps' },
+        { title: `Forgot Password ${c.dim}(reset flow)${c.reset}`, value: 'forgotPassword' },
+      ],
+      hint: '- Space to select. Return to submit',
+    },
+  ]);
+
+  if (responses.framework === undefined) process.exit(0);
+  if (!publishableKey) publishableKey = responses.key || '';
+
+  const feat = responses.features || ['dashboard'];
+  await scaffold({
+    projectName,
+    framework: responses.framework || 'nextjs',
+    typescript: useTS,
+    packageManager: responses.pm || 'npm',
+    publishableKey,
+    features: {
+      dashboard: feat.includes('dashboard'),
+      settings: feat.includes('settings'),
+      team: feat.includes('team'),
+      apps: feat.includes('apps'),
+      forgotPassword: feat.includes('forgotPassword'),
+    },
+  });
+}
+
+module.exports = { cli };