xod/packages/xod-client/stories/Modals.jsx

import React from 'react';
import { SkyLightStateless } from 'react-skylight';
import { Line as ProgressBar } from 'rc-progress';

import { storiesOf } from '@storybook/react';

import '../src/core/styles/main.scss';

storiesOf('Modal (SkyLight)', module)
  .addDecorator(story => (
    <div>
      {story()}
    </div>
  ))
  .add('default', () => (
    <SkyLightStateless
      isVisible
      title="Popup title"
    >
      The actual content is not styled
    </SkyLightStateless>
  ))
  .add('unclosable', () => (
    <SkyLightStateless
      isVisible
      isClosable={false}
      title="Popup title"
    >
      You cant close me! Ha-ha-ha!
    </SkyLightStateless>
  ))
  .add('with some content', () => (
    <SkyLightStateless
      isVisible
      title="Popup title"
    >
      <div className="ModalBody">
        <div className="ModalContent">
          Spawn new workspace in <code>~/xod</code>?
        </div>
        <div className="ModalFooter">
          <button className="Button">Ok</button>
          <button className="Button">Cancel</button>
        </div>
      </div>
    </SkyLightStateless>
  ))
  .add('with some light content', () => (
    <SkyLightStateless
      isVisible
      title="Popup title"
    >
      <div className="ModalBody ModalBody--light">
        <div className="ModalContent">
          Spawn new workspace in <code>~/xod</code>?
        </div>
        <div className="ModalFooter">
          <button className="Button Button--light">Ok</button>
          <button className="Button Button--light">Cancel</button>
        </div>
      </div>
    </SkyLightStateless>
  ))
  .add('with some code', () => (
    <SkyLightStateless
      isVisible
      title="Transpiled code"
    >
      <textarea className="Codebox" value="console.log('Hello world');" />
      <div className="ModalBody ModalBody--light">
        <div className="ModalFooter">
          <button className="Button Button--light">Copy</button>
        </div>
      </div>
    </SkyLightStateless>
  ))
  .add('with a form', () => (
    <SkyLightStateless
      isVisible
      title="Create new patch"
    >
      <form>
        <div className="ModalBody">
          <div className="ModalContent">
            Enter the new patch name
            <input
              className="inspectorTextInput"
              style={{ display: 'block', width: '100%' }}
              autoFocus
            />
            <span className="helpText">Here are some validation rules</span>
          </div>
          <div className="ModalFooter">
            <button
              type="submit"
              className="Button"
            >
              Create
            </button>
            <button
              className="Button"
            >
              Cancel
            </button>
          </div>
        </div>
      </form>
    </SkyLightStateless>
  ))
  .add('with mixed conntent', () => (
    <SkyLightStateless
      isVisible
      title="Setup Arduino IDE"
    >
      <div className="ModalBody ModalBody--light">
        <div className="ModalContent">
          <p>
            <strong>Could not find Arduino IDE executable.</strong>
          </p>
          <p>
            <button className="Button Button--light">
              Point to installed Arduino IDE
            </button>
          </p>
          <hr />
          <p>
            <strong>Don&apos;t have an installed Arduino IDE?</strong><br />
            You need an installed Arduino IDE to compile and upload XOD programs to Arduino boards.
          </p>
          <button className="Button Button--light">
            Download & install Arduino IDE
          </button>
        </div>
      </div>
    </SkyLightStateless>
  ))
  .add('with project selector (dark)', () => (
    <SkyLightStateless
      isVisible
      title="Select project"
    >
      <div className="ModalBody ModalBody">
        <div className="ModalContent">
          <ul className="ProjectList">
            <li className="project">
              <button>
                <p className="name">my-project</p>
                <p className="path">
                  <span>Path:</span>
                  ~/my-workspace/my-project
                </p>
              </button>
            </li>
            <li className="project">
              <button>
                <p className="name">xello-xorld</p>
                <p className="path">
                  <span>Path:</span>
                  ~/my-workspace/xello-xorld
                </p>
              </button>
            </li>
            <li className="error">
              <div>
                <p className="path">
                  <span>Path:</span>
                  ~/my-workspace/oops
                </p>
                <p className="message">
                  Something is wrong with this project!
                </p>
              </div>
            </li>
            <li className="project">
              <button>
                <p className="name">my-other-project</p>
                <p className="path">
                  <span>Path:</span>
                  ~/my-workspace/my-other-project
                </p>
              </button>
            </li>
          </ul>
        </div>
        <div className="ModalFooter">
          <button className="Button Button">Switch workspace</button>
          <button className="Button Button">Create new project</button>
        </div>
      </div>
    </SkyLightStateless>
  ))
  .add('with progress bar', () => (
    <SkyLightStateless
      isVisible
      title="Uploading to Arduino"
    >
      <div className="ModalBody">
        <ProgressBar
          percent={50}
          strokeWidth="5"
          strokeColor="#80c422"
          strokeLinecap="square"
          trailWidth="5"
          trailColor="#373737"
          className="ProgressBar"
        />
        <div className="ModalFooter">
          something is going on
        </div>
      </div>
    </SkyLightStateless>
  ));