React support (#243)

* templates support for react * add react support * update react template * react template fixes * strict false for styled-components types * React support tailwind (#237) * add dynamic metaJSONPath * add init page for react template * remove log * Update templates/react/pages/index.tsx Co-authored-by: Ömer Faruk APLAK <[email protected]> Co-authored-by: Ömer Faruk APLAK <[email protected]> * pages in to src folder * Add gitignore file. (#242) * react documentation (#247) * add multiple project support for cli * bump 1.1.2 * React docs fixes (#248) * fixes for react documentation * cli terminal gifs * read me images update * update travis docs * update GA docs * update sidevar and footer links * update README.md * update README.md * Update README.MD Co-authored-by: Necati Özmen <[email protected]> * update README.md * update README.md Co-authored-by: Aydın Akyol <[email protected]> Co-authored-by: Yıldıray Ünlü <[email protected]> Co-authored-by: Necati Özmen <[email protected]>
pankod · May 11, 2021 · 01797aa · 01797aa
1 parent f280c9e
commit 01797aa
Show file tree

Hide file tree

Showing 114 changed files with 30,809 additions and 9,218 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,4 @@
 node_modules
 lib
-template/*
+templates/*
 documentation
diff --git a/@types/sao.d.ts b/@types/sao.d.ts
@@ -308,6 +308,7 @@ interface IPaths {
 interface IExtras {
     debug: boolean;
     paths: IPaths;
+    projectType: string;
 }
 interface Options$1 {
     appName?: string;

diff --git a/README.MD b/README.MD
@@ -1,126 +1,128 @@
 <div align="center">
-<img src="images/banner.png"  align="center" />
+<a href="https://pankod.github.io/superplate/">
+  <img src="images/banner.png"  align="center" />
+</a>
 </div>
 <br/>
-<div align="center">A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates project for Next.js.</div>
+<div align="center">A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js.</div>
 <br/>
 
-
 <div align="center">
 
-
 <a href="https://www.producthunt.com/posts/superplate?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-superplate" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=293252&theme=light" alt="Superplate - The frontend boilerplate with superpowers | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
-
 [![Meercode CI Score](https://meercode.io/badge/pankod/superplate?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)
 [![Meercode CI Success Rate](https://meercode.io/badge/pankod/superplate?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)
 [![Maintainability](https://api.codeclimate.com/v1/badges/eb4b5a8f88b6e511e61d/maintainability)](https://codeclimate.com/github/pankod/superplate/maintainability)
 [![npm version](https://img.shields.io/npm/v/superplate-cli.svg)](https://www.npmjs.com/package/superplate-cli)
 [![dependencies Status](https://david-dm.org/pankod/superplate/status.svg)](https://david-dm.org/pankod/superplate)
-[![dev-dependencies Status](https://david-dm.org/pankod/superplate/dev-status.svg)](https://david-dm.org/pankod/superplate?type=dev) 
+[![dev-dependencies Status](https://david-dm.org/pankod/superplate/dev-status.svg)](https://david-dm.org/pankod/superplate?type=dev)
 
 [![npm](https://img.shields.io/npm/dm/superplate-cli)](https://www.npmjs.com/package/superplate-cli)
 
 </div>
 
-
 <br/>
 <div align="center">
   <sub>Created by <a href="https://www.pankod.com">Pankod</a></sub>
 </div>
 
-
 ## About
 
-
 superplate has been developed to create rock solid UI frameworks apps boilerplate with no build configurations in seconds.
 
 You can add usefull, highly-demands front-end development tools and libraries as a plugin by using superplate CLI during the project creation phase.
 
-
 To learn on how superplate and its plugins work, you can check out our [documentation](https://pankod.github.io/superplate/).
 
-
-For now, superplate only creates project for Next.js apps as a default Framework option. Other frameworks will be added soon.
+For now, superplate only creates project for Create React App and Next.js apps as a default Framework option. Other frameworks will be added soon.
 
 ## Available Integrations
+<a href="https://pankod.github.io/superplate/docs/">
+  <img src="images/available.png"  align="center" />
+</a>
 
-
-<img src="images/available.png"  align="center" />
-
-
+<br />
+<br />
 
 ## Coming Soon
-<img src="images/integrations.png"  align="center" />
 
+<a href="https://pankod.github.io/superplate/docs/">
+  <img src="images/integrations.png"  align="center" />
+</a>
+
+<br />
+<br />
 
 ## Documentation
+
 For more detailed information and usage, refer to the [superplate documentation](https://pankod.github.io/superplate/).
+
 ## Quick Start
-To create a new app run the command:
 
+To create a new app run the command:
 
 ```bash
 npx superplate-cli <my-project>
 ```
-Make sure you have npx installed (npx is shipped by default since npm 5.2.0)
-
-You will be prompted with plugin options to create your project without spending hours on configurations. To find out more about all the plugins see the [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).
-
 
+Make sure you have npx installed (npx is shipped by default since npm 5.2.0)
 
+You will be prompted with plugin options to create your project without spending hours on configurations. To find out more about Next.js plugins see the [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins) and React plugins see the [superplate-react-core-plugins](https://github.com/pankod/superplate-react-core-plugins)
 
 <p align='center'>
 <img src='images/cli.gif' width='500' alt='superplate example'>
 </p>
 
-
-Once all questions are answered, it will install all plugins and the dependencies. Then  navigate to the project folder and launch it:
+Once all questions are answered, it will install all plugins and the dependencies. Then navigate to the project folder and launch it:
 
 ```bash
 npm run dev
 ```
->Use the dev command when running application in development mode.
+
+> Use the dev command when running application in development mode.
+
 ## Philosophy
 
-- It provides a easy starting to your project in seconds with using industry-standard best practices and performance oriented tools & libraries.
-- You can easily develop your own framework CLI and plugins according to your needs to on top of superplate codebase due to its framework/plugin agnostic nature.
-- Code examples are added to plugin documents to show how best practices are implementing.
+-   It provides a easy starting to your project in seconds with using industry-standard best practices and performance oriented tools & libraries.
+-   You can easily develop your own framework CLI and plugins according to your needs to on top of superplate codebase due to its framework/plugin agnostic nature.
+-   Code examples are added to plugin documents to show how best practices are implementing.
 
 ## Next.js Integration
 
-superplate  makes it easier to get up and running with a well-structured Next.js and TypeScript application.
+superplate makes it easier to get up and running with a well-structured Next.js and TypeScript application.
 
+Next.js is a minimalistic React framework that runs on the browser and the server with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. It offers developers an easy way to get started, build server-side rendering and static web applications using React.
 
-Next.js is a minimalistic React framework that runs on the browser and the server  with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. It offers developers an easy way to get started, build server-side rendering and static web applications using React.
+## React Integration
+
+superplate makes it easier to get up and running with a well-structured Create React App and TypeScript application.
 
 ## Plugins
-superplate uses a plugin-based architecture. Basically, plugins are created from highly-demanded npm tools in the front-end ecosystem with configuration files. 
+
+superplate uses a plugin-based architecture. Basically, plugins are created from highly-demanded npm tools in the front-end ecosystem with configuration files.
 
 The features and tools listed during the project creation process are implemented as plugins.
 
-You can check them out in [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins). 
+You can check them out in [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins) and [superplate-react-core-plugins](https://github.com/pankod/superplate-react-core-plugins).
 
 The default core plugins determined by <a href="https://www.pankod.com">Pankod</a> team uses on a day-to-day basis to build apps. Feel free to send PR or open an issue for new plugins you want to add.
 
-
 ### Using a custom source of plugins
 
-You can use different sources for plugins other than [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins). 
+You can use different sources for plugins other than [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).
 
-Simply add `--source <path-to-source>` option to use **superplate** with a custom source. 
+Simply add `--source <path-to-source>` option to use **superplate** with a custom source.
 
 To learn more about sources and how to create your own; please check out [documentation](https://pankod.github.io/superplate/docs/development/how-it-works/#creating-a-source-repository)
 
 ### Creating a plugin
 
 **superplate** gives you many abilities to create your own plugin and interact with the others. To learn more on creating a plugin, please check out [documentation](https://pankod.github.io/superplate/docs/development/creating-a-plugin)
 
-
-
 ## Avaliable plugins
-<img src="images/plugins.png"  align="center" />
 
+<img src="images/plugins.png"  align="center" />
 
 ## CLI options
 
@@ -132,35 +134,30 @@ Options:
  -v, --version                   prints version number
  -h, --help                      prints help information on all commands and options
  -d, --debug                     prints additional logs
- -s, --source <path-to-source>   Use this option to target a custom source of plugins 
-                                 Source path can be a remote git repository or a local path.  
+ -s, --source <path-to-source>   Use this option to target a custom source of plugins
+                                 Source path can be a remote git repository or a local path.
 ```
 
-
 ## Development mode commands
 
-
 Watch for changes in the code; build the project and then globally install the superplate for testing.
+
 ```
 npm run dev:global
 ```
 
 Create a build inside `/lib` directory.
 
- ```
- npm run build:cli
- ```
-
+```
+npm run build:cli
+```
 
 Install the current build globally
 
-
 ```
 npm run global
 ```
 
-
-
 ## Contribution
 
 If you have a bug to report, do not hesitate to file an issue.

diff --git a/documentation/docs/development/creating-a-plugin.md b/documentation/docs/development/creating-a-plugin.md
@@ -22,7 +22,7 @@ mkdir plugins/styled-components
 
 We need to add our plugin to appropriate place in `prompt.js` file. We can ask the user for a styling and place `styled-components` inside it.
 
-```js
+```ts
 module.exports = {
     prompts: [
         {
@@ -64,7 +64,7 @@ Let's say that we want to prompt the users, asking them if they want to include
 
 We can do so by simply modifying our `prompt.js`. Append below codes to your prompts array. 
 
-```js
+```ts
 {
     name: "ssr",
     message: "Do you want styled-components to support SSR?",
@@ -77,7 +77,7 @@ We can do so by simply modifying our `prompt.js`. Append below codes to your pro
 
 And if this prompt is not answered *Yes* we want to remove the babel plugin from `devDependencies`. We can do that by creating a `package.js` inside our plugin.
 
-```js
+```ts
 module.exports = {
     /**
      * package: the current content of your package.json
@@ -141,15 +141,15 @@ We can use EJS in our files. superplate will process all ejs templates while cre
 
 ### Modifying the `App` and the `Document`
 
-[styled-components](https://styled-components.com/docs/advanced#theming) has full support for theming. In order to use themes in our entire app; we need to modify Next.js's App component. **superplate**'s base template allows you to modify `App` and `Document`; to wrap styled-component's `ThemeProvider` we need to create an `extend.js` file.
+[styled-components](https://styled-components.com/docs/advanced#theming) has full support for theming. In order to use themes in our entire app; We need to modify Next.js's App component. **superplate**'s base template allows you to modify `App` and `Document`; to wrap styled-component's `ThemeProvider` we need to create an `extend.js` file.
 
 :::info
 
 **superplate** will merge all `extend.js` content and pass it to your templates. You only need to cover modifications for your plugin in plugin's `extend.js` file.
 
 :::
 
-```js
+```ts
 const base = {
     _app: {
         // _app.import will be appended to the import section in pages/_app.tsx file.
@@ -176,7 +176,7 @@ module.exports = {
 
 Since we try to add SSR support. We also need to modify the custom `Document`. Let's add the necessary lines for `_document.tsx` and only apply them if we select ssr support.
 
-```js
+```ts
 const base = {
     _app: {
         import: [
@@ -233,7 +233,7 @@ module.exports = {
 
 We're done for `_app` and `_document` but in many plugins you may need different template data for each plugin. You can define and return custom data to your templates for every plugin. We used `testSetup` property to handle wrappers in **superplate**'s core plugins `testing-library` and `enzyme`. These custom properties will be merged as well as `_app` and `_document`. Here's an example for custom template data.
 
-```js
+```tsx
 const base = {
     testSetup: {
         import: [
@@ -275,6 +275,11 @@ We will not cover `testing-library` and `enzyme` plugins in this article but if
 }
 ```
 
+:::info
+`Create React App` support importing modules using absolute paths. [Go to Docs →](https://create-react-app.dev/docs/importing-a-component/#absolute-imports).
+:::
+
+
 ## Custom `.babelrc`
 
 We will need a babel plugin to ensure consistency between the server and the client. Let's create a `.babelrc` file in our plugin to tell babel to use this plugin. **superplate** will merge all babel config to one just like `package.json` and `tsconfig.json` files.
@@ -286,6 +291,10 @@ We will need a babel plugin to ensure consistency between the server and the cli
 }
 ```
 
+:::info
+`Create React App` doesn’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
+:::
+
 ## Providing a Plugin Description
 
 We're using `meta.json` to collect data about plugins. You can provide an url to the docs and a description for your plugin in `meta.json`. Here's what we will use for `styled-components` plugin:
@@ -300,5 +309,9 @@ We're using `meta.json` to collect data about plugins. You can provide an url to
 
 ## Conclusion
 
-We've created a plugin from scratch to add `styled-components` to our next project with **superplate**. If you want to check out how we created different plugins, please check out [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins). To learn more about superplate's API, you can check out [References](references).
+We've created a plugin from scratch to add `styled-components` to our next project with **superplate**. If you want to check out how we created different plugins, please check out.
+ - Next.js [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).
+ - React [superplate-react-core-plugins](https://github.com/pankod/superplate-react-core-plugins).
+
+To learn more about superplate's API, you can check out [References](references).
 
diff --git a/documentation/docs/development/how-it-works.md b/documentation/docs/development/how-it-works.md
@@ -8,9 +8,10 @@ sidebar_label: How it Works?
 
 ## Creating a Source Repository
 
-We store our plugins apart from the cli to make them easy to modify and easy to create new plugins. You can see the core plugins in [this repo](https://github.com/pankod/next-cli-core-plugins).
+We store our plugins apart from the cli to make them easy to modify and easy to create new plugins. You can see the core plugins:
+ - Next.js [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins).
+ - React [superplate-react-core-plugins](https://github.com/pankod/superplate-react-core-plugins).
 
-- You can prefer to fork the `core-plugins` repo to give you a head start.
 - Alternatively, you can create your own source from scratch.
 
 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.