https://github.com/nfour/story-browser
https://github.com/nfour/story-browser
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/nfour/story-browser
- Owner: nfour
- Created: 2021-03-09T03:37:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-07T08:56:30.000Z (about 2 years ago)
- Last Synced: 2024-10-11T23:15:31.411Z (almost 2 years ago)
- Language: TypeScript
- Size: 308 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Story Browser
Story Browser will render React based [CSF (Component Story Format)](https://storybook.js.org/docs/react/api/csf/) files.
> The difference is that this is just a React component, avoiding all of the tooling issues from `StoryBook` and `ViteBook`
> However, you must route to this component and/or embed it into your application yourself
**Features**:
- [x] Render stories in `iframes` _(Optional)_
- [x] CLI to generate an import map for story files in the project
- [x] Can be rethemed (CSS variables & Class names)
- [x] Has dark & light theme
- [x] Sidebar is a nested, collapsable, searchable tree
- [ ] **Planned**:
- [ ] Can zoom rendered component in/out
**Not planned**:
- Full CSF support
+ [React Usage](#react-usage)
+ [CLI Usage](#cli-usage)
+ [Contributing](#contributing)
## React Usage
```tsx
import { StoryBrowser, useStoryBrowser } from 'story-browser'
import * as modules from './storymap'
// This example uses the `xroute` library for rounting
export const StoryBrowserPage = ({ router }: { router: XRouter }) =>
router.routes.storyBrowser.push({ pathname: { story } })
}
/** @example "/story/my-story--id" */
onStoryUri={({ storyId }) =>
router.routes.story.toUri({
pathname: { story: storyId },
})
}
layout={{
branding: 'storyBrowser',
initialSidebarPosition: 'open',
initialTheme: 'light',
asFullscreenOverlay: true,
}}
/>
```
> The full example also includes how to utilize iFramed components
> See the full example here: [./testProject/Root.tsx](./testProject/Root.tsx)
## CLI Usage
```bash
# Install it
npm add story-browser
```
```bash
# Generate a story map to import into the component
# This is a simple glob pattern
npm run makeStoryMap './src/**/*.stories.tsx' --output ./src/storyBrowser/storyMap.ts
```
## Contributing
```bash
git clone https://github.com/nfour/story-browser.git
cd story-browser
pnpm i
pnpm dev # start dev server for ./testProject
```