create-giggles-app 0.1.0

package/README.md

@@ -0,0 +1,14 @@
+# create-giggles-app
+
+the easiest way to build a terminal app. powered by [giggles](https://www.npmjs.com/package/giggles).
+
+```
+npx create giggles-app
+```
+
+you can also use pnpm or yarn:
+
+```
+pnpm create-giggles-app
+yarn create giggles-app
+```

package/dist/index.js

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+// src/index.ts
+import * as p from '@clack/prompts';
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+var GIGGLES_VERSION = '0.2.2';
+function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent ?? '';
+  if (userAgent.startsWith('yarn')) return 'yarn';
+  if (userAgent.startsWith('pnpm')) return 'pnpm';
+  return 'npm';
+}
+function copyDir(src, dest, rename) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destName = rename?.[entry.name] ?? entry.name;
+    const destPath = path.join(dest, destName);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, rename);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+async function main() {
+  p.intro('create-giggles-app');
+  const argName = process.argv[2];
+  const options = await p.group(
+    {
+      name: () =>
+        p.text({
+          message: 'Project name?',
+          placeholder: 'my-tui',
+          initialValue: argName ?? '',
+          validate: (value) => {
+            if (!value.trim()) return 'Project name is required.';
+            if (/[^\w\-.]/.test(value)) return 'Project name contains invalid characters.';
+          }
+        }),
+      location: ({ results }) =>
+        p.text({
+          message: 'Where should we create the project?',
+          placeholder: `./${results.name}`,
+          initialValue: `./${results.name}`
+        }),
+      language: () =>
+        p.select({
+          message: 'Language?',
+          options: [
+            { value: 'typescript', label: 'TypeScript', hint: 'recommended' },
+            { value: 'javascript', label: 'JavaScript' }
+          ]
+        }),
+      linting: () =>
+        p.confirm({
+          message: 'Add ESLint + Prettier?',
+          initialValue: true
+        }),
+      install: () =>
+        p.confirm({
+          message: 'Install dependencies?',
+          initialValue: true
+        })
+    },
+    {
+      onCancel: () => {
+        p.cancel('Cancelled.');
+        process.exit(0);
+      }
+    }
+  );
+  const projectDir = path.resolve(options.location);
+  const templatesDir = path.resolve(import.meta.dirname, '..', 'templates');
+  const isTs = options.language === 'typescript';
+  const pm = detectPackageManager();
+  const s = p.spinner();
+  if (fs.existsSync(projectDir)) {
+    const files = fs.readdirSync(projectDir);
+    if (files.length > 0) {
+      p.cancel(`Directory ${options.location} is not empty.`);
+      process.exit(1);
+    }
+  }
+  fs.mkdirSync(projectDir, { recursive: true });
+  s.start('Scaffolding project...');
+  copyDir(path.join(templatesDir, 'base'), projectDir, {
+    _gitignore: '.gitignore'
+  });
+  const langDir = isTs ? 'typescript' : 'javascript';
+  copyDir(path.join(templatesDir, langDir), projectDir);
+  if (options.linting) {
+    copyDir(path.join(templatesDir, 'linting'), projectDir, {
+      _prettierrc: '.prettierrc',
+      _prettierignore: '.prettierignore'
+    });
+  }
+  const ext = isTs ? 'tsx' : 'jsx';
+  const scripts = {
+    dev: `tsx --watch src/index.${ext}`,
+    build: 'tsup',
+    start: 'node dist/index.js'
+  };
+  const deps = {
+    giggles: `^${GIGGLES_VERSION}`,
+    ink: '^6.6.0',
+    react: '^19.2.4'
+  };
+  const devDeps = {
+    tsx: '^4.21.0',
+    tsup: '^8.5.1'
+  };
+  if (isTs) {
+    devDeps['@types/react'] = '^19.2.13';
+    devDeps['typescript'] = '^5.0.3';
+  }
+  if (options.linting) {
+    scripts['lint'] = 'prettier --write . && eslint . --fix';
+    devDeps['prettier'] = '^2.8.7';
+    devDeps['@trivago/prettier-plugin-sort-imports'] = '^4.3.0';
+    devDeps['eslint'] = '^9.0.0';
+    devDeps['eslint-plugin-react'] = '^7.32.2';
+    devDeps['eslint-plugin-react-hooks'] = '^7.0.1';
+    devDeps['typescript-eslint'] = '^8.0.0';
+  }
+  const pkg = {
+    name: options.name,
+    version: '0.1.0',
+    type: 'module',
+    scripts,
+    dependencies: deps,
+    devDependencies: devDeps
+  };
+  fs.writeFileSync(path.join(projectDir, 'package.json'), JSON.stringify(pkg, null, 2) + '\n');
+  s.stop('Project scaffolded.');
+  if (options.install) {
+    s.start('Installing dependencies...');
+    try {
+      execSync(`${pm} install`, { cwd: projectDir, stdio: 'ignore' });
+      s.stop('Dependencies installed.');
+    } catch {
+      s.stop('Failed to install dependencies.');
+      p.log.warning(`Run \`${pm} install\` manually in the project directory.`);
+    }
+  }
+  const relative = path.relative(process.cwd(), projectDir);
+  p.note([`cd ${relative}`, `${pm} dev`].join('\n'), 'Next steps');
+  p.outro('Happy building!');
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "create-giggles-app",
+  "version": "0.1.0",
+  "description": "scaffold a giggles terminal app",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zion-off/giggles.git",
+    "directory": "tools/create-giggles-app"
+  },
+  "type": "module",
+  "bin": {
+    "create-giggles-app": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "prettier --write . && eslint . --fix"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.10.0"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^22.0.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "^2.8.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.0.3",
+    "typescript-eslint": "^8.0.0"
+  }
+}

package/templates/base/_gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.DS_Store

package/templates/javascript/src/index.jsx

@@ -0,0 +1,33 @@
+import { FocusGroup, GigglesProvider, useFocus, useKeybindings } from 'giggles';
+import { useState } from 'react';
+import { Box, Text, render } from 'ink';
+
+function MenuItem({ label }) {
+  const focus = useFocus();
+  const [selected, setSelected] = useState(false);
+
+  useKeybindings(focus, {
+    enter: () => setSelected(!selected)
+  });
+
+  return (
+    <Text color={focus.focused ? 'green' : 'white'}>
+      {focus.focused ? '> ' : '  '}
+      {label}
+      {selected ? ' ✓' : ''}
+    </Text>
+  );
+}
+
+render(
+  <GigglesProvider>
+    <Box flexDirection="column">
+      <Text bold>My Menu (j/k to navigate, enter to select)</Text>
+      <FocusGroup direction="vertical">
+        <MenuItem label="Start Game" />
+        <MenuItem label="Settings" />
+        <MenuItem label="Exit" />
+      </FocusGroup>
+    </Box>
+  </GigglesProvider>
+);

package/templates/javascript/tsup.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.jsx'],
+  format: ['esm'],
+  target: 'node18',
+  clean: true,
+  external: ['react', 'ink']
+});

package/templates/linting/_prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+pnpm-lock.yaml

package/templates/linting/_prettierrc

@@ -0,0 +1,17 @@
+{
+  "printWidth": 120,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "endOfLine": "lf",
+  "importOrder": ["^react$", "^react/(.*)$", "^ink", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

package/templates/linting/eslint.config.js

@@ -0,0 +1,30 @@
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import tseslint from 'typescript-eslint';
+
+export default [
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      react,
+      'react-hooks': reactHooks
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }]
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  },
+  {
+    ignores: ['dist/**']
+  }
+];

package/templates/typescript/src/index.tsx

@@ -0,0 +1,33 @@
+import { FocusGroup, GigglesProvider, useFocus, useKeybindings } from 'giggles';
+import { useState } from 'react';
+import { Box, Text, render } from 'ink';
+
+function MenuItem({ label }: { label: string }) {
+  const focus = useFocus();
+  const [selected, setSelected] = useState(false);
+
+  useKeybindings(focus, {
+    enter: () => setSelected(!selected)
+  });
+
+  return (
+    <Text color={focus.focused ? 'green' : 'white'}>
+      {focus.focused ? '> ' : '  '}
+      {label}
+      {selected ? ' ✓' : ''}
+    </Text>
+  );
+}
+
+render(
+  <GigglesProvider>
+    <Box flexDirection="column">
+      <Text bold>My Menu (j/k to navigate, enter to select)</Text>
+      <FocusGroup direction="vertical">
+        <MenuItem label="Start Game" />
+        <MenuItem label="Settings" />
+        <MenuItem label="Exit" />
+      </FocusGroup>
+    </Box>
+  </GigglesProvider>
+);

package/templates/typescript/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/typescript/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: ['esm'],
+  target: 'node18',
+  clean: true,
+  dts: true,
+  external: ['react', 'ink']
+});