Merge pull request #54 from akd-io/release/0.0.8

Release 0.0.8

Author: akd-io

.eslintrc

@@ -11,6 +11,7 @@
     "dot-notation": "off",
     "no-process-exit": "off",
     "unicorn/no-process-exit": "off",
+    "no-warning-comments": "off",
     "@typescript-eslint/no-use-before-define": "off"
   }
 }

README.md

@@ -61,6 +61,7 @@ Technologies marked as _convenience installs_ are technologies that work out of
 | [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)                                                                                |
 | [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) |
 | [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)                                                                          |

package.json

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

src/questionnaire/questions/technologies.ts

@@ -4,6 +4,7 @@ import { arrayToKeyToKeyMap } from "../../helpers/array-to-key-to-key-map"
 const techValueArray = <const>[
   "prettier",
   "emotion",
+  "styledComponents",
   "cssModules",
   "reactHookForm",
   "formik",
@@ -30,6 +31,10 @@ const techChoices: {
     name: "Emotion",
     checked: true,
   },
+  styledComponents: {
+    value: "styledComponents",
+    name: "Styled Components",
+  },
   cssModules: {
     value: "cssModules",
     name: "CSS Modules",
@@ -71,6 +76,7 @@ export async function promptTechnologies() {
 
       new Separator("Styling:"),
       techChoices.emotion,
+      techChoices.styledComponents,
       techChoices.cssModules,
 
       new Separator("Form state management:"),
@@ -91,14 +97,13 @@ export async function promptTechnologies() {
         return `${techChoices.preCommitHook.name} requires ${techChoices.prettier.name}`
       }
 
-      const bothEmotionAndCSSModules =
-        technologies.includes(techValues.emotion) &&
+      const onlyOneStylingSelected = oneOf(
+        technologies.includes(techValues.emotion),
+        technologies.includes(techValues.styledComponents),
         technologies.includes(techValues.cssModules)
-      const neitherEmotionNorCSSModules =
-        !technologies.includes(techValues.emotion) &&
-        !technologies.includes(techValues.cssModules)
-      if (bothEmotionAndCSSModules || neitherEmotionNorCSSModules) {
-        return `You have to pick either ${techChoices.emotion.name} or ${techChoices.cssModules.name}`
+      )
+      if (!onlyOneStylingSelected) {
+        return `You have to pick exactly one styling solution.`
       }
 
       return true
@@ -107,3 +112,10 @@ export async function promptTechnologies() {
 
   return technologies
 }
+
+const oneOf = (...booleans: boolean[]) => {
+  const count = booleans.reduce((previous, current) => {
+    return current ? previous + 1 : previous
+  }, 0)
+  return count === 1
+}

src/setup/packages.ts

@@ -1,13 +1,96 @@
+import execa from "execa"
+
+type Package = {
+  readonly name: string
+  readonly minVersion: string
+}
+
+type InstallPackageOptions = {
+  dev?: boolean
+}
+export const yarnAdd = async (
+  npmPackage: Package | Package[],
+  options?: InstallPackageOptions
+) => {
+  const packageArray = Array.isArray(npmPackage) ? npmPackage : [npmPackage]
+
+  const packagesWithVersions = packageArray.map((pkg) =>
+    getQuotedNameVersionCombo(pkg)
+  )
+
+  let yarnAddCommand = "yarn add"
+  if (options != null && options.dev != null && options.dev) {
+    yarnAddCommand += " --dev"
+  }
+  packagesWithVersions.forEach((packageWithVersion) => {
+    yarnAddCommand += ` ${packageWithVersion}`
+  })
+  return execa(yarnAddCommand)
+}
+
+export const getQuotedNameVersionCombo = (npmPackage: Package) => {
+  return `"${npmPackage.name}@^${npmPackage.minVersion}"`
+}
+
 export const packages = {
-  yarn: "yarn@1",
-  prettier: "prettier@2",
-  "eslint-config-prettier": "eslint-config-prettier@8",
-  "@emotion/react": "@emotion/react@11",
-  "@emotion/styled": "@emotion/styled@11",
-  "@emotion/babel-plugin": "@emotion/babel-plugin@11",
-  "react-hook-form": "react-hook-form@7",
-  formik: "formik@2",
-  "framer-motion": "framer-motion@4",
-  "create-next-app": "create-next-app@11",
-  mrm: "mrm@2",
+  yarn: {
+    name: "yarn",
+    minVersion: "1.0.0",
+  },
+  prettier: {
+    name: "prettier",
+    minVersion: "2.0.0",
+  },
+  "eslint-config-prettier": {
+    name: "eslint-config-prettier",
+    minVersion: "8.0.0",
+  },
+  "@emotion/react": {
+    name: "@emotion/react",
+    minVersion: "11.0.0",
+  },
+  "@emotion/styled": {
+    name: "@emotion/styled",
+    minVersion: "11.0.0",
+  },
+  "@emotion/babel-plugin": {
+    name: "@emotion/babel-plugin",
+    minVersion: "11.0.0",
+  },
+  "styled-components": {
+    name: "styled-components",
+    minVersion: "5.0.0",
+  },
+  "@types/styled-components": {
+    name: "@types/styled-components",
+    minVersion: "5.0.0",
+  },
+  "babel-plugin-styled-components": {
+    name: "babel-plugin-styled-components",
+    minVersion: "1.0.0",
+  },
+  "react-hook-form": {
+    name: "react-hook-form",
+    minVersion: "7.0.0",
+  },
+  formik: {
+    name: "formik",
+    minVersion: "2.0.0",
+  },
+  "framer-motion": {
+    name: "framer-motion",
+    minVersion: "4.0.0",
+  },
+  "create-next-app": {
+    name: "create-next-app",
+    minVersion: "11.0.0",
+  },
+  mrm: {
+    name: "mrm",
+    minVersion: "3.0.0",
+  },
+  "mrm-task-lint-staged": {
+    name: "mrm-task-lint-staged",
+    minVersion: "6.0.0",
+  },
 } as const

src/setup/setup.ts

@@ -16,6 +16,7 @@ import { removeOfficialCNAContentStep } from "./steps/remove-official-cna-conten
 import { setUpEmotionStep } from "./steps/set-up-emotion"
 import { setUpLintStagedStep } from "./steps/set-up-lint-staged"
 import { setUpPrettierStep } from "./steps/set-up-prettier"
+import { setUpStyledComponentsStep } from "./steps/set-up-styled-components"
 import { updateYarnStep } from "./steps/update-yarn"
 
 export async function performSetupSteps(
@@ -30,6 +31,7 @@ export async function performSetupSteps(
 
     addBaseBabelConfigStep,
     setUpEmotionStep,
+    setUpStyledComponentsStep,
 
     setUpPrettierStep,
     setUpLintStagedStep,

src/setup/steps/add-content/add-content.ts

@@ -24,19 +24,24 @@ export const addContentStep: Step = {
         writeFile("pages/_app.tsx", generateApp(answers)),
       ]
 
-      if (answers.technologies.includes(techValues.emotion)) {
+      if (
+        answers.technologies.includes(techValues.emotion) ||
+        answers.technologies.includes(techValues.styledComponents)
+      ) {
         promises.push(
           writeFile(
             "components/WithDefaultGlobalStyles.tsx",
-            generateWithDefaultGlobalStyles()
+            generateWithDefaultGlobalStyles(answers)
           )
         )
-      }
-
-      if (answers.technologies.includes(techValues.cssModules)) {
+      } else if (answers.technologies.includes(techValues.cssModules)) {
         await mkdir("styles")
         promises.push(writeFile("styles/index.module.css", indexCSSModule))
         promises.push(writeFile("styles/global-styles.css", globalStyles))
+      } else {
+        throw new Error(
+          "Unsupported styling technology found in addContentStep, or no styling technology was chosen."
+        )
       }
 
       await Promise.all(promises)

src/setup/steps/add-content/generate-index/generate-index.ts

@@ -1,12 +1,19 @@
 import { QuestionnaireAnswers } from "../../../../questionnaire/questionnaire"
 import { techValues } from "../../../../questionnaire/questions/technologies"
-import { generateIndexWithCssModules } from "./generate-index-with-css-modules"
-import { generateIndexWithEmotion } from "./generate-index-with-emotion"
+import { generateIndexWithCssInJs } from "./with-css-in-js/generate-index-with-css-in-js"
+import { generateIndexWithCssModules } from "./with-css-modules/generate-index-with-css-modules"
 
 export const generateIndex = (answers: QuestionnaireAnswers) => {
-  if (answers.technologies.includes(techValues.emotion)) {
-    return generateIndexWithEmotion(answers)
-  } else {
+  if (
+    answers.technologies.includes(techValues.emotion) ||
+    answers.technologies.includes(techValues.styledComponents)
+  ) {
+    return generateIndexWithCssInJs(answers)
+  } else if (answers.technologies.includes(techValues.cssModules)) {
     return generateIndexWithCssModules(answers)
+  } else {
+    throw new Error(
+      "Unsupported styling technology found in generateIndex, or no styling technology was chosen."
+    )
   }
 }

…ate-index/generate-index-with-emotion.ts …s-in-js/generate-index-with-css-in-js.tssrc/setup/steps/add-content/generate-index/generate-index-with-emotion.ts renamed to src/setup/steps/add-content/generate-index/with-css-in-js/generate-index-with-css-in-js.ts src/setup/steps/add-content/generate-index/generate-index-with-emotion.ts renamed to src/setup/steps/add-content/generate-index/with-css-in-js/generate-index-with-css-in-js.ts

@@ -1,14 +1,15 @@
-import { QuestionnaireAnswers } from "../../../../questionnaire/questionnaire"
+import { QuestionnaireAnswers } from "../../../../../questionnaire/questionnaire"
 import {
   confettiImports,
   confettiScriptComponent,
   onConfettiLoadFunction,
-} from "./confetti-script"
+} from "../confetti-script"
+import { getStyledImport } from "./get-styled-import"
 
-export const generateIndexWithEmotion = (
+export const generateIndexWithCssInJs = (
   answers: QuestionnaireAnswers
 ) => /* tsx */ `
-import styled from "@emotion/styled";
+${getStyledImport(answers)}
 import { NextPage } from "next";
 ${confettiImports}
 import Page from "../components/Page";

src/setup/steps/add-content/generate-index/with-css-in-js/get-styled-import.ts

@@ -0,0 +1,14 @@
+import { QuestionnaireAnswers } from "../../../../../questionnaire/questionnaire"
+import { techValues } from "../../../../../questionnaire/questions/technologies"
+
+export const getStyledImport = (answers: QuestionnaireAnswers) => {
+  if (answers.technologies.includes(techValues.emotion)) {
+    return `import styled from "@emotion/styled";`
+  } else if (answers.technologies.includes(techValues.styledComponents)) {
+    return `import styled from "styled-components";`
+  } else {
+    throw new Error(
+      "Unsupported styled library found in getStyledImport, or no styled library was chosen."
+    )
+  }
+}