Bootstrap react@18 - Initial commit

Author: Tezirg

.eslintrc.js

@@ -0,0 +1,49 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: [
+    "@typescript-eslint",
+    "react",
+    "unicorn",
+    "prettier",
+  ],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:unicorn/recommended",
+    "plugin:prettier/recommended"
+  ],
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+  ignorePatterns: [
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  rules: {
+    "prettier/prettier": [
+      "error",
+      {
+        printWidth: 80,
+        semi: true,
+        singleQuote: true,
+        quoteProps: 'as-needed',
+        tabWidth: 2,
+        jsxSingleQuote: false,
+        trailingComma: 'all',
+        bracketSpacing: true,
+        bracketSameLine: false,
+        arrowParens: 'always',
+        htmlWhitespaceSensitivity: 'css',
+        endOfLine: 'lf',
+        embeddedLanguageFormatting: 'auto',
+        useTabs: false,
+      }
+    ],
+  },
+};

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "bootstrap",
+  "version": "0.0.1",
+  "private": true,
+  "contributors": [
+    "Jean Grizet <[email protected]>"
+  ],
+  "scripts": {
+    "build": "webpack build --config-name build",
+    "lint": "eslint ./src/",
+    "lint:fix": "yarn lint --fix",
+    "lint:i18": "node tools/i18next/main.js -u -m --config tools/i18next/i18next-scanner.config.js",
+    "start": "webpack serve --config-name dev"
+  },
+  "dependencies": {
+    "@babel/core": "^7.17.9",
+    "@date-io/date-fns": "^2.13.1",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.2",
+    "@mui/system": "^5.6.2",
+    "@mui/x-date-pickers": "^5.0.0-alpha.1",
+    "date-fns": "^2.28.0",
+    "i18next": "^21.6.12",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-i18next": "^11.16.7",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.5",
+    "@types/react-dom": "^18.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "argparse": "^2.0.1",
+    "copy-webpack-plugin": "^10.2.4",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-unicorn": "^42.0.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "html-webpack-plugin": "^5.5.0",
+    "i18next-scanner": "^3.0.1",
+    "prettier": "^2.6.2",
+    "ts-loader": "9.2.8",
+    "typescript": "4.6.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1"
+  }
+}

src/app.tsx

@@ -0,0 +1,32 @@
+import React, { Suspense } from 'react';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import MuiThemeProvider from './mui-theme-provider';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+const RootPage = React.lazy(() => import('./pages/root-page'));
+const HomePage = React.lazy(() => import('./pages/home-page'));
+const NotFoundPage = React.lazy(() => import('./pages/not-found-page'));
+const ExamplePage = React.lazy(() => import('./pages/example-page'));
+
+function App(): JSX.Element {
+  return (
+    <MuiThemeProvider>
+      <Suspense fallback={<div></div>}>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<RootPage />}>
+                <Route index element={<HomePage />} />
+                <Route path="example" element={<ExamplePage />} />
+                <Route path="*" element={<NotFoundPage />} />
+              </Route>
+            </Routes>
+          </BrowserRouter>
+        </LocalizationProvider>
+      </Suspense>
+    </MuiThemeProvider>
+  );
+}
+
+export default App;

src/i18n.ts

@@ -0,0 +1,20 @@
+import i18next, { ReadCallback } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18next
+  .use(initReactI18next)
+  .use({
+    type: 'backend',
+    read: (language: string, namespace: string, callback: ReadCallback) => {
+      import(`./locales/${language}_${namespace}.json`)
+        .then((resources) => {
+          callback(undefined, resources);
+        })
+        .catch((error) => {
+          callback(error, false);
+        });
+    },
+  })
+  .init({
+    fallbackLng: ['fr', 'en'],
+  });

src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Bootstrap template">
+    <title>Bootstrap</title>
+    <link rel="shortcut icon" href="static/favicon.ico" type="image/vnd.microsoft.icon">
+  </head>
+  <body>
+    <div id="root" />
+  </body>
+</html>

src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+import './i18n';
+
+const container = document.querySelector('#root');
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!);
+root.render(<App />);

src/locales/en_translation.json

@@ -0,0 +1,13 @@
+{
+  "pages": {
+    "home": {
+      "text": "Bootstrap home page"
+    },
+    "404": {
+      "text": "404 - Page not found"
+    },
+    "example": {
+      "text": "Example page"
+    }
+  }
+}

src/locales/fr_translation.json

@@ -0,0 +1,13 @@
+{
+  "pages": {
+    "home": {
+      "text": "Amorce page d'accueil"
+    },
+    "404": {
+      "text": "404 - Cette page n'existe pas"
+    },
+    "example": {
+      "text": "Page d'exemple"
+    }
+  }
+}

src/mui-theme-provider.tsx

@@ -0,0 +1,102 @@
+import React, {
+  ReactNode,
+  ReactElement,
+  useMemo,
+  useState,
+  useContext,
+  useEffect,
+} from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import {
+  createTheme,
+  ThemeProvider,
+  StyledEngineProvider,
+  useMediaQuery,
+  PaletteMode,
+  Theme,
+} from '@mui/material';
+
+const baseTheme = {
+  typography: {
+    fontFamily: ['Montserrat', 'sans-serif'].join(','),
+    fontSize: 12,
+    fontWeightLight: 400,
+    fontWeightRegular: 500,
+    fontWeightMedium: 550,
+    fontWeightBold: 600,
+  },
+};
+
+const lightPalette = {
+  mode: 'light' as PaletteMode,
+};
+
+const darkPalette = {
+  mode: 'dark' as PaletteMode,
+};
+
+type MuiThemeProviderProperties = {
+  children: ReactNode;
+};
+
+type MuiThemeContextProperties = {
+  theme?: Theme;
+  toggleTheme: () => void;
+};
+
+export const MuiThemeContext = React.createContext<MuiThemeContextProperties>({
+  theme: undefined,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  toggleTheme: () => {},
+});
+
+export const useMuiThemeContext = () => useContext(MuiThemeContext);
+
+function MuiThemeProvider({
+  children,
+}: MuiThemeProviderProperties): ReactElement {
+  const localStorageModeKey = 'theme.palette.mode';
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const localMode = window.localStorage.getItem(localStorageModeKey);
+  const [darkMode, setDarkMode] = useState<boolean>(
+    localMode ? localMode === 'dark' : prefersDarkMode,
+  );
+
+  function toggleTheme() {
+    window.localStorage.setItem(
+      localStorageModeKey,
+      darkMode ? 'light' : 'dark',
+    );
+    setDarkMode(!darkMode);
+  }
+
+  const theme: Theme = useMemo(
+    () =>
+      createTheme({
+        ...baseTheme,
+        palette: darkMode ? darkPalette : lightPalette,
+      }),
+    [darkMode],
+  );
+
+  useEffect(() => {
+    if (darkMode) {
+      document.querySelector('body')?.classList.add('dark-theme');
+    } else {
+      document.querySelector('body')?.classList.remove('dark-theme');
+    }
+  }, [darkMode]);
+
+  return (
+    <MuiThemeContext.Provider value={{ theme, toggleTheme }}>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          {children}
+        </ThemeProvider>
+      </StyledEngineProvider>
+    </MuiThemeContext.Provider>
+  );
+}
+
+export default MuiThemeProvider;

src/pages/example-page.tsx

@@ -0,0 +1,26 @@
+import { TextField } from '@mui/material';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function ExamplePage(): JSX.Element {
+  const { t } = useTranslation();
+  const [value, setValue] = useState<Date | null>(new Date());
+
+  const handleChange = (newValue: Date | null) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div>
+      <p>{t('pages.example.text')}</p>
+      <DateTimePicker
+        value={value}
+        onChange={handleChange}
+        renderInput={(parameters) => <TextField {...parameters} />}
+      />
+    </div>
+  );
+}
+
+export default ExamplePage;

src/pages/home-page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function HomePage(): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <p>{t('pages.home.text')}</p>
+    </div>
+  );
+}
+
+export default HomePage;

src/pages/not-found-page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function HomePage(): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <p>{t('pages.404.text')}</p>
+    </div>
+  );
+}
+
+export default HomePage;