Merge pull request #164 from akd-io/feature/132-support-react-icons

Add support for React Icons

Author: akd-io

.github/workflows/main.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   build:
-    name: "Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}"
+    name: "${{ matrix.os }}"
 
     strategy:
       matrix:

CONTRIBUTING.md

@@ -11,9 +11,9 @@
 4. Add new flags to the CLI in [`src/main/index.ts`](src/main/index.ts)
 5. Add the plugin to the `plugins` array in [`src/main/setup/setup.ts`](src/main/setup/setup.ts).
 6. Add potential plugin steps to the `steps` array in [`src/main/setup/setup.ts`](src/main/setup/setup.ts). Steps are run top-to-bottom.
-7. Update the `README.md`:
+7. Update the [`README.md`](README.md):
    - Add the technology to the technology list
-   - Update the `Usage` section to include the new technology
+   - Update the `Usage` section by copy pasting the output of running `yarn print:help`
 8. Consider expanding some of the e2e tests to include the new technology.
 9. Run tests using `yarn test` to ensure they all pass
 10. Submit a Pull Request on GitHub

README.md

@@ -68,6 +68,7 @@ The table below provides an overview of the technologies currently supported by
 | [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)                      |
+| [React Icons](https://react-icons.github.io/react-icons/) | [GitHub repo](https://github.com/react-icons/react-icons)                                                                                                            |
 
 ## Usage
 
@@ -93,6 +94,7 @@ OPTIONS
   --package-manager=(pnpm|yarn|npm)  Sets the preferred package manager. (Required)
   --prettier                         Adds Prettier. (Code formatting)
   --react-hook-form                  Adds React Hook Form. (Form library)
+  --react-icons                      Adds React Icons. (Icon library)
   --styling=<styling-method>         Sets the preferred styling method. (Required) <styling-method> = emotion|styled-components|tailwind-css|css-modules|css-modules-with-sass
 ```
 

package.json

@@ -51,6 +51,8 @@
     "test:small": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=pnpm --styling=css-modules",
     "test:large": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=pnpm --styling=emotion --react-hook-form --formik --prettier --formatting-pre-commit-hook --chakra --framer-motion --github-actions",
     "test:cna": "yarn build && node lib/tests/e2e/test-cna.js",
+    "print:help": "yarn build && ./bin-test/run-prod --help",
+    "print:version": "yarn build && ./bin-test/run-prod --help",
     "version": "oclif-dev readme && git add README.md",
     "format": "prettier --write --ignore-path=.prettierignore .",
     "format:check": "prettier --check --ignore-path=.prettierignore .",

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

@@ -26,7 +26,7 @@ export type CreateNextStackArgs = UnknownObject // Change to ParserOutput["args"
 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", "pnpm"] as const
+export const packageManagerOptions = ["pnpm", "yarn", "npm"] as const
 export type PackageManager = typeof packageManagerOptions[number]
 export const writablePackageManagerOptions = packageManagerOptions as Writable<
   typeof packageManagerOptions

src/main/index.ts

@@ -92,6 +92,11 @@ class CreateNextStack extends Command {
     "formatting-pre-commit-hook": flags.boolean({
       description: "Adds a formatting pre-commit hook. (Requires Prettier)",
     }),
+
+    // Icons
+    "react-icons": flags.boolean({
+      description: "Adds React Icons. (Icon library)",
+    }),
   }
 
   async run(): Promise<void> {

src/main/plugins/react-icons.ts

@@ -0,0 +1,21 @@
+import { createPlugin } from "../plugin"
+
+export const reactIconsPlugin = createPlugin({
+  name: "React Icons",
+  description: "Adds support for React Icons",
+  active: ({ flags }) => Boolean(flags["react-icons"]),
+  devDependencies: {
+    "react-icons": { name: "react-icons", version: "^4.8.0" },
+  },
+  technologies: [
+    {
+      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.",
+      links: [
+        { title: "Website", url: "https://react-icons.github.io/react-icons/" },
+        { title: "GitHub", url: "https://github.com/react-icons/react-icons" },
+      ],
+    },
+  ],
+} as const)

src/main/setup/setup.ts

@@ -5,7 +5,7 @@ import { getDiffString } from "../helpers/diff-string"
 import { inDebugMode } from "../helpers/in-debug-mode"
 import { time } from "../helpers/time"
 import { logDebug, logInfo } from "../logging"
-import { evalActive, evalShouldRun, Plugin } from "../plugin"
+import { Plugin, evalActive, evalShouldRun } from "../plugin"
 import { chakraUIPlugin } from "../plugins/chakra-ui/chakra-ui"
 import { createNextStackPlugin } from "../plugins/create-next-stack/create-next-stack"
 import { cssModulesPlugin } from "../plugins/css-modules/css-modules"
@@ -22,6 +22,7 @@ import { pnpmPlugin } from "../plugins/pnpm"
 import { prettierPlugin } from "../plugins/prettier"
 import { reactPlugin } from "../plugins/react"
 import { reactHookFormPlugin } from "../plugins/react-hook-form"
+import { reactIconsPlugin } from "../plugins/react-icons"
 import { sassPlugin } from "../plugins/sass/sass"
 import { styledComponentsPlugin } from "../plugins/styled-components"
 import { tailwindCSSPlugin } from "../plugins/tailwind-css"
@@ -52,6 +53,7 @@ export const plugins: Plugin[] = [
   yarnPlugin,
   npmPlugin,
   githubActionsPlugin,
+  reactIconsPlugin,
 ]
 
 export const filterPlugins = (inputs: ValidCNSInputs): Plugin[] =>

src/tests/e2e/tests/css-modules-with-sass/css-modules-with-sass-all-flags.ts

@@ -8,6 +8,8 @@ import { logTestInfo } from "../../test-logging"
 export const testCssModulesWithSassAllFlags = async (
   createNextStackDir: string
 ): Promise<void> => {
+  logTestInfo(`Running test: ${testCssModulesWithSassAllFlags.name}`)
+
   const { pathToProdCLI, runDirectory } = await prepareE2eTest(
     createNextStackDir
   )
@@ -21,6 +23,7 @@ export const testCssModulesWithSassAllFlags = async (
     "--formik",
     "--framer-motion",
     "--formatting-pre-commit-hook",
+    "--react-icons",
     ".",
   ]
 

src/tests/e2e/tests/css-modules-with-sass/css-modules-with-sass-only.ts

@@ -8,6 +8,8 @@ import { logTestInfo } from "../../test-logging"
 export const testCssModulesWithSassOnly = async (
   createNextStackDir: string
 ): Promise<void> => {
+  logTestInfo(`Running test: ${testCssModulesWithSassOnly.name}`)
+
   const { pathToProdCLI, runDirectory } = await prepareE2eTest(
     createNextStackDir
   )