Add demo component src / basic demo page to web

[aaronlademann-wf]

All the demo components that I've been building in the gh-pages branch should live in master as well, with a more simplistic "demo" page that can be served using nothin' but

pub serve

This way, contributors / consumers can pull down the repo and play around with components built using the over_react library.

This PR is a squash of all the gh-pages work, excluding the jekyll / public docs site stuff, plus a new web/index.dart and web/index.html file to generate a basic demo.

Testing

1. Pull this branch, and run pub get && pub serve.
2. Open localhost:8080 in both Chrome and Chromium to verify that the demos render as expected.
3. Verify that test coverage statistics are not effected by these new files added to web/

---

FYA: @jacehensley-wf @greglittlefield-wf @clairesarsam-wf @joelleibow-wf

[aviary-wf]

Raven

Number of Findings: 0

[jacehensley-wf]

Just some small changes, it was a great idea to expose these on the main repo!

[jacehensley-wf]

Can these be there own libraries? It is the preferred way of organizing packages: https://www.dartlang.org/guides/libraries/create-library-packages#organizing-a-library-package.

[aaronlademann-wf]

@jacehensley-wf yeah, they could - I just prefer parts :(

It's just much easier to ensure that all components in a lib are exposed for thinks like linking to stuff in dartdoc comments, etc... without having to flood your file with a ton of imports.

In the case of these demos - since their source code gets copied into a .html include in the gh-pages branch, and is ultimately what is displayed in the docs - I'd like to continue using parts so that there is one line at the top of the code example, instead of 3-7 import lines. Just makes the source code examples read so much easier.

[jacehensley-wf]

I was more just talking about the example methods, which don't have doc comments. But I am fine with leaving it like this.

[jacehensley-wf]

Lots of extra new lines 😄

[jacehensley-wf]

Why do these need click handlers?

[jacehensley-wf]

Oh I see to make them <button>s

[jacehensley-wf]

#nit The outline variation names should have _OUTLINE added to the end.

[jacehensley-wf]

href and target should get forwarded automatically.

[aaronlademann-wf]

Won't work since they are within ButtonProps - which is consumed by default.

[jacehensley-wf]

Could just be an abstract getter

[aaronlademann-wf]

target is not in UbiquitousDomPropsMixin

[jacehensley-wf]

Could just be an abstract getter

[aaronlademann-wf]

href is not in UbiquitousDomPropsMixin

[jacehensley-wf]

Could just be an abstract getter

[aaronlademann-wf]

target is not in UbiquitousDomPropsMixin

[jacehensley-wf]

href and target should be forwarded automatically.

[aaronlademann-wf]

Won't work since they are within ListGroupItemProps - which is consumed by default.

[jacehensley-wf]

Why does this need to be split out into a method?

[aaronlademann-wf]

@jacehensley-wf it's just an architectural thing that I've started leaning towards since consumers of WSD have been having difficulties extending components to build slight variations.

Placing the classes of a root node in a method on the component allows the consumer to then build something slightly different, simply by overriding, instead of having to nest a component within another component (which is less performant).

To make it truly worthwhile - components should also be set up like this - so that, for example, building a slightly different button (like a stateful toggle button) - can be done more easily:

@Component()
class ButtonComponent<T extends ButtonProps, S extends UiState> 
    extends UiStatefulComponent<T, S> {
  // ...

  @override
  render() {
    return renderButton(props.children);
  }

  ReactElement renderButton(dynamic children) {
    BuilderOnlyUiFactory<DomProps> factory = _buttonDomNodeFactory;

    return (factory()
      ..addProps(copyUnconsumedDomProps())
      ..className = getButtonClasses().toClassName()
      ..href = props.href
      ..target = props.target
      ..type = _type
      ..disabled = _isAnchorLink ? null : props.isDisabled
      ..addProps(ariaProps()
        ..disabled = _isAnchorLink ? props.isDisabled : null
      )
    )(children);
  }

  ClassNameBuilder getButtonClasses() {
    return forwardingClassNameBuilder()
      ..add('btn')
      ..add('btn-block', props.isBlock)
      ..add('active', _isActive)
      ..add('disabled', props.isDisabled)
      ..add(props.skin.className);
  }
}

@Component(subtypeOf: ButtonComponent)
class ToggleButtonComponent 
    extends ButtonComponent<ToggleButtonProps, ToggleButtonState> {
  // ...

  // Instead of having to nest a full-blown Button() component within render, 
  // I can just override the root node classes, and call the root node 
  // rendering method to get the same result.

  @override
  render() {
    return renderButton(
      [
        renderInput(),
        props.children
      ]
    );
  }

  @override
  ClassNameBuilder getButtonClasses() {
    return super.getButtonClasses()
      ..add('btn--toggle');
  }
}

I've been meaning to bring it up with the team - since I feel it's definitely something we should consider for WSD, but I haven't gotten around to it.

Also - the component example above is not in this PR, its part of the stateful toggle button component demo I started working on, but haven't had time to finish yet.

[codecov-io]

Current coverage is 96.97% (diff: 100%)

Merging #5 into master will not change coverage

@@             master         #5   diff @@
==========================================
  Files            26         26          
  Lines          1186       1186          
  Methods           0          0          
  Messages          0          0          
  Branches          0          0          
==========================================
  Hits           1150       1150          
  Misses           36         36          
  Partials          0          0          

Powered by Codecov. Last update 58682a4...8c4fe7d

[jacehensley-wf]

+1

[leviwith-wf]

• Demos render as expected.

+10

[colefeisthamel-wf]

RM +1 manually reviewed dependencies