@kvihaugen/create-frontend-app 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kvihaugen/create-frontend-app",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "main": "dist/index.js",
     "type": "module",
     "publishConfig": {

package/dist/index.js

@@ -1,129 +0,0 @@
-#!/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 fs from "node:fs";
-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";
-(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);
-        }
-    }
-})();

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;