@kvihaugen/create-frontend-app 1.0.1 → 1.0.3

package/package.json

@@ -1,7 +1,8 @@
 {
     "name": "@kvihaugen/create-frontend-app",
-    "version": "1.0.1",
-    "main": "index.js",
+    "version": "1.0.3",
+    "main": "dist/index.js",
+    "type": "module",
     "publishConfig": {
         "access": "public"
     },
@@ -11,6 +12,7 @@
     "scripts": {
         "build": "tsc"
     },
+    "files": ["dist"],
     "author": "",
     "license": "MIT",
     "description": "",

package/.gitattributes

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

package/.github/workflows/publish.yaml

@@ -1,37 +0,0 @@
-name: Publish to NPM
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-
-    permissions:
-      contents: write
-      packages: write
-      id-token: write
-
-    steps:
-
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: 'https://registry.npmjs.org/'
-      
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build project
-        run: npm run build
-
-      - name: Publish to NPM registry
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npm publish

package/src/index.ts

@@ -1,222 +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<string>(name)) return;
-    if (!promiseType<number[]>(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/src/text-templates/global-css-notifs.ts

@@ -1,9 +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/src/text-templates/global-css.ts

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

package/src/text-templates/i18n-config.ts

@@ -1,19 +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/src/text-templates/language-resource.ts

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

package/src/text-templates/next-layout.ts

@@ -1,91 +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/src/text-templates/next-page.ts

@@ -1,18 +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/src/text-templates/parent-props-type.ts

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

package/src/text-templates/postcss-config.ts

@@ -1,21 +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/src/text-templates/providers-component.ts

@@ -1,21 +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/src/types/ExtraPackage.ts

@@ -1,6 +0,0 @@
-enum ExtraPackage {
-    MantineUiNotifications,
-    NextAuth
-}
-
-export default ExtraPackage;

package/src/utils/functions/promiseType.ts

@@ -1,3 +0,0 @@
-const promiseType = <T>(v: any): v is T => true;
-
-export default promiseType;

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es2020",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "outDir": "dist",
-        "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
-        "strict": true,
-        "skipLibCheck": true
-    },
-    "include": ["src"]
-}