Storybook extractor: a tool that extracts data from storybook stories, documentation pages and generates a JSON file with them

Overview

Storybook extractor

πŸ”₯ This project was done as a part of 24h design systems hackathon 2022 there are some known issues as a result of that.

Storybook extractor is a tool that extracts data from storybook stories, documentation pages and generates a JSON file with them.

Features:

  • Extracts metadata from storybook globals
  • Takes a screenshot of the storybook component
  • Extracts docs page HTML

Running storybook-extractor on URL where storybook is running will output JSON like this:

Click to see complete JSON

Some of the properties are shorten for readability.

{
    "id": "2788c0bf91f7bef230a70af70851b7e0",
    "title": "ButtonPrimary/Playground",
    "storyPath": "Core/Button/ButtonPrimary",
    "storyName": "Playground",
    "storyId": "core-button-buttonprimary--playground",
    "componentName": "ButtonPrimary",
    "docs": {
      "heading": "ButtonPrimary",
      "firstParagraph": "ButtonPrimary is a button used for main actions on page",
      "tablesHtml": [
        "<first-found-html-table>",
      ],
      "codeSnippets": [],
      "fullText": "<inner-text-of-docs>"
    },
    "urls": {
      "storyUrl": "http://localhost:4400/?path=/story/core-button-buttonprimary--playground",
      "storyUrlIframe": "http://localhost:4400/iframe.html?id=core-button-buttonprimary--playground&args=&viewMode=story",
      "docsUrl": "http://localhost:4400/?path=/docs/core-button-buttonprimary--playground",
      "docsUrlIframe": "http://localhost:4400/iframe.html?id=core-button-buttonprimary--playground&viewMode=docs"
    },
    "pictureBase64": "<base64-of-your-component>",
    "raw": {
      "id": "core-button-buttonprimary--playground",
      "kind": "Core/Button/ButtonPrimary",
      "name": "Playground",
      "story": "Playground",
      "parameters": {
        "docs": {
          "inlineStories": true,
          "iframeHeight": 100
        },
        "backgrounds": {
          "grid": {
            "cellSize": 20,
            "opacity": 0.5,
            "cellAmount": 5
          },
          "values": [
            {
              "name": "light",
              "value": "#F8F8F8"
            },
            {
              "name": "dark",
              "value": "#333333"
            }
          ]
        },
        "globals": {
          "measureEnabled": false,
          "outline": false
        },
        "framework": "react",
        "component": {
          "__docgenInfo": {
            "description": "ButtonPrimary component\nUsage: should be used for main actions on page\n",
            "methods": [],
            "displayName": "ButtonPrimary"
          }
        },
        "fileName": "<path>/button-primary.stories.tsx",
        "storySource": {
          "source": "<story-source-code>",
          "locationsMap": {
          }
        },
        "args": {},
        "argTypes": {},
        "__id": "core-button-buttonprimary--playground",
        "__isArgsStory": false
      },
      "args": {},
      "initialArgs": {}
    },
  }

With this raw JSON report you can generate what do you desire, for example:

  • Generate snippets for IDE with all components from storybook
  • Get storybook docs pages into your custom documentation page
  • Feed Algolia search with you components data

Install

npm install --save-dev storybook-extractor

Usage

You need to run the extractor with a path to a config file.

npx storybook-extractor -c /path/to/storybook-extractor.config.js

Config file arguments

Argument Type Description
url string URL to storybook instance
output string Path to output file
concurentScrapers number Number of concurrent scrapers, defaults to 20
postProcess String[] Path to post processor

Example config file

module.exports = {
  url: "http://localhost:4400",
  output: "./out.json",
  concurentScrapers: 20,
  postProcess: ["./examples/example-post-process.js"],
};

Custom post process

This extractor only produces raw data which can be quite large, because of that there is an option to specify postProcess in your config file to run scripts after extractor, like this:

  postProcess: [".path/to/your/script.js"],

After the extractor is finished scraping it will execute specified processes. Note that those processes are not chained.

Known issues

  • Docs pages are being scraped multiple times. As for a component you can have multiple stories which have unique URLs and previews but don't have unique doc pages.
  • Not everything is TS typed
  • The Config file is required right now, having CLI commands would be more friendly
  • No tests

License

MIT

You might also like...
F.A.N Report - Facebook Audience Network Performance Tool (available both iOS and Android).
F.A.N Report - Facebook Audience Network Performance Tool (available both iOS and Android).

Audience Network - Facebook Ads Performance Tool Check your Facebook Audience Network performance quickly with the app. It shows number of ad requests

Crypto Capsule: a free tool used for sending cryptocurrencies into the future
Crypto Capsule: a free tool used for sending cryptocurrencies into the future

πŸ’Š ⏲️ Crypto Capsule Crypto Capsule is a free tool used for sending cryptocurrencies into the future. It is essentially a timelock-as-a-service. It is

A CLI tool that bridges React Native modules & UI components with ease πŸŽ‰
A CLI tool that bridges React Native modules & UI components with ease πŸŽ‰

react-native-create-bridge Bridging native modules & UI components made easy! If you're a JavaScript developer writing your first lines of native code

A small and simple example app with navigation, data persistence, listview and animation!
A small and simple example app with navigation, data persistence, listview and animation!

react-native-quick-sample A small and simple example app with navigation, data persistence, listview and animation! Install and run on android npm ins

iOS's Stocks App clone written for MacOS with Touch Bar support. Data is pulled from Yahoo Finance.
iOS's Stocks App clone written for MacOS with Touch Bar support. Data is pulled from Yahoo Finance.

FinanceMacOSReactNative iOS's Stocks App clone written for MacOS with Touch Bar support. Data is pulled from Yahoo Finance. Download App preview Scree

CodeHero-Objective - A simple app that fetch data from marvel API
CodeHero-Objective - A simple app that fetch data from marvel API

CodeHero-Objective A simple app that fetch data from marvel API About the App: A

A WebSQL-compatible API to store data in a react native app
A WebSQL-compatible API to store data in a react native app

This library provides a WebSQL-compatible API to store data in a react native app, by using a fast JSI implementation of the SQLite driver react-native-quick-sqlite.

A weather app build with React Native. Which is using openweather API for weather data.
A weather app build with React Native. Which is using openweather API for weather data.

A weather app build with React Native. Which is using openweather API for weather data.

A full-fledged package to build an e-commerce application for iOS and Android similar to Myntra/JackThreads. Available with beautiful design and necessary features along with screen for Dashboard and Mobile app. Build using React Native, Expo, React, GraphQL, Apollo Client, Node and MongoDB.
Owner
Filip Danisko
Filip Danisko
A React library that generates beautiful previews for your links.

React Link Preview A React component that renders beautiful, fully-customizable link previews. Demo How to use Install the package: yarn add @dhaiwat1

Dhaiwat Pandya 137 Dec 6, 2022
πŸƒ RNN Screens - a set of methods to help build initial screens for RNN without hassle. Includes screens registration and predictable navigation between them.

Purpose of RNN Screens is to simplify and accelerate the process of React Native App development with React Native Navigation. It is not a replacement

Batyr 18 Oct 16, 2022
TweetDeck for GitHub - Filter Issues, Activities & Notifications - Web, Mobile & Desktop with 99% code sharing between them

DevHub: GitHub Notifications & Activities on your Desktop Android, iOS, Web & Desktop with 95%+ code sharing between them thanks to React Native + Rea

DevHub 8.6k Dec 3, 2022
:camera:β€€Point your camera at things to learn how to say them in a different language. Android app built with React Native.

What the Thing ? Point camera at things to learn how to say them in a different language. Native Android App built with React Native. Made it as a par

Vignesh M 535 Nov 27, 2022
React Native application that throws you random quotes in a super clean minimal version. You can save this quotes to favorites or share them with your friends.

Minimal Quotes The application concept and the design is created by Kishore from Elitepixels as a part of Project365 Minimal quotes is React Native ap

Insider Development 41 Sep 4, 2022
A file manager app made with React Native & Expo

A file manager app made with React Native & Expo

null 85 Nov 22, 2022
Bruno Simon's first journey scene in React Three Fiber and Storybook

Bruno Simon's first journey scene in React Three Fiber and Storybook Cody Bennett transcribed Bruno Simon's first journey scene into React. @0xca0a ra

Varun Vachhar 39 Sep 24, 2022
ReactNative app with, react-query, react-tracked, immer, react-navigation, storybook, jest, restyle, react-native-reanimated

React native init 사전에 brew, npx, Xcode 등은 기본적으둜 μ„€μ •λ˜μ–΄μžˆλ‹€κ³  κ°€μ •ν•©λ‹ˆλ‹€. npm version: 6.13.4 npx react-native init ScaffoldPlayground --template react-native-te

JB Paul 2 Dec 17, 2021
Web3uikitaddons - Simplify the creation of Storybook addons

Storybook Addon Kit Simplify the creation of Storybook addons ?? Live-editing in

CryptoChelios 0 Jan 23, 2022
You can automize iOS and Android app's build, upload and versioning processes via Mobile App Automizer CLI tool.

Mobile App Automizer You can automize iOS and Android app's build, upload and versioning processes via Mobile App Automizer CLI tool. You can upload y

automizer 581 Dec 6, 2022