ScandiPWA & Storybook plugin

A plugin that makes your ScandiPWA based project compatible with Storybook

Table of Contents

1. Getting Started

   • Prerequisites
   • Installation

2. Test the story

   • Override ScandiPWA component
   • Create a story for a component

3. Story example

   • The output of the Storybook UI
4. Contributing
5. Acknowledgments
6. Troubleshooting

Getting Started

The following plugin allows to make your project created on ScandiPWA platform compatible with Storybook library.

By installing this plugin, your project will be adjusted with all the necessary files. The files are not affecting your project sources. The changes will only appear in .storybook and /src/stories folders.

Prerequisites

Before installing the plugin, make sure, the project you're going to bump, has the following:

• NodeJS v14+;

node -v // --> example: v14.17.6

Important: node-sass package is causing issues with the Node version 16+.

• The project is a ScandiPWA based
• Storybook v6.0+ is installed in the project root

Installation

The plugin will grab all the necessary configuration for you project and inject it into main.js file inside your .storybook directory. The configuration consists of the complete craco config returned from ScandiPWA.

1. Navigate to the project root directory

2. Run an installation script

npx scandipwa-storybook-plugin

(back to top)

Test the story

To add a Scandipwa component to your Storybook UI -- use the example below:

Override ScandiPWA component

Note: you must have Scandipwa CLI be installed to be able to override components from console. In order you don't have one -- install it or override component manually.

Run scandipwa override component <scandipwa_component> script in a console. It will create a component directory inside your src folder.

Replace <scandipwa_component> with the component name defined inside the ScandiPWA component library

Example:

1. Run scandipwa override component RangeSelector in a console

2. Choose things to extend in RangeSelector.component.js: Select RangeSelector by pressing

3. What would you like to do with styles?

Keep - use predefined styling;

Extend - use predefined styling with ability to apply a new ones;

Override - Create a completely new styling file without keeping predefined ones.

Create a story for a component

Inside your src/stories directory create a file <scandipwa_component>.stories.js. Test your component by writting an apropriate story for it. From this point you're good to go.

In the case of our previous example the file would be named RangeSelector.stories.js.

Run yarn storybook or npm run storybook script to start your Storybook UI.

(back to top)

Story example

Note: Replace <root_dirname> placeholder inside component and stories files to whatever your root directory name is in CamelCase. For example: scandi-storybook-project -> ScandiStorybookProject src/component/RangeSelector/RangeSelector.component.js:

import {
 RangeSelector as SourceRangeSelector
} from 'SourceComponent/RangeSelector/RangeSelector.component';
/** @namespace <root_dirname>/Component/RangeSelector/Component/RangeSelectorComponent */
export class RangeSelectorComponent extends SourceRangeSelector {
 // TODO implement logic
}
export default RangeSelectorComponent;

src/stories/RangeSelector.stories.js:

/* eslint-disable @scandipwa/scandipwa-guidelines/jsx-no-props-destruction */
import React from 'react';
import RangeSelector from '../component/RangeSelector/RangeSelector.component';
export default {
 title: 'ScandiPWA/RangeSelector',
 component: RangeSelector
};
/** @namespace <root_dirname>/Stories/RangeSelector/Stories/RangeSelectorDefault */
export const RangeSelectorDefault = () => (
 <RangeSelector
 value={ 14 }
 minValue={ 1 }
 maxValue={ 20 }
 onChangeComplete={ null }
 />
);

Note: Copying the code might cause an issue with eslint rules defined by ScandiPWA. The conflicts are mostly spacing issues. To solve them, please use any ESLint extension for your IDE that allow to spectate and fix the issues automatically. Also make sure you have one empty line at the end of your file.

The output of the Storybook UI

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

1. Fork the Project

2. Create your Feature Branch (git checkout -b feature/AmazingFeature)

3. Commit your Changes (git commit -m 'Add some AmazingFeature')

4. Push to the Branch (git push origin feature/AmazingFeature)

5. Open a Pull Request

(back to top)

Acknowledgments

This might be helpful for you:

• ScandiPWA docs

• Storybook docs

(back to top)

Troubleshooting

You may have an error related to webpack-i18n-import-loader. This one is currently under resolving.

Temporary solve

• Go to the node_modules/@scandipwa/webpack-i18n-runtime/build-config/config.plugin.js in your project root directory;
• Find an addImportInjector function;
• Change a line loader: 'webpack-i18n-import-loader' to loader: require.resolve('./webpack-i18n-import-loader')