From 51f34b056e8fa566c8603f8548a440ec0f2ac4af Mon Sep 17 00:00:00 2001 From: Harsh Mishra Date: Mon, 6 Jun 2022 21:55:59 +0530 Subject: [PATCH] feat: migrate Vue-2 to Vue-3 for FLINT-UI (#294) * fix: fix RothC output not being visible * fix merger conflicts * chore: start migration with vue migration build * update libraries * upgrade libraries, fix some warnings * downgrade antdv * chore: upgrade all libraries, remove unnecessary libraries, fix errors during migration Signed-off-by: YashKandalkar * fix: storybook errors * fix+refactor: convert StepperGCBM to Ant Design (#295) Converts `StepperGCBM` from the Material Vue based component to an Ant Design based one. Now we can switch between GCBM pages in Vue3. Also fixes social icon hover bug and a typo. Signed-off-by: Amit * fix: gcbm bugs * fix: v-deep warning, inline style, other requested changes Co-authored-by: YashKandalkar Co-authored-by: Amit <51860725+CrystalSage@users.noreply.github.com> --- flint.ui/.eslintrc.js | 7 +- flint.ui/.storybook/main.js | 28 +- flint.ui/package.json | 67 +- .../src/components/Cards/LandingPageCard.vue | 2 +- .../src/components/Datepicker/Datepicker.vue | 13 +- .../components/Datepicker/DatepickerPoint.vue | 22 +- .../components/Datepicker/DatepickerRothC.vue | 22 +- .../src/components/FileUpload/FileUpload.vue | 259 +- flint.ui/src/components/Footer/Footer.vue | 5 +- .../components/Navbars/LandingPageNavbar.vue | 23 +- .../components/{Sliders => Slider}/Slider.vue | 22 +- .../components/{Sliders => Slider}/Toggle.vue | 9 +- .../src/components/Sliders/ConfigSliders.vue | 81 - .../src/components/Stepper/StepperGCBM.vue | 76 +- .../src/components/Stepper/StepperStatic.vue | 10 + flint.ui/src/components/Vuelayers/Map.vue | 3 +- flint.ui/src/components/Vuelayers/Maptest.vue | 27 +- flint.ui/src/layouts/FLINT.vue | 2 +- flint.ui/src/layouts/GCBM.vue | 2 +- flint.ui/src/main.js | 89 +- flint.ui/src/routes/routes.js | 28 +- flint.ui/src/store/index.js | 7 +- flint.ui/src/store/modules/gcbm.js | 13 +- flint.ui/src/store/modules/point.js | 54 +- flint.ui/src/store/modules/rothc.js | 33 +- flint.ui/src/stories/Alerts.stories.js | 2 +- flint.ui/src/stories/DatePicker.stories.js | 2 +- flint.ui/src/stories/Divider.stories.js | 2 +- flint.ui/src/stories/Introduction.stories.mdx | 347 +- flint.ui/src/stories/PopupConfirm.stories.js | 2 +- flint.ui/src/stories/Progress.stories.js | 2 +- flint.ui/src/stories/Slider.stories.js | 2 +- flint.ui/src/views/Landing.vue | 4 +- .../src/views/flint/ConfigurationsPoint.vue | 47 +- .../src/views/flint/ConfigurationsRothC.vue | 30 +- flint.ui/src/views/gcbm/GCBMDashboard.vue | 8 +- flint.ui/src/views/gcbm/GCBMRun.vue | 28 +- flint.ui/src/views/gcbm/GCBMUpload.vue | 15 +- flint.ui/vue.config.js | 18 + flint.ui/yarn.lock | 6824 +++++++++-------- 40 files changed, 4161 insertions(+), 4076 deletions(-) rename flint.ui/src/components/{Sliders => Slider}/Slider.vue (65%) rename flint.ui/src/components/{Sliders => Slider}/Toggle.vue (84%) delete mode 100644 flint.ui/src/components/Sliders/ConfigSliders.vue diff --git a/flint.ui/.eslintrc.js b/flint.ui/.eslintrc.js index 06379c94..c13b57f1 100644 --- a/flint.ui/.eslintrc.js +++ b/flint.ui/.eslintrc.js @@ -1,6 +1,11 @@ // enable vue in eslint module.exports = { root: true, + rules: { + 'vue/multi-word-component-names': 0, + 'vue/no-reserved-component-names': 0, + 'vue/no-deprecated-dollar-listeners-api': 0 + }, env: { node: true }, @@ -9,5 +14,5 @@ module.exports = { parser: 'babel-eslint' }, plugins: ['vue'], - extends: ['eslint:recommended', 'plugin:vue/recommended', '@vue/prettier', 'plugin:storybook/recommended'] + extends: ['eslint:recommended', 'plugin:vue/vue3-essential', '@vue/prettier', 'plugin:storybook/recommended'] } diff --git a/flint.ui/.storybook/main.js b/flint.ui/.storybook/main.js index fa8f9289..fb6c9320 100644 --- a/flint.ui/.storybook/main.js +++ b/flint.ui/.storybook/main.js @@ -2,26 +2,28 @@ const path = require('path') module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], + framework: '@storybook/vue3', + staticDirs: [path.resolve(__dirname, '../public')], + core: { + builder: '@storybook/builder-webpack5' + }, webpackFinal: async (config, { configType }) => { - config.module.rules[2].use[1] = { - loader: 'css-loader', - options: { - importLoaders: 1, - modules: true, - localIdentName: '[name]__[local]___[hash:base64:5]' - } - } + // config.module.rules[1].use[1] = { + // loader: 'css-loader', + // options: { + // importLoaders: 1, + // modules: true, + // localIdentName: '[name]__[local]___[hash:base64:5]' + // } + // } config.module.rules.push({ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../') }) - config.resolve.alias = { - ...config.resolve.alias, - '@': path.resolve(__dirname, '../src') - } + // Return the altered config return config } diff --git a/flint.ui/package.json b/flint.ui/package.json index 205f6372..8388ce28 100644 --- a/flint.ui/package.json +++ b/flint.ui/package.json @@ -10,62 +10,64 @@ "deploy": "bash scripts/production.sh && vue-cli-service build", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint", - "build-storybook": "build-storybook -s public", + "build-storybook": "build-storybook", "chromatic": "chromatic --project-token CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes", "dev": "yarn serve", - "storybook": "start-storybook -p 6006 -s public" + "storybook": "start-storybook -p 6006" }, "dependencies": { + "@ant-design/icons-vue": "^6.1.0", "@fortawesome/fontawesome-free": "5.15.4", "@popperjs/core": "2.9.3", - "@revolist/revogrid": "^3.1.5", - "@revolist/vue-datagrid": "^3.0.97", "@stencil/core": "^2.15.0", "@tailwindcss/forms": "0.3.3", "@vue/cli-plugin-eslint": "^4.5.13", "@vue/eslint-config-prettier": "^6.0.0", - "@vueform/slider": "^2.0.4", - "ant-design-vue": "^1.7.8", - "apexcharts": "^3.27.3", + "ant-design-vue": "^3.2.5", + "apexcharts": "^3.35.3", "axios": "^0.21.1", + "babel-eslint": "^10.1.0", "babel-plugin-transform-remove-console": "^6.9.4", "core-js": "^3.16.0", "data-forge": "^1.8.17", + "dayjs": "^1.11.2", "fs": "0.0.1-security", - "moment": "^2.29.1", - "ol": "^6.6.1", - "vue": "2.6.14", - "vue-apexcharts": "^1.6.2", - "vue-chartjs": "^3.5.1", + "ol": "^6.14.1", + "vue": "^3.1.0", "vue-clickaway": "2.2.2", "vue-github-buttons": "3.1.0", - "vue-material": "^1.0.0-beta-15", - "vue-router": "3.5.2", - "vue-slider-component": "^3.2.14", - "vue-toastification": "^1.7.11", - "vue-tour": "^2.0.0", - "vue2-dropzone": "^3.6.0", - "vuelayers": "^0.11.36", - "vuex": "^3.6.2" + "vue-router": "^4.0.15", + "vue-toastification": "^2.0.0-rc.5", + "vue3-apexcharts": "^1.4.1", + "vue3-dropzone": "^0.0.7", + "vue3-openlayers": "^0.1.67", + "vue3-tour": "^0.2.0", + "vuex": "^4.0.2" }, "devDependencies": { - "@babel/core": "^7.15.0", - "@storybook/addon-a11y": "^6.4.19", - "@storybook/addon-actions": "^6.4.18", - "@storybook/addon-essentials": "^6.4.18", - "@storybook/addon-links": "^6.4.18", - "@storybook/addons": "^6.4.21", + "@babel/core": "^7.18.2", + "@babel/eslint-parser": "^7.18.2", + "@babel/eslint-plugin": "^7.17.7", + "@storybook/addon-a11y": "^6.5.6", + "@storybook/addon-actions": "^6.5.6", + "@storybook/addon-essentials": "^6.5.6", + "@storybook/addon-interactions": "^6.5.6", + "@storybook/addon-links": "^6.5.6", + "@storybook/addons": "^6.5.6", + "@storybook/builder-webpack5": "^6.5.6", + "@storybook/manager-webpack5": "^6.5.6", "@storybook/preset-scss": "^1.0.3", - "@storybook/theming": "^6.4.21", - "@storybook/vue": "^6.4.18", + "@storybook/testing-library": "^0.0.11", + "@storybook/theming": "^6.5.6", + "@storybook/vue3": "^6.5.6", "@vue/cli-plugin-babel": "^4.5.13", "@vue/cli-plugin-e2e-cypress": "~4.5.0", "@vue/cli-plugin-router": "4.5.13", "@vue/cli-service": "4.5.13", + "@vue/compiler-sfc": "^3.1.0", "@vue/composition-api": "^1.0.5", "autoprefixer": "^9.8.6", - "babel-eslint": "^10.1.0", - "babel-loader": "^8.2.2", + "babel-loader": "^8.2.5", "chromatic": "^6.2.3", "css-loader": "^6.3.0", "es6-promise": "4.2.8", @@ -73,7 +75,7 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "3.4.0", "eslint-plugin-storybook": "^0.5.6", - "eslint-plugin-vue": "7.15.1", + "eslint-plugin-vue": "^9.1.0", "postcss": "^8.4.14", "postcss-loader": "^7.0.0", "prettier": "2.3.2", @@ -81,8 +83,7 @@ "sass-loader": "^12.1.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "vue-eslint-parser": "^7.10.0", - "vue-loader": "^15.9.8", - "vue-template-compiler": "2.6.14" + "vue-loader": "^15.9.8" }, "browserslist": [ "> 1%", diff --git a/flint.ui/src/components/Cards/LandingPageCard.vue b/flint.ui/src/components/Cards/LandingPageCard.vue index f5a79451..5bb7b823 100644 --- a/flint.ui/src/components/Cards/LandingPageCard.vue +++ b/flint.ui/src/components/Cards/LandingPageCard.vue @@ -7,7 +7,7 @@

{{ description }}

- + diff --git a/flint.ui/src/components/Datepicker/Datepicker.vue b/flint.ui/src/components/Datepicker/Datepicker.vue index 4364995e..d6fa6055 100644 --- a/flint.ui/src/components/Datepicker/Datepicker.vue +++ b/flint.ui/src/components/Datepicker/Datepicker.vue @@ -6,21 +6,20 @@ :default-value="selectedDate" v-bind="$attrs" @change="onChange" - v-on="$listeners" /> diff --git a/flint.ui/src/components/Datepicker/DatepickerPoint.vue b/flint.ui/src/components/Datepicker/DatepickerPoint.vue index a7d494c1..ac50e050 100644 --- a/flint.ui/src/components/Datepicker/DatepickerPoint.vue +++ b/flint.ui/src/components/Datepicker/DatepickerPoint.vue @@ -11,7 +11,6 @@ :default-value="selectedStartDate" v-bind="$attrs" @change="onStartChange" - v-on="$listeners" /> @@ -25,7 +24,6 @@ :default-value="selectedEndDate" v-bind="$attrs" @change="onEndChange" - v-on="$listeners" /> @@ -37,15 +35,11 @@ diff --git a/flint.ui/src/components/Footer/Footer.vue b/flint.ui/src/components/Footer/Footer.vue index 053f2388..9ca1ffc0 100644 --- a/flint.ui/src/components/Footer/Footer.vue +++ b/flint.ui/src/components/Footer/Footer.vue @@ -1,5 +1,5 @@ - - diff --git a/flint.ui/src/components/Stepper/StepperGCBM.vue b/flint.ui/src/components/Stepper/StepperGCBM.vue index f62e7106..cac6c276 100644 --- a/flint.ui/src/components/Stepper/StepperGCBM.vue +++ b/flint.ui/src/components/Stepper/StepperGCBM.vue @@ -1,30 +1,72 @@ - -
-
- mojal global logo -
-
- -
- -# Welcome to FLINT UI Storybook -Storybook helps you build UI components in isolation from your app's business logic, data, and context. -That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + @media (min-width: 620px) { + .link-list { + row-gap: 20px; + column-gap: 20px; + grid-template-columns: 1fr 1fr; + } + } -Browse example stories now by navigating to them in the sidebar. -View their code in the `src/stories` directory to learn how they work. -We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + @media all and (-ms-high-contrast:none) { + .link-list { + display: -ms-grid; + -ms-grid-columns: 1fr 1fr; + -ms-grid-rows: 1fr 1fr; + } + } -The Storybook for the `FLINT UI` project is available on Chromatic. + .link-item { + display: block; + padding: 20px 30px 20px 15px; + border: 1px solid #00000010; + border-radius: 5px; + transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; + color: #333333; + display: flex; + align-items: flex-start; + } -## Storybook in local development + .link-item:hover { + border-color: #1EA7FD50; + transform: translate3d(0, -3px, 0); + box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; + } -Storybook dependencies and configuration are located under the `flint.ui/.storybook` directory. + .link-item:active { + border-color: #1EA7FD; + transform: translate3d(0, 0, 0); + } -To build and launch Storybook locally, we have to follow the below procedure: + .link-item strong { + font-weight: 700; + display: block; + margin-bottom: 2px; + } -Go to the `flint.ui` directory. + .link-item img { + height: 40px; + width: 40px; + margin-right: 15px; + flex: none; + } -1. Install Storybook dependencies: + .link-item span { + font-size: 14px; + line-height: 20px; + } -```shell -yarn install -``` + .tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #E7FDD8; + color: #66BF3C; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; + } -2. Build the Storybook site: + .tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; + } -```shell -yarn storybook -``` + .tip-wrapper code { + font-size: 12px; + display: inline-block; + } + `} + -Go to [localhost:6006](http://localhost:6006/) to view the Storybook. +# Welcome to Storybook -## Adding components to Storybook +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. -Stories can be added for any Vue component in the `flint.ui/src/stories/**` directory. +Browse example stories now by navigating to them in the sidebar. +View their code in the `stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. -```shell -flint.ui/ -├─ src/ -│ ├─ stories -│ │ ├─ Button.stories.js -``` +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in{' '} + stories/Introduction.stories.mdx +
diff --git a/flint.ui/src/stories/PopupConfirm.stories.js b/flint.ui/src/stories/PopupConfirm.stories.js index 0bdfc145..6d3d1b97 100644 --- a/flint.ui/src/stories/PopupConfirm.stories.js +++ b/flint.ui/src/stories/PopupConfirm.stories.js @@ -1,4 +1,4 @@ -import BasePopconfirm from '@/components/PopupConfirm/PopupConfirm.vue' +import BasePopconfirm from '../components/PopupConfirm/PopupConfirm.vue' export default { title: 'Popconfirm', diff --git a/flint.ui/src/stories/Progress.stories.js b/flint.ui/src/stories/Progress.stories.js index 64594ea3..526fd6bc 100644 --- a/flint.ui/src/stories/Progress.stories.js +++ b/flint.ui/src/stories/Progress.stories.js @@ -1,4 +1,4 @@ -import BaseProgress from '@/components/Progress/Progress.vue' +import BaseProgress from '../components/Progress/Progress.vue' export default { title: 'Progress', diff --git a/flint.ui/src/stories/Slider.stories.js b/flint.ui/src/stories/Slider.stories.js index e2562ecb..1c8e506d 100644 --- a/flint.ui/src/stories/Slider.stories.js +++ b/flint.ui/src/stories/Slider.stories.js @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions' -import Slider from '@/components/Sliders/Slider.vue' +import Slider from '../components/Slider/Slider.vue' export default { title: 'Slider', diff --git a/flint.ui/src/views/Landing.vue b/flint.ui/src/views/Landing.vue index 62d3cb4a..79c523b6 100644 --- a/flint.ui/src/views/Landing.vue +++ b/flint.ui/src/views/Landing.vue @@ -26,7 +26,7 @@ Pool 1: {{ pool1.value }} {{ pool1.max }} - @@ -55,12 +55,12 @@ Pool 2: {{ pool2.value }} {{ pool2.max }} - @@ -73,12 +73,12 @@ Pool 3: {{ pool3.value }} {{ pool3.max }} - @@ -86,9 +86,9 @@
-
+
- +
@@ -104,6 +104,7 @@ import Button from '@/components/Button/Button.vue' import Datepicker from '@/components/Datepicker/DatepickerPoint.vue' import LandingPageNavbar from '@/components/Navbars/LandingPageNavbar.vue' import Maptest from '@/components/Vuelayers/Maptest.vue' +import Slider from '@/components/Slider/Slider.vue' import Footer from '@/components/Footer/Footer.vue' import PointOuterTable from './PointOuterTable.vue' @@ -114,6 +115,7 @@ export default { LandingPageNavbar, Maptest, Footer, + Slider, PointOuterTable }, data() { @@ -197,9 +199,6 @@ export default { mounted: function () { this.$tours['MyTour'].start() }, - created() { - this.$root.$refs = this - }, methods: { finalPoolValues() { if ( @@ -217,7 +216,7 @@ export default { }, Run() { - this.$root.$refs.finalPoolValues() //This does whatever the stepper does. + this.finalPoolValues() //This does whatever the stepper does. this.showTable = false }, diff --git a/flint.ui/src/views/flint/ConfigurationsRothC.vue b/flint.ui/src/views/flint/ConfigurationsRothC.vue index 77c279db..567cd11e 100644 --- a/flint.ui/src/views/flint/ConfigurationsRothC.vue +++ b/flint.ui/src/views/flint/ConfigurationsRothC.vue @@ -20,7 +20,7 @@

Start and End date of simulation

-
+
@@ -35,15 +35,17 @@ :header="`${item.text} (${item.type})`" :show-arrow="false" > - -
+ +
-
+
-
@@ -70,11 +72,15 @@ import RothCPresCMVue from '@/components/ConfigurationsRothC/RothCPresCM.vue' import RothCOpenPanEvapVue from '@/components/ConfigurationsRothC/RothCOpenPanEvap.vue' import RothCRainfallVue from '@/components/ConfigurationsRothC/RothCRainfall.vue' +import { markRaw } from 'vue' +import { RightOutlined } from '@ant-design/icons-vue' + export default { components: { RothCTemplate, Datepicker, LandingPageNavbar, + RightOutlined, RothCOuterTable, Button, Footer @@ -87,37 +93,37 @@ export default { accordionActiveKey: '1', configurations: { rainfall: { - component: RothCRainfallVue, + component: markRaw(RothCRainfallVue), type: 'rainfall', text: 'Rainfall' }, openPanEvap: { - component: RothCOpenPanEvapVue, + component: markRaw(RothCOpenPanEvapVue), type: 'openPanEvap', text: 'Open Pan Evaporation' }, avgAirTemp: { - component: RothCAvgAirTempVue, + component: markRaw(RothCAvgAirTempVue), type: 'avgAirTemp', text: 'Average Air Temperature' }, presCM: { - component: RothCPresCMVue, + component: markRaw(RothCPresCMVue), type: 'presCM', text: 'Organic carbon inputs' }, soilCover: { - component: RothCSoilCoverVue, + component: markRaw(RothCSoilCoverVue), type: 'soilCover', text: 'Soil Cover' }, initSoil: { - component: RothCInitSoilVue, + component: markRaw(RothCInitSoilVue), type: 'initSoil', text: 'Initial conditions of the Soil' }, soil: { - component: RothCSoilVue, + component: markRaw(RothCSoilVue), type: 'soil', text: 'Soil characteristics' } diff --git a/flint.ui/src/views/gcbm/GCBMDashboard.vue b/flint.ui/src/views/gcbm/GCBMDashboard.vue index 88e00a13..b8bf67df 100644 --- a/flint.ui/src/views/gcbm/GCBMDashboard.vue +++ b/flint.ui/src/views/gcbm/GCBMDashboard.vue @@ -61,8 +61,8 @@
- -