https://github.com/degjs/storybook-decorator-sitecoreprops

A Storybook decorator for normalizing Sitecore JSS props
https://github.com/degjs/storybook-decorator-sitecoreprops

Last synced: 2 months ago
JSON representation

A Storybook decorator for normalizing Sitecore JSS props

• Host: GitHub
• URL: https://github.com/degjs/storybook-decorator-sitecoreprops
• Owner: DEGJS
• Created: 2020-02-18T20:16:35.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-01-05T07:40:07.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T09:27:24.209Z (3 months ago)
• Language: JavaScript
• Size: 105 KB
• Stars: 3
• Watchers: 5
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# storybook-decorator-sitecoreprops

SitecoreProps is a Storybook addon for normalizing nested Sitecore JSS field props.

## Why does this exist?

Sitecore JSS does a great job of putting front-end developers in the driver's seat of project development, but it does have a few quirks. One of those is the `fields` prop that must be passed to its provided JSS React content components, which expects an object formatted like this:

```

{

  fields: {

    heading: {

      value: 'Value'

    }

  }

}

```

In practice, that means passing props like this:

```

import { Text } from '@sitecore-jss/sitecore-jss-react';

const CustomComponent = ({fields}) => (

  


    

  

);


export default CustomComponent;

```

This structure can create pretty verbose sample data structures in Storybook stories. To combat this, the SitecoreProps decorator will automatically decorate stories to build out the nested value object whenever a fields property is passed to it. That means you can write sample data like this, without worrying about the extra layer of nesting:

```

{

  fields: {

    heading: 'Value'

  }

}

```

## Installation

Install the following npm module in your project:

```

npm i --save-dev @degjs/storybook-decorator-sitecoreprops

```

To install for all stories, import `withSitecoreProps` and add the decorator within `.storybook/preview.js`, like this:

```

import { addDecorator } from '@storybook/react';

import { withSitecoreProps } from '@degjs/storybook-decorator-sitecoreprops';

addDecorator(withSitecoreProps);

```