Storybook addon for Abstract integration
An addon for Storybook that allows you to link to Abstract layers and collections in the storybook panel!
Examples
- Storybook: https://storybook-addons-abstract.now.sh/
- Source: https://github.com/amccloud/storybook-addons-abstract/tree/master/examples
Install
Requires storybook@^6.0.0
npm install storybook-addons-abstractUsage
within main.js:
module.exports = {
stories: ['../src/**/*.stories.@(tsx|mdx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
+ 'storybook-addons-abstract/register'
]
};or using the old addons.js:
import "storybook-addons-abstract/register";with the new Component Story Format API:
import React from "react";
import { BlogIndex, BlogGallery, BlogPost } from "../";
export default {
parameters: {
abstract: {
// Copy a collection or layer share url from Abstract
url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4"
}
}
};
// Name your stories after layers in the collection
export const blogIndex = () => (
<BlogIndex />
);
export const blogGallery = () => (
<BlogGallery />
);
export const blogPost = () => (
<BlogPost />
);or using the old stories:
import React from "react";
import { storiesOf } from "@storybook/react";
storiesOf("Blog", module)
.addParameters({
abstract: {
// Copy a collection or layer share url from Abstract
url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4"
}
})
// Name your stories after layers in the collection
.add("Blog Index", () => <BlogIndex />)
.add("Blog Gallery", () => <BlogGallery />)
.add("Blog Post", () => <BlogPost />);Options
| Option | Value | Default | Description |
|---|---|---|---|
theme |
"light" | "dark" | "system" |
"light" |
Control appearance of embed |
chromeless |
boolean |
false |
Hide embed interface, displaying only the preview until mouseover |
Change embed background color
{
abstract: {
url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4",
options: {
theme: "dark"
}
}
}Hide embed interface
{
abstract: {
url: "https://share.goabstract.com/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4",
options: {
chromeless: true
}
}
}