Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
storybook-addon-vue-info
Advanced tools
Changelog
Readme
Want to automatically generate beautiful docs or write stories in docs? Try Storybook Docs!
Docs Mode (docs-addon) is a successor of info-addon, and supports many frameworks/libraries, include Vue.js!
A Storybook addon that shows Vue component's information.
@storybook/vue>=4.0.0
First, install the addon.
npm install --save-dev storybook-addon-vue-info
# yarn add -D storybook-addon-vue-info
Then register in addons.js
.
// .storybook/addons.js
// Don't forget "/lib/" !!
import 'storybook-addon-vue-info/lib/register'
And setup a webpack loader in order to extract component information with vue-docgen-api.
npm install --save-dev vue-docgen-loader vue-docgen-api
# yarn add -D vue-docgen-loader vue-docgen-api
// .storybook/webpack.config.js
// This example uses "Full control mode + default".
// If you are using other mode, add payload of `config.module.rules.push` to rules list.
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.vue$/,
loader: 'vue-docgen-loader',
enforce: 'post'
})
return config
}
Add withInfo
decorator then set info
options to the story.
NOTE: info
option is required for the addon. If you omit it, the addon does nothing.
import { storiesOf } from '@storybook/vue'
import { withInfo } from 'storybook-addon-vue-info'
storiesOf('MyComponent', module)
.addDecorator(withInfo)
.add(
'foo',
() => ({
components: { MyAwesomeComponent },
template: '<my-awesome-component/>'
}),
{
info: {
summary: 'Summary for MyComponent'
}
}
)
You can set the addon as global decorator.
// config.js
import { addDecorator } from '@storybook/vue'
import { withInfo } from 'storybook-addon-vue-info'
addDecorator(withInfo)
To set default options, use setDefaults
.
// .storybook/config.js
import { setDefaults } from 'storybook-addon-vue-info'
setDefaults({
header: false
})
For more details, see live examples.
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 | 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. |
casing
options{
// 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.
With vue-docgen-api, the addon automatically shows descriptions and types extracted by docgen (see example in vue-docgen-api README).
However, if you want to explicitly specify desciprion for component props, events or slots, add description
option for your story component.
Assume <my-awesome-component>
have props label
and visible
.
storiesOf('MyComponent', module)
.addDecorator(withInfo)
.add(
'foo',
() => ({
components: { MyAwesomeComponent },
template: '<my-awesome-component/>',
description: {
MyAwesomeComponent: {
props: {
// These description will appear in `description` column in props table
label: 'A label for my awesome component',
visible: 'Whether component is visible or not'
},
events: {
click: 'Event for user clicking the component'
},
slots: {
default: 'Place text or icon here'
}
}
}
}),
{
info: true
}
)
For more detail, please take a look at live example.
For real example, see example
directory.
FAQs
Storybook addon that shows Vue component information
The npm package storybook-addon-vue-info receives a total of 2,499 weekly downloads. As such, storybook-addon-vue-info popularity was classified as popular.
We found that storybook-addon-vue-info demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.