Skip to content

Commit

Permalink
feat: migrate Vue-2 to Vue-3 for FLINT-UI (#294)
Browse files Browse the repository at this point in the history 
* 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 <yashsk.yk@gmail.com>

* 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 <amitkulkarni2028@gmail.com>

* fix: gcbm bugs

* fix: v-deep warning, inline style, other requested changes

Co-authored-by: YashKandalkar <yashsk.yk@gmail.com>
Co-authored-by: Amit <51860725+CrystalSage@users.noreply.github.com>
  • Loading branch information
@HarshCasper @YashKandalkar @Crystalsage
3 people authored Jun 6, 2022
1 parent 9f52a2b commit 51f34b0
Show file tree
Hide file tree
Showing 40 changed files with 4,161 additions and 4,076 deletions.
7 changes: 6 additions & 1 deletion flint.ui/.eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -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
},
Expand All @@ -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']
}
28 changes: 15 additions & 13 deletions flint.ui/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
67 changes: 34 additions & 33 deletions flint.ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,79 +10,80 @@
"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",
"eslint": "7.32.0",
"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",
"sass": "^1.42.1",
"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%",
Expand Down
2 changes: 1 addition & 1 deletion flint.ui/src/components/Cards/LandingPageCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<p class="text-earth text-base leading-7">
{{ description }}
</p>
<Button class="mt-4" :btn-size="'auto'" @click.native="onClick">Explore <span> →</span></Button>
<Button class="mt-4" :btn-size="'auto'" @click="onClick">Explore <span> →</span></Button>
</div>
</a-col>
</template>
Expand Down
13 changes: 6 additions & 7 deletions flint.ui/src/components/Datepicker/Datepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,20 @@
:default-value="selectedDate"
v-bind="$attrs"
@change="onChange"
v-on="$listeners"
/>
</div>
</template>

<script>
import { DatePicker } from 'ant-design-vue'
import moment from 'moment'
import dayjs from 'dayjs'
console.log(dayjs)
export default {
components: {
'a-date-picker': DatePicker
},
props: {
value: { type: String, default: moment('2022-01-31').toString() }
value: { type: String, default: dayjs('2022-01-31') }
},
data() {
return { selectedDate: this.value }
Expand All @@ -31,7 +30,7 @@ export default {
return this.selectedDate
},
set(val) {
this.$emit('input', moment(val).toString())
// this.$emit('input', dayjs(val).toString())
this.selectedDate = val
}
}
Expand All @@ -45,10 +44,10 @@ export default {
</script>

<style scoped>
::v-deep .ant-calendar-picker-input.ant-input {
:deep(.ant-calendar-picker-input.ant-input) {
border-color: theme('colors.earth');
}
::v-deep .ant-calendar-picker-icon {
:deep(.ant-calendar-picker-icon) {
color: theme('colors.earth');
}
</style>
22 changes: 8 additions & 14 deletions flint.ui/src/components/Datepicker/DatepickerPoint.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
:default-value="selectedStartDate"
v-bind="$attrs"
@change="onStartChange"
v-on="$listeners"
/>
</div>

Expand All @@ -25,7 +24,6 @@
:default-value="selectedEndDate"
v-bind="$attrs"
@change="onEndChange"
v-on="$listeners"
/>
</div>
</div>
Expand All @@ -37,15 +35,11 @@
</template>

<script>
import { DatePicker } from 'ant-design-vue'
import moment from 'moment'
import dayjs from 'dayjs'
export default {
components: {
'a-date-picker': DatePicker
},
props: {
value: { type: String, default: moment('2022-01-01').toString() }
value: { type: dayjs.Dayjs, default: dayjs('2022-01-01') }
},
setup() {
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY']
Expand All @@ -59,9 +53,9 @@ export default {
},
computed: {
date_diff() {
var start_date_value = new Date(moment(this.selectedStartDate).format('YYYY-MM-DD'))
var start_date_value = new Date(dayjs(this.selectedStartDate).format('YYYY-MM-DD'))
var end_date_value = new Date(moment(this.selectedEndDate).format('YYYY-MM-DD'))
var end_date_value = new Date(dayjs(this.selectedEndDate).format('YYYY-MM-DD'))
console.log(start_date_value, end_date_value)
Expand All @@ -74,7 +68,7 @@ export default {
return this.selectedStartDate
},
set(val) {
this.$emit('input', moment(val).toString())
this.$emit('input', dayjs(val).toString())
this.selectedStartDate = val
console.log(this.selectedStartDate)
Expand All @@ -91,7 +85,7 @@ export default {
return this.selectedEndDate
},
set(val) {
this.$emit('input', moment(val).toString())
this.$emit('input', dayjs(val).toString())
this.selectedEndDate = val
console.log(this.selectedEndDate)
Expand All @@ -115,10 +109,10 @@ export default {
</script>

<style scoped>
::v-deep .ant-calendar-picker-input.ant-input {
:deep(.ant-calendar-picker-input.ant-input) {
border-color: theme('colors.earth');
}
::v-deep .ant-calendar-picker-icon {
:deep(.ant-calendar-picker-icon) {
color: theme('colors.earth');
}
Expand Down
22 changes: 8 additions & 14 deletions flint.ui/src/components/Datepicker/DatepickerRothC.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
:default-value="selectedStartDate"
v-bind="$attrs"
@change="onStartChange"
v-on="$listeners"
/>
</div>

Expand All @@ -25,7 +24,6 @@
:default-value="selectedEndDate"
v-bind="$attrs"
@change="onEndChange"
v-on="$listeners"
/>
</div>
</div>
Expand All @@ -37,15 +35,11 @@
</template>

<script>
import { DatePicker } from 'ant-design-vue'
import moment from 'moment'
import dayjs from 'dayjs'
export default {
components: {
'a-date-picker': DatePicker
},
props: {
value: { type: String, default: moment('2022-01-01').toString() }
value: { type: dayjs.Dayjs, default: dayjs('2022-01-01') }
},
setup() {
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY']
Expand All @@ -59,9 +53,9 @@ export default {
},
computed: {
date_diff() {
var start_date_value = new Date(moment(this.selectedStartDate).format('YYYY-MM-DD'))
var start_date_value = new Date(dayjs(this.selectedStartDate).format('YYYY-MM-DD'))
var end_date_value = new Date(moment(this.selectedEndDate).format('YYYY-MM-DD'))
var end_date_value = new Date(dayjs(this.selectedEndDate).format('YYYY-MM-DD'))
console.log(start_date_value, end_date_value)
Expand All @@ -74,7 +68,7 @@ export default {
return this.selectedStartDate
},
set(val) {
this.$emit('input', moment(val).toString())
this.$emit('input', dayjs(val).toString())
this.selectedStartDate = val
console.log(this.selectedStartDate)
Expand All @@ -91,7 +85,7 @@ export default {
return this.selectedEndDate
},
set(val) {
this.$emit('input', moment(val).toString())
this.$emit('input', dayjs(val).toString())
this.selectedEndDate = val
console.log(this.selectedEndDate)
Expand All @@ -115,10 +109,10 @@ export default {
</script>

<style scoped>
::v-deep .ant-calendar-picker-input.ant-input {
:deep(.ant-calendar-picker-input.ant-input) {
border-color: theme('colors.earth');
}
::v-deep .ant-calendar-picker-icon {
:deep(.ant-calendar-picker-icon) {
color: theme('colors.earth');
}
Expand Down
Loading

1 comment on commit 51f34b0

@vercel
Copy link

@vercel vercel bot commented on 51f34b0 Jun 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flint-ui – ./

flint-ui-git-master-moja-global.vercel.app
flint-ui.vercel.app
flint-ui-moja-global.vercel.app

Please sign in to comment.