Merge pull request #69 from akd-io/release/0.1.0

Author: akd-io

.github/workflows/publish.yml

@@ -21,7 +21,7 @@ jobs:
       - name: "Install dependencies (with cache)"
         uses: bahmutov/npm-install@v1
 
-      - name: "Publish to NPM"
+      - name: "Publish to npm"
         id: npmPublish
         uses: JS-DevTools/npm-publish@v1
         with:

README.md

@@ -28,7 +28,7 @@ npx create-next-stack
 Then, pick a project name, and your preferred technologies like so:
 
 <p align="center">
-  <img width="600" alt="Screenshot of Create Next Stack running in a terminal" src="assets/screenshot.png">
+  <img width="600" alt="Screenshot of Create Next Stack running in a terminal" src="assets/screenshot.svg">
 </p>
 
 ## Supported technologies
@@ -59,7 +59,8 @@ Technologies marked as _convenience installs_ are technologies that work out of
 | [React](https://reactjs.org/) <img width="14" alt="required icon" src="assets/required-icon.png">                                 | [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub repo](https://github.com/facebook/react)                                                             |
 | [TypeScript](https://www.typescriptlang.org/) <img width="14" alt="required icon" src="assets/required-icon.png">                 | [Docs](https://www.typescriptlang.org/docs/) - [GitHub repo](https://github.com/microsoft/TypeScript)                                                                |
 | [ESLint](https://eslint.org/) <img width="14" alt="required icon" src="assets/required-icon.png">                                 | [Configuration](https://eslint.org/docs/user-guide/configuring/) - [Rules](https://eslint.org/docs/rules/) - [GitHub Repo](https://github.com/eslint/eslint)         |
-| [Yarn](https://yarnpkg.com/) <img width="14" alt="required icon" src="assets/required-icon.png">                                  | [CLI Docs](https://yarnpkg.com/cli) - [GitHub repo](https://github.com/yarnpkg/berry)                                                                                |
+| [Yarn](https://yarnpkg.com/)                                                                                                      | [CLI Docs](https://yarnpkg.com/cli) - [GitHub repo](https://github.com/yarnpkg/berry)                                                                                |
+| [npm](https://www.npmjs.com/)                                                                                                     | [CLI Docs](https://docs.npmjs.com/cli/)                                                                                                                              |
 | [Emotion](https://emotion.sh/docs/introduction)                                                                                   | [Docs](https://emotion.sh/docs/introduction) - [GitHub repo](https://github.com/emotion-js/emotion)                                                                  |
 | [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) |
@@ -82,9 +83,16 @@ ARGUMENTS
   APPNAME  The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"
 
 OPTIONS
-  -h, --help     show CLI help
-  -v, --version  show CLI version
-  --debug        show verbose error messages for debugging purposes
+  -h, --help                                         Shows the CLI help information.
+  -v, --version                                      Shows the CLI version information.
+  --debug                                            Show verbose error messages for debugging purposes.
+  --formatting-pre-commit-hook                       Adds a formatting pre-commit hook.
+  --formik                                           Adds Formik. (Form library)
+  --framer-motion                                    Adds Framer Motion. (Animation library)
+  --package-manager=(yarn|npm)                       Sets the preferred package manager.
+  --prettier                                         Adds Prettier. (Code formatting)
+  --react-hook-form                                  Adds React Hook Form. (Form library)
+  --styling=(emotion|styled-components|css-modules)  Sets the preferred styling method.
 ```
 
 ## License

assets/screenshot.png

@@ -1,6 +1,6 @@
 {
   "name": "create-next-stack",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "author": "Anders Kjær Damgaard @akd-io",
   "bin": {
     "create-next-stack": "./bin/run"

assets/screenshot.svg

@@ -1,5 +1,8 @@
 import CreateNextStack from "."
+import { exitWithError } from "./helpers/exit-with-error"
 import { UnknownObject } from "./helpers/is-unknown-object"
+import { Writable } from "./helpers/writable"
+import { validateProjectPathInput } from "./questionnaire/questions/validate-project-path"
 
 /**
  * This function is only used to retrieve the ReturnType of a call to `createNextStackInstance.parse(CreateNextStack)`.
@@ -14,5 +17,75 @@ const temporaryWrapperForTypeSafety = () => {
 export type CreateNextStackParserOutput = ReturnType<
   typeof temporaryWrapperForTypeSafety
 >
+
+// Unvalidated Args and Flags types
 export type CreateNextStackArgs = UnknownObject // Change to ParserOutput["args"] if it becomes strongly typed in the future. (Currently a normal object with any-values.)
-export type CreateNextStackFlags = CreateNextStackParserOutput["flags"]
+export type CreateNextStackFlags = Partial<CreateNextStackParserOutput["flags"]> // Change to CreateNextStackParserOutput["flags"] if it becomes strongly typed in the future. (Currently not a Partial.)
+
+// Package manager flag:
+export const packageManagerOptions = ["yarn", "npm"] as const
+export type PackageManagerOption = typeof packageManagerOptions[number]
+export const writablePackageManagerOptions = packageManagerOptions as Writable<
+  typeof packageManagerOptions
+>
+
+// Styling flag:
+export const stylingOptions = [
+  "emotion",
+  "styled-components",
+  "css-modules",
+] as const
+export type StylingOption = typeof stylingOptions[number]
+export const writableStylingOptions = stylingOptions as Writable<
+  typeof stylingOptions
+>
+
+// Valid Args type and type guard
+export type ValidCreateNextStackArgs = CreateNextStackArgs & { appName: string }
+export const validateArgs = (
+  args: CreateNextStackArgs
+): args is ValidCreateNextStackArgs => {
+  if (typeof args.appName !== "string") {
+    exitWithError(
+      'Outside interactive mode, you are required to specify a name for your application. Read about the "appName" argument using --help.'
+    )
+    process.exit() // This tells TypeScript that the throwError function exits, and lets it infer types correctly below.
+  }
+
+  const appNameValidationResult = validateProjectPathInput(args.appName)
+
+  if (typeof appNameValidationResult === "string") {
+    exitWithError("Invalid app name. " + appNameValidationResult)
+    process.exit() // This tells TypeScript that the throwError function exits, and lets it infer types correctly below.
+  }
+
+  return true
+}
+
+// Valid Flags type and type guard
+export type ValidCreateNextStackFlags = CreateNextStackFlags & {
+  "package-manager": PackageManagerOption
+  styling: StylingOption
+}
+export const validateFlags = (
+  flags: CreateNextStackFlags
+): flags is ValidCreateNextStackFlags => {
+  if (flags["package-manager"] == null) {
+    exitWithError(
+      'Outside interactive mode, you are required to specify a package manager. Read about the "--package-manager" option using --help.'
+    )
+    process.exit(1)
+  }
+  if (flags.styling == null) {
+    exitWithError(
+      'Outside interactive mode, you are required to specify a styling method. Read about the "--styling" option using --help.'
+    )
+    process.exit(1)
+  }
+  return true
+}
+
+export type ValidCNSInputs = {
+  args: ValidCreateNextStackArgs
+  flags: ValidCreateNextStackFlags
+}

package.json

@@ -0,0 +1,24 @@
+import console from "console"
+import execa, { Options } from "execa"
+
+export const checkFormattingLintingBuild = async (
+  packageManager: "yarn" | "npm",
+  runDirectory: string
+) => {
+  const options: Options = {
+    cwd: runDirectory,
+  }
+
+  console.log("Checking formatting")
+  await execa(
+    "npx",
+    ["prettier", "--check", "--ignore-path=.gitignore", "."],
+    options
+  )
+
+  console.log("Checking linting")
+  await execa(packageManager, ["run", "lint"], options)
+
+  console.log("Running build")
+  await execa(packageManager, ["run", "build"], options)
+}

src/create-next-stack-types.ts

@@ -0,0 +1,33 @@
+import console from "console"
+import { promises as fs } from "fs"
+import path from "path"
+import { v4 as uuidv4 } from "uuid"
+
+export const prepareE2eTest = async (
+  createNextStackDir: string
+): Promise<{
+  pathToProdCLI: string
+  runDirectory: string
+}> => {
+  // Create unique id for this run
+  const testRunId = uuidv4()
+
+  // Switch to unique test directory
+  const runDirectory = path.resolve(
+    `${createNextStackDir}/../create-next-stack-tests/run-${testRunId}`
+  )
+  await fs.mkdir(runDirectory, { recursive: true })
+
+  console.log(`Created test run directory at ${runDirectory}`)
+
+  // Run /bin/run-prod to test against compiled js files in /lib instead of ts-files in /src using ts-node.
+  const pathToProdCLI = path.resolve(`${createNextStackDir}/bin/run-prod`)
+
+  console.log(`Making /bin/run readable and executable by all.`)
+  await fs.chmod(pathToProdCLI, 0o555)
+
+  return {
+    pathToProdCLI,
+    runDirectory,
+  }
+}

src/e2e/helpers/check-formatting-linting-build.ts

@@ -1,12 +1,32 @@
 import { exitWithError } from "./helpers/exit-with-error"
 import { setGitNameAndEmail } from "./helpers/set-git-name-and-email"
-import { testDefaultOptions } from "./tests/default-options"
+import { testDefaultOptionsInteractive } from "./tests/interactive/default-options"
+import { testCssModulesAllFlagsNonInteractive } from "./tests/non-interactive/css-modules/css-modules-all-flags"
+import { testCssModulesOnlyNonInteractive } from "./tests/non-interactive/css-modules/css-modules-only"
+import { testEmotionAllFlagsNonInteractive } from "./tests/non-interactive/emotion/emotion-all-flags"
+import { testEmotionOnlyNonInteractive } from "./tests/non-interactive/emotion/emotion-only"
+import { testStyledComponentsAllFlagsNonInteractive } from "./tests/non-interactive/styled-components/styled-components-all-flags"
+import { testStyledComponentsOnlyNonInteractive } from "./tests/non-interactive/styled-components/styled-components-only"
 ;(async () => {
   try {
     // If not done already, Set Git name and email so `git commit` doesn't fail during create-next-app
     await setGitNameAndEmail()
 
-    await testDefaultOptions()
+    // TODO: Find a way to run tests in parallel. Currently failing because simultaneous calls to `npm i -g yarn` or `npm install -g mrm@^3.0.0 mrm-task-lint-staged@^6.0.0` cause crashes.
+    const createNextStackDir = process.cwd()
+
+    // Interactive test
+    await testDefaultOptionsInteractive(createNextStackDir)
+
+    // Styling only
+    await testEmotionOnlyNonInteractive(createNextStackDir)
+    await testStyledComponentsOnlyNonInteractive(createNextStackDir)
+    await testCssModulesOnlyNonInteractive(createNextStackDir)
+
+    // All flags
+    await testEmotionAllFlagsNonInteractive(createNextStackDir)
+    await testStyledComponentsAllFlagsNonInteractive(createNextStackDir)
+    await testCssModulesAllFlagsNonInteractive(createNextStackDir)
   } catch (error) {
     exitWithError(error)
   }