Chore/kill yalc with fire (#629)

* init * more shifting * Move @babel dependencies up to workspace root * Begin updating dependent libraries to use sync'd webpack builds w/ watches * Commit changes before a long weekend * Split packages into platform and extensions * Consolidate how/where we specify file/module type entrypoints * Make it possible to pass in extensions as App props * Resolve viewer's modules * Target for UMD bundle * Add Webpack Stylus loader * Provide WebPack build options for microscopy, vtk, and ui * Better entrypoint for extensions * Push changes up to switch PCs * Fix ESM symlink build for Viewers * Shift docs to root * Specify additional lerna config props * Begin providing basic readme info * Rename example extension folder * Shift links to bottom of doc * First attempt at a netlify deploy preview * Attempt to fix deploy preview build * push workspace enabled to initial command; remove second yarn install; use npx to call gitbook cli commands * Try to use global gitbook-cli * Export node_modules path * More agressive with modifying PATH * Follow deploy log output advice * try again to set bin path * Try swapping bash with a new shell * Try bash -l instead of exec bash * Annd let's try again * and again * We may have figured it out johnny, boy * We need to pull cornerstone-wado-image-loader files from hoisted node_modules * Attempt to fix ticks/escapes * Change copy syntax; try running tests on viewers from root for circleci * Lower version to match circleci image * Try alternative jest-canvas-mock location and version file syntax * Run version command instead of calling node directly * Try alternative jest transform * Set path and enable workspaces * Add codecov flags * Use cpx so our copying finishes? * Get all platform unit tests to run * Run and report individually and in parallel * Try once relying on codecov yaml to split w/ flags * Add projects to split by flags * Generate separate reports * Trigger codecov after everything has finished running; these may not support flags * Use recommended flags from issue comments for codecov * Fix typo * Remove clear flag * Shift back to calling codecov from root * Generate example for codecov issue * Try fixing paths * Simplify * Try using codecov orb * Bump circleci version * Upload core and viewer * Use full string paths * Remove individual codecov calls * Fix dir * Combine files before upload * Escape anchors * tryfix syntax * Escape string literal * Combine lines to reduce path * long paths * Use home alias * Fix filename * Try to see the contents of our cat'd file * Also upload `core` * Try running with aliased folder * Fix path; split PR and Merge unit tests into separate jobs * Set default threshold * Fix typo * Changing to scoped package names * Adding note * Catch more updates * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.0 - @ohif/extension-dicom-html@0.0.4-alpha.0 - @ohif/extension-dicom-microscopy@0.0.9-alpha.0 - @ohif/extension-dicom-pdf@0.0.8-alpha.0 - @ohif/extension-vtk@0.1.4-alpha.0 - @ohif/core@0.11.1-alpha.0 - @ohif/i18n@0.2.3-alpha.0 - @ohif/ui@0.2.18-alpha.0 - @ohif/viewer@0.0.22-alpha.0 * Clean up primary readme * Support for dev and dev:* commands * Shift build command; satisfy default PWA build * Remove old scripts * Clean up UI to set webpack scripts * Tidy up project links * Clean duplicate code in UI project * Update UI project's docs * Clean up ui and i18n config * Reduce duplicate code in `@ohif/core` * Fix @ohif/ui versions * bump @ohif/core versions * Redux testkit dep * Remove unused/duplicate config files for projects/packages * ohif-core --> @ohif/core * Safer publish command * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.1 - @ohif/extension-dicom-html@0.0.4-alpha.1 - @ohif/extension-dicom-microscopy@0.0.9-alpha.1 - @ohif/extension-dicom-pdf@0.0.8-alpha.1 - @ohif/extension-vtk@0.1.4-alpha.1 - @ohif/core@0.11.1-alpha.1 - @ohif/i18n@0.2.3-alpha.1 - @ohif/ui@0.2.18-alpha.1 - @ohif/viewer@0.0.22-alpha.1 * test version bump * Add global prettier config * chore(release): publish %s [skip ci] - @ohif/viewer@0.0.22-alpha.2 * test lerna publish * Update package.jsons * Fix build scripts * catch changes * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.2 - @ohif/extension-dicom-html@0.0.4-alpha.2 - @ohif/extension-dicom-microscopy@0.0.9-alpha.2 - @ohif/extension-dicom-pdf@0.0.8-alpha.2 - @ohif/extension-vtk@0.1.4-alpha.2 - @ohif/core@0.11.1-alpha.2 - @ohif/i18n@0.2.3-alpha.2 - @ohif/ui@0.2.18-alpha.2 - @ohif/viewer@0.0.22-alpha.3 * fix eslint issues caused by eslint 6 and our react-app config * Publish with canary tag * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.3 - @ohif/extension-dicom-html@0.0.4-alpha.3 - @ohif/extension-dicom-microscopy@0.0.9-alpha.3 - @ohif/extension-dicom-pdf@0.0.8-alpha.3 - @ohif/extension-vtk@0.1.4-alpha.3 - @ohif/core@0.11.1-alpha.3 - @ohif/i18n@0.2.3-alpha.3 - @ohif/ui@0.2.18-alpha.3 - @ohif/viewer@0.0.22-alpha.4 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.4 - @ohif/extension-dicom-html@0.0.4-alpha.4 - @ohif/extension-dicom-microscopy@0.0.9-alpha.4 - @ohif/extension-dicom-pdf@0.0.8-alpha.4 - @ohif/extension-vtk@0.1.4-alpha.4 - @ohif/core@0.11.1-alpha.4 - @ohif/i18n@0.2.3-alpha.4 - @ohif/ui@0.2.18-alpha.4 - @ohif/viewer@0.0.22-alpha.5 * Simplify build * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.5 - @ohif/extension-dicom-html@0.0.4-alpha.5 - @ohif/extension-dicom-microscopy@0.0.9-alpha.5 - @ohif/extension-dicom-pdf@0.0.8-alpha.5 - @ohif/extension-vtk@0.1.4-alpha.5 - @ohif/core@0.11.1-alpha.5 - @ohif/i18n@0.2.3-alpha.5 - @ohif/ui@0.2.18-alpha.5 - @ohif/viewer@0.0.22-alpha.6 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.6 - @ohif/extension-dicom-html@0.0.4-alpha.6 - @ohif/extension-dicom-microscopy@0.0.9-alpha.6 - @ohif/extension-dicom-pdf@0.0.8-alpha.6 - @ohif/extension-vtk@0.1.4-alpha.6 - @ohif/core@0.11.1-alpha.6 - @ohif/i18n@0.2.3-alpha.6 - @ohif/ui@0.2.18-alpha.6 - @ohif/viewer@0.0.22-alpha.7 * Split version and publish * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.7 - @ohif/extension-dicom-html@0.0.4-alpha.7 - @ohif/extension-dicom-microscopy@0.0.9-alpha.7 - @ohif/extension-dicom-pdf@0.0.8-alpha.7 - @ohif/extension-vtk@0.1.4-alpha.7 - @ohif/core@0.11.1-alpha.7 - @ohif/i18n@0.2.3-alpha.7 - @ohif/ui@0.2.18-alpha.7 - @ohif/viewer@0.0.22-alpha.8 * Try simplify netlify build * react-viewerbase --> @ohif/ui * add test for stylus loader * Try new way to specify publish path * Use an output folder that won't be ignored * Try move command * fiddle with paths * Dig for some information * Make sure we're in root for our commands * Remove discovery * Setup script-tag example * Fix typo * Move config folder * Update cornerstone extension to use shared/root webpack configs * capture changes * Update extension webpack configs * Don't check in docz output * Fix babel runtime resolution issue * Simplify ui build steps * Push in progress * Shift directories * Get viewer dev path to work * Fix viewer commonjs build * Fix build pwa config for viewers * Make sure our package specific command can be called from root * Update notes * Fix imports and misc. merge notes * Bump wado-image-loader version * Switch up commands to remove webworkers copy * Fix CI config * Fix more broken package references * Add react-dropzone * Persist so e2e test can use * Fix lockfile * Use cypress orb to simplify CI * Fix config * Try again * Install yarn latest for orb * Install yarn a different way * Wait on correct port * Run tests in viewer project * Fix cypress config * Make Cypress happier - use default location * Simplify e2e testing * Capture UI changes since fork * Catch core up * Grab latest deps after merge * Fix broken import * Make sure cornerstone-wado-image-loader resolves to 3+ * Note regarding orbs * Fix refresh on 404 routes * Fix odd error for cornerstone-wado-image-loader * Different target for UMD * Simplify dev script * Try to get fancy with netlify output * Let's do it again * Try to fix measurementTools issue * See if we can get our lerna magic to work on merge to monorepo branch
2019-08-13 15:36:46 -04:00
1 parent cac911f08e
commit 08ff214ea6
@@ -0,0 +1,86 @@
+.dd-menu {
+  float: left;
+  margin-right: 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.dd-title {
+  font-size: 13px;
+}
+
+.dd-menu-toggle {
+  display: inline-block;
+}
+
+.dd-caret-down {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}
+
+.dd-menu-list {
+  position: absolute;
+  top: 100%;
+  margin-top: 10px;
+  background: white;
+  z-index: 999;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  overflow: hidden;
+  transition: all 300ms ease;
+  -webkit-transition: all 300ms ease;
+  -moz-transition: all 300ms ease;
+  -ms-transition: all 300ms ease;
+  -o-transition: all 300ms ease;
+}
+
+.dd-menu-list.open {
+  display: inline-block;
+}
+
+.dd-menu-list.left {
+  left: 0;
+}
+
+.dd-menu-list.right {
+  right: 0;
+}
+
+.dd-menu-list.center {
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+}
+
+.dd-item {
+  display: flex;
+  color: var(--text-color-active);
+  padding: 10px 15px;
+  border-bottom: 1px solid #ccc;
+}
+
+.dd-item:hover {
+  text-decoration: none;
+  background: #eee;
+}
+
+.dd-item:last-child {
+  border-bottom: none;
+}
+
+.dd-item-icon {
+  margin-right: 10px;
+  margin-top: 2px;
+}
@@ -0,0 +1,133 @@
+import './DropdownMenu.css';
+
+import React, { Component } from 'react';
+
+import { Icon } from '../Icon';
+import PropTypes from 'prop-types';
+
+class DropdownMenu extends Component {
+  state = {
+    open: false,
+  };
+
+  static propTypes = {
+    titleElement: PropTypes.node,
+    title: PropTypes.string,
+    align: PropTypes.oneOf(['left', 'center', 'right']),
+    /** Items to render in the select's drop down */
+    list: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        icon: PropTypes.object,
+        onClick: PropTypes.func,
+        link: PropTypes.string,
+      })
+    ),
+  };
+
+  getListItems = () => {
+    const { list, align } = this.props;
+
+    return list.map(({ icon, title, link, onClick }, key) => {
+      if (link) {
+        return (
+          <a
+            href={link || '#'}
+            key={key}
+            className="dd-item"
+            onClick={() => this.handleOnClick(onClick)}
+          >
+            {icon && <Icon {...icon} className="dd-item-icon" />}
+            <span>{title}</span>
+          </a>
+        );
+      } else {
+        return (
+          <button
+            key={key}
+            className="dd-item"
+            onClick={() => this.handleOnClick(onClick)}
+          >
+            {icon && <Icon {...icon} className="dd-item-icon" />}
+            <span>{title}</span>
+          </button>
+        );
+      }
+    });
+  };
+
+  renderList = () => {
+    const { align } = this.props;
+
+    if (!this.state.open) {
+      return null;
+    }
+
+    return (
+      <div className={`dd-menu-list ${align || 'left'}`}>
+        {this.getListItems()}
+      </div>
+    );
+  };
+
+  handleOnClick = onClick => {
+    this.toggleList();
+
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  handleMouseClick = e => {
+    if (this.node.contains(e.target)) {
+      return;
+    }
+
+    this.toggleList();
+  };
+
+  renderTitleElement = () => {
+    const { titleElement, title } = this.props;
+
+    if (titleElement) {
+      return titleElement;
+    }
+
+    return (
+      <React.Fragment>
+        <span className="dd-title">{title}</span>
+        <span className="dd-caret-down" />
+      </React.Fragment>
+    );
+  };
+
+  toggleList = () => {
+    const { open } = this.state;
+    let state = true;
+
+    document.addEventListener('mousedown', this.handleMouseClick, false);
+
+    if (open) {
+      document.removeEventListener('mousedown', this.handleMouseClick, false);
+      state = false;
+    }
+
+    this.setState({
+      open: state,
+    });
+  };
+
+  render() {
+    return (
+      <div className="dd-menu" ref={node => (this.node = node)}>
+        <div className="dd-menu-toggle" onClick={this.toggleList}>
+          {this.renderTitleElement()}
+        </div>
+
+        {this.renderList()}
+      </div>
+    );
+  }
+}
+
+export { DropdownMenu };
@@ -0,0 +1,8 @@
+.label-ohif {
+  font-size: 1em;
+  color: #ffffff;
+}
+
+.label-example {
+  background-color: var(--ui-gray-darker);
+}
@@ -0,0 +1,27 @@
+import './Label.css';
+
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+class Label extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.text };
+  }
+
+  render() {
+    return (
+      <label className="label-ohif" htmlFor={this.props.for}>
+        {this.props.text}
+      </label>
+    );
+  }
+}
+
+Label.propTypes = {
+  text: PropTypes.string.isRequired,
+  for: PropTypes.string,
+};
+
+export { Label };
@@ -0,0 +1,64 @@
+.range {
+  margin: 0;
+  width: 100%;
+  -webkit-appearance: none;
+}
+
+.range:focus {
+  outline: none;
+}
+
+.range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  cursor: pointer;
+  box-shadow: none;
+  background-color: var(--ui-border-color-dark);
+  border-radius: 0px;
+  border: 0px solid var(--ui-border-color-dark);
+}
+
+.range::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  cursor: pointer;
+  box-shadow: none;
+  background-color: var(--ui-border-color-dark);
+  border-radius: 0px;
+  border: 0px solid var(--ui-border-color-dark);
+}
+
+.range::-webkit-slider-thumb {
+  box-shadow: none;
+  border: 0px solid var(--active-color);
+  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
+  height: 21px;
+  width: 11px;
+  border-radius: 11px;
+  background: var(--active-color);
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -10px;
+}
+
+.range::-moz-range-thumb {
+  box-shadow: none;
+  border: 0px solid var(--active-color);
+  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
+  height: 21px;
+  width: 11px;
+  border-radius: 11px;
+  background: var(--active-color);
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -10px;
+}
+
+.range::-moz-focus-outer {
+  border: 0;
+}
+
+.range-example {
+  background: black;
+  height: 2em;
+}
@@ -0,0 +1,40 @@
+import './Range.css';
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Range extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: props.value };
+  }
+
+  handleChange = event => {
+    this.setState({ value: event.target.value });
+    if (this.props.onChange) this.props.onChange();
+  };
+
+  render() {
+    return (
+      <input
+        type="range"
+        value={this.state.value}
+        min={this.props.min}
+        max={this.props.max}
+        onChange={this.handleChange}
+        id={this.props.id}
+        className="range"
+      />
+    );
+  }
+}
+
+Range.propTypes = {
+  value: PropTypes.number,
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  id: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export { Range };
@@ -0,0 +1,46 @@
+.select-ohif {
+  display: block;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+  font-size: 0.8em;
+  font-weight: 600;
+  color: #444;
+  line-height: 1.3;
+  padding: 0.6em 1.4em 0.5em 0.8em;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid #aaa;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  border-radius: 0.5em;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+}
+
+.select-ohif::-ms-expand {
+  display: none;
+}
+
+.select-ohif:hover {
+  border-color: #888;
+}
+
+.select-ohif:focus {
+  border-color: #aaa;
+  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
+  box-shadow: 0 0 0 3px -moz-mac-focusring;
+  color: #222;
+  outline: none;
+}
+
+.select-ohif option {
+  font-weight: normal;
+}
@@ -0,0 +1,48 @@
+import './Select.css';
+
+import React, { Component } from 'react';
+
+import PropTypes from 'prop-types';
+
+class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.value };
+  }
+
+  handleChange = event => {
+    this.setState({ value: event.target.value });
+    if (this.props.onChange) this.props.onChange();
+  };
+
+  render() {
+    return (
+      <select
+        className="select-ohif"
+        value={this.state.selected}
+        onChange={this.handleChange}
+      >
+        {this.props.options.map(({ key, value }) => {
+          return (
+            <option key={key} value={value}>
+              {key}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+}
+
+Select.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export { Select };
@@ -0,0 +1,7 @@
+.textarea-ohif {
+  background-color: #b6b6b6;
+  border-color: #b6b6b6;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+  font-size: 1em;
+}
@@ -0,0 +1,39 @@
+import './TextArea.css';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class TextArea extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.value };
+  }
+
+  handleChange = event => {
+    this.setState({ value: event.target.value });
+    if (this.props.onChange) this.props.onChange();
+  };
+
+  render() {
+    return (
+      <textarea
+        className="textarea-ohif"
+        value={this.state.value}
+        rows={this.props.rows}
+        cols={this.props.cols}
+        onChange={this.handleChange}
+        id={this.props.id}
+      />
+    );
+  }
+}
+
+TextArea.propTypes = {
+  value: PropTypes.string,
+  rows: PropTypes.number,
+  cols: PropTypes.number,
+  id: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export { TextArea };
@@ -0,0 +1,7 @@
+.input-ohif {
+  background-color: #b6b6b6;
+  border-color: #b6b6b6;
+  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+  font-size: 1em;
+}
@@ -0,0 +1,36 @@
+import './TextInput.css';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class TextInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: props.value };
+  }
+
+  handleChange = event => {
+    this.setState({ value: event.target.value });
+    if (this.props.onChange) this.props.onChange();
+  };
+
+  render() {
+    return (
+      <input
+        className="input-ohif"
+        type="text"
+        value={this.state.value}
+        onChange={this.handleChange}
+        id={this.props.id}
+      />
+    );
+  }
+}
+
+TextInput.propTypes = {
+  value: PropTypes.string,
+  id: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export { TextInput };
@@ -0,0 +1,42 @@
+---
+name: Form / Dropdown Menu
+menu: Elements
+route: /elements/form-ddMenu
+---
+
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { DropdownMenu } from './../index.js';
+
+# Select
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      title: 'Test Title',
+      align: 'left',
+      list: [
+        {
+          title: 'Edit',
+          icon: {
+            name: 'edit',
+          },
+        },
+        {
+          title: 'Retry',
+          icon: {
+            name: 'reset',
+          },
+        },
+      ],
+    }}
+  >
+    {({ state, setState }) => <DropdownMenu {...state} />}
+  </State>
+</Playground>
+
+## API
+
+<Props of={DropdownMenu} />
@@ -0,0 +1,32 @@
+---
+name: Form / Label
+menu: Elements
+route: /elements/form-label
+---
+
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { Label } from './../index.js';
+
+# Label
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      text: 'This is a label',
+      for: '',
+    }}
+  >
+    {({ state, setState }) => (
+      <div className="label-example">
+        <Label {...state} />
+      </div>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={Label} />
@@ -0,0 +1,33 @@
+---
+name: Form / Range
+menu: Elements
+route: /elements/form-range
+---
+
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { Range } from './../index.js';
+
+# Range
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      value: 50,
+      min: 0,
+      max: 100,
+    }}
+  >
+    {({ state, setState }) => (
+      <div className="range-example">
+        <Range {...state} />
+      </div>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={Range} />
@@ -0,0 +1,39 @@
+---
+name: Form / Select
+menu: Elements
+route: /elements/form-select
+---
+
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { Select } from './../index.js';
+
+# Select
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      options: [
+        {
+          key: 'Option1',
+          value: '1'
+        },
+        {
+          key: 'Option2',
+          value: '2'
+        }
+      ],
+      value:'2'
+    }}
+  >
+
+    {({ state, setState }) => <Select {...state} />}
+
+  </State>
+</Playground>
+
+## API
+
+<Props of={Select} />
@@ -0,0 +1,29 @@
+---
+name: Form / Text Area
+menu: Elements
+route: /elements/form-textArea
+---
+
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { TextArea } from './../index.js';
+
+# Text Area
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+      rows: 10,
+      cols: 50,
+    }}
+  >
+    {({ state, setState }) => <TextArea {...state} />}
+  </State>
+</Playground>
+
+## API
+
+<Props of={TextArea} />
@@ -0,0 +1,27 @@
+---
+name: Form / Text Input
+menu: Elements
+route: /elements/form-textInput
+---
+
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { TextInput } from './../index.js';
+
+# Text Input
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{
+      value: 'test',
+    }}
+  >
+    {({ state, setState }) => <TextInput {...state} />}
+  </State>
+</Playground>
+
+## API
+
+<Props of={TextInput} />
@@ -0,0 +1,6 @@
+export { Select } from './Select.js';
+export { Label } from './Label.js';
+export { Range } from './Range.js';
+export { TextArea } from './TextArea.js';
+export { TextInput } from './TextInput.js';
+export { DropdownMenu } from './DropdownMenu.js';