{"id":26579867,"url":"https://github.com/mondaycom/vibe-storybook-components","last_synced_at":"2025-03-23T06:29:20.158Z","repository":{"id":180991791,"uuid":"665008485","full_name":"mondaycom/vibe-storybook-components","owner":"mondaycom","description":"Collection of Vibe's Storybook components","archived":false,"fork":false,"pushed_at":"2024-04-17T11:28:17.000Z","size":3570,"stargazers_count":13,"open_issues_count":2,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-17T12:39:26.543Z","etag":null,"topics":["component-library","javascript","js","monday","react","storybook","typescript","ui","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mondaycom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-07-11T08:33:41.000Z","updated_at":"2024-04-17T12:39:34.449Z","dependencies_parsed_at":"2023-07-23T02:51:13.760Z","dependency_job_id":"38f49aa9-dbd0-4c31-b4b6-c410fa785304","html_url":"https://github.com/mondaycom/vibe-storybook-components","commit_stats":null,"previous_names":["mondaycom/monday-ui-storybook-blocks"],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fvibe-storybook-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fvibe-storybook-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fvibe-storybook-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondaycom%2Fvibe-storybook-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mondaycom","download_url":"https://codeload.github.com/mondaycom/vibe-storybook-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245066077,"owners_count":20555393,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","javascript","js","monday","react","storybook","typescript","ui","ui-components","ui-library"],"created_at":"2025-03-23T06:29:19.644Z","updated_at":"2025-03-23T06:29:20.146Z","avatar_url":"https://github.com/mondaycom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vibe Storybook Components\n\n\u003e [!IMPORTANT]  \n\u003e 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)\n\n\n![image](https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png)\n\n[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).\n\n## Installation\n\nInstall the component library\n\n```\n$ npm install vibe-storybook-components\n```\n\n## Usage\n\n**Styles**: Import the library's styles in your storybook `preview.js` file:\n\n```javascript\nimport 'vibe-storybook-components/index.css';\n```\n\n**Components**:\nThere are 2 ways to use the components:\n\n1. Import the components from the library's main entry, like this:\n\n```javascript\nimport { ComponentName } from 'vibe-storybook-components';\n```\n\nand then use in a story like this:\n\n```mdxjs\n\u003cComponentName\u003eButton\u003c/ComponentName\u003e\n```\n\n2. Import and map the components once in the storybook's `preview.js` file, like this:\n\n```javascript\nimport { ComponentName } from 'vibe-storybook-components';\n```\n\n```javascript\nimport { ComponentName } from 'vibe-storybook-components';\n...\naddParameters({\n  docs: {\n    components: {\n      h1: ComponentName,\n      ComponentName\n    },\n  },\n});\n```\n\nand then use in the storybook's markdown files like this:\n\n```mdxjs\n# Button\n```\n\nor like this\n\n```mdxjs\n\u003ch1\u003eButton\u003c/h1\u003e\n```\n\nor like this without a corresponding import\n\n```mdxjs\n\u003cComponentName\u003eButton\u003c/ComponentName\u003e\n```\n\n### Styling\n\nMost 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.\n\n## Storybook\n\n![Work in Progress](https://img.shields.io/badge/status-WIP-orange.svg)  \n\u003cb\u003e[Storybook content is in active development.]\u003c/b\u003e\n\nTo run the storybook locally run this command:\n\n```\nnpm run storybook\n```\n\nthe storybook will hosted on http://localhost:6005\n\n## Developing locally with your consumer application\n\nWhen developing locally we are using a npm functionality called yarn link, this allows us to\nwork locally on our package and use it in a different project without publishing.\nThis functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.\n\n### Troubleshooting local development\n\n- If you are using NVM, make sure both packages are using the same version.\n- 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\n\ngo to the project's directory and run:\n\n```\nnvm use\nyarn unlink\nyarn link\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmondaycom%2Fvibe-storybook-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmondaycom%2Fvibe-storybook-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmondaycom%2Fvibe-storybook-components/lists"}