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,17 @@
+import React, { Fragment } from 'react';
+import { Link } from 'docz';
+import PropTypes from 'prop-types';
+
+const NameSpace = ({ name }) => (
+  <Fragment>
+    The namespace used on this component was: <pre>{name}</pre> Check the{' '}
+    <Link to="/translating#how-to-translate-components">translation docs</Link>{' '}
+    to see how to override it.
+  </Fragment>
+);
+
+NameSpace.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default NameSpace;
@@ -0,0 +1,15 @@
+---
+name: Compatibility
+route: /compatibility
+---
+
+# Compatibility
+
+## Browser Support
+
+React Viewerbase relies on
+[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
+or browsers supported by emotion.
+
+Supported Browsers: IE11, IE 9+ (with Map + Set polyfills), Chrome, Firefox (and
+derivatives), Edge, and Safari.
@@ -0,0 +1,13 @@
+---
+name: Docs Settings
+route: /docs-settings
+---
+
+import LanguageSwitcher from '../components/languageSwitcher';
+
+# Components Language
+
+You can change the language of the components displayed in this documentation by
+choosing an option in the selector below:
+
+<LanguageSwitcher />
@@ -0,0 +1,76 @@
+---
+name: Getting Started
+route: /getting-started
+---
+
+# Getting Started
+
+## Installation
+
+> This component library is pre- v1.0. All realeases until a v1.0 have the
+> possibility of introducing breaking changes. Please depend on an "exact"
+> version in your projects to prevent issues caused by loose versioning.
+
+Install `react-viewerbase` from npm:
+
+```shell
+// with npm
+npm i react-viewerbase --save-exact
+
+// with yarn
+yarn add react-viewerbase --exact
+```
+
+## Usage
+
+There is some setup required for `react-viewerbase`. We are working to eliminate
+these requirements with the goal of providing ready to use components.
+
+### External Dependencies
+
+We have tried to keep the number of external dependencies limited to make setup
+as easy as possible. You will, however, need to include either the default font
+or the font you set for your theme:
+
+```js
+// Google Fonts, Sanchez & Roboto
+'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
+```
+
+React Viewerbase also looks for theme CSS variabled defined on `:root`. You can
+find a list of variables [on the theming page](/styling-and-theming)
+
+### Import & Use
+
+You can use components in your React app:
+
+```js
+import React, { Component } from 'react';
+import { LayoutButton } from 'react-viewerbase';
+
+class Example extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedCell: {
+        className: 'hover',
+        col: 1,
+        row: 1,
+      },
+    };
+  }
+
+  render() {
+    return (
+      <LayoutButton
+        selectedCell={this.state.selectedCell}
+        onChange={cell => this.setState({ selectedCell: cell })}
+      />
+    );
+  }
+}
+```
+
+> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well
+> as the following style: `* { Box-sizing: Border-box }`
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="{{ lang }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="{{ description }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>{{ title }}</title>
+
+   <!-- Latest compiled and minified CSS -->
+   <link rel="stylesheet" href="/public/docz.css">
+   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap">
+
+    <style>
+    /* "Tide" theme */
+    /* TODO:
+    - Convert the other themes to CSS Variables
+    - Allow user to set default CSS theme in JS config
+    - Export the themes as identical JS objects
+    - For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
+    */
+    :root {
+      /* Interface UI Colors */
+      --default-color: #9CCEF9;
+      --hover-color: #ffffff;
+      --active-color: #20A5D6;
+      --ui-border-color: #44626F;
+      --ui-border-color-dark: #3C5D80;
+      --ui-border-color-active: #00a4d9;
+      --primary-background-color: #000000;
+      --box-background-color: #3E5975;
+
+      --text-primary-color: #ffffff;
+      --text-secondary-color: #91B9CD;
+      --input-background-color: #2c363f;
+      --input-placeholder-color: #d3d3d3;
+
+      --table-hover-color: #2c363f;
+      --table-text-primary-color: #ffffff;
+      --table-text-secondary-color: #91b9cd;
+
+      --large-numbers-color:#6FBDE2;
+
+      --state-error: #FFCCCC;
+      --state-error-border: #FFCCCC;
+      --state-error-text: #FFCCCC;
+
+      /* Common palette */
+      --ui-yellow: #E29E4A;
+      --ui-sky-blue: #6FBDE2;
+      /* State palette */
+      --ui-state-error: #FFCCCC;
+      --ui-state-error-border: #993333;
+      --ui-state-error-text: #661111;
+      --ui-gray-lighter: #436270;
+      --ui-gray-light: #516873;
+      --ui-gray: #263340;
+      --ui-gray-dark: #16202B;
+      --ui-gray-darker: #151A1F;
+      --ui-gray-darkest: #14202A;
+
+      --calendar-day-color: #d3d3d3;
+      --calendar-day-border-color: #d3d3d3;
+      --calendar-day-active-hover-background-color: #516873;
+      --calendar-main-color: #263340;
+      --viewport-border-thickness: 1px;
+    }
+
+    body {
+      font-family: 'Roboto', sans-serif !important;
+    }
+    </style>
+    {{ head }}
+  </head>
+  <body>
+    <div id="root" />
+    {{ footer }}
+  </body>
+</html>
@@ -0,0 +1,76 @@
+---
+name: Introduction
+route: /
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { TableList, TableListItem } from './../index.js'
+
+# Introduction
+
+**React Viewerbase is a collection of components and utilities** that power
+OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
+([demo][demo-url]). We maintain them as a separate component library to:
+
+- Decouple presentation from business logic
+- Test and develop components in isolation
+- Provide well documented, reusable components
+- Aid rapid application development for context specific viewers
+
+## Quick Example
+
+> This component library is pre- v1.0. All realeases until a v1.0 have the
+> possibility of introducing breaking changes. Please depend on an "exact"
+> version in your projects to prevent issues caused by loose versioning.
+
+```js
+// Add 'react-viewerbase' as a dependency
+yarn add react-viewerbase
+
+// Import and use components
+import { TableList } from 'react-viewerbase'
+```
+
+<Playground>
+  <State
+    initial={{
+      selectedIndex: null,
+      listItems: [
+        { label: 'Brain Left' },
+        { label: 'Brain Right' },
+        { label: 'Heart Left' },
+        { label: 'Heart Right' },
+      ],
+    }}
+  >
+    {({ state, setState }) => (
+      <TableList headerTitle="Example Table List Header">
+        {state.listItems.map((item, index) => {
+          return (
+            <TableListItem
+              key={`item_${index}`}
+              itemClass={state.selectedIndex === index ? 'selected' : ''}
+              itemIndex={index}
+              onItemClick={() => alert('item clicked')}
+            >
+              <label>{item.label}</label>
+            </TableListItem>
+          )
+        })}
+      </TableList>
+    )}
+  </State>
+</Playground>
+
+## FAQ
+
+...
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[demo-url]: https://docs.ohif.org/demo/
+<!-- prettier-ignore-end -->
@@ -0,0 +1,56 @@
+---
+name: Styling & Theming
+route: /styling-and-theming
+---
+
+# Styling & Theming
+
+```css
+:root {
+  /* Interface UI Colors */
+  --default-color: #9ccef9;
+  --hover-color: #ffffff;
+  --active-color: #20a5d6;
+  --ui-border-color: #44626f;
+  --ui-border-color-dark: #3c5d80;
+  --ui-border-color-active: #00a4d9;
+  --primary-background-color: #000000;
+  --box-background-color: #3e5975;
+
+  --text-primary-color: #ffffff;
+  --text-secondary-color: #91b9cd;
+  --input-background-color: #2c363f;
+  --input-placeholder-color: #d3d3d3;
+
+  --table-hover-color: #2c363f;
+  --table-text-primary-color: #ffffff;
+  --table-text-secondary-color: #91b9cd;
+
+  --large-numbers-color: #6fbde2;
+
+  --state-error: #ffcccc;
+  --state-error-border: #ffcccc;
+  --state-error-text: #ffcccc;
+
+  /* Common palette */
+  --ui-yellow: #e29e4a;
+  --ui-sky-blue: #6fbde2;
+
+  /* State palette */
+  --ui-state-error: #ffcccc;
+  --ui-state-error-border: #993333;
+  --ui-state-error-text: #661111;
+  --ui-gray-lighter: #436270;
+  --ui-gray-light: #516873;
+  --ui-gray: #263340;
+  --ui-gray-dark: #16202b;
+  --ui-gray-darker: #151a1f;
+  --ui-gray-darkest: #14202a;
+
+  --calendar-day-color: #d3d3d3;
+  --calendar-day-border-color: #d3d3d3;
+  --calendar-day-active-hover-background-color: #516873;
+  --calendar-main-color: #263340;
+  --viewport-border-thickness: 1px;
+}
+```
@@ -0,0 +1,87 @@
+---
+name: Translating
+route: /translating
+---
+
+# Translating
+
+**React Viewerbase** supports internationalization using
+[i18next](https://www.i18next.com/) through the npm package
+[@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), where is the main
+instance of i18n containing several languages and tools.
+
+## How to translate components
+
+All you need is to use the internal custom superset of
+[withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc),
+available at `src/utils/LanguageProvider.js`
+
+e.g.:
+
+```js
+import React from 'react';
+import { withTranslation } from '../utils/LanguageProvider.js';
+
+function MyComponent({ t }) {
+  return <p>{t('my translated text')}</p>;
+}
+
+export default withTranslation('MyNameSpace')(MyComponent);
+```
+
+---
+
+## Namespaces
+
+For further information about namespaces and how they work, please visit
+[OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces).
+
+### How to get right the Name Space of a react-viewerbase component?
+
+Check the component's page in this site, the NameSpace information should be on
+the bottom line.
+
+Also, a nameSpace is defined when exporting a component, this information can be
+found on exports trough the code, in case of missing in docs.
+
+E.g.
+
+```
+export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
+```
+
+### How to use another NameSpace inside the current NameSpace?
+
+i18next provides a parsing feature able to get translations strings from any
+NameSpace, like this following example getting data from `InnerSpace` NameSpace:
+
+```
+$t(InnerSpace:Reset)
+export default withTranslation('OuterSpace')(TheComponent);
+```
+
+---
+
+## I18next Provider
+
+**React Viewerbase** pass down the `t` function trough the custom
+[withTranslation HOC](https://github.com/OHIF/react-viewerbase/blob/master/src/utils/LanguageProvider.js).
+
+---
+
+## Extending and Overriding languages
+
+[How to Extend languages with @ohif/i18n](https://docs.ohif.org/essentials/translating.html#extending-languages-in-ohifi18n)
+
+## Changing the language
+
+The language choosing method is the same implemented in
+[OHIF Viewers](https://docs.ohif.org/essentials/translating.html#changing-the-language)
+
+> You can also change the language of the components displayed in this
+> documentation by choosing an option in the
+> [Docs Settings](https://react.ohif.org/docs-settings) section.
+
+## Debugging translations
+
+[How to Debug @ohif/i18n](https://docs.ohif.org/essentials/translating.html#debugging-translations)
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import LanguageSwitcher from '../components/languageSwitcher';
+
+import './wrapper.styl';
+
+const Wrapper = ({ children }) => (
+  <React.Fragment>
+    <div className="sidebarLanguageSwitcher">
+      <strong>Display components in:</strong>
+      <LanguageSwitcher />
+    </div>
+    {children}
+  </React.Fragment>
+);
+
+Wrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Wrapper;
@@ -0,0 +1,15 @@
+[class*="Sidebar__Menus"]
+  @media (min-width: 1120px)
+    margin-top: 80px
+
+.sidebarLanguageSwitcher
+  position: fixed
+  top: 155px
+  left 0
+  z-index: 1049
+  padding: 0 24px 20px
+  border-bottom: 1px dotted #CED4DE
+  background: #F5F6F7
+  transition: all 200ms ease
+  @media (max-width: 1119px)
+    left -100%