├── .babelrc
├── .eslintignore
├── .eslintrc
├── .github
├── dependabot.yml
└── workflows
│ ├── automerge.yml
│ ├── documentation-publish.yml
│ ├── push.yml
│ └── release.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── @types
├── index.d.ts
└── sao.d.ts
├── README.MD
├── documentation
├── .gitignore
├── README.md
├── babel.config.js
├── docs
│ ├── development
│ │ ├── creating-a-plugin.md
│ │ ├── how-it-works.md
│ │ └── references.md
│ ├── mdx.md
│ ├── nextjs
│ │ ├── antd.md
│ │ ├── apollo-graphql.md
│ │ ├── axios.md
│ │ ├── bootstrap.md
│ │ ├── bundle-analyzer.md
│ │ ├── chakra-ui.md
│ │ ├── ci
│ │ │ ├── azure-pipelines.md
│ │ │ ├── github-actions.md
│ │ │ └── travis.md
│ │ ├── css.md
│ │ ├── docker.md
│ │ ├── e2e-testing
│ │ │ ├── cypress.md
│ │ │ └── wdio.md
│ │ ├── env.md
│ │ ├── fetch.md
│ │ ├── graphql-request.md
│ │ ├── hooks
│ │ │ ├── react-query.md
│ │ │ ├── react-use.md
│ │ │ └── swr.md
│ │ ├── i18n
│ │ │ ├── next-i18next.md
│ │ │ └── next-translate.md
│ │ ├── linter
│ │ │ ├── eslint.md
│ │ │ ├── lint-staged.md
│ │ │ └── prettier.md
│ │ ├── reverse-proxy.md
│ │ ├── scss.md
│ │ ├── state-management
│ │ │ ├── mobx.md
│ │ │ ├── recoil.md
│ │ │ ├── redux-toolkit.md
│ │ │ └── zustand.md
│ │ ├── storybook.md
│ │ ├── styled-components.md
│ │ ├── svgr.md
│ │ ├── tailwind.md
│ │ └── testing
│ │ │ ├── enzyme.md
│ │ │ ├── jest.md
│ │ │ └── testing-library.md
│ ├── quick-start.md
│ ├── react
│ │ ├── antd.md
│ │ ├── apollo-graphql.md
│ │ ├── axios.md
│ │ ├── bootstrap.md
│ │ ├── bundle-analyzer.md
│ │ ├── chakra-ui.md
│ │ ├── ci
│ │ │ ├── github-actions.md
│ │ │ └── travis.md
│ │ ├── css.md
│ │ ├── docker.md
│ │ ├── e2e-testing
│ │ │ ├── cypress.md
│ │ │ └── wdio.md
│ │ ├── env.md
│ │ ├── fetch.md
│ │ ├── graphql-request.md
│ │ ├── hooks
│ │ │ ├── react-query.md
│ │ │ ├── react-use.md
│ │ │ └── swr.md
│ │ ├── i18n
│ │ │ └── react-i18next.md
│ │ ├── linter
│ │ │ ├── eslint.md
│ │ │ └── lint-staged.md
│ │ ├── reverse-proxy.md
│ │ ├── scss.md
│ │ ├── state-management
│ │ │ ├── mobx.md
│ │ │ ├── recoil.md
│ │ │ ├── redux-toolkit.md
│ │ │ └── zustand.md
│ │ ├── storybook.md
│ │ ├── styled-components.md
│ │ ├── svgr.md
│ │ ├── tailwind.md
│ │ └── testing
│ │ │ ├── jest.md
│ │ │ └── testing-library.md
│ └── refine.md
├── docusaurus.config.js
├── package-lock.json
├── package.json
├── sidebars.js
├── src
│ ├── css
│ │ └── custom.css
│ ├── features.js
│ └── pages
│ │ ├── index.js
│ │ └── styles.module.css
├── static
│ ├── .nojekyll
│ └── img
│ │ ├── antd.svg
│ │ ├── apollo.svg
│ │ ├── bootstrap.svg
│ │ ├── chakra-ui.svg
│ │ ├── cli.gif
│ │ ├── code.png
│ │ ├── css.svg
│ │ ├── cypress.svg
│ │ ├── docker.svg
│ │ ├── enzyme.png
│ │ ├── eslint.svg
│ │ ├── footer_icon.png
│ │ ├── github-actions.svg
│ │ ├── graphql.svg
│ │ ├── i18next.svg
│ │ ├── jest.svg
│ │ ├── logo.svg
│ │ ├── mobx-state-tree.svg
│ │ ├── mobx.svg
│ │ ├── mui.png
│ │ ├── next-translate.svg
│ │ ├── pankod_footer_logo.png
│ │ ├── prettier.svg
│ │ ├── react-bootstrap.svg
│ │ ├── react-query.svg
│ │ ├── recoil.png
│ │ ├── redux.svg
│ │ ├── reverbnation.svg
│ │ ├── sass.svg
│ │ ├── storybook.svg
│ │ ├── styled-components.png
│ │ ├── styled-system.svg
│ │ ├── superplate-logo.svg
│ │ ├── svgr.png
│ │ ├── swr.svg
│ │ ├── tailwind.svg
│ │ ├── terminal.gif
│ │ ├── testing-libraries.svg
│ │ ├── travis.svg
│ │ ├── webdriverio.svg
│ │ └── zustand.png
└── yarn.lock
├── images
├── available.png
├── banner.png
├── cli.gif
├── integrations.png
├── next-logo.png
├── plugins.png
└── react-logo.png
├── jest.config.ts
├── package-lock.json
├── package.json
├── src
├── Helper
│ ├── binary
│ │ ├── index.spec.ts
│ │ └── index.ts
│ ├── download
│ │ └── index.ts
│ ├── fs
│ │ ├── index.spec.ts
│ │ └── index.ts
│ ├── getRandomName
│ │ └── index.ts
│ ├── git
│ │ ├── index.spec.ts
│ │ └── index.ts
│ ├── humanize
│ │ └── index.ts
│ ├── index.ts
│ ├── lucky
│ │ └── index.ts
│ ├── merge
│ │ ├── index.spec.ts
│ │ └── index.ts
│ ├── npm
│ │ └── index.ts
│ ├── plugin
│ │ └── index.ts
│ ├── preset
│ │ └── index.ts
│ ├── prettier
│ │ └── index.ts
│ ├── source
│ │ ├── index.d.ts
│ │ ├── index.spec.ts
│ │ └── index.ts
│ ├── tips
│ │ └── index.ts
│ └── url
│ │ ├── index.spec.ts
│ │ └── index.ts
├── api.ts
├── cli.ts
├── index.ts
└── saofile.ts
└── tsconfig.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env", { "targets": { "node": "current" } }],
4 | "@babel/preset-typescript"
5 | ],
6 | "plugins": [
7 | [
8 | "module-resolver",
9 | {
10 | "root": ["./"],
11 | "alias": {
12 | "@Helper": "./src/Helper"
13 | }
14 | }
15 | ]
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | templates/*
4 | documentation
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "@typescript-eslint/parser",
4 | "plugins": [
5 | "@typescript-eslint"
6 | ],
7 | "extends": [
8 | "eslint:recommended",
9 | "plugin:@typescript-eslint/eslint-recommended",
10 | "plugin:@typescript-eslint/recommended",
11 | "prettier/@typescript-eslint",
12 | "plugin:prettier/recommended"
13 | ],
14 | "rules": {
15 | "@typescript-eslint/ban-types": "off"
16 | }
17 | }
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: "npm"
4 | directory: "/"
5 | schedule:
6 | interval: "weekly"
7 |
--------------------------------------------------------------------------------
/.github/workflows/automerge.yml:
--------------------------------------------------------------------------------
1 | name: Check PR can be merged
2 | on: [pull_request, pull_request_review, issue_comment]
3 | jobs:
4 | automerge:
5 | runs-on: ubuntu-latest
6 | steps:
7 | - name: Run PR Helper
8 | id: runprhelper
9 | uses: Matticusau/pr-helper@v1.2.3
10 | with:
11 | repo-token: ${{ secrets.GITHUB_TOKEN }}
12 | enable-prmerge-automation: true
13 | enable-prcomment-automation: true
14 | enable-prlabel-automation: true
15 | prmerge-requireallchecks: true
16 | prmerge-requirereviewcount: 2
17 | prmerge-method: 'squash'
18 | prlabel-default: 'pr-onhold'
19 | prlabel-ready: 'pr-ready'
20 | prlabel-onhold: 'pr-onhold'
21 | prlabel-reviewrequired: 'review-required'
22 | prlabel-automerge: 'auto-merge'
--------------------------------------------------------------------------------
/.github/workflows/documentation-publish.yml:
--------------------------------------------------------------------------------
1 | name: Documentation Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | paths:
8 | - 'documentation/**'
9 | - '.github/**'
10 | pull_request:
11 | branches:
12 | - master
13 | jobs:
14 | checks:
15 | if: github.event_name != 'push'
16 | runs-on: ubuntu-latest
17 | steps:
18 | - uses: actions/checkout@v1
19 | - uses: actions/setup-node@v1
20 | with:
21 | node-version: '12.x'
22 | - name: Test Build
23 | run: |
24 | cd documentation
25 | npm ci
26 | npm run build
27 | gh-release:
28 | if: github.event_name != 'pull_request'
29 | runs-on: ubuntu-latest
30 | steps:
31 | - uses: actions/checkout@v1
32 | - uses: actions/setup-node@v1
33 | with:
34 | node-version: '12.x'
35 | - name: Add key to allow access to repository
36 | env:
37 | SSH_AUTH_SOCK: /tmp/ssh_agent.sock
38 | run: |
39 | mkdir -p ~/.ssh
40 | ssh-keyscan github.com >> ~/.ssh/known_hosts
41 | echo "${{ secrets.GH_PAGES_DEPLOY }}" > ~/.ssh/id_rsa
42 | chmod 600 ~/.ssh/id_rsa
43 | cat <<EOT >> ~/.ssh/config
44 | Host github.com
45 | HostName github.com
46 | IdentityFile ~/.ssh/id_rsa
47 | EOT
48 | - name: Release to GitHub Pages
49 | env:
50 | USE_SSH: true
51 | GIT_USER: pankod-bot
52 | run: |
53 | cd documentation
54 | git config --global user.email "bot@pankod.com"
55 | git config --global user.name "pankod-bot"
56 | npm ci
57 | npm run deploy
58 |
--------------------------------------------------------------------------------
/.github/workflows/push.yml:
--------------------------------------------------------------------------------
1 | name: Push
2 |
3 | on: push
4 |
5 | jobs:
6 | build:
7 | runs-on: ubuntu-latest
8 |
9 | strategy:
10 | matrix:
11 | node-version: [12.x, 14.x, 16.x, 18.x]
12 |
13 | steps:
14 | - uses: actions/checkout@v4
15 | - name: Use Node.js ${{ matrix.node-version }}
16 | uses: actions/setup-node@v3
17 | with:
18 | node-version: ${{ matrix.node-version }}
19 | - name: npm install, build, and test
20 | run: |
21 | npm install
22 | npm run lint
23 | npm test
24 | npm run build:cli
25 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: npm Publish [released]
2 |
3 | on:
4 | release:
5 | types: [released]
6 |
7 | jobs:
8 | publish-npm:
9 | runs-on: ubuntu-latest
10 |
11 | strategy:
12 | matrix:
13 | node-version: [12.x]
14 |
15 | steps:
16 | - uses: actions/checkout@v2
17 | - name: Use Node.js ${{ matrix.node-version }}
18 | uses: actions/setup-node@v1
19 | with:
20 | node-version: ${{ matrix.node-version }}
21 | registry-url: https://registry.npmjs.org/
22 | - run: |
23 | npm install
24 | npm test
25 | npm run build:cli
26 | npm pack
27 | npm publish --access public
28 | env:
29 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
30 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | lib/
3 | .DS_*
4 | **/node_modules
5 | tmp
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | documentation
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "trailingComma": "all",
4 | "singleQuote": false,
5 | "printWidth": 80,
6 | "tabWidth": 4,
7 | "organizeImportsSkipDestructiveCodeActions": true,
8 | "overrides": [
9 | { "files": ["*.yml", "*.yaml"], "options": { "tabWidth": 2 } }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/@types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module "parse-github-url";
2 |
--------------------------------------------------------------------------------
/documentation/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 |
4 | # Production
5 | /build
6 |
7 | # Generated files
8 | .docusaurus
9 | .cache-loader
10 |
11 | # Misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 |
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*
21 |
--------------------------------------------------------------------------------
/documentation/README.md:
--------------------------------------------------------------------------------
1 | # Website
2 |
3 | This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
4 |
5 | ## Installation
6 |
7 | ```console
8 | yarn install
9 | ```
10 |
11 | ## Local Development
12 |
13 | ```console
14 | yarn start
15 | ```
16 |
17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
18 |
19 | ## Build
20 |
21 | ```console
22 | yarn build
23 | ```
24 |
25 | This command generates static content into the `build` directory and can be served using any static contents hosting service.
26 |
27 | ## Deployment
28 |
29 | ```console
30 | GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
31 | ```
32 |
33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
34 |
35 |
--------------------------------------------------------------------------------
/documentation/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3 | };
4 |
--------------------------------------------------------------------------------
/documentation/docs/development/how-it-works.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: how-it-works
3 | title: How it Works?
4 | sidebar_label: How it Works?
5 | ---
6 |
7 | **superplate** is designed to save you hours of development time when starting a new project. Superplate is offering various plugins/tools you can choose from but It's super-easy for you to modify those plugins or create your own ones. Once you are done, you can share your plugins and set **superplate** up to use your custom plugins.
8 |
9 | ## Creating a Source Repository
10 |
11 | We store our plugins apart from the cli to make them easy to modify and easy to create new plugins. You can see the [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).
12 |
13 | - Alternatively, you can create your own source from scratch.
14 |
15 | If you choose to start from scratch. All you need to do is create a directory with below structure and create a simple `prompt.js` file inside it.
16 |
17 | ```bash
18 |
19 | ├── prompt.js
20 | ├── plugins
21 | │ ├── your-first-plugin
22 | │ ├── another-plugin
23 | │ ├── ...
24 | ├── template
25 | │ ├── your-template-files
26 | │ ├── ...
27 | ```
28 |
29 | **sample `prompt.js`**
30 |
31 | ```js
32 | {
33 | prompts: [],
34 | ignores: [],
35 | }
36 | ```
37 |
38 | There are many built-in prompt types and options you can use. In `prompt.js` you can also define conditional ignore patterns for superplate to use. To learn more about `prompt.js` please check out [References#prompt.js](references#promptjs)
39 |
40 | Superplate offers plugins many ways to interact with each other. To learn how to create a plugin and the ways to interact with others, please read [Creating a Plugin](creating-a-plugin)
41 |
42 |
43 | ## Using a Custom Source
44 |
45 | You can use sources from a remote git repository by providing a url or you can use a local repository with providing an absolute or relative path.
46 |
47 | :::tip
48 |
49 | You can either use `--source <source-path>` or `-S <source-path>` options to pass your source to **superplate**
50 |
51 | :::
52 |
53 | ### Remote Sources
54 |
55 | ```bash
56 |
57 | npx superplate-cli --source https://github.com/path-to-source.git my-project
58 |
59 | ```
60 |
61 | ### Local Sources
62 |
63 |
64 | ```bash
65 |
66 | npx superplate-cli --source ~/my-local-source my-project
67 |
68 | ```
69 |
--------------------------------------------------------------------------------
/documentation/docs/mdx.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: mdx
3 | title: Powered by MDX
4 | ---
5 |
6 | You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
7 |
8 | export const Highlight = ({children, color}) => ( <span style={{
9 | backgroundColor: color,
10 | borderRadius: '2px',
11 | color: '#fff',
12 | padding: '0.2rem',
13 | }}>{children}</span> );
14 |
15 | <Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
16 |
17 | I can write **Markdown** alongside my _JSX_!
18 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/antd.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: antd
3 | title: Ant Design
4 | sidebar_label: Ant Design
5 | description: Setting up Ant design for Typescript Next.js apps
6 | ---
7 |
8 | A design system for enterprise-level products. Create an efficient and enjoyable work experience.
9 |
10 | Ant Design provides a React UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
11 | [Go to docs →](https://ant.design/docs/react/introduce)
12 |
13 | ### Less Support
14 | `antd` uses `less` as its preprocessor.
15 |
16 | :::caution
17 |
18 | Due to its incompatibility with `storybook`, `less` is not included in superplate.
19 |
20 | :::
21 |
22 | To use `less` with `antd` in your project
23 | - Add its dependencies,
24 |
25 | ```js title="package.json"
26 | {
27 | "dependencies": {
28 | "less": "^4.1.0",
29 | "@zeit/next-less": "^1.0.1"
30 | }
31 | }
32 | ```
33 |
34 | - Configure in `next.config.js`
35 |
36 | ```js title="next.config.js"
37 | const withPlugins = require('next-compose-plugins');
38 | const withLess = require('@zeit/next-less');
39 |
40 | module.exports = withPlugins([
41 | [withLess, {
42 | lessLoaderOptions: {
43 | javascriptEnabled: true,
44 | }
45 | }]
46 | ]);
47 | ```
48 |
49 | :::caution
50 |
51 | When you add any of the css related plugins, including less/sass, it disables built-in support for CSS loading in Next.js
52 |
53 | :::
--------------------------------------------------------------------------------
/documentation/docs/nextjs/axios.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: axios
3 | title: Axios
4 | sidebar_label: Axios
5 | description: How to use axios in Next.js?
6 | ---
7 |
8 | Promise based HTTP client for the browser and node.js
9 |
10 | - Make XMLHttpRequests from the browser
11 | - Make http requests from node.js
12 | - Supports the Promise API
13 | - Intercept request and response
14 | - Transform request and response data
15 | - Cancel requests
16 | - Automatic transforms for JSON data
17 | - Client side support for protecting against XSRF
18 |
19 | [Refer to official documentation for detailed usage. →](https://github.com/axios/axios)
20 |
21 | Performing a `GET` (or `POST`) request is as simple as calling the method on `axios`
22 |
23 | ```js
24 | import axios from "axios";
25 |
26 | axios.get('/user?ID=12345')
27 | .then(function (response) {
28 | // handle success
29 | console.log(response);
30 | })
31 | .catch(function (error) {
32 | // handle error
33 | console.log(error);
34 | })
35 | .then(function () {
36 | // always executed
37 | });
38 | ```
39 | [More on GET example→](https://github.com/axios/axios#note-commonjs-usage)
40 |
41 | Requests can be made by passing the relevant config to axios.
42 |
43 | ```js
44 | axios({
45 | method: 'post',
46 | url: '/user/12345',
47 | data: {
48 | firstName: 'Fred',
49 | lastName: 'Flintstone'
50 | }
51 | });
52 | ```
53 | [More on POST example→](https://github.com/axios/axios#axios-api)
54 |
55 | ### Concurrency
56 | Please use `Promise.all` to handle concurrency
57 |
58 | ```js
59 | function getUserAccount() {
60 | return axios.get('/user/12345');
61 | }
62 |
63 | function getUserPermissions() {
64 | return axios.get('/user/12345/permissions');
65 | }
66 |
67 | Promise.all([getUserAccount(), getUserPermissions()])
68 | .then(function (results) {
69 | const acct = results[0];
70 | const perm = results[1];
71 | });
72 | ```
73 |
74 | :::caution
75 | Helper functions below for dealing with concurrent requests are deprecated
76 | ```js
77 | axios.all(iterable)
78 | axios.spread(callback)
79 | ```
80 | :::
81 |
82 | ### Creating an instance
83 | You can create a new instance of axios with a custom config.
84 |
85 | ```js
86 | import React, { useState, useEffect } from "react";
87 | import axios from "axios";
88 |
89 | const BASE_API_URL = "https://official-joke-api.appspot.com/";
90 | const API_URL = "/jokes/programming/random";
91 |
92 | const jokesApi = axios.create({
93 | baseURL: BASE_API_URL,
94 | });
95 |
96 | export const AxiosExample = () => {
97 | const [error, setError] = useState(null);
98 | const [isLoaded, setIsLoaded] = useState(false);
99 | const [data, setData] = useState([]);
100 |
101 | useEffect(() => {
102 | jokesApi({
103 | method: "get",
104 | url: API_URL,
105 | })
106 | .then(res => res.data)
107 | .then(res => {
108 | setData(res);
109 | setIsLoaded(true);
110 | },
111 | // Note: it's important to handle errors here
112 | // instead of a catch() block so that we don't swallow
113 | // exceptions from actual bugs in components.
114 | err => {
115 | setIsLoaded(true);
116 | setError(err);
117 | },
118 | );
119 | }, []);
120 | };
121 | ```
122 | [More on instance methods→](https://github.com/axios/axios#creating-an-instance)
123 |
124 |
125 | :::tip
126 |
127 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose axios as feature plugin during the project creation phase.
128 |
129 | :::
130 |
131 | :::tip
132 | Consider using `react-query` or `swr` plugins to handle client-side requests.
133 | They can be used with promise-based methods (fetch, axios..)
134 | :::
135 |
136 | ## Adding axios to your project later
137 |
138 | If you want to add axios to your existing project first install the dependencies
139 |
140 |
141 | import Tabs from '@theme/Tabs';
142 | import TabItem from '@theme/TabItem';
143 |
144 | <Tabs
145 | defaultValue="npm"
146 | values={[
147 | {label: 'npm', value: 'npm'},
148 | {label: 'yarn', value: 'yarn'},
149 | ]}>
150 | <TabItem value="npm">
151 |
152 | ```
153 | npm install axios
154 | ```
155 | </TabItem>
156 |
157 | <TabItem value="yarn">
158 |
159 | ```
160 | yarn add axios
161 | ```
162 | </TabItem>
163 | </Tabs>
164 |
165 |
166 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/bootstrap.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: bootstrap
3 | title: Bootstrap
4 | sidebar_label: Bootstrap
5 | description: How to use Bootstrap with Next.js?
6 | ---
7 |
8 | Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
9 |
10 | ### React Bootstrap
11 |
12 | **superplate** uses `react-bootstrap` component library for bootstrap plugin. React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.
13 | [Refer to official documentation for detailed usage. →](https://react-bootstrap.github.io/getting-started/introduction)
14 |
15 | - Some stylesheet is required to use React Bootstrap components.
16 |
17 | ```tsx title="pages/_app.tsx"
18 | import "bootstrap/dist/css/bootstrap.min.css";
19 | ```
20 |
21 | ### Using Components
22 |
23 | - Import from `react-bootstrap`
24 |
25 | ```js
26 | import { Button } from 'react-bootstrap';
27 | ```
28 |
29 | - Or import individual components
30 |
31 | ```js
32 | import Button from 'react-bootstrap/Button';
33 | ```
34 |
35 | - Customize components with props
36 |
37 | ```tsx title="src/components/main/index.tsx"
38 | <Button
39 | href="https://pankod.github.io/superplate/"
40 | target="_blank"
41 | variant="primary"
42 | size="lg">
43 | Docs
44 | </Button>
45 | ```
46 |
47 | - Bootstrap utility classes can also be used with components
48 | ```tsx title="src/components/cards/index.tsx"
49 | <Container className="my-5 flex-grow-1">
50 | ...
51 | </Container>
52 | ```
53 |
54 | ### Using Sass with Bootstrap
55 | :::tip
56 |
57 | If you also add `sass/scss` under CSS Preprocessors during creation phase, you can easily [customize Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass). Bootstrap’s source ***sass*** files are added under `src/styles` directory.
58 | [See Sass/SCSS doc →](scss.md)
59 |
60 | :::
61 |
62 | If `sass/scss` plugin is not selected, Sass can be added later to customize Bootstrap,
63 |
64 | - Add a custom scss file `app.scss` under `src/styles`
65 |
66 | ```js title="src/styles/app.scss"
67 | @import "./_variables";
68 | @import "./_bootstrap";
69 | ```
70 |
71 | - Add scss files for overriding variables and Bootstrap source Sass file imports
72 |
73 | ```js title="src/styles/_variables.scss"
74 | // Override Default Variables
75 | // https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults
76 |
77 | $primary: #6610f2;
78 | $secondary: #fd7e14;
79 | ```
80 |
81 | ```js title="src/styles/_bootstrap.scss"
82 | // Option A: Include all of Bootstrap
83 |
84 | // @import "~bootstrap/scss/bootstrap";
85 |
86 | // Add custom code after this
87 |
88 | // Option B: Include parts of Bootstrap
89 |
90 | // Required
91 | @import "~bootstrap/scss/functions";
92 | @import "~bootstrap/scss/variables";
93 | @import "~bootstrap/scss/mixins";
94 |
95 | // Include custom variable default overrides here
96 |
97 | // Optional
98 | @import "~bootstrap/scss/reboot";
99 | @import "~bootstrap/scss/type";
100 | @import "~bootstrap/scss/images";
101 | @import "~bootstrap/scss/code";
102 | @import "~bootstrap/scss/grid";
103 | ```
104 |
105 | - import in `_app.tsx`
106 |
107 | ```diff title="pages/_app.tsx"
108 | - import "bootstrap/dist/css/bootstrap.min.css";
109 | + import "src/styles/app.scss";
110 | ```
111 |
112 | - install sass
113 | ```js
114 | npm install sass
115 | ```
116 |
117 | ### Adding Bootstrap to your project later
118 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
119 |
120 | - Install `react-bootstrap` and `bootstrap` packages
121 |
122 | import Tabs from '@theme/Tabs';
123 | import TabItem from '@theme/TabItem';
124 |
125 | <Tabs
126 | defaultValue="npm"
127 | values={[
128 | {label: 'npm', value: 'npm'},
129 | {label: 'yarn', value: 'yarn'},
130 | ]}>
131 | <TabItem value="npm">
132 |
133 | ```bash
134 | npm install react-bootstrap bootstrap
135 | ```
136 | </TabItem>
137 | <TabItem value="yarn">
138 |
139 | ```bash
140 | yarn add react-bootstrap bootstrap
141 | ```
142 | </TabItem>
143 | </Tabs>
144 |
145 | - [Follow instructions in React Bootstrap](#react-bootstrap)
146 |
147 | [Refer to official documentation on installation for detailed usage. →](https://react-bootstrap.github.io/getting-started/introduction#installation)
148 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/bundle-analyzer.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: bundle-analyzer
3 | title: Bundle Analyzer
4 | sidebar_label: Bundle Analyzer
5 | description: How to use Bundle Analyzer in Next.js?
6 | ---
7 |
8 | Bundle Analyzer visualizes size of output files with an interactive treemap. This helps you understand what’s taking the most space in the bundles.
9 |
10 | superplate serves optional plugin which adds [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) to the created project.
11 |
12 | Run the command below:
13 |
14 | ```
15 | npm run build:analyze
16 | ```
17 |
18 | This should open 2 pages in the browser. One for client bundles, and one for the server bundles.
19 |
20 | ### Adding Bundler Analyzer to your project later
21 | :::tip
22 |
23 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Bundle Analyzer plugin during the project creation phase.
24 |
25 | :::
26 |
27 |
28 | If you didn't choose the Bundle Analyzer plugin during project creation phase, you can follow the instructions below to add it.
29 |
30 | import Tabs from '@theme/Tabs';
31 | import TabItem from '@theme/TabItem';
32 |
33 | <Tabs
34 | defaultValue="npm"
35 | values={[
36 | {label: 'npm', value: 'npm'},
37 | {label: 'yarn', value: 'yarn'},
38 | ]}>
39 | <TabItem value="npm">
40 |
41 | ```
42 | npm install @next/bundle-analyzer
43 | ```
44 | </TabItem>
45 |
46 | <TabItem value="yarn">
47 |
48 | ```
49 | yarn add @next/bundle-analyzer
50 | ```
51 | </TabItem>
52 | </Tabs>
53 |
54 | Then add followings to config file
55 |
56 | ```ts title="next.config.js"
57 | const withPlugins = require('next-compose-plugins');
58 |
59 | const withBundleAnalyzer = require('@next/bundle-analyzer')({
60 | enabled: process.env.ANALYZE === 'true',
61 | })
62 |
63 | module.exports = withPlugins([[withBundleAnalyzer]]);
64 | ```
65 |
66 | [Refer to official documentation for detailed usage →](https://www.npmjs.com/package/@next/bundle-analyzer)
67 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/ci/travis.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: travis
3 | title: Travis CI
4 | sidebar_label: Travis CI
5 | description: Deploy Next.js Apps using Travis CI
6 | ---
7 |
8 |
9 | As a continuous integration platform, Travis CI supports your development process by automatically building and testing code changes, providing immediate feedback on the success of the change.
10 | [Refer to official documentation for detailed usage. →](https://docs.travis-ci.com)
11 |
12 | The following YAML workflow file created into the `./travis.yml` as a default by superplate, if Travis CI selected as a CI plugin.
13 |
14 | ```bash title="travis.yml"
15 | language: node_js
16 | node_js:
17 | - "14"
18 | install:
19 | - npm ci
20 | - npm run lint
21 | - npm run test
22 | ```
23 | :::tip
24 | The following commands are added to `travis.yml` by superplate if any of plugins listed below is selected during project creation phase.
25 | :::
26 |
27 | :::note
28 | You can use the following commands in case of adding Travis CI to existing project later.
29 | :::
30 |
31 |
32 | import Tabs from '@theme/Tabs';
33 | import TabItem from '@theme/TabItem';
34 |
35 |
36 | ### Package manager
37 | ---
38 |
39 | <Tabs
40 | defaultValue="npm"
41 | values={[
42 | {label: 'npm', value: 'npm'},
43 | {label: 'yarn', value: 'yarn'},
44 | ]}>
45 | <TabItem value="npm">
46 |
47 | ```
48 | - npm ci
49 | ```
50 | </TabItem>
51 | <TabItem value="yarn">
52 |
53 | ```
54 | - yarn
55 | ```
56 | </TabItem>
57 | </Tabs>
58 |
59 | <br/>
60 |
61 |
62 | ### Install dependencies
63 | ---
64 |
65 | <Tabs
66 | defaultValue="npm"
67 | values={[
68 | {label: 'npm', value: 'npm'},
69 | {label: 'yarn', value: 'yarn'},
70 | ]}>
71 | <TabItem value="npm">
72 |
73 | ```
74 | - npm ci
75 | ```
76 | </TabItem>
77 | <TabItem value="yarn">
78 |
79 | ```
80 | - yarn
81 | ```
82 | </TabItem>
83 | </Tabs>
84 |
85 | <br/>
86 |
87 | ### Run ESlint
88 | ---
89 |
90 | <Tabs
91 | defaultValue="npm"
92 | values={[
93 | {label: 'npm', value: 'npm'},
94 | {label: 'yarn', value: 'yarn'},
95 | ]}>
96 | <TabItem value="npm">
97 |
98 | ```
99 | - npm run lint
100 | ```
101 | </TabItem>
102 | <TabItem value="yarn">
103 |
104 | ```
105 | - yarn lint
106 | ```
107 | </TabItem>
108 | </Tabs>
109 |
110 | <br/>
111 |
112 | ## Testing
113 | ---
114 |
115 |
116 | ### Run tests
117 | <Tabs
118 | defaultValue="npm"
119 | values={[
120 | {label: 'npm', value: 'npm'},
121 | {label: 'yarn', value: 'yarn'},
122 | ]}>
123 | <TabItem value="npm">
124 |
125 | ```
126 | - npm run test
127 | ```
128 | </TabItem>
129 | <TabItem value="yarn">
130 |
131 | ```
132 | - yarn test
133 | ```
134 | </TabItem>
135 | </Tabs>
136 |
137 | ### Run Cypress E2E Testing
138 | <Tabs
139 | defaultValue="npm"
140 | values={[
141 | {label: 'npm', value: 'npm'},
142 | {label: 'yarn', value: 'yarn'},
143 | ]}>
144 | <TabItem value="npm">
145 |
146 | ```
147 | - npm run cypress:test
148 | ```
149 | </TabItem>
150 | <TabItem value="yarn">
151 |
152 | ```
153 | - yarn cypress:test
154 | ```
155 | </TabItem>
156 | </Tabs>
157 |
158 |
159 | ### WebdriverIO E2E Testing
160 | <Tabs
161 | defaultValue="npm"
162 | values={[
163 | {label: 'npm', value: 'npm'},
164 | {label: 'yarn', value: 'yarn'},
165 | ]}>
166 | <TabItem value="npm">
167 |
168 | ```
169 | - npm run webdriver:run
170 | ```
171 | </TabItem>
172 | <TabItem value="yarn">
173 |
174 | ```
175 | - yarn webdriver:run
176 | ```
177 | </TabItem>
178 | </Tabs>
179 |
180 |
181 |
182 | :::tip
183 | We recommend using **[Meercode](https://meercode.io)**, if you are using Travis CI. **[Meercode](https://meercode.io)** is the monitoring dashboard for your CI/CD builds.
184 | :::
--------------------------------------------------------------------------------
/documentation/docs/nextjs/css.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: css
3 | title: Built-in CSS Support
4 | sidebar_label: Built-in CSS
5 | description: How to use CSS in Next.js?
6 | ---
7 |
8 | Next.js allows you to import CSS files from a JavaScript file.
9 |
10 | For example, to add Global Stylesheet to boilerplate, we import following CSS file within `pages/_app.tsx`.
11 |
12 | ```css title="src/styles/global.css"
13 | hmtl,
14 | body {
15 | margin: 0;
16 | padding: 0;
17 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
18 | "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
19 | }
20 | ```
21 |
22 | Then, import the styles.css file.
23 |
24 | ```tsx title="pages/_app.tsx"
25 | import React from "react";
26 | import { AppProps } from "next/app";
27 | import "@styles/global.css";
28 |
29 | function MyApp({ Component, pageProps }: AppProps): JSX.Element {
30 | return <Component {...pageProps} />;
31 | }
32 |
33 | export default MyApp;
34 | ```
35 |
36 | These styles will apply to all pages and components in your application.
37 |
38 | ### CSS Modules
39 |
40 | :::caution
41 |
42 | next.js only supports CSS Modules as Component-Level CSS implementation.
43 |
44 | :::
45 |
46 |
47 | [CSS Modules](https://github.com/css-modules/css-modules) let you use the same CSS class name in different files without worrying about naming clashes.
48 |
49 | To style your components using CSS Modules, name your stylesheet files with the `[name].module.css`.
50 |
51 | For example, lets check out a reusable Header component implementation.
52 |
53 | ```css title="components/header/index.module.css"
54 | .header {
55 | background-color: #20232A;
56 | text-align: center;
57 | }
58 | ```
59 |
60 |
61 | ```tsx title="components/header"
62 | import React from "react";
63 | import styles from "./index.module.css";
64 | import { Logo } from "@components";
65 |
66 | export const Header: React.FC = () => {
67 | return (
68 | <div className={styles.header}>
69 | <Logo />
70 | </div>
71 | );
72 | };
73 | ```
74 |
75 | <br/>
76 |
77 | :::note
78 |
79 | The class names which will be processed into a globally unique class name during build.
80 |
81 | :::
82 |
83 |
84 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/docker.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: docker
3 | title: Docker
4 | sidebar_label: Docker
5 | description: How to use NextJS with docker?
6 | ---
7 |
8 | Docker is an open source containerization platform. Docker enables developers to package applications into containers—standardized executable components that combine application source code with all the operating system (OS) libraries and dependencies required to run the code in any environment.
9 |
10 | [Refer to official documentation for detailed usage. →](https://docs.docker.com)
11 |
12 | Example Dockerfile:
13 |
14 | ```js title="Dockerfile"
15 | FROM node:12-alpine
16 |
17 | WORKDIR /opt/app
18 |
19 | ENV NODE_ENV production
20 |
21 | COPY package*.json ./
22 |
23 | RUN npm ci
24 |
25 | COPY . /opt/app
26 |
27 | RUN npm install --dev && npm run build
28 |
29 | CMD [ "npm", "start" ]
30 | ```
31 |
32 | :::note
33 |
34 | Dockerfile is created by superplate if you select docker plugin during the project creation phase.
35 |
36 | :::
37 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/env.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: env
3 | title: Environment Variables(.env)
4 | sidebar_label: Enviroment Variables
5 | description: How to use env in Next.js apps?
6 | ---
7 |
8 | Using Environment variables important to keep your private information secure. Next.js comes with built-in support for environment variables.
9 |
10 |
11 |
12 | superplate has a plugin to generate those files for different environments automatically.
13 |
14 | ### .env.local
15 |
16 | Next.js has built-in support for loading environment variables from `.env.local` into `process.env`.
17 |
18 |
19 | ```CSS title=".env.local"
20 | DB_HOST_URL=localhost
21 | DB_USER=user
22 | DB_PASS=password
23 | ```
24 |
25 |
26 | This loads `process.env.DB_HOST_URL`, `process.env.DB_USER`, and `process.env.DB_PASS` into the Node.js environment automatically.
27 |
28 | ```ts title="pages/index.tsx"
29 | export async function getServerSideProps() {
30 | const db = await myDB.connect({
31 | host: process.env.DB_HOST_URL,
32 | username: process.env.DB_USER,
33 | password: process.env.DB_PASS,
34 | })
35 | // ...
36 | }
37 | ```
38 |
39 |
40 | ### .env.development
41 |
42 | Next.js allows us to set defaults in `.env` (all environments), `.env.development` (development environment) and .`env.production` (production environment).
43 |
44 |
45 | ```env title=".env.development"
46 | # DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
47 | # If you want to add secrets use `.env.development.local` instead.
48 |
49 | DEVELOPMENT_ENV_VARIABLE="server_only_development_variable"
50 | NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE="public_development_variable"
51 | ```
52 |
53 | :::important
54 |
55 | In order to expose a variable to the browser you have to prefix the variable with `NEXT_PUBLIC_`.
56 |
57 | :::
58 |
59 | ### .env.production
60 |
61 | ```env title=".env.production"
62 | # DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
63 | # If you want to add secrets use `.env.production.local` instead.
64 |
65 | PRODUCTION_ENV_VARIABLE="server_only_production_variable"
66 | NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE="public_production_variable"
67 | ```
68 |
69 |
70 | ```jsx title="components/envExample.tsx"
71 | import React from "react";
72 | import styles from "./index.module.css";
73 |
74 | export const EnvExample: React.FC = () => {
75 | console.log(process.env.NEXT_PUBLIC_ENV_VARIABLE);
76 | console.log(process.env.NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE);
77 | console.log(process.env.NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE);
78 | };
79 | ```
80 |
81 | ### .env.test
82 |
83 | In the same way you can set defaults for development or production environments, you can do the same with `.env.test` file for testing environment
84 |
85 |
86 | ```env title=".env.test"
87 | # USE THIS FILE IF YOU WANT TO DEFINE VARIABLES SPECIFIC TO TEST ENVIRONMENT
88 |
89 | ENV_TEST_VARIABLE="test_variable"
90 | ```
91 |
92 | :::tip
93 |
94 | `.env.test` is useful when running tests with tools like jest or cypress where you need to set specific environment variables only for testing.
95 | :::
96 |
97 |
98 | [Refer to official documentation for detailed usage →](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables)
--------------------------------------------------------------------------------
/documentation/docs/nextjs/fetch.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: fetch
3 | title: Fetch
4 | sidebar_label: Fetch
5 | description: How to use fetch data in Next.js?
6 | ---
7 |
8 | The Fetch API provides an interface for fetching resources (including across the network)
9 | [See MDN Docs →](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
10 |
11 | Next.js has [built-in fetch support](https://nextjs.org/blog/next-9-4#improved-built-in-fetch-support) both in browser and node environment.
12 |
13 | It can be used both in your components and Next.js server-side methods.
14 |
15 | ### Using on Client-side
16 |
17 | ```js title="In your component"
18 | export const FetchExample = () => {
19 | const [error, setError] = useState(null);
20 | const [isLoaded, setIsLoaded] = useState(false);
21 | const [data, setData] = useState([]);
22 |
23 | useEffect(() => {
24 | fetch(API_URL)
25 | .then(res => res.json())
26 | .then(
27 | res => {
28 | setData(res);
29 | setIsLoaded(true);
30 | },
31 | // Note: it's important to handle errors here
32 | // instead of a catch() block so that we don't swallow
33 | // exceptions from actual bugs in components.
34 | err => {
35 | setIsLoaded(true);
36 | setError(err);
37 | },
38 | );
39 | }, []);
40 | }
41 | ```
42 |
43 | ### Using on Server-side
44 |
45 | ```js title="Next.js getStaticProps"
46 | export async function getStaticProps() {
47 | // fetch no longer needs to be imported from isomorphic-unfetch
48 | const res = await fetch('https://.../posts')
49 | const posts = await res.json()
50 |
51 | return {
52 | props: {
53 | posts
54 | }
55 | }
56 | }
57 |
58 | function Blog({ posts }) {
59 | // Render posts...
60 | }
61 |
62 | export default Blog
63 | ```
64 |
65 | :::tip
66 | Consider using `react-query` or `swr` plugins to handle client-side requests.
67 | They can be used with promise-based methods (fetch, axios..)
68 | :::
--------------------------------------------------------------------------------
/documentation/docs/nextjs/hooks/react-query.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: react-query
3 | title: React Query
4 | sidebar_label: React Query
5 | description: React Query with server side rendering using Next.js
6 | ---
7 |
8 | Provides performant and powerful data synchronization for React.
9 |
10 | React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
11 |
12 | [Refer to official documentation for detailed usage. →](https://react-query.tanstack.com/)
13 |
14 | :::tip
15 |
16 | All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.
17 |
18 | :::
19 |
20 | React Query supports prefetching multiple queries on the server in Next.js and then dehydrating those queries to the queryClient.
21 |
22 | To support caching queries on the server and set up hydration:
23 | - Create a new `QueryClient` instance
24 | - Wrap your app component with `<QueryClientProvider>` and pass it the client instance
25 | - Wrap your app component with `<Hydrate>` and pass it the `dehydratedState` prop from `pageProps`.
26 |
27 | [We recommend to check the official documentation for SSR implemantation. →](https://react-query.tanstack.com/)
28 |
29 | ```js title="pages/_app.js"
30 | import React from 'react';
31 | import { AppProps } from "next/app";
32 | import { QueryClient, QueryClientProvider } from "react-query";
33 | import { Hydrate } from "react-query/hydration";
34 |
35 | function MyApp({ Component, pageProps }: AppProps): JSX.Element {
36 | const queryClient = new QueryClient()
37 | return (
38 | <Hydrate state={pageProps.dehydratedState}>
39 | <QueryClientProvider client={queryClient}>
40 | <Component {...pageProps} />
41 | </QueryClientProvider>
42 | </Hydrate>
43 | );
44 | }
45 |
46 | export default MyApp;
47 | ```
48 | :::caution
49 |
50 | If you didn't choose the plugin during project creation phase, you must update your `_app.js` file as above after [installing required package](#adding-react-query-to-your-project-later) to add it.
51 |
52 | :::
53 |
54 | #### Example usage `useQuery`:
55 |
56 | ```js title="components/reactQueryExample/index.tsx"
57 | import { useQuery } from "react-query";
58 |
59 | const API_URL = "https://official-joke-api.appspot.com/jokes/programming/random";
60 |
61 | export const ReactQueryExample = () => {
62 |
63 | const { data } = useQuery("random-programming-joke", () =>
64 | fetch(
65 | API_URL
66 | ).then(res => res.json())
67 | );
68 | };
69 | ```
70 |
71 |
72 | ## Adding react-query to your project later
73 |
74 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
75 |
76 | - Install `react-query` package.
77 |
78 | import Tabs from '@theme/Tabs';
79 | import TabItem from '@theme/TabItem';
80 |
81 | <Tabs
82 | defaultValue="npm"
83 | values={[
84 | {label: 'npm', value: 'npm'},
85 | {label: 'yarn', value: 'yarn'},
86 | ]}>
87 | <TabItem value="npm">
88 |
89 | ```bash
90 | npm install react-query
91 | ```
92 |
93 | </TabItem>
94 | <TabItem value="yarn">
95 |
96 | ```bash
97 | yarn add react-query
98 | ```
99 |
100 | </TabItem>
101 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/nextjs/hooks/react-use.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: react-use
3 | title: React Use
4 | sidebar_label: React Use
5 | description: How to use react hooks with Next.js?
6 | ---
7 |
8 | react-use has various hooks that you can use with ease.
9 |
10 | Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
11 |
12 | [Refer to official documentation for detailed usage. →](https://github.com/streamich/react-use)
13 |
14 | ### react-use
15 |
16 | In this example, we'll use `useWindowSize` and `usePrevious` hooks in order to tracks `Window` dimensions and get the previous state with ease.
17 |
18 | ```js
19 | import React from "react";
20 | // highlight-next-line
21 | import { usePrevious, useWindowSize } from "react-use";
22 |
23 | export const ReactUseExample = () => {
24 | const [count, setCount] = React.useState(0);
25 | // highlight-start
26 | const prevCount = usePrevious(count);
27 | const { width, height } = useWindowSize();
28 | // highlight-end
29 |
30 | return (
31 | <div>
32 | <div>
33 | <p>usePrevious</p>
34 | <p>
35 | Now: {count}, before: {prevCount}
36 | </p>
37 | <p>
38 | <button onClick={() => setCount(count + 1)}>
39 | Increment
40 | </button>
41 | <button onClick={() => setCount(count - 1)}>
42 | Decrement
43 | </button>
44 | </p>
45 | </div>
46 | <div>
47 | <p>useWindowSize</p>
48 | <p>
49 | width: {`${width}px`}, height: {`${height}px`}
50 | </p>
51 | </div>
52 | </div>
53 | );
54 | };
55 | ```
56 |
57 |
58 | ## Adding react-use to your project later
59 |
60 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
61 |
62 | - Install `react-use` package.
63 |
64 | import Tabs from '@theme/Tabs';
65 | import TabItem from '@theme/TabItem';
66 |
67 | <Tabs
68 | defaultValue="npm"
69 | values={[
70 | {label: 'npm', value: 'npm'},
71 | {label: 'yarn', value: 'yarn'},
72 | ]}>
73 | <TabItem value="npm">
74 |
75 | ```bash
76 | npm install react-use
77 | ```
78 |
79 | </TabItem>
80 | <TabItem value="yarn">
81 |
82 | ```bash
83 | yarn add react-use
84 | ```
85 |
86 | </TabItem>
87 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/nextjs/hooks/swr.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: swr
3 | title: SWR
4 | sidebar_label: SWR
5 | description: Data fetching in Next.js — How to use SWR
6 | ---
7 |
8 | React Hooks library for data fetching.
9 |
10 | The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by [HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
11 |
12 | With SWR, components will get a stream of data updates constantly and automatically.
13 | And the UI will be always fast and reactive.
14 | [Refer to official documentation for detailed usage. →](https://swr.vercel.app/)
15 |
16 |
17 | ### useSWR
18 |
19 | Pass an API key and start using it inside any function components:
20 |
21 | ```jsx
22 | import useSWR from 'swr';
23 |
24 | const fetcher = url => fetch(url).then(r => r.json());
25 |
26 | function Profile () {
27 | const { data, error } = useSWR('/api/user/123', fetcher);
28 |
29 | if (error) return <div>failed to load</div>
30 |
31 | if (!data) return <div>loading...</div>
32 |
33 | // render data
34 | return <div>hello {data.name}!</div>
35 | }
36 | ```
37 |
38 | `fetcher` is an async function that accepts the key of SWR, and returns the data. You can use any library to handle data fetching.
39 |
40 | ```js
41 | import axios from 'axios';
42 |
43 | const fetcher = url => axios.get(url).then(res => res.data);
44 | ```
45 |
46 | [Refer to official documentation on data fetching for detailed usage. →](https://swr.vercel.app/docs/data-fetching)
47 |
48 | ### Mutation
49 |
50 | `useSWR` also returns a `mutate` method that is pre-bound to SWR's key
51 |
52 | ```jsx
53 | import useSWR from 'swr';
54 |
55 | function Profile () {
56 | const { data, mutate } = useSWR('/api/user', fetcher);
57 | return (
58 | <div>
59 | <h1>My name is {data.name}.</h1>
60 | <button onClick={async () => {
61 | const newName = data.name.toUpperCase();
62 | // send a request to the API to update the data
63 | await requestUpdateUsername(newName);
64 | // update the local data immediately and revalidate (refetch)
65 | // NOTE: key is not required when using useSWR's mutate as it's pre-bound
66 | mutate({ ...data, name: newName });
67 | }}>Uppercase my name!</button>
68 | </div>
69 | )
70 | }
71 | ```
72 |
73 | `mutate` can also be imported directly form `swr`
74 |
75 | ```jsx
76 | import useSWR, { mutate } from 'swr';
77 |
78 | function App () {
79 | return (
80 | <div>
81 | <Profile />
82 | <button onClick={() => {
83 | // set the cookie as expired
84 | document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
85 | // tell all SWRs with this key to revalidate
86 | mutate('/api/user');
87 | }}>
88 | Logout
89 | </button>
90 | </div>
91 | )
92 | }
93 | ```
94 |
95 | [Refer to official documentation on mutation for detailed usage. →](https://swr.vercel.app/docs/mutation)
96 |
97 |
98 | ## Adding SWR to your project later
99 |
100 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
101 |
102 | - Install `swr` package.
103 |
104 | import Tabs from '@theme/Tabs';
105 | import TabItem from '@theme/TabItem';
106 |
107 | <Tabs
108 | defaultValue="npm"
109 | values={[
110 | {label: 'npm', value: 'npm'},
111 | {label: 'yarn', value: 'yarn'},
112 | ]}>
113 | <TabItem value="npm">
114 |
115 | ```bash
116 | npm install swr
117 | ```
118 |
119 | </TabItem>
120 | <TabItem value="yarn">
121 |
122 | ```bash
123 | yarn add swr
124 | ```
125 |
126 | </TabItem>
127 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/nextjs/i18n/next-i18next.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: next-i18next
3 | title: next-i18next
4 | sidebar_label: next-i18next
5 | description: Using i18n with Next.js
6 | ---
7 |
8 | next-i18next is a plugin that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple namespaces with codesplitting.
9 |
10 | [Refer to official documentation for detailed usage. →](https://github.com/isaachinman/next-i18next)
11 |
12 | superplate serves an optional `i18n` plugin that sets translation feature using [next-i18next](https://github.com/isaachinman/next-i18next).
13 |
14 | The translations of custom text messsages will be stored in each language's own separate folder.
15 |
16 | Example translation folder structure:
17 |
18 | ```
19 | .
20 | └── static
21 | └── locales
22 | ├── en
23 | | └── common.json
24 | ├── tr
25 | └── common.json
26 | ```
27 |
28 | For each translation folder create a json file and define translations with key-value pairs.
29 |
30 | If you want to add a new language file you should:
31 |
32 | - Create a new translation file in `static/locales/{newlang}/common.json`.
33 | - Add a key for the language into otherLanguages array in `server/i18n.js`.
34 |
35 | :::caution
36 |
37 | Make sure both folder and key names are same.
38 |
39 | :::
40 |
41 |
42 | ```jsx title="i18n.js"
43 | const NextI18Next = require('next-i18next').default
44 | const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
45 | const path = require('path')
46 |
47 | module.exports = new NextI18Next({
48 | otherLanguages: ['en', 'tr'],
49 | defaultLanguage: 'en',
50 | localeSubpaths,
51 | localePath: path.resolve('./public/locales')
52 | })
53 | ```
54 |
55 | ### How to use next-i18next?
56 | Use `changeLanguage()` method of `i18n` to set current language and trigger the language change manually.
57 |
58 | `t()` function can be used to fetch the translation.
59 |
60 | You can specify key as a String. It resolves key-value pair from language json file in locales folder and returns value as a string.
61 |
62 |
63 | ```jsx title="components/I18NExampleComponent
64 | import React from "react";
65 | import { TFunction } from "next-i18next";
66 |
67 | import { withTranslation, i18n } from "./i18n.js";
68 |
69 | const I18NExampleComponent: React.FC<{ t: TFunction }> = ({ t }) => {
70 | const changeLanguage = () => {
71 | i18n.changeLanguage(i18n.language === "tr" ? "en" : "tr");
72 | };
73 |
74 | return (
75 | <div>
76 | <button onClick={changeLanguage}>{t(`common:language.en`)}</button>
77 | <button onClick={changeLanguage}>{t(`common:language.tr`)}</button>
78 | </div>
79 | );
80 | };
81 |
82 | export const I18NExample = withTranslation(["common", "home"])(
83 | I18NExampleComponent
84 | );
85 | ```
86 |
87 |
88 | <br/>
89 |
90 | ### Adding next-i18next to your project later
91 |
92 | :::tip
93 |
94 | All this work will be handled automatically by CLI, so you don’t need to do anything extra as long as you choose next-i18next as i18n plugin during the project creation phase.
95 |
96 | :::
97 |
98 | import Tabs from '@theme/Tabs';
99 | import TabItem from '@theme/TabItem';
100 |
101 | <Tabs
102 | defaultValue="npm"
103 | values={[
104 | {label: 'npm', value: 'npm'},
105 | {label: 'yarn', value: 'yarn'},
106 | ]}>
107 | <TabItem value="npm">
108 |
109 | ```
110 | npm install next-i18next
111 | ```
112 | </TabItem>
113 |
114 | <TabItem value="yarn">
115 |
116 | ```
117 | yarn add next-i18next
118 | ```
119 | </TabItem>
120 | </Tabs>
121 |
122 |
123 | :::caution
124 | Don't forget to wrap your app with i18n, if you prefer to add next-i18next plugin to existing project.
125 |
126 | ```jsx title="pages/_app.tsx"
127 | ...
128 |
129 | import { appWithTranslation } from "./i18n.js";
130 |
131 | function MyApp({ Component, pageProps }: AppProps): JSX.Element {
132 | ...
133 | }
134 |
135 | export default appWithTranslation(MyApp);
136 | ```
137 | :::
138 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/i18n/next-translate.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: next-translate
3 | title: next-translate
4 | sidebar_label: next-translate
5 | description: Using i18n with Next.js
6 | ---
7 |
8 | The main goal of [next-translate](https://github.com/vinissimus/next-translate) is to keep the translations as simple as possible in a Next.js environment.
9 |
10 | superplate serves an optional `i18n` app translation plugin with [next-translate](https://github.com/vinissimus/next-translate) .
11 |
12 | The translations of custom text messsages will be stored in each language's own separate folder.
13 |
14 | ```js
15 | - locales
16 | - en
17 | - common.js
18 | - home.js
19 | - tr
20 | - common.js
21 | - home.js
22 | ```
23 |
24 | If you choose `next-translate` as a `i18n` plugin during project creation phase, `common.json` example file will be created at `public/locales` directory by CLI.
25 |
26 |
27 | ```json title="locales/eng/common.json"
28 | {
29 | "hello": "Hello",
30 | "greet": "Hello, {{name}}!",
31 | "world": "World",
32 | "language": {
33 | "tr": "🇹🇷 Türkçe",
34 | "en": "🇺🇸 English"
35 | }
36 | }
37 | ```
38 |
39 | ```json title="locales/tr/common.json"
40 | {
41 | "hello": "Merhaba",
42 | "greet": "Merhaba, {{name}}!",
43 | "world": "Dünya",
44 | "language": {
45 | "tr": "🇹🇷 Türkçe",
46 | "en": "🇺🇸 English"
47 | }
48 | }
49 | ```
50 |
51 | ### How to use next-translate?
52 |
53 | ```tsx
54 | import React from "react";
55 | import Link from "next/link";
56 |
57 | // highlight-start
58 | import useTranslation from "next-translate/useTranslation";
59 | import i18nConfig from "@i18n";
60 | // highlight-end
61 |
62 | // highlight-start
63 | const { locales } = i18nConfig;
64 | // highlight-end
65 |
66 | export const NextTranslateExample: React.FC<{ defaultNamespace: string }> = ({
67 | defaultNamespace,
68 | }) => {
69 | const { t, lang } = useTranslation(defaultNamespace);
70 |
71 | return (
72 | <div>
73 | ...
74 | <div>
75 | // highlight-start
76 | {locales.map(lng => (
77 | <Link href="/" passHref locale={lng} key={lng}>
78 | <a>
79 | {t(`common:language.${lng}`)}
80 | </a>
81 | </Link>
82 | ))}
83 | // highlight-end
84 | </div>
85 | <main>
86 | // highlight-start
87 | <p>{t("common:greet", { name: t`common:world` })}</p>
88 | // highlight-end
89 | </main>
90 | ...
91 | </div>
92 | );
93 | };
94 | ```
95 |
96 | ### How to configure next-translate?
97 |
98 | :::caution
99 |
100 | All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.
101 |
102 | :::
103 |
104 |
105 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
106 |
107 | import Tabs from '@theme/Tabs';
108 | import TabItem from '@theme/TabItem';
109 |
110 |
111 | <Tabs
112 | defaultValue="npm"
113 | values={[
114 | {label: 'npm', value: 'npm'},
115 | {label: 'yarn', value: 'yarn'},
116 | ]}>
117 | <TabItem value="npm">
118 |
119 | ```
120 | npm install next-translate
121 | ```
122 | </TabItem>
123 |
124 | <TabItem value="yarn">
125 |
126 | ```
127 | yarn add next-translate
128 | ```
129 | </TabItem>
130 | </Tabs>
131 |
132 |
133 | You must create the file `i18n.json` in the main directory.
134 |
135 | ```json title="i18n.json"
136 | {
137 | "locales": ["en", "tr"],
138 | "defaultLocale": "en",
139 | "pages": {
140 | "*": ["common"],
141 | "/": ["home"]
142 | }
143 | }
144 | ```
145 |
146 | :::note
147 | As in the `common.js` example above, create a json file in each translation language's own separate folder and define translations with key-value pairs.
148 | :::
149 |
150 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/linter/eslint.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: eslint
3 | title: ESLint
4 | sidebar_label: ESLint
5 | description: Using ESLint and Prettier in a TypeScript Next.js Project
6 | ---
7 |
8 | Use ESLint to find and fix problems in your codebase.
9 | ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
10 |
11 | [Refer to official documentation for detailed usage. →](https://eslint.org/)
12 |
13 |
14 | ```json title="package.json"
15 | {
16 | "scripts": {
17 | "lint": "eslint '**/*.{js,jsx,ts,tsx}'"
18 | },
19 | "devDependencies": {
20 | "eslint": "^7.15.0",
21 | "@typescript-eslint/eslint-plugin": "^4.9.1",
22 | "@typescript-eslint/parser": "^4.9.1",
23 |
24 | // highlight-next-line
25 | If you want to use Prettier with ESLint, you need to add the following packages.
26 | // "eslint-config-prettier": "^7.0.0",
27 | // "eslint-plugin-prettier": "^3.2.0"
28 | }
29 | }
30 | ```
31 |
32 | ESLint is designed to be flexible and configurable for your use case. You can turn off every rule and run only with basic syntax validation or mix and match the bundled rules and your custom rules to fit the needs of your project.
33 |
34 | ```json title="_.eslintrc"
35 | {
36 | "root": true,
37 | "parser": "@typescript-eslint/parser",
38 | "plugins": ["@typescript-eslint"],
39 | "overrides": [
40 | {
41 | "files": ["*.js"],
42 | "rules": {
43 | "@typescript-eslint/no-var-requires": "off"
44 | }
45 | }
46 | ],
47 | "env": {
48 | "node": true,
49 | "browser": true,
50 | "amd": true
51 | },
52 | "extends": [
53 | "eslint:recommended",
54 | "plugin:@typescript-eslint/eslint-recommended",
55 | "plugin:@typescript-eslint/recommended",
56 |
57 | // highlight-next-line
58 | If you want to use prettier with ESLint, the following configuration can be used.
59 | // "prettier/@typescript-eslint",
60 | // "plugin:prettier/recommended"
61 | ]
62 | }
63 | ```
64 |
65 | You can tell ESLint to ignore specific files and directories in your config files.
66 |
67 | ```bash title=".eslintignore"
68 | node_modules
69 | __generated__
70 | ```
71 |
72 | :::caution
73 |
74 | All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.
75 |
76 | :::
77 |
78 |
79 | ## Adding ESLint to your project later
80 |
81 | import Tabs from '@theme/Tabs';
82 | import TabItem from '@theme/TabItem';
83 |
84 | <Tabs
85 | defaultValue="npm"
86 | values={[
87 | {label: 'npm', value: 'npm'},
88 | {label: 'yarn', value: 'yarn'},
89 | ]}>
90 | <TabItem value="npm">
91 |
92 | ```
93 | npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
94 | ```
95 | If you want to use Prettier with ESLint, you need to add the following packages.
96 |
97 | ```
98 | npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier/@typescript-eslint plugin:prettier/recommended
99 | ```
100 | </TabItem>
101 | <TabItem value="yarn">
102 |
103 | ```
104 | yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
105 | ```
106 | If you want to use Prettier with ESLint, you need to add the following packages.
107 |
108 | ```
109 | yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier/@typescript-eslint plugin:prettier/recommended
110 | ```
111 | </TabItem>
112 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/nextjs/linter/lint-staged.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: lint-staged
3 | title: lint-staged
4 | sidebar_label: lint-staged
5 | description: Setting up linter for Next.js
6 | ---
7 |
8 | Use lint-staged to make your code uniform. It allows you to run arbitrary scripts against currently staged files.
9 |
10 | [Refer to official documentation for detailed usage. →](https://github.com/okonet/lint-staged)
11 |
12 | ### How to configure lint-staged?
13 |
14 | :::caution
15 |
16 | All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.
17 |
18 | :::
19 |
20 |
21 | ```json title="package.json"
22 | {
23 | "devDependencies": {
24 | "husky": "^4.3.7",
25 | "lint-staged": "^10.5.3"
26 | },
27 | "lint-staged": {
28 | "*.{js,jsx,ts,tsx}": [
29 | "npm run lint -- --quiet --fix"
30 | ]
31 | },
32 | "husky": {
33 | "hooks": {
34 | "pre-commit": "lint-staged"
35 | }
36 | }
37 | }
38 | ```
39 |
40 | ## Adding lint-staged to your project later
41 |
42 | import Tabs from '@theme/Tabs';
43 | import TabItem from '@theme/TabItem';
44 |
45 | <Tabs
46 | defaultValue="npm"
47 | values={[
48 | {label: 'npm', value: 'npm'},
49 | {label: 'yarn', value: 'yarn'},
50 | ]}>
51 | <TabItem value="npm">
52 |
53 | ```
54 | npm i -D lint-staged husky
55 | ```
56 | </TabItem>
57 | <TabItem value="yarn">
58 |
59 | ```
60 | yarn add -D lint-staged husky
61 | ```
62 | </TabItem>
63 | </Tabs>
64 |
65 | :::warning
66 | You must have installed the `ESLint` plugin to use `lint-staged`.
67 |
68 | :::
69 | [To learn how to configure ESLint in your project follow instructions from here →](eslint)
--------------------------------------------------------------------------------
/documentation/docs/nextjs/linter/prettier.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: prettier
3 | title: Prettier
4 | sidebar_label: Prettier
5 | description: How to Use ESLint and Prettier in Your Next.js Application?
6 | ---
7 |
8 | Use Prettier to make your code uniform and maintain code style integrity.
9 |
10 | [Refer to official documentation for detailed usage. →](https://prettier.io/)
11 |
12 | :::caution
13 |
14 | All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.
15 |
16 | :::
17 |
18 |
19 | ```json title="package.json"
20 | {
21 | "scripts": {
22 | "prettier": "prettier '**/*.{js,jsx,ts,tsx}'"
23 | },
24 | "dependencies": {
25 | "prettier": "^2.2.1"
26 | }
27 | }
28 | ```
29 |
30 | Prettier uses `cosmiconfig` for configuration file support.
31 | This means you can configure Prettier in the ways specified in the [original document](https://prettier.io/docs/en/configuration.html#docsNav).
32 |
33 | ```json title=".prettierrc"
34 | {
35 | "semi": true,
36 | "trailingComma": "all",
37 | "singleQuote": false,
38 | "printWidth": 80,
39 | "tabWidth": 4
40 | }
41 | ```
42 |
43 | To exclude files from formatting, create a `.prettierignore` file in the root of your project.
44 |
45 | ```bash title=".prettierignore"
46 | node_modules
47 | __generated__
48 | ```
49 |
50 |
51 | ## Adding Prettier to your project later
52 |
53 | import Tabs from '@theme/Tabs';
54 | import TabItem from '@theme/TabItem';
55 |
56 | <Tabs
57 | defaultValue="npm"
58 | values={[
59 | {label: 'npm', value: 'npm'},
60 | {label: 'yarn', value: 'yarn'},
61 | ]}>
62 | <TabItem value="npm">
63 |
64 | ```
65 | npm i -D prettier
66 | ```
67 | </TabItem>
68 | <TabItem value="yarn">
69 |
70 | ```
71 | yarn add -D prettier
72 | ```
73 | </TabItem>
74 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/nextjs/reverse-proxy.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: reverse-proxy
3 | title: Reverse Proxy
4 | sidebar_label: Reverse Proxy
5 | description: How to use Reverse Proxy in Next.js apps?
6 | ---
7 |
8 | A proxy server sits between or intermediary server that forwards requests for content from multiple clients to different servers across the Internet. A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server.
9 |
10 | A reverse proxy provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers.
11 |
12 | You can define the paths you want to implement reverse proxy in `next.config.js`
13 |
14 | ```js title="next.config.js"
15 | const withPlugins = require("next-compose-plugins");
16 |
17 | const config = {
18 | devServer: {
19 | proxy: {
20 | "/api": "http://localhost:3000",
21 | },
22 | },
23 | };
24 |
25 | module.exports = withPlugins([], config);
26 | ```
--------------------------------------------------------------------------------
/documentation/docs/nextjs/scss.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: scss
3 | title: Sass/SCSS
4 | sidebar_label: Sass/SCSS
5 | description: How to use Sass in Next.js?
6 | ---
7 |
8 | Sass is a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.
9 |
10 | Next.js allows you to import Sass using both the `.scss` and `.sass` extensions. You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
11 |
12 | To style your components using CSS Modules, name your stylesheet files with the `[name].module.scss`.
13 |
14 |
15 | ```css title="components/header/index.module.scss"
16 | .header {
17 | background-color: #20232A;
18 |
19 | title {
20 | color: #96CBEF;
21 | }
22 |
23 | &:hover {
24 | background-color: #2C3946;
25 | }
26 | }
27 | ```
28 |
29 |
30 |
31 | ```jsx title="components/header/index.tsx"
32 | import React from "react";
33 |
34 | import styles from "./index.module.scss";
35 |
36 | export const Header: React.FC = () => {
37 | return (
38 | <div className={styles.header}>
39 | <title>Title<title>
40 | </div>
41 | );
42 | };
43 | ```
44 |
45 | <br/>
46 |
47 | :::caution
48 |
49 | Sass node package adds by CLI if chosen as CSS Preprocessor during project creating phase. Since Next.js doesn’t come with Sass, be sure to install with `npm install sass` if you want to add Sass afterwards.
50 |
51 | :::
52 |
53 | :::note
54 |
55 | Next.js has built-in Sass support, no configuration required. Just install the Sass package if you haven't chosen from our CLI as a preprocessor then Next.js will see this dependency and enable built-in Sass loader.
56 |
57 | :::
58 |
59 | :::tip
60 |
61 | You can [customize Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass) if UI framework chosen as Bootstrap along with Sass during creation phase.
62 | Bootstrap’s source Sass files added to under `src/styles` folder directory.
63 |
64 | :::
65 |
66 |
67 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/state-management/recoil.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: recoil
3 | title: Recoil.js
4 | sidebar_label: Recoil.js
5 | description: How to Use Recoil.js in Next.js?
6 | ---
7 |
8 | Recoil.js is a state management library, open-sourced by Facebook. It's offering a simple and powerful way of dealing with global, asynchronous and derived state.
9 |
10 | We'll show basic usage of Recoil API with simple counter example.
11 | [Refer to official documentation for detailed usage. →](https://recoiljs.org/docs/introduction/motivation)
12 |
13 | We need to wrap our code with RecoilRoot in root component.
14 |
15 | ``` jsx title="pages/__app.tsx"
16 | import React from "react";
17 | import { AppProps } from "next/app";
18 | import { RecoilRoot } from "recoil";
19 |
20 | function MyApp({ Component, pageProps }: AppProps): JSX.Element {
21 | return (
22 | <RecoilRoot>
23 | <Component {...pageProps} />
24 | </RecoilRoot>
25 | );
26 | }
27 |
28 | export default MyApp;
29 | ```
30 |
31 | An `atom` is simply a unit of state that component can subscribe. By updating the value, each subscribed component is re-rendered with the new value.
32 |
33 | ```jsx title="recoil/atoms/index.ts"
34 | import { atom } from "recoil";
35 |
36 | enum Atoms {
37 | Counter = "Counter",
38 | }
39 |
40 | export const counter = atom({
41 | key: Atoms.Counter,
42 | default: 0,
43 | });
44 | ```
45 |
46 | To read and write an atom from a component, we use a hook called `useRecoilState`.
47 |
48 | ```tsx title="components/RecoilExample/index.tsx"
49 | import { useRecoilState } from "recoil";
50 | import { counter } from "recoil/atoms/index.ts";
51 |
52 | const useCounter: () => [
53 | number,
54 | { increase: () => void; decrease: () => void }
55 | ] = () => {
56 | // highlight-next-line
57 | const [count, setCount] = useRecoilState(counter);
58 |
59 | const increase = () => {
60 | setCount((current) => current + 1);
61 | };
62 |
63 | const decrease = () => {
64 | setCount((current) => current - 1);
65 | };
66 |
67 | return [count, { increase, decrease }];
68 | };
69 |
70 | export const RecoilExample: React.FC = () => {
71 | // highlight-next-line
72 | const [count, { increase, decrease }] = useCounter();
73 |
74 | return (
75 | <>
76 | <h2>Recoil Counter</h2>
77 | <div>
78 | <button onClick={increase}> + </button>
79 | <span>{count}</span>
80 | <button onClick={decrease}> - </button>
81 | </div>
82 | </>
83 | );
84 | };
85 | ```
86 | Clicking on the buttons will update state and change count. It's that simple.
87 |
88 | <br/>
89 |
90 | :::tip
91 |
92 | We recommend watching [Dave McCabe's presentation about Recoil](https://www.youtube.com/watch?v=_ISAA_Jt9kI&feature=youtu.be&ab_channel=ReactEurope) to understand the logic behind the Recoil.
93 |
94 | :::
95 |
96 | :::note
97 |
98 | All required configurations will be handled automatically by CLI as long as you choose Recoil plugin during the project creation phase.
99 |
100 | :::
101 |
102 |
103 | ### Adding Recoil to your project later
104 |
105 | If you didn't choose Recoil plugin during project creation phase, you can follow the instructions below to add it.
106 |
107 |
108 | import Tabs from '@theme/Tabs';
109 | import TabItem from '@theme/TabItem';
110 |
111 | <Tabs
112 | defaultValue="npm"
113 | values={[
114 | {label: 'npm', value: 'npm'},
115 | {label: 'yarn', value: 'yarn'},
116 | ]}>
117 | <TabItem value="npm">
118 |
119 | ```bash
120 | npm install recoil
121 | ```
122 |
123 | </TabItem>
124 | <TabItem value="yarn">
125 |
126 | ```bash
127 | yarn add recoil
128 | ```
129 |
130 | </TabItem>
131 | </Tabs>
132 |
133 |
134 | Refer to official [documentation](https://recoiljs.org/docs/introduction/installation) for installation.
135 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/state-management/zustand.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: zustand
3 | title: Zustand
4 | sidebar_label: Zustand
5 | description: How to Use zustand in Next.js?
6 | ---
7 |
8 | ### Overview
9 |
10 | Zustand is one of the lightest state management libraries.
11 |
12 | It's a small, fast, scalable state-management solution using simplified flux principles and has an api based on hooks.
13 |
14 | We'll show basic usage of zustand with simple counter example.
15 | [Refer to official documentation for detailed usage. →](https://github.com/pmndrs/zustand)
16 |
17 | ### Usage
18 |
19 | Zustand is known for its simplicity.
20 | We don't need to wrap our root code or add any complex setup.
21 |
22 | ``` jsx title="components/ZustandExample/index.tsx"
23 | import create from "zustand";
24 |
25 | interface Counter {
26 | count: number;
27 | inc: () => void;
28 | dec: () => void;
29 | }
30 |
31 | export const useStore = create<Counter>((set) => ({
32 | count: 1,
33 | inc: () => set((state) => ({ count: state.count + 1 })),
34 | dec: () => set((state) => ({ count: state.count - 1 })),
35 | }));
36 |
37 | export const ZustandExample = () => {
38 | const { count, inc, dec } = useStore();
39 | return (
40 | <div>
41 | <button onClick={inc}>up</button>
42 | <span>{count}</span>
43 | <button onClick={dec}>down</button>
44 | </div>
45 | );
46 | };
47 | ```
48 |
49 | <br/>
50 |
51 | The main function is called `create`. It accepts a callback function, which accepts a `set` function that should be used when manipulating memory.
52 |
53 | The `create` then returns a hook, which is called `useStore`. You can use anywhere in app like so:
54 |
55 | ```tsx
56 | const { count, inc, dec } = useStore();
57 | ```
58 |
59 | Clicking on the buttons will update state and change count.
60 |
61 | <br/>
62 |
63 |
64 |
65 | :::note
66 |
67 | All required configurations will be handled automatically by CLI as long as you choose Recoil plugin during the project creation phase.
68 |
69 | :::
70 |
71 |
72 | ### Adding zustand to your project later
73 |
74 | If you didn't choose zustand plugin during project creation phase, you can follow the instructions below to add it.
75 |
76 |
77 | import Tabs from '@theme/Tabs';
78 | import TabItem from '@theme/TabItem';
79 |
80 | <Tabs
81 | defaultValue="npm"
82 | values={[
83 | {label: 'npm', value: 'npm'},
84 | {label: 'yarn', value: 'yarn'},
85 | ]}>
86 | <TabItem value="npm">
87 |
88 | ```bash
89 | npm install zustand
90 | ```
91 |
92 | </TabItem>
93 | <TabItem value="yarn">
94 |
95 | ```bash
96 | yarn add zustand
97 | ```
98 |
99 | </TabItem>
100 | </Tabs>
101 |
102 |
103 | Refer to official [documentation](https://github.com/pmndrs/zustand) for installation.
104 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/svgr.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: svgr
3 | title: SVGR
4 | sidebar_label: SVGR
5 | description: How to use svgr in Next.js?
6 | ---
7 |
8 | SVGR transforms SVG into ready to use components.
9 | [Refer to official documentation for detailed usage. →](https://react-svgr.com/docs/getting-started/)
10 |
11 | Run the following command to produce components from SVG's.
12 | ```js
13 | npm run svgr
14 | ```
15 |
16 |
17 |
18 | This will transform SVG's at `public/icons` to `.tsx` components, puts them in `src/components/icons` ignoring existing ones.
19 |
20 | :::caution
21 | After adding new SVG icons, you must run the following command again to produce components for newly added SVG's.
22 | ```js
23 | npm run svgr
24 | ````
25 |
26 | :::
27 | [Refer to official documentation for detailed usage. →](https://react-svgr.com/docs/options/)
28 |
29 | ### Adding SVGR to your project later
30 | :::tip
31 |
32 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose SVGR plugin during the project creation phase.
33 |
34 | :::
35 |
36 |
37 | If you didn't choose the SVGR plugin during project creation phase, you can follow the instructions below to add it.
38 |
39 | import Tabs from '@theme/Tabs';
40 | import TabItem from '@theme/TabItem';
41 |
42 | <Tabs
43 | defaultValue="npm"
44 | values={[
45 | {label: 'npm', value: 'npm'},
46 | {label: 'yarn', value: 'yarn'},
47 | ]}>
48 | <TabItem value="npm">
49 |
50 | ```
51 | npm install -D @svgr/cli
52 | ```
53 | </TabItem>
54 |
55 | <TabItem value="yarn">
56 |
57 | ```
58 | yarn add -D @svgr/cli
59 | ```
60 | </TabItem>
61 | </Tabs>
62 |
63 | Add command to scripts
64 | ```js title="package.json"
65 | {
66 | scripts: {
67 | "svgr": "npx @svgr/cli -d src/components/icons --ignore-existing --icon --typescript public/icons"
68 | }
69 | }
70 | ```
71 | Then run the following command
72 | ```js
73 | npm run svgr
74 | ```
75 | [Refer to official documentation for detailed usage →](https://react-svgr.com/docs/cli/)
76 |
--------------------------------------------------------------------------------
/documentation/docs/nextjs/tailwind.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: tailwind
3 | title: Tailwind CSS
4 | sidebar_label: Tailwind CSS
5 | description: How to use Tailwind CSS in Next.js?
6 | ---
7 |
8 | A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
9 | [Go to Docs →](https://tailwindcss.com/docs)
10 |
11 | ## Configuration files
12 |
13 | Tailwind plugin produces the two [necessary config files:](https://tailwindcss.com/docs/guides/nextjs#create-your-configuration-files) `tailwind.config.js` and `postcss.config.js`
14 | [See Tailwind configuration docs →](https://tailwindcss.com/docs/configuration)
15 |
16 | ## Include Tailwind in your CSS
17 |
18 | Tailwind is imported directly in `_app.tsx`
19 |
20 | ```js title="pages/_app.tsx"
21 | import "tailwindcss/tailwind.css";
22 | ```
23 | [You can also include tailwind in your custom css →](https://tailwindcss.com/docs/guides/nextjs#include-tailwind-in-your-css)
24 |
25 | ## Purging unused styles
26 |
27 | `tailwind.config.js` is configured to purge unused styles in pages and components.
28 |
29 | ```js title="tailwind.config.js"
30 | module.exports = {
31 | purge: ["./pages/**/*.tsx", "./src/**/*.tsx"]
32 | }
33 | ```
34 | [See guide on optimizing for production on Tailwind docs →](https://tailwindcss.com/docs/optimizing-for-production)
35 |
36 | ## Configuring PostCSS
37 |
38 | Finally, we need to create a `postcss.config.js` file to set up Tailwind with Next.js properly.
39 |
40 | ```js title="postcss.config.js"
41 | module.exports = {
42 | plugins: {
43 | tailwindcss: {},
44 | autoprefixer: {},
45 | },
46 | }
47 | ```
48 |
49 | ## Adding Tailwind CSS to your project later
50 |
51 | import Tabs from '@theme/Tabs';
52 | import TabItem from '@theme/TabItem';
53 |
54 | <Tabs
55 | defaultValue="npm"
56 | values={[
57 | {label: 'npm', value: 'npm'},
58 | {label: 'yarn', value: 'yarn'},
59 | ]}>
60 |
61 | <TabItem value="npm">
62 |
63 | ```
64 | npm install tailwindcss@latest postcss@latest autoprefixer@latest
65 | ```
66 | </TabItem>
67 |
68 | <TabItem value="yarn">
69 |
70 | ```
71 | yarn add tailwindcss@latest postcss@latest autoprefixer@latest
72 | ```
73 | </TabItem>
74 |
75 | </Tabs>
76 |
77 | [Refer to official documentation for detailed installation. →](https://tailwindcss.com/docs/installation)
--------------------------------------------------------------------------------
/documentation/docs/react/antd.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: antd
3 | title: Ant Design
4 | sidebar_label: Ant Design
5 | description: Setting up Ant design for Typescript Next.js apps
6 | ---
7 |
8 | A design system for enterprise-level products. Create an efficient and enjoyable work experience.
9 |
10 | Ant Design provides a React UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
11 | [Go to docs →](https://ant.design/docs/react/introduce)
12 |
13 | ### Less Support
14 |
15 | ### Less Support
16 | `antd` uses `less` as its preprocessor.
17 |
18 | :::caution
19 |
20 | Due to its incompatibility with `storybook`, `less` is not included in superplate.
21 |
22 | :::
23 |
24 | To use `less` with `antd` in your project
25 | - First we should modify `src/App.css` to `src/App.less`, then import less file instead.
26 |
27 | ```diff
28 | /* src/App.tsx */
29 | - import './App.css';
30 | + import './App.less';
31 | ```
32 |
33 | ```diff
34 | /* src/App.less */
35 | - @import '~antd/dist/antd.css';
36 | + @import '~antd/dist/antd.less';
37 | ```
38 |
39 | - Then install `craco-less` and modify `craco.config.js` like below.
40 |
41 | import Tabs from '@theme/Tabs';
42 | import TabItem from '@theme/TabItem';
43 |
44 | <Tabs
45 | defaultValue="npm"
46 | values={[
47 | {label: 'npm', value: 'npm'},
48 | {label: 'yarn', value: 'yarn'},
49 | ]}>
50 | <TabItem value="npm">
51 |
52 | ```bash
53 | npm install craco-less
54 | ```
55 | </TabItem>
56 | <TabItem value="yarn">
57 |
58 | ```bash
59 | yarn add craco-less
60 | ```
61 | </TabItem>
62 | </Tabs>
63 |
64 | ```ts title="craco.config.js"
65 | const CracoLessPlugin = require('craco-less');
66 |
67 | module.exports = {
68 | plugins: [
69 | {
70 | plugin: CracoLessPlugin,
71 | options: {
72 | lessLoaderOptions: {
73 | lessOptions: {
74 | modifyVars: { '@primary-color': '#1DA57A' },
75 | javascriptEnabled: true,
76 | },
77 | },
78 | },
79 | },
80 | ],
81 | };
82 | ```
83 |
--------------------------------------------------------------------------------
/documentation/docs/react/axios.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: axios
3 | title: Axios
4 | sidebar_label: Axios
5 | description: How to use axios in React?
6 | ---
7 |
8 | Promise based HTTP client for the browser and node.js
9 |
10 | - Make XMLHttpRequests from the browser
11 | - Make http requests from node.js
12 | - Supports the Promise API
13 | - Intercept request and response
14 | - Transform request and response data
15 | - Cancel requests
16 | - Automatic transforms for JSON data
17 | - Client side support for protecting against XSRF
18 |
19 | [Refer to official documentation for detailed usage. →](https://github.com/axios/axios)
20 |
21 | Performing a `GET` (or `POST`) request is as simple as calling the method on `axios`
22 |
23 | ```ts
24 | import axios from "axios";
25 |
26 | axios.get('/user?ID=12345')
27 | .then(function (response) {
28 | // handle success
29 | console.log(response);
30 | })
31 | .catch(function (error) {
32 | // handle error
33 | console.log(error);
34 | })
35 | .then(function () {
36 | // always executed
37 | });
38 | ```
39 | [More on GET example→](https://github.com/axios/axios#note-commonjs-usage)
40 |
41 | Requests can be made by passing the relevant config to axios.
42 |
43 | ```js
44 | axios({
45 | method: 'post',
46 | url: '/user/12345',
47 | data: {
48 | firstName: 'Fred',
49 | lastName: 'Flintstone'
50 | }
51 | });
52 | ```
53 | [More on POST example→](https://github.com/axios/axios#axios-api)
54 |
55 | ### Concurrency
56 | Please use `Promise.all` to handle concurrency
57 |
58 | ```js
59 | function getUserAccount() {
60 | return axios.get('/user/12345');
61 | }
62 |
63 | function getUserPermissions() {
64 | return axios.get('/user/12345/permissions');
65 | }
66 |
67 | Promise.all([getUserAccount(), getUserPermissions()])
68 | .then(function (results) {
69 | const acct = results[0];
70 | const perm = results[1];
71 | });
72 | ```
73 |
74 | :::caution
75 | Helper functions below for dealing with concurrent requests are deprecated
76 | ```js
77 | axios.all(iterable)
78 | axios.spread(callback)
79 | ```
80 | :::
81 |
82 | ### Creating an instance
83 | You can create a new instance of axios with a custom config.
84 |
85 | ```js
86 | import React, { useState, useEffect } from "react";
87 | import axios from "axios";
88 |
89 | const BASE_API_URL = "https://official-joke-api.appspot.com/";
90 | const API_URL = "/jokes/programming/random";
91 |
92 | const jokesApi = axios.create({
93 | baseURL: BASE_API_URL,
94 | });
95 |
96 | export const AxiosExample = () => {
97 | const [error, setError] = useState(null);
98 | const [isLoaded, setIsLoaded] = useState(false);
99 | const [data, setData] = useState([]);
100 |
101 | useEffect(() => {
102 | jokesApi({
103 | method: "get",
104 | url: API_URL,
105 | })
106 | .then(res => res.data)
107 | .then(res => {
108 | setData(res);
109 | setIsLoaded(true);
110 | },
111 | // Note: it's important to handle errors here
112 | // instead of a catch() block so that we don't swallow
113 | // exceptions from actual bugs in components.
114 | err => {
115 | setIsLoaded(true);
116 | setError(err);
117 | },
118 | );
119 | }, []);
120 | };
121 | ```
122 | [More on instance methods→](https://github.com/axios/axios#creating-an-instance)
123 |
124 |
125 | :::tip
126 |
127 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose axios as feature plugin during the project creation phase.
128 |
129 | :::
130 |
131 | :::tip
132 | Consider using `react-query` or `swr` plugins to handle client-side requests.
133 | They can be used with promise-based methods (fetch, axios..)
134 | :::
135 |
136 | ## Adding axios to your project later
137 |
138 | If you want to add axios to your existing project first install the dependencies
139 |
140 |
141 | import Tabs from '@theme/Tabs';
142 | import TabItem from '@theme/TabItem';
143 |
144 | <Tabs
145 | defaultValue="npm"
146 | values={[
147 | {label: 'npm', value: 'npm'},
148 | {label: 'yarn', value: 'yarn'},
149 | ]}>
150 | <TabItem value="npm">
151 |
152 | ```
153 | npm install axios
154 | ```
155 | </TabItem>
156 |
157 | <TabItem value="yarn">
158 |
159 | ```
160 | yarn add axios
161 | ```
162 | </TabItem>
163 | </Tabs>
164 |
165 |
166 |
--------------------------------------------------------------------------------
/documentation/docs/react/bootstrap.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: bootstrap
3 | title: Bootstrap
4 | sidebar_label: Bootstrap
5 | description: How to use Bootstrap with Create React App?
6 | ---
7 |
8 | Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
9 |
10 | ### React Bootstrap
11 |
12 | **superplate** uses `react-bootstrap` component library for bootstrap plugin. React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.
13 | [Refer to official documentation for detailed usage. →](https://react-bootstrap.github.io/getting-started/introduction)
14 |
15 | - Some stylesheet is required to use React Bootstrap components.
16 |
17 | ```ts title="src/App.tsx"
18 | import "bootstrap/dist/css/bootstrap.min.css";
19 | ```
20 |
21 | ### Using Components
22 |
23 | - Import from `react-bootstrap`
24 |
25 | ```ts
26 | import { Button } from 'react-bootstrap';
27 | ```
28 |
29 | - Or import individual components
30 |
31 | ```ts
32 | import Button from 'react-bootstrap/Button';
33 | ```
34 |
35 | - Customize components with props
36 |
37 | ```tsx title="src/components/main/index.tsx"
38 | <Button
39 | href="https://pankod.github.io/superplate/"
40 | target="_blank"
41 | variant="primary"
42 | size="lg">
43 | Docs
44 | </Button>
45 | ```
46 |
47 | - Bootstrap utility classes can also be used with components
48 | ```tsx title="src/components/cards/index.tsx"
49 | <Container className="my-5 flex-grow-1">
50 | ...
51 | </Container>
52 | ```
53 |
54 | ### Using Sass with Bootstrap
55 | :::tip
56 |
57 | If you also add `sass/scss` under CSS Preprocessors during creation phase, you can easily [customize Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass). Bootstrap’s source ***sass*** files are added under `src/styles` directory.
58 | [See Sass/SCSS doc →](scss.md)
59 |
60 | :::
61 |
62 | If `sass/scss` plugin is not selected, Sass can be added later to customize Bootstrap,
63 |
64 | - Add a custom scss file `app.scss` under `src/styles`
65 |
66 | ```ts title="src/styles/app.scss"
67 | @import "./_variables";
68 | @import "./_bootstrap";
69 | ```
70 |
71 | - Add scss files for overriding variables and Bootstrap source Sass file imports
72 |
73 | ```ts title="src/styles/_variables.scss"
74 | // Override Default Variables
75 | // https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults
76 |
77 | $primary: #6610f2;
78 | $secondary: #fd7e14;
79 | ```
80 |
81 | ```ts title="src/styles/_bootstrap.scss"
82 | // Option A: Include all of Bootstrap
83 |
84 | // @import "~bootstrap/scss/bootstrap";
85 |
86 | // Add custom code after this
87 |
88 | // Option B: Include parts of Bootstrap
89 |
90 | // Required
91 | @import "~bootstrap/scss/functions";
92 | @import "~bootstrap/scss/variables";
93 | @import "~bootstrap/scss/mixins";
94 |
95 | // Include custom variable default overrides here
96 |
97 | // Optional
98 | @import "~bootstrap/scss/reboot";
99 | @import "~bootstrap/scss/type";
100 | @import "~bootstrap/scss/images";
101 | @import "~bootstrap/scss/code";
102 | @import "~bootstrap/scss/grid";
103 | ```
104 |
105 | - import in `App.tsx`
106 |
107 | ```diff title="src/App.tsx"
108 | - import "bootstrap/dist/css/bootstrap.min.css";
109 | + import "src/styles/app.scss";
110 | ```
111 |
112 | - install sass
113 | ```ts
114 | npm install sass
115 | ```
116 |
117 | ### Adding Bootstrap to your project later
118 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
119 |
120 | - Install `react-bootstrap` and `bootstrap` packages
121 |
122 | import Tabs from '@theme/Tabs';
123 | import TabItem from '@theme/TabItem';
124 |
125 | <Tabs
126 | defaultValue="npm"
127 | values={[
128 | {label: 'npm', value: 'npm'},
129 | {label: 'yarn', value: 'yarn'},
130 | ]}>
131 | <TabItem value="npm">
132 |
133 | ```bash
134 | npm install react-bootstrap bootstrap
135 | ```
136 | </TabItem>
137 | <TabItem value="yarn">
138 |
139 | ```bash
140 | yarn add react-bootstrap bootstrap
141 | ```
142 | </TabItem>
143 | </Tabs>
144 |
145 | - [Follow instructions in React Bootstrap](#react-bootstrap)
146 |
147 | [Refer to official documentation on installation for detailed usage. →](https://react-bootstrap.github.io/getting-started/introduction#installation)
148 |
--------------------------------------------------------------------------------
/documentation/docs/react/bundle-analyzer.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: bundle-analyzer
3 | title: Bundle Analyzer
4 | sidebar_label: Bundle Analyzer
5 | description: How to use Bundle Analyzer in React?
6 | ---
7 |
8 | Bundle Analyzer visualizes size of output files with an interactive treemap. This helps you understand what’s taking the most space in the bundles.
9 |
10 | superplate serves optional plugin which adds [Source map explorer](https://github.com/danvk/source-map-explorer#readme) to the created project.
11 |
12 | Run the command below:
13 |
14 | ```
15 | npm run build
16 | npm run analyze
17 | ```
18 |
19 | This should open 2 pages in the browser. One for client bundles, and one for the server bundles.
20 |
21 | ### Adding Bundler Analyzer to your project later
22 | :::tip
23 |
24 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Bundle Analyzer plugin during the project creation phase.
25 |
26 | :::
27 |
28 |
29 | If you didn't choose the Bundle Analyzer plugin during project creation phase, you can follow the instructions below to add it.
30 |
31 | import Tabs from '@theme/Tabs';
32 | import TabItem from '@theme/TabItem';
33 |
34 | <Tabs
35 | defaultValue="npm"
36 | values={[
37 | {label: 'npm', value: 'npm'},
38 | {label: 'yarn', value: 'yarn'},
39 | ]}>
40 | <TabItem value="npm">
41 |
42 | ```
43 | npm install --save source-map-explorer
44 | ```
45 | </TabItem>
46 |
47 | <TabItem value="yarn">
48 |
49 | ```
50 | yarn add source-map-explorer
51 | ```
52 | </TabItem>
53 | </Tabs>
54 |
55 | Then in package.json, add the following line to scripts:
56 |
57 | ```diff
58 | "scripts": {
59 | + "analyze": "source-map-explorer 'build/static/js/*.js'",
60 | "start": "react-scripts start",
61 | "build": "react-scripts build",
62 | "test": "react-scripts test",
63 | ```
64 |
65 | Then in package.json, add the following line to scripts:
66 |
67 | ```
68 | npm run build
69 | npm run analyze
70 | ```
71 |
72 |
73 | [Refer to official documentation for detailed usage →](https://create-react-app.dev/docs/analyzing-the-bundle-size/)
74 |
--------------------------------------------------------------------------------
/documentation/docs/react/ci/travis.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: travis
3 | title: Travis CI
4 | sidebar_label: Travis CI
5 | description: Deploy React Apps using Travis CI
6 | ---
7 |
8 |
9 | As a continuous integration platform, Travis CI supports your development process by automatically building and testing code changes, providing immediate feedback on the success of the change.
10 | [Refer to official documentation for detailed usage. →](https://docs.travis-ci.com)
11 |
12 | The following YAML workflow file created into the `./travis.yml` as a default by superplate, if Travis CI selected as a CI plugin.
13 |
14 | ```bash title="travis.yml"
15 | language: node_js
16 | node_js:
17 | - "14"
18 | install:
19 | - npm ci
20 | - npm run test
21 | ```
22 | :::tip
23 | The following commands are added to `travis.yml` by superplate if any of plugins listed below is selected during project creation phase.
24 | :::
25 |
26 | :::note
27 | You can use the following commands in case of adding Travis CI to existing project later.
28 | :::
29 |
30 |
31 | import Tabs from '@theme/Tabs';
32 | import TabItem from '@theme/TabItem';
33 |
34 |
35 | ### Package manager
36 | ---
37 |
38 | <Tabs
39 | defaultValue="npm"
40 | values={[
41 | {label: 'npm', value: 'npm'},
42 | {label: 'yarn', value: 'yarn'},
43 | ]}>
44 | <TabItem value="npm">
45 |
46 | ```
47 | - npm ci
48 | ```
49 | </TabItem>
50 | <TabItem value="yarn">
51 |
52 | ```
53 | - yarn
54 | ```
55 | </TabItem>
56 | </Tabs>
57 |
58 | <br/>
59 |
60 |
61 | ### Install dependencies
62 | ---
63 |
64 | <Tabs
65 | defaultValue="npm"
66 | values={[
67 | {label: 'npm', value: 'npm'},
68 | {label: 'yarn', value: 'yarn'},
69 | ]}>
70 | <TabItem value="npm">
71 |
72 | ```
73 | - npm ci
74 | ```
75 | </TabItem>
76 | <TabItem value="yarn">
77 |
78 | ```
79 | - yarn
80 | ```
81 | </TabItem>
82 | </Tabs>
83 |
84 | <br/>
85 |
86 | ## Testing
87 | ---
88 |
89 |
90 | ### Run tests
91 | <Tabs
92 | defaultValue="npm"
93 | values={[
94 | {label: 'npm', value: 'npm'},
95 | {label: 'yarn', value: 'yarn'},
96 | ]}>
97 | <TabItem value="npm">
98 |
99 | ```
100 | - npm run test
101 | ```
102 | </TabItem>
103 | <TabItem value="yarn">
104 |
105 | ```
106 | - yarn test
107 | ```
108 | </TabItem>
109 | </Tabs>
110 |
111 | ### Run Cypress E2E Testing
112 | <Tabs
113 | defaultValue="npm"
114 | values={[
115 | {label: 'npm', value: 'npm'},
116 | {label: 'yarn', value: 'yarn'},
117 | ]}>
118 | <TabItem value="npm">
119 |
120 | ```
121 | - npm run cypress:test
122 | ```
123 | </TabItem>
124 | <TabItem value="yarn">
125 |
126 | ```
127 | - yarn cypress:test
128 | ```
129 | </TabItem>
130 | </Tabs>
131 |
132 |
133 | ### WebdriverIO E2E Testing
134 | <Tabs
135 | defaultValue="npm"
136 | values={[
137 | {label: 'npm', value: 'npm'},
138 | {label: 'yarn', value: 'yarn'},
139 | ]}>
140 | <TabItem value="npm">
141 |
142 | ```
143 | - npm run webdriver:run
144 | ```
145 | </TabItem>
146 | <TabItem value="yarn">
147 |
148 | ```
149 | - yarn webdriver:run
150 | ```
151 | </TabItem>
152 | </Tabs>
153 |
154 |
155 |
156 | :::tip
157 | We recommend using **[Meercode](https://meercode.io)**, if you are using Travis CI. **[Meercode](https://meercode.io)** is the monitoring dashboard for your CI/CD builds.
158 | :::
--------------------------------------------------------------------------------
/documentation/docs/react/css.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: css
3 | title: Built-in CSS Support
4 | sidebar_label: Built-in CSS
5 | description: How to use CSS in React?
6 | ---
7 |
8 | React allows you to import CSS files from a JavaScript file.
9 |
10 | For example, to add Global Stylesheet to boilerplate, we import following CSS file within `src/App.tsx`.
11 |
12 | ```css title="src/styles/global.css"
13 | hmtl,
14 | body {
15 | margin: 0;
16 | padding: 0;
17 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
18 | "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
19 | }
20 | ```
21 |
22 | Then, import the `styles.css` file.
23 |
24 | ```tsx title="src/App.tsx"
25 | import Home from "pages";
26 | import "styles/global.css";
27 |
28 | function App(): JSX.Element {
29 | return (
30 | <div className="App">
31 | <Home />
32 | </div>
33 | );
34 | }
35 |
36 | export default App;
37 | ```
38 |
39 | These styles will apply to all pages and components in your application.
40 |
41 | ### CSS Modules
42 |
43 |
44 | [CSS Modules](https://github.com/css-modules/css-modules) let you use the same CSS class name in different files without worrying about naming clashes.
45 |
46 | To style your components using CSS Modules, name your stylesheet files with the `[name].module.css`.
47 |
48 | For example, lets check out a reusable Header component implementation.
49 |
50 | ```css title="components/header/index.module.css"
51 | .header {
52 | background-color: #20232A;
53 | text-align: center;
54 | }
55 | ```
56 |
57 |
58 | ```tsx title="components/header"
59 | import React from "react";
60 | import styles from "./index.module.css";
61 | import { Logo } from "components";
62 |
63 | export const Header: React.FC = () => {
64 | return (
65 | <div className={styles.header}>
66 | <Logo />
67 | </div>
68 | );
69 | };
70 | ```
71 |
72 | <br/>
73 |
74 | :::note
75 |
76 | The class names which will be processed into a globally unique class name during build.
77 |
78 | :::
79 |
80 |
81 |
--------------------------------------------------------------------------------
/documentation/docs/react/docker.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: docker
3 | title: Docker
4 | sidebar_label: Docker
5 | description: How to use React with docker?
6 | ---
7 |
8 | Docker is an open source containerization platform. Docker enables developers to package applications into containers—standardized executable components that combine application source code with all the operating system (OS) libraries and dependencies required to run the code in any environment.
9 |
10 | [Refer to official documentation for detailed usage. →](https://docs.docker.com)
11 |
12 | Example Dockerfile:
13 |
14 | ```js title="Dockerfile"
15 | FROM node:12-alpine
16 |
17 | WORKDIR /opt/app
18 |
19 | ENV NODE_ENV production
20 |
21 | COPY package*.json ./
22 |
23 | RUN npm ci
24 |
25 | COPY . /opt/app
26 |
27 | RUN npm install --dev && npm run build
28 |
29 | CMD [ "npm", "start" ]
30 | ```
31 |
32 | :::note
33 |
34 | Dockerfile is created by superplate if you select docker plugin during the project creation phase.
35 |
36 | :::
37 |
--------------------------------------------------------------------------------
/documentation/docs/react/env.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: env
3 | title: Environment Variables(.env)
4 | sidebar_label: Enviroment Variables
5 | description: How to use env in React apps?
6 | ---
7 |
8 | Using Environment variables important to keep your private information secure. React comes with built-in support for environment variables.
9 |
10 |
11 |
12 | superplate has a plugin to generate those files for different environments automatically.
13 |
14 | ### .env.local
15 |
16 | React has built-in support for loading environment variables from `.env.local` into `process.env`.
17 |
18 |
19 | ```CSS title=".env.local"
20 | DB_HOST_URL=localhost
21 | DB_USER=user
22 | DB_PASS=password
23 | ```
24 |
25 |
26 | This loads `process.env.DB_HOST_URL`, `process.env.DB_USER`, and `process.env.DB_PASS` into the Node.js environment automatically.
27 |
28 | ```ts title="pages/index.tsx"
29 | export async function getServerSideProps() {
30 | const db = await myDB.connect({
31 | host: process.env.DB_HOST_URL,
32 | username: process.env.DB_USER,
33 | password: process.env.DB_PASS,
34 | })
35 | // ...
36 | }
37 | ```
38 |
39 |
40 | ### .env.development
41 |
42 | React allows us to set defaults in `.env` (all environments), `.env.development` (development environment) and .`env.production` (production environment).
43 |
44 |
45 | ```env title=".env.development"
46 | # DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
47 | # If you want to add secrets use `.env.development.local` instead.
48 |
49 | DEVELOPMENT_ENV_VARIABLE="server_only_development_variable"
50 | REACT_APP_DEVELOPMENT_ENV_VARIABLE="public_development_variable"
51 | ```
52 |
53 | :::important
54 |
55 | In order to expose a variable to the browser you have to prefix the variable with `REACT_APP_`.
56 |
57 | :::
58 |
59 | ### .env.production
60 |
61 | ```env title=".env.production"
62 | # DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
63 | # If you want to add secrets use `.env.production.local` instead.
64 |
65 | PRODUCTION_ENV_VARIABLE="server_only_production_variable"
66 | REACT_APP_PRODUCTION_ENV_VARIABLE="public_production_variable"
67 | ```
68 |
69 |
70 | ```tsx title="components/envExample.tsx"
71 | import React from "react";
72 | import styles from "./index.module.css";
73 |
74 | export const EnvExample: React.FC = () => {
75 | console.log(process.env.REACT_APP_ENV_VARIABLE);
76 | console.log(process.env.REACT_APP_DEVELOPMENT_ENV_VARIABLE);
77 | console.log(process.env.REACT_APP_PRODUCTION_ENV_VARIABLE);
78 | };
79 | ```
80 |
81 | ### .env.test
82 |
83 | In the same way you can set defaults for development or production environments, you can do the same with `.env.test` file for testing environment
84 |
85 |
86 | ```env title=".env.test"
87 | # USE THIS FILE IF YOU WANT TO DEFINE VARIABLES SPECIFIC TO TEST ENVIRONMENT
88 |
89 | ENV_TEST_VARIABLE="test_variable"
90 | ```
91 |
92 | :::tip
93 |
94 | `.env.test` is useful when running tests with tools like jest or cypress where you need to set specific environment variables only for testing.
95 | :::
96 |
97 |
98 | [Refer to official documentation for detailed usage →](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables)
--------------------------------------------------------------------------------
/documentation/docs/react/fetch.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: fetch
3 | title: Fetch
4 | sidebar_label: Fetch
5 | description: How to use fetch data in React?
6 | ---
7 |
8 | The Fetch API provides an interface for fetching resources (including across the network)
9 | [See MDN Docs →](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
10 |
11 |
12 | ### Using on Client-side
13 |
14 | ```tsx title="In your component"
15 | export const FetchExample = () => {
16 | const [error, setError] = useState(null);
17 | const [isLoaded, setIsLoaded] = useState(false);
18 | const [data, setData] = useState([]);
19 |
20 | useEffect(() => {
21 | fetch(API_URL)
22 | .then(res => res.json())
23 | .then(
24 | res => {
25 | setData(res);
26 | setIsLoaded(true);
27 | },
28 | // Note: it's important to handle errors here
29 | // instead of a catch() block so that we don't swallow
30 | // exceptions from actual bugs in components.
31 | err => {
32 | setIsLoaded(true);
33 | setError(err);
34 | },
35 | );
36 | }, []);
37 | }
38 | ```
39 |
40 | :::tip
41 | Consider using `react-query` or `swr` plugins to handle client-side requests.
42 | They can be used with promise-based methods (fetch, axios..)
43 | :::
--------------------------------------------------------------------------------
/documentation/docs/react/hooks/react-query.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: react-query
3 | title: React Query
4 | sidebar_label: React Query
5 | description: React Query with server side rendering using React
6 | ---
7 |
8 | Provides performant and powerful data synchronization for React.
9 |
10 | React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
11 |
12 | [Refer to official documentation for detailed usage. →](https://react-query.tanstack.com/)
13 |
14 | :::tip
15 |
16 | All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.
17 |
18 | :::
19 |
20 | ```tsx title="src/App.tsx"
21 | import { QueryClient, QueryClientProvider } from "react-query";
22 |
23 | import Home from "pages";
24 |
25 | function App(): JSX.Element {
26 | const queryClient = new QueryClient();
27 | return (
28 | <QueryClientProvider client={queryClient}>
29 | <div className="App">
30 | <Home />
31 | </div>
32 | </QueryClientProvider>
33 | );
34 | }
35 |
36 | export default App;
37 | ```
38 | :::caution
39 |
40 | If you didn't choose the plugin during project creation phase, you must update your `src/App.tsx` file as above after [installing required package](#adding-react-query-to-your-project-later) to add it.
41 |
42 | :::
43 |
44 | #### Example usage `useQuery`:
45 |
46 | ```tsx title="components/reactQueryExample/index.tsx"
47 | import { useQuery } from "react-query";
48 |
49 | const API_URL = "https://official-joke-api.appspot.com/jokes/programming/random";
50 |
51 | export const ReactQueryExample = () => {
52 |
53 | const { data } = useQuery("random-programming-joke", () =>
54 | fetch(
55 | API_URL
56 | ).then(res => res.json())
57 | );
58 | };
59 | ```
60 |
61 |
62 | ## Adding react-query to your project later
63 |
64 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
65 |
66 | - Install `react-query` package.
67 |
68 | import Tabs from '@theme/Tabs';
69 | import TabItem from '@theme/TabItem';
70 |
71 | <Tabs
72 | defaultValue="npm"
73 | values={[
74 | {label: 'npm', value: 'npm'},
75 | {label: 'yarn', value: 'yarn'},
76 | ]}>
77 | <TabItem value="npm">
78 |
79 | ```bash
80 | npm install react-query
81 | ```
82 |
83 | </TabItem>
84 | <TabItem value="yarn">
85 |
86 | ```bash
87 | yarn add react-query
88 | ```
89 |
90 | </TabItem>
91 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/react/hooks/react-use.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: react-use
3 | title: React Use
4 | sidebar_label: React Use
5 | description: How to use react hooks with Create React App?
6 | ---
7 |
8 | react-use has various hooks that you can use with ease.
9 |
10 | Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
11 |
12 | [Refer to official documentation for detailed usage. →](https://github.com/streamich/react-use)
13 |
14 | ### react-use
15 |
16 | In this example, we'll use `useWindowSize` and `usePrevious` hooks in order to tracks `Window` dimensions and get the previous state with ease.
17 |
18 | ```tsx
19 | import React from "react";
20 | // highlight-next-line
21 | import { usePrevious, useWindowSize } from "react-use";
22 |
23 | export const ReactUseExample = () => {
24 | const [count, setCount] = React.useState(0);
25 | // highlight-start
26 | const prevCount = usePrevious(count);
27 | const { width, height } = useWindowSize();
28 | // highlight-end
29 |
30 | return (
31 | <div>
32 | <div>
33 | <p>usePrevious</p>
34 | <p>
35 | Now: {count}, before: {prevCount}
36 | </p>
37 | <p>
38 | <button onClick={() => setCount(count + 1)}>
39 | Increment
40 | </button>
41 | <button onClick={() => setCount(count - 1)}>
42 | Decrement
43 | </button>
44 | </p>
45 | </div>
46 | <div>
47 | <p>useWindowSize</p>
48 | <p>
49 | width: {`${width}px`}, height: {`${height}px`}
50 | </p>
51 | </div>
52 | </div>
53 | );
54 | };
55 | ```
56 |
57 |
58 | ## Adding react-use to your project later
59 |
60 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
61 |
62 | - Install `react-use` package.
63 |
64 | import Tabs from '@theme/Tabs';
65 | import TabItem from '@theme/TabItem';
66 |
67 | <Tabs
68 | defaultValue="npm"
69 | values={[
70 | {label: 'npm', value: 'npm'},
71 | {label: 'yarn', value: 'yarn'},
72 | ]}>
73 | <TabItem value="npm">
74 |
75 | ```bash
76 | npm install react-use
77 | ```
78 |
79 | </TabItem>
80 | <TabItem value="yarn">
81 |
82 | ```bash
83 | yarn add react-use
84 | ```
85 |
86 | </TabItem>
87 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/react/hooks/swr.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: swr
3 | title: SWR
4 | sidebar_label: SWR
5 | description: Data fetching in React — How to use SWR
6 | ---
7 |
8 | React Hooks library for data fetching.
9 |
10 | The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by [HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
11 |
12 | With SWR, components will get a stream of data updates constantly and automatically.
13 | And the UI will be always fast and reactive.
14 | [Refer to official documentation for detailed usage. →](https://swr.vercel.app/)
15 |
16 |
17 | ### useSWR
18 |
19 | Pass an API key and start using it inside any function components:
20 |
21 | ```jsx
22 | import useSWR from 'swr';
23 |
24 | const fetcher = url => fetch(url).then(r => r.json());
25 |
26 | function Profile () {
27 | const { data, error } = useSWR('/api/user/123', fetcher);
28 |
29 | if (error) return <div>failed to load</div>
30 |
31 | if (!data) return <div>loading...</div>
32 |
33 | // render data
34 | return <div>hello {data.name}!</div>
35 | }
36 | ```
37 |
38 | `fetcher` is an async function that accepts the key of SWR, and returns the data. You can use any library to handle data fetching.
39 |
40 | ```tsx
41 | import axios from 'axios';
42 |
43 | const fetcher = url => axios.get(url).then(res => res.data);
44 | ```
45 |
46 | [Refer to official documentation on data fetching for detailed usage. →](https://swr.vercel.app/docs/data-fetching)
47 |
48 | ### Mutation
49 |
50 | `useSWR` also returns a `mutate` method that is pre-bound to SWR's key
51 |
52 | ```jsx
53 | import useSWR from 'swr';
54 |
55 | function Profile () {
56 | const { data, mutate } = useSWR('/api/user', fetcher);
57 | return (
58 | <div>
59 | <h1>My name is {data.name}.</h1>
60 | <button onClick={async () => {
61 | const newName = data.name.toUpperCase();
62 | // send a request to the API to update the data
63 | await requestUpdateUsername(newName);
64 | // update the local data immediately and revalidate (refetch)
65 | // NOTE: key is not required when using useSWR's mutate as it's pre-bound
66 | mutate({ ...data, name: newName });
67 | }}>Uppercase my name!</button>
68 | </div>
69 | )
70 | }
71 | ```
72 |
73 | `mutate` can also be imported directly form `swr`
74 |
75 | ```jsx
76 | import useSWR, { mutate } from 'swr';
77 |
78 | function App () {
79 | return (
80 | <div>
81 | <Profile />
82 | <button onClick={() => {
83 | // set the cookie as expired
84 | document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
85 | // tell all SWRs with this key to revalidate
86 | mutate('/api/user');
87 | }}>
88 | Logout
89 | </button>
90 | </div>
91 | )
92 | }
93 | ```
94 |
95 | [Refer to official documentation on mutation for detailed usage. →](https://swr.vercel.app/docs/mutation)
96 |
97 |
98 | ## Adding SWR to your project later
99 |
100 | If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
101 |
102 | - Install `swr` package.
103 |
104 | import Tabs from '@theme/Tabs';
105 | import TabItem from '@theme/TabItem';
106 |
107 | <Tabs
108 | defaultValue="npm"
109 | values={[
110 | {label: 'npm', value: 'npm'},
111 | {label: 'yarn', value: 'yarn'},
112 | ]}>
113 | <TabItem value="npm">
114 |
115 | ```bash
116 | npm install swr
117 | ```
118 |
119 | </TabItem>
120 | <TabItem value="yarn">
121 |
122 | ```bash
123 | yarn add swr
124 | ```
125 |
126 | </TabItem>
127 | </Tabs>
--------------------------------------------------------------------------------
/documentation/docs/react/linter/eslint.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: eslint
3 | title: ESLint
4 | sidebar_label: ESLint
5 | description: Using ESLint in a TypeScript Create React App Project
6 | ---
7 |
8 | Use ESLint to find and fix problems in your codebase.
9 | ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
10 |
11 | Create React App comes with ESLint. [Refer to official documentation for detailed usage. →](https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config)
12 |
13 |
14 |
--------------------------------------------------------------------------------
/documentation/docs/react/linter/lint-staged.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: lint-staged
3 | title: lint-staged
4 | sidebar_label: lint-staged
5 | description: Setting up linter for Create React App
6 | ---
7 |
8 | Use lint-staged to make your code uniform. It allows you to run arbitrary scripts against currently staged files.
9 |
10 | [Refer to official documentation for detailed usage. →](https://create-react-app.dev/docs/setting-up-your-editor/#formatting-code-automatically)
11 |
12 | ## Adding lint-staged to your project later
13 |
14 | import Tabs from '@theme/Tabs';
15 | import TabItem from '@theme/TabItem';
16 |
17 | <Tabs
18 | defaultValue="npm"
19 | values={[
20 | {label: 'npm', value: 'npm'},
21 | {label: 'yarn', value: 'yarn'},
22 | ]}>
23 | <TabItem value="npm">
24 |
25 | ```
26 | npm install --save husky lint-staged prettier
27 | ```
28 | </TabItem>
29 | <TabItem value="yarn">
30 |
31 | ```
32 | yarn add husky lint-staged prettier
33 | ```
34 | </TabItem>
35 | </Tabs>
36 |
37 | - Add the following field to the package.json section:
38 |
39 | ```json title="package.json"
40 | "dependencies": {
41 | // ...
42 | },
43 | //highlight-start
44 | "husky": {
45 | "hooks": {
46 | "pre-commit": "lint-staged"
47 | }
48 | },
49 | "lint-staged": {
50 | "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
51 | "prettier --write"
52 | ]
53 | },
54 | //highlight-end
55 | ```
--------------------------------------------------------------------------------
/documentation/docs/react/reverse-proxy.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: reverse-proxy
3 | title: Reverse Proxy
4 | sidebar_label: Reverse Proxy
5 | description: How to use Reverse Proxy in React apps?
6 | ---
7 |
8 | A proxy server sits between or intermediary server that forwards requests for content from multiple clients to different servers across the Internet. A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server.
9 |
10 | A reverse proxy provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers.
11 |
12 | You can define the paths you want to implement reverse proxy in `next.config.js`
13 |
14 | ```ts title="next.config.js"
15 | const withPlugins = require("next-compose-plugins");
16 |
17 | const config = {
18 | devServer: {
19 | proxy: {
20 | "/api": "http://localhost:3000",
21 | },
22 | },
23 | };
24 |
25 | module.exports = withPlugins([], config);
26 | ```
--------------------------------------------------------------------------------
/documentation/docs/react/scss.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: scss
3 | title: Sass/SCSS
4 | sidebar_label: Sass/SCSS
5 | description: How to use Sass in Create React App?
6 | ---
7 |
8 | Sass is a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.
9 |
10 | Create React App allows you to import Sass using both the `.scss` and `.sass` extensions. You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
11 |
12 | To style your components using CSS Modules, name your stylesheet files with the `[name].module.scss`.
13 |
14 |
15 | ```css title="components/header/index.module.scss"
16 | .header {
17 | background-color: #20232A;
18 |
19 | title {
20 | color: #96CBEF;
21 | }
22 |
23 | &:hover {
24 | background-color: #2C3946;
25 | }
26 | }
27 | ```
28 |
29 |
30 |
31 | ```jsx title="components/header/index.tsx"
32 | import React from "react";
33 |
34 | import styles from "./index.module.scss";
35 |
36 | export const Header: React.FC = () => {
37 | return (
38 | <div className={styles.header}>
39 | <title>Title<title>
40 | </div>
41 | );
42 | };
43 | ```
44 |
45 | <br/>
46 |
47 | ## Adding Tailwind CSS to your project later
48 |
49 | import Tabs from '@theme/Tabs';
50 | import TabItem from '@theme/TabItem';
51 |
52 | <Tabs
53 | defaultValue="npm"
54 | values={[
55 | {label: 'npm', value: 'npm'},
56 | {label: 'yarn', value: 'yarn'},
57 | ]}>
58 |
59 | <TabItem value="npm">
60 |
61 | ```
62 | npm install sass
63 | ```
64 | </TabItem>
65 |
66 | <TabItem value="yarn">
67 |
68 | ```
69 | yarn add sass
70 | ```
71 |
72 |
73 | </TabItem>
74 |
75 | </Tabs>
76 |
77 | :::tip
78 |
79 | You can [customize Bootstrap](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass) if UI framework chosen as Bootstrap along with Sass during creation phase.
80 | Bootstrap’s source Sass files added to under `src/styles` folder directory.
81 |
82 | :::
83 |
84 |
85 |
--------------------------------------------------------------------------------
/documentation/docs/react/state-management/recoil.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: recoil
3 | title: Recoil.js
4 | sidebar_label: Recoil.js
5 | description: How to Use Recoil.js in React?
6 | ---
7 |
8 | Recoil.js is a state management library, open-sourced by Facebook. It's offering a simple and powerful way of dealing with global, asynchronous and derived state.
9 |
10 | We'll show basic usage of Recoil API with simple counter example.
11 | [Refer to official documentation for detailed usage. →](https://recoiljs.org/docs/introduction/motivation)
12 |
13 | We need to wrap our code with RecoilRoot in root component.
14 |
15 | ``` tsx title="src/App.tsx"
16 | import React from "react";
17 | import { RecoilRoot } from "recoil";
18 |
19 | import Home from "pages";
20 |
21 | function App(): JSX.Element {
22 | return (
23 | <RecoilRoot>
24 | <div className="App">
25 | <Home />
26 | </div>
27 | </RecoilRoot>
28 | );
29 | }
30 |
31 | export default App;
32 | ```
33 |
34 | An `atom` is simply a unit of state that component can subscribe. By updating the value, each subscribed component is re-rendered with the new value.
35 |
36 | ```tsx title="recoil/atoms/index.ts"
37 | import { atom } from "recoil";
38 |
39 | enum Atoms {
40 | Counter = "Counter",
41 | }
42 |
43 | export const counter = atom({
44 | key: Atoms.Counter,
45 | default: 0,
46 | });
47 | ```
48 |
49 | To read and write an atom from a component, we use a hook called `useRecoilState`.
50 |
51 | ```tsx title="components/RecoilExample/index.tsx"
52 | import { useRecoilState } from "recoil";
53 | import { counter } from "recoil/atoms/index.ts";
54 |
55 | const useCounter: () => [
56 | number,
57 | { increase: () => void; decrease: () => void }
58 | ] = () => {
59 | // highlight-next-line
60 | const [count, setCount] = useRecoilState(counter);
61 |
62 | const increase = () => {
63 | setCount((current) => current + 1);
64 | };
65 |
66 | const decrease = () => {
67 | setCount((current) => current - 1);
68 | };
69 |
70 | return [count, { increase, decrease }];
71 | };
72 |
73 | export const RecoilExample: React.FC = () => {
74 | // highlight-next-line
75 | const [count, { increase, decrease }] = useCounter();
76 |
77 | return (
78 | <>
79 | <h2>Recoil Counter</h2>
80 | <div>
81 | <button onClick={increase}> + </button>
82 | <span>{count}</span>
83 | <button onClick={decrease}> - </button>
84 | </div>
85 | </>
86 | );
87 | };
88 | ```
89 | Clicking on the buttons will update state and change count. It's that simple.
90 |
91 | <br/>
92 |
93 | :::tip
94 |
95 | We recommend watching [Dave McCabe's presentation about Recoil](https://www.youtube.com/watch?v=_ISAA_Jt9kI&feature=youtu.be&ab_channel=ReactEurope) to understand the logic behind the Recoil.
96 |
97 | :::
98 |
99 | :::note
100 |
101 | All required configurations will be handled automatically by CLI as long as you choose Recoil plugin during the project creation phase.
102 |
103 | :::
104 |
105 |
106 | ### Adding Recoil to your project later
107 |
108 | If you didn't choose Recoil plugin during project creation phase, you can follow the instructions below to add it.
109 |
110 |
111 | import Tabs from '@theme/Tabs';
112 | import TabItem from '@theme/TabItem';
113 |
114 | <Tabs
115 | defaultValue="npm"
116 | values={[
117 | {label: 'npm', value: 'npm'},
118 | {label: 'yarn', value: 'yarn'},
119 | ]}>
120 | <TabItem value="npm">
121 |
122 | ```bash
123 | npm install recoil
124 | ```
125 |
126 | </TabItem>
127 | <TabItem value="yarn">
128 |
129 | ```bash
130 | yarn add recoil
131 | ```
132 |
133 | </TabItem>
134 | </Tabs>
135 |
136 |
137 | Refer to official [documentation](https://recoiljs.org/docs/introduction/installation) for installation.
138 |
--------------------------------------------------------------------------------
/documentation/docs/react/state-management/zustand.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: zustand
3 | title: Zustand
4 | sidebar_label: Zustand
5 | description: How to Use zustand in Next.js?
6 | ---
7 |
8 | ### Overview
9 |
10 | Zustand is one of the lightest state management libraries.
11 |
12 | It's a small, fast, scalable state-management solution using simplified flux principles and has an api based on hooks.
13 |
14 | We'll show basic usage of zustand with simple counter example.
15 | [Refer to official documentation for detailed usage. →](https://github.com/pmndrs/zustand)
16 |
17 | ### Usage
18 |
19 | Zustand is known for its simplicity.
20 | We don't need to wrap our root code or add any complex setup.
21 |
22 | ``` jsx title="components/ZustandExample/index.tsx"
23 | import create from "zustand";
24 |
25 | interface Counter {
26 | count: number;
27 | inc: () => void;
28 | dec: () => void;
29 | }
30 |
31 | export const useStore = create<Counter>((set) => ({
32 | count: 1,
33 | inc: () => set((state) => ({ count: state.count + 1 })),
34 | dec: () => set((state) => ({ count: state.count - 1 })),
35 | }));
36 |
37 | export const ZustandExample = () => {
38 | const { count, inc, dec } = useStore();
39 | return (
40 | <div>
41 | <button onClick={inc}>up</button>
42 | <span>{count}</span>
43 | <button onClick={dec}>down</button>
44 | </div>
45 | );
46 | };
47 | ```
48 |
49 | <br/>
50 |
51 | The main function is called `create`. It accepts a callback function, which accepts a `set` function that should be used when manipulating memory.
52 |
53 | The `create` then returns a hook, which is called `useStore`. You can use anywhere in app like so:
54 |
55 | ```tsx
56 | const { count, inc, dec } = useStore();
57 | ```
58 |
59 | Clicking on the buttons will update state and change count.
60 |
61 | <br/>
62 |
63 |
64 |
65 | :::note
66 |
67 | All required configurations will be handled automatically by CLI as long as you choose Recoil plugin during the project creation phase.
68 |
69 | :::
70 |
71 |
72 | ### Adding zustand to your project later
73 |
74 | If you didn't choose zustand plugin during project creation phase, you can follow the instructions below to add it.
75 |
76 |
77 | import Tabs from '@theme/Tabs';
78 | import TabItem from '@theme/TabItem';
79 |
80 | <Tabs
81 | defaultValue="npm"
82 | values={[
83 | {label: 'npm', value: 'npm'},
84 | {label: 'yarn', value: 'yarn'},
85 | ]}>
86 | <TabItem value="npm">
87 |
88 | ```bash
89 | npm install zustand
90 | ```
91 |
92 | </TabItem>
93 | <TabItem value="yarn">
94 |
95 | ```bash
96 | yarn add zustand
97 | ```
98 |
99 | </TabItem>
100 | </Tabs>
101 |
102 |
103 | Refer to official [documentation](https://github.com/pmndrs/zustand) for installation.
104 |
--------------------------------------------------------------------------------
/documentation/docs/react/svgr.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: svgr
3 | title: SVGR
4 | sidebar_label: SVGR
5 | description: How to use svgr in React?
6 | ---
7 |
8 | SVGR transforms SVG into ready to use components.
9 | [Refer to official documentation for detailed usage. →](https://react-svgr.com/docs/getting-started/)
10 |
11 | Run the following command to produce components from SVG's.
12 | ```ts
13 | npm run svgr
14 | ```
15 |
16 |
17 |
18 | This will transform SVG's at `public/icons` to `.tsx` components, puts them in `src/components/icons` ignoring existing ones.
19 |
20 | :::caution
21 | After adding new SVG icons, you must run the following command again to produce components for newly added SVG's.
22 | ```ts
23 | npm run svgr
24 | ````
25 |
26 | :::
27 | [Refer to official documentation for detailed usage. →](https://react-svgr.com/docs/options/)
28 |
29 | ### Adding SVGR to your project later
30 | :::tip
31 |
32 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose SVGR plugin during the project creation phase.
33 |
34 | :::
35 |
36 |
37 | If you didn't choose the SVGR plugin during project creation phase, you can follow the instructions below to add it.
38 |
39 | import Tabs from '@theme/Tabs';
40 | import TabItem from '@theme/TabItem';
41 |
42 | <Tabs
43 | defaultValue="npm"
44 | values={[
45 | {label: 'npm', value: 'npm'},
46 | {label: 'yarn', value: 'yarn'},
47 | ]}>
48 | <TabItem value="npm">
49 |
50 | ```
51 | npm install -D @svgr/cli
52 | ```
53 | </TabItem>
54 |
55 | <TabItem value="yarn">
56 |
57 | ```
58 | yarn add -D @svgr/cli
59 | ```
60 | </TabItem>
61 | </Tabs>
62 |
63 | Add command to scripts
64 | ```ts title="package.json"
65 | {
66 | scripts: {
67 | "svgr": "npx @svgr/cli -d src/components/icons --ignore-existing --icon --typescript public/icons"
68 | }
69 | }
70 | ```
71 | Then run the following command
72 | ```ts
73 | npm run svgr
74 | ```
75 | [Refer to official documentation for detailed usage →](https://react-svgr.com/docs/cli/)
76 |
--------------------------------------------------------------------------------
/documentation/docs/react/tailwind.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: tailwind
3 | title: Tailwind CSS
4 | sidebar_label: Tailwind CSS
5 | description: How to use Tailwind CSS in Next.js?
6 | ---
7 |
8 | A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
9 | [Go to Docs →](https://tailwindcss.com/docs)
10 |
11 | ## Configuration files
12 |
13 | Tailwind plugin produces the two [necessary config files:](https://tailwindcss.com/docs/guides/create-react-app#create-your-configuration-file) `tailwind.config.js` and `craco.config.js`
14 | [See Tailwind configuration docs →](https://tailwindcss.com/docs/configuration)
15 |
16 | ## Include Tailwind in your CSS
17 |
18 | Tailwind is imported directly in `App.tsx`
19 |
20 | ```ts title="src/App.tsx"
21 | import "tailwindcss/tailwind.css";
22 | ```
23 | [You can also include tailwind in your custom css →](https://tailwindcss.com/docs/guides/create-react-app#include-tailwind-in-your-css)
24 |
25 | ## Purging unused styles
26 |
27 | `tailwind.config.js` is configured to purge unused styles in pages and components.
28 |
29 | ```ts title="tailwind.config.js"
30 | module.exports = {
31 | purge: ["./src/**/*.tsx"]
32 | }
33 | ```
34 | [See guide on optimizing for production on Tailwind docs →](https://tailwindcss.com/docs/optimizing-for-production)
35 |
36 | ## Configuring PostCSS
37 |
38 | Since Create React App doesn't let you override the PostCSS configuration natively. We need to create a `craco.config.js` file to set up Tailwind with React properly.
39 |
40 | ```ts title="craco.config.js"
41 | module.exports = {
42 | style: {
43 | postcss: {
44 | plugins: [
45 | require('tailwindcss'),
46 | require('autoprefixer'),
47 | ],
48 | },
49 | },
50 | }
51 | ```
52 |
53 | ## Adding Tailwind CSS to your project later
54 |
55 | import Tabs from '@theme/Tabs';
56 | import TabItem from '@theme/TabItem';
57 |
58 | <Tabs
59 | defaultValue="npm"
60 | values={[
61 | {label: 'npm', value: 'npm'},
62 | {label: 'yarn', value: 'yarn'},
63 | ]}>
64 |
65 | <TabItem value="npm">
66 |
67 | ```
68 | npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
69 | ```
70 | ```
71 | npm install @craco/craco
72 | ```
73 | </TabItem>
74 |
75 | <TabItem value="yarn">
76 |
77 | ```
78 | yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
79 | ```
80 | ```
81 | yarn add @craco/craco
82 | ```
83 | </TabItem>
84 |
85 | </Tabs>
86 |
87 | ```diff title="package.json" {7-9}
88 | {
89 | // ...
90 | "scripts": {
91 | - "start": "react-scripts start",
92 | - "build": "react-scripts build",
93 | - "test": "react-scripts test",
94 | + "start": "craco start",
95 | + "build": "craco build",
96 | + "test": "craco test",
97 | },
98 | }
99 | ```
100 |
101 | [Refer to official documentation for detailed installation. →](https://tailwindcss.com/docs/installation)
--------------------------------------------------------------------------------
/documentation/docs/react/testing/jest.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: jest
3 | title: Jest
4 | sidebar_label: Jest
5 | description: Setting up Jest for Typescript Create React App
6 | ---
7 |
8 | [Jest](https://jestjs.io/docs/en/getting-started) is a delightful JavaScript Testing Framework with a focus on simplicity.
9 |
10 | **superplate** serving optional Jest testing plugin which uses `ts-jest` under the hood and comes with `nock` and `isomorphic-unfetch`.
11 |
12 | - `ts-jest` is a TypeScript preprocessor for Jest to test projects written in TypeScript.
13 | [Refer to official documentation for detailed usage. →](https://kulshekhar.github.io/ts-jest/)
14 | - `nock` is a HTTP server mocking library. We use it to mock requests in our tests.
15 | [Refer to official documentation for detailed usage. →](https://github.com/nock/nock#nock)
16 | - While Next.js comes with a built-in polyfill for `fetch`; We still need to add one for our Jest environment.
17 |
18 | ## Implementation
19 |
20 | You can see how **superplate**'s Jest plugin is implemented below.
21 |
22 |
23 | ### `jest.config.js`
24 |
25 | We need to configure Jest to work with our environment. We'll be doing this in `test/jest.config.js` with the following code;
26 |
27 | ```tsx title="test/jest.config.js"
28 | const { pathsToModuleNameMapper } = require("ts-jest/utils");
29 | const { compilerOptions } = require("../tsconfig.json");
30 |
31 | const paths = compilerOptions.paths ? compilerOptions.paths : {};
32 |
33 | module.exports = {
34 | rootDir: "../",
35 | setupFilesAfterEnv: ["<rootDir>/test/jest.setup.js"],
36 | testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
37 | moduleNameMapper: {
38 | ...pathsToModuleNameMapper(paths, { prefix: "<rootDir>/" }),
39 | "\\.(scss|sass|css)quot;: "identity-obj-proxy",
40 | },
41 | };
42 | ```
43 | What we basically do is;
44 |
45 | - Specifying a root directory for tests
46 | - Path to our Setup configuration for the testing environment
47 | - Mapping our `tsconfig` paths to jest
48 | - Mocking styles to prevent Jest to throw an error
49 |
50 | ### `jest.setup.js`
51 |
52 | We need to apply the polyfill for the `fetch`, set environment variables to use in tests and setup `nock` to prevent memory leaks. We'll place this setup in `test/jest.setup.js` with the following code;
53 |
54 | ```tsx title="test/jest.setup.js"
55 | import "isomorphic-unfetch";
56 | import nock from "nock";
57 | import dotenv from "dotenv";
58 |
59 | dotenv.config({ path: ".env.test" });
60 |
61 | afterAll(() => {
62 | nock.cleanAll();
63 | nock.restore();
64 | });
65 | ```
66 |
67 | ### Running Tests
68 |
69 | We need to specify our config file when running jest, we can do this with `jest -c test/jest.config.js`. We will add this command to `package.json` as a test script.
70 |
71 | ```json title="package.json"
72 | {
73 | "scripts": {
74 | "test": "jest -c test/jest.config.js"
75 | },
76 | }
77 | ```
78 |
79 | ### Example Test
80 |
81 | ```ts title="add.ts"
82 | // This is an example function to test
83 | export const const add = (...nums: number[]) => {
84 | return nums.reduce((acc, curr) => acc + curr, 0);
85 | }
86 | ```
87 |
88 | ```ts title="add.spec.ts"
89 | import { add } from "./add";
90 |
91 | describe("Add Function", () => {
92 | it("1 + 2 + 3 = 6", () => {
93 | expect(add(1,2,3)).toEqual(6);
94 | });
95 | });
96 | ```
97 |
98 | ## Adding Jest to your project later
99 |
100 | :::tip
101 |
102 | All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Jest as testing plugin during the project creation phase.
103 |
104 | :::
105 |
106 | If you want to add Jest to your existing project first install dependencies:
107 |
108 |
109 | import Tabs from '@theme/Tabs';
110 | import TabItem from '@theme/TabItem';
111 |
112 | <Tabs
113 | defaultValue="npm"
114 | values={[
115 | {label: 'npm', value: 'npm'},
116 | {label: 'yarn', value: 'yarn'},
117 | ]}>
118 | <TabItem value="npm">
119 |
120 | ```
121 | npm i -D jest ts-jest identity-obj-proxy nock isomorphic-unfetch dotenv
122 | ```
123 | </TabItem>
124 |
125 | <TabItem value="yarn">
126 |
127 | ```
128 | yarn add -D jest ts-jest identity-obj-proxy nock isomorphic-unfetch dotenv
129 | ```
130 | </TabItem>
131 | </Tabs>
132 |
133 | Then you can follow documentations for detail usage
134 |
135 | - Jest's [documentation](https://jestjs.io/docs/en/getting-started)
136 | - ts-jest's [documentation](https://kulshekhar.github.io/ts-jest/docs/installation)
--------------------------------------------------------------------------------
/documentation/docs/refine.md:
--------------------------------------------------------------------------------
1 | ---
2 | slug: /refine
3 | id: refine
4 | title: Refine
5 | ---
6 |
7 |
8 |
9 |
10 |
11 | ## What is refine?
12 | **refine** is a React-based framework for the rapid ✨ development of web applications.
13 | It eliminates the repetitive tasks demanded by **CRUD** operations and provides industry standard solutions for critical parts like **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
14 |
15 | **refine** is *headless by design* offering unlimited styling and customization options.
16 |
17 |
18 | [Refer to refine repository for more information ➡️ ](https://github.com/pankod/refine)
19 |
20 |
21 | ## What do you mean by "headless" ?
22 | Instead of being a limited set of pre-styled components, **refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your *UI components* and *business logic*, so they never keep you from customizing your *UI* or coding your own flow.
23 |
24 | **refine** seamlessly works with any **custom design** or **UI framework you favor**. For convenience, it ships with ready-made integrations for [Ant Design System](https://ant.design/), [Material UI](https://mui.com/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/).
25 |
26 | ## Use cases
27 | **refine** shines on *data-intensive* applications like *admin panels*, *dashboards* and *internal tools*. Thanks to built-in **SSR support**, **refine** can also power *customer-facing* applications like *storefronts*.
28 |
29 | <br/>
30 | <a href="https://github.com/refinedev/refine">
31 | <img alt="how-works-refine" src="https://user-images.githubusercontent.com/18739364/200257209-8fc0c8b1-2568-453e-873f-00513434deed.png" />
32 |
33 | </a>
34 |
35 | <br/>
36 | <br/>
37 |
38 |
39 | ## Key Features
40 |
41 | ⚙️ Zero-config, **one-minute setup** with a **single CLI command**
42 |
43 | 🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/refinedev/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Nhost](https://github.com/refinedev/refine/tree/master/packages/nhost), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/refinedev/refine/tree/master/packages/altogic)
44 |
45 | 🌐 **SSR support** with **Next.js** or **Remix**
46 |
47 | ⚛ Perfect **state management** & **mutations** with **React Query**
48 |
49 | 🔀 **Advanced routing** with any router library of your choice
50 |
51 | 🔐 Providers for seamless **authentication** and **access control** flows
52 |
53 | ⚡ Out-of-the-box support for **live / real-time applications**
54 |
55 | 📄 Easy **audit logs** & **document versioning**
56 |
57 | 💬 Support for any **i18n** framework
58 |
59 | 💪 Future-proof, **robust architecture**
60 |
61 | ✅ Full **test coverage**
62 |
63 |
64 |
--------------------------------------------------------------------------------
/documentation/docusaurus.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017-present, Facebook, Inc.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | const siteConfig = {
9 | title: 'superplate',
10 | tagline: 'The frontend boilerplate with superpowers',
11 | url: 'https://pankod.github.io',
12 | baseUrl: '/superplate/',
13 | projectName: 'superplate',
14 | organizationName: 'pankod',
15 | favicon: 'img/superplate-logo.svg',
16 | presets: [
17 | [
18 | '@docusaurus/preset-classic',
19 | {
20 | docs: {
21 | path: './docs',
22 | sidebarPath: require.resolve('./sidebars.js'),
23 | editUrl:
24 | 'https://github.com/pankod/superplate/tree/master/documentation',
25 | showLastUpdateAuthor: true,
26 | showLastUpdateTime: true,
27 | },
28 | theme: {
29 | customCss: require.resolve('./src/css/custom.css'),
30 | },
31 | },
32 | ],
33 | ],
34 | themeConfig: {
35 | image: 'img/footer_icon.png',
36 | algolia: {
37 | apiKey: '3b7cf26a19755c7de95bcb3632edd314',
38 | indexName: 'superplate',
39 | },
40 | gtag: {
41 | // You can also use your "G-" Measurement ID here.
42 | trackingID: "G-DPWSR1T889",
43 | // Optional fields.
44 | anonymizeIP: true, // Should IPs be anonymized?
45 | },
46 | navbar: {
47 | title: 'superplate',
48 | logo: {
49 | alt: 'SuperPlate Logo',
50 | src: 'img/superplate-logo.svg',
51 | },
52 | items: [
53 | { to: 'docs', label: 'Docs', position: 'right' },
54 | {
55 | href: 'https://github.com/pankod/superplate',
56 | label: 'GitHub',
57 | position: 'right',
58 | },
59 | ],
60 | },
61 | footer: {
62 | style: 'dark',
63 | links: [
64 | {
65 | title: 'Docs',
66 | items: [
67 | {
68 | label: 'Getting Started',
69 | to: 'docs',
70 | },
71 | {
72 | label: 'Development',
73 | to: 'docs/development/how-it-works',
74 | },
75 | ],
76 | },
77 | {
78 | title: 'Community',
79 | items: [
80 | {
81 | label: 'Twitter',
82 | href: 'https://twitter.com/PankodDev',
83 | },
84 | ],
85 | },
86 | {
87 | title: 'More',
88 | items: [
89 | {
90 | label: 'GitHub',
91 | href: "https://github.com/pankod/superplate",
92 | },
93 | {
94 | html: `
95 | <a href="https://github.com/pankod/superplate" target="_blank" rel="noreferrer noopener" aria-label="Star this project on GitHub">
96 | <img src="https://img.shields.io/github/stars/pankod/superplate?logo=reverbnation&logoColor=white" alt="github-stars" />
97 | </a>
98 | `,
99 | },
100 | ],
101 | },
102 | ],
103 | logo: {
104 | alt: 'Pankod Logo',
105 | src: 'img/pankod_footer_logo.png',
106 | href: 'https://github.com/pankod'
107 | },
108 | copyright: `Copyright © ${new Date().getFullYear()} Pankod, Inc.`,
109 | },
110 | },
111 | };
112 |
113 | module.exports = siteConfig;
--------------------------------------------------------------------------------
/documentation/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "documentation",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "start": "docusaurus start",
8 | "build": "docusaurus build",
9 | "swizzle": "docusaurus swizzle",
10 | "deploy": "docusaurus deploy",
11 | "serve": "docusaurus serve",
12 | "clear": "docusaurus clear"
13 | },
14 | "dependencies": {
15 | "@docusaurus/core": "^2.0.0-beta.6",
16 | "@docusaurus/preset-classic": "^2.0.0-beta.6",
17 | "@mdx-js/react": "^1.6.21",
18 | "clsx": "^1.1.1",
19 | "react": "^16.8.4",
20 | "react-dom": "^16.8.4"
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.5%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/documentation/sidebars.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | someSidebar: [
3 | {
4 | type: 'category',
5 | label: 'Getting Started',
6 | items: [
7 | 'quick-start'
8 | ]
9 | },
10 | "refine",
11 | {
12 | type: 'category',
13 | label: "Next.js",
14 | items: [
15 | { "UI Frameworks": ['nextjs/tailwind', 'nextjs/bootstrap', 'nextjs/chakra-ui', 'nextjs/antd'] },
16 | { "CSS Preprocessors": ['nextjs/css', 'nextjs/scss', 'nextjs/styled-components'] },
17 | { "Features": ['nextjs/fetch', 'nextjs/axios', 'nextjs/storybook', 'nextjs/svgr', 'nextjs/env', 'nextjs/reverse-proxy', 'nextjs/bundle-analyzer', 'nextjs/apollo-graphql', 'nextjs/graphql-request'] },
18 | { "Hooks": ['nextjs/hooks/swr', 'nextjs/hooks/react-query', "nextjs/hooks/react-use"] },
19 | { "State Management": ['nextjs/state-management/redux-toolkit', 'nextjs/state-management/recoil', 'nextjs/state-management/mobx', 'nextjs/state-management/zustand'] },
20 | { "i18n": ['nextjs/i18n/next-translate', 'nextjs/i18n/next-i18next'] },
21 | { "Linting Tools": ['nextjs/linter/eslint', 'nextjs/linter/prettier', 'nextjs/linter/lint-staged'] },
22 | { "Testing": ['nextjs/testing/jest', 'nextjs/testing/testing-library', 'nextjs/testing/enzyme'] },
23 | { "E2E Testing": ['nextjs/e2e-testing/cypress', 'nextjs/e2e-testing/wdio'] },
24 | { "Deployment": ["nextjs/docker"] },
25 | { "Continuous integration": ["nextjs/ci/github-actions", "nextjs/ci/travis", "nextjs/ci/azure-pipelines"] }
26 | ]
27 | },
28 | {
29 | type: 'category',
30 | label: "React",
31 | items: [
32 | { "UI Frameworks": ['react/tailwind', 'react/bootstrap', 'react/chakra-ui', 'react/antd'] },
33 | { "CSS Preprocessors": ['react/css', 'react/scss', 'react/styled-components'] },
34 | { "Features": ['react/fetch', 'react/axios', 'react/storybook', 'react/svgr', 'react/env', 'react/reverse-proxy', 'react/bundle-analyzer', 'react/apollo-graphql', 'react/graphql-request'] },
35 | { "Hooks": ['react/hooks/swr', 'react/hooks/react-query', "react/hooks/react-use"] },
36 | { "State Management": ['react/state-management/redux-toolkit', 'react/state-management/recoil', 'react/state-management/mobx', 'react/state-management/zustand'] },
37 | { "i18n": ['react/i18n/react-i18next'] },
38 | { "Linting Tools": ['react/linter/eslint', 'react/linter/lint-staged'] },
39 | { "Testing": ['react/testing/jest', 'react/testing/testing-library'] },
40 | { "E2E Testing": ['react/e2e-testing/cypress', 'react/e2e-testing/wdio'] },
41 | { "Deployment": ["react/docker"] },
42 | { "Continuous integration": ["react/ci/github-actions", "react/ci/travis"] }
43 | ]
44 | },
45 | {
46 | type: 'category',
47 | label: "Development",
48 | items: [
49 | 'development/how-it-works',
50 | 'development/creating-a-plugin',
51 | 'development/references',
52 | ]
53 | }
54 | ]
55 | };
56 |
--------------------------------------------------------------------------------
/documentation/src/css/custom.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 | /**
3 | * Any CSS included here will be global. The classic template
4 | * bundles Infima by default. Infima is a CSS framework designed to
5 | * work well for content-centric websites.
6 | */
7 |
8 | /* You can override the default Infima variables here. */
9 | :root {
10 | --ifm-color-primary: #25c2a0;
11 | --ifm-color-primary-dark: rgb(33, 175, 144);
12 | --ifm-color-primary-darker: rgb(31, 165, 136);
13 | --ifm-color-primary-darkest: rgb(26, 136, 112);
14 | --ifm-color-primary-light: rgb(70, 203, 174);
15 | --ifm-color-primary-lighter: rgb(102, 212, 189);
16 | --ifm-color-primary-lightest: rgb(146, 224, 208);
17 | --ifm-code-font-size: 95%;
18 | }
19 |
20 | .docusaurus-highlight-code-line {
21 | background-color: rgb(72, 77, 91);
22 | display: block;
23 | margin: 0 calc(-1 * var(--ifm-pre-padding));
24 | padding: 0 var(--ifm-pre-padding);
25 | }
26 |
27 | .footer__links {
28 | margin-bottom: 20px;
29 | }
30 |
31 | .footer__col:first-child {
32 | flex: 2;
33 | }
34 |
35 | .footer__col:first-child .footer__items {
36 | display: flex;
37 | flex-direction: row;
38 | flex-wrap: wrap;
39 | }
40 |
41 | .footer__col:first-child .footer__items .footer__item {
42 | flex-basis: 50%;
43 | }
44 |
45 | @media screen and (max-width: 966px) {
46 | .footer__link-item {
47 | font-size: 14px;
48 | }
49 | }
50 |
51 | .language-js {
52 | font-size: 9px;
53 | }
--------------------------------------------------------------------------------
/documentation/src/pages/styles.module.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable docusaurus/copyright-header */
2 |
3 | /**
4 | * CSS files with the .module.css suffix will be treated as CSS modules
5 | * and scoped locally.
6 | */
7 |
8 | .heroBanner {
9 | display: flex;
10 | padding: 4rem 0;
11 | text-align: center;
12 | position: relative;
13 | overflow: hidden;
14 | background-color: white;
15 | }
16 |
17 | @media screen and (max-width: 966px) {
18 | .heroBanner {
19 | padding: 2rem;
20 | }
21 | .logoContainer {
22 | max-width: 72px !important;
23 | }
24 | .heroTitle {
25 | max-width: 225px !important;
26 | }
27 | .heroSubtitle {
28 | font-size: 1rem;
29 | }
30 | .feature {
31 | width: 100%;
32 | flex-basis: 50% !important;
33 | }
34 | }
35 |
36 | .topBadges {
37 | margin: 20px 0;
38 | }
39 |
40 | .topBadges > a {
41 | margin: 0 2px;
42 | }
43 |
44 | .buttons {
45 | display: flex;
46 | align-items: center;
47 | justify-content: center;
48 | }
49 |
50 | .logoContainer {
51 | max-width: 100px;
52 | margin: auto;
53 | }
54 |
55 | .heroTitle {
56 | max-width: 400px;
57 | margin: auto;
58 | color: #323232;
59 | }
60 |
61 | .heroSubtitle {
62 | color: #0080FF;
63 | text-transform: uppercase;
64 | font-weight: 500;
65 | }
66 |
67 | .featuresContainer {
68 | padding: 32px 0 12px;
69 | }
70 |
71 | .feature {
72 | margin: 12px 0;
73 | width: 100%;
74 | }
75 |
76 | .featureImage {
77 | height: 50px;
78 | width: 50;
79 | margin-bottom: 4px;
80 | }
81 |
82 | .featureTitle {
83 | font-size: 13px;
84 | font-weight: 700;
85 | letter-spacing: 2px;
86 | text-align: center;
87 | color: #303846;
88 | height: 32px;
89 | }
90 |
91 | .sectionImage {
92 | display: flex;
93 | margin: 0 auto;
94 | }
95 |
96 | .gettingStartedSection {
97 | background-color: #f7f7f7;
98 | }
99 |
100 | html[data-theme='dark'] .gettingStartedSection {
101 | background-color: #33363b;
102 | }
103 |
104 | html[data-theme='dark'] .heroBanner {
105 | background-color: #181a1b;
106 | /*2f3846*/
107 | }
108 |
109 | html[data-theme='dark'] .featureTitle {
110 | color: #f5f6f7;
111 | }
112 |
113 | html[data-theme='dark'] .heroTitle {
114 | color: #f5f6f7 !important;
115 | }
--------------------------------------------------------------------------------
/documentation/static/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/.nojekyll
--------------------------------------------------------------------------------
/documentation/static/img/antd.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 | <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
4 | <title>Group</title>
5 | <desc>Created with Sketch.</desc>
6 | <defs>
7 | <linearGradient x1="62.1023273%" y1="0%" x2="108.19718%" y2="37.8635764%" id="linearGradient-1">
8 | <stop stop-color="#4285EB" offset="0%"></stop>
9 | <stop stop-color="#2EC7FF" offset="100%"></stop>
10 | </linearGradient>
11 | <linearGradient x1="69.644116%" y1="0%" x2="54.0428975%" y2="108.456714%" id="linearGradient-2">
12 | <stop stop-color="#29CDFF" offset="0%"></stop>
13 | <stop stop-color="#148EFF" offset="37.8600687%"></stop>
14 | <stop stop-color="#0A60FF" offset="100%"></stop>
15 | </linearGradient>
16 | <linearGradient x1="69.6908165%" y1="-12.9743587%" x2="16.7228981%" y2="117.391248%" id="linearGradient-3">
17 | <stop stop-color="#FA816E" offset="0%"></stop>
18 | <stop stop-color="#F74A5C" offset="41.472606%"></stop>
19 | <stop stop-color="#F51D2C" offset="100%"></stop>
20 | </linearGradient>
21 | <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-4">
22 | <stop stop-color="#FA8E7D" offset="0%"></stop>
23 | <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
24 | <stop stop-color="#F51D2C" offset="100%"></stop>
25 | </linearGradient>
26 | </defs>
27 | <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
28 | <g fill-rule="nonzero">
29 | <path d="M116.850078,4.54548777 L4.52892893,116.774275 C-1.50964298,122.807881 -1.50964298,132.553174 4.52892893,138.586781 L116.850078,250.815568 C122.88865,256.849175 132.641964,256.849175 138.680536,250.815568 L185.77519,203.759641 C191.183172,198.356106 191.183172,189.595245 185.77519,184.191711 C180.367208,178.788175 171.599136,178.788175 166.191154,184.191711 L130.489075,219.864432 C128.986084,221.366187 126.704989,221.366187 125.201998,219.864432 L35.5055378,130.241729 C34.0025469,128.739974 34.0025469,126.460755 35.5055378,124.959 L125.201998,35.3362976 C126.704989,33.8345425 128.986084,33.8345425 130.489075,35.3362976 L166.191154,71.009019 C171.599136,76.4125539 180.367208,76.4125539 185.77519,71.009019 C191.183172,65.605484 191.183172,56.8446228 185.77519,51.4410879 L138.685727,4.39028013 C132.622361,-1.51275655 122.86548,-1.46496803 116.850078,4.54548777 Z" fill="url(#linearGradient-1)"></path>
30 | <path d="M116.850078,4.54548777 L4.52892893,116.774275 C-1.50964298,122.807881 -1.50964298,132.553174 4.52892893,138.586781 L116.850078,250.815568 C122.88865,256.849175 132.641964,256.849175 138.680536,250.815568 L185.77519,203.759641 C191.183172,198.356106 191.183172,189.595245 185.77519,184.191711 C180.367208,178.788175 171.599136,178.788175 166.191154,184.191711 L130.489075,219.864432 C128.986084,221.366187 126.704989,221.366187 125.201998,219.864432 L35.5055378,130.241729 C34.0025469,128.739974 34.0025469,126.460755 35.5055378,124.959 L125.201998,35.3362976 C128.944397,32.1100005 135.050525,25.5752137 144.017405,24.0468431 C150.68143,22.9109853 157.967021,25.4109881 165.874177,31.546852 C160.587747,26.2647619 151.52493,17.2125713 138.685727,4.39028013 C132.622361,-1.51275655 122.86548,-1.46496803 116.850078,4.54548777 Z" fill="url(#linearGradient-2)"></path>
31 | <path d="M196.646643,173.754365 C202.054625,179.157899 210.822696,179.157899 216.230677,173.754365 L250.970004,139.043604 C257.008576,133.009998 257.008576,123.264704 250.970711,117.231801 L215.928547,82.342615 C210.507763,76.945494 201.736908,76.953277 196.325725,82.3600099 C190.917743,87.7635449 190.917743,96.524406 196.325725,101.927941 L219.993396,125.57615 C221.496387,127.077905 221.496387,129.357124 219.993396,130.858879 L196.646643,154.186433 C191.23866,159.589968 191.23866,168.350829 196.646643,173.754365 Z" fill="url(#linearGradient-3)"></path>
32 | <ellipse fill="url(#linearGradient-4)" cx="128.326913" cy="128.241672" rx="30.3267102" ry="30.3017724"></ellipse>
33 | </g>
34 | </g>
35 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/apollo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3 | <g>
4 | <path d="M160.227,178.5186 L187.857,178.5186 L143.75,64.0486 L113.201,64.0486 L69.094,178.5186 L96.726,178.5186 L103.934,159.1286 L145.609,159.1286 L138.065,137.6726 L110.625,137.6726 L128.475,88.4186 L160.227,178.5186 Z M251.339,93.768 C250.357,90.232 246.705,88.155 243.154,89.141 C239.617,90.123 237.544,93.787 238.526,97.324 C241.299,107.309 242.704,117.63 242.704,128 C242.704,191.248 191.248,242.702 128,242.702 C64.752,242.702 13.297,191.248 13.297,128 C13.297,64.751 64.752,13.296 128,13.296 C154.793,13.296 180.718,22.814 201.179,39.752 C200.383,41.652 199.941,43.737 199.941,45.925 C199.941,54.76 207.103,61.922 215.938,61.922 C224.773,61.922 231.935,54.76 231.935,45.925 C231.935,37.09 224.773,29.928 215.938,29.928 C214.237,29.928 212.6,30.199 211.062,30.691 C188.022,11.056 158.513,0 128,0 C57.421,0 0,57.42 0,128 C0,198.579 57.421,255.999 128,255.999 C198.579,255.999 256,198.579 256,128 C256,116.428 254.433,104.91 251.339,93.768 Z" fill="#112B49"/>
5 | </g>
6 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/bootstrap.svg:
--------------------------------------------------------------------------------
1 | <svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M0 222.991C0 241.223 14.779 256 33.009 256H222.99C241.223 256 256 241.221 256 222.991V33.01C256 14.777 241.221 0 222.991 0H33.01C14.777 0 0 14.779 0 33.009V222.99z" fill="#563D7C"/><path d="M106.158 113.238V76.985h31.911c3.04 0 5.97.253 8.792.76 2.822.506 5.319 1.41 7.49 2.713 2.17 1.303 3.907 3.112 5.21 5.427 1.302 2.316 1.954 5.283 1.954 8.9 0 6.513-1.954 11.217-5.862 14.111-3.907 2.895-8.9 4.342-14.979 4.342h-34.516zM72.075 50.5v155h75.112c6.947 0 13.713-.868 20.298-2.605 6.585-1.737 12.446-4.414 17.584-8.032 5.137-3.618 9.226-8.286 12.265-14.002 3.04-5.717 4.559-12.483 4.559-20.298 0-9.697-2.352-17.982-7.055-24.856-4.704-6.875-11.832-11.687-21.384-14.437 6.947-3.328 12.194-7.598 15.74-12.808 3.545-5.21 5.318-11.722 5.318-19.538 0-7.236-1.194-13.314-3.582-18.235-2.388-4.92-5.753-8.864-10.095-11.831-4.341-2.967-9.551-5.102-15.63-6.404-6.078-1.303-12.808-1.954-20.189-1.954H72.075zm34.083 128.515v-42.549h37.121c7.381 0 13.315 1.7 17.802 5.102 4.486 3.401 6.73 9.081 6.73 17.041 0 4.053-.688 7.381-2.063 9.986-1.375 2.605-3.22 4.668-5.536 6.187-2.315 1.52-4.993 2.605-8.032 3.257-3.04.65-6.223.976-9.552.976h-36.47z" fill="#FFF"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/chakra-ui.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 257 257" xmlns="http://www.w3.org/2000/svg" class="css-fuaw0j">
2 | <rect width="257" height="257" rx="128.5" fill="url(#paint0_linear)"/>
3 | <path d="M69.56 133.99l87.59-87c1.64-1.62 4.27.36 3.17 2.38l-32.6 59.76a2 2 0 001.75 2.95h56.34a2 2 0 011.36 3.47l-98.72 92.14c-1.78 1.65-4.41-.68-2.99-2.64l46.74-64.47a2 2 0 00-1.62-3.18H70.97a2 2 0 01-1.41-3.41z" fill="#fff"/>
4 | <defs>
5 | <linearGradient id="paint0_linear" x1="128.5" x2="128.5" y2="257" gradientUnits="userSpaceOnUse">
6 | <stop stop-color="#7BCBD4"/>
7 | <stop offset="1" stop-color="#29C6B7"/>
8 | </linearGradient>
9 | </defs>
10 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/cli.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/cli.gif
--------------------------------------------------------------------------------
/documentation/static/img/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/code.png
--------------------------------------------------------------------------------
/documentation/static/img/css.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>file_type_css</title><polygon points="5.902 27.201 3.656 2 28.344 2 26.095 27.197 15.985 30 5.902 27.201" style="fill:#1572b6"/><polygon points="16 27.858 24.17 25.593 26.092 4.061 16 4.061 16 27.858" style="fill:#33a9dc"/><polygon points="16 13.191 20.09 13.191 20.372 10.026 16 10.026 16 6.935 16.011 6.935 23.75 6.935 23.676 7.764 22.917 16.282 16 16.282 16 13.191" style="fill:#fff"/><polygon points="16.019 21.218 16.005 21.222 12.563 20.292 12.343 17.827 10.67 17.827 9.24 17.827 9.673 22.68 16.004 24.438 16.019 24.434 16.019 21.218" style="fill:#ebebeb"/><polygon points="19.827 16.151 19.455 20.29 16.008 21.22 16.008 24.436 22.344 22.68 22.391 22.158 22.928 16.151 19.827 16.151" style="fill:#fff"/><polygon points="16.011 6.935 16.011 8.855 16.011 10.018 16.011 10.026 8.555 10.026 8.555 10.026 8.545 10.026 8.483 9.331 8.342 7.764 8.268 6.935 16.011 6.935" style="fill:#ebebeb"/><polygon points="16 13.191 16 15.111 16 16.274 16 16.282 12.611 16.282 12.611 16.282 12.601 16.282 12.539 15.587 12.399 14.02 12.325 13.191 16 13.191" style="fill:#ebebeb"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/cypress.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3 | <defs>
4 | <path d="M128,0 C198.749091,0 256,57.2509091 256,128 C256,198.749091 198.749091,256 128,256 C57.2509091,256 0,198.749091 0,128 C0,57.2509091 57.2509091,0 128,0 Z" id="path-1"/>
5 | <path d="M128,3 C197.090909,3 253,58.9090909 253,128 C253,197.090909 197.090909,253 128,253 C58.9090909,253 3,197.090909 3,128 C3,58.9090909 58.9090909,3 128,3 Z" id="path-3"/>
6 | <filter x="-2.4%" y="-2.4%" width="104.8%" height="104.8%" filterUnits="objectBoundingBox" id="filter-4">
7 | <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
8 | <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
9 | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"/>
10 | </filter>
11 | </defs>
12 | <g>
13 | <mask id="mask-2" fill="white">
14 | <use xlink:href="#path-1"/>
15 | </mask>
16 | <g mask="url(#mask-2)">
17 | <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"/>
18 | <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"/>
19 | </g>
20 | <path d="M128,7.38596491 C194.666667,7.38596491 248.614035,61.3333333 248.614035,128 C248.614035,194.666667 194.666667,248.614035 128,248.614035 C61.3333333,248.614035 7.38596491,194.666667 7.38596491,128 C7.38596491,61.3333333 61.3333333,7.38596491 128,7.38596491 Z" fill="#5C5C5E" mask="url(#mask-2)"/>
21 | <path d="M192.035088,181.070175 C187.649123,194.666667 181.070175,204.754386 171.859649,212.210526 C162.649123,219.666667 150.368421,223.614035 135.017544,224.929825 L131.947368,204.754386 C142.035088,203.438596 149.491228,201.245614 154.315789,197.736842 C156.070175,196.421053 159.578947,192.473684 159.578947,192.473684 L123.175439,75.8070175 L153.438596,75.8070175 L174.491228,163.087719 L196.859649,75.8070175 L226.245614,75.8070175 L192.035088,181.070175 Z M86.3333333,71.8596491 C93.3508772,71.8596491 99.9298246,72.7368421 105.192982,74.9298246 C110.894737,77.122807 116.157895,80.1929825 121.421053,84.5789474 L109.140351,101.245614 C105.631579,98.6140351 102.122807,96.8596491 99.0526316,95.5438596 C95.9824561,94.2280702 92.0350877,93.7894737 88.5263158,93.7894737 C73.6140351,93.7894737 66.1578947,105.192982 66.1578947,128.438596 C66.1578947,140.280702 67.9122807,148.614035 71.8596491,153.438596 C75.8070175,158.701754 81.0701754,160.894737 88.5263158,160.894737 C92.0350877,160.894737 95.5438596,160.45614 98.6140351,159.140351 C101.684211,157.824561 105.192982,156.070175 109.578947,153.438596 L121.859649,170.982456 C111.77193,179.315789 100.368421,183.263158 87.2105263,183.263158 C76.6842105,183.263158 67.9122807,181.070175 60.0175439,176.684211 C52.5614035,172.298246 46.4210526,165.719298 42.4736842,157.385965 C38.5263158,149.052632 36.3333333,139.403509 36.3333333,128 C36.3333333,117.035088 38.5263158,106.947368 42.4736842,98.6140351 C46.4210526,89.8421053 52.5614035,83.2631579 60.0175439,78.4385965 C67.4736842,74.4912281 76.245614,71.8596491 86.3333333,71.8596491 Z" fill="#FFFFFF" mask="url(#mask-2)"/>
22 | </g>
23 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/enzyme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/enzyme.png
--------------------------------------------------------------------------------
/documentation/static/img/eslint.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>file_type_eslint</title><path d="M29.832,16.7,23.478,27.417A1.256,1.256,0,0,1,22.36,28H9.647a1.262,1.262,0,0,1-1.118-.59L2.173,16.71a1.256,1.256,0,0,1,0-1.272L8.527,4.676A1.344,1.344,0,0,1,9.647,4H22.356a1.344,1.344,0,0,1,1.118.678l6.354,10.786a1.2,1.2,0,0,1,0,1.238ZM24.57,20.9V11.286L16,6.466l-8.56,4.82V20.9L16,25.719Z" style="fill:#4b32c3"/><polygon points="21.802 19.188 16.055 22.423 10.313 19.188 10.313 12.718 16.055 9.482 21.802 12.718 21.802 19.188" style="fill:#8080f2"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/footer_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/footer_icon.png
--------------------------------------------------------------------------------
/documentation/static/img/graphql.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg width="256px" height="288px" viewBox="0 0 256 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3 | <g fill-rule="evenodd">
4 | <path d="M152.575995,32.9634453 L211.722058,67.1124427 C213.387503,65.348329 215.332859,63.7907081 217.539734,62.5088708 C229.806457,55.4573413 245.452038,59.6441869 252.577021,71.9109101 C259.62855,84.1776333 255.441705,99.8232143 243.174982,106.948197 C240.984974,108.207124 238.684929,109.10784 236.343812,109.66832 L236.343812,177.99302 C238.659582,178.554683 240.934429,179.449686 243.101528,180.695443 C255.441705,187.820426 259.62855,203.466007 252.503568,215.73273 C245.452038,227.999453 229.733004,232.186299 217.46628,225.13477 C215.024105,223.730884 212.902189,221.983449 211.125456,219.988103 L152.340162,253.928803 C153.180519,256.46808 153.635248,259.18431 153.635248,262.008393 C153.635248,276.111452 142.176512,287.64364 128,287.64364 C113.823488,287.64364 102.364752,276.184905 102.364752,262.008393 C102.364752,259.488481 102.726802,257.054441 103.40181,254.755362 L44.2714887,220.615454 C42.6238257,222.34493 40.705394,223.873378 38.5337196,225.13477 C26.193543,232.186299 10.547962,227.999453 3.49643248,215.73273 C-3.55509701,203.466007 0.631748621,187.820426 12.8984718,180.695443 C15.0673397,179.448669 17.3418356,178.553222 19.6561876,177.991646 L19.6561876,109.66832 C17.3150714,109.10784 15.0150257,108.207124 12.8250184,106.948197 C0.558295189,99.8966677 -3.62855044,84.1776333 3.42297904,71.9109101 C10.4745085,59.6441869 26.193543,55.4573413 38.4602662,62.5088708 C40.6551374,63.7837361 42.5913269,65.3313931 44.2507413,67.0836756 L103.41276,32.9254664 C102.730718,30.6154532 102.364752,28.1687503 102.364752,25.6352478 C102.364752,11.4587354 113.823488,0 128,0 C142.176512,0 153.635248,11.4587354 153.635248,25.6352478 C153.635248,28.1826393 153.265258,30.6422768 152.575995,32.9634453 Z M146.413638,43.4848713 L205.700555,77.715193 C203.867899,84.1516888 204.540515,91.2885638 208.137694,97.5461579 C211.746601,103.824151 217.625783,107.985785 224.150543,109.607654 L224.150543,178.017842 C223.818032,178.099463 223.48718,178.187674 223.158201,178.282419 L145.72529,44.1686182 C145.959017,43.9450469 146.18851,43.7170876 146.413638,43.4848713 Z M110.29093,44.1841203 L32.8593279,178.295656 C32.524559,178.19844 32.1878611,178.108015 31.8494573,178.024438 L31.8494573,109.607654 C38.3742168,107.985785 44.2533992,103.824151 47.8623055,97.5461579 C51.466599,91.276189 52.1347497,84.1234583 50.2885426,77.6770157 L109.558747,43.4563434 C109.797913,43.7038019 110.042027,43.9464469 110.29093,44.1841203 Z M135.162749,50.259763 L212.576817,184.340928 C210.844241,185.99279 209.317376,187.91755 208.064241,190.097482 C206.818484,192.264581 205.923481,194.539429 205.361818,196.855198 L50.6395564,196.855198 C50.0779798,194.540846 49.1825333,192.26635 47.9357589,190.097482 C46.6776713,187.931497 45.1539248,186.017428 43.4300297,184.372667 L120.858821,50.2659993 C123.124941,50.9200822 125.520915,51.2704957 128,51.2704957 C130.486952,51.2704957 132.890265,50.9178547 135.162749,50.259763 Z M146.958084,244.737995 L205.860107,210.729899 C205.683398,210.174924 205.525483,209.614096 205.38664,209.048468 L50.6067643,209.048468 C50.5246888,209.380792 50.4360084,209.711472 50.3407792,210.040295 L109.531782,244.215239 C114.192298,239.378545 120.739739,236.373145 128,236.373145 C135.518379,236.373145 142.272352,239.596041 146.958084,244.737995 Z" fill="#E535AB"/>
5 | </g>
6 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/i18next.svg:
--------------------------------------------------------------------------------
1 | <svg enable-background="new 0 0 800 300" height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.4638723155 0 0 .4638723155 -1.37145325995 -17.29547871)"><path d="m88.822 51.582v25.966l29.179 74.943s8.908 18.303-16.57 22.763h-58.123s-23.747-2.478-18.054-21.281l30.664-76.424v-25.967z" fill="#009688"/><path d="m89.438 48.563h-35.003c-2.835 0-5.141-2.522-5.141-5.638 0-3.118 2.305-5.64 5.141-5.64h35.003c2.848 0 5.15 2.522 5.15 5.64 0 3.116-2.303 5.638-5.15 5.638z" fill="#004d40"/><path d="m80.204 93.979c3.756 0 6.819 3.67 6.819 8.215 0 4.525-3.065 8.204-6.819 8.204-3.765 0-6.819-3.679-6.819-8.204 0-4.547 3.054-8.215 6.819-8.215z" fill="#fff"/><ellipse cx="59.271" cy="108.362" fill="#fff" rx="5.748" ry="6.928"/><path d="m91.417 75.827v-12.35s15.661-3.453 23.488 14.763c0-.001-12.198 8.887-23.488-2.413z" fill="#004d40"/><path d="m53.059 75.827v-12.35s-15.663-3.453-23.486 14.763c0-.001 12.186 8.887 23.486-2.413z" fill="#004d40"/><path d="m100.833 126.935c-25.467-7.9-46.878-3.659-57.343-.453l-10.553 25.401c-4.751 15.164 15.087 17.157 15.087 17.157h48.545c21.279-3.595 13.842-18.347 13.842-18.347z" fill="#fff"/><g fill="#004d40"><path d="m64.131 136.373c0 2.739-3.681 4.967-8.215 4.967s-8.204-2.229-8.204-4.967c0-2.75 3.67-4.97 8.204-4.97 4.536.002 8.215 2.22 8.215 4.97z"/><path d="m93.345 136.373c0 2.739-3.681 4.967-8.204 4.967-4.547 0-8.215-2.229-8.215-4.967 0-2.75 3.668-4.97 8.215-4.97 4.525.002 8.204 2.22 8.204 4.97z"/></g></g></svg>
--------------------------------------------------------------------------------
/documentation/static/img/jest.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>file_type_jest</title><path d="M27.089,15.786a2.606,2.606,0,0,0-2.606-2.606,2.633,2.633,0,0,0-.274.014l3.58-10.558H12.576l3.575,10.549c-.052,0-.105-.005-.158-.005a2.606,2.606,0,0,0-.791,5.09,11.383,11.383,0,0,1-2.049,2.579A10.436,10.436,0,0,1,9.5,23.116a3.323,3.323,0,0,1-1.665-4.23c.077-.18.155-.362.229-.544a2.607,2.607,0,1,0-2.09-.4,20.134,20.134,0,0,0-1.889,4.787c-.354,2.135,0,4.4,1.845,5.681,4.3,2.981,8.969-1.848,13.891-3.061,1.784-.44,3.742-.369,5.313-1.279a4.45,4.45,0,0,0,2.179-3.088,4.639,4.639,0,0,0-.831-3.522,2.6,2.6,0,0,0,.606-1.671ZM18.6,15.8v-.009a2.6,2.6,0,0,0-1.256-2.23L20.188,7.8l2.85,5.814a2.6,2.6,0,0,0-1.161,2.169c0,.019,0,.038,0,.057L18.6,15.8Z" style="fill:#c63d14"/><path d="M27.726,15.786A3.247,3.247,0,0,0,25.083,12.6L28.677,2H11.689l3.6,10.621a3.241,3.241,0,0,0-1,5.918,10.865,10.865,0,0,1-1.568,1.846,9.827,9.827,0,0,1-3.16,2.03,2.656,2.656,0,0,1-1.134-3.28l.04-.093.074-.175a3.245,3.245,0,1,0-3.34-.754c-.108.231-.222.465-.339.706a14,14,0,0,0-1.4,3.8c-.465,2.8.285,5.043,2.111,6.308A5.751,5.751,0,0,0,8.934,30c2.132,0,4.289-1.071,6.4-2.119a23.672,23.672,0,0,1,4.642-1.918c.577-.142,1.171-.228,1.8-.319a9.977,9.977,0,0,0,3.68-1.028,5.09,5.09,0,0,0,2.487-3.53,5.255,5.255,0,0,0-.691-3.613,3.223,3.223,0,0,0,.475-1.688Zm-1.273,0a1.97,1.97,0,1,1-1.97-1.97,1.972,1.972,0,0,1,1.97,1.97ZM26.9,3.273l-3.174,9.36a3.2,3.2,0,0,0-.4.125l-3.135-6.4L17.046,12.72a3.2,3.2,0,0,0-.419-.114L13.464,3.273ZM15.993,13.816a1.97,1.97,0,1,1-1.97,1.97,1.972,1.972,0,0,1,1.97-1.97Zm-8.522.019A1.97,1.97,0,1,1,5.5,15.8a1.972,1.972,0,0,1,1.97-1.97Zm19.217,7.034a3.82,3.82,0,0,1-1.871,2.646,8.9,8.9,0,0,1-3.223.869c-.632.091-1.285.185-1.924.343a24.587,24.587,0,0,0-4.9,2.013c-3.164,1.571-5.9,2.928-8.472,1.143-1.887-1.308-1.8-3.728-1.58-5.054A12.82,12.82,0,0,1,6,19.376c.092-.189.182-.375.27-.559a3.215,3.215,0,0,0,.838.21,3.965,3.965,0,0,0,2.1,4.655l.245.126.259-.092a11.029,11.029,0,0,0,3.875-2.4,12.078,12.078,0,0,0,1.918-2.319,3.241,3.241,0,0,0,2.64-5.627l2.038-4.121,2.059,4.2a3.24,3.24,0,0,0,4.088,5,3.957,3.957,0,0,1,.355,2.422Z" style="fill:#fff"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/mobx-state-tree.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="187.47" height="182.806" fill="#ff7102" fill-rule="evenodd" xmlns:v="https://vecta.io/nano"><path d="M97.376 7.001c-4.085.01-8.23 2.082-10.983 6.187L4.345 137.08c-7.211 15.19 3.238 29.709 17.402 33.826 26.605 5.925 50.972-9.914 50.972-9.914 35.892-22.966 59.072-35.93 59.072-35.93 28.605-14.501 53.627 3.292 53.68 3.33L108.027 13.188c-2.538-4.141-6.566-6.196-10.651-6.187zm.034 12.73c3.215-.01 6.385 1.611 8.382 4.87 18.914 28.075 40.41 57.02 58.509 85.601 0 0-17.273-8.988-39.806 2.435 0 0-18.247 10.205-46.491 28.277 0 0-19.169 12.457-40.105 7.794-11.146-3.24-19.374-14.667-13.7-26.62L88.77 24.601c2.167-3.23 5.424-4.863 8.639-4.87zm64.574 108.64c-30.943.765-57.794 29.676-79.664 38.221 33.249 39.96 132.792-7.446 95.517-33.93-4.729-3.224-10.085-4.433-15.853-4.291zm10.981 11.457c17.547 17.529-48.352 48.024-76.374 27.971 10.737-.829 55.926-44.308 76.374-27.971z"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/mobx.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3 | <g>
4 | <path d="M256,236.393515 L256,19.6065524 C256,10.7132614 250.077122,3.20765291 241.962667,0.807144974 L232.747683,6.32096508 L130.483132,115.358002 L127.277037,125.379251 L125.403767,134.998214 L157.293376,254.178404 L162.227471,255.999865 L236.393651,255.999865 C247.221841,255.999865 256,247.222044 256,236.393515" fill="#EA6618"/>
5 | <path d="M0,19.6064847 L0,236.393448 C0,243.097532 3.36660317,249.012622 8.49913228,252.548199 L14.7873862,249.537151 L123.033397,133.643649 L127.277037,125.379183 L127.435513,117.38968 L97.9751958,5.30502434 L93.5141587,0.000135449735 L19.6063492,0.000135449735 C8.77815873,0.000135449735 0,8.77829418 0,19.6064847" fill="#d65813"/>
6 | <path d="M127.276902,125.379183 L241.962531,0.807415873 C240.196605,0.284918519 238.328753,0.000135449735 236.393515,0.000135449735 L93.5143619,0.000135449735 L127.276902,125.379183 Z" fill="#e05e11"/>
7 | <path d="M19.6064847,256 L162.227606,256 L127.276834,125.379048 L8.49926772,252.548402 C11.6569397,254.723725 15.4820402,256 19.6064847,256" fill="#de5c16"/>
8 | <path d="M94.9181291,97.0292825 L109.143399,97.0292825 C114.810954,118.41578 121.261748,137.182341 128.458531,154.114912 C136.610574,135.064246 142.585939,116.285156 147.64397,97.0292825 L161.085663,97.0292825 C155.0656,120.955462 145.218066,145.06924 133.954066,169.959145 L122.064288,169.959145 C111.244563,146.372605 102.033304,122.122362 94.9181291,97.0292825 Z M47.9982392,59.9745693 L79.6288,59.9745693 L79.6288,195.611903 L47.8587259,195.611903 L47.8587259,185.156199 L67.3296254,185.156199 L67.3296254,70.1515852 L47.9982392,70.1515852 L47.9982392,59.9745693 Z M208.166739,70.1516868 L188.835014,70.1516868 L188.835014,185.156301 L208.305913,185.156301 L208.305913,195.612004 L176.536178,195.612004 L176.536178,59.9746709 L208.166739,59.9746709 L208.166739,70.1516868 Z" fill="#FFFFFF"/>
9 | </g>
10 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/mui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/mui.png
--------------------------------------------------------------------------------
/documentation/static/img/pankod_footer_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/pankod_footer_logo.png
--------------------------------------------------------------------------------
/documentation/static/img/react-bootstrap.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2127.98 2016.87"><defs><style>.cls-1{fill:#41e0fd}</style></defs><path class="cls-1" d="M888 1119.17c16-32.62 32.84-65.37 50.17-97.35l.15-.27 18.39-35.68 27.16-45 .17-.29c10.14-17.26 20.66-34.68 31.27-51.78l18.69-30.87c24.88-41.19 44.88-71.23 76.43-114.76 17-23.43 33.12-44 58.66-75.92l.06-.06 1.26-1.59.49-.63c10.37-13.22 20.84-26.25 31.11-38.73l.34-.42.2-.25c23.83-29.51 48.12-59.13 72.19-88l9.57-11.48V356.54H1267c-9.23-8.68-18.66-17.3-28.08-25.69-76.32-67.72-152.43-120.85-226.27-157.79-75.71-37.92-145.63-57.14-207.8-57.14-44.39 0-84.06 9.94-117.91 29.53-32.55 18.84-59.9 46.91-81.31 83.44-20.06 34.23-34.84 75.89-43.95 123.81-17.54 92.37-13.74 208 11 334.34 3.12 15.9 6.56 32 10.25 48-19.74 6-38.91 12.18-57.13 18.53-119.26 41.58-219 95.91-288.42 157.14-36 31.71-63.84 65.23-82.89 99.62-20.24 36.57-30.51 74.08-30.51 111.49 0 75 41.55 151 120.15 219.94 74 64.93 178.65 121.62 302.55 164 11.51 3.91 23.22 7.71 35 11.34-4.12 17.93-7.93 36-11.36 54-23.56 124.08-26.31 237.62-8 328.35 9.51 47 24.61 87.89 44.89 121.57 21.56 35.8 48.93 63.44 81.34 82.13 34.15 19.69 74.34 29.67 119.45 29.67 61.42 0 130.09-18.21 204.11-54.13 72.56-35.21 146.63-85.64 220.13-149.89 11.33-9.9 23-20.49 34.66-31.53h17.41v-174.39l-6.34-7.8-3-3.67-79.82-98.55-44.35-54.75c-22.39-27.64-58.25-78.79-101-144-34-51.84-58.76-93.47-70.5-113.63l-1.28-2.21c-20.49-35.33-35.71-63.79-47.93-86.64-15.3-28.63-30.39-57.87-44.91-87l2.66-5.17zm-80.86-172.89c-13.53-34.7-25.92-69.13-37-102.81 34.57-7.13 70.51-13.53 107.32-19.11-12.28 20.11-24.34 40.41-36 60.64s-23.12 40.69-34.32 61.28zm-38.25 462.1c11.45-34.86 24.31-70.56 38.39-106.59 11.29 20.7 22.87 41.3 34.58 61.53 12.27 21.19 25 42.48 37.95 63.58-38.46-5.32-75.62-11.53-110.92-18.51zM707.18 397.16c9-61.74 29.14-105.87 55.37-121.06 10.89-6.31 25.34-9.5 42.93-9.5 38.47 0 88.24 15.1 143.91 43.67 60.34 31 125.77 77.11 189.22 133.45q5.9 5.24 12.07 10.89c-55.81 61.71-110.81 130.28-163.68 204.1-90.08 8.8-176.68 21.94-257.76 39.11-2.93-12.84-5.68-25.75-8.2-38.5l-.24-1.32c-19.33-98.76-24.04-189-13.62-260.84zm11.31 727c-38.1 84-70.48 167.16-96.37 247.46-9-2.8-17.89-5.72-26.65-8.7-103-35.21-188.79-80.66-248.08-131.43-45.37-38.85-72.45-79.83-72.45-109.63 0-30.59 27.09-70 74.34-108.2 55-44.47 133.27-85.11 226.19-117.5 15.79-5.48 31.87-10.73 48-15.64 25.53 79.13 57.48 160.99 95.01 243.63zm.12 474.92c2.86-15 6-30.09 9.43-45.09 80 16.37 167.59 28.71 260.75 36.71 53.38 74.34 108.84 143.37 165.05 205.44-6.94 6.39-13.94 12.68-20.9 18.79-81.37 71.13-163.09 122.55-236.28 148.71l-1.52.54c-32.8 11.58-62.09 17.45-87 17.45-18.38 0-33.22-3.18-44.11-9.46-26.51-15.29-47.14-58.46-56.6-118.45-11.06-69.91-7.19-157.97 11.17-254.65z" transform="translate(-123.98 -115.92)" id="_Group_" data-name="<Group>"/><path class="cls-1" d="M2195.07 1205.1q-56.26-103.45-165.54-134.23a2.85 2.85 0 0 1-1.79-2.85 3 3 0 0 1 1.37-2.68c54.24-30.16 95.93-73.11 125.15-127.9q44.15-82.89 44.16-199.49c0-128.25-32.45-223.65-97.06-287.11s-150.62-95-257.7-95h-578.35c-1.25 0-2.27 1.31-2.27 2.93V1894.3c0 1.62 1 2.93 2.27 2.93h546.57q115.42 0 199.11-33.69c55.91-22.42 101.4-52.68 137.21-90.68s61.92-83.33 78.66-136c16.74-52.23 25.1-108.8 25.1-169.24.04-105.37-19.08-192.57-56.89-262.52zm-722.32-628c0-1.62 1-2.93 2.27-2.93h339.46c56.95 0 100.51 16 130.65 47.55s45.2 86.4 45.2 164.18c0 69.18-16.74 121.92-50.25 159.08s-75.37 55.32-125.63 55.32H1475c-1.25 0-2.27-1.31-2.27-2.93zm518.16 1035.8c-34.86 42.76-84.41 64-148.07 64H1475c-1.25 0-2.27-1.31-2.27-2.93v-476.4c0-1.62 1-2.93 2.27-2.93h367.82c63.66 0 112.57 19.89 148.07 61.35s52.93 99.82 52.93 176.3c.02 77.77-17.76 138.27-52.91 180.61z" transform="translate(-123.98 -115.92)"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/react-query.svg:
--------------------------------------------------------------------------------
1 | <svg width="190" height="190" viewBox="0 0 190 190" xmlns="http://www.w3.org/2000/svg">
2 | <g fill="none" fill-rule="evenodd">
3 | <path d="M150.28 61.34c3.09-14.98 3.75-26.47 1.75-34.81-1.19-4.96-3.36-9.01-6.66-11.93-3.5-3.08-7.9-4.6-12.86-4.6-8.18 0-16.78 3.73-25.97 10.8a118.25 118.25 0 00-11.67 10.44c-.32-.4-.69-.8-1.1-1.16C82.37 19.91 72.75 13.6 64.53 11.16c-4.89-1.44-9.48-1.58-13.66-.18-4.41 1.49-7.93 4.55-10.4 8.85-4.1 7.09-5.18 16.4-3.66 27.9.63 4.69 1.69 9.8 3.2 15.33-.57.07-1.14.2-1.7.38-14.5 4.8-24.75 9.95-30.97 15.85-3.7 3.5-6.1 7.41-6.98 11.73-.92 4.56-.02 9.14 2.46 13.43 4.08 7.08 11.6 12.66 22.3 17.08 4.3 1.78 9.16 3.39 14.6 4.83a8.73 8.73 0 00-.57 1.78c-3.1 14.98-3.76 26.47-1.76 34.81 1.19 4.97 3.36 9.01 6.67 11.93 3.49 3.09 7.9 4.6 12.86 4.6 8.18 0 16.77-3.72 25.96-10.8 3.79-2.92 7.72-6.44 11.8-10.57a8.7 8.7 0 001.55 1.8c11.42 10.18 21.04 16.5 29.26 18.93 4.89 1.44 9.48 1.58 13.66.18 4.41-1.49 7.93-4.55 10.4-8.85 4.1-7.09 5.18-16.4 3.66-27.9a119.5 119.5 0 00-3.36-15.93c.62-.06 1.25-.2 1.87-.4 14.48-4.8 24.74-9.95 30.96-15.85 3.7-3.5 6.1-7.41 6.98-11.73.92-4.56.02-9.14-2.46-13.43-4.08-7.08-11.6-12.66-22.3-17.08a118.57 118.57 0 00-15.08-4.96c.2-.5.36-1 .47-1.55z" fill="#002C4B" fill-rule="nonzero"/>
4 | <path d="M80.4 64h29.2a5 5 0 014.34 2.51l14.64 25.5a5 5 0 010 4.98l-14.64 25.5a5 5 0 01-4.33 2.51H80.4a5 5 0 01-4.34-2.51l-14.63-25.5a5 5 0 010-4.98l14.63-25.5A5 5 0 0180.4 64zm25.59 6.28a5 5 0 014.34 2.51l11.01 19.22a5 5 0 010 4.98l-11.01 19.22a5 5 0 01-4.34 2.51H84.02a5 5 0 01-4.34-2.51L68.66 96.99a5 5 0 010-4.98L79.68 72.8a5 5 0 014.34-2.51h21.97zm-3.9 6.86H87.91a5 5 0 00-4.33 2.51l-7.1 12.36a5 5 0 000 4.98l7.1 12.36a5 5 0 004.33 2.5h14.16a5 5 0 004.34-2.5l7.1-12.36a5 5 0 000-4.98l-7.1-12.36a5 5 0 00-4.34-2.5zm-3.77 6.57a5 5 0 014.33 2.5l3.33 5.8a5 5 0 010 4.98l-3.33 5.8a5 5 0 01-4.33 2.5h-6.63a5 5 0 01-4.34-2.5l-3.33-5.8a5 5 0 010-4.98l3.33-5.8a5 5 0 014.34-2.5h6.63zM95 90.18a4.32 4.32 0 100 8.64 4.32 4.32 0 100-8.64zM60 94.5h7.77" fill="#FFD94C"/>
5 | <path d="M54.86 108.36a2.71 2.71 0 013.72 1.04l.47.84c3.8 6.74 7.77 13.14 11.9 19.2a286.9 286.9 0 0016.41 21.71 2.78 2.78 0 01-.3 3.85l-.6.53c-20.11 17.57-33.18 21.08-39.21 10.53-5.9-10.32-3.77-29.08 6.4-56.28.23-.6.65-1.1 1.21-1.42zm85.67 20.68a2.7 2.7 0 013.13 2.15l.15.8c4.97 26 1.47 39.01-10.5 39.01-11.7 0-26.6-11.1-44.7-33.27a2.72 2.72 0 012.12-4.44h.95c7.63.05 15.03-.22 22.23-.79a281.1 281.1 0 0026.62-3.46zm6.88-55.23a2.82 2.82 0 013.54-1.66l.8.27c25.83 8.8 35.65 18.47 29.45 29.02-6.07 10.31-23.72 17.82-52.94 22.52-.65.1-1.31-.01-1.88-.34a2.73 2.73 0 01-1-3.77l.5-.84c4-6.7 7.6-13.36 10.82-19.99a284.1 284.1 0 0010.7-25.2zm-85.67-7.77c.65-.1 1.31.01 1.88.34a2.73 2.73 0 011 3.77l-.5.84c-4 6.7-7.6 13.36-10.82 19.99a284.09 284.09 0 00-10.7 25.2 2.82 2.82 0 01-3.55 1.67l-.8-.27C12.43 108.78 2.6 99.11 8.8 88.56c6.07-10.31 23.72-17.82 52.94-22.52zm41.8-31.57c20.11-17.57 33.18-21.08 39.21-10.53 5.9 10.32 3.77 29.08-6.4 56.28a2.71 2.71 0 01-4.93.38l-.47-.84a269.42 269.42 0 00-11.9-19.2 286.9 286.9 0 00-16.41-21.71 2.78 2.78 0 01.3-3.85zM57.69 18c11.71 0 26.61 11.1 44.7 33.27a2.72 2.72 0 01-2.11 4.44h-.95c-7.63-.05-15.03.22-22.23.79a281.1 281.1 0 00-26.62 3.46 2.7 2.7 0 01-3.13-2.15l-.15-.8C42.22 31.01 45.72 18 57.69 18z" fill="#FF4154"/>
6 | </g>
7 | </svg>
8 |
--------------------------------------------------------------------------------
/documentation/static/img/recoil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/recoil.png
--------------------------------------------------------------------------------
/documentation/static/img/redux.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="none" d="M0 0h128v128H0z"/><path d="M88.69 88.11c-9 18.4-24.76 30.78-45.61 34.85a39.73 39.73 0 0 1-9.77 1.14c-12 0-23-5-28.34-13.19C-2.2 100-4.64 76.87 19 59.76c.48 2.61 1.46 6.19 2.11 8.31A38.24 38.24 0 0 0 10 81.1c-4.4 8.64-3.91 17.27 1.3 25.25 3.6 5.38 9.3 8.65 16.63 9.65a44 44 0 0 0 26.55-5c12.71-6.68 21.18-14.66 26.72-25.57a9.32 9.32 0 0 1-2.61-6A9.12 9.12 0 0 1 87.37 70h.34a9.15 9.15 0 0 1 1 18.25zm28.67-20.2c12.21 13.84 12.54 30.13 7.82 39.58-4.4 8.63-16 17.27-31.6 17.27a50.48 50.48 0 0 1-21-5.05c2.29-1.63 5.54-4.24 7.33-5.87a41.54 41.54 0 0 0 16 3.42c10.1 0 17.75-4.72 22.31-13.35 2.93-5.7 3.1-12.38.33-19.22a43.61 43.61 0 0 0-17.27-20.85 62 62 0 0 0-34.74-10.59h-2.93a9.21 9.21 0 0 1-8 5.54h-.31a9.13 9.13 0 0 1-.3-18.25h.33a9 9 0 0 1 8 4.89h2.61c20.8 0 39.06 7.98 51.42 22.48zm-82.75 23a7.31 7.31 0 0 1 1.14-4.73c-9.12-15.8-14-35.83-6.51-56.68C34.61 13.83 48.13 3.24 62.79 3.24c15.64 0 31.93 13.69 33.88 40.07-2.44-.81-6-2-8.14-2.44-.53-8.63-7.82-30.13-25.09-29.81-6.19.17-15.31 3.1-20 9.12a43.69 43.69 0 0 0-9.64 25.25 59.61 59.61 0 0 0 8.47 36.16 2.75 2.75 0 0 1 1.14-.16h.32a9.12 9.12 0 0 1 .33 18.24h-.33a9.16 9.16 0 0 1-9.12-8.79z" fill="#764abc"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/reverbnation.svg:
--------------------------------------------------------------------------------
1 | <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ReverbNation icon</title><path d="M24 9.324l-9.143-.03L11.971.57 9.143 9.294 0 9.324h.031l7.367 5.355-2.855 8.749h.029l7.459-5.386 7.396 5.386-2.855-8.73L24 9.315"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/sass.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>file_type_sass</title><path d="M26.11,17.572a5.8,5.8,0,0,0-2.537.588,5.345,5.345,0,0,1-.568-1.314,3.53,3.53,0,0,1-.051-1.1,9.811,9.811,0,0,1,.332-1.192c-.005-.051-.061-.292-.624-.3s-1.048.107-1.1.256a6.171,6.171,0,0,0-.235.834,19.686,19.686,0,0,1-1.713,3.294,3.186,3.186,0,0,1-.44-2.066,9.811,9.811,0,0,1,.332-1.192c-.005-.051-.061-.292-.624-.3s-1.048.107-1.1.256-.118.5-.235.834-1.483,3.386-1.841,4.173c-.184.4-.343.726-.455.946h0a.233.233,0,0,1-.02.041c-.1.189-.153.292-.153.292v.005c-.077.138-.159.266-.2.266a1.711,1.711,0,0,1,.01-.869c.2-1.059.69-2.705.685-2.762,0-.031.092-.317-.317-.465a.508.508,0,0,0-.578.1c-.036,0-.061.087-.061.087s.445-1.851-.849-1.851a3.855,3.855,0,0,0-2.475,1.683c-.348.189-1.089.593-1.882,1.028-.3.169-.614.338-.905.5-.02-.02-.041-.046-.061-.066C6.87,17.6,3.975,16.416,4.1,14.171c.046-.818.327-2.966,5.559-5.575,4.306-2.122,7.733-1.534,8.326-.23.849,1.862-1.836,5.319-6.285,5.82a3.351,3.351,0,0,1-2.813-.711c-.235-.256-.271-.271-.358-.22-.143.077-.051.307,0,.44a2.626,2.626,0,0,0,1.606,1.263,8.55,8.55,0,0,0,5.217-.517c2.7-1.043,4.8-3.943,4.184-6.372-.619-2.465-4.71-3.278-8.582-1.9A19.5,19.5,0,0,0,4.359,9.952c-2.133,1.995-2.47,3.728-2.332,4.455.5,2.578,4.051,4.255,5.472,5.5-.072.041-.138.077-.194.107-.711.353-3.421,1.77-4.1,3.268-.767,1.7.123,2.915.711,3.079a4.374,4.374,0,0,0,4.71-1.908A4.725,4.725,0,0,0,9.049,20.1a.107.107,0,0,0-.02-.031l.557-.327c.363-.215.721-.414,1.028-.578a6.74,6.74,0,0,0-.363,1.862,3.886,3.886,0,0,0,.834,2.7.921.921,0,0,0,.675.22c.6,0,.875-.5,1.176-1.094.368-.726.7-1.57.7-1.57s-.414,2.281.711,2.281c.409,0,.823-.532,1.008-.8v.005s.01-.015.031-.051l.066-.107v-.01c.164-.286.532-.936,1.079-2.015.706-1.391,1.386-3.13,1.386-3.13a8.888,8.888,0,0,0,.271,1.13,10.643,10.643,0,0,0,.583,1.309c-.164.23-.266.358-.266.358l.005.005c-.133.174-.276.363-.435.547a16.3,16.3,0,0,0-1.314,1.647.447.447,0,0,0,.123.6,1.116,1.116,0,0,0,.685.113,3.147,3.147,0,0,0,1.028-.235,3.45,3.45,0,0,0,.885-.465,1.98,1.98,0,0,0,.849-1.744,3.521,3.521,0,0,0-.322-1.233c.051-.072.1-.143.148-.215a23.428,23.428,0,0,0,1.534-2.649,8.888,8.888,0,0,0,.271,1.13,7.57,7.57,0,0,0,.5,1.125A4.861,4.861,0,0,0,20.965,20.8c-.322.931-.072,1.35.4,1.447a1.425,1.425,0,0,0,.747-.153,3.4,3.4,0,0,0,.946-.486,2.126,2.126,0,0,0,1.043-1.729,3.268,3.268,0,0,0-.235-1.023,5.356,5.356,0,0,1,2.716-.312c2.434.286,2.915,1.805,2.823,2.445a1.618,1.618,0,0,1-.772,1.094c-.169.107-.225.143-.21.22.02.113.1.107.245.087A1.9,1.9,0,0,0,30,20.7c.077-1.5-1.355-3.145-3.887-3.13ZM7.33,23.9c-.808.88-1.933,1.212-2.419.931-.522-.3-.317-1.6.675-2.532a12.884,12.884,0,0,1,1.9-1.417c.118-.072.292-.174.5-.3l.056-.031h0l.123-.077A3.493,3.493,0,0,1,7.33,23.9Zm5.881-4c-.281.685-.869,2.44-1.227,2.342-.307-.082-.5-1.412-.061-2.726a6.193,6.193,0,0,1,.956-1.754c.44-.491.926-.655,1.043-.455a9.062,9.062,0,0,1-.711,2.593Zm4.853,2.322c-.118.061-.23.1-.281.072-.036-.02.051-.1.051-.1s.609-.655.849-.951c.138-.174.3-.378.476-.609V20.7c0,.782-.757,1.309-1.094,1.524Zm3.744-.854c-.087-.061-.072-.266.22-.905a3.408,3.408,0,0,1,.834-1.074,1.448,1.448,0,0,1,.082.471,1.547,1.547,0,0,1-1.135,1.509Z" style="fill:#cd6799"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/storybook.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>file_type_storybook</title><path d="M20.735,5.442l.133-3.173,2.72-.168.122,3.23a.216.216,0,0,1-.047.143.21.21,0,0,1-.3.029l-1.05-.82-1.243.934a.212.212,0,0,1-.3-.04A.206.206,0,0,1,20.735,5.442Z" style="fill:#fff"/><path d="M20.868,2.268l-.133,3.174a.206.206,0,0,0,.043.135.212.212,0,0,0,.3.04l1.243-.934,1.05.82a.21.21,0,0,0,.3-.029.216.216,0,0,0,.047-.143L23.588,2.1,25.154,2A1.415,1.415,0,0,1,26.66,3.321q0,.043,0,.087V28.592A1.414,1.414,0,0,1,25.245,30l-.066,0L6.231,29.156A1.414,1.414,0,0,1,4.876,27.8L4,4.69A1.412,1.412,0,0,1,5.33,3.232l15.537-.963Z" style="fill:#ff4785"/><path d="M17.253,12.554c0,.547,3.72.285,4.22-.1,0-3.73-2.018-5.69-5.714-5.69S9.993,8.754,9.993,11.74c0,5.2,7.077,5.3,7.077,8.136a1.127,1.127,0,0,1-1.258,1.27c-1.127,0-1.573-.572-1.52-2.512,0-.421-4.3-.553-4.43,0-.334,4.7,2.621,6.06,6,6.06,3.276,0,5.845-1.733,5.845-4.868,0-5.573-7.182-5.423-7.182-8.185a1.18,1.18,0,0,1,1.337-1.269C16.388,10.372,17.332,10.464,17.253,12.554Z" style="fill:#fff"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/styled-components.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/styled-components.png
--------------------------------------------------------------------------------
/documentation/static/img/styled-system.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="yes"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-18 -18 36 36" width="512" height="512" style="display:block;overflow:visible;color:black;fill:none;stroke:currentColor"><g><path d="
5 | M0 -16
6 | L-14 -8
7 | L -14 8
8 | L 0 16
9 | L 14 8
10 | L 14 -8
11 | L 0 -16
12 | z
13 | "></path><path d="
14 | M0 -16
15 | L 0 0
16 | M-14 8
17 | L0 0
18 | L14 8
19 | " stroke-width="0.25"></path></g></svg>
20 |
--------------------------------------------------------------------------------
/documentation/static/img/superplate-logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="151" height="200" viewBox="0 0 151 200" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M100.28 0V50H50.28V100H0.279999V0H100.28Z" fill="#0080FF"/>
3 | <path d="M50.27 200H150.27V100H100.27V150H50.27V200Z" fill="#0080FF"/>
4 | </svg>
5 |
--------------------------------------------------------------------------------
/documentation/static/img/svgr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/svgr.png
--------------------------------------------------------------------------------
/documentation/static/img/swr.svg:
--------------------------------------------------------------------------------
1 | <svg height="18" width="30" viewBox="0 0 291 69" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0 36.53c.07 17.6 14.4 32.01 32.01 32.01a32.05 32.05 0 0032.01-32V32a13.2 13.2 0 0123.4-8.31h20.7A32.07 32.07 0 0077.2 0a32.05 32.05 0 00-32 32.01v4.52A13.2 13.2 0 0132 49.71a13.2 13.2 0 01-13.18-13.18 3.77 3.77 0 00-3.77-3.77H3.76A3.77 3.77 0 000 36.53zM122.49 68.54a32.14 32.14 0 01-30.89-23.7h20.67a13.16 13.16 0 0023.4-8.3V32A32.05 32.05 0 01167.68 0c17.43 0 31.64 14 32 31.33l.1 5.2a13.2 13.2 0 0023.4 8.31h20.7a32.07 32.07 0 01-30.91 23.7c-17.61 0-31.94-14.42-32.01-32l-.1-4.7v-.2a13.2 13.2 0 00-13.18-12.81 13.2 13.2 0 00-13.18 13.18v4.52a32.05 32.05 0 01-32.01 32.01zM247.94 23.7a13.16 13.16 0 0123.4 8.31 3.77 3.77 0 003.77 3.77h11.3a3.77 3.77 0 003.76-3.77A32.05 32.05 0 00258.16 0a32.07 32.07 0 00-30.92 23.7h20.7z" fill="currentColor"></path>
3 | </svg>
--------------------------------------------------------------------------------
/documentation/static/img/tailwind.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>file_type_tailwind</title><path d="M9,13.7q1.4-5.6,7-5.6c5.6,0,6.3,4.2,9.1,4.9q2.8.7,4.9-2.1-1.4,5.6-7,5.6c-5.6,0-6.3-4.2-9.1-4.9Q11.1,10.9,9,13.7ZM2,22.1q1.4-5.6,7-5.6c5.6,0,6.3,4.2,9.1,4.9q2.8.7,4.9-2.1-1.4,5.6-7,5.6c-5.6,0-6.3-4.2-9.1-4.9Q4.1,19.3,2,22.1Z" style="fill:#44a8b3"/></svg>
--------------------------------------------------------------------------------
/documentation/static/img/terminal.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/terminal.gif
--------------------------------------------------------------------------------
/documentation/static/img/zustand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/documentation/static/img/zustand.png
--------------------------------------------------------------------------------
/images/available.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/available.png
--------------------------------------------------------------------------------
/images/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/banner.png
--------------------------------------------------------------------------------
/images/cli.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/cli.gif
--------------------------------------------------------------------------------
/images/integrations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/integrations.png
--------------------------------------------------------------------------------
/images/next-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/next-logo.png
--------------------------------------------------------------------------------
/images/plugins.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/plugins.png
--------------------------------------------------------------------------------
/images/react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/images/react-logo.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "superplate-cli",
3 | "version": "1.20.0",
4 | "description": "The frontend boilerplate with superpowers",
5 | "license": "MIT",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/pankod/superplate.git"
9 | },
10 | "bugs": {
11 | "url": "https://github.com/pankod/superplate/issues"
12 | },
13 | "homepage": "https://pankod.github.io/superplate/",
14 | "main": "lib/api.js",
15 | "bin": {
16 | "superplate": "lib/index.js"
17 | },
18 | "files": [
19 | "lib",
20 | "templates"
21 | ],
22 | "scripts": {
23 | "dev:cli": "nodemon --watch src -e ts --ignore lib --exec npm run build:cli",
24 | "dev:global": "nodemon --watch src -e ts --ignore lib --exec \"npm run build:cli & npm run global\"",
25 | "build:cli": "npm run clean:cli && tsc && babel src --out-dir lib --extensions \".ts,.js,.json\" --source-maps inline",
26 | "clean:cli": "rm -rf ./lib",
27 | "global": "npm i -g --quiet",
28 | "test": "jest",
29 | "lint": "eslint .",
30 | "lint:fix": "eslint . --fix"
31 | },
32 | "dependencies": {
33 | "chalk": "^4.1.0",
34 | "clear": "^0.1.0",
35 | "commander": "^6.2.0",
36 | "enquirer": "^2.3.6",
37 | "fs-extra": "^9.0.1",
38 | "got": "^11.8.6",
39 | "human-id": "^4.0.0",
40 | "lodash": "^4.17.21",
41 | "node-fetch": "^2.6.11",
42 | "ora": "^5.1.0",
43 | "parse-github-url": "^1.0.2",
44 | "path": "^0.12.7",
45 | "prettier": "^2.8.4",
46 | "prettier-plugin-organize-imports": "^3.2.2",
47 | "sao": "^2.0.0-beta.1",
48 | "tar": "^4.4.19",
49 | "temp": "^0.9.4",
50 | "uuid": "^8.3.2",
51 | "valid-url": "^1.0.9",
52 | "validate-npm-package-name": "^3.0.0"
53 | },
54 | "devDependencies": {
55 | "@babel/cli": "^7.12.10",
56 | "@babel/core": "^7.12.10",
57 | "@babel/preset-env": "^7.12.11",
58 | "@babel/preset-typescript": "^7.12.7",
59 | "@types/clear": "^0.1.1",
60 | "@types/fs-extra": "^11.0.1",
61 | "@types/jest": "^26.0.20",
62 | "@types/lodash": "^4.14.172",
63 | "@types/node": "^14.14.12",
64 | "@types/node-fetch": "^2.6.4",
65 | "@types/prompts": "^2.0.11",
66 | "@types/tar": "^4.0.5",
67 | "@types/temp": "^0.8.34",
68 | "@types/uuid": "^8.3.4",
69 | "@types/valid-url": "^1.0.3",
70 | "@types/validate-npm-package-name": "^3.0.2",
71 | "@typescript-eslint/eslint-plugin": "^4.9.1",
72 | "@typescript-eslint/parser": "^4.9.1",
73 | "babel-jest": "^26.6.3",
74 | "babel-plugin-module-resolver": "^4.1.0",
75 | "babel-plugin-transform-inline-environment-variables": "^0.4.3",
76 | "concurrently": "^5.3.0",
77 | "eslint": "^7.15.0",
78 | "eslint-config-prettier": "^7.0.0",
79 | "eslint-plugin-prettier": "^3.2.0",
80 | "husky": "^4.3.7",
81 | "jest": "^26.6.3",
82 | "lint-staged": "^10.5.3",
83 | "nodemon": "^2.0.7",
84 | "ts-node": "^9.1.1",
85 | "typescript": "^4.1.2"
86 | },
87 | "husky": {
88 | "hooks": {
89 | "pre-commit": "lint-staged"
90 | }
91 | },
92 | "lint-staged": {
93 | "*.{js,ts,tsx}": [
94 | "eslint --quiet --fix"
95 | ]
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/Helper/binary/index.spec.ts:
--------------------------------------------------------------------------------
1 | import { BinaryHelper } from "./";
2 |
3 | describe("Binary Helper", () => {
4 | it("has CanUseYarn function", async () => {
5 | expect(typeof BinaryHelper.CanUseYarn).toBe("function");
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/src/Helper/binary/index.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from "child_process";
2 |
3 | export const BinaryHelper = {
4 | CanUseYarn: (): boolean => {
5 | try {
6 | execSync("yarn --version", { stdio: "ignore" });
7 | return true;
8 | } catch (e) {
9 | return false;
10 | }
11 | },
12 | CanUsePnpm: (): boolean => {
13 | try {
14 | execSync("pnpm --version", { stdio: "ignore" });
15 | return true;
16 | } catch (e) {
17 | return false;
18 | }
19 | },
20 | CanUseDirAsName: (projectDir: string): boolean => {
21 | // eslint-disable-next-line no-useless-escape
22 | const invalidChars = /[\\\/,.]/;
23 | return !invalidChars.test(projectDir);
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/src/Helper/download/index.ts:
--------------------------------------------------------------------------------
1 | import { createWriteStream } from "fs";
2 | import got from "got";
3 | import gitHubURLParser from "parse-github-url";
4 | import { join } from "path";
5 | import { Stream } from "stream";
6 | import tar from "tar";
7 | import { mkdirSync } from "temp";
8 | import { promisify } from "util";
9 |
10 | const pipeline = promisify(Stream.pipeline);
11 | const TEMP_PREFIX = "superplate-core-plugins.temp";
12 |
13 | export const DownloadHelper = {
14 | DownloadAndGetPath: async (
15 | path: string,
16 | branch?: string,
17 | ): Promise<string> => {
18 | try {
19 | const tempFolder = mkdirSync({
20 | dir: process.cwd(),
21 | prefix: ".",
22 | });
23 | const tempFile = join(tempFolder, `${TEMP_PREFIX}-${Date.now()}`);
24 |
25 | const {
26 | owner,
27 | name,
28 | branch: branchFromURL,
29 | } = gitHubURLParser(path);
30 | const url = `https://codeload.github.com/${owner}/${name}/tar.gz/${
31 | branch ?? branchFromURL
32 | }`;
33 | await pipeline(got.stream(url), createWriteStream(tempFile));
34 |
35 | await tar.x({
36 | file: tempFile,
37 | cwd: tempFolder,
38 | strip: 1,
39 | });
40 |
41 | return tempFolder;
42 | } catch (e) {
43 | throw new Error(e instanceof Error ? e.message : (e as string));
44 | }
45 | },
46 | };
47 |
--------------------------------------------------------------------------------
/src/Helper/fs/index.spec.ts:
--------------------------------------------------------------------------------
1 | import { FSHelper } from "./";
2 |
3 | describe("FS Helper", () => {
4 | it("correct path exist", async () => {
5 | const isPathExists = await FSHelper.IsPathExists(".");
6 | expect(isPathExists).toBeTruthy();
7 | });
8 |
9 | it("incorrect path exist", async () => {
10 | const isPathExists = await FSHelper.IsPathExists("../pankod");
11 | expect(isPathExists).toBeFalsy();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/Helper/fs/index.ts:
--------------------------------------------------------------------------------
1 | import { access, readdir } from "fs";
2 | import { promisify } from "util";
3 |
4 | export const FSHelper = {
5 | IsPathExists: async (path: string): Promise<boolean> => {
6 | try {
7 | await promisify(access)(path);
8 | return true;
9 | } catch (e) {
10 | return false;
11 | }
12 | },
13 |
14 | ReadDir: async (path: string): Promise<string[]> => {
15 | try {
16 | return await promisify(readdir)(path);
17 | } catch (e) {
18 | return [];
19 | }
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/Helper/getRandomName/index.ts:
--------------------------------------------------------------------------------
1 | import humanId from "human-id";
2 |
3 | export const getRandomName = (): string => {
4 | const name = humanId({
5 | separator: "-",
6 | capitalize: false,
7 | adjectiveCount: 1,
8 | });
9 |
10 | return name;
11 | };
12 |
--------------------------------------------------------------------------------
/src/Helper/git/index.spec.ts:
--------------------------------------------------------------------------------
1 | import { GitHelper } from "./";
2 |
3 | describe("Git Helper", () => {
4 | it("not found git url IsRepoExist", async () => {
5 | const isRepoExist = await GitHelper.IsRepoExist(
6 | "http://github.com/alibaba/ciftligi",
7 | );
8 |
9 | expect(isRepoExist.error).toBe("Source repository not found.");
10 | });
11 |
12 | it("not valid git url IsRepoExist", async () => {
13 | const isRepoExist = await GitHelper.IsRepoExist("pankod");
14 |
15 | expect(isRepoExist.error).toBe("Source path not valid");
16 | });
17 |
18 | it("valid git url CloneAndGetPath", async () => {
19 | const cloneAndPath = GitHelper.CloneAndGetPath(
20 | "https://github.com/pankod/action-test",
21 | );
22 |
23 | await expect(cloneAndPath).resolves.not.toBeUndefined();
24 | });
25 |
26 | it("invalid git url CloneAndGetPath", async () => {
27 | const cloneAndPath = GitHelper.CloneAndGetPath("https://pankod.com");
28 |
29 | await expect(cloneAndPath).rejects.toThrowError();
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/src/Helper/git/index.ts:
--------------------------------------------------------------------------------
1 | import { UrlHelper } from "@Helper";
2 | import { exec } from "child_process";
3 | import { mkdir } from "temp";
4 | import { promisify } from "util";
5 |
6 | export const GitHelper = {
7 | IsRepoExist: async (
8 | path: string,
9 | ): Promise<{ exists: boolean; error?: string }> => {
10 | if (UrlHelper.IsUrl(path)) {
11 | try {
12 | await promisify(exec)(
13 | `git ls-remote ${UrlHelper.GetGitUrl(path)}`,
14 | );
15 | return { exists: true };
16 | } catch (e) {
17 | return { exists: false, error: "Source repository not found." };
18 | }
19 | }
20 | return { exists: false, error: "Source path not valid" };
21 | },
22 | CloneAndGetPath: async (path: string, branch?: string): Promise<string> => {
23 | try {
24 | const tempInfo = await promisify(mkdir)("");
25 | await promisify(exec)(
26 | `git clone --depth 1 ${
27 | branch ? `--branch ${branch}` : ""
28 | } ${UrlHelper.GetGitUrl(path)} "${tempInfo}"`,
29 | );
30 | return tempInfo;
31 | } catch (e) {
32 | throw new Error(e instanceof Error ? e.message : (e as string));
33 | }
34 | },
35 | CanGitInit: async (root: string): Promise<boolean> => {
36 | const [isGit, isHg] = await Promise.all([
37 | isInGitRepository(root),
38 | isInMercurialRepository(root),
39 | ]);
40 |
41 | return !isGit && !isHg;
42 | },
43 | };
44 |
45 | async function isInGitRepository(root: string): Promise<boolean> {
46 | try {
47 | await promisify(exec)("git rev-parse --is-inside-work-tree", {
48 | cwd: root,
49 | });
50 | return true;
51 | } catch (_) {
52 | //
53 | }
54 | return false;
55 | }
56 |
57 | async function isInMercurialRepository(root: string): Promise<boolean> {
58 | try {
59 | await promisify(exec)("hg --cwd . root", {
60 | cwd: root,
61 | });
62 | return true;
63 | } catch (_) {
64 | //
65 | }
66 | return false;
67 | }
68 |
--------------------------------------------------------------------------------
/src/Helper/humanize/index.ts:
--------------------------------------------------------------------------------
1 | export const HumanizeChoices = {
2 | get: (
3 | choice: string,
4 | projectType?: string,
5 | ): { title: string; description: string; value: string } => {
6 | switch (choice) {
7 | case "react":
8 | return {
9 | title: "React",
10 | description: "Creates a React CRA project",
11 | value: choice,
12 | };
13 | case "nextjs":
14 | return {
15 | title: "NextJS",
16 | description: "Creates a Next.js project",
17 | value: choice,
18 | };
19 | case "refine-vite":
20 | return {
21 | title: projectType === "refine" ? "Vite" : "refine (Vite)",
22 | description: "Creates a refine React Vite project.",
23 | value: choice,
24 | };
25 | case "refine-nextjs":
26 | return {
27 | title:
28 | projectType === "refine"
29 | ? "Next.js"
30 | : "refine (Next.js)",
31 | description:
32 | "Creates a refine Next.js project with SSR support.",
33 | value: choice,
34 | };
35 | case "refine-remix":
36 | return {
37 | title:
38 | projectType === "refine" ? "Remix" : "refine (Remix)",
39 | description:
40 | "Creates a refine Remix project with SSR support",
41 | value: choice,
42 | };
43 | case "refine-react":
44 | return {
45 | title:
46 | projectType === "refine"
47 | ? "CRA [Legacy]"
48 | : "refine (CRA) [Legacy]",
49 | description: "Creates a basic refine project",
50 | value: choice,
51 | };
52 |
53 | default:
54 | return {
55 | title: choice,
56 | description: "",
57 | value: choice,
58 | };
59 | }
60 | },
61 | };
62 |
--------------------------------------------------------------------------------
/src/Helper/index.ts:
--------------------------------------------------------------------------------
1 | export { BinaryHelper } from "./binary";
2 | export { DownloadHelper } from "./download";
3 | export { FSHelper } from "./fs";
4 | export { getRandomName } from "./getRandomName";
5 | export { GitHelper } from "./git";
6 | export { HumanizeChoices } from "./humanize";
7 | export {
8 | get_prompts_and_choices,
9 | get_random_answer,
10 | get_random_answers,
11 | } from "./lucky";
12 | export {
13 | mergeBabel,
14 | mergeJSONFiles,
15 | mergePackages,
16 | mergePluginData,
17 | mergeWithUnionArray,
18 | } from "./merge";
19 | export { get_potential_package_managers } from "./npm";
20 | export {
21 | concatExtend,
22 | extendBase,
23 | getExtend,
24 | getPluginsArray,
25 | handleIgnore,
26 | } from "./plugin";
27 | export { get_presets } from "./preset";
28 | export {
29 | get_project_types,
30 | get_source,
31 | is_multi_type,
32 | prompt_project_types,
33 | } from "./source";
34 | export { tips } from "./tips";
35 | export { UrlHelper } from "./url";
36 |
--------------------------------------------------------------------------------
/src/Helper/lucky/index.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 |
3 | export type ProjectPrompt = {
4 | name: string;
5 | type: "select";
6 | choices: { name?: string; message: string; value?: string }[];
7 | default?: string;
8 | skip?: ({ answers }: { answers: Record<string, string> }) => boolean;
9 | };
10 |
11 | export const get_prompts_and_choices = async (
12 | source: string,
13 | ): Promise<ProjectPrompt[]> => {
14 | try {
15 | // eslint-disable-next-line @typescript-eslint/no-var-requires
16 | const sourcePrompts = require(path.resolve(source, "prompt.js"));
17 |
18 | return (sourcePrompts.prompts ?? []) as ProjectPrompt[];
19 | } catch (e) {
20 | return [];
21 | }
22 | };
23 |
24 | export const get_random_answer = (
25 | projectPrompt: ProjectPrompt,
26 | currentAnswers: Record<string, string>,
27 | ): [key: string, value: string | undefined] | undefined => {
28 | if (projectPrompt.skip && projectPrompt.skip({ answers: currentAnswers })) {
29 | return undefined;
30 | }
31 |
32 | const randomIndex = Math.floor(
33 | Math.random() * projectPrompt.choices.length,
34 | );
35 |
36 | const { name, value } = projectPrompt.choices[randomIndex];
37 |
38 | return [projectPrompt.name, name ?? value ?? undefined];
39 | };
40 |
41 | export const get_random_answers = (
42 | projectPrompts: ProjectPrompt[],
43 | ): Record<string, string> => {
44 | const answers: Record<string, string> = {};
45 |
46 | for (const prompt of projectPrompts) {
47 | const [key, value] = get_random_answer(prompt, answers) ?? [];
48 | if (key && value) {
49 | answers[key] = value;
50 | }
51 | }
52 |
53 | return { ...answers };
54 | };
55 |
--------------------------------------------------------------------------------
/src/Helper/npm/index.ts:
--------------------------------------------------------------------------------
1 | import { BinaryHelper } from "@Helper";
2 |
3 | export const get_potential_package_managers = (): Array<{
4 | message: string;
5 | name: string;
6 | }> => {
7 | const pmQuestionChoises = [
8 | {
9 | message: "Npm",
10 | name: "npm",
11 | hint: "Dependencies will be installed via npm ",
12 | },
13 | ];
14 | const canUseYarn = BinaryHelper.CanUseYarn();
15 | const canUsePnpm = BinaryHelper.CanUsePnpm();
16 | if (canUseYarn) {
17 | pmQuestionChoises.push({
18 | message: "Yarn",
19 | name: "yarn",
20 | hint: "Dependencies will be installed via yarn",
21 | });
22 | }
23 |
24 | if (canUsePnpm) {
25 | pmQuestionChoises.push({
26 | message: "pnpm"
27 | .split("")
28 | .map((v) =>
29 | Math.round(Math.random())
30 | ? v.toUpperCase()
31 | : v.toLowerCase(),
32 | )
33 | .join(""),
34 | name: "pnpm",
35 | hint: "Dependencies will be installed via pnpm",
36 | });
37 | }
38 |
39 | return pmQuestionChoises;
40 | };
41 |
--------------------------------------------------------------------------------
/src/Helper/plugin/index.ts:
--------------------------------------------------------------------------------
1 | import { mergeWithUnionArray } from "@Helper";
2 | import path from "path";
3 |
4 | interface ExtendType extends Record<string, unknown> {
5 | _app: {
6 | import: string[];
7 | inner: string[];
8 | wrapper: [string, string][];
9 | };
10 | _document: {
11 | import: string[];
12 | initialProps: string[];
13 | };
14 | }
15 |
16 | export const extendBase: Required<ExtendType> = {
17 | _app: {
18 | import: [],
19 | inner: [],
20 | wrapper: [],
21 | },
22 | _document: {
23 | import: [],
24 | initialProps: [],
25 | },
26 | };
27 |
28 | type Answer = string | string[] | boolean | undefined;
29 | type AnswersType = Record<string, Answer>;
30 |
31 | type IgnoreType = {
32 | plugin?: string[];
33 | when: (answers: Record<string, Answer>) => boolean;
34 | pattern: string[];
35 | };
36 |
37 | type IgnoreHandlerFn = (
38 | ignores: IgnoreType[],
39 | answers: AnswersType,
40 | plugin: string,
41 | ) => Record<string, false>;
42 |
43 | export const getPluginsArray: (answers: Record<string, Answer>) => string[] = (
44 | answers,
45 | ) => {
46 | return Object.entries(answers)
47 | .reduce((acc: string[], [key, value]) => {
48 | if (typeof value === "boolean" && value) return [...acc, key];
49 | if (typeof value === "string") return [...(acc as string[]), value];
50 | if (Array.isArray(value)) return [...(acc as string[]), ...value];
51 | return acc;
52 | }, [])
53 | .filter((value: string) => value !== "none" && value !== "no");
54 | };
55 |
56 | export const getExtend: (
57 | pluginPath: string,
58 | pluginName: string,
59 | ) => { extend: (answers: Record<string, Answer>) => ExtendType } | undefined = (
60 | pluginPath,
61 | pluginName,
62 | ) => {
63 | try {
64 | // eslint-disable-next-line @typescript-eslint/no-var-requires
65 | const pluginExtend = require(path.join(
66 | pluginPath,
67 | "plugins",
68 | pluginName,
69 | "extend.js",
70 | ));
71 |
72 | return pluginExtend;
73 | } catch (e) {
74 | return undefined;
75 | }
76 | };
77 |
78 | export const concatExtend: (
79 | base: ExtendType,
80 | plugins: string[],
81 | sourcePath: string,
82 | answers: Record<string, Answer>,
83 | ) => ExtendType = (base, plugins, sourcePath, answers) => {
84 | const merged = mergeWithUnionArray(
85 | base,
86 | ...plugins.map((plugin: string) => {
87 | const pluginExtendFile = getExtend(sourcePath, plugin);
88 | if (pluginExtendFile) {
89 | const pluginExtends = pluginExtendFile.extend(answers);
90 | return pluginExtends;
91 | }
92 | return {};
93 | }),
94 | );
95 |
96 | return merged as ExtendType;
97 | };
98 |
99 | export const handleIgnore: IgnoreHandlerFn = (
100 | ignores: IgnoreType[],
101 | answers,
102 | plugin,
103 | ) => {
104 | const filters: ReturnType<IgnoreHandlerFn> = {};
105 |
106 | ignores.forEach((ignore) => {
107 | if (
108 | !!ignore.plugin === false ||
109 | (!!ignore.plugin && ignore.plugin.includes(plugin))
110 | ) {
111 | const condition = ignore.when?.(answers);
112 | if (condition) {
113 | ignore.pattern.forEach((pattern) => {
114 | filters[pattern] = false;
115 | });
116 | }
117 | }
118 | });
119 |
120 | return filters;
121 | };
122 |
--------------------------------------------------------------------------------
/src/Helper/preset/index.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 |
3 | export type Preset = {
4 | name: string;
5 | type: string;
6 | answers: Record<string, string>;
7 | };
8 |
9 | export const get_presets = async (source: string): Promise<Preset[]> => {
10 | try {
11 | // eslint-disable-next-line @typescript-eslint/no-var-requires
12 | const sourcePrompts = require(path.resolve(source, "presets.js"));
13 |
14 | return (sourcePrompts.presets ?? []) as Preset[];
15 | } catch (e) {
16 | return [];
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/src/Helper/prettier/index.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 | import { format } from "prettier";
4 |
5 | export const formatFiles = (dirPath: string): void => {
6 | const resolvedPath = path.resolve(dirPath);
7 |
8 | const dir = fs.readdirSync(resolvedPath);
9 |
10 | const subDirs = dir.filter((d) =>
11 | fs.lstatSync(path.join(resolvedPath, d)).isDirectory(),
12 | );
13 | const files = dir.filter((d) =>
14 | fs.lstatSync(path.join(resolvedPath, d)).isFile(),
15 | );
16 |
17 | files.map((f) => {
18 | const filePath = path.join(resolvedPath, f);
19 |
20 | const fileContent = fs.readFileSync(filePath).toString();
21 |
22 | try {
23 | const formattedFile = format(fileContent, {
24 | filepath: filePath,
25 | });
26 |
27 | fs.writeFileSync(filePath, formattedFile);
28 | } catch (e) {
29 | // Ignore files that can't be formatted like .gitignore
30 | }
31 | });
32 |
33 | subDirs.map((d) => {
34 | return formatFiles(path.join(resolvedPath, d));
35 | });
36 | };
37 |
--------------------------------------------------------------------------------
/src/Helper/source/index.d.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pankod/superplate/c01be5929a1eb24f5dc505e764e093df8da887bb/src/Helper/source/index.d.ts
--------------------------------------------------------------------------------
/src/Helper/source/index.spec.ts:
--------------------------------------------------------------------------------
1 | import { promisify } from "util";
2 | import { get_source, sort_project_types } from "./";
3 |
4 | jest.mock("util", () => ({
5 | promisify: jest.fn(),
6 | inherits: () => ({
7 | custom: {},
8 | }),
9 | inspect: () => ({}),
10 | }));
11 |
12 | describe("Source Helper", () => {
13 | it("incorrect source url/path", async () => {
14 | const source = await get_source("alibaba");
15 | expect(source.error).toBe("Source path not valid");
16 | });
17 |
18 | it("incorrect source url/path", async () => {
19 | const source = await get_source("https://github.com/alibaba/ciftligi");
20 | expect(source.error).toBe("Source repository not found.");
21 | });
22 |
23 | it("correct source url", async () => {
24 | (promisify as any).mockImplementation(() => jest.fn());
25 |
26 | const source = await get_source("superplate-core-plugins");
27 | expect(source.error).toBe(undefined);
28 | });
29 |
30 | it("Sort project types", async () => {
31 | const cases = [
32 | {
33 | input: [
34 | { title: "Refine React", value: "refine-react" },
35 | { title: "Next.js", value: "nextjs" },
36 | { title: "React", value: "react" },
37 | { title: "Refine Vite", value: "refine-vite" },
38 | { title: "Refine Next.js", value: "refine-nextjs" },
39 | { title: "Refine Remix", value: "refine-remix" },
40 | ],
41 | expectedOutput: [
42 | { title: "Refine Vite", value: "refine-vite" },
43 | { title: "Refine Next.js", value: "refine-nextjs" },
44 | { title: "Refine Remix", value: "refine-remix" },
45 | { title: "Refine React", value: "refine-react" },
46 | { title: "React", value: "react" },
47 | { title: "Next.js", value: "nextjs" },
48 | ],
49 | },
50 | {
51 | input: [
52 | { title: "Next.js", value: "nextjs" },
53 | { title: "Refine React", value: "refine-react" },
54 | { title: "Refine Next.js", value: "refine-nextjs" },
55 | { title: "Refine Remix", value: "refine-remix" },
56 | { title: "React", value: "react" },
57 | { title: "Refine Vite", value: "refine-vite" },
58 | ],
59 | expectedOutput: [
60 | { title: "Refine Vite", value: "refine-vite" },
61 | { title: "Refine Next.js", value: "refine-nextjs" },
62 | { title: "Refine Remix", value: "refine-remix" },
63 | { title: "Refine React", value: "refine-react" },
64 | { title: "React", value: "react" },
65 | { title: "Next.js", value: "nextjs" },
66 | ],
67 | },
68 | {
69 | input: [
70 | { title: "Refine React", value: "refine-react" },
71 | { title: "Refine Next.js", value: "refine-nextjs" },
72 | { title: "Refine Remix", value: "refine-remix" },
73 | { title: "Refine Vite", value: "refine-vite" },
74 | ],
75 | expectedOutput: [
76 | { title: "Refine Vite", value: "refine-vite" },
77 | { title: "Refine Next.js", value: "refine-nextjs" },
78 | { title: "Refine Remix", value: "refine-remix" },
79 | { title: "Refine React", value: "refine-react" },
80 | ],
81 | },
82 | {
83 | input: [],
84 | expectedOutput: [],
85 | },
86 | ];
87 |
88 | cases.forEach((c) => {
89 | expect(sort_project_types(c.input)).toEqual(c.expectedOutput);
90 | });
91 | });
92 | });
93 |
--------------------------------------------------------------------------------
/src/Helper/tips/index.ts:
--------------------------------------------------------------------------------
1 | import chalk from "chalk";
2 |
3 | const indent = (indent = 1, tabWidth = 2) => {
4 | return "".padStart(indent * tabWidth);
5 | };
6 |
7 | const preInstall = (): void => undefined;
8 |
9 | type PostInstallFn = (opts: {
10 | name: string;
11 | dir: string;
12 | pm: "yarn" | "npm" | "pnpm";
13 | }) => void;
14 |
15 | const postInstall: PostInstallFn = ({ name, dir, pm }) => {
16 | console.log("");
17 |
18 | console.log(
19 | `${chalk.green.bold("Success!")} Created ${chalk.greenBright.bold(
20 | name,
21 | )} at ${chalk.bold(dir)} 🚀`,
22 | );
23 | console.log("");
24 |
25 | console.log("Start developing by:\n");
26 | console.log(`${indent()}\u203a ${chalk.greenBright("cd")} ${dir}`);
27 | console.log(
28 | `${indent()}\u203a ${chalk.greenBright(
29 | pm === "yarn" || pm === "pnpm" ? `${pm} dev` : "npm run dev",
30 | )}`,
31 | );
32 | console.log("");
33 |
34 | console.log(
35 | `${indent()}\u203a Join us at ${chalk.cyanBright(
36 | "https://discord.gg/refine",
37 | )}`,
38 | );
39 | console.log("");
40 | };
41 |
42 | export const tips = {
43 | preInstall,
44 | postInstall,
45 | };
46 |
--------------------------------------------------------------------------------
/src/Helper/url/index.spec.ts:
--------------------------------------------------------------------------------
1 | import { UrlHelper } from "./";
2 |
3 | describe("Url Helper", () => {
4 | it("incorrect url", async () => {
5 | const isUrl = UrlHelper.IsUrl("alibaba");
6 | expect(isUrl).toBeFalsy();
7 | });
8 |
9 | it("correct url", async () => {
10 | const isUrl = UrlHelper.IsUrl("https://pankod.com");
11 | expect(isUrl).toBeTruthy();
12 | });
13 |
14 | it("create git url without .git extension", async () => {
15 | const gitUrl = UrlHelper.GetGitUrl("https://pankod.com");
16 | expect(gitUrl).toBe("https://pankod.com.git");
17 | });
18 |
19 | it("create git url with .git extension", async () => {
20 | const gitUrl = UrlHelper.GetGitUrl("https://pankod.com.git");
21 | expect(gitUrl).toBe("https://pankod.com.git");
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/Helper/url/index.ts:
--------------------------------------------------------------------------------
1 | import { isUri } from "valid-url";
2 |
3 | export const UrlHelper = {
4 | IsUrl: (path: string): boolean => {
5 | return !!isUri(path);
6 | },
7 | GetGitUrl: (path: string): string => {
8 | if (path.slice(-4) === ".git") return path;
9 | return path + ".git";
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/src/api.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { Options, SAO } from "sao";
3 |
4 | export interface IPreset {
5 | name: string;
6 | type: string;
7 | answers: Record<string, string>;
8 | }
9 |
10 | const generator = path.resolve(__dirname, "./");
11 |
12 | export const api = async (
13 | applicationName: string,
14 | outDir: string,
15 | sourcePath: string,
16 | preset: IPreset,
17 | commitMessage?: string,
18 | ): Promise<void> => {
19 | const sao = new SAO({
20 | generator,
21 | outDir,
22 | logLevel: 1,
23 | appName: applicationName,
24 | answers: true,
25 | extras: {
26 | apiMode: true,
27 | debug: false,
28 | commitMessage,
29 | projectType: preset.type,
30 | paths: {
31 | sourcePath,
32 | },
33 | presetAnswers: preset.answers,
34 | },
35 | } as Options);
36 |
37 | await sao.run().catch((err) => {
38 | console.error("Error happened", err);
39 | });
40 | };
41 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | import cli from "./cli";
3 |
4 | cli();
5 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": ["template/", "lib/", "templates/", "tmp/"],
3 | "compilerOptions": {
4 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
5 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
6 | "lib": [
7 | "es6",
8 | "es2015"
9 | ] /* Specify library files to be included in the compilation. */,
10 | "moduleResolution": "node",
11 | "noEmit": true,
12 | "declaration": true /* Generates corresponding '.d.ts' file. */,
13 | "outDir": "lib" /* Redirect output structure to the directory. */,
14 | "baseUrl": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
15 | "strict": true /* Enable all strict type-checking options. */,
16 | "types": [
17 | "node",
18 | "jest"
19 | ] /* Type declaration files to be included in compilation. */,
20 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
21 | "resolveJsonModule": true,
22 | "typeRoots": ["node_modules/@types", "@types"],
23 | "allowSyntheticDefaultImports": true,
24 | "skipLibCheck": true /* Skip type checking of declaration files. */,
25 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
26 | "paths": {
27 | "@Helper": ["./Helper"],
28 | "@Helper/*": ["./Helper/*"]
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------