feat: add create-commandkit

apps/docs/package.json

@@ -8,17 +8,17 @@
         "start": "next start"
     },
     "dependencies": {
-        "@types/node": "^20.10.4",
-        "@types/react": "18.2.22",
-        "@types/react-dom": "18.2.7",
-        "autoprefixer": "10.4.16",
-        "next": "14.0.4",
+        "@types/node": "^20.11.6",
+        "@types/react": "^18.2.48",
+        "@types/react-dom": "^18.2.18",
+        "autoprefixer": "^10.4.17",
+        "next": "^14.1.0",
         "nextra": "^2.13.2",
         "nextra-theme-docs": "^2.13.2",
-        "postcss": "8.4.31",
+        "postcss": "^8.4.33",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "tailwindcss": "3.3.3",
+        "tailwindcss": "^3.4.1",
         "typescript": "^5.3.3"
     }
 }

apps/docs/pages/guide/_meta.json

@@ -1,5 +1,6 @@
 {
     "installation": "Installation",
+    "create-commandkit": "create-commandkit",
     "commandkit-setup": "CommandKit Setup",
     "command-file-setup": "Commands Setup",
     "event-file-setup": "Events Setup",

apps/docs/pages/guide/create-commandkit.mdx

@@ -0,0 +1,27 @@
+# create-commandkit
+
+Besides installing CommandKit to your existing project, you can also start a new one with `create-commandkit` — a command-line utility used for creating new discord.js bots with CommandKit.
+
+## Usage
+
+If you want to create a new CommandKit application, simply run the following command:
+
+```sh copy
+npm create commandkit@latest
+```
+
+This will start the CLI in the current directory.
+
+## Prompts
+
+When running create-commandkit, you should be asked the following questions:
+
+-   **Project Directory:** Defines where your project will be located. It defaults to the current working directory.
+
+-   **Package Manager:** Lets you choose which package manager to use — npm, pnpm, or Yarn.
+
+-   **Module Type:** Allows you to pick between CommonJS (using require and module.exports), and ESM (using import and export).
+
+-   **Bot Token:** Asks you for your bot token, and writes it into the `.env` file where it will be stored.
+
+After these questions are answered, your project solution should appear in the selected folder.

packages/commandkit/package.json

@@ -29,7 +29,9 @@
         "test:prod": "cd ./tests && node ../bin/index.mjs start"
     },
     "repository": {
-        "url": "git+https://github.com/underctrl-io/commandkit.git"
+        "type": "git",
+        "url": "https://github.com/underctrl-io/commandkit",
+        "directory": "packages/commandkit"
     },
     "homepage": "https://commandkit.js.org",
     "keywords": [
@@ -39,18 +41,18 @@
     ],
     "dependencies": {
         "commander": "^11.1.0",
-        "dotenv": "^16.3.1",
-        "ora": "^7.0.1",
-        "rfdc": "^1.3.0",
+        "dotenv": "^16.4.1",
+        "ora": "^8.0.1",
+        "rfdc": "^1.3.1",
         "rimraf": "^5.0.5",
-        "tsup": "^7.2.0"
+        "tsup": "^8.0.1"
     },
     "devDependencies": {
-        "@types/node": "^20.5.9",
-        "discord.js": "^14.13.0",
+        "@types/node": "^20.11.6",
+        "discord.js": "^14.14.1",
         "tsconfig": "workspace:*",
-        "tsx": "^3.12.8",
-        "typescript": "^5.1.6"
+        "tsx": "^4.7.0",
+        "typescript": "^5.3.3"
     },
     "peerDependencies": {
         "discord.js": "^14"

packages/create-commandkit/README.md

@@ -0,0 +1,32 @@
+<div align="center">
+    <img src="https://raw.githubusercontent.com/underctrl-io/commandkit/master/apps/docs/public/ckit_logo.svg" width="60%" />
+    <br />
+    <a href="https://ctrl.lol/discord"><img src="https://img.shields.io/discord/1055188344188973066?color=5865F2&logo=discord&logoColor=white" alt="support server" /></a>
+    <a href="https://www.npmjs.com/package/create-commandkit"><img src="https://img.shields.io/npm/v/create-commandkit?maxAge=3600" alt="npm version" /></a>
+    <a href="https://www.npmjs.com/package/create-commandkit"><img src="https://img.shields.io/npm/dt/create-commandkit?maxAge=3600" alt="npm downloads" /></a>
+</div>
+
+# create-commandkit
+
+create-commandkit is a CLI utility to quickly instantiate a Discord bot with CommandKit.
+
+## Features
+
+- Interactive, beautiful command-line interface 🖥️
+- Supports CommonJS and ES Modules 📦
+
+## Documentation
+
+You can find the full documentation [here](https://commandkit.js.org).
+
+## Usage
+
+Run the following command in your terminal:
+
+```sh
+npx create-commandkit@latest
+```
+
+## Support and Suggestions
+
+Submit any queries or suggestions in our [Discord community](https://ctrl.lol/discord).

packages/create-commandkit/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "create-commandkit",
+    "description": "Effortlessly create a CommandKit project",
+    "version": "2.0.0",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "bin": "./dist/index.js",
+    "type": "module",
+    "license": "MIT",
+    "keywords": [
+        "commandkit",
+        "create-commandkit",
+        "discord.js",
+        "discord",
+        "node",
+        "client",
+        "cli",
+        "commands"
+    ],
+    "files": [
+        "dist",
+        "templates"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/underctrl-io/commandkit",
+        "directory": "packages/create-commandkit"
+    },
+    "homepage": "https://commandkit.js.org",
+    "scripts": {
+        "build": "tsup",
+        "lint": "tsc"
+    },
+    "dependencies": {
+        "@clack/prompts": "^0.7.0",
+        "colors": "^1.4.0",
+        "fs-extra": "^11.1.1",
+        "gradient-string": "^2.0.2"
+    },
+    "devDependencies": {
+        "@types/node": "^20.11.6",
+        "@types/gradient-string": "^1.1.5",
+        "@types/fs-extra": "^11.0.4",
+        "typescript": "^5.3.3",
+        "tsconfig": "workspace:*",
+        "tsup": "^8.0.1"
+    }
+}

packages/create-commandkit/src/functions/copyTemplates.ts

@@ -0,0 +1,13 @@
+import type { Language, ModuleType } from '../types';
+import { templates } from '../utils';
+import fs from 'fs-extra';
+
+interface CopyTemplatesProps {
+    type: ModuleType;
+    lang: Language;
+    dir: string;
+}
+
+export async function copyTemplates({ type, dir, lang }: CopyTemplatesProps) {
+    await fs.copy(templates[lang][type], dir);
+}

packages/create-commandkit/src/functions/installDeps.ts

@@ -0,0 +1,14 @@
+import type { Language, PackageManager } from '../types';
+import { type IOType, execSync } from 'node:child_process';
+import { dependencies } from '../utils';
+
+interface InstallDepsProps {
+    manager: PackageManager;
+    dir: string;
+    lang: Language;
+    stdio: IOType;
+}
+
+export function installDeps({ manager, dir, lang, stdio = 'pipe' }: InstallDepsProps) {
+    execSync(`${manager} add ${dependencies[lang].join(' ')}`, { cwd: dir, stdio });
+}

packages/create-commandkit/src/functions/setup.ts

@@ -0,0 +1,36 @@
+import type { ModuleType, PackageManager } from '../types';
+import { type IOType, execSync } from 'child_process';
+import { commands } from '../utils';
+
+import fs from 'fs-extra';
+import path from 'node:path';
+
+interface SetupProps {
+    manager: PackageManager;
+    type: ModuleType;
+    token: string;
+    dir: string;
+    stdio?: IOType;
+}
+
+export async function setup({ manager, type, token, dir, stdio = 'pipe' }: SetupProps) {
+    await fs.emptyDir(dir);
+    execSync(commands.init[manager], { cwd: dir, stdio });
+
+    const packageJsonPath = path.join(dir, 'package.json');
+    const packageJson = await fs.readJSON(packageJsonPath);
+
+    delete packageJson.main;
+    packageJson.name = packageJson.name.toLowerCase();
+    packageJson.type = type == 'esm' ? 'module' : 'commonjs';
+    packageJson.version = '0.0.0';
+
+    packageJson.scripts = {
+        dev: 'commandkit dev',
+        build: 'commandkit build',
+        start: 'commandkit start',
+    };
+
+    await fs.writeJSON(packageJsonPath, packageJson, { spaces: 2 });
+    await fs.writeFile(`${dir}/.env`, `TOKEN="${token}"`);
+}

packages/create-commandkit/src/index.ts

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+console.clear();
+
+import type { ModuleType, PackageManager } from './types';
+
+import { intro, text, select, password, confirm, outro } from '@clack/prompts';
+import { commandkit, hints, outroMsg } from './utils';
+import { setup } from './functions/setup';
+import { installDeps } from './functions/installDeps';
+import { copyTemplates } from './functions/copyTemplates';
+
+import path from 'node:path';
+import colors from 'colors';
+import fs from 'fs-extra';
+
+await intro(`Welcome to ${commandkit}!`);
+
+const dir = path.resolve(
+    process.cwd(),
+    (await text({
+        message: 'Enter a project directory:',
+        placeholder: 'Leave blank for current directory',
+        defaultValue: '.',
+        validate: (value) => {
+            value = path.resolve(process.cwd(), value);
+            let isEmpty;
+
+            try {
+                const contents = fs.readdirSync(value);
+                isEmpty = contents.length === 0;
+            } catch {
+                isEmpty = true;
+            }
+
+            return isEmpty ? undefined : 'Directory is not empty!';
+        },
+    })) as string,
+);
+
+const manager = (await select({
+    message: 'Select a package manager:',
+    options: [
+        { label: 'npm', value: 'npm' },
+        { label: 'pnpm', value: 'pnpm' },
+        { label: 'yarn', value: 'yarn' },
+    ],
+})) as PackageManager;
+
+const type = (await select({
+    message: 'Select a module type:',
+    options: [
+        { label: 'CommonJS', value: 'cjs', hint: `${hints.require} & ${hints.module}` },
+        { label: 'ES Modules', value: 'esm', hint: `${hints.import} & ${hints.export}` },
+    ],
+})) as ModuleType;
+
+const token = (await password({
+    message: 'Enter your bot token:',
+    mask: colors.gray('*'),
+})) as string;
+
+const installNow = await confirm({
+    message: 'Install dependencies now?',
+    initialValue: true,
+});
+
+outro(colors.cyan('Setup complete.'));
+
+await setup({ manager, dir, token, type });
+await copyTemplates({ type, dir, lang: 'js' });
+
+if (installNow) {
+    await installDeps({ manager, dir, lang: 'js', stdio: 'inherit' });
+}
+
+console.log(outroMsg);

packages/create-commandkit/src/types/index.ts

@@ -0,0 +1,3 @@
+export type Language = 'js';
+export type PackageManager = 'npm' | 'pnpm' | 'yarn';
+export type ModuleType = 'esm' | 'cjs';

packages/create-commandkit/src/utils.ts

@@ -0,0 +1,52 @@
+import colors from 'colors';
+import gradient from 'gradient-string';
+import path from 'node:path';
+import url from 'node:url';
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+export const templates = {
+    js: {
+        esm: `${__dirname}/../templates/JavaScript/esm`,
+        cjs: `${__dirname}/../templates/JavaScript/cjs`,
+    },
+};
+
+export const textColors = {
+    commandkit: ['#fdba74', '#e4a5a2', '#c288de', '#b27bf9'],
+    import: ['#c586c0', '#c586c0'],
+    export: ['#569cd6', '#569cd6'],
+    require: ['#dcdcaa', '#dcdcaa'],
+    module: ['#4ec9b0', '#4ec9b0'],
+    js: ['#f7e01c', '#f7e01c'],
+    ts: ['#2480c5', '#2480c5'],
+};
+
+export const dependencies = {
+    js: ['commandkit', 'discord.js', 'dotenv'],
+};
+
+export const commands = {
+    init: {
+        npm: 'npm init -y',
+        yarn: 'yarn init -y; yarn config set nodeLinker node-modules',
+        pnpm: 'pnpm init',
+    },
+};
+
+export const hints = {
+    import: gradient(textColors.import)('import'),
+    export: gradient(textColors.export)('export'),
+    require: gradient(textColors.require)('require'),
+    module: gradient(textColors.module)('exports'),
+    javascript: gradient(textColors.js)('JavaScript'),
+    typescript: gradient(textColors.ts)('TypeScript'),
+};
+
+export const commandkit = gradient(textColors.commandkit)('CommandKit');
+export const outroMsg = `
+${gradient(textColors.commandkit)('Thank you for choosing CommandKit!')}
+
+• Documentation: ${colors.blue('https://commandkit.js.org')}
+• Join us on Discord: ${colors.blue('https://ctrl.lol/discord')}
+`;