{"id":13452194,"url":"https://github.com/ui-storybook/sb","last_synced_at":"2025-03-23T19:33:55.750Z","repository":{"id":57385259,"uuid":"69394429","full_name":"ui-storybook/sb","owner":"ui-storybook","description":"Esiest way to develop, review and  keep UI elements consistent and documented.","archived":false,"fork":false,"pushed_at":"2019-11-22T16:56:15.000Z","size":10822,"stargazers_count":242,"open_issues_count":12,"forks_count":13,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-15T18:04:49.060Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://git.io/vP9rq","language":"JavaScript","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/ui-storybook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-27T20:10:08.000Z","updated_at":"2023-05-27T19:53:00.000Z","dependencies_parsed_at":"2022-09-26T16:50:33.906Z","dependency_job_id":null,"html_url":"https://github.com/ui-storybook/sb","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-storybook%2Fsb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-storybook%2Fsb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-storybook%2Fsb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-storybook%2Fsb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-storybook","download_url":"https://codeload.github.com/ui-storybook/sb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245159210,"owners_count":20570343,"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":[],"created_at":"2024-07-31T07:01:16.625Z","updated_at":"2025-03-23T19:33:54.184Z","avatar_url":"https://github.com/ui-storybook.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# SB [![npm version](https://badge.fury.io/js/ui-storybook.svg)](https://badge.fury.io/js/ui-storybook) [![Gitter Chat](https://badges.gitter.im/owner/repo.png)](https://gitter.im/ui-sb/Lobby)\r\n\r\n\r\nSB is the environment for developers that allow to easily develop and support UI components with any framework. With it, you can visualize different states of your UI components and develop them interactively.    \r\n\r\n![SB demo image](docs/sb-demo.gif)\r\n\r\nSB run your app in sandbox, so you can develop without warning about any specific dependency.\r\n\r\n## Demo\r\n[Material cards](https://ui-storybook.github.io/sb-angular-material-cards-demo/#/?split=true) — [Source](https://github.com/ui-storybook/sb-angular-material-cards-demo)   \r\n\r\n## What is supported now?\r\nAngular 1 — [API](#angular-usage)         \r\nReact — [API](#react-usage)         \r\nNG2 — Comming soon  \r\nAurelia — Comming soon  \r\nVue.js — Comming soon  \r\n\r\nBasically, SB was designed for support any frameworks and libraries. All you components run in isolated scope with that version of framework or library that you need.  \r\nFor now SB support Angular 1.x and React. Support for NG2, Aurelia and Vue.js coming very soon.\r\n\r\n\r\n## Getting started\r\nFastest way to add SB to your project is to use [sb-cli](https://github.com/ui-storybook/sb-cli):  \r\n\r\n```bash\r\n# Installation\r\nnpm i -g sb-cli\r\n\r\n# Then in your project folder run  \r\nsb-create\r\n```\r\n\r\nThis will create `sb` folder with all dependencies based on project type.\r\n\r\nAdd the `-Y` or `--use-yarn` flag if your project uses yarn instead of npm as package manager. \r\n\r\n## Usage\r\n#### Available commands\r\n```bash\r\n# run sb server\r\nnpm run sb\r\n\r\n# build sb with your project\r\nnpm run sb-build\r\n\r\n# create new build and publish it to GitHub Pages\r\nnpm run sb-publish\r\n```\r\n\r\n### Angular usage\r\nFirst you need to import your main project module to `sb/index.js`  \r\n\r\n```js\r\n// Import you app \r\nimport '../path/to/your/module';\r\n \r\n// And inject it here \r\nconst mainModule = angular.module('sb', [\r\n  'helper',\r\n  'youAppName'\r\n]);\r\n\r\n```\r\n\r\nWrite your stories  \r\nSB provides simple api for you:\r\n\r\n```js\r\n// File sb/stories/index.js\r\n\r\n// Create a new section (like page)\r\nlet buttons = sb.section('Buttons');\r\n\r\n// Then you can add new story and states to section\r\nbuttons.story('Simple buttons')\r\n\r\n    // add method create new state for story \r\n    // first param take title of state\r\n    // second take html template that need to render \r\n    // and third take object which need to load to component scope\r\n    .add('Main button', '\u003cbutton\u003e{{ vm.title }}\u003c/button\u003e', {\r\n        title: 'Hello from SB'\r\n    })\r\n    .add('Success button', '\u003cbutton\u003e{{ vm.someOtherTitle }}\u003c/button\u003e', {\r\n        someOtherTitle: 'You successfully build first story'\r\n    });\r\n\r\n``` \r\nAlso you can use `sb.mock` method for stote your mocks and then use in stories passing mock name instead of object:\r\n```js\r\nsb.mock('week', {\r\n    sunday: 'Sunday', \r\n    monday: 'Monday',\r\n    tuesday: 'Tuesday',\r\n    wednesday: 'Wednesday',\r\n    thursday: 'Thursday',\r\n    friday: 'Friday',\r\n    saturday: 'Saturday'\r\n});\r\n\r\nlet calendar = sb.section('Week');\r\ncalendar.story('Days of the week')\r\n  .add('Sunday', '\u003cp\u003e{{ vm.sunday }}\u003c/p\u003e', 'week')\r\n  .add('Monday', '\u003cp\u003e{{ vm.monday }}\u003c/p\u003e', 'week')\r\n  .add('Tuesday', '\u003cp\u003e{{ vm.tuesday }}\u003c/p\u003e', 'week')\r\n  .add('Wednesday', '\u003cp\u003e{{ vm.wednesday }}\u003c/p\u003e', 'week')\r\n  .add('Thursday', '\u003cp\u003e{{ vm.thursday }}\u003c/p\u003e', 'week')\r\n  .add('Friday', '\u003cp\u003e{{ vm.friday }}\u003c/p\u003e', 'week')\r\n  .add('Saturday', '\u003cp\u003e{{ vm.saturday }}\u003c/p\u003e', 'week');\r\n``` \r\n\r\n\r\nThan simply run `npm run sb` — this will load server with hotreload and run SB with your application.  \r\n\r\n### React usage\r\nFirst you need to import your React components in `sb/index.js` file  \r\n\r\n```js\r\n// Example from demo application  \r\nimport { Welcome } from './welcome/welcome';\r\n```\r\n\r\nThe write your stories  \r\nSB provides simple api for you:\r\n\r\n```js\r\n// File sb/stories/index.js\r\n\r\n// You need import your commponent here too\r\nimport { Welcome } from './../welcome/welcome';\r\n\r\n// Create a new section (like page)\r\nlet overview = sb.section('Welcome section');\r\n\r\n// Then you can add new story and states to section\r\n// add method create new state for story \r\n// first param take title of state\r\n// second take function that return Raact component \r\noverview.story('SB demo component')\r\n  .add('Hello messages', () =\u003e (\u003cWelcome /\u003e));\r\n``` \r\n\r\nThan simply run `npm run sb` — this will load server with hotreload and run SB with your application.\r\n\r\n### Components Documentation\r\nSB can show documentation or notes for your components from `.md` files.\r\n\r\n```js\r\n\r\n// Import your md file\r\nimport docs from './docs.md';\r\n\r\nlet calendar = sb.section('Week');\r\n\r\n// And pass with 4th param to story\r\ncalendar.story('Days of the week')\r\n  .add('Sunday', '\u003cp\u003e{{ vm.sunday }}\u003c/p\u003e', {}, docs)\r\n``` \r\n\r\n### Configuration \r\nSB use Webpack to build everything. If you need to change or update build process go to `sb/.webpack` folder:\r\n`server.js` include configuration for browser-sync and webpack HMR.  \r\n`loaders.js` include all loaders.  \r\n`webpack.dev.babel.js` include dev build configuration.   \r\n`webpack.build.babel.js` include production build configuration.\r\n\r\n## Contributing\r\n\r\nIf you find a bug (and you don’t know how to fix it), have trouble following the documentation or have a question or ideas how to improve SB – create an issue!  \r\nIf you’re able to patch the bug or add the feature yourself – fantastic, make a pull request with the code! \r\n\r\nAvailable gulp tasks: \r\n```bash\r\n\r\n# run dev server with demo data\r\ngulp serve  \r\n\r\n# create new build\r\ngulp build  \r\n\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-storybook%2Fsb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-storybook%2Fsb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-storybook%2Fsb/lists"}