Merge pull request #123 from pocka/feature/kebab-case

Add case conversion option

README.md

@@ -126,17 +126,47 @@ For more details, see [live examples].
 
 ## Options
 
-| Name               | Data type                             | Default value                                       | Description                                                                        |
-| ------------------ | ------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `header`           | `boolean`                             | `true`                                              | Whether to show header or not.                                                     |
-| `source`           | `boolean`                             | `true`                                              | Whether to show source(usage) or not.                                              |
-| `wrapperComponent` | `Component`                           | [default wrapper](src/components/Wrapper/index.vue) | Override inline docs component.                                                    |
-| `previewClassName` | `string`                              | `undefined`                                         | Class name passed down to preview container.                                       |
-| `previewStyle`     | Style object                          | `undefined`                                         | Style passed down to preview container.                                            |
-| `summary`          | `string`                              | `''`                                                | Summary for the story. Accepts Markdown.                                           |
-| `components`       | `{ [name: string]: Component }\|null` | `null`                                              | Display info for these components. Same type as component's `components` property. |
-| `docsInPanel`      | `boolean`                             | `true`                                              | Whether to show docs in addon panel.                                               |
-| `useDocgen`        | `boolean`                             | `true`                                              | Whether to use result of vue-docgen-api.                                           |
+| Name               | Data type                                     | Default value                                       | Description                                                                        |
+| ------------------ | --------------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `header`           | `boolean`                                     | `true`                                              | Whether to show header or not.                                                     |
+| `source`           | `boolean`                                     | `true`                                              | Whether to show source(usage) or not.                                              |
+| `wrapperComponent` | `Component`                                   | [default wrapper](src/components/Wrapper/index.vue) | Override inline docs component.                                                    |
+| `previewClassName` | `string`                                      | `undefined`                                         | Class name passed down to preview container.                                       |
+| `previewStyle`     | Style object                                  | `undefined`                                         | Style passed down to preview container.                                            |
+| `summary`          | `string`                                      | `''`                                                | Summary for the story. Accepts Markdown.                                           |
+| `components`       | `{ [name: string]: Component }\|null`         | `null`                                              | Display info for these components. Same type as component's `components` property. |
+| `docsInPanel`      | `boolean`                                     | `true`                                              | Whether to show docs in addon panel.                                               |
+| `useDocgen`        | `boolean`                                     | `true`                                              | Whether to use result of vue-docgen-api.                                           |
+| `casing`           | `"kebab" \| "camel" \| "pascal" \| undefined` | `undefined`                                         | Which case to use. For detailed usage, see below.                                  |
+
+### Valid `casing` options
+
+```js
+{
+  // Don't convert names
+  casing: undefined
+}
+
+{
+  // Show names in kebab-case
+  casing 'kebab'
+}
+
+{
+  // Show prop names in camelCase and
+  // Show component names in PascalCase
+  casing: 'camel' // or 'pascal'
+}
+
+{
+  // Show prop names in camelCase and
+  // Show component names in kebab-case
+  casing: {
+    props: 'camel',
+    component: 'kebab'
+  }
+}
+```
 
 In addition to addon options, we have a component option.
 

example/.storybook/config.js

@@ -13,10 +13,4 @@ Vue.use(VueI18n)
 
 addDecorator(withInfo)
 
-const req = require.context('../stories', true, /\.stories\.js$/)
-
-function loadStories() {
-  req.keys().forEach(req)
-}
-
-configure(loadStories, module)
+configure(require.context('../stories', true, /\.stories\.js$/), module)

example/stories/issues/122/camel.vue

@@ -0,0 +1,14 @@
+<script>
+export default {
+  props: {
+    tooLongCamelProps: {
+      type: String,
+      default: 'foo'
+    }
+  }
+}
+</script>
+
+<template>
+  <p>camelCase</p>
+</template>

example/stories/issues/122/index.stories.js

@@ -0,0 +1,80 @@
+import CamelComponent from './camel.vue'
+import KebabComponent from './kebab.vue'
+import MixedComponent from './mixed.vue'
+
+export default {
+  title: 'Issues/#122'
+}
+
+export const camelToKebab = () => {
+  return {
+    components: { CamelComponent },
+    template: '<CamelComponent />'
+  }
+}
+camelToKebab.story = {
+  title: 'Convert camelCase to kebab-case',
+  parameters: {
+    info: {
+      casing: 'kebab'
+    }
+  }
+}
+
+export const kebabToCamel = () => {
+  return {
+    components: { KebabComponent },
+    template: '<kebab-component />'
+  }
+}
+kebabToCamel.story = {
+  title: 'Convert kebab-case to camelCase',
+  parameters: {
+    info: {
+      casing: 'camel'
+    }
+  }
+}
+
+export const mixedToKebab = () => {
+  return {
+    components: { MixedComponent },
+    template: '<mixed-component/>'
+  }
+}
+mixedToKebab.story = {
+  title: 'Convert to kebab-case (mixed)',
+  parameters: {
+    info: {
+      casing: 'kebab'
+    }
+  }
+}
+
+export const mixedToCamel = () => {
+  return {
+    components: { MixedComponent },
+    template: '<mixed-component/>'
+  }
+}
+mixedToCamel.story = {
+  title: 'Convert to camelCase (mixed)',
+  parameters: {
+    info: {
+      casing: 'camel'
+    }
+  }
+}
+
+export const preserve = () => {
+  return {
+    components: { MixedComponent },
+    template: '<mixed-component/>'
+  }
+}
+preserve.story = {
+  title: 'Preserve casing when undefined',
+  parameters: {
+    info: {}
+  }
+}

example/stories/issues/122/kebab.vue

@@ -0,0 +1,14 @@
+<script>
+export default {
+  props: {
+    'too-long-kebab-props': {
+      type: String,
+      default: 'foo'
+    }
+  }
+}
+</script>
+
+<template>
+  <p>kebab-case</p>
+</template>

example/stories/issues/122/mixed.vue

@@ -0,0 +1,18 @@
+<script>
+export default {
+  props: {
+    tooLongCamelProps: {
+      type: String,
+      default: 'foo'
+    },
+    'too-long-kebab-props': {
+      type: String,
+      default: 'foo'
+    }
+  }
+}
+</script>
+
+<template>
+  <p>mIxeD-CaSE</p>
+</template>

package.json

@@ -102,6 +102,7 @@
     ]
   },
   "dependencies": {
+    "change-case": "^4.1.0",
     "clone": "^2.1.2",
     "dedent-tabs": "^0.8.0",
     "highlight.js": "^9.12.0",

rollup.config.js

@@ -38,6 +38,7 @@ const commonConfig = {
     })
   ],
   external: [
+    'change-case',
     'vue',
     'dedent',
     'marked',

src/components/Component/index.vue

@@ -1,4 +1,5 @@
 <script>
+import { paramCase, camelCase, pascalCase } from 'change-case'
 import XTable from '../Table/index.vue'
 
 export default {
@@ -11,11 +12,35 @@ export default {
     component: {
       type: Object,
       required: true
+    },
+    /**
+     * Case conversion
+     * See components/Wrapper/index.vue
+     */
+    casing: {
+      type: Object,
+      required: true
     }
   },
   computed: {
     title() {
-      return `# <${this.component.name}/>`
+      return `# <${this.normalizeCase(this.component.name, 'component')}/>`
+    }
+  },
+  methods: {
+    normalizeCase(name, attr) {
+      switch (this.casing[attr]) {
+        case void 0:
+          return name
+        case 'kebab':
+        case 'kebab-case':
+          return paramCase(name)
+        case 'camel':
+        case 'camelCase':
+        case 'pascalCase':
+        case 'PascalCase':
+          return attr === 'component' ? pascalCase(name) : camelCase(name)
+      }
     }
   }
 }
@@ -36,7 +61,7 @@ export default {
       <tbody>
         <tr v-for="prop in component.props" :key="prop.name">
           <td>
-            {{ prop.name }}
+            {{ normalizeCase(prop.name, 'props') }}
             <sup v-if="prop.required" :class="$style.required">*</sup>
           </td>
           <td>{{ prop.type }}</td>

src/components/Wrapper/index.vue

@@ -26,6 +26,20 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    casing() {
+      return {
+        component:
+          typeof this.options.casing === 'string' || !this.options.casing
+            ? this.options.casing
+            : this.options.casing.component,
+        props:
+          typeof this.options.casing === 'string' || !this.options.casing
+            ? this.options.casing
+            : this.options.casing.props
+      }
+    }
   }
 }
 </script>
@@ -51,7 +65,12 @@ export default {
       :lang="info.jsxStory ? 'jsx' : 'html'"
     />
     <x-separator />
-    <x-component v-for="c in info.components" :key="c.name" :component="c" />
+    <x-component
+      v-for="c in info.components"
+      :key="c.name"
+      :component="c"
+      :casing="casing"
+    />
   </x-docs>
 </template>
 

src/extract/decideTargets.ts

@@ -1,9 +1,9 @@
-import Vue, { AsyncComponent, Component, ComponentOptions } from 'vue'
+import { paramCase } from 'change-case'
+import Vue, { ComponentOptions } from 'vue'
 
 import { InfoAddonOptions } from '../options'
 import { ComponentRegistory } from '../types/vue'
 import * as getTagNames from '../utils/getTagNames'
-import { hyphenate } from '../utils/hyphenate'
 
 import { lookupGlobalComponent, LookupResult } from './lookup'
 
@@ -29,7 +29,7 @@ export function decideTargets(
   }
 
   const tagNames = story.template
-    ? getTagNames.fromTemplate(story.template).map(hyphenate)
+    ? getTagNames.fromTemplate(story.template).map(s => paramCase(s))
     : getTagNames.fromJSX(story.render!)
 
   const components = tagNames

src/extract/index.ts

@@ -1,13 +1,12 @@
+import { paramCase } from 'change-case'
 import dedent from 'dedent-tabs'
 import hljs from 'highlight.js'
 import marked from 'marked'
 import Vue, { ComponentOptions } from 'vue'
 
 import { InfoAddonOptions } from '../options'
 import { ComponentInfo, StoryInfo } from '../types/info'
-import { AnyComponent } from '../types/vue'
 import { getJSXFromRenderFn } from '../utils/getJSXFromRenderFn'
-import { hyphenate } from '../utils/hyphenate'
 
 import { decideTargets } from './decideTargets'
 import { extractDocgenInfo } from './extractDocgenInfo'
@@ -26,7 +25,7 @@ export function extract(
 
   const components = Object.keys(targets).map<ComponentInfo>(name => {
     const component = targets[name]
-    const kebabName = hyphenate(name)
+    const kebabName = paramCase(name)
 
     const propDescriptions =
       (descriptions[kebabName] && descriptions[kebabName].props) || {}
@@ -143,7 +142,7 @@ const getDescriptionsFromStory = (story: any): Descriptions | null => {
   const ret: Descriptions = {}
 
   for (const component of Object.keys(story.description)) {
-    ret[hyphenate(component)] = story.description[component]
+    ret[paramCase(component)] = story.description[component]
   }
 
   return ret
@@ -161,7 +160,7 @@ const formatPropsDescription = (story: any): Descriptions => {
   const components: Descriptions = {}
 
   for (const component of Object.keys(story.propsDescription)) {
-    components[hyphenate(component)] = {
+    components[paramCase(component)] = {
       props: story.propsDescription[component]
     }
   }

src/extract/lookup.ts

@@ -1,7 +1,6 @@
+import { paramCase } from 'change-case'
 import Vue from 'vue'
 
-import hyphenate from '../utils/hyphenate'
-
 import { AnyComponent } from '../types/vue'
 
 export interface LookupResult {
@@ -15,7 +14,7 @@ export interface LookupResult {
  */
 export function lookupGlobalComponent(name: string): LookupResult | null {
   for (const componentName in (Vue as any).options.components) {
-    if (hyphenate(componentName) === name) {
+    if (paramCase(componentName) === name) {
       const target = (Vue as any).options.components[componentName]
 
       return {