feat(recipes): add basic recipes

Author: ramsunvtech

recipes/basic/config.js

@@ -0,0 +1,65 @@
+const getConfig = () => {
+  return {
+    bundler: "webpack",
+    ui: "material-ui",
+    state: "redux",
+    buildDir: "public",
+    sourceDir: {
+      main: "src",
+      static: "static",
+      assets: "assets",
+      images: "images",
+      containers: "modules",
+      i18n: "i18n",
+      components: "components",
+      businessLogic: "blocks",
+      userInterface: "widgets",
+      utility: "utils",
+      hooks: "hooks",
+      theme: "theme",
+      store: "store",
+      services: "services",
+      locales: "translations",
+    },
+    modules: {
+      signIn: "SignIn",
+      dashboard: "Dashboard",
+    },
+    canAdd: {
+      eslint: true,
+      prettier: true,
+      husky: true,
+      hookForm: true,
+      routes: true,
+      utils: true,
+      static: true,
+      i18n: true,
+      modules: true,
+      componentsCopy: false,
+      fullComponents: true,
+    },
+  };
+};
+
+const getModulesList = () => {
+  return [
+    "reactWithI18n",
+    "router",
+    "utils"
+  ];
+};
+
+const getDevModulesList = () => {
+  return [
+    "webpack",
+    "webpackPlugins",
+    "webpackLoaders",
+    "babel"
+  ];
+};
+
+module.exports = {
+  getConfig,
+  getModulesList,
+  getDevModulesList,
+};

recipes/basic/snippets/.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": "current"
+          }
+        }
+      ],
+      "@babel/preset-react"
+    ]
+}

recipes/basic/snippets/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["airbnb-base", "prettier"]
+}

recipes/basic/snippets/.prettierrc.json

@@ -0,0 +1,19 @@
+{
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": false,
+    "printWidth": 80,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false
+  }

recipes/basic/snippets/index.js

@@ -0,0 +1,37 @@
+const shell = require('shelljs')
+const { getWebPackConfig } = require('./webpack.config')
+const rootIndex = require('./sources/index')
+const rootApp = require('./sources/App')
+const rootRoutes = require('./sources/Routes')
+const withI18n = require('./sources/withI18n')
+const signInModule = require('./sources/SignIn')
+const dashboardModule = require('./sources/Dashboard')
+const pageLoaderBlock = require('./sources/PageLoader')
+const sidebarBlock = require('./sources/Sidebar')
+const topBarBlock = require('./sources/TopBar')
+
+const sourceCodes = {
+  'index.js': rootIndex,
+  'App.js': rootApp,
+  'Routes.js': rootRoutes,
+  'withI18n.js': withI18n,
+  'SignIn.js': signInModule,
+  'Dashboard.js': dashboardModule,
+  'PageLoader.js': pageLoaderBlock,
+  'Sidebar.js': sidebarBlock,
+  'TopBar.js': topBarBlock,
+}
+
+const getFileContent = (fileName) => {
+  return shell.cat(`${__dirname}/${fileName}`)
+}
+
+const getDynamicSourceCode = (fileName, appName, baseConfig) => {
+  const { getSourceCode } = sourceCodes[fileName]
+  return getSourceCode(appName, baseConfig)
+}
+module.exports = {
+  getFileContent,
+  getWebPackConfig,
+  getDynamicSourceCode,
+}

recipes/basic/snippets/sources/App.js

@@ -0,0 +1,34 @@
+function getSourceCode(appName, { sourceDir }) {
+return `import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { createBrowserHistory } from 'history'
+
+import Routes from './Routes'
+
+// Block Components.
+import { ErrorHandler, PageLoader } from '@${appName}/${sourceDir.businessLogic}'
+
+import { withTranslation } from '@${appName}/${sourceDir.i18n}'
+
+const browserHistory = createBrowserHistory()
+
+function App() {
+  return (
+    <>
+      <ErrorHandler>
+        <PageLoader />
+        <Router history={browserHistory}>
+          <Routes />
+        </Router>
+      </ErrorHandler>
+    </>
+  )
+}
+
+export default withTranslation(App)
+`
+}
+
+module.exports = {
+  getSourceCode,
+};

recipes/basic/snippets/sources/Dashboard.js

@@ -0,0 +1,43 @@
+function getSourceCode(appName, { sourceDir }) {
+return `import React, { useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+import { I18nMsg } from '@${appName}/${sourceDir.i18n}'
+
+// Utils.
+import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+
+const Dashboard = (props) => {
+  let history = useHistory()
+  return (
+    <>
+      <section>
+        <div>
+          <h1>
+            <I18nMsg id="dashboard" /> goes here
+          </h1>
+          <button
+            onClick={() => {
+              history.push(RoutePaths.SignIn)
+            }}
+          >
+            Click back
+          </button>
+        </div>
+      </section>
+    </>
+  )
+}
+
+Dashboard.propTypes = {
+  title: PropTypes.string,
+}
+
+export default Dashboard
+`
+}
+
+module.exports = {
+  getSourceCode,
+};

recipes/basic/snippets/sources/PageLoader.js

@@ -0,0 +1,16 @@
+function getSourceCode(appName, { sourceDir }) {
+return `import React, { Fragment } from 'react'
+
+// UI Components.
+import { Spinner } from '@${appName}/${sourceDir.userInterface}'
+
+export default function PageLoader({ loading }) {
+  // Add your business logic with store condition.
+  return <Fragment>{loading && <Spinner />}</Fragment>
+}
+`
+}
+
+module.exports = {
+  getSourceCode,
+};

recipes/basic/snippets/sources/Routes.js

@@ -0,0 +1,38 @@
+function getSourceCode(appName, { sourceDir, modules }) {
+return `import React, { Suspense } from 'react'
+import { Route, Switch, Redirect } from 'react-router-dom'
+
+// Block Components.
+import { PageLoader } from '@${appName}/${sourceDir.businessLogic}'
+
+// Utils.
+import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+
+const SignInModule = React.lazy(() =>
+  import(/* webpackChunkName: "${sourceDir.containers}/${modules.signIn}" */ './${sourceDir.containers}/${modules.signIn}')
+)
+const DashboardModule = React.lazy(() =>
+  import(/* webpackChunkName: "${sourceDir.containers}/${modules.dashboard}" */ './${sourceDir.containers}/${modules.dashboard}')
+)
+
+const Routes = () => {
+  return (
+    <Suspense fallback={<PageLoader />}>
+      <Switch>
+        <Route path={RoutePaths.SignIn} exact component={SignInModule} />
+        <Route path={RoutePaths.Dashboard} component={DashboardModule} />
+        <Redirect to={RoutePaths.NotFound} />
+      </Switch>
+    </Suspense>
+  )
+}
+
+export default Routes
+`
+}
+
+module.exports = {
+  getSourceCode,
+};
+
+

recipes/basic/snippets/sources/Sidebar.js

@@ -0,0 +1,51 @@
+function getSourceCode(appName, { sourceDir }) {
+return `import React from 'react'
+import PropTypes from 'prop-types'
+import { useI18n } from '@${appName}/${sourceDir.i18n}'
+
+// Domain Components.
+import SidebarNav from './SidebarNav'
+
+// Utils.
+import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+
+const Sidebar = (props) => {
+  const { open, variant, onClose, className, ...rest } = props
+  const { formatMessage } = useI18n()
+
+  const pages = [
+    {
+      title: formatMessage({ id: 'dashboard' }),
+      href: RoutePaths.dashboard,
+      icon: '',
+    },
+    {
+      title: formatMessage({ id: 'other_module' }),
+      href: RoutePaths.dashboard,
+      icon: '',
+    },
+  ]
+
+  return (
+    <section>
+      <div {...rest}>
+        <SidebarNav pages={pages} />
+      </div>
+    </section>
+  )
+}
+
+Sidebar.propTypes = {
+  className: PropTypes.string,
+  onClose: PropTypes.func,
+  open: PropTypes.bool.isRequired,
+  variant: PropTypes.string.isRequired,
+}
+
+export default Sidebar
+`
+}
+
+module.exports = {
+  getSourceCode,
+};