Merge pull request #105 from akd-io/release/0.1.4

Release 0.1.4

Author: akd-io

README.md

@@ -65,6 +65,7 @@ Technologies marked as _convenience installs_ are technologies that work out of
 | [Styled Components](https://styled-components.com/)                                                                               | [Docs](https://styled-components.com/docs) - [GitHub repo](https://github.com/styled-components/styled-components)                                                   |
 | [CSS Modules](https://github.com/css-modules/css-modules)                                                                         | [Docs](https://github.com/css-modules/css-modules) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) |
 | [Sass](https://sass-lang.com/) <img width="14" alt="convenience install icon" src="assets/convenience-icon.png">                  | [Docs](https://sass-lang.com/documentation) - [Next.js-specific docs](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)                      |
+| [Chakra UI](https://chakra-ui.com/)                                                                                               | [Docs](https://chakra-ui.com/docs/getting-started) - [GitHub repo](https://github.com/chakra-ui/chakra-ui)                                                           |
 | [React Hook Form](https://react-hook-form.com/) <img width="14" alt="convenience install icon" src="assets/convenience-icon.png"> | [Docs](https://react-hook-form.com/get-started) - [GitHub repo](https://github.com/react-hook-form/react-hook-form)                                                  |
 | [Formik](https://formik.org/) <img width="14" alt="convenience install icon" src="assets/convenience-icon.png">                   | [Docs](https://formik.org/docs/overview) - [GitHub repo](https://github.com/formium/formik)                                                                          |
 | [Framer Motion](https://www.framer.com/motion/) <img width="14" alt="convenience install icon" src="assets/convenience-icon.png"> | [Docs](https://www.framer.com/docs/) - [GitHub repo](https://github.com/framer/motion)                                                                               |
@@ -87,15 +88,16 @@ ARGUMENTS
 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.
+  --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.
-  --package-manager=(yarn|npm)  Sets the preferred package manager.
+  --package-manager=(yarn|npm)  Sets the preferred package manager. (Required)
   --prettier                    Adds Prettier. (Code formatting)
   --react-hook-form             Adds React Hook Form. (Form library)
-  --styling=<styling-method>    Sets the preferred styling method. <styling-method> = emotion|styled-components|css-modules|css-modules-with-sass
+  --styling=<styling-method>    Sets the preferred styling method. (Required) <styling-method> = emotion|styled-components|css-modules|css-modules-with-sass
 ```
 
 ## License

bin-test/run-prod.cmd

@@ -0,0 +1,3 @@
+@echo off
+
+node "%~dp0\run-prod" %*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-stack",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "Anders Kjær Damgaard @akd-io",
   "bin": {
     "create-next-stack": "./bin/run"
@@ -58,7 +58,7 @@
     "prepare": "husky install",
     "prepack": "yarn build && oclif-dev readme",
     "build": "rimraf lib && tsc -b",
-    "test": "yarn build && node lib/tests/e2e/test.js",
+    "test": "yarn build && yarn run test-only",
     "test-only": "node lib/tests/e2e/test.js",
     "manual-test": "yarn build && node lib/tests/e2e/manual-test.js --debug",
     "quick-test": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=npm --styling=css-modules",

prod-assets/templates/LandingPage/components/H1.module.css

@@ -3,4 +3,5 @@
   margin-bottom: 20px;
 
   font-size: 3rem;
+  font-weight: bold;
 }

prod-assets/templates/LandingPage/components/H2.module.css

@@ -1,4 +1,7 @@
 .h2 {
   margin: 0;
   margin-bottom: 20px;
+
+  font-size: 1.5rem;
+  font-weight: bold;
 }

src/main/create-next-stack-types.ts

@@ -73,15 +73,30 @@ export const validateFlags = (
   flags: CreateNextStackFlags
 ): flags is ValidCreateNextStackFlags => {
   if (typeof flags["package-manager"] !== "string") {
-    throw new TypeError(
+    throw new Error(
       'Outside interactive mode, you are required to specify a package manager. Read about the "--package-manager" option using --help.'
     )
   }
   if (typeof flags.styling !== "string") {
-    throw new TypeError(
+    throw new Error(
       'Outside interactive mode, you are required to specify a styling method. Read about the "--styling" option using --help.'
     )
   }
+  if (flags.chakra && flags.styling !== "emotion") {
+    throw new Error(
+      "Chakra UI (category: Component library, flag: --chakra) requires Emotion (category: Styling, flag: --styling=emotion)."
+    )
+  }
+  if (flags.chakra && !flags["framer-motion"]) {
+    throw new Error(
+      "Chakra UI (category: Component library, flag: --chakra) requires Framer Motion (category: Animation, flag: --framer-motion)."
+    )
+  }
+  if (flags["formatting-pre-commit-hook"] && !flags["prettier"]) {
+    throw new Error(
+      "Formatting pre-commit hook (category: Miscellaneous, flag: --formatting-pre-commit-hook) requires Prettier (category: Formatting, flag: --prettier)."
+    )
+  }
   return true
 }
 

src/main/helpers/exit-with-error.ts

@@ -1,8 +1,11 @@
+import { ExitError } from "@oclif/errors"
 import { logError } from "../logging"
 import { inDebugMode } from "./is-debug-enabled"
 
 export const exitWithError = (error: unknown): never => {
-  if (error instanceof Error) {
+  if (error instanceof ExitError && error.oclif.exit === 0) {
+    process.exit(0)
+  } else if (error instanceof Error) {
     if (error.stack != null) {
       logError(error.stack)
     }

src/main/helpers/json-files.ts

@@ -74,9 +74,11 @@ export const toObject = (object: unknown): Record<string, unknown> => {
  * @param object
  * @returns
  */
-export const toArray = (array: unknown): unknown[] => {
-  if (isUnknownArray(array)) {
-    return array
+export const toArray = (value: unknown): unknown[] => {
+  if (isUnknownArray(value)) {
+    return value
+  } else if (typeof value === "string") {
+    return [value]
   } else {
     return []
   }

src/main/index.ts

@@ -42,7 +42,7 @@ class CreateNextStack extends Command {
     // Package manager:
     "package-manager": flags.enum({
       options: writablePackageManagerOptions,
-      description: "Sets the preferred package manager.",
+      description: "Sets the preferred package manager. (Required)",
     }),
 
     // Formatting:
@@ -53,12 +53,18 @@ class CreateNextStack extends Command {
     // Styling:
     styling: flags.enum({
       options: writableStylingOptions,
-      description: `Sets the preferred styling method. <styling-method> = ${writableStylingOptions.join(
+      description: `Sets the preferred styling method. (Required) <styling-method> = ${writableStylingOptions.join(
         "|"
       )}`,
       helpValue: "<styling-method>",
     }),
 
+    // Component libraries:
+    chakra: flags.boolean({
+      description:
+        "Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)",
+    }),
+
     // Form libraries:
     "react-hook-form": flags.boolean({
       description: "Adds React Hook Form. (Form library)",
@@ -79,8 +85,7 @@ class CreateNextStack extends Command {
 
     // Formatting pre-commit hook
     "formatting-pre-commit-hook": flags.boolean({
-      description: "Adds a formatting pre-commit hook.",
-      dependsOn: ["prettier"],
+      description: "Adds a formatting pre-commit hook. (Requires Prettier)",
     }),
   }
 

src/main/questionnaire/flags-questionnaire.ts

@@ -1,62 +1,95 @@
 import { ValidCreateNextStackFlags } from "../create-next-stack-types"
-import { ThenArg } from "../helpers/then-arg"
 import { withKeyConstraint } from "../helpers/with-key-constraint"
 import { CategoryValue, promptOptionalCategories } from "./questions/categories"
-import { promptAnimation } from "./questions/categories/animation"
-import { promptContinuousIntegration } from "./questions/categories/continuous-integration"
-import { promptFormStateManagement } from "./questions/categories/form-state-management"
-import { promptFormatting } from "./questions/categories/formatting"
+import {
+  AnimationValue,
+  promptAnimation,
+} from "./questions/categories/animation"
+import {
+  ComponentLibraryValue,
+  promptComponentLibraries,
+} from "./questions/categories/component-libraries"
+import {
+  ContinuousIntegrationValue,
+  promptContinuousIntegration,
+} from "./questions/categories/continuous-integration"
+import {
+  FormStateManagementValue,
+  promptFormStateManagement,
+} from "./questions/categories/form-state-management"
+import {
+  FormattingValue,
+  promptFormatting,
+} from "./questions/categories/formatting"
 import {
   MiscellaneousValue,
   promptMiscellaneous,
 } from "./questions/categories/miscellaneous"
-import { promptPackageManager } from "./questions/categories/package-manager"
-import { promptStyling } from "./questions/categories/styling"
+import {
+  PackageManagerValue,
+  promptPackageManager,
+} from "./questions/categories/package-manager"
+import { promptStyling, StylingValue } from "./questions/categories/styling"
 
 const categoryToPromptFunction = withKeyConstraint<CategoryValue>()({
   formatting: promptFormatting,
+  componentLibraries: promptComponentLibraries,
   formStateManagement: promptFormStateManagement,
   animation: promptAnimation,
   continuousIntegration: promptContinuousIntegration,
 } as const)
 
-type PromptReturnType = ThenArg<
-  ReturnType<typeof categoryToPromptFunction[CategoryValue]>
->
-export type OptionalTechnology = PromptReturnType extends Array<unknown>
-  ? PromptReturnType[number]
-  : PromptReturnType
+export type Technology =
+  | AnimationValue
+  | ComponentLibraryValue
+  | ContinuousIntegrationValue
+  | FormStateManagementValue
+  | FormattingValue
+  | MiscellaneousValue
+  | PackageManagerValue
+  | StylingValue
 
 export const performFlagsQuestionnaire =
   async (): Promise<ValidCreateNextStackFlags> => {
+    const technologies = new Set<Technology>()
+
     // Mandatory prompts
     const packageManager = await promptPackageManager()
+    technologies.add(packageManager)
     const stylingMethod = await promptStyling()
+    technologies.add(stylingMethod)
 
     // Optional categories prompt
     const optionalCategories = await promptOptionalCategories()
-    const optionalTechnologies = new Set<OptionalTechnology>()
     for (const category of optionalCategories) {
-      const additionalTechnologies = await categoryToPromptFunction[category]()
-      additionalTechnologies.forEach((tech) => optionalTechnologies.add(tech))
+      const optionalTechnologies = await categoryToPromptFunction[category](
+        technologies
+      )
+      optionalTechnologies.forEach((tech) => technologies.add(tech))
     }
 
     // TODO: Remove prettier-check when promptMiscellaneous adds more options
     let miscellaneous: Set<MiscellaneousValue> = new Set()
-    if (optionalTechnologies.has("prettier")) {
-      miscellaneous = await promptMiscellaneous(optionalTechnologies)
+    if (technologies.has("prettier")) {
+      miscellaneous = await promptMiscellaneous(technologies)
+      miscellaneous.forEach((tech) => technologies.add(tech))
     }
 
-    return {
+    const result: Required<
+      Omit<ValidCreateNextStackFlags, "help" | "version" | "debug">
+    > = {
       "package-manager": packageManager,
       styling: stylingMethod,
-      prettier: optionalTechnologies.has("prettier"),
-      "react-hook-form": optionalTechnologies.has("reactHookForm"),
-      formik: optionalTechnologies.has("formik"),
-      "framer-motion": optionalTechnologies.has("framerMotion"),
-      "github-actions": optionalTechnologies.has("githubActions"),
+      prettier: technologies.has("prettier"),
+      "react-hook-form": technologies.has("reactHookForm"),
+      formik: technologies.has("formik"),
+      "framer-motion": technologies.has("framerMotion"),
+      "github-actions": technologies.has("githubActions"),
       "formatting-pre-commit-hook": miscellaneous.has(
         "formattingPreCommitHook"
       ),
+      chakra: technologies.has("chakra"),
     }
+
+    return result
   }