create-nara 0.1.0

package/README.md

@@ -0,0 +1,17 @@
+# create-nara
+
+CLI tool to scaffold new NARA projects.
+
+## Usage
+
+```bash
+npm create nara@latest my-project
+# or
+npx create-nara my-project
+```
+
+## Modes
+
+- **Minimal**: API-only backend without frontend
+- **Svelte**: Full-stack with Svelte 5 + Inertia.js
+- **Vue**: Full-stack with Vue 3 + Inertia.js

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export declare function main(): Promise<void>;

package/dist/cli.js

@@ -0,0 +1,50 @@
+import prompts from 'prompts';
+import pc from 'picocolors';
+import path from 'path';
+import { setupProject } from './template.js';
+export async function main() {
+    console.log(pc.bold(pc.cyan('\n  🚀 NARA - Create New Project\n')));
+    let projectName = process.argv[2];
+    if (!projectName) {
+        const res = await prompts({
+            type: 'text',
+            name: 'projectName',
+            message: 'Project name:',
+            initial: 'my-nara-app'
+        });
+        projectName = res.projectName;
+        if (!projectName)
+            process.exit(1);
+    }
+    const { mode } = await prompts({
+        type: 'select',
+        name: 'mode',
+        message: 'Select project mode:',
+        choices: [
+            { title: 'Minimal (API only)', value: 'minimal', description: 'Backend API without frontend' },
+            { title: 'Fullstack with Svelte 5', value: 'svelte', description: 'Recommended - Full stack with Svelte' },
+            { title: 'Fullstack with Vue 3', value: 'vue', description: 'Full stack with Vue' }
+        ],
+        initial: 1
+    });
+    if (!mode)
+        process.exit(1);
+    const { features } = await prompts({
+        type: 'multiselect',
+        name: 'features',
+        message: 'Select features:',
+        choices: [
+            { title: 'Authentication', value: 'auth', selected: true },
+            { title: 'Database (SQLite)', value: 'db', selected: true },
+            { title: 'File uploads', value: 'uploads', selected: false }
+        ]
+    });
+    const targetDir = path.resolve(process.cwd(), projectName);
+    console.log(pc.dim(`\nCreating project in ${targetDir}...\n`));
+    await setupProject({ projectName, targetDir, mode, features: features || [] });
+    console.log(pc.green('\n✓ Project created successfully!\n'));
+    console.log('Next steps:\n');
+    console.log(pc.cyan(`  cd ${projectName}`));
+    console.log(pc.cyan('  npm install'));
+    console.log(pc.cyan('  npm run dev\n'));
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+import { main } from './cli.js';
+main().catch(console.error);

package/dist/template.d.ts

@@ -0,0 +1,8 @@
+interface ProjectOptions {
+    projectName: string;
+    targetDir: string;
+    mode: 'minimal' | 'svelte' | 'vue';
+    features: string[];
+}
+export declare function setupProject(options: ProjectOptions): Promise<void>;
+export {};

package/dist/template.js

@@ -0,0 +1,68 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const templatesDir = path.join(__dirname, '..', 'templates');
+export async function setupProject(options) {
+    const { projectName, targetDir, mode, features } = options;
+    // Create target directory
+    if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+    }
+    // 1. Copy base template (shared files like .gitignore, tsconfig, etc)
+    copyDir(path.join(templatesDir, 'base'), targetDir);
+    // 2. Copy mode-specific template
+    const modeTemplateDir = path.join(templatesDir, mode);
+    if (fs.existsSync(modeTemplateDir)) {
+        copyDir(modeTemplateDir, targetDir);
+    }
+    // 3. Ensure required directories exist
+    fs.mkdirSync(path.join(targetDir, 'app/controllers'), { recursive: true });
+    fs.mkdirSync(path.join(targetDir, 'app/models'), { recursive: true });
+    // 4. Generate package.json (dynamic content)
+    const pkg = createPackageJson(projectName, mode, features);
+    fs.writeFileSync(path.join(targetDir, 'package.json'), JSON.stringify(pkg, null, 2));
+}
+function copyDir(src, dest) {
+    fs.cpSync(src, dest, { recursive: true, force: true });
+}
+function createPackageJson(name, mode, features) {
+    const pkg = {
+        name,
+        version: '0.1.0',
+        type: 'module',
+        scripts: {
+            dev: mode === 'minimal' ? 'tsx watch server.ts' : 'concurrently "tsx watch server.ts" "vite"',
+            build: 'tsc',
+            start: 'node dist/server.js'
+        },
+        dependencies: {
+            '@nara-web/core': '^0.1.0',
+            'dotenv': '^16.4.7'
+        },
+        devDependencies: {
+            'typescript': '^5.7.0',
+            'tsx': '^4.19.0',
+            '@types/node': '^22.0.0'
+        }
+    };
+    if (mode === 'svelte') {
+        pkg.dependencies['@nara-web/inertia-svelte'] = '^0.1.0';
+        pkg.dependencies['svelte'] = '^5.0.0';
+        pkg.devDependencies['vite'] = '^6.0.0';
+        pkg.devDependencies['@sveltejs/vite-plugin-svelte'] = '^5.0.0';
+        pkg.devDependencies['concurrently'] = '^9.0.0';
+    }
+    else if (mode === 'vue') {
+        pkg.dependencies['@nara-web/inertia-vue'] = '^0.1.0';
+        pkg.dependencies['vue'] = '^3.5.0';
+        pkg.devDependencies['vite'] = '^6.0.0';
+        pkg.devDependencies['@vitejs/plugin-vue'] = '^5.0.0';
+        pkg.devDependencies['concurrently'] = '^9.0.0';
+    }
+    if (features.includes('db')) {
+        pkg.dependencies['knex'] = '^3.1.0';
+        pkg.dependencies['better-sqlite3'] = '^11.0.0';
+    }
+    return pkg;
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "create-nara",
+  "version": "0.1.0",
+  "description": "CLI to scaffold NARA projects",
+  "type": "module",
+  "bin": {
+    "create-nara": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/node": "^22.0.0",
+    "@types/prompts": "^2.4.9"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "license": "MIT"
+}

package/templates/base/.env.example

@@ -0,0 +1,3 @@
+PORT=3000
+APP_KEY=change-me-to-random-string
+DB_CONNECTION=sqlite

package/templates/base/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/minimal/routes/web.ts

@@ -0,0 +1,11 @@
+import type { NaraApp } from '@nara-web/core';
+
+export function registerRoutes(app: NaraApp) {
+  app.get('/', (req, res) => {
+    res.json({ message: 'Welcome to NARA API' });
+  });
+
+  app.get('/health', (req, res) => {
+    res.json({ status: 'ok' });
+  });
+}

package/templates/minimal/server.ts

@@ -0,0 +1,10 @@
+import 'dotenv/config';
+import { createApp } from '@nara-web/core';
+import { registerRoutes } from './routes/web.js';
+
+const app = createApp({
+  port: Number(process.env.PORT) || 3000
+});
+
+registerRoutes(app);
+app.start();

package/templates/svelte/resources/js/app.ts

@@ -0,0 +1,12 @@
+import { createInertiaApp } from '@inertiajs/svelte';
+import { mount } from 'svelte';
+
+createInertiaApp({
+  resolve: name => {
+    const pages = import.meta.glob('./pages/**/*.svelte', { eager: true });
+    return pages[`./pages/${name}.svelte`];
+  },
+  setup({ el, App, props }) {
+    mount(App, { target: el!, props });
+  }
+});

package/templates/svelte/resources/js/components/DarkModeToggle.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+
+let darkMode: boolean = false;
+let mounted: boolean = false;
+export let onchange: (mode: boolean) => void = () => {};
+
+onMount(() => {
+    // Check system preference
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    // Check localStorage or fallback to system preference
+    const savedMode = localStorage.getItem('darkMode');
+    darkMode = savedMode === null ? systemPrefersDark : savedMode === 'true';
+    
+    // Apply saved preference
+    if (darkMode) {
+        document.documentElement.classList.add('dark');
+    }
+
+    // Add transition class after initial load to prevent flash
+    setTimeout(() => {
+        document.documentElement.classList.add('transition-colors');
+        mounted = true;
+    }, 100);
+
+    // Listen for system preference changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e: MediaQueryListEvent) => {
+        if (localStorage.getItem('darkMode') === null) {
+            darkMode = e.matches;
+            toggleDarkMode();
+        }
+    });
+});
+
+function toggleDarkMode(): void {
+    darkMode = !darkMode;
+    
+    if (darkMode) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+    
+    // Save preference to localStorage
+    localStorage.setItem('darkMode', String(darkMode));
+    
+    onchange(darkMode);
+}
+</script>
+
+<button 
+    on:click={toggleDarkMode}
+    class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-800/70 transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-400/50"
+    aria-label="Toggle dark mode"
+>
+    {#if darkMode}
+        <!-- Sun icon for light mode -->
+        <svg class="w-5 h-5 text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+    {:else}
+        <!-- Moon icon for dark mode -->
+        <svg class="w-5 h-5 text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+    {/if}
+</button>

package/templates/svelte/resources/js/components/Header.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { fly, fade } from 'svelte/transition';
+  import { page, router, inertia } from '@inertiajs/svelte';
+  import { clickOutside } from '../Components/helper';
+  import DarkModeToggle from '../Components/DarkModeToggle.svelte';
+
+  interface User {
+    id: string;
+    name: string;
+    email: string;
+    is_admin: boolean;
+  }
+
+  interface MenuLink {
+    href: string;
+    label: string;
+    group: string;
+    show: boolean;
+  }
+
+  $: user = $page.props.user as User | undefined;
+  let scrollY = 0;
+  let isMenuOpen: boolean = false;
+
+  export let group: string; 
+
+  $: scrolled = scrollY > 50;
+
+  $: menuLinks = [
+    { href: '/dashboard', label: 'Overview', group: 'dashboard', show: true },  
+    { href: '/users', label: 'Users', group: 'users', show: !!(user?.is_admin) },
+    { href: '/profile', label: 'Profile', group: 'profile', show: !!user },
+  ] as MenuLink[];
+  
+  $: visibleMenuLinks = menuLinks.filter((item) => item.show);
+
+  function handleLogout(): void {
+    router.post('/logout');
+  }
+</script>
+
+<svelte:window bind:scrollY />
+
+<header 
+  class="fixed inset-x-0 top-0 z-50 transition-all duration-500 {scrolled 
+    ? 'bg-white/90 dark:bg-surface-dark/95 backdrop-blur-xl border-b border-slate-200/50 dark:border-white/5' 
+    : 'bg-white/90 dark:bg-surface-dark/95 backdrop-blur-xl'}"
+>
+  <nav class="px-6 sm:px-12 lg:px-24 py-5 flex items-center justify-between">
+    
+    <!-- Left: Brand + Nav -->
+    <div class="flex items-center gap-10">
+      <!-- Radical Brand -->
+      <a 
+        href="/" 
+        use:inertia 
+        class="group flex items-center gap-3"
+      >
+        <span class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white group-hover:text-primary-500 transition-colors">
+          NARA.
+        </span>
+        <span class="hidden sm:block text-[9px] uppercase tracking-[0.3em] text-slate-400 dark:text-slate-500 font-medium">
+          Dashboard
+        </span>
+      </a>
+
+      <!-- Desktop Navigation - Radical Style -->
+      <div class="hidden md:flex items-center gap-1">
+        {#each visibleMenuLinks as item, i}
+          <a 
+            use:inertia 
+            href={item.href} 
+            class="relative px-4 py-2 text-xs font-medium uppercase tracking-[0.15em] transition-all duration-300
+              {item.group === group 
+                ? 'text-primary-500' 
+                : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'}"
+          >
+            {item.label}
+            {#if item.group === group}
+              <span class="absolute bottom-0 left-4 right-4 h-px bg-primary-500"></span>
+            {/if}
+          </a>
+          {#if i < visibleMenuLinks.length - 1}
+            <span class="w-px h-3 bg-slate-200 dark:bg-slate-700"></span>
+          {/if}
+        {/each}
+      </div>
+    </div>
+
+    <!-- Right: Actions -->
+    <div class="flex items-center gap-4">
+      <!-- Current Page Indicator (Mobile) -->
+      <span class="md:hidden text-[10px] uppercase tracking-[0.2em] text-primary-500 font-medium">
+        {group}
+      </span>
+
+      <div class="h-4 w-px bg-slate-200 dark:bg-slate-700 hidden sm:block"></div>
+      
+      <DarkModeToggle />
+
+      <!-- Auth Actions -->
+      <div class="hidden sm:flex items-center gap-3">
+        {#if user && user.id}
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-500 dark:text-slate-400">
+              {user.name}
+            </span>
+            <button 
+              on:click={handleLogout}
+              class="group relative px-5 py-2 text-xs font-bold uppercase tracking-wider overflow-hidden rounded-full border border-slate-200 dark:border-slate-700 hover:border-red-500/50 dark:hover:border-red-500/50 transition-colors"
+            >
+              <span class="relative z-10 text-slate-600 dark:text-slate-300 group-hover:text-red-500 transition-colors">
+                Logout
+              </span>
+            </button>
+          </div>
+        {:else}
+          <a
+            href="/login"
+            use:inertia
+            class="text-xs font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors"
+          >
+            Login
+          </a>
+          <a
+            href="/register"
+            use:inertia
+            class="group relative px-5 py-2.5 bg-slate-900 dark:bg-white text-white dark:text-black text-xs font-bold uppercase tracking-wider rounded-full overflow-hidden hover:scale-105 transition-transform"
+          >
+            <span class="relative z-10">Register</span>
+            <div class="absolute inset-0 bg-primary-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+          </a>
+        {/if}
+      </div>
+
+      <!-- Mobile Menu Button -->
+      <button
+        class="md:hidden relative w-10 h-10 flex items-center justify-center rounded-full border border-slate-200 dark:border-slate-700 hover:border-primary-500/50 transition-colors text-slate-900 dark:text-white"
+        on:click={() => isMenuOpen = !isMenuOpen}
+        aria-label="Menu"
+      >
+        <div class="flex flex-col gap-1.5 w-4">
+          <span class="block h-px bg-slate-900 dark:bg-white transition-transform duration-300 {isMenuOpen ? 'rotate-45 translate-y-[3.5px]' : ''}"></span>
+          <span class="block h-px bg-slate-900 dark:bg-white transition-opacity duration-300 {isMenuOpen ? 'opacity-0' : ''}"></span>
+          <span class="block h-px bg-slate-900 dark:bg-white transition-transform duration-300 {isMenuOpen ? '-rotate-45 -translate-y-[3.5px]' : ''}"></span>
+        </div>
+      </button>
+    </div>
+  </nav>
+  
+  </header>
+
+<!-- Mobile Menu - Radical Full Screen (Outside header for proper z-index) -->
+{#if isMenuOpen}
+<div  
+  transition:fade={{ duration: 200 }}
+  class="fixed inset-0 bg-white dark:bg-surface-dark z-[9999] md:hidden overflow-y-auto"
+  style="top: 0; left: 0; right: 0; bottom: 0;"
+>
+  <!-- Close Button -->
+  <button
+    class="absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white z-10"
+    on:click={() => isMenuOpen = false}
+    aria-label="Close menu"
+  >
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </button>
+
+  <!-- Brand -->
+  <div class="absolute top-6 left-6 z-10">
+    <span class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white">NARA.</span>
+  </div>
+
+  <!-- Menu Content -->
+  <div class="min-h-screen flex flex-col justify-center px-8 sm:px-12 py-24">
+    <!-- Navigation Links -->
+    <nav class="space-y-6 mb-12">
+      {#each visibleMenuLinks as item, i}
+        <a 
+          href={item.href}
+          use:inertia
+          on:click={() => isMenuOpen = false}
+          class="block text-4xl sm:text-5xl font-bold tracking-tighter transition-all duration-300
+            {item.group === group 
+              ? 'text-primary-500' 
+              : 'text-slate-900 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 hover:translate-x-2'}"
+          in:fly={{ y: 20, duration: 400, delay: i * 100 }}
+        >
+          <span class="inline-flex items-center gap-4">
+            <span class="text-xs font-mono text-slate-400 dark:text-slate-500">0{i + 1}</span>
+            {item.label}
+          </span>
+        </a>
+      {/each}
+    </nav>
+
+    <!-- Mobile Auth -->
+    <div class="pt-8 border-t border-slate-200 dark:border-slate-800" in:fly={{ y: 20, duration: 400, delay: 300 }}>
+      {#if user}
+        <p class="text-xs uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-4">Signed in as</p>
+        <p class="text-lg font-medium text-slate-900 dark:text-white mb-6">{user.name}</p>
+        <button 
+          on:click={handleLogout}
+          class="px-6 py-3 text-sm font-bold uppercase tracking-wider border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white rounded-full hover:border-red-500 hover:text-red-500 transition-colors"
+        >
+          Logout
+        </button>
+      {:else}
+        <div class="flex gap-4">
+          <a 
+            href="/login" 
+            use:inertia
+            class="px-6 py-3 text-sm font-bold uppercase tracking-wider border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white rounded-full hover:border-primary-500 transition-colors"
+          >
+            Login
+          </a>
+          <a 
+            href="/register" 
+            use:inertia
+            class="px-6 py-3 text-sm font-bold uppercase tracking-wider bg-slate-900 dark:bg-white text-white dark:text-black rounded-full"
+          >
+            Register
+          </a>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Decorative -->
+  <div class="absolute bottom-8 left-8 sm:left-12 text-[10px] uppercase tracking-[0.3em] text-slate-300 dark:text-slate-600">
+    NARA Framework
+  </div>
+
+  <!-- Background Decoration -->
+  <div class="absolute top-0 right-0 w-64 h-64 bg-primary-500/5 rounded-full blur-3xl pointer-events-none"></div>
+  <div class="absolute bottom-0 left-0 w-48 h-48 bg-accent-500/5 rounded-full blur-3xl pointer-events-none"></div>
+</div>
+{/if}

package/templates/svelte/resources/js/components/NaraIcon.svelte

@@ -0,0 +1,3 @@
+<span class="flex gap-2 items-center">
+    <img class="h-12 w-12 rounded-2xl" src="/public/nara.png" alt="Nara logo">
+  </span>

package/templates/svelte/resources/js/components/Pagination.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { router } from '@inertiajs/svelte';
+  import type { PaginationMeta } from '../types';
+
+  export let meta: PaginationMeta;
+  export let preserveState: boolean = true;
+
+  function goToPage(page: number): void {
+    const url = new URL(window.location.href);
+    url.searchParams.set('page', String(page));
+    router.visit(url.pathname + url.search, { 
+      preserveScroll: true, 
+      preserveState 
+    });
+  }
+</script>
+
+{#if meta.totalPages > 1}
+  <div class="flex items-center justify-between mt-6 text-xs text-slate-400">
+    <div>
+      Halaman {meta.page} dari {meta.totalPages} ({meta.total} total)
+    </div>
+    <div class="flex items-center gap-2">
+      <button
+        class="px-3 py-1.5 rounded-full bg-slate-800 dark:bg-slate-200 hover:bg-slate-700 dark:hover:bg-slate-300 text-slate-100 dark:text-slate-800 transition disabled:opacity-50 disabled:cursor-not-allowed"
+        on:click={() => goToPage(meta.page - 1)}
+        disabled={!meta.hasPrev}
+      >
+        ← Prev
+      </button>
+      
+      {#each Array.from({ length: Math.min(5, meta.totalPages) }, (_, i) => {
+        const start = Math.max(1, Math.min(meta.page - 2, meta.totalPages - 4));
+        return start + i;
+      }).filter(p => p <= meta.totalPages) as pageNum}
+        <button
+          class="px-3 py-1.5 rounded-full transition {pageNum === meta.page 
+            ? 'bg-primary-500 text-white' 
+            : 'bg-slate-800 dark:bg-slate-200 hover:bg-slate-700 dark:hover:bg-slate-300 text-slate-100 dark:text-slate-800'}"
+          on:click={() => goToPage(pageNum)}
+        >
+          {pageNum}
+        </button>
+      {/each}
+      
+      <button
+        class="px-3 py-1.5 rounded-full bg-slate-800 dark:bg-slate-200 hover:bg-slate-700 dark:hover:bg-slate-300 text-slate-100 dark:text-slate-800 transition disabled:opacity-50 disabled:cursor-not-allowed"
+        on:click={() => goToPage(meta.page + 1)}
+        disabled={!meta.hasNext}
+      >
+        Next →
+      </button>
+    </div>
+  </div>
+{/if}