Remove custom block option

- the responsibility for adding custom block fall to storybook-addon and/or other packages (like v-18n)

Author: DrSensor

README.md

@@ -46,7 +46,6 @@ vue init DrSensor/vue-authoring-template
     - [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
 
@@ -59,13 +58,15 @@ After that, you can:
 - start in development mode
 
 ```bash
-[npm|yarn] dev
+npm run dev # or
+yarn dev
 ```
 
 - deploy storybook page directly to http://surge.sh
 
 ```bash
-[npm|yarn] run deploy
+npm run deploy # or
+yarn deploy
 ```
 
 - publish component directly to http://npmjs.com
@@ -79,14 +80,17 @@ npm publish
 - 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/
+# the output will be in dist/
+npm run build:component # or
+yarn build:component
 ```
 
 - build the storybook page
 
 ```bash
-[npm|yarn] build:storybook  # the output will be in .storybook/dist/
+# the output will be in .storybook/dist/
+npm run build:storybook # or
+yarn build:storybook
 ```
 
 ## Project Structure
@@ -100,8 +104,7 @@ npm publish
 │
 ├── .circleci
 │   └── config.yml
-├── .loader                 // loader for processing custom blocks
-│   └── docs-loader.js
+│
 ├── .storybook              // storybook related config
 │   ├── addons.js
 │   ├── config.js

meta.js

@@ -65,12 +65,6 @@ module.exports = {
         'actions'
       ]
     },
-    customBlocks: {
-      type: 'confirm',
-      when: 'addons.notes || addons.info || addons.readme',
-      message: 'Enable custom-blocks? (experimental)',
-      default: false
-    },
     useci: {
       type: 'confirm',
       message: 'Add circleci for Continuos Build?'
@@ -127,10 +121,7 @@ module.exports = {
   },
   filters: {
     '.circleci/*': 'useci',
-    'FOOTER.md': 'addons.readme && customBlocks',
-    '.loader/docs-loader.js': 'addons.readme && customBlocks',
-    '.loader/info-loader.js': 'addons.info && customBlocks',
-    '.loader/notes-loader.js': 'addons.notes && customBlocks',
+    'FOOTER.md': 'addons.readme'
   },
   complete: function (data, { chalk }) {
     const green = chalk.green

template/.loader/docs-loader.js

@@ -20,7 +20,7 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "dev": "start-storybook --static-dir static",
+    "dev": "start-storybook --port 9001 --static-dir static",
     "build:storybook": "build-storybook --static-dir static --output-dir .storybook/dist",
     "build:component": "bili --plugin vue --jsx vue",
     "deploy": "surge .storybook/dist",
@@ -47,9 +47,6 @@
     "@storybook/addons": "^3.3.0",
     "@storybook/vue": "^3.3.0",
     "@storybook/cli": "^3.3.0",
-{{#if customBlocks}}
-    "marked": "^0.3.0",
-{{/if}}
     "bili": "^1.6.5",
     "rollup-plugin-vue": "^3.0.0",
     "surge": "^0.19.0",

template/.loader/info-loader.js

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import {{pascalCase name}} from '../../components/{{pascalCase name}}'
+import {{pascalCase name}} from '../../components/{{pascalCase name}}.vue'
 {{#isEnabled addons 'knobs'}}
 /**@see https://github.com/storybooks/storybook/tree/master/addons/knobs#available-knobs */
 import { text } from '@storybook/addon-knobs/vue'

template/.loader/notes-loader.js

@@ -3,17 +3,6 @@
 import { storiesOf } from '@storybook/vue'
 import { storyOrder, scenarioOrder } from './config.js'
 
-{{#if customBlocks}}
-{{#isEnabled addons 'notes'}}
-import { withNotes } from '@storybook/addon-notes'
-{{/isEnabled}}
-{{#isEnabled addons 'readme'}}
-import { withDocs } from 'storybook-readme'
-{{/isEnabled}}
-{{#isEnabled addons 'info'}}
-import { withInfo } from '@storybook/addon-info'
-{{/isEnabled}}
-{{/if}}
 {{#isEnabled addons 'actions'}}
 import { action } from '@storybook/addon-actions'
 import Vue from 'vue'
@@ -68,22 +57,10 @@ require.context('.', true, /\.vue$/).keys()
         }
       }
 
-{{#if customBlocks}}
-      /** CHAIN THE CUSTOM BLOCK WITH THE storybook-addon HERE */
+      /** CHAIN the storybook-addon HERE */
       let storyWithAddons = story
-{{#isEnabled addons 'notes'}}
-      storyWithAddons = withNotes(Component.__notes || '')(storyWithAddons)
-{{/isEnabled}}
-{{#isEnabled addons 'info'}}
-      storyWithAddons = withInfo(Component.__info || '')(storyWithAddons) // BUG: not support Vue Component
-{{/isEnabled}}
-{{#isEnabled addons 'readme'}}
-      storyWithAddons = withDocs(Component.__docs || '', storyWithAddons) // WIP: https://github.com/tuchk4/storybook-readme/issues/37
-{{/isEnabled}}
+
       Stories.add(componentName, storyWithAddons)
-{{else}}
-      Stories.add(componentName, story)
-{{/if}}
     }
   })
 

template/package.json

@@ -61,7 +61,7 @@ exports.printMessage = function printMessage (data, { green, yellow, magenta })
   const message = `
 # ${green('Project initialization finished!')}
 # ========================
-For more information about configuring the storybook see https://storybook.js.org/basics/guide-vue/
+${magenta(`For more information about configuring the storybook see https://storybook.js.org/basics/guide-vue/`)}
 
 To get started:
 
@@ -78,32 +78,11 @@ List of command:
     ${green('npm run build:component')} \t: build .vue component into .js
     ${green('npm run deploy')} \t\t: deploy into surge.sh
 
-${custBlcksMsg(data, magenta)}
-${data.addons.info && custBlcksMsg
-  ? `Thank you for trying experimental features.
-  If you find bugs and/or have suggestion, feel free to open issue https://github.com/DrSensor/vue-authoring-template/issues/new \n
-`
-: ``}
 Follow https://vuejs.org/v2/guide/components.html#Authoring-Reusable-Components for best practice.
 `
   console.log(message)
 }
 
-/**
- * If the user choose to use customBlocks, it return a string
- * containing the instruction for this step.
- * @param {Object} data Data from the questionnaire
- */
-function custBlcksMsg (data, color) {
-  if (data.customBlocks) {
-    return `
-    To add more custom-blocks, you need to write custom webpack-loader and place it to ${color('.loader/')}.
-    Then ${color('require.resolve(.loader/<your-loader>.js')} into vue.loaders config at ${color('.storybook/poi.config.js')}
-    \n
-    `
-  } else return ''
-}
-
 /**
  * If the user will have to run `npm install` or `yarn` themselves, it returns a string
  * containing the instruction for this step.