reorganize packages, start converting overall app to react (very broken at the moment)

Packages/ohif-study-list/client/components/roundedButtonGroup/roundedButtonGroup.html

@@ -0,0 +1,24 @@
+<template name="roundedButtonGroup">
+    <div class="{{class}} roundedButtonGroup clearfix center-table">
+        {{#each item in this.options}}
+            <a class="roundedButtonWrapper noselect {{#if eq getValue item.value}}active{{/if}}" data-value="{{item.value}}">
+                <div class="roundedButton">
+                    {{#if item.svgLink}}
+                        <svg style="width: {{item.svgWidth}}px; height: {{item.svgHeight}}px">
+                            <use xlink:href="{{absoluteUrl item.svgLink}}"></use>
+                        </svg>
+                    {{/if}}
+                    {{#if item.text}}
+                        <span>{{item.text}}</span>
+                    {{/if}}
+                    {{#if item.iconClasses}}
+                        <i class="{{item.iconClasses}}"></i>
+                    {{/if}}
+                </div>
+                {{#if item.bottomLabel}}
+                    <div class="bottomLabel">{{item.bottomLabel}}</div>
+                {{/if}}
+            </a>
+        {{/each}}
+    </div>
+</template>

Packages/ohif-study-list/client/components/roundedButtonGroup/roundedButtonGroup.js

@@ -0,0 +1,46 @@
+Template.roundedButtonGroup.onCreated(() => {
+    const instance = Template.instance();
+    const reactiveValue = instance.data.value;
+
+    // Get the value for ReactiveVar or ReactiveDict objects
+    instance.getValue = () => {
+        return reactiveValue.get(instance.data.key);
+    };
+
+    // Set the value for ReactiveVar or ReactiveDict objects
+    instance.setValue = value => {
+        const args = [value];
+        if (reactiveValue instanceof ReactiveDict) {
+            args.unshift(instance.data.key);
+        }
+
+        reactiveValue.set(...args);
+    };
+
+    // Initialize the value with the first option if there's no value set and options are not toggleable
+    if (!instance.getValue() && !instance.data.toggleable) {
+        instance.setValue(instance.data.options[0].value);
+    }
+});
+
+Template.roundedButtonGroup.events({
+    'click [data-value]'(event, instance) {
+        event.preventDefault();
+        const $target = $(event.currentTarget);
+
+        // Stop here if the tool is disabled
+        if ($target.hasClass('disabled')) {
+            return;
+        }
+
+        const nullValue = $target.hasClass('active') && instance.data.toggleable;
+        const value = nullValue ? null : $target.attr('data-value');
+        instance.setValue(value);
+    }
+});
+
+Template.roundedButtonGroup.helpers({
+    getValue() {
+        return Template.instance().getValue();
+    }
+});

Packages/ohif-study-list/client/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -0,0 +1,81 @@
+@import "{ohif:viewerbase}/app"
+
+$height = 25px
+
+.roundedButtonGroup
+  position: relative
+  z-index: 0
+
+  .roundedButtonWrapper
+    cursor: pointer
+    display: inline-block
+    float: left
+    margin-left: -2px
+    text-decoration: none
+    text-align: center
+
+    &.disabled
+      opacity: 0.5
+      cursor: not-allowed
+
+    .roundedButton
+      align-items: center
+      theme('background-color', '$uiGrayDark')
+      theme('border', '2px solid $uiBorderColorDark')
+      theme('color', '$textSecondaryColor')
+      display: flex
+      font-size: 11px
+      font-weight: 500
+      justify-content: center
+      height: $height
+      line-height: $height
+      padding: 0 22px
+      position: relative
+      text-transform: uppercase
+      transition($sidebarTransition)
+      z-index: 1
+
+      svg
+        theme('fill', '$defaultColor')
+        theme('stroke', '$defaultColor')
+
+      svg
+      span
+        margin: 0 2px
+
+      i
+        line-height: 15px
+        font-size: 15px
+
+    .bottomLabel
+      theme('color', '$textSecondaryColor')
+      font-size: 12px
+      font-weight: 500
+      line-height: 12px
+      margin-top: 8px
+
+    &:first-child
+      margin-left: 0
+      .roundedButton
+        border-bottom-left-radius: $height
+        border-top-left-radius: $height
+
+    &:last-child .roundedButton
+      border-bottom-right-radius: $height
+      border-top-right-radius: $height
+
+    &:hover .roundedButton
+      theme('color', '$uiGrayDark')
+      theme('background-color', '$boxBackgroundColor')
+
+    &.active .roundedButton
+      theme('background-color', '$activeColor')
+      theme('border-color', '$uiBorderColorActive')
+      theme('color', '$uiGrayDark')
+      z-index: 2
+
+    &:hover .roundedButton
+    &.active .roundedButton
+      svg
+        theme('fill', '$uiGrayDark')
+        theme('stroke', '$uiGrayDark')