feat: Add Alerts, Divider, Progress, andPopupConfirm component and stories

flint.ui/.storybook/main.js

@@ -1,4 +1,28 @@
+const path = require('path')
+
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-};
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  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.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
+  }
+}

flint.ui/.storybook/preview.js

@@ -1,9 +1,11 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
+      date: /Date$/
+    }
+  }
+}
+
+import 'ant-design-vue/dist/antd.css'

flint.ui/package.json

@@ -21,6 +21,7 @@
     "@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",
     "axios": "^0.21.1",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -59,7 +60,7 @@
     "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "chromatic": "^5.9.2",
+    "chromatic": "^6.2.3",
     "css-loader": "^6.3.0",
     "es6-promise": "4.2.8",
     "eslint": "7.32.0",

flint.ui/src/components/Alerts/Alert.vue

@@ -0,0 +1,14 @@
+<template>
+  <a-alert style="margin-top: 0.5rem; margin-bottom: 0.5rem" v-bind="$attrs" v-on="$listeners" />
+</template>
+<script>
+import { Alert } from 'ant-design-vue'
+
+export default {
+  name: 'Alert', // optional
+  components: {
+    'a-alert': Alert
+  },
+  inheritAttrs: false
+}
+</script>

flint.ui/src/components/Divider.vue

@@ -0,0 +1,13 @@
+<template>
+  <a-divider v-bind="$attrs" v-on="$listeners" />
+</template>
+<script>
+import { Divider } from 'ant-design-vue'
+export default {
+  name: 'Divider', // optional
+  components: {
+    'a-divider': Divider
+  },
+  inheritAttrs: false
+}
+</script>

flint.ui/src/components/PopupConfirm.vue

@@ -0,0 +1,15 @@
+<template>
+  <a-popconfirm v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+  </a-popconfirm>
+</template>
+<script>
+import { Popconfirm } from 'ant-design-vue'
+export default {
+  name: 'BasePopconfirm', // optional
+  components: {
+    'a-popconfirm': Popconfirm
+  },
+  inheritAttrs: false
+}
+</script>

flint.ui/src/components/Progress.vue

@@ -0,0 +1,13 @@
+<template>
+  <a-progress v-bind="$attrs" v-on="$listeners" />
+</template>
+<script>
+import { Progress } from 'ant-design-vue'
+export default {
+  name: 'Progress', // optional
+  components: {
+    'a-progress': Progress
+  },
+  inheritAttrs: false
+}
+</script>

flint.ui/src/stories/Alerts.stories.js

@@ -0,0 +1,38 @@
+import BaseAlert from '@//components/Alerts/Alert.vue'
+
+export default {
+  title: 'Alert',
+  component: BaseAlert
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BaseAlert },
+  template: `
+  <div>
+  <base-alert
+  message="WARNING"
+  type="warning"
+  closable
+  v-bind='$props'
+  />
+  <base-alert
+  message="SUCCESS"
+  type="success"
+  closable
+  />
+  <base-alert
+  message="INFO"
+  type="info"
+  closable
+  />
+  <base-alert
+  message="ERROR"
+  type="error"
+  closable
+  />
+  </div>
+  `
+})
+
+export const Variants = Template.bind({})

flint.ui/src/stories/Divider.stories.js

@@ -0,0 +1,24 @@
+import BaseDivider from '@/components/Divider.vue'
+
+export default {
+  title: 'Divider',
+  component: BaseDivider
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BaseDivider },
+  template: `
+
+<div>
+    Text
+    <base-divider type="vertical" />
+    <a href="#">Link</a>
+    <base-divider type="vertical" />
+    <a href="#">Link</a>
+  </div>
+
+  `
+})
+
+export const Variants = Template.bind({})

flint.ui/src/stories/Introduction.stories.mdx

@@ -181,33 +181,21 @@ flint.ui/
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
     <img src={Plugin} alt="plugin" />
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
     <img src={StackAlt} alt="Build" />
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
     <img src={Colors} alt="colors" />
     <span>
       <strong>Styling</strong>
@@ -237,22 +225,14 @@ flint.ui/
       Configure, customize, and extend
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/tutorials/"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://github.com/storybookjs/storybook"
-    target="_blank"
-  >
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -269,6 +249,5 @@ flint.ui/
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
+  <span className="tip">Tip</span>Edit the Markdown in <code>src/stories/Introduction.stories.mdx</code>
 </div>

flint.ui/src/stories/PopupConfirm.stories.js

@@ -0,0 +1,24 @@
+import BasePopconfirm from '@/components/PopupConfirm.vue'
+
+export default {
+  title: 'Popconfirm',
+  component: BasePopconfirm
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BasePopconfirm },
+  template: `
+  <div>
+ <base-popconfirm
+    title="Are you sure delete this task?"
+    ok-text="Yes"
+    cancel-text="No"
+  >
+    <a>Delete</a>
+  </base-popconfirm>
+      </div>
+  `
+})
+
+export const Variants = Template.bind({})

flint.ui/src/stories/Progress.stories.js

@@ -0,0 +1,23 @@
+import BaseProgress from '@/components/Progress.vue'
+
+export default {
+  title: 'Progress',
+  component: BaseProgress
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BaseProgress },
+  template: `
+  <div>
+  <base-progress v-bind='$props' />
+      <base-progress :percent="30" />
+      <base-progress :percent="50" status="active" />
+      <base-progress :percent="70" status="exception" />
+      <base-progress :percent="100" />
+      <base-progress :percent="50" :show-info="false" />
+      </div>
+  `
+})
+
+export const Variants = Template.bind({})