Vite used instead of webpack (#2)

Vite migration instead of webpack & create-react-app
obss · Oct 26, 2023 · 0efe0bb · 0efe0bb
1 parent 797e47e
commit 0efe0bb
Show file tree

Hide file tree

Showing 61 changed files with 135 additions and 79 deletions.
diff --git a/.env b/.env
@@ -1,3 +1,3 @@
 PORT=3245
-REACT_APP_VERSION=$npm_package_version
-REACT_APP_NAME=$npm_package_name
+VITE_REACT_APP_VERSION=$npm_package_version
+VITE_REACT_APP_NAME=$npm_package_name
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 .idea/
@@ -31,3 +56,24 @@ yarn-error.log*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+.history
+package-lock.json
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.history
+package-lock.json
diff --git a/README.md b/README.md
@@ -68,5 +68,3 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `yarn build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
-
-
diff --git a/index.html b/index.html
@@ -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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,21 +1,15 @@
 {
     "name": "comfort-react-demo",
     "version": "3.2.2",
+    "type": "module",
+    "private": false,
     "homepage": "http://obss.github.io/comfort-react-demo",
     "license": "MIT",
-    "devDependencies": {
-        "@babel/core": "7.19.3",
-        "@babel/eslint-parser": "7.19.1",
-        "@babel/plugin-proposal-class-properties": "7.18.6",
-        "@babel/plugin-proposal-function-bind": "7.18.9",
-        "@babel/preset-env": "7.19.4",
-        "@babel/preset-react": "7.18.6",
-        "eslint": "8.23.1",
-        "eslint-config-prettier": "8.5.0",
-        "eslint-plugin-prettier": "4.2.1",
-        "eslint-plugin-react": "7.31.8",
-        "eslint-plugin-react-hooks": "4.6.0",
-        "prettier": "2.7.1"
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
     },
     "dependencies": {
         "@emotion/cache": "11.10.3",
@@ -24,13 +18,18 @@
         "@mui/icons-material": "5.10.9",
         "@mui/lab": "5.0.0-alpha.103",
         "@mui/material": "5.10.9",
+        "@mui/styles": "5.9.3",
         "@mui/utils": "5.10.9",
         "@mui/x-date-pickers": "5.0.4",
+        "@testing-library/jest-dom": "5.11.4",
+        "@testing-library/react": "11.1.0",
+        "@testing-library/user-event": "12.1.10",
         "comfort-react": "3.2.2",
         "date-fns": "2.29.3",
         "jsx-to-string": "1.4.0",
         "miragejs": "0.1.45",
         "react": "18.2.0",
+        "react-bootstrap": "2.0.0-rc.0",
         "react-dom": "18.2.0",
         "react-draggable": "4.4.5",
         "react-dropzone": "14.2.3",
@@ -44,12 +43,33 @@
         "stylis-plugin-rtl": "2.1.1",
         "web-vitals": "3.0.1"
     },
-    "scripts": {
-        "start": "SET PUBLIC_URL=. && react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
-        "predeploy": "npm run build"
+    "devDependencies": {
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/parser": "^6.0.0",
+        "@vitejs/plugin-react": "^4.0.4",
+        "eslint-config-airbnb": "18.2.1",
+        "eslint-config-react-app": "6.0.0",
+        "eslint-plugin-flowtype": "5.10.0",
+        "eslint-plugin-import": "2.25.4",
+        "eslint-plugin-jsx-a11y": "6.5.1",
+        "eslint-plugin-react-refresh": "^0.4.3",
+        "lint-staged": "11.2.0",
+        "typescript": "^5.0.2",
+        "vite": "^4.4.5",
+        "@babel/core": "7.19.3",
+        "@babel/eslint-parser": "7.19.1",
+        "@babel/plugin-proposal-class-properties": "7.18.6",
+        "@babel/plugin-proposal-function-bind": "7.18.9",
+        "@babel/preset-env": "7.19.4",
+        "@babel/preset-react": "7.18.6",
+        "eslint": "8.23.1",
+        "eslint-config-prettier": "8.5.0",
+        "eslint-plugin-prettier": "4.2.1",
+        "eslint-plugin-react": "7.31.8",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "prettier": "2.7.1"
     },
     "babel": {
         "presets": [

diff --git a/public/index.html b/public/index.html
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/components/ApiInfo.js → src/components/ApiInfo.jsx b/src/components/ApiInfo.js → src/components/ApiInfo.jsx
diff --git a/src/components/BodyWrapper.js → src/components/BodyWrapper.jsx b/src/components/BodyWrapper.js → src/components/BodyWrapper.jsx
diff --git a/src/components/CodeAccordion.js → src/components/CodeAccordion.jsx b/src/components/CodeAccordion.js → src/components/CodeAccordion.jsx
diff --git a/src/components/CurrentComponentApiInfo.js → src/components/CurrentComponentApiInfo.jsx b/src/components/CurrentComponentApiInfo.js → src/components/CurrentComponentApiInfo.jsx
diff --git a/src/components/CurrentRulesInfo.js → src/components/CurrentRulesInfo.jsx b/src/components/CurrentRulesInfo.js → src/components/CurrentRulesInfo.jsx
diff --git a/src/components/ExampleUsageWrapper.js → src/components/ExampleUsageWrapper.jsx b/src/components/ExampleUsageWrapper.js → src/components/ExampleUsageWrapper.jsx
diff --git a/src/components/FormSubmitResult.js → src/components/FormSubmitResult.jsx b/src/components/FormSubmitResult.js → src/components/FormSubmitResult.jsx
diff --git a/src/components/Homepage.js → src/components/Homepage.jsx b/src/components/Homepage.js → src/components/Homepage.jsx
diff --git a/src/components/Main.js → src/components/Main.jsx b/src/components/Main.js → src/components/Main.jsx
@@ -345,7 +345,7 @@ const Main = () => {
                 <HashRouter>
                     <div className={'obssTriangle'}>
                         <a className={'triangleIcon'} href={'https://obss.tech/'} target={'_blank'} rel="noreferrer">
-                            <img src={process.env.PUBLIC_URL + '/obss.png'} alt={'obss'} />
+                            <img src={'/obss.png'} alt={'obss'} />
                         </a>
                     </div>
                     <Box flexGrow={1}>
@@ -355,12 +355,7 @@ const Main = () => {
                                     <MenuIcon />
                                 </IconButton>
                                 <Link to={'/'} className="bannerLink">
-                                    <img
-                                        width={48}
-                                        className={'menuLogo'}
-                                        src={process.env.PUBLIC_URL + '/logo.png'}
-                                        alt={'logo'}
-                                    />
+                                    <img width={48} className={'menuLogo'} src={'/logo.png'} alt={'logo'} />
                                     <span className="bannerText">comfort-react</span>
                                 </Link>
                                 <Box flexGrow={1} />

diff --git a/src/components/MainDrawer.js → src/components/MainDrawer.jsx b/src/components/MainDrawer.js → src/components/MainDrawer.jsx
diff --git a/src/components/NavSidebar.js → src/components/NavSidebar.jsx b/src/components/NavSidebar.js → src/components/NavSidebar.jsx
diff --git a/src/components/RTL.js → src/components/RTL.jsx b/src/components/RTL.js → src/components/RTL.jsx
diff --git a/src/components/Settings.js → src/components/Settings.jsx b/src/components/Settings.js → src/components/Settings.jsx
@@ -5,7 +5,7 @@ import { SettingsOutlined } from '@mui/icons-material';
 
 const Settings = (props) => {
     const { openSettingsDialog } = props;
-    const versionInfo = `Version: ${process.env.REACT_APP_VERSION}`;
+    const versionInfo = `Version: ${import.meta.env.VITE_REACT_APP_VERSION}`;
 
     return (
         <div className={'settings-div'}>
@@ -17,14 +17,14 @@ const Settings = (props) => {
             <Tooltip placement="bottom" title="View on GitHub">
                 <span className={'githubIcon'}>
                     <a href={'https://github.com/obss/comfort-react'} target="_blank" rel="noreferrer">
-                        <img src={process.env.PUBLIC_URL + '/github.png'} alt="github_icon" />
+                        <img src={'/github.png'} alt="github_icon" />
                     </a>
                 </span>
             </Tooltip>
             <Tooltip placement="bottom" title="View on npmjs">
                 <span className={'npmIcon'}>
                     <a href={'https://www.npmjs.com/package/comfort-react'} target="_blank" rel="noreferrer">
-                        <img src={process.env.PUBLIC_URL + '/npm.png'} alt="npm_icon" />
+                        <img src={'/npm.png'} alt="npm_icon" />
                     </a>
                 </span>
             </Tooltip>

diff --git a/src/components/ValidationResult.js → src/components/ValidationResult.jsx b/src/components/ValidationResult.js → src/components/ValidationResult.jsx
diff --git a/...components/api/ApiComfortReactProvider.js → ...omponents/api/ApiComfortReactProvider.jsx b/...components/api/ApiComfortReactProvider.js → ...omponents/api/ApiComfortReactProvider.jsx
diff --git a/...nents/components/ComponentAutocomplete.js → ...ents/components/ComponentAutocomplete.jsx b/...nents/components/ComponentAutocomplete.js → ...ents/components/ComponentAutocomplete.jsx
diff --git a/src/components/components/ComponentButton.js → ...components/components/ComponentButton.jsx b/src/components/components/ComponentButton.js → ...components/components/ComponentButton.jsx
diff --git a/...omponents/components/ComponentCheckbox.js → ...mponents/components/ComponentCheckbox.jsx b/...omponents/components/ComponentCheckbox.js → ...mponents/components/ComponentCheckbox.jsx
diff --git a/...ents/components/ComponentConfirmDialog.js → ...nts/components/ComponentConfirmDialog.jsx b/...ents/components/ComponentConfirmDialog.js → ...nts/components/ComponentConfirmDialog.jsx
diff --git a/...ponents/components/ComponentDatePicker.js → ...onents/components/ComponentDatePicker.jsx b/...ponents/components/ComponentDatePicker.js → ...onents/components/ComponentDatePicker.jsx
diff --git a/src/components/components/ComponentDialog.js → ...components/components/ComponentDialog.jsx b/src/components/components/ComponentDialog.js → ...components/components/ComponentDialog.jsx
diff --git a/...mponents/components/ComponentFileInput.js → ...ponents/components/ComponentFileInput.jsx b/...mponents/components/ComponentFileInput.js → ...ponents/components/ComponentFileInput.jsx
diff --git a/...ponents/components/ComponentFormDialog.js → ...onents/components/ComponentFormDialog.jsx b/...ponents/components/ComponentFormDialog.js → ...onents/components/ComponentFormDialog.jsx
@@ -73,7 +73,7 @@ const ComponentFormDialog = () => {
     let currentJsx = jsxToString(formDialogElementJsx, {
         displayName: 'FormDialog',
         useFunctionCode: true,
-    }).replace('<[object Object]', '<TextField');;
+    }).replace('<[object Object]', '<TextField');
 
     currentJsx = "import { FormDialog } from 'comfort-react';\n\n" + currentJsx;
 

diff --git a/...ponents/components/ComponentIconButton.js → ...onents/components/ComponentIconButton.jsx b/...ponents/components/ComponentIconButton.js → ...onents/components/ComponentIconButton.jsx
diff --git a/...mponents/components/ComponentMaskField.js → ...ponents/components/ComponentMaskField.jsx b/...mponents/components/ComponentMaskField.js → ...ponents/components/ComponentMaskField.jsx
diff --git a/...ponents/components/ComponentMenuButton.js → ...onents/components/ComponentMenuButton.jsx b/...ponents/components/ComponentMenuButton.js → ...onents/components/ComponentMenuButton.jsx
diff --git a/...onents/components/ComponentNumberField.js → ...nents/components/ComponentNumberField.jsx b/...onents/components/ComponentNumberField.js → ...nents/components/ComponentNumberField.jsx
diff --git a/...ponents/components/ComponentPhoneInput.js → ...onents/components/ComponentPhoneInput.jsx b/...ponents/components/ComponentPhoneInput.js → ...onents/components/ComponentPhoneInput.jsx
diff --git a/...onents/components/ComponentRadioButton.js → ...nents/components/ComponentRadioButton.jsx b/...onents/components/ComponentRadioButton.js → ...nents/components/ComponentRadioButton.jsx
diff --git a/...onents/ComponentShrinkableTransferList.js → ...nents/ComponentShrinkableTransferList.jsx b/...onents/ComponentShrinkableTransferList.js → ...nents/ComponentShrinkableTransferList.jsx
diff --git a/src/components/components/ComponentSwitch.js → ...components/components/ComponentSwitch.jsx b/src/components/components/ComponentSwitch.js → ...components/components/ComponentSwitch.jsx
diff --git a/...omponents/components/ComponentDataGrid.js → src/components/components/ComponentTable.jsx b/...omponents/components/ComponentDataGrid.js → src/components/components/ComponentTable.jsx
diff --git a/...mponents/components/ComponentTextField.js → ...ponents/components/ComponentTextField.jsx b/...mponents/components/ComponentTextField.js → ...ponents/components/ComponentTextField.jsx
diff --git a/...ponents/components/ComponentTimePicker.js → ...onents/components/ComponentTimePicker.jsx b/...ponents/components/ComponentTimePicker.js → ...onents/components/ComponentTimePicker.jsx
diff --git a/...nents/components/ComponentTransferList.js → ...ents/components/ComponentTransferList.jsx b/...nents/components/ComponentTransferList.js → ...ents/components/ComponentTransferList.jsx
diff --git a/.../components/CustomErrorMessageRenderer.js → ...components/CustomErrorMessageRenderer.jsx b/.../components/CustomErrorMessageRenderer.js → ...components/CustomErrorMessageRenderer.jsx
diff --git a/src/components/examples/ListItemsExample.js → src/components/examples/ListItemsExample.jsx b/src/components/examples/ListItemsExample.js → src/components/examples/ListItemsExample.jsx
diff --git a/src/components/getting-started/Home.js → src/components/getting-started/Home.jsx b/src/components/getting-started/Home.js → src/components/getting-started/Home.jsx
@@ -44,7 +44,7 @@ const Home = () => {
             rowGap={5}
             pt={2}
         >
-            <img width={'200px'} src={process.env.PUBLIC_URL + '/logo.png'} alt={'logo'} />
+            <img width={'200px'} src={'/logo.png'} alt={'logo'} />
             <Typography variant={'h3'}> comfort-react </Typography>
             <Typography variant={'h6'}>
                 {' '}

diff --git a/...omponents/getting-started/Installation.js → ...mponents/getting-started/Installation.jsx b/...omponents/getting-started/Installation.js → ...mponents/getting-started/Installation.jsx
diff --git a/src/components/getting-started/Usage.js → src/components/getting-started/Usage.jsx b/src/components/getting-started/Usage.js → src/components/getting-started/Usage.jsx
diff --git a/src/components/rules/RulePhoneNumber.js → src/components/rules/RulePhoneNumber.jsx b/src/components/rules/RulePhoneNumber.js → src/components/rules/RulePhoneNumber.jsx
diff --git a/src/components/rules/RuleTckn.js → src/components/rules/RuleTckn.jsx b/src/components/rules/RuleTckn.js → src/components/rules/RuleTckn.jsx
diff --git a/src/components/rules/RuleTime.js → src/components/rules/RuleTime.jsx b/src/components/rules/RuleTime.js → src/components/rules/RuleTime.jsx
diff --git a/src/components/rules/RuleVkn.js → src/components/rules/RuleVkn.jsx b/src/components/rules/RuleVkn.js → src/components/rules/RuleVkn.jsx
diff --git a/src/components/use-api/UseApi.js → src/components/use-api/UseApi.jsx b/src/components/use-api/UseApi.js → src/components/use-api/UseApi.jsx
diff --git a/src/components/use-api/UseApiApi.js → src/components/use-api/UseApiApi.jsx b/src/components/use-api/UseApiApi.js → src/components/use-api/UseApiApi.jsx
diff --git a/src/components/use-snackbar/UseSnackbar.js → src/components/use-snackbar/UseSnackbar.jsx b/src/components/use-snackbar/UseSnackbar.js → src/components/use-snackbar/UseSnackbar.jsx
diff --git a/...components/use-snackbar/UseSnackbarApi.js → ...omponents/use-snackbar/UseSnackbarApi.jsx b/...components/use-snackbar/UseSnackbarApi.js → ...omponents/use-snackbar/UseSnackbarApi.jsx
diff --git a/...ponents/validatable-form/CustomMessage.js → ...onents/validatable-form/CustomMessage.jsx b/...ponents/validatable-form/CustomMessage.js → ...onents/validatable-form/CustomMessage.jsx
diff --git a/...ts/validatable-form/CustomTranslations.js → ...s/validatable-form/CustomTranslations.jsx b/...ts/validatable-form/CustomTranslations.js → ...s/validatable-form/CustomTranslations.jsx
diff --git a/src/index.js → src/main.jsx b/src/index.js → src/main.jsx
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react({
+    include: '**/*.{js,jsx,tsx}',
+  })],
+})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,5 +68,3 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
		### `yarn build` fails to minify

		This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)