📷 Create Storybook Stories for our Components

[jasonLaster]

We've recently adopted storybook and percy for visually testing our components. The stories are written like unit tests and are available in the storybook viewer yarn storybook. It would be great if we could write storybook stories for all of our components. This will help us have a great environment for UI development and stop visual regressions from happening.

Example

  storiesOf("Frames", module)
    .add(`simple frame (${optionLabel})`, () => {
      const frame = {
        id: 1,
        source: { url: "foo-view.js" },
        displayName: "renderFoo",
        library: false,
        location: { line: 10, url: "foo-view.js" }
      };

      return FrameFactory({ frame }, option);
    })

GIF

Checklist

• [ ] App.js
• [x] Outline.js
• [ ] ProjectSearch.js
• [ ] WhyPaused.js
• [ ] Editor
  • [ ] Breakpoint.js
  • [ ] ColumnBreakpoint.js
  • [ ] ConditionalPanel.js
  • [ ] EditorMenu.js
  • [ ] Footer.js
  • [ ] GutterMenu.js
  • [ ] HitMarker.js
  • [x] Preview.js
  • [ ] SearchBar.js
  • [x] Tabs.js
  • [ ] index.js
• [ ] SecondaryPanes
  • [x] Breakpoints.js
  • [ ] ChromeScopes.js
  • [ ] CommandBar.js
  • [ ] EventListeners.js
  • [ ] Expressions.js
  • [ ] Frames
  • [x] Frame.js
  • [ ] Group.js
  • [ ] index.js
• [ ] Scopes.js
• [ ] WhyPaused.js
• [ ] index.js
• [ ] Sources.js
• [ ] SourcesTree.js
• [ ] WelcomeBox.js
• [ ] Shared
  • [ ] Accordion.js
  • [ ] Autocomplete.js
  • [ ] Close.js
  • [ ] PaneToggle.js
  • [ ] Dropdown.js
  • [x] ManagedTree.js
  • [ ] ObjectInspector.js
  • [ ] Popover.js
  • [ ] Rep.js
  • [x] ResultList.js
  • [x] SearchInput.js
  • [ ] Svg.js
  • [x] previewFunction.js
  • [ ] Preview.js

[jasonLaster]

We now have many stories which is great, i'm going to close the tracking issue