Merge pull request #117 from akd-io/release/0.1.5

Release 0.1.5

Author: akd-io

.github/workflows/main.yml

@@ -1,6 +1,8 @@
 name: "CI"
 
-on: [push]
+on:
+  push:
+  workflow_dispatch:
 
 jobs:
   build:

README.md

@@ -13,19 +13,24 @@
   <a aria-label="License" href="https://github.com/akd-io/create-next-stack/blob/develop/LICENSE">
     <img alt="" src="https://img.shields.io/npm/l/create-next-stack?color=44cc11&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>
 </p>
 
-Create Next Stack is an opinionated interactive CLI tool to easily set up the boilerplate of a new [Next.js](https://github.com/vercel/next.js) app.
+Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new [Next.js](https://github.com/vercel/next.js) apps.
 
 Where [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) lets you choose a single template only, Create Next Stack lets you pick and choose an array of technologies often used alongside Next.js, and free you of the pain of making them work together.
 
-To get started, run:
+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) or run:
 
 ```bash
 npx create-next-stack
 ```
 
-Then, pick a project name, and your preferred technologies like so:
+If using the CLI, you'll be prompted to 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">
@@ -35,45 +40,38 @@ Then, pick a project name, and your preferred technologies like so:
 
 The table below provides an overview of the technologies currently supported by Create Next Stack.
 
-### Icons
-
-A few icons are used to label different properties of these technologies. We describe these here:
-
-#### <img width="14" alt="" src="assets/required-icon.png"> Required icon:
+### Technologies table
 
-Technologies marked required are, you guessed it, required. If you don't want to use these technologies, you have three options:
+| Name                                                      | Links                                                                                                                                                                |
+| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Next.js](https://nextjs.org/) ⚠                          | [Docs](https://nextjs.org/docs) - [Learn Next.js](https://nextjs.org/learn) - [GitHub repo](https://github.com/vercel/next.js)                                       |
+| [React](https://reactjs.org/) ⚠                           | [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub repo](https://github.com/facebook/react)                                                             |
+| [TypeScript](https://www.typescriptlang.org/) ⚠           | [Docs](https://www.typescriptlang.org/docs/) - [GitHub repo](https://github.com/microsoft/TypeScript)                                                                |
+| [ESLint](https://eslint.org/) ⚠                           | [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/)                              | [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) |
+| [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)                                                           |
+| [Material UI](https://material-ui.com/)                   | [Docs](https://material-ui.com/getting-started/installation/) - [GitHub repo](https://github.com/mui-org/material-ui)                                                |
+| [React Hook Form](https://react-hook-form.com/)           | [Docs](https://react-hook-form.com/get-started) - [GitHub repo](https://github.com/react-hook-form/react-hook-form)                                                  |
+| [Formik](https://formik.org/)                             | [Docs](https://formik.org/docs/overview) - [GitHub repo](https://github.com/formium/formik)                                                                          |
+| [Framer Motion](https://www.framer.com/motion/)           | [Docs](https://www.framer.com/docs/) - [GitHub repo](https://github.com/framer/motion)                                                                               |
+| [Prettier](https://prettier.io/)                          | [Docs](https://prettier.io/docs/en/index.html) - [Options](https://prettier.io/docs/en/options.html) - [GitHub repo](https://github.com/prettier/prettier)           |
+| [Husky](https://typicode.github.io/husky/)                | [Docs](https://typicode.github.io/husky/) - [GitHub repo](https://github.com/typicode/husky)                                                                         |
+| [lint-staged](https://github.com/okonet/lint-staged)      | [GitHub repo](https://github.com/okonet/lint-staged)                                                                                                                 |
+| [GitHub Actions](https://github.com/features/actions)     | [Docs](https://docs.github.com/en/actions) - [Workflow syntax](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions)                      |
+
+#### ⚠ Required
+
+Technologies marked with ⚠ are required. If you don't want to use these technologies, you have three options:
 
 1. Set up your project using Create Next Stack anyway, and make the necessary adjustments manually.
 1. Set up your project manually with Create Next App.
 1. Find and use a template repo you can clone here on GitHub.
 
-#### <img width="14" alt="" src="assets/convenience-icon.png"> Convenience install icon:
-
-Technologies marked as _convenience installs_ are technologies that work out of the box with Next.js, and which Create Next Stack is making available for convenience only. If you are on the fence about a specific technology marked with the icon, you can safely skip it and install it in the future without worrying about complicated setup steps.
-
-### Technologies table
-
-| Name                                                                                                                              | Links                                                                                                                                                                |
-| --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Next.js](https://nextjs.org/) <img width="14" alt="required icon" src="assets/required-icon.png">                                | [Docs](https://nextjs.org/docs) - [Learn Next.js](https://nextjs.org/learn) - [GitHub repo](https://github.com/vercel/next.js)                                       |
-| [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/)                                                                                                      | [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) |
-| [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)                                                                               |
-| [Prettier](https://prettier.io/)                                                                                                  | [Docs](https://prettier.io/docs/en/index.html) - [Options](https://prettier.io/docs/en/options.html) - [GitHub repo](https://github.com/prettier/prettier)           |
-| [Husky](https://typicode.github.io/husky/)                                                                                        | [Docs](https://typicode.github.io/husky/) - [GitHub repo](https://github.com/typicode/husky)                                                                         |
-| [lint-staged](https://github.com/okonet/lint-staged)                                                                              | [GitHub repo](https://github.com/okonet/lint-staged)                                                                                                                 |
-| [GitHub Actions](https://github.com/features/actions)                                                                             | [Docs](https://docs.github.com/en/actions) - [Workflow syntax](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions)                      |
-
 ## Usage
 
 Below you see an overview of Create Next Stack's usage, including detailed information about arguments and options. The overview is the result of running `create-next-stack --help`

assets/banner.png

@@ -1,6 +1,7 @@
 {
   "name": "create-next-stack",
-  "version": "0.1.4",
+  "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",
   "author": "Anders Kjær Damgaard @akd-io",
   "bin": {
     "create-next-stack": "./bin/run"

package.json

@@ -15,7 +15,7 @@ import { performSetupSteps } from "./setup/setup"
 
 class CreateNextStack extends Command {
   static description =
-    "Create Next Stack is an opinionated interactive CLI tool to easily set up the boilerplate of a new Next.js app."
+    "Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps."
 
   static args = [
     {
@@ -65,6 +65,10 @@ class CreateNextStack extends Command {
         "Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)",
     }),
 
+    "material-ui": flags.boolean({
+      description: "Adds Material UI. (Component library)",
+    }),
+
     // Form libraries:
     "react-hook-form": flags.boolean({
       description: "Adds React Hook Form. (Form library)",

src/main/index.ts

@@ -89,6 +89,7 @@ export const performFlagsQuestionnaire =
         "formattingPreCommitHook"
       ),
       chakra: technologies.has("chakra"),
+      "material-ui": technologies.has("material-ui"),
     }
 
     return result

src/main/questionnaire/flags-questionnaire.ts

@@ -2,7 +2,7 @@ import inquirer from "inquirer"
 import { arrayToKeyToKeyMap } from "../../../helpers/array-to-key-to-key-map"
 import { Technology } from "../../flags-questionnaire"
 
-const componentLibraryOptions = ["chakra"] as const
+const componentLibraryOptions = ["chakra", "material-ui"] as const
 export type ComponentLibraryValue = typeof componentLibraryOptions[number]
 const componentLibraryValues = arrayToKeyToKeyMap(componentLibraryOptions)
 
@@ -25,6 +25,11 @@ export const promptComponentLibraries = async (
         checked: technologies.has("emotion"),
         disabled: !technologies.has("emotion"),
       },
+      {
+        value: componentLibraryValues["material-ui"],
+        name: "Material UI",
+        checked: false,
+      },
     ],
   })
 

src/main/questionnaire/questions/categories/component-libraries.ts

@@ -107,7 +107,7 @@ export const packages = {
   },
   "create-next-app": {
     name: "create-next-app",
-    version: "~11.1.0", // Note: Create Next App uses an exact minor
+    version: "~11.1.0", // Note: Equivalent to 11.1.x. However, when used with npx, the version range is interpreted exactly instead.
   },
   mrm: {
     name: "mrm",
@@ -125,4 +125,12 @@ export const packages = {
     name: "@chakra-ui/react",
     version: "^1.0.0",
   },
+  "@material-ui/core": {
+    name: "@material-ui/core",
+    version: "^4.0.0",
+  },
+  "@material-ui/icons": {
+    name: "@material-ui/icons",
+    version: "^4.0.0",
+  },
 } as const

src/main/setup/packages.ts

@@ -3,12 +3,13 @@ import { capitalizeFirstLetter } from "../helpers/capitalize-first-letter"
 import { logInfo } from "../logging"
 import { printFinalMessages } from "./print-final-messages"
 import { Step } from "./step"
-import { addBaseBabelConfigStep } from "./steps/add-base-babel-config"
 import { addBaseTestScriptStep } from "./steps/add-base-test-script"
 import { addContentStep } from "./steps/add-content/add-content"
 import { addGitAttributesStep } from "./steps/add-git-attributes"
 import { addGithubWorkflowStep } from "./steps/add-github-workflow"
 import { addReadmeStep } from "./steps/add-readme/add-readme"
+import { addBaseBabelConfigStep } from "./steps/babel/add-base-babel-config"
+import { removeBaseBabelConfigStep } from "./steps/babel/remove-base-babel-config copy"
 import { copyAssetsStep } from "./steps/copy-assets"
 import { createNextAppStep } from "./steps/create-next-app"
 import { formatProjectStep } from "./steps/format-project"
@@ -22,6 +23,7 @@ import { setUpCssModulesWithSassStep } from "./steps/set-up-css-modules-with-sas
 import { setUpEmotionStep } from "./steps/set-up-emotion"
 import { setUpEslintStep } from "./steps/set-up-eslint"
 import { setUpLintStagedStep } from "./steps/set-up-lint-staged"
+import { setUpMaterialUIStep } from "./steps/set-up-material-ui"
 import { setUpPrettierStep } from "./steps/set-up-prettier"
 import { setUpStyledComponentsStep } from "./steps/set-up-styled-components"
 import { updateYarnStep } from "./steps/update-yarn"
@@ -50,6 +52,7 @@ export const performSetupSteps = async (
 
     // Component libraries
     setUpChakraUIStep,
+    setUpMaterialUIStep,
 
     // Formatting
     setUpPrettierStep,
@@ -70,6 +73,9 @@ export const performSetupSteps = async (
     addContentStep,
     addReadmeStep,
 
+    // Cleanup
+    removeBaseBabelConfigStep,
+
     // Format & initial commit
     formatProjectStep,
     gitCommitStep,

src/main/setup/setup.ts

@@ -44,8 +44,11 @@ export const addContentStep: Step = {
       )
     }
 
-    if (styling === "emotion" && inputs.flags.chakra) {
-      promises.push(fs.writeFile("theme.ts", generateTheme()))
+    if (
+      (styling === "emotion" && inputs.flags.chakra) ||
+      inputs.flags["material-ui"]
+    ) {
+      promises.push(...generateTheme(inputs))
     }
 
     await Promise.all(promises)