{"id":15792689,"url":"https://github.com/nfour/story-browser","last_synced_at":"2025-03-14T14:30:44.277Z","repository":{"id":149654859,"uuid":"345873059","full_name":"nfour/story-browser","owner":"nfour","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-07T08:56:30.000Z","size":315,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T23:15:31.411Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nfour.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2021-03-09T03:37:11.000Z","updated_at":"2024-06-07T08:56:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"5d871079-5166-4fca-aec7-e2e25f1843ed","html_url":"https://github.com/nfour/story-browser","commit_stats":{"total_commits":113,"total_committers":1,"mean_commits":113.0,"dds":0.0,"last_synced_commit":"d90d02188f33f19ae10708fb71cc2bc917779047"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfour%2Fstory-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfour%2Fstory-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfour%2Fstory-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfour%2Fstory-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nfour","download_url":"https://codeload.github.com/nfour/story-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243593212,"owners_count":20316150,"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-10-04T23:02:51.512Z","updated_at":"2025-03-14T14:30:43.769Z","avatar_url":"https://github.com/nfour.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Story Browser\n\nStory Browser will render React based [CSF (Component Story Format)](https://storybook.js.org/docs/react/api/csf/) files.\n\n\u003e The difference is that this is just a React component, avoiding all of the tooling issues from `StoryBook` and `ViteBook`\n\u003e However, you must route to this component and/or embed it into your application yourself\n\n**Features**:\n- [x] Render stories in `iframes` _(Optional)_\n- [x] CLI to generate an import map for story files in the project\n- [x] Can be rethemed (CSS variables \u0026 Class names)\n- [x] Has dark \u0026 light theme\n- [x] Sidebar is a nested, collapsable, searchable tree\n- [ ] **Planned**:\n  - [ ] Can zoom rendered component in/out\n\n**Not planned**:\n- Full CSF support\n\n+ [React Usage](#react-usage)\n+ [CLI Usage](#cli-usage)\n+ [Contributing](#contributing)\n  \n## React Usage\n\n```tsx\nimport { StoryBrowser, useStoryBrowser } from 'story-browser'\nimport * as modules from './storymap'\n\n// This example uses the `xroute` library for rounting\nexport const StoryBrowserPage = ({ router }: { router: XRouter }) =\u003e \n  \u003cStoryBrowser\n    modules={modules}\n    activeStoryId={router.routes.storyBrowser.pathname?.story}\n    onActiveStoryIdChanged={(story) =\u003e\n      router.routes.storyBrowser.push({ pathname: { story } })\n    }\n    /** @example \"/story/my-story--id\" */\n    onStoryUri={({ storyId }) =\u003e\n      router.routes.story.toUri({\n        pathname: { story: storyId },\n      })\n    }\n    layout={{\n      branding: 'storyBrowser',\n      initialSidebarPosition: 'open',\n      initialTheme: 'light',\n      asFullscreenOverlay: true,\n    }}\n  /\u003e\n\n```\n\n\u003e The full example also includes how to utilize iFramed components\n\u003e See the full example here: [./testProject/Root.tsx](./testProject/Root.tsx)\n\n\n## CLI Usage\n\n```bash\n# Install it\nnpm add story-browser\n```\n\n```bash\n# Generate a story map to import into the component\n# This is a simple glob pattern\nnpm run makeStoryMap './src/**/*.stories.tsx' --output ./src/storyBrowser/storyMap.ts\n```\n\n## Contributing\n\n```bash\ngit clone https://github.com/nfour/story-browser.git\ncd story-browser\npnpm i\npnpm dev # start dev server for ./testProject\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfour%2Fstory-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnfour%2Fstory-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfour%2Fstory-browser/lists"}