Add IDs to technologies, add technologies sort order and tests

akd-io · akd-io · commit 2f4765b521cc · 2023-05-23T23:35:09.000+02:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -92,6 +92,7 @@ See the [Framer Motion plugin](packages/create-next-stack/src/main/plugins/emoti
 
 ```typescript
 export const framerMotionPlugin = createPlugin({
+  id: "framer-motion",
   name: "Framer Motion",
   description: "Adds support for Framer Motion",
   active: ({ flags }) => Boolean(flags["framer-motion"]),
@@ -103,6 +104,7 @@ export const framerMotionPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "framerMotion",
       name: "Framer Motion",
       description:
         "Framer Motion is a popular React animation library. It allows users to create both simple animations and complex gesture-based interactions. The library implements a declarative API, otherwise known as spring animations, which lets the developer define the animation's end state, letting the library handle the rest.",
diff --git a/packages/create-next-stack/src/main/plugin.ts b/packages/create-next-stack/src/main/plugin.ts
@@ -58,6 +58,8 @@ export type Package = {
 }
 
 type Technology = {
+  /** ID that uniquely identified the technology across all plugins' technologies. */
+  id: string
   /** The name of the technology. */
   name: string
   /** Description of a technology. This is displayed in the generated README.md file, as well as in the landing page's list of technologies. */
@@ -93,9 +95,7 @@ type Script = {
 }
 
 type RawStep = {
-  /**
-   * `id` should be written in camelCase, and should be unique across all plugins' steps.
-   */
+  /** ID that uniquely identified the technology across all plugins' steps. */
   id: string
 
   /**
diff --git a/packages/create-next-stack/src/main/plugins/chakra-ui/chakra-ui.ts b/packages/create-next-stack/src/main/plugins/chakra-ui/chakra-ui.ts
@@ -20,6 +20,7 @@ export const chakraUIPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "chakraUI",
       name: "Chakra UI",
       description:
         "Chakra UI is a simple, modular, and accessible React component library that provides all the building blocks needed to build React user interfaces. It uses Emotion under the hood and includes components ranging from basic buttons and form input fields to tooltips and modals.",
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/add-content/templates/LandingPage/generate-technologies.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/add-content/templates/LandingPage/generate-technologies.ts
@@ -1,10 +1,7 @@
 import endent from "endent"
 import { ValidCNSInputs } from "../../../../../create-next-stack-types"
-import { DeeplyReadonly } from "../../../../../helpers/deeply-readonly"
 import { stringify } from "../../../../../helpers/stringify"
-import { filterPlugins } from "../../../../../setup/setup"
-
-// TODO: Add a technologies sort order here. Use TypeScript to force setting all plugin technologies.
+import { getSortedFilteredTechnologies } from "../../../sort-orders/technologies"
 
 // This type should match the one in the template below.
 export type Technology = {
@@ -17,9 +14,7 @@ export type Technology = {
 }
 
 export const generateTechnologies = (inputs: ValidCNSInputs): string => {
-  const pluginTechnologies = filterPlugins(inputs).flatMap(
-    (plugin): DeeplyReadonly<Technology[]> => plugin.technologies ?? []
-  )
+  const technologies = getSortedFilteredTechnologies(inputs)
 
   return endent`
     export type Technology = {
@@ -30,6 +25,6 @@ export const generateTechnologies = (inputs: ValidCNSInputs): string => {
         url: string;
       }>;
     };
-    export const technologies: Technology[] = ${stringify(pluginTechnologies)};
+    export const technologies: Technology[] = ${stringify(technologies)};
   `
 }
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/add-readme/generate-script-table-rows.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/add-readme/generate-script-table-rows.ts
@@ -1,5 +1,5 @@
 import { ValidCNSInputs } from "../../../create-next-stack-types"
-import { getSortedFilteredScripts } from "../scripts/sort-order"
+import { getSortedFilteredScripts } from "../sort-orders/scripts"
 
 export const generateScriptTableRows = async (
   inputs: ValidCNSInputs
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/add-readme/generate-technology-table-rows.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/add-readme/generate-technology-table-rows.ts
@@ -1,26 +1,15 @@
 import { ValidCNSInputs } from "../../../create-next-stack-types"
-import { filterPlugins } from "../../../setup/setup"
+import { getSortedFilteredTechnologies } from "../sort-orders/technologies"
 
 export const generateTechnologyTableRows = async (
   inputs: ValidCNSInputs
 ): Promise<string> => {
-  type TechnologyTableRow = {
-    name: string
-    links: string
-  }
-
-  const technologies: TechnologyTableRow[] = filterPlugins(inputs).flatMap(
-    ({ technologies }) => {
-      if (!technologies) return []
-      return technologies.map((technology) => ({
-        name: technology.name,
-        links: technology.links
-          .map((l) => `[${l.title}](${l.url})`)
-          .join(" - "),
-      }))
-    }
+  const technologies = getSortedFilteredTechnologies(inputs).map(
+    (technology) => ({
+      name: technology.name,
+      links: technology.links.map((l) => `[${l.title}](${l.url})`).join(" - "),
+    })
   )
-
   return technologies
     .map((technology) => `| ${technology.name} | ${technology.links} |`)
     .join("\n")
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/create-next-stack.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/create-next-stack.ts
@@ -22,7 +22,7 @@ import { generateIndexPage } from "./add-content/pages/generate-index"
 import { generateLandingPageTemplate } from "./add-content/templates/LandingPage/generate-LandingPageTemplate"
 import { generateTechnologies } from "./add-content/templates/LandingPage/generate-technologies"
 import { generateReadme } from "./add-readme/generate-readme"
-import { getSortedFilteredScripts } from "./scripts/sort-order"
+import { getSortedFilteredScripts } from "./sort-orders/scripts"
 
 const gitAttributesFilename = ".gitattributes"
 
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/scripts.test.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/scripts.test.ts
@@ -1,6 +1,6 @@
 import { test } from "@jest/globals"
 import { plugins } from "../../../setup/setup"
-import { scriptsSortOrder } from "./sort-order"
+import { scriptsSortOrder } from "./scripts"
 
 test("`scriptsSortOrder` contains no duplicates", () => {
   const seenScripts = new Set<string>()
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/scripts.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/scripts.ts
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/technologies.test.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/technologies.test.ts
@@ -0,0 +1,31 @@
+import { test } from "@jest/globals"
+import { plugins } from "../../../setup/setup"
+import { technologiesSortOrder } from "./technologies"
+
+test("`technologiesSortOrder` contains no duplicates", () => {
+  const seenTechnologies = new Set<string>()
+  for (const technology of technologiesSortOrder) {
+    if (seenTechnologies.has(technology)) {
+      throw new Error(
+        `Duplicate technology with name "${technology}" found in sort-order.ts`
+      )
+    }
+    seenTechnologies.add(technology)
+  }
+})
+
+test("`technologiesSortOrder` includes all plugins' technologies", () => {
+  const requiredTechnologyIDs = plugins.flatMap((plugin) =>
+    plugin.technologies //
+      ? Object.values(plugin.technologies).map((technology) => technology.id)
+      : []
+  )
+  const actualTechnologyIDs = new Set(technologiesSortOrder)
+  for (const requiredTechnology of requiredTechnologyIDs) {
+    if (!actualTechnologyIDs.has(requiredTechnology)) {
+      throw new Error(
+        `Missing technology with name "${requiredTechnology}" in sort-order.ts`
+      )
+    }
+  }
+})
diff --git a/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/technologies.ts b/packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/technologies.ts
@@ -0,0 +1,38 @@
+import { ValidCNSInputs } from "../../../create-next-stack-types"
+import { compareByOrder } from "../../../helpers/sort-by-order"
+import { filterPlugins } from "../../../setup/setup"
+
+export const technologiesSortOrder: string[] = [
+  "next",
+  "react",
+  "typescript",
+  "emotion",
+  "styledComponents",
+  "tailwindCSS",
+  "sass",
+  "cssModules",
+  "chakraUI",
+  "materialUI",
+  "reactHookForm",
+  "formik",
+  "framerMotion",
+  "eslint",
+  "prettier",
+  "husky",
+  "lintStaged",
+  "pnpm",
+  "yarn",
+  "npm",
+  "githubActions",
+  "reactIcons",
+]
+
+export const getSortedFilteredTechnologies = (inputs: ValidCNSInputs) => {
+  const technologies = filterPlugins(inputs).flatMap(
+    (plugin) => plugin.technologies ?? []
+  )
+  const dedupedTechnologies = [...new Set(technologies)]
+  return dedupedTechnologies.sort((a, b) =>
+    compareByOrder(a.name, b.name, technologiesSortOrder)
+  )
+}
diff --git a/packages/create-next-stack/src/main/plugins/css-modules/css-modules.ts b/packages/create-next-stack/src/main/plugins/css-modules/css-modules.ts
@@ -9,6 +9,7 @@ export const cssModulesPlugin = createPlugin({
   active: ({ flags }) => Boolean(flags.styling === "css-modules"),
   technologies: [
     {
+      id: "cssModules",
       name: "CSS Modules",
       description:
         "CSS Modules are CSS files in which all class names are scoped locally to the component importing them. This means that developers can use the same CSS class name in different files without worrying about naming conflicts. Gone are the days of writing BEM class names!",
diff --git a/packages/create-next-stack/src/main/plugins/emotion.ts b/packages/create-next-stack/src/main/plugins/emotion.ts
@@ -12,6 +12,7 @@ export const emotionPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "emotion",
       name: "Emotion",
       description:
         "Emotion is a React CSS-in-JS library designed for writing css styles inside JavaScript and TypeScript files. It provides powerful and predictable style composition in addition to a great developer experience. Developers can style their components using both string and object notation.",
diff --git a/packages/create-next-stack/src/main/plugins/eslint.ts b/packages/create-next-stack/src/main/plugins/eslint.ts
@@ -7,6 +7,7 @@ export const eslintPlugin = createPlugin({
   active: true,
   technologies: [
     {
+      id: "eslint",
       name: "ESLint",
       description:
         "ESLint is a tool for linting JavaScript and TypeScript code. It is used to check for errors in code and to enforce coding conventions. It can be configured to use custom rule sets and is often run both by code editors during development as well as in CI/CD.",
diff --git a/packages/create-next-stack/src/main/plugins/formatting-pre-commit-hook.ts b/packages/create-next-stack/src/main/plugins/formatting-pre-commit-hook.ts
@@ -24,6 +24,7 @@ export const formattingPreCommitHookPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "husky",
       name: "Husky",
       description:
         "Husky uses git hooks to let you run code at specific times in your git workflow. It is mainly used to format and lint code in a pre-commit hook to ensure committed code is formatted and free of error.",
@@ -34,6 +35,7 @@ export const formattingPreCommitHookPlugin = createPlugin({
       ],
     },
     {
+      id: "lintStaged",
       name: "lint-staged",
       description:
         "lint-staged is a tool for running commands on staged files in a git repository. It is mainly used to filter out files that aren't staged during a formatting or linting pre-commit hook.",
diff --git a/packages/create-next-stack/src/main/plugins/formik.ts b/packages/create-next-stack/src/main/plugins/formik.ts
@@ -13,6 +13,7 @@ export const formikPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "formik",
       name: "Formik",
       description:
         "Formik is a React library that helps simplify the process of building and working with forms in React. It is designed to take care of the repetitive and tedious parts of form building, validation, and submission, making it easier and faster for developers to create forms.",
diff --git a/packages/create-next-stack/src/main/plugins/framer-motion.ts b/packages/create-next-stack/src/main/plugins/framer-motion.ts
@@ -13,6 +13,7 @@ export const framerMotionPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "framerMotion",
       name: "Framer Motion",
       description:
         "Framer Motion is a popular React animation library. It allows users to create both simple animations and complex gesture-based interactions. The library implements a declarative API, otherwise known as spring animations, which lets the developer define the animation's end state, letting the library handle the rest.",
diff --git a/packages/create-next-stack/src/main/plugins/github-actions.ts b/packages/create-next-stack/src/main/plugins/github-actions.ts
@@ -16,6 +16,7 @@ export const githubActionsPlugin = createPlugin({
   active: ({ flags }) => Boolean(flags["github-actions"]),
   technologies: [
     {
+      id: "githubActions",
       name: "GitHub Actions",
       description:
         "GitHub Actions is a tool for automating software development workflows. It is integrated with GitHub repositories and enables developers to automate tasks such as building, testing, and deploying their applications.",
diff --git a/packages/create-next-stack/src/main/plugins/material-ui/material-ui.ts b/packages/create-next-stack/src/main/plugins/material-ui/material-ui.ts
@@ -16,6 +16,7 @@ export const materialUIPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "materialUI",
       name: "Material UI",
       description:
         "Material UI is a React UI component library that implements Google's material design guidelines. It features pre-built with components ranging from basic buttons and form input fields to tooltips and modals.",
diff --git a/packages/create-next-stack/src/main/plugins/next.ts b/packages/create-next-stack/src/main/plugins/next.ts
@@ -21,6 +21,7 @@ export const nextPlugin = createPlugin({
   active: true,
   technologies: [
     {
+      id: "next",
       name: "Next.js",
       description:
         "Next.js is the leading framework in the React ecosystem, featuring server-side rendering and static site generation among other rendering techniques. Utilizing its file-based routing architecture and its zero-config design principle, it is designed to enhance both the user and developer experience.",
diff --git a/packages/create-next-stack/src/main/plugins/npm.ts b/packages/create-next-stack/src/main/plugins/npm.ts
@@ -7,6 +7,7 @@ export const npmPlugin = createPlugin({
   active: ({ flags }) => Boolean(flags["package-manager"] === "npm"),
   technologies: [
     {
+      id: "npm",
       name: "npm",
       description:
         "npm is the default package manager for Node.js. It consists of a command-line client, also called npm, and an online database of packages, called the npm registry, that enable developers to share and reuse code.",
diff --git a/packages/create-next-stack/src/main/plugins/pnpm.ts b/packages/create-next-stack/src/main/plugins/pnpm.ts
@@ -9,6 +9,7 @@ export const pnpmPlugin = createPlugin({
   active: ({ flags }) => Boolean(flags["package-manager"] === "pnpm"),
   technologies: [
     {
+      id: "pnpm",
       name: "pnpm",
       description:
         "pnpm is a JavaScript package manager compatible with the npm registry that performs better than Yarn and npm by using hard links and symlinks to allow package caching across projects.",
diff --git a/packages/create-next-stack/src/main/plugins/prettier.ts b/packages/create-next-stack/src/main/plugins/prettier.ts
@@ -15,6 +15,7 @@ export const prettierPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "prettier",
       name: "Prettier",
       description:
         "Prettier is a tool for formatting code. It is optimized for readability and consistency, and its opinionated nature ensures developers won't spent time debating code formatting configurations. Prettier normally runs in a pre-commit hook to ensure code is formatted before it is committed.",
diff --git a/packages/create-next-stack/src/main/plugins/react-hook-form.ts b/packages/create-next-stack/src/main/plugins/react-hook-form.ts
@@ -13,6 +13,7 @@ export const reactHookFormPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "reactHookForm",
       name: "React Hook Form",
       description:
         "React Hook Form is a React library that simplifies the process of implementing forms from state management to input validation and error handling. Unlike previous form libraries, it provides better performance by storing the form state in the dom by default.",
diff --git a/packages/create-next-stack/src/main/plugins/react-icons.ts b/packages/create-next-stack/src/main/plugins/react-icons.ts
@@ -10,6 +10,7 @@ export const reactIconsPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "reactIcons",
       name: "React Icons",
       description:
         "React Icons is SVG icon library. It comprises icons from over 25 of the most popular icon libraries including Ant Design Icons, Bootstrap Icons, Feather, Font Awesome, and Material Design icons. It uses React component syntax, and utilizes ES6 imports to only bundle the icons your app is using.",
diff --git a/packages/create-next-stack/src/main/plugins/react.ts b/packages/create-next-stack/src/main/plugins/react.ts
@@ -7,6 +7,7 @@ export const reactPlugin = createPlugin({
   active: true,
   technologies: [
     {
+      id: "react",
       name: "React",
       description:
         "React is a JavaScript library for building declarative and flexible user interfaces in a functional paradigm. Being the most popular front-end library in the world, it enables developers to create reusable UI components that can be composed to build complex web applications.",
diff --git a/packages/create-next-stack/src/main/plugins/sass/sass.ts b/packages/create-next-stack/src/main/plugins/sass/sass.ts
@@ -12,6 +12,7 @@ export const sassPlugin = createPlugin({
   technologies: [
     cssModulesPlugin.technologies[0],
     {
+      id: "sass",
       name: "Sass",
       description:
         "Sass is a stylesheet language that is compiled to CSS. It is an extension of CSS that adds extra powers to the basic language. It allows developers to use variables, nested rules, mixins, inline imports, and more.",
diff --git a/packages/create-next-stack/src/main/plugins/styled-components.ts b/packages/create-next-stack/src/main/plugins/styled-components.ts
@@ -16,6 +16,7 @@ export const styledComponentsPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "styledComponents",
       name: "Styled Components",
       description:
         "Styled Components is a React CSS-in-JS library designed for writing css styles inside JavaScript and TypeScript files. It provides powerful and predictable style composition in addition to a great developer experience. Developers can style their components using both string and object notation.",
diff --git a/packages/create-next-stack/src/main/plugins/tailwind-css.ts b/packages/create-next-stack/src/main/plugins/tailwind-css.ts
@@ -30,6 +30,7 @@ export const tailwindCSSPlugin = createPlugin({
   },
   technologies: [
     {
+      id: "tailwindCSS",
       name: "Tailwind CSS",
       description:
         "Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Its utilities come as helper classes that function as shorthands for the most common CSS patterns that developers use all the time.",
diff --git a/packages/create-next-stack/src/main/plugins/typescript.ts b/packages/create-next-stack/src/main/plugins/typescript.ts
@@ -7,6 +7,7 @@ export const typescriptPlugin = createPlugin({
   active: true,
   technologies: [
     {
+      id: "typescript",
       name: "TypeScript",
       description:
         "TypeScript is a programming language developed and maintained by Microsoft. It is a syntactical superset of JavaScript, adding static typing to the language. TypeScript shows useful type errors to developers during development in modern IDEs, saving time developers would have otherwise spent debugging the software at runtime.",
diff --git a/packages/create-next-stack/src/main/plugins/yarn.ts b/packages/create-next-stack/src/main/plugins/yarn.ts
@@ -9,6 +9,7 @@ export const yarnPlugin = createPlugin({
   active: ({ flags }) => Boolean(flags["package-manager"] === "yarn"),
   technologies: [
     {
+      id: "yarn",
       name: "Yarn",
       description:
         "Yarn is a JavaScript package manager compatible with the npm registry that helps developers automate the process around npm packages such as installing, updating, removing, and more.",
diff --git a/packages/create-next-stack/src/main/setup/setup.ts b/packages/create-next-stack/src/main/setup/setup.ts
@@ -31,9 +31,6 @@ import { yarnPlugin } from "../plugins/yarn"
 import { steps } from "../steps"
 import { printFinalMessages } from "./print-final-messages"
 
-// Ordered by relevance to the user for use in technology lists
-// TODO: Fix this by having separate ordered lists of plugins where other sortings are needed.
-
 export const plugins: Plugin[] = [
   createNextStackPlugin,
   nextPlugin,

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export const chakraUIPlugin = createPlugin({`
`20`	`20`	`},`
`21`	`21`	`technologies: [`
`22`	`22`	`{`
	`23`	`+ id: "chakraUI",`
`23`	`24`	`name: "Chakra UI",`
`24`	`25`	`description:`
`25`	`26`	`"Chakra UI is a simple, modular, and accessible React component library that provides all the building blocks needed to build React user interfaces. It uses Emotion under the hood and includes components ranging from basic buttons and form input fields to tooltips and modals.",`