New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,404
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Abstract
Abstract previews for storybook
npm install storybook-addons-abstract
Last updated over 1 year ago
13.3k
Downloads per week
Readme View on GitHub

Storybook addon for Abstract integration

An addon for Storybook that allows you to link to Abstract layers and collections in the storybook panel!

Example

Examples

Install

Requires storybook@^6.0.0

npm install storybook-addons-abstract

Usage

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
    }
  }
}
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI