ReX React UI Component: storybook-inspect-jsx

This project is part of ReX Design System and it can be used to create UI Components compatible with:

React, HTML/CSS and Vue.js

How to install

npm install @rakuten-rex/[email protected] --save

yarn add @rakuten-rex/[email protected]

Getting started

Storybook Live examples

For a complete guide of properties for React and HTML classes please visit our Storybook page:

https://rakuten-rex.github.io/storybook-inspect-jsx/

Storybook features

• [x] Stories by component types
• [x] HTML raw output
• [x] JSX output
• [x] Stories source code
• [x] Knobs with multiple options

Storybook integration

Register

Add this line at the end of the content of .storybook/addons.js.

import '@rakuten-rex/storybook-inspect-jsx/register';

Story

The addon use the original story to get the original JSX of a React component by using jsx-to-string and show it into the panels tab, after that it returns the original story without any changes.

Example:

Using MyComponent.stories.jsx:

import { withInspectJsx } from '@rakuten-rex/storybook-inspect-jsx';

const stories = storiesOf('MyComponent', module);
stories.addDecorator(withInspectJsx); // <-- First decorator
stories.addDecorator(withKnobs);
stories.addDecorator(withA11y);
...

Documentation, source code and distribution

|| Site | URL | |-------------| ------------- | ------------- | || Github (Source Code) | https://github.com/rakuten-rex | || NPM (Package distribution) | https://www.npmjs.com/org/rakuten-rex | || ZeroHeight (Documentation) | https://zeroheight.com/390c074f3 |

Project Stack

| Front-end | |-------------| | HTML5 CSS3 & Sass JavaScript ES6 React |

| Tools | |-------------| | webpack Storybook Babel ESLint Prettier |

Features

| Styles features | JavaScript features | |-------------|-------------| | Theme support via CSS variables | React components splitted by type | | Static CSS styles available for HTML/VueJS/AngularJS | Universal Module Definition support | | Sass mixins for custom builds | | Reset CSS styles already bundled by HTML tags | | Removed duplicated CSS props | | CSS classes prefix rex- |

Browser Support

| PC | Mobile |-------------|-------------| | Chrome 49+ | iOS 9+ (Safari 9.3+, Chrome 78+) | | Safari 9.1+ | Android 6+ (Chrome 78+, Android Browser 76+) | | Firefox 31+ | | | MS Edge 15+ | | | IE 11+ | |