https://github.com/mondaycom/vibe-storybook-components
Collection of Vibe's Storybook components
https://github.com/mondaycom/vibe-storybook-components
component-library javascript js monday react storybook typescript ui ui-components ui-library
Last synced: 7 months ago
JSON representation
Collection of Vibe's Storybook components
- Host: GitHub
- URL: https://github.com/mondaycom/vibe-storybook-components
- Owner: mondaycom
- License: mit
- Created: 2023-07-11T08:33:41.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-17T11:28:17.000Z (over 1 year ago)
- Last Synced: 2024-04-17T12:39:26.543Z (over 1 year ago)
- Topics: component-library, javascript, js, monday, react, storybook, typescript, ui, ui-components, ui-library
- Language: TypeScript
- Homepage:
- Size: 3.4 MB
- Stars: 13
- Watchers: 2
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Vibe Storybook Components
> [!IMPORTANT]
> This repository is archived, `vibe-storybook-components` has been moved to the [`storybook-blocks` package](https://github.com/mondaycom/monday-ui-react-core/tree/master/packages/storybook-blocks) in Vibe's [monorepo](https://github.com/mondaycom/monday-ui-react-core)
[monday.com](https://www.monday.com) Collection of Storybook components, with which [monday-ui-react-core](https://github.com/mondaycom/monday-ui-react-core) storybook is built - [style.monday.com](https://style.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:
```javascript
import 'vibe-storybook-components/index.css';
```
**Components**:
There are 2 ways to use the components:
1. Import the components from the library's main entry, like this:
```javascript
import { ComponentName } from 'vibe-storybook-components';
```
and then use in a story like this:
```mdxjs
Button
```
2. Import and map the components once in the storybook's `preview.js` file, like this:
```javascript
import { ComponentName } from 'vibe-storybook-components';
```
```javascript
import { ComponentName } from 'vibe-storybook-components';
...
addParameters({
docs: {
components: {
h1: ComponentName,
ComponentName
},
},
});
```
and then use in the storybook's markdown files like this:
```mdxjs
# Button
```
or like this
```mdxjs
Button
```
or like this without a corresponding import
```mdxjs
Button
```
### 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:
```
npm run 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](https://github.com/facebook/react/issues/13991). 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
```