@componlyco/storybook-parser

• A package to extract information about individual stories in a Storybook.

API

1. extractStories

• Extract Storybook stories information into stories.json in the storybook-static build folder.

Example:

import { extractStories } from "@componlyco/storybook-parser";

const storiesJSON = await extractStories(<path to storybook-static folder>);

Output:

{
  "v": 3,
  "stories": {
    "example-introduction--page": {
      "id": "example-introduction--page",
      "name": "Page",
      "title": "Example/Introduction",
      "importPath": "./stories/Introduction.stories.mdx",
      "kind": "Example/Introduction",
      "story": "Page",
      "parameters": {
        "fileName": "./stories/Introduction.stories.mdx",
        "docsOnly": true,
        "framework": "react",
        "__id": "example-introduction--page",
        "__isArgsStory": false
      }
    },
    "example-button--primary": {
      "id": "example-button--primary",
      "name": "Primary",
      "title": "Example/Button",
      "importPath": "./stories/Button.stories.tsx",
      "kind": "Example/Button",
      "story": "Primary",
      "parameters": {
        "fileName": "./stories/Button.stories.tsx",
        "framework": "react",
        "__id": "example-button--primary",
        "__isArgsStory": true
      }
    },
    "example-button--secondary": {
      "id": "example-button--secondary",
      "name": "Secondary",
      "title": "Example/Button",
      "importPath": "./stories/Button.stories.tsx",
      "kind": "Example/Button",
      "story": "Secondary",
      "parameters": {
        "fileName": "./stories/Button.stories.tsx",
        "framework": "react",
        "__id": "example-button--secondary",
        "__isArgsStory": true
      }
    },
    "example-button--large": {
      "id": "example-button--large",
      "name": "Large",
      "title": "Example/Button",
      "importPath": "./stories/Button.stories.tsx",
      "kind": "Example/Button",
      "story": "Large",
      "parameters": {
        "fileName": "./stories/Button.stories.tsx",
        "framework": "react",
        "__id": "example-button--large",
        "__isArgsStory": true
      }
    },
    "example-button--small": {
      "id": "example-button--small",
      "name": "Small",
      "title": "Example/Button",
      "importPath": "./stories/Button.stories.tsx",
      "kind": "Example/Button",
      "story": "Small",
      "parameters": {
        "fileName": "./stories/Button.stories.tsx",
        "framework": "react",
        "__id": "example-button--small",
        "__isArgsStory": true
      }
    },
    "example-header--logged-in": {
      "id": "example-header--logged-in",
      "name": "Logged In",
      "title": "Example/Header",
      "importPath": "./stories/Header.stories.tsx",
      "kind": "Example/Header",
      "story": "Logged In",
      "parameters": {
        "fileName": "./stories/Header.stories.tsx",
        "framework": "react",
        "__id": "example-header--logged-in",
        "__isArgsStory": true
      }
    },
    "example-header--logged-out": {
      "id": "example-header--logged-out",
      "name": "Logged Out",
      "title": "Example/Header",
      "importPath": "./stories/Header.stories.tsx",
      "kind": "Example/Header",
      "story": "Logged Out",
      "parameters": {
        "fileName": "./stories/Header.stories.tsx",
        "framework": "react",
        "__id": "example-header--logged-out",
        "__isArgsStory": true
      }
    },
    "example-page--logged-out": {
      "id": "example-page--logged-out",
      "name": "Logged Out",
      "title": "Example/Page",
      "importPath": "./stories/Page.stories.tsx",
      "kind": "Example/Page",
      "story": "Logged Out",
      "parameters": {
        "fileName": "./stories/Page.stories.tsx",
        "framework": "react",
        "__id": "example-page--logged-out",
        "__isArgsStory": true
      }
    },
    "example-page--logged-in": {
      "id": "example-page--logged-in",
      "name": "Logged In",
      "title": "Example/Page",
      "importPath": "./stories/Page.stories.tsx",
      "kind": "Example/Page",
      "story": "Logged In",
      "parameters": {
        "fileName": "./stories/Page.stories.tsx",
        "framework": "react",
        "__id": "example-page--logged-in",
        "__isArgsStory": true
      }
    }
  }
}

2. getStoryURLs

• It performs either of the following two tasks:
  1. Provide Storybook URLs for all the stories.
  2. If the baseURL is not present, then upload storybook-static build folder to the AWS S3 bucket.

import { getStoryURLs } from "@componlyco/storybook-parser";

const urls = await getStoryURLs({
  storybookBuildFolder: "path to storybook-static folder",
  baseURL: "URL on which storybook is deployed",
  viewMode: "story" | "docs" | undefined,
  toolbar: boolean,
  clientName: "User's Org Name",
  staticDomain: "Custom domain to which storybook is published",
});

Output:

{
  "urls": {
    "example-componentbook": [
      "http://localhost:6006/iframe.html?id=example-componentbook--page&full=1&shortcuts=false&singleStory=true"
    ],
    "example-introduction": [
      "http://localhost:6006/iframe.html?id=example-introduction--page&full=1&shortcuts=false&singleStory=true"
    ],
    "example-button": [
      "http://localhost:6006/iframe.html?id=example-button--primary&full=1&shortcuts=false&singleStory=true",
      "http://localhost:6006/iframe.html?id=example-button--secondary&full=1&shortcuts=false&singleStory=true",
      "http://localhost:6006/iframe.html?id=example-button--large&full=1&shortcuts=false&singleStory=true",
      "http://localhost:6006/iframe.html?id=example-button--small&full=1&shortcuts=false&singleStory=true"
    ],
    "example-header": [
      "http://localhost:6006/iframe.html?id=example-header--logged-in&full=1&shortcuts=false&singleStory=true",
      "http://localhost:6006/iframe.html?id=example-header--logged-out&full=1&shortcuts=false&singleStory=true"
    ],
    "example-page": [
      "http://localhost:6006/iframe.html?id=example-page--logged-out&full=1&shortcuts=false&singleStory=true",
      "http://localhost:6006/iframe.html?id=example-page--logged-in&full=1&shortcuts=false&singleStory=true"
    ]
  },
  "meta": {
    "v": 3,
    "stories": {
      "example-componentbook--page": {
        "id": "example-componentbook--page",
        "title": "Example/ComponentBook",
        "name": "Page",
        "importPath": "./src/stories/ComponentBook.stories.mdx"
      },
      "example-introduction--page": {
        "id": "example-introduction--page",
        "title": "Example/Introduction",
        "name": "Page",
        "importPath": "./src/stories/Introduction.stories.mdx"
      },
      "example-button--primary": {
        "id": "example-button--primary",
        "title": "Example/Button",
        "name": "Primary",
        "importPath": "./src/stories/Button.stories.tsx"
      },
      "example-button--secondary": {
        "id": "example-button--secondary",
        "title": "Example/Button",
        "name": "Secondary",
        "importPath": "./src/stories/Button.stories.tsx"
      },
      "example-button--large": {
        "id": "example-button--large",
        "title": "Example/Button",
        "name": "Large",
        "importPath": "./src/stories/Button.stories.tsx"
      },
      "example-button--small": {
        "id": "example-button--small",
        "title": "Example/Button",
        "name": "Small",
        "importPath": "./src/stories/Button.stories.tsx"
      },
      "example-header--logged-in": {
        "id": "example-header--logged-in",
        "title": "Example/Header",
        "name": "Logged In",
        "importPath": "./src/stories/Header.stories.tsx"
      },
      "example-header--logged-out": {
        "id": "example-header--logged-out",
        "title": "Example/Header",
        "name": "Logged Out",
        "importPath": "./src/stories/Header.stories.tsx"
      },
      "example-page--logged-out": {
        "id": "example-page--logged-out",
        "title": "Example/Page",
        "name": "Logged Out",
        "importPath": "./src/stories/Page.stories.tsx"
      },
      "example-page--logged-in": {
        "id": "example-page--logged-in",
        "title": "Example/Page",
        "name": "Logged In",
        "importPath": "./src/stories/Page.stories.tsx"
      }
    }
  }
}