Merge branch 'dev' of github.com:element-plus/element-plus into feat/test

.editorconfig

@@ -7,3 +7,4 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
+quote_type = single

.storybook/custom-presets.js

@@ -0,0 +1,40 @@
+var VueLoaderPlugin = require('vue-loader/dist/plugin');
+
+function webpack(config) {
+  return {
+    ...config,
+    plugins: [...config.plugins, new VueLoaderPlugin.default()],
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.vue$/,
+          loader: require.resolve('vue-loader'),
+          options: {},
+        },
+        {
+          test: /\.(ts|tsx)$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      ...config.resolve,
+      extensions: [...config.resolve.extensions, '.vue', '.ts'],
+      alias: {
+        ...config.resolve.alias,
+        vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
+      },
+    },
+  };
+}
+
+exports.webpack = webpack;

.storybook/main.js

@@ -0,0 +1,6 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../packages/**/doc/*.stories.[tj]s'],
+  presets: [path.resolve(__dirname, './custom-presets')],
+};

.storybook/preview.js

@@ -0,0 +1,35 @@
+import { addDecorator } from '@storybook/html';
+import { createApp } from 'vue';
+import '../src/style/element-ui@2.13.2.css';
+/**
+ * Wraps a story into a Vue Element
+ * @param {JSX.Element} template - Story templates
+ * @param {VueElement}
+ */
+const Wrapper = (template) => {
+  return {
+    data() {
+      return {};
+    },
+    template,
+  };
+};
+
+/**
+ * Custom Addon for previewing ElementPlus component in Vue3
+ * Due to lacking of support for Vue3, the rendering method has to be made by ourself
+ * This method takes a template string as parameter returns a HTMLElement which will be inserted to the iframe root node by `@StoryBook`
+ * @param {Story} content
+ * @return {HTMLElement}
+ */
+function CustomDecorator(content) {
+  const { template, installer } = content();
+  const app = createApp(Wrapper(template));
+  installer(app);
+  const entry = document.createElement('div');
+  entry.className = 'element-plus-previewer';
+  app.mount(entry);
+  return entry;
+}
+
+addDecorator(CustomDecorator);

README.md

@@ -1 +1,15 @@
-Element-Plus
+Element-Plus
+
+## Bootstrap project
+With command
+```bash
+$ yarn bs
+```
+the project will install all dependencies and run `lerna bootstrap` to initialize the project
+
+## Storybook preview
+With command
+```bash
+$ yarn sb
+```
+the project will launch `@storybook` client for you to preview all existing component

package.json

@@ -7,7 +7,9 @@
     "build": "vite build",
     "cz": "npx git-cz",
     "test": "jest",
-    "gc": "bash ./scripts/gc.sh"
+    "gen": "bash ./scripts/gc.sh",
+    "storybook": "start-storybook",
+    "bootstrap": "yarn && npx lerna bootstrap"
   },
   "peerDependencies": {
     "vue": "^3.0.0-rc.1",
@@ -15,14 +17,20 @@
   },
   "devDependencies": {
     "@types/jest": "^26.0.7",
+    "@babel/core": "^7.10.5",
+    "@storybook/html": "^5.3.19",
     "@vue/compiler-sfc": "^3.0.0-rc.1",
+    "babel-loader": "^8.1.0",
+    "babel-preset-vue": "^2.0.2",
     "cz-conventional-changelog": "^3.2.0",
     "lerna": "^3.22.1",
-    "typescript": "^3.9.7",
     "jest": "^24.1.0",
     "ts-jest": "^26.1.3",
     "vue-jest": "5.0.0-alpha.1",
-    "vite": "^1.0.0-rc.1"
+    "vite": "^1.0.0-rc.1",
+    "ts-loader": "^8.0.1",
+    "typescript": "^3.9.7",
+    "vue-loader": "^v16.0.0-beta.4"
   },
   "config": {
     "commitizen": {

packages/button/doc/index.stories.ts

@@ -0,0 +1,12 @@
+import ElButton from '../index';
+
+export default {
+  title: 'Button',
+};
+
+export const NormalButton = () => {
+  return { template: '<el-button>With Text</el-button>', installer: ElButton };
+};
+export const ButtonTwo = () => {
+  return { template: '<el-button>button two</el-button>', installer: ElButton };
+};

packages/button/doc/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <el-button>button text</el-button>
-</template>
-
-<script>
-export default {
-  
-}
-</script>

scripts/gc.sh

@@ -27,6 +27,7 @@ NAME=$NORMALIZED_NAME
 
 mkdir -p "$DIRNAME"
 mkdir -p "$DIRNAME/src"
+mkdir -p "$DIRNAME/doc"
 mkdir -p "$DIRNAME/__tests__"
 
 cat > $DIRNAME/src/index.vue <<EOF
@@ -47,7 +48,7 @@ export default {
 </style>
 EOF
 
-cat > $DIRNAME/index.ts <<EOF
+cat <<EOF >"$DIRNAME/index.ts"
 import { App } from 'vue'
 import ${NAME} from './src/index.vue'
 export default (app: App) => {
@@ -87,3 +88,12 @@ describe('$NAME.vue', () => {
   })
 })
 EOF
+
+cat <<EOF >"$DIRNAME/doc/index.stories.ts"
+import El${NAME} from '../index'
+
+export default {
+  title: "${NAME}"
+}
+
+EOF