Merge pull request #126 from akd-io/release/0.1.6

Release 0.1.6

Author: akd-io

.github/workflows/main.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node: ["12", "14"]
+        node: ["14", "16"]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     runs-on: ${{ matrix.os }}

README.md

@@ -52,6 +52,7 @@ The table below provides an overview of the technologies currently supported by
 | [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)                                                   |
+| [Tailwind CSS](https://tailwindcss.com/)                  | [Docs](https://tailwindcss.com/docs) - [GitHub repo](https://github.com/tailwindlabs/tailwindcss)                                                                    |
 | [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/)                            | [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)                                                           |
@@ -92,10 +93,11 @@ OPTIONS
   --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=(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. (Required) <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|tailwind-css|css-modules|css-modules-with-sass
 ```
 
 ## License

package.json

@@ -1,7 +1,7 @@
 {
   "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.1.5",
+  "version": "0.1.6",
   "author": "Anders Kjær Damgaard @akd-io",
   "bin": {
     "create-next-stack": "./bin/run"
@@ -39,7 +39,7 @@
     "uuid": "^8.3.2"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "files": [
     "/bin",

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

@@ -36,6 +36,7 @@ export const writablePackageManagerOptions = packageManagerOptions as Writable<
 export const stylingOptions = [
   "emotion",
   "styled-components",
+  "tailwind-css",
   "css-modules",
   "css-modules-with-sass",
 ] as const

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

@@ -1,6 +1,6 @@
 import { ExitError } from "@oclif/errors"
 import { logError } from "../logging"
-import { inDebugMode } from "./is-debug-enabled"
+import { inDebugMode } from "./in-debug-mode"
 
 export const exitWithError = (error: unknown): never => {
   if (error instanceof ExitError && error.oclif.exit === 0) {

src/main/helpers/is-debug-enabled.ts src/main/helpers/in-debug-mode.tssrc/main/helpers/is-debug-enabled.ts renamed to src/main/helpers/in-debug-mode.ts

@@ -1,7 +1,13 @@
 import { promises as fs } from "fs"
+import { logDebug } from "../logging"
 import { isUnknownArray } from "./is-unknown-array"
 import { isUnknownObject } from "./is-unknown-object"
 
+export const writeFile: typeof fs.writeFile = async (file, data, options) => {
+  logDebug("Writing file:", file.toString())
+  return fs.writeFile(file, data, options)
+}
+
 export const modifyJsonFile = async (
   path: string,
   callback: (oldObject: Record<string, unknown>) => Record<string, unknown>
@@ -14,6 +20,7 @@ export const modifyJsonFile = async (
 export const readJsonFile = async (
   path: string
 ): Promise<Record<string, unknown>> => {
+  logDebug("Reading json file:", path)
   const jsonString = await fs.readFile(path, "utf8")
   const jsonObject = JSON.parse(jsonString)
 
@@ -28,6 +35,7 @@ export const writeJsonFile = async (
   fileName: string,
   object: Record<string, unknown>
 ): Promise<void> => {
+  logDebug("Writing json file:", fileName)
   const objectString = JSON.stringify(object, null, 2)
   await fs.writeFile(fileName, objectString)
 }

src/main/helpers/json-files.ts src/main/helpers/io.tssrc/main/helpers/json-files.ts renamed to src/main/helpers/io.ts

@@ -1,26 +1,26 @@
 import chalk from "chalk"
-import { inDebugMode } from "./helpers/is-debug-enabled"
+import { inDebugMode } from "./helpers/in-debug-mode"
 import { prefixLines } from "./helpers/prefix-lines"
 
 const infoPrefix = chalk.cyan("info ")
 const debugPrefix = chalk.white("debug ")
 const warningPrefix = chalk.yellow("warning ")
 const errorPrefix = chalk.red("error ")
 
-export const logInfo = (str: string): void => {
-  console.info(prefixLines(infoPrefix, chalk.white(str)))
+export const logInfo = (...str: string[]): void => {
+  console.info(prefixLines(infoPrefix, chalk.white(str.join(" "))))
 }
 
-export const logDebug = (str: string): void => {
+export const logDebug = (...str: string[]): void => {
   if (inDebugMode()) {
-    console.debug(prefixLines(debugPrefix, chalk.white(str)))
+    console.debug(prefixLines(debugPrefix, chalk.white(str.join(" "))))
   }
 }
 
-export const logWarning = (str: string): void => {
-  console.warn(prefixLines(warningPrefix, chalk.yellow(str)))
+export const logWarning = (...str: string[]): void => {
+  console.warn(prefixLines(warningPrefix, chalk.yellow(str.join(" "))))
 }
 
-export const logError = (str: string): void => {
-  console.error(prefixLines(errorPrefix, chalk.red(str)))
+export const logError = (...str: string[]): void => {
+  console.error(prefixLines(errorPrefix, chalk.red(str.join(" "))))
 }

src/main/logging.ts

@@ -25,6 +25,10 @@ export const promptStyling = async (): Promise<StylingValue> => {
         value: stylingValues["styled-components"],
         name: "Styled Components",
       },
+      {
+        value: stylingValues["tailwind-css"],
+        name: "Tailwind CSS",
+      },
       {
         value: stylingValues["css-modules"],
         name: "CSS Modules",

src/main/questionnaire/questions/categories/styling.ts

@@ -0,0 +1,11 @@
+import execa, { ExecaChildProcess, Options } from "execa"
+import { logDebug } from "./logging"
+
+export const runCommand = (
+  file: string,
+  args: string[],
+  options?: Options
+): ExecaChildProcess<string> => {
+  logDebug("Running command:", [file, ...args].join(" "))
+  return execa(file, args, options)
+}