chore: update references to ohif-core and react-viewerbase

This commit is contained in:
dannyrb 2019-09-05 21:52:45 -04:00
parent 2b1f2104cd
commit 20d6680e06
14 changed files with 45 additions and 57 deletions

View File

@ -273,7 +273,6 @@ MIT © [OHIF](https://github.com/OHIF)
[netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status [netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
[netlify-url]: https://app.netlify.com/sites/ohif/deploys [netlify-url]: https://app.netlify.com/sites/ohif/deploys
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
[contributing-url]: https://github.com/OHIF/Viewers/blob/master/CONTRIBUTING.md
[circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg [circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
[circleci-url]: https://circleci.com/gh/OHIF/Viewers [circleci-url]: https://circleci.com/gh/OHIF/Viewers
[codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg [codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg

View File

@ -4,7 +4,7 @@ Themeing is currently accomplished with color variables that are defined within
the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector
(allowing them to cascade across all elements). This repository's components, (allowing them to cascade across all elements). This repository's components,
and the ones we consume from our and the ones we consume from our
[React Viewerbase component library](https://react.ohif.org/styling-and-theming) [`@ohif/ui` component library](https://react.ohif.org/styling-and-theming)
utilize them. We are interested in pursuing more robust themeing options, and utilize them. We are interested in pursuing more robust themeing options, and
open to pull requests and discussion issues. open to pull requests and discussion issues.
@ -80,12 +80,12 @@ function RadicalImagingLogo() {
href: 'http://radicalimaging.com', href: 'http://radicalimaging.com',
}, },
React.createElement('h5', {}, 'RADICAL IMAGING') React.createElement('h5', {}, 'RADICAL IMAGING')
) );
} }
props.whiteLabelling = { props.whiteLabelling = {
logoComponent: RadicalImagingLogo(), logoComponent: RadicalImagingLogo(),
} };
``` ```
<!-- <!--

View File

@ -145,8 +145,8 @@ becomes a new namespace automatically.
- CineDialog: Translations for the toll tips inside the Cine Player Dialog - CineDialog: Translations for the toll tips inside the Cine Player Dialog
- Common: all common jargons that can be reused like `t('$t(common:image)')` - Common: all common jargons that can be reused like `t('$t(common:image)')`
- Header: translations related to OHIF's Header Top Bar - Header: translations related to OHIF's Header Top Bar
- MeasurementTable - Translations for the react-viewerbase Measurement Table - MeasurementTable - Translations for the `@ohif/ui` Measurement Table
- UserPreferencesModal - Translations for the react-viewerbase Preferences Modal - UserPreferencesModal - Translations for the `@ohif/ui` Preferences Modal
### How to use another NameSpace inside the current NameSpace? ### How to use another NameSpace inside the current NameSpace?

View File

@ -3,8 +3,6 @@
// - Include SVG Source/Inline? // - Include SVG Source/Inline?
// - By URL, or own component? // - By URL, or own component?
// TODO: `ohif-core` toolbar builder?
// What KINDS of toolbar buttons do we have... // What KINDS of toolbar buttons do we have...
// - One's that dispatch commands // - One's that dispatch commands
// - One's that set tool's active // - One's that set tool's active

View File

@ -35,7 +35,7 @@ can be used with Vue, React, Vanilla JS, or any number of other frameworks.
The documentation for this library is sparse. The best way to get started is to The documentation for this library is sparse. The best way to get started is to
look at its look at its
[top level exports](https://github.com/OHIF/ohif-core/blob/master/src/index.js), [top level exports](https://github.com/OHIF/Viewers/blob/master/platform/core/src/index.js),
and explore the source code of features that interest you. If you want to see and explore the source code of features that interest you. If you want to see
how we use this library, you can check out [our viewer how we use this library, you can check out [our viewer
implementation][react-viewer]. implementation][react-viewer].
@ -57,12 +57,12 @@ yarn add @ohif/core --exact
### Usage ### Usage
Usage is dependent on the feature(s) you want to leverage. The bulk of Usage is dependent on the feature(s) you want to leverage. The bulk of
`ohif-core`'s features are "pure" and can be imported and used in place. `@ohif/core`'s features are "pure" and can be imported and used in place.
_Example: retrieving study metadata from a server_ _Example: retrieving study metadata from a server_
```js ```js
import { studies } from "@ohif/core"; import { studies } from '@ohif/core';
const studiesMetadata = await studies.retrieveStudiesMetadata( const studiesMetadata = await studies.retrieveStudiesMetadata(
server, // Object server, // Object
@ -125,11 +125,10 @@ Links:
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
<!-- ROW --> <!-- ROW -->
[npm-url]: https://npmjs.org/package/ohif-core [npm-url]: https://npmjs.org/package/@ohif/core
[npm-downloads-image]: https://img.shields.io/npm/dm/ohif-core.svg?style=flat-square [npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/core.svg?style=flat-square
[npm-version-image]: https://img.shields.io/npm/v/ohif-core.svg?style=flat-square [npm-version-image]: https://img.shields.io/npm/v/@ohif/core.svg?style=flat-square
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
[contributing-url]: https://github.com/OHIF/ohif-core/blob/master/CONTRIBUTING.md
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
[license-url]: LICENSE [license-url]: LICENSE
<!-- Misc. --> <!-- Misc. -->

View File

@ -49,8 +49,8 @@ yarn add @ohif/ui --exact
## Usage ## Usage
```jsx ```jsx
import React, { Component } from "react"; import React, { Component } from 'react';
import { LayoutButton } from "@ohif/ui"; import { LayoutButton } from '@ohif/ui';
class Example extends Component { class Example extends Component {
constructor(props) { constructor(props) {
@ -58,10 +58,10 @@ class Example extends Component {
this.state = { this.state = {
selectedCell: { selectedCell: {
className: "hover", className: 'hover',
col: 1, col: 1,
row: 1 row: 1,
} },
}; };
} }
@ -117,10 +117,9 @@ Links:
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
[contributing-url]: https://github.com/OHIF/react-viewerbase/blob/master/CONTRIBUTING.md [npm-url]: https://npmjs.org/package/@ohif/ui
[npm-url]: https://npmjs.org/package/react-viewerbase [npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/ui.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/react-viewerbase.svg?style=flat-square [npm-version-image]: https://img.shields.io/npm/v/@ohif/ui.svg?style=flat-square
[npm-version-image]: https://img.shields.io/npm/v/react-viewerbase.svg?style=flat-square
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
[license-url]: LICENSE [license-url]: LICENSE
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->

View File

@ -7,7 +7,7 @@ route: /compatibility
## Browser Support ## Browser Support
React Viewerbase relies on `@ohif/ui` relies on
[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported) [browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
or browsers supported by emotion. or browsers supported by emotion.

View File

@ -11,20 +11,20 @@ route: /getting-started
> possibility of introducing breaking changes. Please depend on an "exact" > possibility of introducing breaking changes. Please depend on an "exact"
> version in your projects to prevent issues caused by loose versioning. > version in your projects to prevent issues caused by loose versioning.
Install `react-viewerbase` from npm: Install `@ohif/ui` from npm:
```shell ```shell
// with npm // with npm
npm i react-viewerbase --save-exact npm i @ohif/ui --save-exact
// with yarn // with yarn
yarn add react-viewerbase --exact yarn add @ohif/ui --exact
``` ```
## Usage ## Usage
There is some setup required for `react-viewerbase`. We are working to eliminate There is some setup required for `@ohif/ui`. We are working to eliminate these
these requirements with the goal of providing ready to use components. requirements with the goal of providing ready to use components.
### External Dependencies ### External Dependencies
@ -37,8 +37,8 @@ or the font you set for your theme:
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap'; '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 `@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
find a list of variables [on the theming page](/styling-and-theming) list of variables [on the theming page](/styling-and-theming)
### Import & Use ### Import & Use
@ -46,7 +46,7 @@ You can use components in your React app:
```js ```js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { LayoutButton } from 'react-viewerbase'; import { LayoutButton } from '@ohif/ui';
class Example extends Component { class Example extends Component {
constructor(props) { constructor(props) {

View File

@ -3,14 +3,14 @@ name: Introduction
route: / route: /
--- ---
import { Playground, Props } from 'docz' import { Playground, Props } from 'docz';
import { State } from 'react-powerplug' import { State } from 'react-powerplug';
import { TableList, TableListItem } from './../index.js' import { TableList, TableListItem } from './../index.js';
# Introduction # Introduction
**React Viewerbase is a collection of components and utilities** that power **@ohif/ui is a collection of components and utilities** that power OHIF's
OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers) [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
([demo][demo-url]). We maintain them as a separate component library to: ([demo][demo-url]). We maintain them as a separate component library to:
- Decouple presentation from business logic - Decouple presentation from business logic
@ -25,11 +25,11 @@ OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
> version in your projects to prevent issues caused by loose versioning. > version in your projects to prevent issues caused by loose versioning.
```js ```js
// Add 'react-viewerbase' as a dependency // Add '@ohif/ui' as a dependency
yarn add react-viewerbase yarn add @ohif/ui
// Import and use components // Import and use components
import { TableList } from 'react-viewerbase' import { TableList } from '@ohif/ui'
``` ```
<Playground> <Playground>
@ -56,7 +56,7 @@ import { TableList } from 'react-viewerbase'
> >
<label>{item.label}</label> <label>{item.label}</label>
</TableListItem> </TableListItem>
) );
})} })}
</TableList> </TableList>
)} )}

View File

@ -36,9 +36,9 @@ export default withTranslation('MyNameSpace')(MyComponent);
For further information about namespaces and how they work, please visit For further information about namespaces and how they work, please visit
[OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces). [OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces).
### How to get right the Name Space of a react-viewerbase component? ### How to get right the Namespace of a `@ohif/ui` component?
Check the component's page in this site, the NameSpace information should be on Check the component's page in this site, the Namespace information should be on
the bottom line. the bottom line.
Also, a nameSpace is defined when exporting a component, this information can be Also, a nameSpace is defined when exporting a component, this information can be
@ -50,10 +50,10 @@ E.g.
export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse); export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
``` ```
### How to use another NameSpace inside the current NameSpace? ### How to use another Namespace inside the current Namespace?
i18next provides a parsing feature able to get translations strings from any i18next provides a parsing feature able to get translations strings from any
NameSpace, like this following example getting data from `InnerSpace` NameSpace: Namespace, like this following example getting data from `InnerSpace` Namespace:
``` ```
$t(InnerSpace:Reset) $t(InnerSpace:Reset)
@ -64,8 +64,8 @@ export default withTranslation('OuterSpace')(TheComponent);
## I18next Provider ## I18next Provider
**React Viewerbase** pass down the `t` function trough the custom **@ohif/ui** pass down the `t` function trough the custom
[withTranslation HOC](https://github.com/OHIF/react-viewerbase/blob/master/src/utils/LanguageProvider.js). [withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
--- ---

View File

@ -121,11 +121,6 @@ class CineDialog extends PureComponent {
} }
}; };
// TODO:
// - Add next / previous display set buttons which just call
// onClickNextDisplaySet and onClickPreviousDisplaySet which are passed in as props.
// See https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html#L38
// - Add 'isEnabled' prop: https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js#L301
render() { render() {
const { t } = this.props; const { t } = this.props;
return ( return (

View File

@ -188,7 +188,6 @@ Links:
[docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square [docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square
[docker-image-url]: https://hub.docker.com/r/ohif/viewer [docker-image-url]: https://hub.docker.com/r/ohif/viewer
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
[contributing-url]: https://github.com/OHIF/Viewers/blob/react/CONTRIBUTING.md
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
[license-url]: LICENSE [license-url]: LICENSE
<!-- DOCS --> <!-- DOCS -->

View File

@ -13,7 +13,6 @@ window.config = {
imageRendering: 'wadors', imageRendering: 'wadors',
thumbnailRendering: 'wadors', thumbnailRendering: 'wadors',
// REQUIRED TAG: // REQUIRED TAG:
// https://github.com/OHIF/ohif-core/blob/59e1e04b92be24aee5d4402445cb3dcedb746995/src/studies/retrieveStudyMetadata.js#L54
// TODO: Remove tag after https://github.com/OHIF/ohif-core/pull/19 is merged and we bump version // TODO: Remove tag after https://github.com/OHIF/ohif-core/pull/19 is merged and we bump version
requestOptions: { requestOptions: {
// undefined to use JWT + Bearer auth // undefined to use JWT + Bearer auth
@ -39,4 +38,4 @@ window.config = {
post_logout_redirect_uri: '/logout-redirect.html', post_logout_redirect_uri: '/logout-redirect.html',
}, },
], ],
} };

View File

@ -11,7 +11,7 @@ import { reducer as oidcReducer } from 'redux-oidc';
import { redux } from '@ohif/core'; import { redux } from '@ohif/core';
import thunkMiddleware from 'redux-thunk'; import thunkMiddleware from 'redux-thunk';
// Combine our ohif-core, ui, and oidc reducers // Combine our @ohif/core, ui, and oidc reducers
// Set init data, using values found in localStorage // Set init data, using values found in localStorage
const { reducers, localStorage } = redux; const { reducers, localStorage } = redux;
const middleware = [thunkMiddleware]; const middleware = [thunkMiddleware];