steveruizok

Button*

  unlocked*
    default*
      mouseEnter -> hovered

    hovered
      mouseLeave -> default
      mouseDown -> pressed

steveruizok

switch
  off*
    turn_on -> on
  on
    turn_off -> off

steveruizok

form
  empty
    textEnter -> ready
    emptySubmit -> warn
  success
    textEnter -> ready
    emptySubmit -> warn
  warn
    textEnter -> ready
  ready

steveruizok

tape_recorder
  playing
    playing_default*
      pause -> play_paused
      stop -> stopped
      fast_rewind -> play_rewinding
      fast_forward -> play_forwarding
    play_paused
      stop -> stopped
      resume -> playing

steveruizok

Search Machine
  Empty
    focusInput -> InputFocused
    searchByLocation -> LoadingResults
    NoLocation*
      getLocation -> HasLocation
    HasLocation
      loseLocation -> NoLocation
  InputFocused
    changeInput -> Loading

steveruizok

Search Machine Preloaded
  Empty
    focusInput -> InputFocused
    searchByLocation -> LoadingResults
    NoLocation*
      getLocation -> HasLocation
    HasLocation
      loseLocation -> NoLocation
  InputFocused
    changeInput -> Loading

steveruizok

const path = require("path");

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    loaders: [
      require.resolve("awesome-typescript-loader")
    ],
    enforce: "pre"
  });

steveruizok

<script src="./build/app.js"></script>

steveruizok

import React from "react";

const debounce = (func, delay) => {
  let inDebounce;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(inDebounce);
    inDebounce = setTimeout(() => func.apply(context, args), delay);
  };

steveruizok

static propertyControls: PropertyControls = {
  align: {
    type: ControlType.SegmentedEnum,
    options: ["left", "center", "right", "justify"],
    optionTitles: ["L", "C", "R", "J"],
    title: "Align"
  }
}