Merge pull request #158 from akd-io/release/0.2.0

Release 0.2.0

Author: akd-io

.github/workflows/main.yml

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

.husky/pre-commit

@@ -1,4 +1,3 @@
 {
-  "semi": false,
-  "endOfLine": "lf"
+  "semi": false
 }

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "files.exclude": {}
+}

.vscode/settings.json

@@ -0,0 +1,78 @@
+# Contributing
+
+## Adding support for a new technology
+
+1. Fork the repository on GitHub
+2. Create a named feature branch (like `support_x`)
+3. Add a new .ts file for your plugin in `src/main/plugins`.
+
+   - See the [Writing a plugin section](#writing-a-plugin) below to learn how to write a Create Next Stack plugin.
+
+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`:
+   - Add the technology to the technology list
+   - Update the `Usage` section to include the new technology
+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
+
+## Writing a plugin
+
+Plugins aren't too scary. The simple Framer Motion plugin that simply adds the `framer-motion` dependency looks like this:
+
+```typescript
+export const framerMotionPlugin = createPlugin({
+  name: "Framer Motion",
+  description: "Adds support for Framer Motion",
+  active: ({ flags }) => Boolean(flags["framer-motion"]),
+  dependencies: {
+    "framer-motion": {
+      name: "framer-motion",
+      version: "^9.0.0",
+    },
+  },
+  technologies: [
+    {
+      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.",
+      links: [
+        { title: "Website", url: "https://www.framer.com/motion/" },
+        { title: "Docs", url: "https://www.framer.com/docs/" },
+        { title: "GitHub", url: "https://github.com/framer/motion" },
+      ],
+    },
+  ],
+} as const)
+```
+
+and the [Emotion plugin](src/main/plugins/emotion.ts) easily sets Next.js compiler options using
+
+```typescript
+compilerOptions: {
+  emotion: true,
+}
+```
+
+and the [Prettier plugin](src/main/plugins/prettier.ts) easily adds formatting scripts to the `package.json` file using
+
+```typescript
+scripts: [
+  {
+    name: "format",
+    description: "Formats all source code in the project.",
+    command: "prettier --write --ignore-path=.gitignore .",
+  },
+  {
+    name: "format:check",
+    description: "Checks the formatting of all code in the project.",
+    command: "prettier --check --ignore-path=.gitignore .",
+  },
+],
+```
+
+Take a look at the `Plugin` type for documentation on each available property in [`src/main/plugin.ts`](src/main/plugin.ts).
+
+Also take a look at the [other plugins](src/main/plugins) for more advanced examples.

.vscode/snipsnap.code-snippets

@@ -1,4 +1,4 @@
-<img width="100%" src="assets/banner.png" alt="Create Next Stack - The ultimate starter kit for Next.js">
+<img width="100%" src="assets/banner.png" alt="A screenshot of the Create Next Stack website">
 
 <p align="center">
   <a aria-label="NPM version" href="https://www.npmjs.com/package/create-next-stack">
@@ -13,12 +13,21 @@
   <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="Create Next Stack Website GitHub Repository" href="https://github.com/akd-io/create-next-stack-website">
+    <img alt="" src="https://img.shields.io/badge/Website-gray?style=flat-square&logo=github">
+  </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>
+  <a aria-label="Community Discord" href="https://discord.gg/7Ns5WwGjjZ">
+    <img alt="" src="https://img.shields.io/badge/Discord-gray?style=flat-square&logo=discord">
+  </a>
+  <a aria-label="Twitter profile of the creator of Create Next Stack" href="https://twitter.com/akd_io">
+    <img alt="" src="https://img.shields.io/badge/Twitter-gray?style=flat-square&logo=twitter">
+  </a>
 </p>
 
-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.
+[Create Next Stack](https://www.create-next-stack.com/) 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.
 
@@ -44,10 +53,11 @@ The table below provides an overview of the technologies currently supported by
 
 | 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)         |
+| [Next.js](https://nextjs.org/) (Mandatory)                | [Docs](https://nextjs.org/docs) - [Learn Next.js](https://nextjs.org/learn) - [GitHub repo](https://github.com/vercel/next.js)                                       |
+| [React](https://reactjs.org/) (Mandatory)                 | [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub repo](https://github.com/facebook/react)                                                             |
+| [TypeScript](https://www.typescriptlang.org/) (Mandatory) | [Docs](https://www.typescriptlang.org/docs/) - [GitHub repo](https://github.com/microsoft/TypeScript)                                                                |
+| [ESLint](https://eslint.org/) (Mandatory)                 | [Configuration](https://eslint.org/docs/user-guide/configuring/) - [Rules](https://eslint.org/docs/rules/) - [GitHub Repo](https://github.com/eslint/eslint)         |
+| [pnpm](https://pnpm.io/)                                  | [Docs](https://pnpm.io/motivation) - [GitHub repo](https://github.com/pnpm/pnpm)                                                                                     |
 | [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)                                                                  |
@@ -65,14 +75,6 @@ The table below provides an overview of the technologies currently supported by
 | [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.
-
 ## 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`
@@ -85,21 +87,25 @@ ARGUMENTS
   APPNAME  The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"
 
 OPTIONS
-  -h, --help                    Shows the CLI help information.
-  -v, --version                 Shows the CLI version information.
-  --chakra                      Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)
-  --debug                       Show verbose error messages for debugging purposes.
-  --formatting-pre-commit-hook  Adds a formatting pre-commit hook. (Requires Prettier)
-  --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|tailwind-css|css-modules|css-modules-with-sass
+  -h, --help                         Shows the CLI help information.
+  -v, --version                      Shows the CLI version information.
+  --chakra                           Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)
+  --debug                            Show verbose error messages for debugging purposes.
+  --formatting-pre-commit-hook       Adds a formatting pre-commit hook. (Requires Prettier)
+  --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=(pnpm|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|tailwind-css|css-modules|css-modules-with-sass
 ```
 
+## Contributing
+
+Contributions are welcome! Please see the [contributing guidelines](CONTRIBUTING.md) for more information.
+
 ## License
 
 Create Next Stack is released under the [MIT License](LICENSE).