@kvihaugen/create-frontend-app 1.0.3 → 1.0.5

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/workflows/build-and-publish.yaml

@@ -0,0 +1,35 @@
+name: Build and publish
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Update NPM
+        run: npm install -g npm@latest
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build --if-present
+
+      - name: Publish artifact
+        run: npm publish

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -1,129 +1,33 @@
 #!/usr/bin/env node
-import prompts from "prompts";
-import ExtraPackage from "./types/ExtraPackage";
-import chalk from "chalk";
-import promiseType from "./utils/functions/promiseType";
-import ora from "ora";
+import os from "node:os";
 import fs from "node:fs";
+import degit from "degit";
 import path from "node:path";
-import postcssConfig from "./text-templates/postcss-config";
-import nextLayout from "./text-templates/next-layout";
-import nextPage from "./text-templates/next-page";
-import providersComponent from "./text-templates/providers-component";
-import globalCssNotifs from "./text-templates/global-css-notifs";
-import globalCss from "./text-templates/global-css";
-import languageResource from "./text-templates/language-resource";
-import i18nConfig from "./text-templates/i18n-config";
-import parentPropsType from "./text-templates/parent-props-type";
 import { execSync } from "node:child_process";
+const cwd = process.cwd();
 (async () => {
-    console.log(chalk.cyan("🚀 Create a new frontend app!"));
-    // Prompting
-    const response = await prompts([
-        {
-            type: "text",
-            name: "name",
-            message: "Project name:",
-            initial: "app"
-        },
-        {
-            type: "multiselect",
-            name: "extraPackages",
-            message: "Extra packages:",
-            choices: [
-                {
-                    title: "Mantine UI - Notifications",
-                    value: ExtraPackage.MantineUiNotifications
-                },
-                {
-                    title: "NextAuth",
-                    value: ExtraPackage.NextAuth
-                }
-            ]
-        }
-    ]);
-    const { name, extraPackages } = response;
-    if (!name || !extraPackages)
-        process.exit(1);
-    if (!promiseType(name))
-        return;
-    if (!promiseType(extraPackages))
-        return;
-    // Creating Next.js project
-    {
-        const spinner = ora("Creating Next.js project...").start();
-        try {
-            execSync("npx create-next-app . --yes --empty");
-            spinner.succeed(chalk.green("Created Next.js project!"));
-        }
-        catch {
-            spinner.fail(chalk.red("Could not create Next.js project!"));
-            process.exit(1);
-        }
-    }
-    // Installing additional packages
-    const packagesToInstall = [
-        "@mantine/core",
-        "@mantine/hooks",
-        "react-i18next",
-        "i18next",
-        ...(extraPackages.includes(ExtraPackage.MantineUiNotifications)
-            ? ["@mantine/notifications"]
-            : []),
-        ...(extraPackages.includes(ExtraPackage.NextAuth)
-            ? ["next-auth"]
-            : [])
-    ];
-    for (const pkg of packagesToInstall) {
-        const spinner = ora(`Installing ${pkg}...`).start();
-        try {
-            execSync(`npm i ${pkg}`);
-            spinner.succeed(chalk.green(`Installed ${pkg}!`));
-        }
-        catch {
-            spinner.fail(chalk.red(`Could not install ${pkg}!`));
-            process.exit(1);
-        }
-    }
-    // Setting up PostCSS
-    {
-        const spinner = ora("Setting up PostCSS...").start();
-        try {
-            execSync("npm i --save-dev postcss postcss-preset-mantine postcss-simple-vars");
-            fs.writeFileSync(path.join(process.cwd(), "postcss.config.mjs"), postcssConfig);
-            spinner.succeed(chalk.green("Set up PostCSS!"));
-        }
-        catch {
-            spinner.fail(chalk.red("Could not set up PostCSS!"));
-            process.exit(1);
-        }
-    }
-    // Setting up custom files
-    {
-        const spinner = ora("Setting up custom files...").start();
-        try {
-            fs.rmSync(path.join(process.cwd(), "src", "app"), { recursive: true, force: true });
-            fs.rmSync(path.join(process.cwd(), "README.md"), { recursive: true, force: true });
-            fs.mkdirSync(path.join(process.cwd(), "src", "app"), { recursive: true });
-            fs.mkdirSync(path.join(process.cwd(), "src", "components", "common"), { recursive: true });
-            fs.mkdirSync(path.join(process.cwd(), "src", "css"), { recursive: true });
-            fs.mkdirSync(path.join(process.cwd(), "src", "utils", "i18n", "resources"), { recursive: true });
-            fs.mkdirSync(path.join(process.cwd(), "src", "types", "common"), { recursive: true });
-            fs.writeFileSync(path.join(process.cwd(), "src", "app", "layout.tsx"), nextLayout);
-            fs.writeFileSync(path.join(process.cwd(), "src", "app", "page.tsx"), nextPage);
-            fs.writeFileSync(path.join(process.cwd(), "src", "components", "common", "Providers.tsx"), providersComponent);
-            fs.writeFileSync(path.join(process.cwd(), "src", "css", "globals.css"), extraPackages.includes(ExtraPackage.MantineUiNotifications)
-                ? globalCssNotifs
-                : globalCss);
-            fs.writeFileSync(path.join(process.cwd(), "src", "utils", "i18n", "resources", "en.json"), languageResource);
-            fs.writeFileSync(path.join(process.cwd(), "src", "utils", "i18n", "index.ts"), i18nConfig);
-            fs.writeFileSync(path.join(process.cwd(), "src", "types", "common", "ParentProps.ts"), parentPropsType);
-            spinner.succeed(chalk.green("Set up custom files!"));
-        }
-        catch (error) {
-            spinner.fail(chalk.red("Could not set up custom files!"));
-            console.log(error);
-            process.exit(1);
-        }
+    console.log("🔃 Creating frontend app...");
+    const emitter = degit("LarsSK06/frontend-template");
+    const tempFolderPath = path.join(os.tmpdir(), `${Date.now()}-create-frontend-app`);
+    await emitter.clone(tempFolderPath);
+    execSync("npx create-next-app . --yes --empty --skip-install");
+    for (const objName of [
+        "src",
+        "public",
+        "postcss.config.mjs",
+        "next.config.ts"
+    ]) {
+        const absoluteCwdPath = path.join(cwd, objName);
+        const absoluteTempFolderPath = path.join(tempFolderPath, objName);
+        if (fs.existsSync(absoluteCwdPath)) {
+            const stat = fs.statSync(absoluteCwdPath);
+            if (stat.isFile())
+                fs.unlinkSync(absoluteCwdPath);
+            else
+                fs.rmSync(absoluteCwdPath, { recursive: true, force: true });
+        }
+        fs.cpSync(absoluteTempFolderPath, absoluteCwdPath, { recursive: true });
     }
+    console.log("✅ Created frontend app!");
 })();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;AAE1B,CAAC,KAAK,IAAI,EAAE;IAER,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,KAAK,CAAC,4BAA4B,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,sBAAsB,CAAC,CAAC;IAEnF,MAAM,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAEpC,QAAQ,CAAC,oDAAoD,CAAC,CAAC;IAE/D,KAAK,MAAM,OAAO,IAAI;QAClB,KAAK;QACL,QAAQ;QACR,oBAAoB;QACpB,gBAAgB;KACnB,EAAE,CAAC;QACA,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAChD,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAElE,IAAI,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAE1C,IAAI,IAAI,CAAC,MAAM,EAAE;gBAAE,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;;gBAC7C,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;QAED,EAAE,CAAC,MAAM,CACL,sBAAsB,EACtB,eAAe,EACf,EAAE,SAAS,EAAE,IAAI,EAAE,CACtB,CAAC;IACN,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;AAE3C,CAAC,CAAC,EAAE,CAAC"}

package/package.json

@@ -1,32 +1,27 @@
 {
     "name": "@kvihaugen/create-frontend-app",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "main": "dist/index.js",
     "type": "module",
-    "publishConfig": {
-        "access": "public"
-    },
     "bin": {
-        "create-frontend-app": "dist/index.js"
+        "create-frontend-app": "./dist/index.js"
     },
     "scripts": {
-        "build": "tsc"
+        "build": "tsc",
+        "prepublishOnly": "npm run build"
     },
-    "files": ["dist"],
     "author": "",
     "license": "MIT",
     "description": "",
-    "dependencies": {
-        "chalk": "^5.6.2",
-        "ora": "^9.0.0",
-        "prompts": "^2.4.2"
-    },
     "devDependencies": {
-        "@types/chalk": "^0.4.31",
+        "@types/degit": "^2.8.6",
         "@types/node": "^24.10.0",
-        "@types/ora": "^3.1.0",
         "@types/prompts": "^2.4.9",
         "ts-node": "^10.9.2",
         "typescript": "^5.9.3"
+    },
+    "dependencies": {
+        "degit": "^2.8.4",
+        "prompts": "^2.4.2"
     }
 }

package/src/index.ts

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+import os from "node:os";
+import fs from "node:fs";
+import degit from "degit";
+import path from "node:path";
+
+import { execSync } from "node:child_process";
+
+const cwd = process.cwd();
+
+(async () => {
+
+    console.log("🔃 Creating frontend app...");
+
+    const emitter = degit("LarsSK06/frontend-template");
+
+    const tempFolderPath = path.join(os.tmpdir(), `${Date.now()}-create-frontend-app`);
+
+    await emitter.clone(tempFolderPath);
+
+    execSync("npx create-next-app . --yes --empty --skip-install");
+
+    for (const objName of [
+        "src",
+        "public",
+        "postcss.config.mjs",
+        "next.config.ts"
+    ]) {
+        const absoluteCwdPath = path.join(cwd, objName);
+        const absoluteTempFolderPath = path.join(tempFolderPath, objName);
+        
+        if (fs.existsSync(absoluteCwdPath)) {
+            const stat = fs.statSync(absoluteCwdPath);
+
+            if (stat.isFile()) fs.unlinkSync(absoluteCwdPath);
+            else fs.rmSync(absoluteCwdPath, { recursive: true, force: true });
+        }
+
+        fs.cpSync(
+            absoluteTempFolderPath,
+            absoluteCwdPath,
+            { recursive: true }
+        );
+    }
+
+    console.log("✅ Created frontend app!");
+
+})();

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./dist",
+        "module": "nodenext",
+        "target": "esnext",
+        "types": ["node"],
+        "sourceMap": true,
+        "declaration": true,
+        "declarationMap": true,
+        "noUncheckedIndexedAccess": true,
+        "exactOptionalPropertyTypes": true,
+        // "noImplicitReturns": true,
+        // "noImplicitOverride": true,
+        // "noUnusedLocals": true,
+        // "noUnusedParameters": true,
+        // "noFallthroughCasesInSwitch": true,
+        // "noPropertyAccessFromIndexSignature": true,
+        "strict": true,
+        "jsx": "react-jsx",
+        "verbatimModuleSyntax": true,
+        "isolatedModules": true,
+        "noUncheckedSideEffectImports": true,
+        "moduleDetection": "force",
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "dist"]
+}

package/dist/text-templates/global-css-notifs.js

@@ -1,8 +0,0 @@
-const globalCssNotifs = `
-@layer theme, base, components, mantine, utilities;
-
-@import "tailwindcss";
-@import "@mantine/core/styles.layer.css";
-@import "@mantine/notifications/styles.layer.css";
-`.trim();
-export default globalCssNotifs;

package/dist/text-templates/global-css.js

@@ -1,7 +0,0 @@
-const globalCss = `
-@layer theme, base, components, mantine, utilities;
-
-@import "tailwindcss";
-@import "@mantine/core/styles.layer.css";
-`.trim();
-export default globalCss;

package/dist/text-templates/i18n-config.js

@@ -1,18 +0,0 @@
-const i18nConfig = `
-import i18next from "i18next";
-import en from "./resources/en.json";
-
-import { initReactI18next } from "react-i18next";
-
-i18next
-    .use(initReactI18next)
-    .init({
-        resources: { en },
-        lng: "en",
-        fallbackLng: "en",
-        interpolation: {
-            escapeValue: false
-        }
-    });
-`.trim();
-export default i18nConfig;

package/dist/text-templates/language-resource.js

@@ -1,10 +0,0 @@
-const languageResource = `
-{
-    "translation": {
-        "common": {
-            "HelloWorld": "Hello world!"
-        }
-    }
-}
-`.trim();
-export default languageResource;

package/dist/text-templates/next-layout.js

@@ -1,90 +0,0 @@
-const nextLayout = `
-import { Metadata } from "next";
-import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
-
-import ParentProps from "@/types/common/ParentProps";
-import Providers from "@/components/common/Providers";
-
-import "@/css/globals.css";
-
-// https://seostudio.tools/meta-tag-generator
-// https://www.searchenginejournal.com/important-tags-seo/156440/
-
-export const metadata = {
-    title: "Frontend template",
-    description: "My preferred template for frontend projects - tailored to my needs",
-    applicationName: "Frontend template",
-    authors: [{
-        url: "https://lars.kvihaugen.no",
-        name: "Lars Kvihaugen"
-    }],
-    generator: "Next.js",
-    keywords: [
-        "next.js",
-        "next",
-        "react",
-        "frontend",
-        "development",
-        "dev"
-    ],
-    referrer: "origin",
-    creator: "Lars Kvihaugen",
-    publisher: "Lars Kvihaugen",
-    robots: {
-        index: true,
-        follow: true
-    },
-    alternates: {
-        canonical: "https://frontend-template.kvihaugen.no",
-        languages: {
-            en: "https://frontend-template.kvihaugen.no",
-            no: "https://no.frontend-template.kvihaugen.no"
-        }
-    },
-    icons: {
-        icon: [{
-            url: "/icons/icon-128x128.png",
-            sizes: "128x128"
-        }],
-        apple: [{
-            url: "/icons/icon-apple/128x128.png",
-            sizes: "128x128"
-        }]
-    },
-    manifest: "/.well-known/app.webmanifest",
-    openGraph: {
-        type: "website",
-        title: "Frontend template",
-        description: "My preferred template for frontend projects - tailored to my needs",
-        emails: ["lars@kvihaugen.no"],
-        phoneNumbers: ["+00 000 00 000"],
-        siteName: "Frontend template",
-        locale: "en",
-        alternateLocale: ["no"],
-        images: [{
-            url: "/images/hero.png",
-            alt: "The page hero",
-            width: 1920,
-            height: 1080
-        }],
-        url: "https://frontend-template.kvihaugen.no"
-    },
-    metadataBase: new URL("https://frontend-template.kvihaugen.no")
-} satisfies Metadata as Metadata;
-
-const RootLayout = ({ children }: ParentProps) => (
-    <html {...mantineHtmlProps}>
-        <head>
-            <ColorSchemeScript />
-        </head>
-        <body className="antialiased">
-            <Providers>
-                {children}
-            </Providers>
-        </body>
-    </html>
-);
-
-export default RootLayout;
-`.trim();
-export default nextLayout;

package/dist/text-templates/next-page.js

@@ -1,17 +0,0 @@
-const nextPage = `
-"use client";
-
-import { Button } from "@mantine/core";
-import { t } from "i18next";
-
-const Page = () => {
-    return (
-        <Button>
-            {t("common.HelloWorld")}
-        </Button>
-    );
-};
-
-export default Page;
-`.trim();
-export default nextPage;

package/dist/text-templates/parent-props-type.js

@@ -1,10 +0,0 @@
-const parentPropsType = `
-import { ReactNode } from "react";
-
-type ParentProps<T = ReactNode> = {
-    children?: T;
-};
-
-export default ParentProps;
-`.trim();
-export default parentPropsType;

package/dist/text-templates/postcss-config.js

@@ -1,20 +0,0 @@
-const postcssConfig = `
-const config = {
-    plugins: {
-        "@tailwindcss/postcss": {},
-        "postcss-preset-mantine": {},
-        "postcss-simple-vars": {
-            variables: {
-                "mantine-breakpoint-xs": "36em",
-                "mantine-breakpoint-sm": "48em",
-                "mantine-breakpoint-md": "62em",
-                "mantine-breakpoint-lg": "75em",
-                "mantine-breakpoint-xl": "88em",
-            },
-        },
-    },
-};
-
-export default config;
-`.trim();
-export default postcssConfig;

package/dist/text-templates/providers-component.js

@@ -1,20 +0,0 @@
-const providersComponent = `
-"use client";
-
-import ParentProps from "@/types/common/ParentProps";
-
-import { createTheme, MantineProvider } from "@mantine/core";
-
-import "@/utils/i18n";
-
-const theme = createTheme({});
-
-const Providers = ({ children }: ParentProps) => (
-    <MantineProvider theme={theme}>
-        {children}
-    </MantineProvider>
-);
-
-export default Providers;
-`.trim();
-export default providersComponent;

package/dist/types/ExtraPackage.js

@@ -1,6 +0,0 @@
-var ExtraPackage;
-(function (ExtraPackage) {
-    ExtraPackage[ExtraPackage["MantineUiNotifications"] = 0] = "MantineUiNotifications";
-    ExtraPackage[ExtraPackage["NextAuth"] = 1] = "NextAuth";
-})(ExtraPackage || (ExtraPackage = {}));
-export default ExtraPackage;

package/dist/utils/functions/promiseType.js

@@ -1,2 +0,0 @@
-const promiseType = (v) => true;
-export default promiseType;