npm - @applica-software-guru/react-admin - Versions diffs - 1.0.57 → 1.0.59 - Mend

@applica-software-guru/react-admin 1.0.57 → 1.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React-Admin Demo Application</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "private": false,
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev-vite": "vite",
+    "dev": "vite",
     "build": "vite build",
     "watch": "vite build --watch",
     "preview": "vite preview",
@@ -23,10 +23,7 @@
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
     "format": "prettier --write 'src//**/*.{js,jsx,ts,tsx}' --config ./.prettierrc",
     "test": "vitest",
-    "clear": "rm -rf node_modules && rm -rf playground/node_modules && rm package-lock.json && rm playground/package-lock.json",
-    "setup": "npm install && cd playground && npm i && husky install",
-    "playground": "cd playground && sleep 10 && npm run start",
-    "dev": "npm-run-all --parallel watch playground"
+    "clear": "rm -rf node_modules && rm -rf playground/node_modules && rm package-lock.json && rm playground/package-lock.json"
   },
   "husky": {
     "hooks": {
@@ -75,6 +72,8 @@
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
+    "@applica-software-guru/crud-client": "^1.0.20",
+    "@applica-software-guru/iam-client": "^1.0.53",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/node": "^18.7.6",

package/src/ApplicaAdmin.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { AppConfigProvider, MenuConfigProvider, MenuPropTypes, ThemeConfigProvider } from './contexts';
 import { CatchResult, useCliErrorCatcher } from './dev';
-import { Layout, MainIcon, Notification, SmallIcon } from './components';
+import { Layout, LoginPage, MainIcon, Notification, SmallIcon } from './components';
+import React, { useMemo } from 'react';
 import { createI18nProvider, useI18nCatcher, useI18nLanguages } from './i18n';
 import Admin from './Admin';
@@ -9,7 +10,6 @@ import { I18nCatcherBodyBuilderResultProps } from './i18n/useI18nCatcher';
 import { MenuProps } from 'src/types';
 import PropTypes from 'prop-types';
 import { QueryClient } from 'react-query';
-import { useMemo } from 'react';
 const languageResponseMapper = (response: any) =>
   response.reduce(
@@ -38,19 +38,82 @@ const queryClient = new QueryClient({
 });
 export type ApplicaAdminProps = AdminProps & {
+  /**
+   * Eventuali configurazioni aggiuntive da passare al tema.
+   * @remarks Questo tema è basato su Mantis Theme (https://mantisdashboard.io/)
+   *
+   * @see https://marmelab.com/react-admin/Theming.html
+   * @see https://material-ui.com/customization/theming/
+   */
   theme: any;
+  /**
+   * URL dell'API da utilizzare nell'applicazione.
+   * Sebbene venga già definito un dataProvider ed authProvider di default, è possibile che l'app
+   * utilizzi l'apiUrl specificato per ulteriori operazioni (es. getstione delle notifiche).
+   */
   apiUrl: string;
+  /**
+   * La lingua di default da utilizzare nell'applicazione.
+   */
   defaultLocale: string;
+  /**
+   * Se impostato a true, l'applicazione lavora in modalità sviluppo.
+   * La modalità sviluppo è utile per effettuare test e debug ed esegue attività che non sono
+   * consigliate in produzione (es. cattura e inoltro dei messaggi non localizzati).
+   */
   development: boolean;
+  /**
+   * Il logo da visualizzare nella barra laterale quando il menu è espanso lateralmente.
+   */
   logoMain: any;
+  /**
+   * Eventuale logo da visualizzare nella barra laterale quando il menu è ridotto lateralmente.
+   */
   logoIcon: any;
+  /**
+   * Configurazione del menu da visualizzare nell'applicazione.
+   */
   menu: MenuProps;
+  /**
+   * Nome dell'applicazione da mostrare nell'header.
+   */
   name: string;
+  /**
+   * Versione dell'applicazione da mostrare nel footer.
+   */
   version: string;
+  /**
+   * Il provider di autenticazione da utilizzare nell'applicazione.
+   */
   dataProvider: any;
+  /**
+   * Il provider di dati da utilizzare nell'applicazione.
+   */
   authProvider: any;
+  /**
+   * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
+   * @example
+   * // In questo caso, le notifiche verranno gestite tramite la risorsa "entities/notification"
+   * <ApplicaAdmin notification="entities/notification" />
+   */
   notification: string;
+  /**
+   * Indica se le notifiche devono essere disabilitate.
+   * Se le notifiche sono abilitate comparirà automaticamente un'icona in alto a destra nell'header.
+   *
+   * @example
+   * // In questo caso, le notifiche verranno disabilitate
+   * <ApplicaAdmin disableNotification />
+   */
   disableNotification: boolean;
+  /**
+   * Indica se la schermata di registrazione deve essere disabilitata.
+   */
+  disableSignup: boolean;
+  /**
+   * Indica se la schermata di recupero password deve essere disabilitata.
+   */
+  disableForgotPassword: boolean;
 };
 /**
@@ -86,74 +149,22 @@ export type ApplicaAdminProps = AdminProps & {
  * @returns {React.ReactElement}
  */
 const ApplicaAdmin = ({
-  /**
-   * Eventuali configurazioni aggiuntive da passare al tema.
-   * @remarks Questo tema è basato su Mantis Theme (https://mantisdashboard.io/)
-   *
-   * @see https://marmelab.com/react-admin/Theming.html
-   * @see https://material-ui.com/customization/theming/
-   */
   theme,
-  /**
-   * URL dell'API da utilizzare nell'applicazione.
-   * Sebbene venga già definito un dataProvider ed authProvider di default, è possibile che l'app
-   * utilizzi l'apiUrl specificato per ulteriori operazioni (es. getstione delle notifiche).
-   */
   apiUrl,
-  /**
-   * La lingua di default da utilizzare nell'applicazione.
-   */
   defaultLocale,
-  /**
-   * Se impostato a true, l'applicazione lavora in modalità sviluppo.
-   * La modalità sviluppo è utile per effettuare test e debug ed esegue attività che non sono
-   * consigliate in produzione (es. cattura e inoltro dei messaggi non localizzati).
-   */
   development,
-  /**
-   * Il logo da visualizzare nella barra laterale quando il menu è espanso lateralmente.
-   */
   logoMain,
-  /**
-   * Eventuale logo da visualizzare nella barra laterale quando il menu è ridotto lateralmente.
-   */
   logoIcon,
-  /**
-   * Configurazione del menu da visualizzare nell'applicazione.
-   */
+  loginPage,
   menu,
-  /**
-   * Nome dell'applicazione da mostrare nell'header.
-   */
   name,
-  /**
-   * Versione dell'applicazione da mostrare nel footer.
-   */
   version,
-  /**
-   * Il provider di autenticazione da utilizzare nell'applicazione.
-   */
   dataProvider,
-  /**
-   * Il provider di dati da utilizzare nell'applicazione.
-   */
   authProvider,
-  /**
-   * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
-   * @example
-   * // In questo caso, le notifiche verranno gestite tramite la risorsa "entities/notification"
-   * <ApplicaAdmin notification="entities/notification" />
-   */
   notification,
-  /**
-   * Indica se le notifiche devono essere disabilitate.
-   * Se le notifiche sono abilitate comparirà automaticamente un'icona in alto a destra nell'header.
-   *
-   * @example
-   * // In questo caso, le notifiche verranno disabilitate
-   * <ApplicaAdmin disableNotification />
-   */
   disableNotification,
+  disableSignup,
+  disableForgotPassword,
   ...props
 }: ApplicaAdminProps) => {
   const languages = useI18nLanguages({
@@ -191,7 +202,13 @@ const ApplicaAdmin = ({
       return result;
     }
   });
+  const login = useMemo(() => {
+    if (React.isValidElement(loginPage)) {
+      // @ts-ignore
+      return React.cloneElement(loginPage, { name, version, enableSignup: !disableSignup, enablePasswordForgot: !disableForgotPassword });
+    }
+    return loginPage;
+  }, [loginPage, name, version, disableSignup, disableForgotPassword]);
   const layout = useMemo(
     () => (props: any) => {
       const _logoMain = name ? <MainIcon title={name} /> : logoMain;
@@ -232,6 +249,7 @@ const ApplicaAdmin = ({
             dataProvider={dataProvider}
             authProvider={authProvider}
             i18nProvider={i18nProivder}
+            loginPage={login}
             {...props}
           />
         </ThemeConfigProvider>
@@ -247,7 +265,10 @@ ApplicaAdmin.defaultProps = {
   development: false,
   version: '0.0.0',
   notification: 'entities/notification',
-  disableNotification: false
+  disableNotification: false,
+  disableSignup: false,
+  disableForgotPassword: false,
+  loginPage: <LoginPage version="0.0.0" name="Applica" />
 };
 ApplicaAdmin.propTypes = {
@@ -264,7 +285,9 @@ ApplicaAdmin.propTypes = {
   authProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   dataProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   notification: PropTypes.string,
-  disableNotification: PropTypes.bool
+  disableNotification: PropTypes.bool,
+  disableSignup: PropTypes.bool,
+  disableForgotPassword: PropTypes.bool
 };
 export default ApplicaAdmin;

package/src/components/MainIcon.jsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { Stack, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
-import { Typography } from '@mui/material';
 const MainIcon = ({ title }) => (
-  <>
+  <Stack direction="row">
     <Typography variant="h2" sx={{ fontWeight: 'regular', letterSpacing: -2.5 }}>
       a.
     </Typography>
@@ -10,7 +11,7 @@ const MainIcon = ({ title }) => (
     <Typography variant="h2" sx={{ fontWeight: 'bold' }}>
       {title}
     </Typography>
-  </>
+  </Stack>
 );
 MainIcon.propTypes = {

package/src/components/index.jsx CHANGED Viewed

@@ -22,3 +22,4 @@ export * from './ra-inputs';
 export * from './ra-lists';
 export * from './ra-forms';
 export * from './ra-custom';
+export * from './ra-pages';

package/src/components/ra-pages/LoginPage/AuthCard.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { Box } from '@mui/material';
+import MainCard from '../../MainCard';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+const AuthCard = ({ children, ...other }) => {
+  const theme = useTheme();
+  return (
+    <MainCard
+      sx={{
+        maxWidth: { xs: 400, lg: 475 },
+        margin: { xs: 2.5, md: 3 },
+        '& > *': {
+          flexGrow: 1,
+          flexBasis: '50%'
+        }
+      }}
+      content={false}
+      {...other}
+      border={false}
+      boxShadow
+      shadow={theme.customShadows.z1}
+    >
+      <Box sx={{ p: { xs: 2, sm: 3, md: 4, xl: 5 } }}>{children}</Box>
+    </MainCard>
+  );
+};
+AuthCard.propTypes = {
+  children: PropTypes.node
+};
+export default AuthCard;

package/src/components/ra-pages/LoginPage/AuthLogin.jsx ADDED Viewed

@@ -0,0 +1,79 @@
+import { AnimateButton, TextInput } from '../../../components';
+import { Button, CircularProgress, Grid, Link, Stack } from '@mui/material';
+import { Form, required, useLogin, useNotify, useSafeSetState, useTranslate } from 'react-admin';
+import { Link as RouterLink } from 'react-router-dom';
+const AuthLogin = ({ enablePasswordForgot, ...props }) => {
+  const { redirectTo } = props;
+  const [loading, setLoading] = useSafeSetState(false);
+  const login = useLogin();
+  const translate = useTranslate();
+  const notify = useNotify();
+  const handleSubmit = (values) => {
+    setLoading(true);
+    login(values, redirectTo)
+      .then(() => {
+        setLoading(false);
+      })
+      .catch((error) => {
+        setLoading(false);
+        notify(
+          typeof error === 'string' ? error : typeof error === 'undefined' || !error.message ? 'ra.auth.sign_in_error' : error.message,
+          {
+            type: 'error',
+            messageArgs: {
+              _: typeof error === 'string' ? error : error && error.message ? error.message : undefined
+            }
+          }
+        );
+      });
+  };
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Grid container>
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <TextInput
+            autoFocus
+            source="username"
+            label={translate('ra.auth.username')}
+            autoComplete="username"
+            validate={required()}
+            placeholder="user@company.name"
+            fullWidth
+          />
+        </Grid>
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <TextInput
+            source="password"
+            label={translate('ra.auth.password')}
+            type="password"
+            autoComplete="current-password"
+            validate={required()}
+            placeholder={translate('ra.auth.password_placeholder')}
+            fullWidth
+          />
+        </Grid>
+      </Grid>
+      {enablePasswordForgot && (
+        <Grid item xs={12} sx={{ mt: 1 }}>
+          <Stack direction="row" justifyContent="flex-end" alignItems="flex-end" spacing={2}>
+            <Link variant="h6" component={RouterLink} to={'/forgot-password'} color="text.primary">
+              {translate('ra.auth.forgot_password')}
+            </Link>
+          </Stack>
+        </Grid>
+      )}
+      <Grid item xs={12} sx={{ mt: 1 }}>
+        <AnimateButton>
+          <Button variant="contained" type="submit" color="primary" disabled={loading} fullWidth>
+            {loading ? <CircularProgress size={19} thickness={3} /> : translate('ra.auth.sign_in')}
+          </Button>
+        </AnimateButton>
+      </Grid>
+    </Form>
+  );
+};
+export default AuthLogin;

package/src/components/ra-pages/LoginPage/AuthWrapper.jsx ADDED Viewed

@@ -0,0 +1,46 @@
+import { Box, Grid } from '@mui/material';
+import AuthCard from './AuthCard';
+import Footer from '../../Layout/Footer';
+import MainIcon from '../../MainIcon';
+import PropTypes from 'prop-types';
+const AuthWrapper = ({ version, name, children }) => (
+  <Box sx={{ minHeight: '100vh' }}>
+    <Grid
+      container
+      direction="column"
+      justifyContent="flex-end"
+      sx={{
+        minHeight: '100vh'
+      }}
+    >
+      <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
+        <MainIcon title={name} />
+      </Grid>
+      <Grid item xs={12}>
+        <Grid
+          item
+          xs={12}
+          container
+          justifyContent="center"
+          alignItems="center"
+          sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
+        >
+          <Grid item>
+            <AuthCard>{children}</AuthCard>
+          </Grid>
+        </Grid>
+        <Footer name={name} version={version} />
+      </Grid>
+    </Grid>
+  </Box>
+);
+AuthWrapper.propTypes = {
+  children: PropTypes.node,
+  version: PropTypes.string,
+  name: PropTypes.string
+};
+export default AuthWrapper;

package/src/components/ra-pages/LoginPage/Login.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import { Grid, Stack, Typography } from '@mui/material';
+import AuthLogin from './AuthLogin';
+import AuthWrapper from './AuthWrapper';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { useTranslate } from 'ra-core';
+export type LoginProps = {
+  /**
+   * Versione dell'applicazione.
+   */
+  version: string;
+  /**
+   * Nome dell'applicazione.
+   */
+  name: string;
+  /**
+   * Indica se abilitare o meno la schermata di recupero password.
+   */
+  enablePasswordForgot?: boolean;
+  /**
+   * Indica se abilitare o meno la schermata di registrazione.
+   */
+  enableSignup?: boolean;
+};
+const Login = ({ version, name, enablePasswordForgot, enableSignup }: LoginProps) => {
+  const translate = useTranslate();
+  return (
+    <AuthWrapper name={name} version={version}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+            <Typography variant="h3">Login</Typography>
+            {enableSignup && (
+              <Typography component={Link} to={'/signup'} variant="body1" sx={{ textDecoration: 'none' }} color="primary">
+                {translate('ra.auth.signup')}
+              </Typography>
+            )}
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <AuthLogin enablePasswordForgot={enablePasswordForgot} />
+        </Grid>
+      </Grid>
+    </AuthWrapper>
+  );
+};
+Login.propTypes = {
+  version: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  enablePasswordForgot: PropTypes.bool,
+  enableSignup: PropTypes.bool
+};
+Login.defaultProps = {
+  enablePasswordForgot: true,
+  enableSignup: true
+};
+export default Login;

package/src/components/ra-pages/LoginPage/index.jsx ADDED Viewed

@@ -0,0 +1,3 @@
+import Login from './Login';
+export default Login;

package/src/components/ra-pages/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import LoginPage from './LoginPage';
+export { LoginPage };

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import App from './playground/App';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/{playground/src/App.js → src/playground/App.jsx} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '@applica-software-guru/react-admin/style.css';
+// import '@applica-software-guru/react-admin/style.css';
 import * as entities from './entities';
@@ -6,7 +6,7 @@ import { API_URL, FILE_FIELDS } from './config';
 import { ApplicaAdmin, HttpError, Resource } from '@applica-software-guru/react-admin';
 import { createAttachmentsParser, createDataProvider } from '@applica-software-guru/crud-client';
-import { CustomPage } from 'components/pages';
+import { CustomPage } from './components/pages';
 import { CustomRoutes } from 'ra-core';
 import { Route } from 'react-router-dom';
 import build from './build.json';
@@ -34,6 +34,8 @@ const App = () => {
       menu={menu}
       name="RA"
       version={build.version}
+      disableSignup
+      disableForgotPassword
     >
       <Resource name="entities/notification" {...entities.notification} />
       <Resource name="entities/user" {...entities.user} />

package/{playground/src/components/index.js → src/playground/components/index.jsx} RENAMED Viewed

@@ -3,3 +3,4 @@ export * from './ra-inputs';
 export * from './ra-fields';
 export * from './ra-forms';
 export * from './ra-buttons';
+export * from './pages';

package/{playground/src/components/ra-lists/DeviceList.js → src/playground/components/ra-lists/DeviceList.jsx} RENAMED Viewed

@@ -12,7 +12,7 @@ const AlertBox = () => {
   );
 };
 const DeviceList = () => (
-  <List perPage={25} filters={[<SearchInput source="keyword" alwaysOn />]}>
+  <List perPage={25} filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}>
     <AlertBox />
     <Datagrid rowClick="edit">
       <TextField source="id" />

package/{playground/src/config.js → src/playground/config.jsx} RENAMED Viewed

@@ -1,6 +1,6 @@
 let environment = 'PRODUCTION';
 let appUrl = `//${document.location.host}/`;
-if (appUrl.endsWith(':3000/')) {
+if (appUrl.endsWith(':3000/') || appUrl.indexOf(':51') !== -1) {
   appUrl = 'http://localhost:8080/';
   environment = 'DEVELOPER';
 }

package/{playground/src/entities/device.js → src/playground/entities/device.jsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { Create, Edit } from '@applica-software-guru/react-admin';
-import { DeviceForm, DeviceList } from 'components';
+import { DeviceForm, DeviceList } from '../components';
 const DeviceCreate = () => (
   <Create>
     <DeviceForm />

package/{playground/src/entities/i18n-message.js → src/playground/entities/i18n-message.jsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { Create, Edit } from '@applica-software-guru/react-admin';
-import { I18nMessageForm, I18nMessageList } from 'components';
+import { I18nMessageForm, I18nMessageList } from '../components';
 import { FlagOutlined } from '@ant-design/icons';

package/{playground/src/entities/user.js → src/playground/entities/user.jsx} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { Create, Edit } from '@applica-software-guru/react-admin';
-import { UserForm, UserList } from 'components';
+import { UserForm, UserList } from '../components';
-import { CONFIGURED_ROLES } from 'config';
+import { CONFIGURED_ROLES } from '../config';
 import { UserOutlined } from '@ant-design/icons';
 const UserCreate = () => (

package/src/playground/hooks/index.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/{playground/src/theme.js → src/playground/theme.jsx} RENAMED Viewed

@@ -1,4 +1,4 @@
-const theme = (theme) => ({
+const theme = () => ({
   components: {
     MuiPaper: {
       styleOverrides: {}

package/vite.config.js CHANGED Viewed

@@ -8,6 +8,11 @@ import { resolve } from 'node:path';
 const { EsLinter, linterPlugin } = EsLint;
 export default defineConfig((configEnv) => ({
+  resolve: {
+    alias: {
+      '@applica-software-guru/react-admin': resolve(__dirname, 'src')
+    }
+  },
   plugins: [
     dts({
       include: ['./src/**/*.{js,jsx,ts,tsx}']

package/playground/config-overrides.js DELETED Viewed

@@ -1,31 +0,0 @@
-const webpack = require('webpack');
-const WorkBoxPlugin = require('workbox-webpack-plugin');
-module.exports = function override(config) {
-  config.resolve.fallback = {
-    process: require.resolve('process/browser'),
-    // zlib: require.resolve('browserify-zlib'),
-    stream: require.resolve('stream-browserify'),
-    crypto: require.resolve('crypto-browserify'),
-    util: require.resolve('util'),
-    buffer: require.resolve('buffer')
-    // asset: require.resolve('assert')
-  };
-  // https://stackoverflow.com/questions/69135310/workaround-for-cache-size-limit-in-create-react-app-pwa-service-worker
-  config.plugins.forEach((plugin) => {
-    if (plugin instanceof WorkBoxPlugin.InjectManifest) {
-      plugin.config.maximumFileSizeToCacheInBytes = 50 * 1024 * 1024;
-    }
-  });
-  config.plugins = [
-    ...config.plugins,
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-      Buffer: ['buffer', 'Buffer']
-    })
-  ];
-  return config;
-};