From 1d05bd4cd636da9a1ea884ea964085883323b93f Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 11 Mar 2024 18:34:00 +0100 Subject: [PATCH 01/35] refactor: migrate from CRA to Vite --- .env | 2 -- .eslintrc.js | 2 -- .prettierignore | 2 +- .prettierrc.js | 6 ++--- README.md | 10 +++++--- index.html | 29 +++++++++++++++++++++ jest.config.js | 17 ------------- jsconfig.json | 6 ----- package.json | 27 ++++++++------------ public/index.html | 50 ------------------------------------ src/App.test.js | 9 ------- src/index.js | 12 +++------ src/reportWebVitals.js | 13 ---------- src/setupTests.js | 5 ---- vite.config.mjs | 57 ++++++++++++++++++++++++++++++++++++++++++ 15 files changed, 110 insertions(+), 137 deletions(-) delete mode 100644 .env create mode 100644 index.html delete mode 100644 jest.config.js delete mode 100644 jsconfig.json delete mode 100644 public/index.html delete mode 100644 src/App.test.js delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js create mode 100644 vite.config.mjs diff --git a/.env b/.env deleted file mode 100644 index 0c48d3cda..000000000 --- a/.env +++ /dev/null @@ -1,2 +0,0 @@ -PORT=3000 -CHOKIDAR_USEPOLLING=true diff --git a/.eslintrc.js b/.eslintrc.js index e08f0b57a..e9c55eec0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,8 +13,6 @@ module.exports = { }, }, extends: [ - 'react-app', - 'react-app/jest', 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. ], diff --git a/.prettierignore b/.prettierignore index 849ddff3b..567609b12 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1 @@ -dist/ +build/ diff --git a/.prettierrc.js b/.prettierrc.js index 415ca0578..66f90b933 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,7 +1,7 @@ module.exports = { semi: false, - trailingComma: "all", + trailingComma: 'all', singleQuote: true, printWidth: 100, - tabWidth: 2 -}; \ No newline at end of file + tabWidth: 2, +} diff --git a/README.md b/README.md index 24a987dd0..896332553 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,8 @@ Within the download you'll find the following directories and files, logically g ``` coreui-free-react-admin-template ├── public/ # static files -│ └── index.html # html template +│ ├── favicon.ico +│ └── manifest.json │ ├── src/ # project root │ ├── assets/ # images, icons, etc. @@ -126,12 +127,15 @@ coreui-free-react-admin-template │ ├── views/ # application views │ ├── _nav.js # sidebar navigation config │ ├── App.js -│ ├── ... │ ├── index.js │ ├── routes.js # routes config │ └── store.js # template state example │ -└── package.json +├── index.html # html template +├── ... +├── package.json +├── ... +└── vite.config.mjs # vite config ``` ## Documentation diff --git a/index.html b/index.html new file mode 100644 index 000000000..ceddb2461 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + + CoreUI Free React.js Admin Template + + + + + +
+ + + + diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index abf16ab93..000000000 --- a/jest.config.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict' - -module.exports = { - collectCoverageFrom: [ - 'src/**/*.{js,jsx}', - '!**/*index.js', - '!src/serviceWorker.js', - '!src/polyfill.js', - ], -} diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 63f923e44..000000000 --- a/jsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "." - }, - "include": ["src"] -} \ No newline at end of file diff --git a/package.json b/package.json index 3b1991bf7..56a6e587a 100644 --- a/package.json +++ b/package.json @@ -13,13 +13,10 @@ "license": "MIT", "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", "scripts": { - "build": "react-scripts build", - "eject": "react-scripts eject", + "build": "vite build", "lint": "eslint \"src/**/*.js\"", - "start": "react-scripts start", - "test": "react-scripts test", - "test:cov": "npm test -- --coverage --watchAll=false", - "test:debug": "react-scripts --inspect-brk test --runInBand" + "serve": "vite preview", + "start": "vite" }, "dependencies": { "@coreui/chartjs": "^4.0.0-rc.0", @@ -35,7 +32,6 @@ "core-js": "^3.36.0", "prop-types": "^15.8.1", "react": "^18.2.0", - "react-app-polyfill": "^3.0.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", @@ -43,19 +39,16 @@ "simplebar-react": "^3.2.4" }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", - "@testing-library/user-event": "^14.5.2", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.18", + "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.34.0", + "eslint-plugin-react-hooks": "^4.6.0", + "postcss": "^8.4.35", "prettier": "3.2.5", - "react-scripts": "5.0.1", "sass": "^1.71.1", - "web-vitals": "^3.5.2" - }, - "engines": { - "node": ">=10", - "npm": ">=6" + "vite": "^5.1.6" } } diff --git a/public/index.html b/public/index.html deleted file mode 100644 index eeb29ba81..000000000 --- a/public/index.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - CoreUI Free React.js Admin Template - - - - - - - -
- - - diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 3a7a8cc56..000000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import { render, screen } from '@testing-library/react' -import App from './App' - -test('renders learn react link', () => { - render() - const linkElement = screen.getByText(/learn react/i) - expect(linkElement).toBeInTheDocument() -}) diff --git a/src/index.js b/src/index.js index d19a3bcd3..11d6e8658 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,9 @@ -import 'react-app-polyfill/stable' -import 'core-js' import React from 'react' import { createRoot } from 'react-dom/client' -import App from './App' -import reportWebVitals from './reportWebVitals' import { Provider } from 'react-redux' +import 'core-js' + +import App from './App' import store from './store' createRoot(document.getElementById('root')).render( @@ -12,8 +11,3 @@ createRoot(document.getElementById('root')).render( , ) - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals() diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index dc6ff0781..000000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = (onPerfEntry) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry) - getFID(onPerfEntry) - getFCP(onPerfEntry) - getLCP(onPerfEntry) - getTTFB(onPerfEntry) - }) - } -} - -export default reportWebVitals diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 52aaef1d2..000000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom' diff --git a/vite.config.mjs b/vite.config.mjs new file mode 100644 index 000000000..ee16a3581 --- /dev/null +++ b/vite.config.mjs @@ -0,0 +1,57 @@ +import { defineConfig, loadEnv } from 'vite' +import react from '@vitejs/plugin-react' +import path from 'node:path' +import autoprefixer from 'autoprefixer' + +export default defineConfig(({ mode }) => { + // Load .env + const env = loadEnv(mode, process.cwd(), '') + process.env = { ...process.env, ...env } + + return { + base: './', + build: { + outDir: 'build', + }, + css: { + postcss: { + plugins: [ + autoprefixer({}), // add options if needed + ], + }, + }, + define: { + // vitejs does not support process.env so we have to redefine it + 'process.env': process.env, + }, + esbuild: { + loader: 'jsx', + include: /src\/.*\.jsx?$/, + exclude: [], + }, + optimizeDeps: { + force: true, + esbuildOptions: { + loader: { + '.js': 'jsx', + }, + }, + }, + plugins: [react()], + resolve: { + alias: [ + { + find: 'src/', + replacement: `${path.resolve(__dirname, 'src')}/`, + }, + ], + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'], + }, + server: { + port: 3000, + proxy: { + // https://vitejs.dev/config/server-options.html + }, + }, + } +}) From b57048543adf84edfc7aaff7808f03eeed961065 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 12:45:41 +0100 Subject: [PATCH 02/35] chore: clean-up --- vite.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.mjs b/vite.config.mjs index ee16a3581..66ffff2cf 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -45,7 +45,7 @@ export default defineConfig(({ mode }) => { replacement: `${path.resolve(__dirname, 'src')}/`, }, ], - extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'], + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'], }, server: { port: 3000, From 0a7196fc53ff844fe4427f50b4d36de54d299b03 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 13:05:15 +0100 Subject: [PATCH 03/35] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.0.0-rc-2 → ^5.0.0-rc.3 @coreui/react ^5.0.0-rc.2 → ^5.0.0-rc.3 autoprefixer ^10.4.18 → ^10.4.19 core-js ^3.36.0 → ^3.36.1 eslint-plugin-react ^7.34.0 → ^7.34.1 postcss ^8.4.35 → ^8.4.38 sass ^1.71.1 → ^1.72.0 vite ^5.1.6 → ^5.2.2 --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 56a6e587a..e70fe6eff 100644 --- a/package.json +++ b/package.json @@ -23,13 +23,13 @@ "@coreui/coreui": "^5.0.0-rc-2", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.2.1", - "@coreui/react": "^5.0.0-rc.2", + "@coreui/react": "^5.0.0-rc.3", "@coreui/react-chartjs": "^3.0.0-rc.0", "@coreui/utils": "^2.0.2", "@popperjs/core": "^2.11.8", "chart.js": "^4.4.2", "classnames": "^2.5.1", - "core-js": "^3.36.0", + "core-js": "^3.36.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -40,15 +40,15 @@ }, "devDependencies": { "@vitejs/plugin-react": "^4.2.1", - "autoprefixer": "^10.4.18", + "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "postcss": "^8.4.35", + "postcss": "^8.4.38", "prettier": "3.2.5", - "sass": "^1.71.1", - "vite": "^5.1.6" + "sass": "^1.72.0", + "vite": "^5.2.2" } } From cc07a0478c98a23b20634bf0ebfe2917df6ba16f Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 13:06:20 +0100 Subject: [PATCH 04/35] docs: update README --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 896332553..101aa0a32 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,8 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of * [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template) * [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template) -* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template) +* [CoreUI Free React.js Admin Template (Vite)](https://github.com/coreui/coreui-free-react-admin-template) +* [CoreUI Free React.js Admin Template (Create React App)](https://github.com/coreui/coreui-free-react-admin-template-cra) * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template) ## CoreUI PRO @@ -140,7 +141,7 @@ coreui-free-react-admin-template ## Documentation -The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/) +The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/docs/templates/installation/) ## Versioning From 49af4079f9166012c2d76bb806aae5292e7992e9 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 13:06:58 +0100 Subject: [PATCH 05/35] release: v5.0.0-rc.1 --- index.html | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ceddb2461..2e283fb93 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js index fd126f460..217c5a04c 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -8,7 +8,7 @@ const AppFooter = () => { CoreUI - © 2024 creativeLabs. + © 2025 creativeLabs.
Powered by From 74b0aaf708de9b9a417c9b9f0236a8febdac2da3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 4 Feb 2025 14:37:27 +0100 Subject: [PATCH 31/35] refactor: migrate to CSS logical properties and values --- src/scss/_theme.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss index 49e1c79e6..b014421f2 100644 --- a/src/scss/_theme.scss +++ b/src/scss/_theme.scss @@ -4,8 +4,7 @@ body { .wrapper { width: 100%; - @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); - @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0)); + padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); will-change: auto; @include transition(padding .15s); } @@ -33,13 +32,13 @@ body { } .sidebar-toggler { - @include ltr-rtl("margin-left", auto); + margin-inline-start: auto; } .sidebar-narrow, .sidebar-narrow-unfoldable:not(:hover) { .sidebar-toggler { - @include ltr-rtl("margin-right", auto); + margin-inline-end: auto } } From 69269e8e347d023d20a1b1dc8a27df9bdc5acfff Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Feb 2025 13:22:45 +0100 Subject: [PATCH 32/35] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/react ^5.4.1 → ^5.5.0 sass ^1.83.4 → ^1.84.0 vite ^6.0.11 → ^6.1.0 --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d2476e36e..fd106e849 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@coreui/coreui": "^5.2.0", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.3.0", - "@coreui/react": "^5.4.1", + "@coreui/react": "^5.5.0", "@coreui/react-chartjs": "^3.0.0", "@coreui/utils": "^2.0.2", "@popperjs/core": "^2.11.8", @@ -49,7 +49,7 @@ "globals": "^15.14.0", "postcss": "^8.5.1", "prettier": "3.4.2", - "sass": "^1.83.4", - "vite": "^6.0.11" + "sass": "^1.84.0", + "vite": "^6.1.0" } } From b78e444d202979e41b4f26388b548c9d642aa692 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Feb 2025 13:27:12 +0100 Subject: [PATCH 33/35] release: v5.3.0 --- index.html | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e2b715c93..84b9a228b 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@