Generator-dgenerate-react NPM

generator-dgenerate-react

Generates Boilerplate for React JS

Features

Easy to create any websites / dashboard system with public, private and restricted routes.
Easy to implement complex user authentication with respective roles.
Integrated with Redux and Thunk.
Helpers included for easy creation of Cookies, Api calls, Action Sets, etc.
Theme provider for creating light and dark theme websites / dashboards.

Installation

npm install -g yo
npm install -g generator-dgenerate-react

Then generate your new project:

yo dgenerate-react

Then you can install the pakages using

npm install

For Redux integration replace index.js with code below

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import reducers from "./reducers/Reducers";
import AppWithRouter from "./components/app/App";
import "./sass/main.scss";

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(
	<Provider store={store}>
		<AppWithRouter />
	</Provider>,
	document.querySelector("#root")
);

Dashboard

Creating Dashboard with generator-dgenerate-react

Define all the routes and its components

Goto: src / components / app / Paths.app.js

It has two different arrays you can modify.

PRIVATE_PATHS -> They are not accessible before login.
PUBLIC_PATHS -> If restricted, they are not accessible after login otherwise, accessible.

PUBLIC_PATHS and PRIVATE PATHS has the array of objects with following keys:

key
- Type: NUMBER/STRING
- Desc: Used with withLink HOC which provides navigation routes with key as property.
name
- Type: STRING
- Desc: Used as a link name in navigation if it is visible.
path
- Type: STRING starting with “/”
- Desc: Defines a route name which can be accessed from the address bar.
component
- Type: COMPONENT NODE
- Desc: Defines component that will be attached to DOM with path defined above.
exact
- Optional. Default: true - Type: BOOL
- Desc: Same as exact of React Router Route Component.
restricted - Not available for PRIVATE_PATHS
- Type: BOOL
- Desc: Defines whether the route can be accessed after login.
visible
- Optional. Default: true - Type: BOOL
- Desc: Defines whether the link is visible on the navigation bar or not. Used with PublicLink or PrivateLink Component from Util.

Example:

PUBLIC_PATHS = [
	{
		key: "Login",
		name: "Login",
		path: "/log-in",
		component: LoginPage,
		restricted: true
	},
	{
		path: null,
		component: NotFoundPage
	},
];

PRIVATE_PATHS  = [
	{
		key: "Home",
		name: "Home",
		path: "/home",
		component: HomePage
	}
];

Define the user roles and their access routes.

Goto: src / components / app / UserRoles.app.js

Create Roles and export it first

export const ROLE_ADMIN = "admin";  
export const ROLE_USER = "user";

Add created role as a key for USER_ROLES object and define its access routes.

export const USER_ROLES = {
  [ROLE_ADMIN]: {
    access: [
      "/", 
      "/log-in", 
      "/sign-in", 
      "/dashboard", 
      "/home"
    ]
  },
  [ROLE_USER]: {
    access: [
      "/", 
      "/log-in", 
      "/sign-in"
    ]
  }
};

Modify App.js

It should contain all the shared components such as Header, Sidebar, Footer.

Import Auth from dgenerate which has Auth.Provider HOC and Auth.Screens.
Wrap all shared components with Auth.Provider which accepts authConfig and authHandlers props.
authConfig prop accepts object with keys isLoggedIn and userRole which can be accessed from any component using useAuth() Hook.
authHandlers prop accepts object with any key and can be accessed from any component using useAuth() Hook.

Example

import React, { useState } from "react";
import { Auth } from "../dgenerate";

// Components
import Header from "../common/header/Header.common";

// App should be exported with withRouter or Router HOC
const App = () => {

    const [ config, setConfig ] = useState({ isLoggedIn: true, userRole: "admin" });

    return(
        <Auth.Provider 
            authConfig={config}
            authHandlers={{ handleLogout: () => setConfig({ isLoggedIn: false, userRole: "user" }) }}
        >
            <Header />
            <Auth.Screens />
        </Auth.Provider>
    )
}

export default App;

useAuth() Hook from dgenerate
It can be accessed from any component. import it from dgenerate. useAuth() Hook has isLoggedIn, userRole and authHandlers which is passed in Provider.

Example

import { useAuth } from "../../dgenerate";

const { isLoggedIn, userRole, handleLogout } = useAuth();

Themes There is new feature to add themes for your projects. It works similar to Auth.Provider. Import Theme from dgenerate and wrap App.js return with <Theme.Provider>...</Theme.Provider>. theme prop is required to be passed in. theme prop is javascript object with following keys.

dark (boolean): Whether it is light theme or dark theme.
colors (object): Object with various keys to define colors.

const theme = {
  dark: false,
  colors: {
    primaryColor: "#2196F3",
    secondaryColor: "#989898",
    highlightColor: "#EB4034",
    textColor: "#353535",
    borderColor: "#E1E1E1",
    cardColor: "#FFFFFF"
  }
};