nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    react-native-storysource-transformer

    0.0.5 • Public • Published

    react-native-storysource-transformer Build Status

    Enables storybook storysource addon for react-native.

    Purpose

    This package makes storysource addon compatible with react-native which is not supported by default.

    Storybook Screenshot

    Installation and configuration

    Step 1 : install react-native-storysource-transformer library

    yarn add react-native-storysource-transformer --dev

    Step 2 : Configure the react native packager

    For React Native v0.58 or newer

    Merge your metro.config.js file with this config :

    metro.config.js:

    module.exports = {
      transformer: {
        babelTransformerPath: require.resolve(
          "react-native-storysource-transformer"
        ),
      },
    };

    If you already use another transformer, you can reference an intermediate file like this :
    metro.customTransformer.js :

    const svgTransformer = require("react-native-svg-transformer");
    const storyTransformer = require("react-native-storysource-transformer");
    
    module.exports.transform = function (options) {
      if (options.filename.endsWith(".svg")) {
        return svgTransformer.transform(options);
      } else {
        return storyTransformer.transform(options);
      }
    };

    Step 3 : install storysource addon

    Install storysource addon and source-loader dependencies:

    yarn add @storybook/addon-storysource --dev
    yarn add @storybook/source-loader --dev

    Add this line in your storybook/addons.js file :

    import "@storybook/addon-storysource/register";

    Step 4 (optional) : custom config

    react-native-storysource-transformer is controlled by the react-native-storysource-transformer section of the project's package.json.

    Options

    Setting Type Description Default
    filePatterns string[] An array of blobs to match your stories files. ["**/*.stories.{js,ts}{x,}", "**/stories/index.{js,ts}{x,}"] will match all files named *.stories.js/jsx/ts/tsx and the default index story file
    storyMatcher (Advanced) string A regular expression used to parse a story. May be needed if your stories are not written using the usual convention : storiesOf('Welcome', module).add(... "(storiesOf.*?\\(.*?module\\))"

    Examples:

    Example below will handle every stories ending with .stories.js or .stories.jsx.

    package.json
    {
      "name": "AwesomeProject",
      "config": {
        "react-native-storysource-transformer": {
          "filePatterns": ["**/*.stories.js", "**/*.stories.jsx"]
        }
      }
    }

    You may need to run yarn react-native start --reset-cache if you change any of these options.

    Start

    Run your storybook server and your storybook app as usual :

    yarn storybook
    react-native run-ios

    Install

    npm i react-native-storysource-transformer

    DownloadsWeekly Downloads

    4

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • fabien88