Nascent Prototype Metaverse

    storybook-addons-abstract
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.1 • Public • Published

    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
        }
      }
    }

    Install

    npm i storybook-addons-abstract

    DownloadsWeekly Downloads

    14,855

    Version

    6.2.1

    License

    MIT

    Unpacked Size

    14.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • amccloud