Skip to content

Commit

Permalink
Merge pull request #226 from akd-io/release/0.2.6
Browse files Browse the repository at this point in the history 
Release 0.2.6
  • Loading branch information
@akd-io
akd-io committed May 28, 2023
2 parents 63bc3fa + a70c311 commit 663f0d5
Show file tree
Hide file tree
Showing 34 changed files with 534 additions and 88 deletions.
1 change: 1 addition & 0 deletions .husky/pre-commit
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm run update-readmes
npx lint-staged
16 changes: 8 additions & 8 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,25 +84,25 @@ Make sure you are set up locally by following the [Getting Started](#getting-sta
- `test:raw` - Runs the binary directly. Rarely used, but can be useful for manual tests where you want to be able to specify the `app_name` argument yourself.
- `clean` - Removes all generated files, including build files and the `create-next-stack-tests` directory created by the e2e tests.

3. Add a new .ts file for your plugin in the plugins directory at `packages\create-next-stack\src\main\plugins`
3. Add a new .ts file for your plugin in the plugins directory at [`packages/create-next-stack/src/main/plugins`](packages/create-next-stack/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 `create-next-stack` command in [`create-next-stack.ts`](packages\create-next-stack\src\main\commands\create-next-stack.ts).
4. Add new flags to the `create-next-stack` command in [`create-next-stack.ts`](packages/create-next-stack/src/main/commands/create-next-stack.ts).
5. Add the plugin to the `plugins` array in [`setup.ts`](packages/create-next-stack/src/main/setup/setup.ts).
6. Add potential plugin steps to the `steps` array in [`setup.ts`](packages/create-next-stack/src/main/setup/setup.ts). Steps are run top-to-bottom.
7. Update the [`README.md`](README.md):
- Add the technology to the technology list
- 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. See [`test.ts`](packages\create-next-stack\src\tests\e2e\test.ts) for current tests.
6. Add potential plugin steps to the `steps` array in [`steps.ts`](packages/create-next-stack/src/main/steps.ts). Steps are run top-to-bottom.
7. Consider expanding some of the e2e tests to include the new technology. See [`test.ts`](packages/create-next-stack/src/tests/e2e/test.ts) for current tests.
8. Go and add the technology to the technology selection form of the website.
- See the [TechnologiesForm](website/templates/LandingPage/components/TechnologiesForm.tsx) component.
- This component is currently pretty hideous, and updating it will be automated in the future. See [issue #188](https://github.com/akd-io/create-next-stack/issues/188).
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. A Create Next Stack plugin consists of a simple TypeScript file that calls a `createPlugin()` function with JSON object.

See the [Framer Motion plugin](packages/create-next-stack/src/main/plugins/emotion.ts) for example. This plugin adds the `framer-motion` npm dependency to the generated Next.js project, as well as adding some documentation about the technology.
See the [Framer Motion plugin](packages/create-next-stack/src/main/plugins/framer-motion.ts) for example. This plugin adds the `framer-motion` npm dependency to the generated Next.js project, as well as adding some documentation about the technology.

```typescript
export const framerMotionPlugin = createPlugin({
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"test": "pnpm prr test",
"test:cli": "pnpm prr --filter create-next-stack test",
"test:web": "pnpm prr --filter create-next-stack-website test",
"update-readmes": "pnpm prr update-readme",
"prr": "pnpm recursive run"
},
"devDependencies": {
Expand Down
89 changes: 57 additions & 32 deletions packages/create-next-stack/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,60 +31,85 @@ To get started, go to [create-next-stack.com](https://www.create-next-stack.com)

The table below provides an overview of the technologies currently supported by Create Next Stack.

| Name | Links |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [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) |
| [Styled Components](https://styled-components.com/) | [Docs](https://styled-components.com/docs) - [GitHub repo](https://github.com/styled-components/styled-components) |
| [Tailwind CSS](https://tailwindcss.com/) | [Docs](https://tailwindcss.com/docs) - [GitHub repo](https://github.com/tailwindlabs/tailwindcss) |
| [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) |
| [React Icons](https://react-icons.github.io/react-icons/) | [GitHub repo](https://github.com/react-icons/react-icons) |
<!-- CNS-START-OF-TECHNOLOGIES-TABLE -->

| Name | Links |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Next.js | [Website](https://nextjs.org/) - [Docs](https://nextjs.org/docs) - [Learn Next.js](https://nextjs.org/learn) - [GitHub](https://github.com/vercel/next.js) - [Wikipedia](https://en.wikipedia.org/wiki/Next.js) |
| React | [Website](https://reactjs.org/) - [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub](https://github.com/facebook/react) - [Wikipedia](<https://en.wikipedia.org/wiki/React_(JavaScript_library)>) |
| TypeScript | [Website](https://www.typescriptlang.org/) - [Docs](https://www.typescriptlang.org/docs/) - [GitHub](https://github.com/microsoft/TypeScript) - [Wikipedia](https://en.wikipedia.org/wiki/TypeScript) |
| Emotion | [Website](https://emotion.sh/) - [Docs](https://emotion.sh/docs/introduction) - [GitHub](https://github.com/emotion-js/emotion) |
| Styled Components | [Website](https://styled-components.com/) - [Docs](https://styled-components.com/docs) - [GitHub](https://github.com/styled-components/styled-components) |
| Tailwind CSS | [Website](https://tailwindcss.com/) - [Docs](https://tailwindcss.com/docs) - [GitHub](https://github.com/tailwindlabs/tailwindcss) |
| Sass | [Website](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) |
| CSS Modules | [Website](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) |
| CSS Modules | [Website](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) |
| Mantine | [Website](https://mantine.dev/) - [Docs](https://mantine.dev/pages/getting-started/) - [GitHub](https://github.com/mantinedev/mantine) |
| Chakra UI | [Website](https://chakra-ui.com/) - [Docs](https://chakra-ui.com/docs/getting-started) - [GitHub](https://github.com/chakra-ui/chakra-ui) |
| Material UI | [Website](https://material-ui.com/) - [Docs](https://material-ui.com/getting-started/installation/) - [GitHub](https://github.com/mui-org/material-ui) |
| Framer Motion | [Website](https://www.framer.com/motion/) - [Docs](https://www.framer.com/docs/) - [GitHub](https://github.com/framer/motion) |
| React Hook Form | [Website](https://react-hook-form.com/) - [Docs](https://react-hook-form.com/get-started) - [GitHub](https://github.com/react-hook-form/react-hook-form) |
| Formik | [Website](https://formik.org/) - [Docs](https://formik.org/docs/overview) - [GitHub](https://github.com/formium/formik) |
| React Query | [Website](https://tanstack.com/query/latest) - [Docs](https://tanstack.com/query/latest/docs/react/overview) - [GitHub](https://github.com/tanstack/query) |
| React Icons | [Website](https://react-icons.github.io/react-icons/) - [GitHub](https://github.com/react-icons/react-icons) |
| ESLint | [Website](https://eslint.org/) - [Configuration](https://eslint.org/docs/user-guide/configuring/) - [Rules](https://eslint.org/docs/rules/) - [GitHub](https://github.com/eslint/eslint) |
| Prettier | [Website](https://prettier.io/) - [Docs](https://prettier.io/docs/en/index.html) - [Options](https://prettier.io/docs/en/options.html) - [GitHub](https://github.com/prettier/prettier) |
| Husky | [Website](https://typicode.github.io/husky/) - [Docs](https://typicode.github.io/husky/) - [GitHub](https://github.com/typicode/husky) |
| lint-staged | [Website](https://github.com/okonet/lint-staged) - [GitHub](https://github.com/okonet/lint-staged) |
| pnpm | [Website](https://pnpm.io/) - [Docs](https://pnpm.io/motivation) - [GitHub](https://github.com/pnpm/pnpm) |
| Yarn | [Website](https://yarnpkg.com/) - [CLI Docs](https://yarnpkg.com/cli) - [GitHub](https://github.com/yarnpkg/berry) |
| npm | [Website](https://www.npmjs.com/) - [CLI Docs](https://docs.npmjs.com/cli/) |
| GitHub Actions | [Website](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) |

<!-- CNS-END-OF-TECHNOLOGIES-TABLE -->

## 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`

<!-- CNS-START-OF-HELP-OUTPUT -->

```
USAGE
$ create-next-stack [APP_NAME] [FLAGS]
ARGUMENTS
APP_NAME The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"
APP_NAME The name of your app, optionally including a path prefix. Eg.:
"my-app" or "path/to/my-app"
FLAGS
-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)
--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=<option> Sets the preferred package manager. (Required)
--github-actions Adds a GitHub Actions continuous integration
workflow.
--mantine Adds Mantine. (Component library) (Requires
Emotion)
--material-ui Adds Material UI. (Component library) (Requires
Emotion)
--package-manager=<option> (required) Sets the preferred package manager.
(Required)
<options: pnpm|yarn|npm>
--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
--react-query Adds React Query. (Server state management
library)
--styling=<styling-method> (required) Sets the preferred styling method.
(Required) <styling-method> =
emotion|styled-components|tailwind-css|css-modul
es|css-modules-with-sass
```

<!-- CNS-END-OF-HELP-OUTPUT -->

## Contributing

Contributions are welcome! Please see the [contributing guidelines](CONTRIBUTING.md) for more information.
Expand Down
7 changes: 4 additions & 3 deletions packages/create-next-stack/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "create-next-stack",
"description": "Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.",
"version": "0.2.5",
"version": "0.2.6",
"author": "Anders Kjær Damgaard @akd-io",
"bugs": "https://github.com/akd-io/create-next-stack/issues",
"homepage": "https://github.com/akd-io/create-next-stack",
Expand Down Expand Up @@ -62,8 +62,9 @@
"test:cna": "pnpm build && ts-node src/tests/e2e/test-live-cna.ts",
"test:cns": "pnpm build && ts-node src/tests/e2e/test-live-cns.ts",
"test:raw": "pnpm build && ./bin/dev",
"print:help": "pnpm build && ./bin/dev --help",
"print:version": "pnpm build && ./bin/dev --version",
"print:help": "./bin/dev --help",
"print:version": "./bin/dev --version",
"update-readme": "ts-node ./src/scripts/update-readme.ts",
"lint": "eslint --ext=.ts --config=.eslintrc --ignore-path=../../.prettierignore ."
},
"dependencies": {
Expand Down
Loading

1 comment on commit 663f0d5

@vercel
Copy link

@vercel vercel bot commented on 663f0d5 May 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

create-next-stack – ./

create-next-stack-akd-io.vercel.app
create-next-stack-seven.vercel.app
create-next-stack.com
www.create-next-stack.com
create-next-stack-git-main-akd-io.vercel.app

Please sign in to comment.