vibe-storybook-components
v0.20.0
Published
Collection of Vibe's Storybook components
Downloads
54,947
Keywords
Readme
Vibe Storybook Components
monday.com Collection of Storybook components, with which Vibe storybook is built - vibe.monday.com.
Installation
Install the component library
$ npm install vibe-storybook-components
Usage
Styles: Import the library's styles in your storybook preview.js
file:
import 'vibe-storybook-components/index.css';
Components: There are 2 ways to use the components:
- Import the components from the library's main entry, like this:
import { ComponentName } from 'vibe-storybook-components';
and then use in a story like this:
<ComponentName>Button</ComponentName>
- Import and map the components once in the storybook's
preview.js
file, like this:
import { ComponentName } from 'vibe-storybook-components';
import { ComponentName } from 'vibe-storybook-components';
...
addParameters({
docs: {
components: {
h1: ComponentName,
ComponentName
},
},
});
and then use in the storybook's markdown files like this:
# Button
or like this
<h1>Button</h1>
or like this without a corresponding import
<ComponentName>Button</ComponentName>
Styling
Most of the components have a className
prop that can be used to style them. The className prop is a string that is added to the component's class list. The className prop is not required, but it's recommended to use it for styling.
Storybook
[Storybook content is in active development.]
To run the storybook locally run this command:
yarn storybook
the storybook will hosted on http://localhost:6005
Developing locally with your consumer application
When developing locally we are using a npm functionality called yarn link, this allows us to work locally on our package and use it in a different project without publishing. This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.
Troubleshooting local development
- If you are using NVM, make sure both packages are using the same version.
- Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with "invalid hook call" See this github thread. The quick fix is in your webpack config file alias react to resolve the node_modules path
go to the project's directory and run:
nvm use
yarn unlink
yarn link
npm start