MykolaGolubyev

import * as React from 'react';

import { Registry, simulateState } from 'react-component-viewer';
import { LabeledCheckBox } from './LabeledCheckBox';

const [getCheckBoxValueA, setCheckBoxValueA] = simulateState(true);
const [getCheckBoxValueB, setCheckBoxValueB] = simulateState(false);

export function labeledCheckBoxDemo(registry: Registry) {
  registry

MykolaGolubyev

import * as React from 'react';

import { Registry, simpleAction } from 'react-component-viewer';
import { Button } from './Button';

const onClick = simpleAction('clicked');

export function buttonsDemo(registry: Registry) {
  registry
    .add('primary button', () => (

MykolaGolubyev

export class MyAppComponentViewer extends React.Component {
  render() {
    return (
      <ComponentViewer
        registries={registries}
        dropDown={{
          label: 'Brand',
          items: [
            {label: 'Brand One', hotKey: 'Alt 1'},
            {label: 'Brand Two', hotKey: 'Alt 2'}

MykolaGolubyev

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import App from './App';

if (process.env.NODE_ENV === 'production') {
  ReactDOM.render(<App />, document.getElementById('root'));
} else {
  const {ComponentViewer} = require('react-component-viewer');
  ReactDOM.render(<ComponentViewer .../>, document.getElementById('root'));

MykolaGolubyev

import { Registries, WrapperProps } from 'react-component-viewer';

const registries = new Registries({componentWrapper: DemoWrapper});
registries.add('components')
  .registerAsGrid('Links', 300, linksDemo)
  .registerAsTwoColumnTable('Buttons', buttonsDemo)
  .registerAsRows('Inputs', inputsDemo);

function DemoWrapper({OriginalComponent}: WrapperProps) {
  return (

MykolaGolubyev

export function buttonsDemo(registry: Registry) {
  registry
    .add('primary', () => <Button primary label="click me" onClick={onClick}/>)
    .add('secondary', () => <Button label="click me" onClick={onClick}/>);
}

MykolaGolubyev

import { Registries, WrapperProps } from 'react-component-viewer';

const registries = new Registries({componentWrapper: DemoWrapper});
registries.add('components', {componentWrapper: WidgetsWrapper})
  .registerAsGrid('Links', 300, linksDemo)
  .registerAsTwoColumnTable('Buttons', buttonsDemo)
  .registerAsRows('Inputs', inputsDemo);

function WidgetsWrapper({OriginalComponent}: WrapperProps) {
  return (

MykolaGolubyev

const registries = new Registries();
registries.add('components')
  .registerAsTwoColumnTable('Buttons', buttonsDemo)

MykolaGolubyev

import { Registries, ComponentViewer } from 'react-component-viewer';

const registries = new Registries();
registries.add('components')
  .registerAsGrid('Links', 300, linksDemo)
  .registerAsTwoColumnTable('Buttons', buttonsDemo)
  .registerAsRows('Inputs', inputsDemo);

registries.add('layouts')
  .registerSingle('Side by Side', sideBySideDemo);

MykolaGolubyev

scenario("simple get") {
    http.get("/weather") {
        temperature.shouldBe < 100
    }
}