From 8b14b32566eb5bee0a8a93b483839f905c80f37e Mon Sep 17 00:00:00 2001 From: Thiago de Souza Date: Sun, 19 Jan 2020 13:19:17 -0300 Subject: [PATCH] v4.0.0-next.0 --- lerna.json | 2 +- packages/neutron-cli/package.json | 2 +- packages/neutron-cli/src/commands/neutron.js | 4 +- .../package.json | 2 +- .../neutron-start-react-template/package.json | 2 +- website/package.json | 2 +- website/src/components/Terminal/index.js | 4 +- .../commands/add-component.md | 57 +++++++++ .../version-4.0-next/commands/add-duck.md | 79 +++++++++++++ .../version-4.0-next/commands/add-page.md | 108 ++++++++++++++++++ .../version-4.0-next/commands/add-saga.md | 63 ++++++++++ .../community/code-of-conduct.md | 79 +++++++++++++ .../community/contributing.md | 22 ++++ .../introduction/getting-started.md | 65 +++++++++++ .../version-4.0-next-sidebars.json | 50 ++++++++ website/versions.json | 2 +- 16 files changed, 535 insertions(+), 8 deletions(-) create mode 100644 website/versioned_docs/version-4.0-next/commands/add-component.md create mode 100644 website/versioned_docs/version-4.0-next/commands/add-duck.md create mode 100644 website/versioned_docs/version-4.0-next/commands/add-page.md create mode 100644 website/versioned_docs/version-4.0-next/commands/add-saga.md create mode 100644 website/versioned_docs/version-4.0-next/community/code-of-conduct.md create mode 100644 website/versioned_docs/version-4.0-next/community/contributing.md create mode 100644 website/versioned_docs/version-4.0-next/introduction/getting-started.md create mode 100644 website/versioned_sidebars/version-4.0-next-sidebars.json diff --git a/lerna.json b/lerna.json index 6a4e5ad..e9c77b3 100644 --- a/lerna.json +++ b/lerna.json @@ -7,7 +7,7 @@ "website" ], "useWorkspaces": true, - "version": "3.0.1", + "version": "4.0.0-next.0", "changelog": { "repo": "neutronjs/neutron", "labels": { diff --git a/packages/neutron-cli/package.json b/packages/neutron-cli/package.json index d8bb4cc..578a5a3 100644 --- a/packages/neutron-cli/package.json +++ b/packages/neutron-cli/package.json @@ -1,7 +1,7 @@ { "name": "@neutronjs/cli", "description": "This CLI was developed to help developers create new projects quickly and easily", - "version": "3.0.1", + "version": "4.0.0-next.0", "license": "MIT", "main": "build/cli.js", "bin": { diff --git a/packages/neutron-cli/src/commands/neutron.js b/packages/neutron-cli/src/commands/neutron.js index 662cbf4..ae6d07f 100644 --- a/packages/neutron-cli/src/commands/neutron.js +++ b/packages/neutron-cli/src/commands/neutron.js @@ -21,7 +21,9 @@ class NeutronInfo { String.raw`| |\ | __/ |_| | |_| | | (_) | | | |:|_| |___) |`, String.raw`|_| \_|\___|\__,_|\__|_| \___/|_| |_|\___/|____/ `, ], - SubTitle: `React & React Native Flux Architecture CLI v${version}`, + SubTitle: `React & React Native Flux Architecture CLI v${ + version.split('-')[0] + }`, }; } diff --git a/packages/neutron-start-react-native-template/package.json b/packages/neutron-start-react-native-template/package.json index c12fc74..19e1075 100644 --- a/packages/neutron-start-react-native-template/package.json +++ b/packages/neutron-start-react-native-template/package.json @@ -1,6 +1,6 @@ { "name": "@neutronjs/start-react-native-template", - "version": "1.0.0", + "version": "4.0.0-next.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", diff --git a/packages/neutron-start-react-template/package.json b/packages/neutron-start-react-template/package.json index 2243895..e4a0bbb 100644 --- a/packages/neutron-start-react-template/package.json +++ b/packages/neutron-start-react-template/package.json @@ -1,6 +1,6 @@ { "name": "@neutronjs/start-react-template", - "version": "0.0.1", + "version": "4.0.0-next.0", "license": "MIT", "scripts": { "start": "craco start", diff --git a/website/package.json b/website/package.json index 2a71596..c6b84e0 100644 --- a/website/package.json +++ b/website/package.json @@ -1,6 +1,6 @@ { "name": "@neutronjs/website", - "version": "1.0.0", + "version": "4.0.0-next.0", "private": true, "scripts": { "docusaurus": "docusaurus", diff --git a/website/src/components/Terminal/index.js b/website/src/components/Terminal/index.js index 8ae73b1..7326234 100644 --- a/website/src/components/Terminal/index.js +++ b/website/src/components/Terminal/index.js @@ -33,7 +33,9 @@ function NeutronTerminal({ version }) { {String.raw`|_| \_|\___|\__,_|\__|_| \___/|_| |_|\___/|____/ `} {printNewLine()} - {`React & React Native Flux Architecture CLI ${version}`} + {`React & React Native Flux Architecture CLI ${ + version.split('-')[0] + }`} {printNewLine()} {printDivider()} diff --git a/website/versioned_docs/version-4.0-next/commands/add-component.md b/website/versioned_docs/version-4.0-next/commands/add-component.md new file mode 100644 index 0000000..76ee582 --- /dev/null +++ b/website/versioned_docs/version-4.0-next/commands/add-component.md @@ -0,0 +1,57 @@ +--- +id: add-component +title: How to create a new Component? +sidebar_label: Create Component +--- + +To create a new component, you need to stay at the root of the project and enter this command in your terminal: + +```shell +neutron add:component +``` + +You don't need to inform the `technology` because the CLI read your `package.json` to identify the project type. This is awesome, isn't it? + + +## Usage command example + +```shell +neutron add:component custom +``` + +After the execution, this command will create a new folder in `src/components` with two new files: `index.js` and `styles.js`. + +#### Example: + +```js +/* #FILE: ./src/components/Custom/index.js */ +import React from 'react'; +import { StyledContainer } from './styles'; + +export default function Custom() { + return ( + +

Custom component!

+ + ); +} +``` + +```js +/* #FILE: ./src/components/CustomComponent/styles.js */ +import styled from 'styled-components'; + +import colors from '@/styles/colors'; + +export const StyledContainer = styled.div` + align-items: center; + background-color: ${colors.secundary}; + border-radius: 3px; + color: ${colors.light}; + display: flex; + flex-direction: column; + max-width: 500px; + padding: 50px 0; + width: 100%; +`; +``` diff --git a/website/versioned_docs/version-4.0-next/commands/add-duck.md b/website/versioned_docs/version-4.0-next/commands/add-duck.md new file mode 100644 index 0000000..b1ac343 --- /dev/null +++ b/website/versioned_docs/version-4.0-next/commands/add-duck.md @@ -0,0 +1,79 @@ +--- +id: add-duck +title: How to create a new Duck? +sidebar_label: Create Duck +--- + +Thinking about how to organize our `actions`, `reducers` and `types`, we decided to use Duck Modular Redux due to the creation of a compact file with everything we need to work with redux. + +To create a new duck, you need to stay at the root of the project and enter this command in your terminal: + +```shell +neutron add:duck +``` + + +## Usage command example + +```shell +neutron add:duck tools +``` + +After the execution, this command will create a new file in `./src/store/ducks`. + +#### Example: + +```js +/* #FILE: ./src/store/ducks/tools.js */ +import { createSlice } from '@reduxjs/toolkit'; + +const toolsSlice = createSlice({ + name: 'tools', + initialState: { + loading: false, + data: [], + error: false, + }, + reducers: { + getToolsRequest(state) { + state.loading = true; + }, + getToolsSuccess(state, { payload }) { + state.loading = false; + state.error = false; + state.data.push(payload); + }, + getToolsFailure(state) { + state.error = true; + state.loading = false; + }, + }, +}); + +export const { reducer } = toolsSlice; +export default toolsSlice.actions; + +``` + +## Combine Reducers + +This step is very important to combine your `reducers` with a unique reducer called `rootReducer`. + +#### Example: +```js +/* #FILE: ./src/store/ducks/index.js */ +import { combineReducers } from '@reduxjs/toolkit'; +import { connectRouter } from 'connected-react-router'; + +/* Reducers */ +import { reducer as tools } from './tools'; + +export default (history) => + combineReducers({ + router: connectRouter(history), + tools, + }); + +``` + +This setting is required to configure the reducer in `store` and you can check the creation of `store` in `./src/store/index.js`. All the settings are already made especially for you! diff --git a/website/versioned_docs/version-4.0-next/commands/add-page.md b/website/versioned_docs/version-4.0-next/commands/add-page.md new file mode 100644 index 0000000..8454df2 --- /dev/null +++ b/website/versioned_docs/version-4.0-next/commands/add-page.md @@ -0,0 +1,108 @@ +--- +id: add-page +title: How to create a new Page? +sidebar_label: Create Page +--- + +The `page` is like a `component`, but we prefer to think that components don't need to know the application state directly, because the change of state should be responsability of the pages. + +To create a new page, you need to stay at the root of the project and enter this command in your terminal: + +```shell +neutron add:page +``` + +You don't need to inform the `technology` because the CLI reads your `package.json` to identify the project type. This is awesome, isn't it? + + +## Usage command example + +```shell +neutron add:page Tools +``` + +After the execution, this command will create a new folder in `src/pages` with two new files: `index.js` and `styles.js`. + +#### Example: + +```js +/* #FILE: ./src/pages/Tools/index.js */ +import React, { useState, useEffect } from 'react'; +import { StyledContainer } from './styles'; + +function Tools() { + const [message, setMessage] = useState(''); + + useEffect(() => { + setMessage('Tools page!'); + }, []); + + return ( + +

{message}

+ + ); +} + +export default Tools; +``` + +```js +/* #FILE: ./src/pages/Tools/styles.js */ +import styled from 'styled-components'; + +import colors from '@/styles/colors'; + +export const StyledContainer = styled.div` + background-color: ${colors.background}; + color: ${colors.primary}; + align-items: center; + display: flex; + flex-direction: column; + height: 100vh; + justify-content: center; +`; +``` + + +## Connecting the Page with Store + +To connect the page with store, you should import these references on the `index.js` file: + +```js +import React, { useCallback, useEffect } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import ToolsActions from '@/store/ducks/tools'; +``` + +Finally, you need to use `useSelector` to retrieve data and the `useDispatch` instance to call your actions: + +```js + +function Tools() { + const dispatch = useDispatch(); + const tools = useSelector((state) => state.tools); + + const getToolsRequest = useCallback(() => { + dispatch(ToolsActions.getToolsRequest()); + }, [dispatch]); + + useEffect(() => { + getToolsRequest(); + }, [getToolsRequest]); + + return ( + +
    + {tools.data.map(tool => ( +
  • {tool.name}
    • + ))} +
+ + ); +} + +export default Tools; + +``` + diff --git a/website/versioned_docs/version-4.0-next/commands/add-saga.md b/website/versioned_docs/version-4.0-next/commands/add-saga.md new file mode 100644 index 0000000..8bf99cb --- /dev/null +++ b/website/versioned_docs/version-4.0-next/commands/add-saga.md @@ -0,0 +1,63 @@ +--- +id: add-saga +title: How to create a new Saga? +sidebar_label: Create Saga +--- + +To create a new saga, you need to stay at the root of the project and enter this command in your terminal: + +```shell +neutron add:saga +``` + + +## Usage command example + +```shell +neutron add:saga tools +``` + +After the execution, this command will create a new file in `./src/store/sagas` and, if it does not exists, will also create a new file in `./src/store/ducks`. + +#### Example: + +```js +/* #FILE: ./src/store/sagas/tools.js */ +import { call, put } from 'redux-saga/effects'; +import api from '@/services/api'; + +import ToolsActions from '@/store/ducks/tools'; + +export function* getToolsRequest() { + try { + const endpoint = '/tools'; + const { data } = yield call(api.get, endpoint); + yield put(ToolsActions.getToolsSuccess(data)); + } catch (error) { + console.log(error); + yield put(ToolsActions.getToolsFailure()); + } +} +``` + +> For more information about `ducks`, check: How to create a new Duck?. + +## Register Sagas + +This step is very important to register your `sagas` to listen all calls related to the configured `types`. + +```js +/* #FILE: ./src/store/ducks/sagas.js */ +import { all, takeLatest } from 'redux-saga/effects'; + +import ToolsActions from '@/store/ducks/tools'; // example +import { getToolsRequest } from './tools'; // example + +export default function* rootSaga() { + yield all([ + takeLatest(ToolsActions.getToolsRequest, getToolsRequest), // example + ]); +} +``` + +> We decided to use `takeLatest` to ensure that only the last call is executed. For more information on other options, you can check the Redux-Saga - API Reference diff --git a/website/versioned_docs/version-4.0-next/community/code-of-conduct.md b/website/versioned_docs/version-4.0-next/community/code-of-conduct.md new file mode 100644 index 0000000..ec0333a --- /dev/null +++ b/website/versioned_docs/version-4.0-next/community/code-of-conduct.md @@ -0,0 +1,79 @@ +--- +id: code-of-conduct +title: Code of Conduct +sidebar_label: Code of Conduct +--- + +### Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +### Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +### Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +### Scope + +This Code of Conduct applies within all project spaces, and it also applies when +an individual is representing the project or its community in public spaces. +Examples of representing a project or community include using an official +project e-mail address, posting via an official social media account, or acting +as an appointed representative at an online or offline event. Representation of +a project may be further defined and clarified by project maintainers. + +### Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at team@neutronjs.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +
+ +#### Attribution + + + This Code of Conduct is adapted from the Contributor Covenant, version 1.4, + available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + diff --git a/website/versioned_docs/version-4.0-next/community/contributing.md b/website/versioned_docs/version-4.0-next/community/contributing.md new file mode 100644 index 0000000..6a126da --- /dev/null +++ b/website/versioned_docs/version-4.0-next/community/contributing.md @@ -0,0 +1,22 @@ +--- +id: contributing +title: Contributing +sidebar_label: Contributing +--- + +Thanks for your interest on our project. Take a moment to read our guidelines. +When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. + +## Pull Request Process + +
+ +Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. It is recommended to follow this commit message style. + +Please make sure the following is done when submitting a pull request: + +1. Fork the repository and create your branch from master. +2. Describe your test plan in your pull request description. Make sure to test your changes! +3. Make sure your code lints (yarn format). + +All pull requests should be opened against the master branch. diff --git a/website/versioned_docs/version-4.0-next/introduction/getting-started.md b/website/versioned_docs/version-4.0-next/introduction/getting-started.md new file mode 100644 index 0000000..07aabba --- /dev/null +++ b/website/versioned_docs/version-4.0-next/introduction/getting-started.md @@ -0,0 +1,65 @@ +--- +id: getting-started +title: Getting Started with Neutron JS +sidebar_label: Getting Started +--- + +Neutron is a Command Line Interface developed to help developers create new react projects with Redux + Redux Saga, as well as providing a well-structured code organization. + +This page will help you install and build your first react project using Neutron JS and it's very important to explain that to work with mobile, you must have installed the `expo-cli` in your development environment. + +#### Why Expo for React Native? +We chose Expo due to maturity that it's reached and because it's not necessary to configure and install SDKs, emulators and other common requirements for iOS and Android development. + +> To learn more about `expo-cli`, check: Get Started With Expo. + + +## Installation + +This is simple and easy because Neutron JS is available as a package in Node Package Manager. You should write your terminal: + +```shell +yarn global add @neutronjs/cli@next +``` + +After installation, you can confirm using `neutron` on your terminal or `neutron -h` to check all available commands: + +``` +Starts With: + neutron create Create new project with React + +Commands: + neutron add:component Add new component files + neutron add:duck Add new duck file + neutron add:page Add new page files + neutron add:saga Add new saga and duck files + +Utils: + neutron -h Show help information + neutron -v Output the version number +``` + +## Creating a new project + +To create a new project, you must use command with this format: + +```shell +neutron create +``` + +Available technologies: + +- `--react`: create a new project with React JS +- `--react-native`: create a new project with React Native + +#### Usage example: + +```shell +neutron create my-app --react +``` + +After a while you will see the success message and be able to start the application with a development server using: + +```shell +cd my-app && yarn start || npm run start +``` diff --git a/website/versioned_sidebars/version-4.0-next-sidebars.json b/website/versioned_sidebars/version-4.0-next-sidebars.json new file mode 100644 index 0000000..15dfd3f --- /dev/null +++ b/website/versioned_sidebars/version-4.0-next-sidebars.json @@ -0,0 +1,50 @@ +{ + "version-4.0-next/docs": [ + { + "type": "category", + "label": "Introduction", + "items": [ + { + "type": "doc", + "id": "version-4.0-next/introduction/getting-started" + } + ] + }, + { + "type": "category", + "label": "Commands", + "items": [ + { + "type": "doc", + "id": "version-4.0-next/commands/add-component" + }, + { + "type": "doc", + "id": "version-4.0-next/commands/add-duck" + }, + { + "type": "doc", + "id": "version-4.0-next/commands/add-page" + }, + { + "type": "doc", + "id": "version-4.0-next/commands/add-saga" + } + ] + }, + { + "type": "category", + "label": "Community", + "items": [ + { + "type": "doc", + "id": "version-4.0-next/community/contributing" + }, + { + "type": "doc", + "id": "version-4.0-next/community/code-of-conduct" + } + ] + } + ] +} diff --git a/website/versions.json b/website/versions.json index ecf4c6b..cfea7f8 100644 --- a/website/versions.json +++ b/website/versions.json @@ -1 +1 @@ -["3.0", "2.1"] +["3.0", "4.0-next", "2.1"]