Merge pull request #22 from element-plus/feat/storybook

feat/add-storybook

.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

@@ -6,17 +6,26 @@
     "dev": "vite",
     "build": "vite build",
     "cz": "npx git-cz",
-    "gc": "sh ./scripts/gc.sh"
+    "gen": "sh ./scripts/gc.sh",
+    "storybook": "start-storybook",
+    "bootstrap": "yarn && npx lerna bootstrap"
   },
   "peerDependencies": {
     "vue": "^3.0.0-rc.1",
     "vue-router": "^4.0.0-beta.2"
   },
   "devDependencies": {
+    "@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",
-    "vite": "^1.0.0-rc.1"
+    "ts-loader": "^8.0.1",
+    "typescript": "^3.9.7",
+    "vite": "^1.0.0-rc.1",
+    "vue-loader": "^v16.0.0-beta.4"
   },
   "config": {
     "commitizen": {

packages/button/doc/index.stories.js

@@ -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

@@ -25,42 +25,53 @@ for i in $(echo $NAME | sed 's/[_|-]\([a-z]\)/\ \1/;s/^\([a-z]\)/\ \1/'); do
 done
 NAME=$NORMALIZED_NAME
 
-TEMPLATE_INDEX_VUE="<template>\n
-  <div>\n
-  </div>\n
-</template>\n
-<script lang='ts'>\n
-export default {\n
-  NAME: 'El${NAME}',\n
-    props: {\n
-    },\n
-    setup(props,ctx) { }\n
-  };\n
-</script>\n
-<style>\n
-</style>\n
-"
-
-TEMPLATE_INDEX_TS="\n
-import { App } from 'vue'\n
-import ${NAME} from './src/index.vue'\n
-export default (app: App) => {\n
-  app.component(${NAME}.name, ${NAME})\n
-}
-"
-TEMPLATE_PKG_JSON="\n
-{\n
-  \"name\": \"@element-plus/${INPUT_NAME}\",\n
-  \"description\": \"\",\n
-  \"version\": \"0.1.0\",\n
-  \"main\": \"./index.ts\",\n
-  \"license\": \"MIT\",\n
-  \"dependencies\": {}\n
-}\n
-"
-
 mkdir -p "$DIRNAME"
 mkdir -p "$DIRNAME/src"
-echo $TEMPLATE_INDEX_VUE >>"$DIRNAME/src/index.vue"
-echo $TEMPLATE_INDEX_TS >>"$DIRNAME/index.ts"
-echo $TEMPLATE_PKG_JSON >>"$DIRNAME/package.json"
+mkdir -p "$DIRNAME/doc"
+
+cat <<EOF >"$DIRNAME/index.ts"
+import { App } from 'vue'
+import ${NAME} from './src/index.vue'
+export default (app: App) => {
+  app.component(${NAME}.name, ${NAME})
+}
+
+EOF
+
+cat <<EOF >"$DIRNAME/src/index.vue"
+<template>
+  <div>
+  </div>
+</template>
+<script lang='ts'>
+export default {
+  NAME: 'El${NAME}',
+    props: { },
+    setup(props,ctx) { }
+  };
+</script>
+<style>
+</style>
+
+EOF
+
+cat <<EOF >"$DIRNAME/doc/index.stories.js"
+import El${NAME} from '../index'
+
+export default {
+  title: "${NAME}"
+}
+
+EOF
+
+cat <<EOF >"$DIRNAME/package.json"
+{
+  "name": "@element-plus/${INPUT_NAME}",
+  "description": "ElementPlus Component ${INPUT_NAME}",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "dependencies": {}
+}
+
+EOF