scandipwa-storybook-plugin

    1.0.6 • Public • Published

    Logo

    ScandiPWA & Storybook plugin

    A plugin that makes your ScandiPWA based project compatible with Storybook


    Table of Contents
    1. Getting Started

    2. Test the story

    3. Story example

    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

    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:

    (back to top)

    Troubleshooting

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

    i18n-error

    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')

    Keywords

    none

    Install

    npm i scandipwa-storybook-plugin

    DownloadsWeekly Downloads

    10

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • plato2