https://github.com/stackblitz/storybook-addon-stackblitz
https://github.com/stackblitz/storybook-addon-stackblitz
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stackblitz/storybook-addon-stackblitz
- Owner: stackblitz
- License: mit
- Created: 2023-08-22T13:36:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-15T14:28:08.000Z (almost 2 years ago)
- Last Synced: 2025-02-25T11:07:42.147Z (11 months ago)
- Language: TypeScript
- Size: 1.25 MB
- Stars: 8
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon StackBlitz
Create a one-click Pull Request environment right from your component
## Installation
yarn:
```bash
yarn add --dev @stackblitz/storybook-addon-stackblitz
```
npm:
```bash
npm install @stackblitz/storybook-addon-stackblitz --save-dev
```
pnpm:
```bash
pnpm add --save-dev @stackblitz/storybook-addon-stackblitz
```
## Usage
Add the following to your `.storybook/main.ts` (or `.storybook/main.js`) exports:
```typescript
export default {
addons: ['@stackblitz/storybook-addon-stackblitz'],
};
```
Configure the repository URL in the `.storybook/preview.ts` (or `.storybook/preview.js`):
```typescript
export default {
parameters: {
repositoryUrl: 'https://github.com/[username]/[reponame]'
},
};
```
In your story files set the file path for the specific story, for instance:
```typescript
export const Primary: Story = {
args: {/* ... */},
parameters: {
filePath: 'src/stories/Button.tsx'
}
};
```
If your components are placed in multiple repositories, you can also define the repository URL per the specific story:
```typescript
export const Primary: Story = {
args: {/* ... */},
parameters: {
filePath: 'src/stories/Button.tsx',
repositoryUrl: 'https://github.com/[username]/[reponame]'
}
};
```
## Development scripts
- `yarn start` runs babel in watch mode and starts Storybook
- `yarn build` build and package your addon code
## Addon icon
(for Storybook [integration catalog](https://storybook.js.org/integrations))
