v4.0.0-next.0

lerna.json

@@ -7,7 +7,7 @@
     "website"
   ],
   "useWorkspaces": true,
-  "version": "3.0.1",
+  "version": "4.0.0-next.0",
   "changelog": {
     "repo": "neutronjs/neutron",
     "labels": {

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": {

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]
+      }`,
     };
   }
 

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",

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",

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",

website/src/components/Terminal/index.js

@@ -33,7 +33,9 @@ function NeutronTerminal({ version }) {
           <span>{String.raw`|_| \_|\___|\__,_|\__|_|  \___/|_| |_|\___/|____/ `}</span>
           {printNewLine()}
           <span style={{ color: 'var(--neutron-color-custom-green)' }}>
-            {`React & React Native Flux Architecture CLI ${version}`}
+            {`React & React Native Flux Architecture CLI ${
+              version.split('-')[0]
+            }`}
           </span>
           {printNewLine()}
           {printDivider()}

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 <componentName>
+```
+
+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 (
+    <StyledContainer>
+      <h1>Custom component!</h1>
+    </StyledContainer>
+  );
+}
+```
+
+```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%;
+`;
+```

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 <a href="https://github.com/erikras/ducks-modular-redux" target="_blank">Duck Modular Redux</a> 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 <duckName>
+```
+
+
+## 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!

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 <pageName>
+```
+
+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 (
+    <StyledContainer>
+      <h1>{message}</h1>
+    </StyledContainer>
+  );
+}
+
+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 (
+    <StyledContainer>
+      <ul>
+        {tools.data.map(tool => (
+          <li>{tool.name}</li>
+        ))}
+      </ul>
+    </StyledContainer>
+  );
+}
+
+export default Tools;
+
+```
+

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 <sagaName>
+```
+
+
+## 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: <a href="add-duck" target="_blank">How to create a new Duck?</a>.
+
+## 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 <a href="https://redux-saga.js.org/docs/api/" target="_blank">Redux-Saga - API Reference</a>