create-next-stack - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

lib/main/helpers/sort-by-order.d.ts

+/**
+ * Compares two string values by their order in an array.
+ * @param a a string value
+ * @param b a string value
+ * @param order an array of string values specifying the order
+ * @returns a negative number if `a` comes before `b` in `order`, a positive number if `b` comes before `a` in `order`, or `0` if `a` and `b` are equal in `order` or if either `a` or `b` are not in `order`
+ */
+export declare const compareByOrder: (a: string, b: string, order: string[]) => number;

lib/main/helpers/sort-by-order.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compareByOrder = void 0;
+const logging_1 = require("../logging");
+/**
+ * Compares two string values by their order in an array.
+ * @param a a string value
+ * @param b a string value
+ * @param order an array of string values specifying the order
+ * @returns a negative number if `a` comes before `b` in `order`, a positive number if `b` comes before `a` in `order`, or `0` if `a` and `b` are equal in `order` or if either `a` or `b` are not in `order`
+ */
+const compareByOrder = (a, b, order) => {
+    const aIndex = order.indexOf(a);
+    const bIndex = order.indexOf(b);
+    if (aIndex === -1 || bIndex === -1) {
+        (0, logging_1.logDebug)(`WARNING: One or both of the values being compared are not in the order array. This should be caught by a test.`);
+        return 0;
+    }
+    return aIndex - bIndex;
+};
+exports.compareByOrder = compareByOrder;

lib/main/plugins/create-next-stack/sort-orders/scripts.d.ts

+import { ValidCNSInputs } from "../../../create-next-stack-types";
+export declare const scriptsSortOrder: string[];
+export declare const getSortedFilteredScripts: (inputs: ValidCNSInputs) => import("../../../helpers/deeply-readonly").DeeplyReadonlyObject<{
+    name: string;
+    description: string;
+    command: string;
+}>[];

lib/main/plugins/create-next-stack/sort-orders/scripts.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSortedFilteredScripts = exports.scriptsSortOrder = void 0;
+const sort_by_order_1 = require("../../../helpers/sort-by-order");
+const setup_1 = require("../../../setup/setup");
+exports.scriptsSortOrder = [
+    "prepare",
+    "test",
+    "dev",
+    "build",
+    "start",
+    "lint",
+    "format",
+    "format:check",
+];
+const getSortedFilteredScripts = (inputs) => {
+    const pluginScripts = (0, setup_1.filterPlugins)(inputs).flatMap((plugin) => { var _a; return (_a = plugin.scripts) !== null && _a !== void 0 ? _a : []; });
+    return pluginScripts.sort((a, b) => (0, sort_by_order_1.compareByOrder)(a.name, b.name, exports.scriptsSortOrder));
+};
+exports.getSortedFilteredScripts = getSortedFilteredScripts;

lib/main/plugins/c...ext-stack/sort-orders/scripts.test.d.ts

+export {};

lib/main/plugins/c...-next-stack/sort-orders/scripts.test.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const globals_1 = require("@jest/globals");
+const setup_1 = require("../../../setup/setup");
+const scripts_1 = require("./scripts");
+(0, globals_1.test)("`scriptsSortOrder` contains no duplicates", () => {
+    const seenScripts = new Set();
+    for (const script of scripts_1.scriptsSortOrder) {
+        if (seenScripts.has(script)) {
+            throw new Error(`Duplicate script with name "${script}" found in sort-order.ts`);
+        }
+        seenScripts.add(script);
+    }
+});
+(0, globals_1.test)("`scriptsSortOrder` includes all plugins' scripts", () => {
+    const requiredScripts = setup_1.plugins.flatMap((plugin) => plugin.scripts //
+        ? Object.values(plugin.scripts).map((script) => script.name)
+        : []);
+    const actualScriptIDs = new Set(scripts_1.scriptsSortOrder);
+    for (const requiredScript of requiredScripts) {
+        if (!actualScriptIDs.has(requiredScript)) {
+            throw new Error(`Missing script with name "${requiredScript}" in sort-order.ts`);
+        }
+    }
+});

lib/main/plugins/c...ext-stack/sort-orders/technologies.d.ts

+import { ValidCNSInputs } from "../../../create-next-stack-types";
+import { DeeplyReadonly } from "../../../helpers/deeply-readonly";
+import { Technology } from "../../../plugin";
+export declare const technologiesSortOrder: string[];
+export declare const getTechnologies: (inputs: ValidCNSInputs) => Array<Omit<DeeplyReadonly<Technology>, "id">>;

lib/main/plugins/c...-next-stack/sort-orders/technologies.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTechnologies = exports.technologiesSortOrder = void 0;
+const sort_by_order_1 = require("../../../helpers/sort-by-order");
+const setup_1 = require("../../../setup/setup");
+exports.technologiesSortOrder = [
+    "next",
+    "react",
+    "typescript",
+    "emotion",
+    "styledComponents",
+    "tailwindCSS",
+    "sass",
+    "cssModules",
+    "chakraUI",
+    "materialUI",
+    "reactHookForm",
+    "formik",
+    "framerMotion",
+    "eslint",
+    "prettier",
+    "husky",
+    "lintStaged",
+    "pnpm",
+    "yarn",
+    "npm",
+    "githubActions",
+    "reactIcons",
+];
+const getTechnologies = (inputs) => {
+    return (0, setup_1.filterPlugins)(inputs)
+        .flatMap((plugin) => { var _a; return (_a = plugin.technologies) !== null && _a !== void 0 ? _a : []; })
+        .sort((a, b) => (0, sort_by_order_1.compareByOrder)(a.id, b.id, exports.technologiesSortOrder))
+        .map(({ id, ...rest }) => ({
+        ...rest,
+    }));
+};
+exports.getTechnologies = getTechnologies;

lib/main/plugins/c...tack/sort-orders/technologies.test.d.ts

+export {};

lib/main/plugins/c...-stack/sort-orders/technologies.test.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const globals_1 = require("@jest/globals");
+const setup_1 = require("../../../setup/setup");
+const technologies_1 = require("./technologies");
+(0, globals_1.test)("`technologiesSortOrder` contains no duplicates", () => {
+    const seenTechnologies = new Set();
+    for (const technology of technologies_1.technologiesSortOrder) {
+        if (seenTechnologies.has(technology)) {
+            throw new Error(`Duplicate technology with name "${technology}" found in sort-order.ts`);
+        }
+        seenTechnologies.add(technology);
+    }
+});
+(0, globals_1.test)("`technologiesSortOrder` includes all plugins' technologies", () => {
+    const requiredTechnologyIDs = setup_1.plugins.flatMap((plugin) => plugin.technologies //
+        ? Object.values(plugin.technologies).map((technology) => technology.id)
+        : []);
+    const actualTechnologyIDs = new Set(technologies_1.technologiesSortOrder);
+    for (const requiredTechnology of requiredTechnologyIDs) {
+        if (!actualTechnologyIDs.has(requiredTechnology)) {
+            throw new Error(`Missing technology with name "${requiredTechnology}" in sort-order.ts`);
+        }
+    }
+});

lib/main/setup/plugins.test.d.ts

+export {};

lib/main/setup/plugins.test.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const globals_1 = require("@jest/globals");
+const setup_1 = require("./setup");
+(0, globals_1.test)("`plugins` contains no duplicates", () => {
+    const seenPluginIDs = new Set();
+    for (const plugin of setup_1.plugins) {
+        if (seenPluginIDs.has(plugin.id)) {
+            throw new Error(`Duplicate plugin with ID "${plugin.id}" found in setup.ts`);
+        }
+        seenPluginIDs.add(plugin.id);
+    }
+});

lib/main/steps.d.ts

+import { Step } from "./plugin";
+export declare const steps: Step[];

lib/main/steps.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.steps = void 0;
+const chakra_ui_1 = require("./plugins/chakra-ui/chakra-ui");
+const create_next_stack_1 = require("./plugins/create-next-stack/create-next-stack");
+const css_modules_1 = require("./plugins/css-modules/css-modules");
+const emotion_1 = require("./plugins/emotion");
+const formatting_pre_commit_hook_1 = require("./plugins/formatting-pre-commit-hook");
+const github_actions_1 = require("./plugins/github-actions");
+const material_ui_1 = require("./plugins/material-ui/material-ui");
+const next_1 = require("./plugins/next");
+const pnpm_1 = require("./plugins/pnpm");
+const prettier_1 = require("./plugins/prettier");
+const sass_1 = require("./plugins/sass/sass");
+const tailwind_css_1 = require("./plugins/tailwind-css");
+const yarn_1 = require("./plugins/yarn");
+exports.steps = [
+    // Update package manager
+    pnpm_1.pnpmPlugin.steps.updatePnpm,
+    yarn_1.yarnPlugin.steps.updateYarn,
+    // Create Next App
+    next_1.nextPlugin.steps.createNextApp,
+    next_1.nextPlugin.steps.removeOfficialCNAContent,
+    // Install dependencies
+    create_next_stack_1.createNextStackPlugin.steps.installDependencies,
+    // Configuration
+    create_next_stack_1.createNextStackPlugin.steps.addScripts,
+    create_next_stack_1.createNextStackPlugin.steps.addGitAttributes,
+    next_1.nextPlugin.steps.addNextConfig,
+    // Styling
+    tailwind_css_1.tailwindCSSPlugin.steps.setUpTailwindCss,
+    css_modules_1.cssModulesPlugin.steps.setUpCssModules,
+    sass_1.sassPlugin.steps.setUpSass,
+    emotion_1.emotionPlugin.steps.setUpEmotion,
+    // Formatting
+    prettier_1.prettierPlugin.steps.setUpPrettier,
+    formatting_pre_commit_hook_1.formattingPreCommitHookPlugin.steps.setUpFormattingPreCommitHook,
+    // Continuous integration
+    github_actions_1.githubActionsPlugin.steps.addGithubWorkflowStep,
+    // Add/generate content
+    create_next_stack_1.createNextStackPlugin.steps.copyAssets,
+    create_next_stack_1.createNextStackPlugin.steps.addContent,
+    create_next_stack_1.createNextStackPlugin.steps.addReadme,
+    // Component libraries
+    chakra_ui_1.chakraUIPlugin.steps.setUpChakraUI,
+    material_ui_1.materialUIPlugin.steps.setUpMaterialUI,
+    // Uninstall temporary dependencies
+    create_next_stack_1.createNextStackPlugin.steps.uninstallTemporaryDependencies,
+    // Format & initial commit
+    create_next_stack_1.createNextStackPlugin.steps.formatProject,
+    create_next_stack_1.createNextStackPlugin.steps.initialCommit,
+];

lib/main/commands/create-next-stack.d.ts

 import { Command } from "@oclif/core";
 export default class CreateNextStack extends Command {
-    static description: string;
     static usage: string;
     static args: {
-        appName: import("@oclif/core/lib/interfaces/parser").Arg<string | undefined, Record<string, unknown>>;
+        app_name: import("@oclif/core/lib/interfaces/parser").Arg<string, Record<string, unknown>>;
     };
@@ -12,5 +11,5 @@ static flags: {
         debug: import("@oclif/core/lib/interfaces").BooleanFlag<boolean>;
-        "package-manager": import("@oclif/core/lib/interfaces").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser").CustomOptions>;
+        "package-manager": import("@oclif/core/lib/interfaces").OptionFlag<string, import("@oclif/core/lib/interfaces/parser").CustomOptions>;
         prettier: import("@oclif/core/lib/interfaces").BooleanFlag<boolean>;
-        styling: import("@oclif/core/lib/interfaces").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser").CustomOptions>;
+        styling: import("@oclif/core/lib/interfaces").OptionFlag<string, import("@oclif/core/lib/interfaces/parser").CustomOptions>;
         chakra: import("@oclif/core/lib/interfaces").BooleanFlag<boolean>;
@@ -17,0 +16,0 @@ "material-ui": import("@oclif/core/lib/interfaces").BooleanFlag<boolean>;

lib/main/commands/create-next-stack.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const core_1 = require("@oclif/core");
-const chalk_1 = tslib_1.__importDefault(require("chalk"));
-const endent_1 = tslib_1.__importDefault(require("endent"));
 const command_instance_1 = require("../command-instance");
 const create_next_stack_types_1 = require("../create-next-stack-types");
 const exit_with_error_1 = require("../helpers/exit-with-error");
-const logging_1 = require("../logging");
 const setup_1 = require("../setup/setup");
@@ -16,27 +12,12 @@ class CreateNextStack extends core_1.Command {
         try {
-            const { args: weaklyTypedArgs, flags: weaklyTypedFlags } = await this.parse(CreateNextStack);
-            const args = weaklyTypedArgs;
-            const flags = weaklyTypedFlags;
+            const { args, flags } = await this.parse(CreateNextStack);
             if (flags.debug)
                 process.env["DEBUG"] = "true";
-            if (calledWithoutFlags(flags)) {
-                (0, logging_1.logInfo)();
-                (0, logging_1.logInfo)((0, endent_1.default) `
-          Create Next Stack does not support being run without flags.
-          
-              ${chalk_1.default.cyan `Please visit ${chalk_1.default.bold `https://create-next-stack.com/`} to pick your technologies.`}
-          
-              You can also use the --help flag for a list of available flags.
-        `);
-                (0, logging_1.logInfo)();
+            if (!(0, create_next_stack_types_1.validateArgs)(args)) {
+                process.exit(1); // This tells TypeScript that this block is unreachable. validateArgs(args) either throws or returns true.
             }
-            else {
-                if (!(0, create_next_stack_types_1.validateArgs)(args)) {
-                    process.exit(1); // This tells TypeScript that this block is unreachable. validateArgs(args) either throws or returns true.
-                }
-                if (!(0, create_next_stack_types_1.validateFlags)(flags)) {
-                    process.exit(1); // This tells TypeScript that this block is unreachable. validateFlags(flags) either throws or returns true.
-                }
-                await (0, setup_1.performSetupSteps)({ args, flags });
+            if (!(0, create_next_stack_types_1.validateFlags)(flags)) {
+                process.exit(1); // This tells TypeScript that this block is unreachable. validateFlags(flags) either throws or returns true.
             }
+            await (0, setup_1.performSetupSteps)({ args, flags });
         }
@@ -49,8 +30,7 @@ catch (error) {
 exports.default = CreateNextStack;
-CreateNextStack.description = "Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.";
 CreateNextStack.usage = "[APP_NAME] [FLAGS]"; // Without "create-next-stack" as OCLIF adds this, even though this is a single command CLI.
 CreateNextStack.args = {
-    appName: core_1.Args.string({
+    app_name: core_1.Args.string({
         description: `The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"`,
-        required: false,
+        required: true,
     }),
@@ -73,2 +53,3 @@ };
     "package-manager": core_1.Flags.string({
+        required: true,
         options: create_next_stack_types_1.writablePackageManagerOptions,
@@ -83,2 +64,3 @@ description: "Sets the preferred package manager. (Required)",
     styling: core_1.Flags.string({
+        required: true,
         options: create_next_stack_types_1.writableStylingOptions,
@@ -119,8 +101,1 @@ description: `Sets the preferred styling method. (Required) <styling-method> = ${create_next_stack_types_1.writableStylingOptions.join("|")}`,
 };
-const calledWithoutFlags = (flags) => {
-    const numOfAllFlags = Object.keys(flags).length;
-    let numOfNonGeneralFlags = numOfAllFlags;
-    if (flags.debug != null)
-        numOfNonGeneralFlags--;
-    return numOfNonGeneralFlags === 0;
-};

lib/main/create-next-stack-types.d.ts

@@ -1,2 +0,1 @@
-import { UnknownObject } from "./helpers/is-unknown-object";
 /**
@@ -11,5 +10,5 @@ * This function is only used to retrieve the ReturnType of a call to `createNextStackInstance.parse(CreateNextStack)`.
     debug: boolean;
-    "package-manager": string | undefined;
+    "package-manager": string;
     prettier: boolean;
-    styling: string | undefined;
+    styling: string;
     chakra: boolean;
@@ -26,7 +25,7 @@ "material-ui": boolean;
 }, {
-    appName: string | undefined;
+    app_name: string;
 }>>;
 export type CreateNextStackParserOutput = ReturnType<typeof temporaryWrapperForTypeSafety>;
-export type CreateNextStackArgs = UnknownObject;
-export type CreateNextStackFlags = Partial<Awaited<CreateNextStackParserOutput>["flags"]>;
+export type CreateNextStackArgs = Awaited<CreateNextStackParserOutput>["args"];
+export type CreateNextStackFlags = Awaited<CreateNextStackParserOutput>["flags"];
 export declare const packageManagerOptions: readonly ["pnpm", "yarn", "npm"];
@@ -38,6 +37,5 @@ export type PackageManager = (typeof packageManagerOptions)[number];
 export declare const writableStylingOptions: ["emotion", "styled-components", "tailwind-css", "css-modules", "css-modules-with-sass"];
-export type ValidCreateNextStackArgs = CreateNextStackArgs & {
-    appName: string;
+export declare const validateArgs: (args: CreateNextStackArgs) => args is {
+    app_name: string;
 };
-export declare const validateArgs: (args: CreateNextStackArgs) => args is ValidCreateNextStackArgs;
 export type ValidCreateNextStackFlags = CreateNextStackFlags & {
@@ -49,5 +47,5 @@ "package-manager": PackageManager;
 export type ValidCNSInputs = {
-    args: ValidCreateNextStackArgs;
+    args: CreateNextStackArgs;
     flags: ValidCreateNextStackFlags;
 };
 export {};

lib/main/create-next-stack-types.js

@@ -28,7 +28,5 @@ "use strict";
 exports.writableStylingOptions = exports.stylingOptions;
+// Valid Args type and type guard
 const validateArgs = (args) => {
-    if (typeof args["appName"] !== "string") {
-        throw new TypeError('You are required to specify a name for your application. Read about the "appName" argument using --help.');
-    }
-    const appNameValidationResult = (0, validate_project_path_1.validateProjectPathInput)(args["appName"]);
+    const appNameValidationResult = (0, validate_project_path_1.validateProjectPathInput)(args.app_name);
     if (typeof appNameValidationResult === "string") {
@@ -42,8 +40,2 @@ throw new TypeError("Invalid app name: " + appNameValidationResult);
     // TODO: Define validator using zod.
-    if (typeof flags["package-manager"] !== "string") {
-        throw new Error('You are required to specify a package manager. Read about the "--package-manager" option using --help.');
-    }
-    if (typeof flags.styling !== "string") {
-        throw new Error('You are required to specify a styling method. Read about the "--styling" option using --help.');
-    }
     if (flags.chakra && flags.styling !== "emotion") {
@@ -50,0 +42,0 @@ throw new Error("Chakra UI (category: Component library, flag: --chakra) requires Emotion (category: Styling, flag: --styling=emotion).");

lib/main/helpers/exit-with-error.js

@@ -11,4 +11,10 @@ "use strict";
     }
+    else if (error instanceof core_1.Errors.CLIError) {
+        (0, logging_1.logError)(error.message);
+        process.exit(1);
+    }
     else if (error instanceof Error) {
-        if (error.stack != null) {
+        (0, logging_1.logError)("An unknown error occurred.");
+        if ((process.env.NODE_ENV === "development" || (0, in_debug_mode_1.inDebugMode)()) &&
+            error.stack != null) {
             (0, logging_1.logError)(error.stack);
@@ -15,0 +21,0 @@ }

lib/main/plugin.d.ts

@@ -5,2 +5,4 @@ import { NextConfig } from "next";
 type PluginConfig = DeeplyReadonly<{
+    /** ID that uniquely identifies the plugin */
+    id: string;
     /** Name of the plugin */
@@ -56,3 +58,5 @@ name: string;
 };
-type Technology = {
+export type Technology = {
+    /** ID that uniquely identified the technology across all plugins' technologies. */
+    id: string;
     /** The name of the technology. */
@@ -91,2 +95,4 @@ name: string;
 type RawStep = {
+    /** ID that uniquely identified the technology across all plugins' steps. */
+    id: string;
     /**
@@ -108,2 +114,4 @@ * `description` should be written in present continuous tense, without punctuation, and with a lowercase first letter unless the description starts with a name or similar.
 export declare const createPlugin: <TPluginConfig extends import("./helpers/deeply-readonly").DeeplyReadonlyObject<{
+    /** ID that uniquely identifies the plugin */
+    id: string;
     /** Name of the plugin */
@@ -110,0 +118,0 @@ name: string;

lib/main/plugins/chakra-ui/chakra-ui.d.ts

 export declare const chakraUIPlugin: import("../../plugin").Plugin<{
+    readonly id: "chakra-ui";
     readonly name: "Chakra UI";
@@ -16,2 +17,3 @@ readonly description: "Adds support for Chakra UI";
     readonly technologies: readonly [{
+        readonly id: "chakraUI";
         readonly name: "Chakra UI";
@@ -31,3 +33,4 @@ readonly description: "Chakra UI is a simple, modular, and accessible React component library that provides all the building blocks needed to build React user interfaces. It uses Emotion under the hood and includes components ranging from basic buttons and form input fields to tooltips and modals.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpChakraUI: {
+            readonly id: "setUpChakraUI";
             readonly description: "setting up Chakra UI";
@@ -34,0 +37,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/chakra-ui/chakra-ui.js

@@ -10,2 +10,3 @@ "use strict";
 exports.chakraUIPlugin = (0, plugin_1.createPlugin)({
+    id: "chakra-ui",
     name: "Chakra UI",
@@ -26,2 +27,3 @@ description: "Adds support for Chakra UI",
         {
+            id: "chakraUI",
             name: "Chakra UI",
@@ -37,3 +39,4 @@ description: "Chakra UI is a simple, modular, and accessible React component library that provides all the building blocks needed to build React user interfaces. It uses Emotion under the hood and includes components ranging from basic buttons and form input fields to tooltips and modals.",
     steps: {
-        setup: {
+        setUpChakraUI: {
+            id: "setUpChakraUI",
             description: "setting up Chakra UI",
@@ -40,0 +43,0 @@ run: async () => {

lib/main/plugins/c...ack/add-content/pages/generate-index.js

@@ -16,3 +16,3 @@ "use strict";
         <Head>
-          <title>${(0, get_project_name_of_path_1.getProjectNameOfPath)(args.appName)}</title>
+          <title>${(0, get_project_name_of_path_1.getProjectNameOfPath)(args.app_name)}</title>
           <meta name="description" content="Generated by Create Next Stack." />
@@ -19,0 +19,0 @@ </Head>

lib/main/plugins/c...ingPage/generate-LandingPageTemplate.js

@@ -23,3 +23,3 @@ "use strict";
       const onConfettiLoad = () => {
-        const key = "create-next-stack-hasShownConfetti-${encodeURI((0, get_project_name_of_path_1.getProjectNameOfPath)(inputs.args.appName))}";
+        const key = "create-next-stack-hasShownConfetti-${encodeURI((0, get_project_name_of_path_1.getProjectNameOfPath)(inputs.args.app_name))}";
         const hasShownConfetti = localStorage.getItem(key);
@@ -26,0 +26,0 @@ if (hasShownConfetti != null) return;

lib/main/plugins/c.../LandingPage/generate-technologies.d.ts

 import { ValidCNSInputs } from "../../../../../create-next-stack-types";
-export type Technology = {
+import { DeeplyReadonly } from "../../../../../helpers/deeply-readonly";
+export type Technology = DeeplyReadonly<{
     name: string;
@@ -9,3 +10,3 @@ description: string;
     }>;
-};
+}>;
 export declare const generateTechnologies: (inputs: ValidCNSInputs) => string;

lib/main/plugins/c...es/LandingPage/generate-technologies.js

@@ -7,5 +7,5 @@ "use strict";
 const stringify_1 = require("../../../../../helpers/stringify");
-const setup_1 = require("../../../../../setup/setup");
+const technologies_1 = require("../../../sort-orders/technologies");
 const generateTechnologies = (inputs) => {
-    const pluginTechnologies = (0, setup_1.filterPlugins)(inputs).flatMap((plugin) => { var _a; return (_a = plugin.technologies) !== null && _a !== void 0 ? _a : []; });
+    const technologies = (0, technologies_1.getTechnologies)(inputs);
     return (0, endent_1.default) `
@@ -20,5 +20,5 @@ export type Technology = {
     };
-    export const technologies: Technology[] = ${(0, stringify_1.stringify)(pluginTechnologies)};
+    export const technologies: Technology[] = ${(0, stringify_1.stringify)(technologies)};
   `;
 };
 exports.generateTechnologies = generateTechnologies;

lib/main/plugins/c...ext-stack/add-readme/generate-readme.js

@@ -14,3 +14,3 @@ "use strict";
     return (0, endent_1.default) `
-    # ${(0, get_project_name_of_path_1.getProjectNameOfPath)(args.appName)}
+    # ${(0, get_project_name_of_path_1.getProjectNameOfPath)(args.app_name)}
 
@@ -17,0 +17,0 @@ 🎉 Congratulations, your project was successfully generated with [Create Next Stack](https://www.create-next-stack.com/)!

lib/main/plugins/c...dd-readme/generate-script-table-rows.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateScriptTableRows = void 0;
-const setup_1 = require("../../../setup/setup");
+const scripts_1 = require("../sort-orders/scripts");
 const generateScriptTableRows = async (inputs) => {
-    const pluginScripts = (0, setup_1.filterPlugins)(inputs).flatMap((plugin) => { var _a; return (_a = plugin.scripts) !== null && _a !== void 0 ? _a : []; });
-    const scriptRowsString = pluginScripts
+    const scripts = (0, scripts_1.getSortedFilteredScripts)(inputs);
+    const scriptRowsString = scripts
         .map((script) => `|\`${script.name}\`|${script.description}|`)
@@ -9,0 +9,0 @@ .join("\n");

lib/main/plugins/c...eadme/generate-technology-table-rows.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTechnologyTableRows = void 0;
-const setup_1 = require("../../../setup/setup");
+const technologies_1 = require("../sort-orders/technologies");
 const generateTechnologyTableRows = async (inputs) => {
-    const technologies = (0, setup_1.filterPlugins)(inputs).flatMap(({ technologies }) => {
-        if (!technologies)
-            return [];
-        return technologies.map((technology) => ({
-            name: technology.name,
-            links: technology.links
-                .map((l) => `[${l.title}](${l.url})`)
-                .join(" - "),
-        }));
-    });
+    const technologies = (0, technologies_1.getTechnologies)(inputs).map((technology) => ({
+        name: technology.name,
+        links: technology.links.map((l) => `[${l.title}](${l.url})`).join(" - "),
+    }));
     return technologies
@@ -17,0 +11,0 @@ .map((technology) => `| ${technology.name} | ${technology.links} |`)

lib/main/plugins/create-next-stack/create-next-stack.d.ts

 export declare const createNextStackPlugin: import("../../plugin").Plugin<{
+    readonly id: "create-next-stack";
     readonly name: "Create Next Stack";
@@ -7,2 +8,3 @@ readonly description: "Adds various miscellaneous steps. Some necessities, some niceties.";
         readonly addScripts: {
+            readonly id: "addScripts";
             readonly description: "adding scripts to package.json";
@@ -12,2 +14,3 @@ readonly run: (inputs: import("../../create-next-stack-types").ValidCNSInputs) => Promise<void>;
         readonly copyAssets: {
+            readonly id: "copyAssets";
             readonly description: "copying static assets";
@@ -17,2 +20,3 @@ readonly run: () => Promise<void>;
         readonly addContent: {
+            readonly id: "addContent";
             readonly description: "adding content";
@@ -22,2 +26,3 @@ readonly run: (inputs: import("../../create-next-stack-types").ValidCNSInputs) => Promise<void>;
         readonly addReadme: {
+            readonly id: "addReadme";
             readonly description: "adding Readme";
@@ -27,2 +32,3 @@ readonly run: (inputs: import("../../create-next-stack-types").ValidCNSInputs) => Promise<void>;
         readonly initialCommit: {
+            readonly id: "initialCommit";
             readonly description: "adding initial commit";
@@ -33,2 +39,3 @@ readonly shouldRun: () => Promise<boolean>;
         readonly installDependencies: {
+            readonly id: "installDependencies";
             readonly description: "installing dependencies";
@@ -38,2 +45,3 @@ readonly run: (inputs: import("../../create-next-stack-types").ValidCNSInputs) => Promise<void>;
         readonly uninstallTemporaryDependencies: {
+            readonly id: "uninstallTemporaryDependencies";
             readonly description: "uninstalling temporary dependencies";
@@ -43,2 +51,3 @@ readonly run: (inputs: import("../../create-next-stack-types").ValidCNSInputs) => Promise<void>;
         readonly formatProject: {
+            readonly id: "formatProject";
             readonly description: "formatting project";
@@ -48,2 +57,3 @@ readonly run: () => Promise<void>;
         readonly addGitAttributes: {
+            readonly id: "addGitAttributes";
             readonly description: "adding .gitattributes";
@@ -50,0 +60,0 @@ readonly shouldRun: () => Promise<boolean>;

lib/main/plugins/create-next-stack/create-next-stack.js

@@ -24,4 +24,6 @@ "use strict";
 const generate_readme_1 = require("./add-readme/generate-readme");
+const scripts_1 = require("./sort-orders/scripts");
 const gitAttributesFilename = ".gitattributes";
 exports.createNextStackPlugin = (0, plugin_1.createPlugin)({
+    id: "create-next-stack",
     name: "Create Next Stack",
@@ -32,6 +34,6 @@ description: "Adds various miscellaneous steps. Some necessities, some niceties.",
         addScripts: {
+            id: "addScripts",
             description: "adding scripts to package.json",
             run: async (inputs) => {
-                const scripts = (0, setup_1.filterPlugins)(inputs).flatMap((plugin) => { var _a; return (_a = plugin.scripts) !== null && _a !== void 0 ? _a : []; });
-                // TODO: Add a scripts sort order here. Use TypeScript to force setting all plugin scripts.
+                const scripts = (0, scripts_1.getSortedFilteredScripts)(inputs);
                 await (0, io_1.modifyJsonFile)("package.json", (packageJson) => ({
@@ -50,2 +52,3 @@ ...packageJson,
         copyAssets: {
+            id: "copyAssets",
             description: "copying static assets",
@@ -60,2 +63,3 @@ run: async () => {
         addContent: {
+            id: "addContent",
             description: "adding content",
@@ -74,2 +78,3 @@ run: async (inputs) => {
         addReadme: {
+            id: "addReadme",
             description: "adding Readme",
@@ -84,2 +89,3 @@ run: async (inputs) => {
         initialCommit: {
+            id: "initialCommit",
             description: "adding initial commit",
@@ -105,2 +111,3 @@ shouldRun: async () => {
         installDependencies: {
+            id: "installDependencies",
             description: "installing dependencies",
@@ -133,2 +140,3 @@ run: async (inputs) => {
         uninstallTemporaryDependencies: {
+            id: "uninstallTemporaryDependencies",
             description: "uninstalling temporary dependencies",
@@ -147,2 +155,3 @@ run: async (inputs) => {
         formatProject: {
+            id: "formatProject",
             description: "formatting project",
@@ -158,2 +167,3 @@ run: async () => {
         addGitAttributes: {
+            id: "addGitAttributes",
             description: `adding ${gitAttributesFilename}`,
@@ -160,0 +170,0 @@ shouldRun: async () => {

lib/main/plugins/css-modules/css-modules.d.ts

 export declare const cssModulesPlugin: import("../../plugin").Plugin<{
+    readonly id: "css-modules";
     readonly name: "CSS Modules";
@@ -6,2 +7,3 @@ readonly description: "Adds relevant CSS Modules boilerplate and documentation";
     readonly technologies: readonly [{
+        readonly id: "cssModules";
         readonly name: "CSS Modules";
@@ -21,3 +23,4 @@ readonly description: "CSS Modules are CSS files in which all class names are scoped locally to the component importing them. This means that developers can use the same CSS class name in different files without worrying about naming conflicts. Gone are the days of writing BEM class names!";
     readonly steps: {
-        readonly setup: {
+        readonly setUpCssModules: {
+            readonly id: "setUpCssModules";
             readonly description: "setting up CSS Modules";
@@ -24,0 +27,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/css-modules/css-modules.js

@@ -8,2 +8,3 @@ "use strict";
 exports.cssModulesPlugin = (0, plugin_1.createPlugin)({
+    id: "css-modules",
     name: "CSS Modules",
@@ -14,2 +15,3 @@ description: "Adds relevant CSS Modules boilerplate and documentation",
         {
+            id: "cssModules",
             name: "CSS Modules",
@@ -28,3 +30,4 @@ description: "CSS Modules are CSS files in which all class names are scoped locally to the component importing them. This means that developers can use the same CSS class name in different files without worrying about naming conflicts. Gone are the days of writing BEM class names!",
     steps: {
-        setup: {
+        setUpCssModules: {
+            id: "setUpCssModules",
             description: "setting up CSS Modules",
@@ -31,0 +34,0 @@ run: async () => {

lib/main/plugins/emotion.d.ts

 export declare const emotionPlugin: import("../plugin").Plugin<{
+    readonly id: "emotion";
     readonly name: "Emotion";
@@ -16,2 +17,3 @@ readonly description: "Adds support for Emotion";
     readonly technologies: readonly [{
+        readonly id: "emotion";
         readonly name: "Emotion";
@@ -31,3 +33,4 @@ readonly description: "Emotion is a React CSS-in-JS library designed for writing css styles inside JavaScript and TypeScript files. It provides powerful and predictable style composition in addition to a great developer experience. Developers can style their components using both string and object notation.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpEmotion: {
+            readonly id: "setUpEmotion";
             readonly description: "setting up Emotion";
@@ -34,0 +37,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/emotion.js

@@ -7,2 +7,3 @@ "use strict";
 exports.emotionPlugin = (0, plugin_1.createPlugin)({
+    id: "emotion",
     name: "Emotion",
@@ -17,2 +18,3 @@ description: "Adds support for Emotion",
         {
+            id: "emotion",
             name: "Emotion",
@@ -28,3 +30,4 @@ description: "Emotion is a React CSS-in-JS library designed for writing css styles inside JavaScript and TypeScript files. It provides powerful and predictable style composition in addition to a great developer experience. Developers can style their components using both string and object notation.",
     steps: {
-        setup: {
+        setUpEmotion: {
+            id: "setUpEmotion",
             description: "setting up Emotion",
@@ -31,0 +34,0 @@ run: async () => {

lib/main/plugins/eslint.d.ts

 export declare const eslintPlugin: import("../plugin").Plugin<{
+    readonly id: "eslint";
     readonly name: "ESLint";
@@ -6,2 +7,3 @@ readonly description: "Adds relevant documentation for ESLint";
     readonly technologies: readonly [{
+        readonly id: "eslint";
         readonly name: "ESLint";
@@ -8,0 +10,0 @@ readonly description: "ESLint is a tool for linting JavaScript and TypeScript code. It is used to check for errors in code and to enforce coding conventions. It can be configured to use custom rule sets and is often run both by code editors during development as well as in CI/CD.";

lib/main/plugins/eslint.js

@@ -6,2 +6,3 @@ "use strict";
 exports.eslintPlugin = (0, plugin_1.createPlugin)({
+    id: "eslint",
     name: "ESLint",
@@ -12,2 +13,3 @@ description: "Adds relevant documentation for ESLint",
         {
+            id: "eslint",
             name: "ESLint",
@@ -14,0 +16,0 @@ description: "ESLint is a tool for linting JavaScript and TypeScript code. It is used to check for errors in code and to enforce coding conventions. It can be configured to use custom rule sets and is often run both by code editors during development as well as in CI/CD.",

lib/main/plugins/formatting-pre-commit-hook.d.ts

 export declare const formattingPreCommitHookPlugin: import("../plugin").Plugin<{
+    readonly id: "formatting-pre-commit-hook";
     readonly name: "formatting-pre-commit-hook";
@@ -16,2 +17,3 @@ readonly description: "Adds support for a formatting pre-commit hook by setting up Husky and lint-staged using mrm";
     readonly technologies: readonly [{
+        readonly id: "husky";
         readonly name: "Husky";
@@ -30,2 +32,3 @@ readonly description: "Husky uses git hooks to let you run code at specific times in your git workflow. It is mainly used to format and lint code in a pre-commit hook to ensure committed code is formatted and free of error.";
     }, {
+        readonly id: "lintStaged";
         readonly name: "lint-staged";
@@ -47,3 +50,4 @@ readonly description: "lint-staged is a tool for running commands on staged files in a git repository. It is mainly used to filter out files that aren't staged during a formatting or linting pre-commit hook.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpFormattingPreCommitHook: {
+            readonly id: "setUpFormattingPreCommitHook";
             readonly description: "setting up formatting pre-commit hook";
@@ -50,0 +54,0 @@ readonly shouldRun: () => Promise<boolean>;

lib/main/plugins/formatting-pre-commit-hook.js

@@ -11,2 +11,3 @@ "use strict";
 exports.formattingPreCommitHookPlugin = (0, plugin_1.createPlugin)({
+    id: "formatting-pre-commit-hook",
     name: "formatting-pre-commit-hook",
@@ -27,2 +28,3 @@ description: "Adds support for a formatting pre-commit hook by setting up Husky and lint-staged using mrm",
         {
+            id: "husky",
             name: "Husky",
@@ -37,2 +39,3 @@ description: "Husky uses git hooks to let you run code at specific times in your git workflow. It is mainly used to format and lint code in a pre-commit hook to ensure committed code is formatted and free of error.",
         {
+            id: "lintStaged",
             name: "lint-staged",
@@ -54,3 +57,4 @@ description: "lint-staged is a tool for running commands on staged files in a git repository. It is mainly used to filter out files that aren't staged during a formatting or linting pre-commit hook.",
     steps: {
-        setup: {
+        setUpFormattingPreCommitHook: {
+            id: "setUpFormattingPreCommitHook",
             description: "setting up formatting pre-commit hook",
@@ -57,0 +61,0 @@ shouldRun: async () => {

lib/main/plugins/formik.d.ts

 export declare const formikPlugin: import("../plugin").Plugin<{
+    readonly id: "formik";
     readonly name: "Formik";
@@ -12,2 +13,3 @@ readonly description: "Adds support for Formik";
     readonly technologies: readonly [{
+        readonly id: "formik";
         readonly name: "Formik";
@@ -14,0 +16,0 @@ readonly description: "Formik is a React library that helps simplify the process of building and working with forms in React. It is designed to take care of the repetitive and tedious parts of form building, validation, and submission, making it easier and faster for developers to create forms.";

lib/main/plugins/formik.js

@@ -6,2 +6,3 @@ "use strict";
 exports.formikPlugin = (0, plugin_1.createPlugin)({
+    id: "formik",
     name: "Formik",
@@ -18,2 +19,3 @@ description: "Adds support for Formik",
         {
+            id: "formik",
             name: "Formik",
@@ -20,0 +22,0 @@ description: "Formik is a React library that helps simplify the process of building and working with forms in React. It is designed to take care of the repetitive and tedious parts of form building, validation, and submission, making it easier and faster for developers to create forms.",

lib/main/plugins/framer-motion.d.ts

 export declare const framerMotionPlugin: import("../plugin").Plugin<{
+    readonly id: "framer-motion";
     readonly name: "Framer Motion";
@@ -12,2 +13,3 @@ readonly description: "Adds support for Framer Motion";
     readonly technologies: readonly [{
+        readonly id: "framerMotion";
         readonly name: "Framer Motion";
@@ -14,0 +16,0 @@ readonly description: "Framer Motion is a popular React animation library. It allows users to create both simple animations and complex gesture-based interactions. The library implements a declarative API, otherwise known as spring animations, which lets the developer define the animation's end state, letting the library handle the rest.";

lib/main/plugins/framer-motion.js

@@ -6,2 +6,3 @@ "use strict";
 exports.framerMotionPlugin = (0, plugin_1.createPlugin)({
+    id: "framer-motion",
     name: "Framer Motion",
@@ -18,2 +19,3 @@ description: "Adds support for Framer Motion",
         {
+            id: "framerMotion",
             name: "Framer Motion",
@@ -20,0 +22,0 @@ description: "Framer Motion is a popular React animation library. It allows users to create both simple animations and complex gesture-based interactions. The library implements a declarative API, otherwise known as spring animations, which lets the developer define the animation's end state, letting the library handle the rest.",

lib/main/plugins/github-actions.d.ts

 import { ValidCNSInputs } from "../create-next-stack-types";
 export declare const githubActionsPlugin: import("../plugin").Plugin<{
+    readonly id: "github-actions";
     readonly name: "GitHub Actions";
@@ -7,2 +8,3 @@ readonly description: "Adds support for GitHub Actions";
     readonly technologies: readonly [{
+        readonly id: "githubActions";
         readonly name: "GitHub Actions";
@@ -28,2 +30,3 @@ readonly description: "GitHub Actions is a tool for automating software development workflows. It is integrated with GitHub repositories and enables developers to automate tasks such as building, testing, and deploying their applications.";
         readonly addGithubWorkflowStep: {
+            readonly id: "addGithubWorkflowStep";
             readonly description: "adding GitHub workflow";
@@ -30,0 +33,0 @@ readonly run: (inputs: ValidCNSInputs) => Promise<void>;

lib/main/plugins/github-actions.js

@@ -12,2 +12,3 @@ "use strict";
 exports.githubActionsPlugin = (0, plugin_1.createPlugin)({
+    id: "github-actions",
     name: "GitHub Actions",
@@ -18,2 +19,3 @@ description: "Adds support for GitHub Actions",
         {
+            id: "githubActions",
             name: "GitHub Actions",
@@ -47,2 +49,3 @@ description: "GitHub Actions is a tool for automating software development workflows. It is integrated with GitHub repositories and enables developers to automate tasks such as building, testing, and deploying their applications.",
         addGithubWorkflowStep: {
+            id: "addGithubWorkflowStep",
             description: "adding GitHub workflow",
@@ -49,0 +52,0 @@ run: async (inputs) => {

lib/main/plugins/material-ui/material-ui.d.ts

 export declare const materialUIPlugin: import("../../plugin").Plugin<{
+    readonly id: "material-ui";
     readonly name: "Material UI";
@@ -12,2 +13,3 @@ readonly description: "Adds support for Material UI";
     readonly technologies: readonly [{
+        readonly id: "materialUI";
         readonly name: "Material UI";
@@ -27,3 +29,4 @@ readonly description: "Material UI is a React UI component library that implements Google's material design guidelines. It features pre-built with components ranging from basic buttons and form input fields to tooltips and modals.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpMaterialUI: {
+            readonly id: "setUpMaterialUI";
             readonly description: "setting up Material UI";
@@ -30,0 +33,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/material-ui/material-ui.js

@@ -10,2 +10,3 @@ "use strict";
 exports.materialUIPlugin = (0, plugin_1.createPlugin)({
+    id: "material-ui",
     name: "Material UI",
@@ -22,2 +23,3 @@ description: "Adds support for Material UI",
         {
+            id: "materialUI",
             name: "Material UI",
@@ -36,3 +38,4 @@ description: "Material UI is a React UI component library that implements Google's material design guidelines. It features pre-built with components ranging from basic buttons and form input fields to tooltips and modals.",
     steps: {
-        setup: {
+        setUpMaterialUI: {
+            id: "setUpMaterialUI",
             description: "setting up Material UI",
@@ -39,0 +42,0 @@ run: async () => {

lib/main/plugins/next.d.ts

 export declare const nextPlugin: import("../plugin").Plugin<{
+    readonly id: "next";
     readonly name: "Next.js";
@@ -6,2 +7,3 @@ readonly description: "Adds Next.js foundation";
     readonly technologies: readonly [{
+        readonly id: "next";
         readonly name: "Next.js";
@@ -45,2 +47,3 @@ readonly description: "Next.js is the leading framework in the React ecosystem, featuring server-side rendering and static site generation among other rendering techniques. Utilizing its file-based routing architecture and its zero-config design principle, it is designed to enhance both the user and developer experience.";
         readonly createNextApp: {
+            readonly id: "createNextApp";
             readonly description: "running Create Next App";
@@ -50,2 +53,3 @@ readonly run: ({ args, flags }: import("../create-next-stack-types").ValidCNSInputs) => Promise<void>;
         readonly removeOfficialCNAContent: {
+            readonly id: "removeOfficialCNAContent";
             readonly description: "removing content added by Create Next App";
@@ -55,2 +59,3 @@ readonly run: () => Promise<void>;
         readonly addNextConfig: {
+            readonly id: "addNextConfig";
             readonly description: "adding next.config.js";
@@ -57,0 +62,0 @@ readonly run: (inputs: import("../create-next-stack-types").ValidCNSInputs) => Promise<void>;

lib/main/plugins/next.js

@@ -20,2 +20,3 @@ "use strict";
 exports.nextPlugin = (0, plugin_1.createPlugin)({
+    id: "next",
     name: "Next.js",
@@ -26,2 +27,3 @@ description: "Adds Next.js foundation",
         {
+            id: "next",
             name: "Next.js",
@@ -62,2 +64,3 @@ description: "Next.js is the leading framework in the React ecosystem, featuring server-side rendering and static site generation among other rendering techniques. Utilizing its file-based routing architecture and its zero-config design principle, it is designed to enhance both the user and developer experience.",
         createNextApp: {
+            id: "createNextApp",
             description: "running Create Next App",
@@ -67,12 +70,12 @@ run: async ({ args, flags }) => {
                 // Make sure directory exists to avoid error from create-next-app
-                await (0, io_1.makeDirectory)(args.appName);
+                await (0, io_1.makeDirectory)(args.app_name);
                 (0, logging_1.logDebug)((0, endent_1.default) `
-          Directory created: ${args.appName}
+          Directory created: ${args.app_name}
     
           To open the project in vscode, run:
     
-              ${chalk_1.default.cyan(`code ${path_1.default.resolve(args.appName)}`)}
+              ${chalk_1.default.cyan(`code ${path_1.default.resolve(args.app_name)}`)}
         `);
                 const createNextAppArgs = [
-                    args.appName,
+                    args.app_name,
                     "--typescript",
@@ -111,7 +114,8 @@ "--eslint",
                 process.env["npm_config_user_agent"] = oldNpmConfigUserAgent;
-                (0, logging_1.logDebug)("Changing directory to", args.appName);
-                process.chdir(args.appName);
+                (0, logging_1.logDebug)("Changing directory to", args.app_name);
+                process.chdir(args.app_name);
             },
         },
         removeOfficialCNAContent: {
+            id: "removeOfficialCNAContent",
             description: "removing content added by Create Next App",
@@ -130,2 +134,3 @@ run: async () => {
         addNextConfig: {
+            id: "addNextConfig",
             description: "adding next.config.js",
@@ -132,0 +137,0 @@ run: async (inputs) => {

lib/main/plugins/npm.d.ts

 export declare const npmPlugin: import("../plugin").Plugin<{
+    readonly id: "npm";
     readonly name: "npm";
@@ -6,2 +7,3 @@ readonly description: "Adds relevant npm documentation";
     readonly technologies: readonly [{
+        readonly id: "npm";
         readonly name: "npm";
@@ -8,0 +10,0 @@ readonly description: "npm is the default package manager for Node.js. It consists of a command-line client, also called npm, and an online database of packages, called the npm registry, that enable developers to share and reuse code.";

lib/main/plugins/npm.js

@@ -6,2 +6,3 @@ "use strict";
 exports.npmPlugin = (0, plugin_1.createPlugin)({
+    id: "npm",
     name: "npm",
@@ -12,2 +13,3 @@ description: "Adds relevant npm documentation",
         {
+            id: "npm",
             name: "npm",
@@ -14,0 +16,0 @@ description: "npm is the default package manager for Node.js. It consists of a command-line client, also called npm, and an online database of packages, called the npm registry, that enable developers to share and reuse code.",

lib/main/plugins/pnpm.d.ts

 export declare const pnpmPlugin: import("../plugin").Plugin<{
+    readonly id: "pnpm";
     readonly name: "pnpm";
@@ -6,2 +7,3 @@ readonly description: "Adds support for pnpm";
     readonly technologies: readonly [{
+        readonly id: "pnpm";
         readonly name: "pnpm";
@@ -22,2 +24,3 @@ readonly description: "pnpm is a JavaScript package manager compatible with the npm registry that performs better than Yarn and npm by using hard links and symlinks to allow package caching across projects.";
         readonly updatePnpm: {
+            readonly id: "updatePnpm";
             readonly description: "updating pnpm";
@@ -24,0 +27,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/pnpm.js

@@ -8,2 +8,3 @@ "use strict";
 exports.pnpmPlugin = (0, plugin_1.createPlugin)({
+    id: "pnpm",
     name: "pnpm",
@@ -14,2 +15,3 @@ description: "Adds support for pnpm",
         {
+            id: "pnpm",
             name: "pnpm",
@@ -26,2 +28,3 @@ description: "pnpm is a JavaScript package manager compatible with the npm registry that performs better than Yarn and npm by using hard links and symlinks to allow package caching across projects.",
         updatePnpm: {
+            id: "updatePnpm",
             description: "updating pnpm",
@@ -28,0 +31,0 @@ run: async () => {

lib/main/plugins/prettier.d.ts

 export declare const prettierPlugin: import("../plugin").Plugin<{
+    readonly id: "prettier";
     readonly name: "Prettier";
@@ -16,2 +17,3 @@ readonly description: "Adds support for Prettier";
     readonly technologies: readonly [{
+        readonly id: "prettier";
         readonly name: "Prettier";
@@ -43,3 +45,4 @@ readonly description: "Prettier is a tool for formatting code. It is optimized for readability and consistency, and its opinionated nature ensures developers won't spent time debating code formatting configurations. Prettier normally runs in a pre-commit hook to ensure code is formatted before it is committed.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpPrettier: {
+            readonly id: "setUpPrettier";
             readonly description: "setting up Prettier";
@@ -46,0 +49,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/prettier.js

@@ -7,2 +7,3 @@ "use strict";
 exports.prettierPlugin = (0, plugin_1.createPlugin)({
+    id: "prettier",
     name: "Prettier",
@@ -20,2 +21,3 @@ description: "Adds support for Prettier",
         {
+            id: "prettier",
             name: "Prettier",
@@ -44,3 +46,4 @@ description: "Prettier is a tool for formatting code. It is optimized for readability and consistency, and its opinionated nature ensures developers won't spent time debating code formatting configurations. Prettier normally runs in a pre-commit hook to ensure code is formatted before it is committed.",
     steps: {
-        setup: {
+        setUpPrettier: {
+            id: "setUpPrettier",
             description: "setting up Prettier",
@@ -47,0 +50,0 @@ run: async () => {

lib/main/plugins/react-hook-form.d.ts

 export declare const reactHookFormPlugin: import("../plugin").Plugin<{
+    readonly id: "react-hook-form";
     readonly name: "React Hook Form";
@@ -12,2 +13,3 @@ readonly description: "Adds support for React Hook Form";
     readonly technologies: readonly [{
+        readonly id: "reactHookForm";
         readonly name: "React Hook Form";
@@ -14,0 +16,0 @@ readonly description: "React Hook Form is a React library that simplifies the process of implementing forms from state management to input validation and error handling. Unlike previous form libraries, it provides better performance by storing the form state in the dom by default.";

lib/main/plugins/react-hook-form.js

@@ -6,2 +6,3 @@ "use strict";
 exports.reactHookFormPlugin = (0, plugin_1.createPlugin)({
+    id: "react-hook-form",
     name: "React Hook Form",
@@ -18,2 +19,3 @@ description: "Adds support for React Hook Form",
         {
+            id: "reactHookForm",
             name: "React Hook Form",
@@ -20,0 +22,0 @@ description: "React Hook Form is a React library that simplifies the process of implementing forms from state management to input validation and error handling. Unlike previous form libraries, it provides better performance by storing the form state in the dom by default.",

lib/main/plugins/react-icons.d.ts

 export declare const reactIconsPlugin: import("../plugin").Plugin<{
+    readonly id: "react-icons";
     readonly name: "React Icons";
@@ -12,2 +13,3 @@ readonly description: "Adds support for React Icons";
     readonly technologies: readonly [{
+        readonly id: "reactIcons";
         readonly name: "React Icons";
@@ -14,0 +16,0 @@ readonly description: "React Icons is SVG icon library. It comprises icons from over 25 of the most popular icon libraries including Ant Design Icons, Bootstrap Icons, Feather, Font Awesome, and Material Design icons. It uses React component syntax, and utilizes ES6 imports to only bundle the icons your app is using.";

lib/main/plugins/react-icons.js

@@ -6,2 +6,3 @@ "use strict";
 exports.reactIconsPlugin = (0, plugin_1.createPlugin)({
+    id: "react-icons",
     name: "React Icons",
@@ -15,2 +16,3 @@ description: "Adds support for React Icons",
         {
+            id: "reactIcons",
             name: "React Icons",
@@ -17,0 +19,0 @@ description: "React Icons is SVG icon library. It comprises icons from over 25 of the most popular icon libraries including Ant Design Icons, Bootstrap Icons, Feather, Font Awesome, and Material Design icons. It uses React component syntax, and utilizes ES6 imports to only bundle the icons your app is using.",

lib/main/plugins/react.d.ts

 export declare const reactPlugin: import("../plugin").Plugin<{
+    readonly id: "react";
     readonly name: "React";
@@ -6,2 +7,3 @@ readonly description: "Adds relevant React documentation";
     readonly technologies: readonly [{
+        readonly id: "react";
         readonly name: "React";
@@ -8,0 +10,0 @@ readonly description: "React is a JavaScript library for building declarative and flexible user interfaces in a functional paradigm. Being the most popular front-end library in the world, it enables developers to create reusable UI components that can be composed to build complex web applications.";

lib/main/plugins/react.js

@@ -6,2 +6,3 @@ "use strict";
 exports.reactPlugin = (0, plugin_1.createPlugin)({
+    id: "react",
     name: "React",
@@ -12,2 +13,3 @@ description: "Adds relevant React documentation",
         {
+            id: "react",
             name: "React",
@@ -14,0 +16,0 @@ description: "React is a JavaScript library for building declarative and flexible user interfaces in a functional paradigm. Being the most popular front-end library in the world, it enables developers to create reusable UI components that can be composed to build complex web applications.",

lib/main/plugins/sass/sass.d.ts

 export declare const sassPlugin: import("../../plugin").Plugin<{
+    readonly id: "sass";
     readonly name: "Sass";
@@ -12,2 +13,3 @@ readonly description: "Adds support for Sass";
     readonly technologies: readonly [{
+        readonly id: "cssModules";
         readonly name: "CSS Modules";
@@ -26,2 +28,3 @@ readonly description: "CSS Modules are CSS files in which all class names are scoped locally to the component importing them. This means that developers can use the same CSS class name in different files without worrying about naming conflicts. Gone are the days of writing BEM class names!";
     }, {
+        readonly id: "sass";
         readonly name: "Sass";
@@ -41,3 +44,4 @@ readonly description: "Sass is a stylesheet language that is compiled to CSS. It is an extension of CSS that adds extra powers to the basic language. It allows developers to use variables, nested rules, mixins, inline imports, and more.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpSass: {
+            readonly id: "setUpSass";
             readonly description: "setting up Sass";
@@ -44,0 +48,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/sass/sass.js

@@ -9,2 +9,3 @@ "use strict";
 exports.sassPlugin = (0, plugin_1.createPlugin)({
+    id: "sass",
     name: "Sass",
@@ -17,2 +18,3 @@ description: "Adds support for Sass",
         {
+            id: "sass",
             name: "Sass",
@@ -31,3 +33,4 @@ description: "Sass is a stylesheet language that is compiled to CSS. It is an extension of CSS that adds extra powers to the basic language. It allows developers to use variables, nested rules, mixins, inline imports, and more.",
     steps: {
-        setup: {
+        setUpSass: {
+            id: "setUpSass",
             description: "setting up Sass",
@@ -34,0 +37,0 @@ run: async () => {

lib/main/plugins/styled-components.d.ts

 export declare const styledComponentsPlugin: import("../plugin").Plugin<{
+    readonly id: "styled-components";
     readonly name: "Styled Components";
@@ -18,2 +19,3 @@ readonly description: "Adds support for Styled Components";
     readonly technologies: readonly [{
+        readonly id: "styledComponents";
         readonly name: "Styled Components";
@@ -20,0 +22,0 @@ readonly description: "Styled Components is a React CSS-in-JS library designed for writing css styles inside JavaScript and TypeScript files. It provides powerful and predictable style composition in addition to a great developer experience. Developers can style their components using both string and object notation.";

lib/main/plugins/styled-components.js

@@ -6,2 +6,3 @@ "use strict";
 exports.styledComponentsPlugin = (0, plugin_1.createPlugin)({
+    id: "styled-components",
     name: "Styled Components",
@@ -21,2 +22,3 @@ description: "Adds support for Styled Components",
         {
+            id: "styledComponents",
             name: "Styled Components",
@@ -23,0 +25,0 @@ description: "Styled Components is a React CSS-in-JS library designed for writing css styles inside JavaScript and TypeScript files. It provides powerful and predictable style composition in addition to a great developer experience. Developers can style their components using both string and object notation.",

lib/main/plugins/tailwind-css.d.ts

@@ -8,2 +8,3 @@ /**
 export declare const tailwindCSSPlugin: import("../plugin").Plugin<{
+    readonly id: "tailwind-css";
     readonly name: "Tailwind CSS";
@@ -27,2 +28,3 @@ readonly description: "Adds support for Tailwind CSS";
     readonly technologies: readonly [{
+        readonly id: "tailwindCSS";
         readonly name: "Tailwind CSS";
@@ -42,3 +44,4 @@ readonly description: "Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Its utilities come as helper classes that function as shorthands for the most common CSS patterns that developers use all the time.";
     readonly steps: {
-        readonly setup: {
+        readonly setUpTailwindCss: {
+            readonly id: "setUpTailwindCss";
             readonly description: "setting up Tailwind CSS";
@@ -45,0 +48,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/tailwind-css.js

@@ -15,2 +15,3 @@ "use strict";
 exports.tailwindCSSPlugin = (0, plugin_1.createPlugin)({
+    id: "tailwind-css",
     name: "Tailwind CSS",
@@ -35,2 +36,3 @@ description: "Adds support for Tailwind CSS",
         {
+            id: "tailwindCSS",
             name: "Tailwind CSS",
@@ -46,3 +48,4 @@ description: "Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Its utilities come as helper classes that function as shorthands for the most common CSS patterns that developers use all the time.",
     steps: {
-        setup: {
+        setUpTailwindCss: {
+            id: "setUpTailwindCss",
             description: "setting up Tailwind CSS",
@@ -49,0 +52,0 @@ run: async () => {

lib/main/plugins/typescript.d.ts

 export declare const typescriptPlugin: import("../plugin").Plugin<{
+    readonly id: "typescript";
     readonly name: "Typescript";
@@ -6,2 +7,3 @@ readonly description: "Adds relevant Typescript documentation";
     readonly technologies: readonly [{
+        readonly id: "typescript";
         readonly name: "TypeScript";
@@ -8,0 +10,0 @@ readonly description: "TypeScript is a programming language developed and maintained by Microsoft. It is a syntactical superset of JavaScript, adding static typing to the language. TypeScript shows useful type errors to developers during development in modern IDEs, saving time developers would have otherwise spent debugging the software at runtime.";

lib/main/plugins/typescript.js

@@ -6,2 +6,3 @@ "use strict";
 exports.typescriptPlugin = (0, plugin_1.createPlugin)({
+    id: "typescript",
     name: "Typescript",
@@ -12,2 +13,3 @@ description: "Adds relevant Typescript documentation",
         {
+            id: "typescript",
             name: "TypeScript",
@@ -14,0 +16,0 @@ description: "TypeScript is a programming language developed and maintained by Microsoft. It is a syntactical superset of JavaScript, adding static typing to the language. TypeScript shows useful type errors to developers during development in modern IDEs, saving time developers would have otherwise spent debugging the software at runtime.",

lib/main/plugins/yarn.d.ts

 export declare const yarnPlugin: import("../plugin").Plugin<{
+    readonly id: "yarn";
     readonly name: "Yarn";
@@ -6,2 +7,3 @@ readonly description: "Adds support for Yarn";
     readonly technologies: readonly [{
+        readonly id: "yarn";
         readonly name: "Yarn";
@@ -22,2 +24,3 @@ readonly description: "Yarn is a JavaScript package manager compatible with the npm registry that helps developers automate the process around npm packages such as installing, updating, removing, and more.";
         readonly updateYarn: {
+            readonly id: "updateYarn";
             readonly description: "updating Yarn";
@@ -24,0 +27,0 @@ readonly run: () => Promise<void>;

lib/main/plugins/yarn.js

@@ -8,2 +8,3 @@ "use strict";
 exports.yarnPlugin = (0, plugin_1.createPlugin)({
+    id: "yarn",
     name: "Yarn",
@@ -14,2 +15,3 @@ description: "Adds support for Yarn",
         {
+            id: "yarn",
             name: "Yarn",
@@ -26,2 +28,3 @@ description: "Yarn is a JavaScript package manager compatible with the npm registry that helps developers automate the process around npm packages such as installing, updating, removing, and more.",
         updateYarn: {
+            id: "updateYarn",
             description: "updating Yarn",
@@ -28,0 +31,0 @@ run: async () => {

lib/main/setup/print-final-messages.js

@@ -15,8 +15,8 @@ "use strict";
     (0, logging_1.logInfo)("");
-    (0, logging_1.logInfo)(chalk_1.default.green(`Successfully created project ${(0, get_project_name_of_path_1.getProjectNameOfPath)(args.appName)}!`));
+    (0, logging_1.logInfo)(chalk_1.default.green(`Successfully created project ${(0, get_project_name_of_path_1.getProjectNameOfPath)(args.app_name)}!`));
     (0, logging_1.logInfo)("");
     (0, logging_1.logInfo)("To get started, run:");
     (0, logging_1.logInfo)("");
-    if (args.appName !== ".") {
-        (0, logging_1.logInfo)(chalk_1.default.cyan(`    cd ${args.appName}`));
+    if (args.app_name !== ".") {
+        (0, logging_1.logInfo)(chalk_1.default.cyan(`    cd ${args.app_name}`));
     }
@@ -23,0 +23,0 @@ (0, logging_1.logInfo)(chalk_1.default.cyan(`    ${package_manager_utils_1.runCommandMap[flags["package-manager"]]} dev`));

lib/main/setup/setup.js

@@ -34,4 +34,4 @@ "use strict";
 const yarn_1 = require("../plugins/yarn");
+const steps_1 = require("../steps");
 const print_final_messages_1 = require("./print-final-messages");
-// Ordered by relevance to the user for use in technology lists // TODO: Fix this by having separate ordered lists of plugins where other sortings are needed.
 exports.plugins = [
@@ -64,40 +64,4 @@ create_next_stack_1.createNextStackPlugin,
 const performSetupSteps = async (inputs) => {
-    const steps = [
-        // Update package manager
-        pnpm_1.pnpmPlugin.steps.updatePnpm,
-        yarn_1.yarnPlugin.steps.updateYarn,
-        // Create Next App
-        next_1.nextPlugin.steps.createNextApp,
-        next_1.nextPlugin.steps.removeOfficialCNAContent,
-        // Install dependencies
-        create_next_stack_1.createNextStackPlugin.steps.installDependencies,
-        // Configuration
-        create_next_stack_1.createNextStackPlugin.steps.addScripts,
-        create_next_stack_1.createNextStackPlugin.steps.addGitAttributes,
-        next_1.nextPlugin.steps.addNextConfig,
-        // Styling
-        tailwind_css_1.tailwindCSSPlugin.steps.setup,
-        css_modules_1.cssModulesPlugin.steps.setup,
-        sass_1.sassPlugin.steps.setup,
-        emotion_1.emotionPlugin.steps.setup,
-        // Formatting
-        prettier_1.prettierPlugin.steps.setup,
-        formatting_pre_commit_hook_1.formattingPreCommitHookPlugin.steps.setup,
-        // Continuous integration
-        github_actions_1.githubActionsPlugin.steps.addGithubWorkflowStep,
-        // Add/generate content
-        create_next_stack_1.createNextStackPlugin.steps.copyAssets,
-        create_next_stack_1.createNextStackPlugin.steps.addContent,
-        create_next_stack_1.createNextStackPlugin.steps.addReadme,
-        // Component libraries
-        chakra_ui_1.chakraUIPlugin.steps.setup,
-        material_ui_1.materialUIPlugin.steps.setup,
-        // Uninstall temporary dependencies
-        create_next_stack_1.createNextStackPlugin.steps.uninstallTemporaryDependencies,
-        // Format & initial commit
-        create_next_stack_1.createNextStackPlugin.steps.formatProject,
-        create_next_stack_1.createNextStackPlugin.steps.initialCommit,
-    ];
     const allStepsDiff = await (0, time_1.time)(async () => {
-        for (const step of steps) {
+        for (const step of steps_1.steps) {
             const pluginActive = (0, plugin_1.evalActive)(step.plugin.active, inputs);
@@ -104,0 +68,0 @@ const stepShouldRun = await (0, plugin_1.evalShouldRun)(step.shouldRun, inputs);

package.json

 {
   "name": "create-next-stack",
   "description": "Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "author": "Anders Kjær Damgaard @akd-io",
@@ -60,2 +60,3 @@ "bugs": "https://github.com/akd-io/create-next-stack/issues",
   "devDependencies": {
+    "@jest/globals": "^29.5.0",
     "@types/inquirer": "^9.0.3",
@@ -69,3 +70,5 @@ "@types/node": "^18.15.13",
     "eslint-config-prettier": "^8.8.0",
+    "jest": "^29.5.0",
     "next": "^13.3.1",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
@@ -76,6 +79,10 @@ "uuid": "^9.0.0"
     "check-types": "tsc --noEmit",
+    "check-types:watch": "tsc --noEmit --watch",
     "build": "rimraf lib && tsc --build",
+    "build:watch": "rimraf lib && tsc --build --watch",
     "clean": "rimraf lib && pnpm run clean-tests-dir",
     "clean-tests-dir": "ts-node src/tests/e2e/clean-tests-dir.ts",
-    "test": "pnpm build && ts-node src/tests/e2e/test.ts",
+    "test": "pnpm build && pnpm run jest && ts-node src/tests/e2e/test.ts",
+    "jest": "jest",
+    "jest:watch": "jest --watch",
     "test:manual": "pnpm build && ts-node src/tests/e2e/test-manual.ts --debug",
@@ -86,6 +93,7 @@ "test:small": "pnpm build && ts-node src/tests/e2e/test-manual.ts --debug --package-manager=pnpm --styling=css-modules",
     "test:cns": "pnpm build && ts-node src/tests/e2e/test-live-cns.ts",
+    "test:raw": "pnpm build && ./bin/dev",
     "print:help": "pnpm build && ./bin/dev --help",
-    "print:version": "pnpm build && ./bin/dev --help",
+    "print:version": "pnpm build && ./bin/dev --version",
     "lint": "eslint --ext=.ts --config=.eslintrc --ignore-path=../../.prettierignore ."
   }
 }

README.md

@@ -1,22 +0,13 @@
-<img width="100%" src="assets/banner.png" alt="A screenshot of the Create Next Stack website">
+# Create Next Stack
 
-<p align="center">
-  <a aria-label="NPM version" href="https://www.npmjs.com/package/create-next-stack">
-    <img alt="" src="https://img.shields.io/npm/v/create-next-stack?style=flat-square">
-  </a>
-  <a aria-label="Build status" href="https://github.com/akd-io/create-next-stack/actions/workflows/main.yml?query=branch%3Adevelop">
-    <img alt="" src="https://img.shields.io/github/actions/workflow/status/akd-io/create-next-stack/main.yml?branch=develop&style=flat-square">
-  </a>
+<p>
   <a aria-label="Last commit" href="https://github.com/akd-io/create-next-stack/commits/develop">
     <img alt="" src="https://img.shields.io/github/last-commit/akd-io/create-next-stack/develop?style=flat-square">
   </a>
-  <a aria-label="License" href="https://github.com/akd-io/create-next-stack/blob/develop/LICENSE">
+  <a aria-label="License" href="https://github.com/akd-io/create-next-stack/blob/develop/packages/create-next-stack/LICENSE">
     <img alt="" src="https://img.shields.io/npm/l/create-next-stack?color=44cc11&style=flat-square">
   </a>
-  <a aria-label="Create Next Stack Website GitHub Repository" href="https://github.com/akd-io/create-next-stack-website">
-    <img alt="" src="https://img.shields.io/badge/Website-gray?style=flat-square&logo=github">
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/create-next-stack">
+    <img alt="" src="https://img.shields.io/npm/v/create-next-stack?style=flat-square">
   </a>
-  <a aria-label="GitHub Repo stars" href="https://github.com/akd-io/create-next-stack">
-    <img alt="" src="https://img.shields.io/github/stars/akd-io/create-next-stack?style=social">
-  </a>
   <a aria-label="Community Discord" href="https://discord.gg/7Ns5WwGjjZ">
@@ -28,2 +19,5 @@ <img alt="" src="https://img.shields.io/badge/Discord-gray?style=flat-square&logo=discord">
   </a>
+  <a aria-label="GitHub Repo stars" href="https://github.com/akd-io/create-next-stack">
+    <img alt="" src="https://img.shields.io/github/stars/akd-io/create-next-stack?style=social">
+  </a>
 </p>
@@ -35,10 +29,4 @@
 
-This repository covers the CLI tool, while [create-next-stack-website](https://github.com/akd-io/create-next-stack-website) covers the site.
+To get started, go to [create-next-stack.com](https://www.create-next-stack.com).
 
-To get started, go to [create-next-stack.com](https://www.create-next-stack.com). Here you'll be able to choose the technologies you want to use and get the corresponding CLI command.
-
-<p align="center">
-  <img width="600" alt="Screenshot of Create Next Stack running in a terminal" src="assets/screenshot.png">
-</p>
-
 ## Supported technologies
@@ -48,4 +36,2 @@
 
-### Technologies table
-
 | Name                                                      | Links                                                                                                                                                                |
@@ -82,22 +68,23 @@ | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 USAGE
-  $ create-next-stack [APPNAME]
+  $ create-next-stack [APP_NAME] [FLAGS]
 
 ARGUMENTS
-  APPNAME  The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"
+  APP_NAME  The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"
 
-OPTIONS
-  -h, --help                         Shows the CLI help information.
-  -v, --version                      Shows the CLI version information.
-  --chakra                           Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)
-  --debug                            Show verbose error messages for debugging purposes.
-  --formatting-pre-commit-hook       Adds a formatting pre-commit hook. (Requires Prettier)
-  --formik                           Adds Formik. (Form library)
-  --framer-motion                    Adds Framer Motion. (Animation library)
-  --github-actions                   Adds a GitHub Actions continuous integration workflow.
-  --material-ui                      Adds Material UI. (Component library)
-  --package-manager=(pnpm|yarn|npm)  Sets the preferred package manager. (Required)
-  --prettier                         Adds Prettier. (Code formatting)
-  --react-hook-form                  Adds React Hook Form. (Form library)
-  --react-icons                      Adds React Icons. (Icon library)
-  --styling=<styling-method>         Sets the preferred styling method. (Required) <styling-method> = emotion|styled-components|tailwind-css|css-modules|css-modules-with-sass
+FLAGS
+  -h, --help                    Shows the CLI help information.
+  -v, --version                 Shows the CLI version information.
+  --chakra                      Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)
+  --debug                       Show verbose error messages for debugging purposes.
+  --formatting-pre-commit-hook  Adds a formatting pre-commit hook. (Requires Prettier)
+  --formik                      Adds Formik. (Form library)
+  --framer-motion               Adds Framer Motion. (Animation library)
+  --github-actions              Adds a GitHub Actions continuous integration workflow.
+  --material-ui                 Adds Material UI. (Component library)
+  --package-manager=<option>    Sets the preferred package manager. (Required)
+                                <options: pnpm|yarn|npm>
+  --prettier                    Adds Prettier. (Code formatting)
+  --react-hook-form             Adds React Hook Form. (Form library)
+  --react-icons                 Adds React Icons. (Icon library)
+  --styling=<styling-method>    Sets the preferred styling method. (Required) <styling-method> = emotion|styled-components|tailwind-css|css-modules|css-modules-with-sass
 ```
@@ -104,0 +91,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 4 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

191332

5.32%

Number of package files

177

8.59%

Lines of code

4245

7.41%

Worsened metrics

Dev dependency count

14

27.27%

Number of lines in readme file

95

-12.04%

Number of low supply chain risk alerts

20

5.26%

No dependency changes