Update documentation

- remove addon-info until it support Vue
- generated readme section for Installation
- generated readme section for Extending component
- more feature explanation
- more template usage explanation

Author: DrSensor

README.md

@@ -1,45 +1,95 @@
 # vue-authoring-template
 <!-- [![CircleCI](https://circleci.com/gh/DrSensor/vue-authoring-template.svg?style=shield)](https://circleci.com/gh/DrSensor/vue-authoring-template) -->
-![minimal config](https://img.shields.io/badge/config-minimal-grey.svg?maxAge=2592000&style=flat-square)
-![circleci support](https://img.shields.io/badge/circleci-support-blue.svg?maxAge=2592000&style=flat-square)
-![vue 2.x](https://img.shields.io/badge/vue-2.x-4fc08d.svg?maxAge=2592000&style=flat-square)
-![storyboard 3.x](https://img.shields.io/badge/storybook-3.x-E91E63.svg?maxAge=2592000&style=flat-square)
+<sub>Click one of this badge for more info</sub>
+
+[![minimal config](https://img.shields.io/badge/config-minimal-grey.svg?maxAge=2592000&style=flat-square)](https://poi.js.org)
+[![circleci support](https://img.shields.io/badge/circleci-support-blue.svg?maxAge=2592000&style=flat-square)](https://circleci.com/docs/1.0/npm-continuous-deployment/)
+[![surge support](https://img.shields.io/badge/deploy_to-surge-63c299.svg?maxAge=2592000&style=flat-square)](https://surge.sh/help/integrating-with-circleci)
+[![vue 2.x](https://img.shields.io/badge/vue-2.x-4fc08d.svg?maxAge=2592000&style=flat-square)](https://vuejs.org/)
+[![storyboard 3.x](https://img.shields.io/badge/storybook-3.x-E91E63.svg?maxAge=2592000&style=flat-square)](https://storybook.js.org/)
 [![donate](https://img.shields.io/badge/donate-$-yellowgreen.svg?maxAge=2592000&style=flat-square)](https://github.com/DrSensor/vue-authoring-template/blob/master/DONATE.md)
 
+---
 This template is to help authoring Vue component with it's use case in story-scenario (storybook) format.
 
 ![](./screenplay.gif)
 
-Authoring component and publish it to `npm` for later use can help reduce complexity <sup><sup><sup><sup><sup>by delegating the work of finding bug and adding feature</sup></sup></sup></sup></sup> of big/long-running project <sub><sub><sub><sub><sub>to the community</sub></sub></sub></sub></sub>
+> In case you need to convince your Lead Dev to give you permission open-sourcing your work :
+
+"Authoring component and publish it to `npm` for later use can help reduce complexity <sup><sup><sup><sup><sup>by delegating the work of finding bug and adding feature</sup></sup></sup></sup></sup> of big/long-running project <sub><sub><sub><sub><sub>to the community</sub></sub></sub></sub></sub>"
+
 ## Motivation
-1. There is a time when developer involved in a project then build component to solve specific problem 😎.
-2. One day this developer happen to do the same thing again in different project with slight alteration 😏.
-3. Then doing it again, and again, and again 😫.
-4. Now this developer have build many component with the same topic 😂.
-5. So, why not publish it as a single component with that one topic in mind to [`npm`](https://www.npmjs.com/)? 😲
-6. However, the component must be showcased in [mvce](https://stackoverflow.com/help/mcve) style to make it easy to understand and maintainable 😖.
-7. As the time passed, he/she is to lazy to do that because no template/config/cli/whatever for authoring the component in that way :poop:.
+
+1. There is a time when developer involved in a project then build component to solve specific problem 😎
+1. One day this developer happen to do the same thing again in different project with slight alteration 😏
+1. Then doing it again, and again, and again 😫
+1. Now this developer have build many component with the same topic 😂
+1. So, why not publish it as a single component with that one topic in mind to [`npm`](https://www.npmjs.com/)? 😲
+1. However, the component must be showcased in [mvce](https://stackoverflow.com/help/mcve) style to make it easy to understand and maintainable 😖
+1. As the time passed, he/she is to lazy to do that because no template/config/cli/whatever for authoring the component in that way :poop:
+
+## Features
+
+- Support `vue init` workflow
+- Minimal configuration. Thanks to [poi](https://poi.js.org)
+- Write your storybook `story-scenario` (a.k.a *use case*) in `.vue` **single-file-component format**, not `.js` or `.jsx`
+- Option to generate [circleci](https:circleci.com) config to: 
+  - publish vue component to `npm` and `unpkg` <sub>(need to `git push --tags`)</sub>
+  - deploy storybook page to [surge.sh](https://surge.sh)
+  - evaluate pull-requests and temporarily deploy storybook page to `<name><#PR_number>.surge.sh` <sub>(auto teardown when PR is merged)</sub>
+- Choose pre-installed and configured storybook addon:
+  - [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
+  - [actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
+  - docs related addon:
+    - [readme](https://github.com/tuchk4/storybook-readme)
+    - [notes](https://github.com/storybooks/storybook/tree/master/addons/notes)
+- Order the story and scenario *alphabetically* or manually re-order using `Array|Object` in `src/stories/config.js`
+- Auto generate [`README.md`](./template/README.md)
+- Custom blocks (experimental, looking for feedback)
 
 ## Usage
+
 ```bash
 vue init DrSensor/vue-authoring-template
 ```
-After that,
 
-- to build vue component use
-```
-[npm|yarn] build:component
+After that, you can:
+
+- start in development mode
+
+```bash
+[npm|yarn] dev
 ```
-- to build the storybook use
+
+- deploy storybook page directly to http://surge.sh
+
+```bash
+[npm|yarn] run deploy
 ```
-[npm|yarn] build:storybook
+
+- publish component directly to http://npmjs.com
+
+```bash
+# see https://docs.npmjs.com/getting-started/semantic-versioning#semver-for-publishers
+npm version [patch|minor|major]
+npm publish
 ```
-- to start it in development mode use
+
+- build vue component
+
+```bash
+[npm|yarn] build:component      # as CJS module, the output will be in dist/
+[npm|yarn] build:component:umd  # as UMD module, the output will be in umd/
 ```
-[npm|yarn] dev
+
+- build the storybook page
+
+```bash
+[npm|yarn] build:storybook  # the output will be in .storybook/dist/
 ```
 
 ## Project Structure
+
 ```markdown
 .
 ├── package.json            // choose and configure the component you want to package in here (still need to edit `scripts: {}` block)
@@ -49,9 +99,7 @@ After that,
 ├── .circleci
 │   └── config.yml
 ├── .loader                 // loader for processing custom blocks
-│   ├── docs-loader.js
-│   ├── info-loader.js
-│   └── notes-loader.js
+│   └── docs-loader.js
 ├── .storybook
 │   ├── addons.js
 │   ├── config.js
@@ -74,21 +122,10 @@ After that,
         └── index.js            // chain and add the addon here
 ```
 
-## Features
-- Support `vue init` workflow
-- Minimal configuration. Thanks to [poi](https://poi.js.org).
-- Prebuilt [circleci](https:circleci.com) config to build, deploy, and evaluate pull-requests. By default its deployed to [surge.sh](https://surge.sh).
-- Order the story-scenario *alphabetically* or define it using `Array`|`Object` in `src/stories/config.js`.
-- Preinstall and configured storybook addon:
-    - knobs
-    - readme, info(experimental), and notes
-    - actions
-- Custom blocks (experimental, looking for feedback).
-
-## Looking for suggestion (Open New Issues)
-- Make chaining storybook-addon on each scenario in elegant way
+## Looking for suggestion! (Open/Comment New Issues)
+
 - How to customize style of the storybook
-- Authoring `Vuex` module? (is it necessary?)
+- Authoring `Vuex` module? [Is it necessary?](https://github.com/DrSensor/vue-authoring-template/issues/3)
 - any others?
 
 ## Support

meta.js

@@ -51,11 +51,11 @@ module.exports = {
       choices: [
         'knobs',
         'notes',
-        {
-          name: 'info (experimental)',
-          value: 'info',
-          short: 'info'
-        },
+        // {
+        //   name: 'info (experimental)',
+        //   value: 'info',
+        //   short: 'info'
+        // },
         'readme',
         'actions'
       ],

template/README.md

@@ -5,21 +5,53 @@
 <!-- Use https://github.com/phw/peek or https://github.com/ShareX/ShareX to record your component in action as gif -->
 ![](./screenplay.gif)
 
+## Installation
+
+### via NPM
+
+```bash
+npm install --save {{name}}
+# or if you use yarn
+yarn add {{name}}
+```
+
+then you can import it
+
+```js
+import {{pascalCase name}} from '{{name}}'
+```
+
+### via CDN
+
+```html
+<script src="https://unpkg.com/vue"></script>
+<script src="https://unpkg.com/{{name}}"></script>
+```
+
 ## Usage
 
+### Example
+
 ```html
 <{{name}} hello="Hello world!!!" @click="clicked">
 </{{name}}>
 ```
 
 ```js
+export default {
+  components: {
+    {{pascalCase name}}
+  },
   methods: {
     clicked (helloText) {
       console.log(helloText)
     }
   }
+}
 ```
 
+> For more comprehensive example, open one of `<story>/<scenario>.vue` in [./src/stories](./src/stories)
+
 ### Props
 
 | Prop name | Description | Type | Required | Default value |
@@ -34,12 +66,39 @@
 
 ### Slots
 
-| Slot name | Description | Accepted Element |
+| Slot name | Description | Accepted Element | Slot scope |
+|---------- |-------- |---------- |---------- |
+| `default` | slot without name are placed in default | `any` | `NaN` |
+
+---
+
+## Extending {{name}}
+
+In case if you want to extend and/or override {{name}} basic functionality.
+
+### Example
+
+```js
+export default {
+  extends: {{pascalCase name}},
+  methods: {
+    clicked (helloText) {
+      console.log('this execute first', helloText)
+    }
+  }
+}
+```
+
+### Methods
+
+| Method name | Description | Parameters |
 |---------- |-------- |---------- |
-| `default` | slot without name are placed in default | `any` |
+| `clicked` | execute when button is clicked | helloText: `String` |
 
+---
 
 ## Contributing
+
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for development guide.
 
 ---

template/src/components/HelloWorld.vue

@@ -33,7 +33,11 @@ export default {
   methods: {
     clicked () {
       this.toggle = !this.toggle
+{{#isEnabled addons 'actions'}}
       this.$action('click', [this.hello])
+{{else}}
+      console.log('click', this.hello)
+{{/isEnabled}}
     }
   }
 }