Merge branch 'master' of https://github.com/pankod/superplate

Author: omeraplak

README.MD

@@ -1,74 +1,168 @@
-# superplate
+<div align="center">
+<img src="images/banner.png"  align="center" />
+</div>
+<br/>
+<div align="center">Performance oriented UI Frameworks application boilerplate creator with TypeScript using the popular front-end ecosystem tools.</div>
+<br/>
+
+
+<div align="center">
+
+
+
+[![Meercode CI Score](https://meercode.io/badge/pankod/superplate?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/pankod/superplate)
+[![Meercode CI Success Rate](https://meercode.io/badge/pankod/superplate?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/pankod/superplate)
+[![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) 
+
+![npm](https://img.shields.io/npm/dw/@pankod/superplate)
+
+</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.
+
+
+
+For now, superplate only creates project starter boilerplates  for Next.js apps as a default UI Framework option. Other frameworks integration will be added soon.
+
+## Available Integrations
+
+
+<img src="images/available.png"  align="center" />
+
+
+
+## Coming Soon
+<img src="images/integrations.png"  align="center" />
+
 
-**superplate** is a CLI to save you hours of development time when starting a [Next.js](https://nextjs.org/) project. 
 
 ## Quick Start
+To create a new app run the command:
+
 
 ```bash
 npx superplate <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).
+
+
 
-Just run the command above and you will be prompted with options to create your project without spending hours on configurations. 
 
 <p align='center'>
 <img src='https://user-images.githubusercontent.com/11361964/106468355-dd9be280-64ae-11eb-82da-c313beb16d6b.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:
+
+```bash
+npm run dev
+```
+>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.
+
+## Next.js Integration
+
+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.
+
 ## Plugins
+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). 
+
+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.
 
-superplate comes with a set of plugins to get you started. You can check them out in [superplate-core-plugins](https://github.com/pankod/superplate-core-plugins). 
 
 ### 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). 
 
 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#creating-a-source-repository](X)
+To learn more about sources and how to create your own; please check out [Documentation#creating-a-source-repository](X)
 
 ### 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#creating-a-plugin](X)
 
-## Documentation
 
-To learn on how **superplate** and its plugins work, you can check out our [documentation](X)
 
-## Options
+## Avaliable plugins
+<img src="images/plugins.png"  align="center" />
 
-### `--source <path-to-source>`
 
-Alias: `-s`. Use this option to target a custom source of plugins. Source path can be a remote git repository or a local path.
+## CLI options
+
+```
+> npx superplate --help
+Usage: superplate [options]
+
+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.  
+```
 
-### `--version`
 
-Alias `-v`. Prints version number.
+## Development mode commands
 
-### `--help`
 
-Alias `-h`. Prints help information on all commands and options.
+Watch for changes in the code; build the project and then globally install the superplate for testing.
+```
+npm run dev:global
+```
 
-### `--debug`
+Create a build inside `/lib` directory.
 
-Alias `-d`. Prints additional logs.
+ ```
+ npm run build:cli
+ ```
 
-## Contribution
 
-If you have a bug to report, do not hesitate to file an issue.
+Install the current build globally
 
-If you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.
 
-## Development
+```
+npm run global
+```
 
-### `npm run dev:global`
 
-Watch for changes in the code; build the project and then globally install the superplate for testing.
 
-### `npm run build:cli`
+## Contribution
 
-Create a build inside `/lib` directory.
+If you have a bug to report, do not hesitate to file an issue.
 
-### `npm run global`
+If you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.
 
-Install the current build globally
+## License
 
+Licensed under the MIT License, Copyright © 2021-present Pankod

documentation/docs/apollo-graphql.md

@@ -157,6 +157,13 @@ All this work will be handled automatically by CLI, so you don’t need to do an
 
 :::
 
+:::warning
+
+`Apollo GraphQL` plugin currently exludes `__generated__/globalTypes.ts` at `tsconfig.json`. Typescript doesn't accept empty global files when `isolatedModules` is set to `true` which is mandatory for next.js projects. If you're going to have non empty `globalTypes.ts`, you may consider removing it from exclude.
+[There is currently an issue](https://github.com/apollographql/apollo-tooling/issues/2080) and [a related pr](https://github.com/apollographql/apollo-tooling/pull/2163) to not produce `globalTypes.ts` if it's empty.
+
+:::
+
 
 ## Adding Apollo GraphQL to your project later
 

documentation/docs/bootstrap.md

@@ -7,17 +7,59 @@ description: How to use Bootstrap with Next.js?
 
 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.
 
-:::tip
+### React Bootstrap
 
-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.
+**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.  
+[Refer to official documentation for detailed usage. &#8594](https://react-bootstrap.github.io/getting-started/introduction)
 
-:::
+- Some stylesheet is required to use React Bootstrap components.
+
+```tsx title="pages/_app.tsx"
+import "bootstrap/dist/css/bootstrap.min.css";
+```
+
+### Using Components
+
+- Import from `react-bootstrap`
+
+```js
+import { Button } from 'react-bootstrap';
+```
+
+- Or import individual components
+
+```js
+import Button from 'react-bootstrap/Button';
+```
+
+- Customize components with props
+
+```tsx title="src/components/main/index.tsx"
+<Button
+    href="https://pankod.github.io/superplate/"
+    target="_blank"
+    variant="primary"
+    size="lg">
+    Docs
+</Button>
+```
+
+- Bootstrap utility classes can also be used with components
+```tsx title="src/components/cards/index.tsx"
+<Container className="my-5 flex-grow-1">
+    ...
+</Container>
+```
 
 ### Using Sass with Bootstrap
-If `sass/scss` is selected you can start [customizing](https://getbootstrap.com/docs/4.6/getting-started/theming/#sass) in `src/styles/app.scss`  
+:::tip
+
+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.  
 [See Sass/SCSS doc &#8594](scss.md)
 
-If it's not selected, Sass can be added later to customize Bootstrap,
+:::
+
+If `sass/scss` plugin is not selected, Sass can be added later to customize Bootstrap,
 
 - Add a custom scss file `app.scss` under `src/styles`
 
@@ -73,4 +115,33 @@ npm install sass
 ```
 
 ### Adding Bootstrap to your project later
-If you didn't add bootstrap during project creation phase, you can add it later following [official docs](https://getbootstrap.com/docs/4.6/getting-started/introduction/)
+If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.
+
+- Install `react-bootstrap` and `bootstrap` packages
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  defaultValue="npm"
+  values={[
+    {label: 'npm', value: 'npm'},
+    {label: 'yarn', value: 'yarn'},
+  ]}>
+  <TabItem value="npm">
+
+```bash
+npm install react-bootstrap bootstrap
+```
+  </TabItem>
+  <TabItem value="yarn">
+
+```bash
+yarn add react-bootstrap bootstrap
+```          
+  </TabItem>
+</Tabs>
+
+- [Follow instructions in React Bootstrap](#react-bootstrap)
+
+[Refer to official documentation on installation for detailed usage. &#8594](https://react-bootstrap.github.io/getting-started/introduction#installation)