https://github.com/divriots/csf-helpers

Created with Components.studio
https://github.com/divriots/csf-helpers

Last synced: 4 days ago
JSON representation

Created with Components.studio

• Host: GitHub
• URL: https://github.com/divriots/csf-helpers
• Owner: divriots
• License: mit
• Created: 2022-07-19T14:54:31.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-01T09:35:33.000Z (almost 4 years ago)
• Last Synced: 2026-02-19T11:38:27.536Z (4 months ago)
• Language: TypeScript
• Homepage: https://app.components.studio/view/ZDRAF9DebzEFyYzY4TAS
• Size: 49.8 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# CSF helpers [![npm Version](https://img.shields.io/npm/v/@divriots/csf-helpers?cacheSeconds=1800)](https://npmjs.com/package/divriots/csf-helpers)

This is a collection of helper functions to manipulate, combine and resolve CSF stories.

Some helpers were extracted from storybook store, with modifications to work standalone.

## Table of Contents

- [Install](#install)

- [Usage](#usage)

## Install

```sh

$ npm install --save @divriots/csf-helpers

```

```javascript

import { ... } from "@divriots/csf-helpers";

```

## Usage

```js

import {

  normalizeProjectAnnotations,

  processCSFFile,

  prepareStory,

  renderStory

} from "@divriots/csf-helpers";

// normalizes project annotations (render, renderToDOM, globals, parameters ...)

const projectAnnotations = normalizeProjectAnnotations({

  parameters: {

    layout: 'centered'

  }

});

const module = await import('./stories.js')

// returns normalized component annotations, plus list of (normalized)

//  stories in the given module

const { meta, stories } = processCSFFile(module, './stories.js');

// prepares story for rendering, binds decorators, loaders, renderers

const prepared = prepareStory(stories[0], meta, projectAnnotations);

// renders story in given DOM element, returns dispose function to unmount

const dispose = await renderStory(

  prepared,

  document.getElementById('root')

)