We want props for components to load like this:

In version 1, they do not. We need to watch this issue for a fix:

doczjs/docz#777

On my keyboard (US English on a mac book pro) some basic keys work to define shortcust, like numbers and letters, but other keys result in the wrong characters. For example the equals key results in a double right chevron, and the minus key gives the symbol for one half.

We recently merged some drag-n-drop improvements here: #122

It may be worth looking into:

• Using the native dataTransfer.setDragImage() instead of building our own
• Shifting the drag-n-drop connect pieces to Viewers to simplify our components

Before Creating an issue

• Are you running the latest version? Yes
• Are you reporting to the correct repository? Yes
• Did you search existing issues? Yes

Describe the bug

The react-dnd backend that is included by default does not support touch devices.

We should also determine whether or not the backend should be a dependency or peerDependency, since end users may want to override it.

Steps To Reproduce

1. Load the Study Browser component on a touch device
2. Try to drag and drop the image thumbnail. Nothing will happen.

Expected behavior

The end user should be able to drag and drop the thumbnails on touch devices.

Environment

• OS: [e.g. iOS] All
• Browser [e.g. chrome, safari] All
• Version [e.g. 22] All

Additional context

Needs to be tested on a touch device or in the browser's JS console touch emulator.

Related to: #51

Using the same strategies outlined in #51, we can improve our icon/SVG usage. At the very least, using an in-liner would save us some deployment hassle ^_^

When following your README sample, I stuck into an installation problem. The output of the error is as follows.

1. By doing the dependency installation inside your example/ folder, like you said, we have this:

> npm install

2. Then, the output of the errors are:

npm ERR! path /Users/Francisco/Git/react-viewerbase/example/node_modules/.staging/react-viewerbase-091ed109/node_modules/@babel/code-frame
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/Francisco/Git/react-viewerbase/example/node_modules/.staging/react-viewerbase-091ed109/node_modules/@babel/code-frame' -> '/Users/Francisco/Git/react-viewerbase/example/node_modules/.staging/@babel/code-frame-275380b3'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Francisco/.npm/_logs/2018-12-13T14_34_35_435Z-debug.log

Anyway, I also would like to congratualte your effort, by giving us, the community, a React version. Thank you!

RadioGroup

Renders a group of <Radio> fields.

Props:

• className: string
• defaultValue: string
• disabled: bool (default, false)
• isHorizontal: bool (default, false)
• name: string (REQUIRED)
• options: array (REQUIRED)
• type/color: string
• value: string
• onChange: func

An example of options would be:

<RadioGroup
  name="myGroup"
  options={[
    { label: 'Hello', value: 'World' },
    { label: 'Fizz', value: 'Buzz' }
  ]}
/>

Describe the bug

The demo is using the incorrect font-family. This is largely caused by Bootstrap's normalize.css. The font should be Roboto, but it is instead the font set by Bootstrap's normalize.css.

Radio and Checkbox

The image I'm including is an example of the style we're targeting for these new components.

• Checked: true/false
• Color: default, primary, secondary
• Label: string
• Disabled: true/false
• onChange: fn
• Value: string
• Name: string
• defaultChecked (can't use w/ controlled)

Note:

All components that provide an opportunity for controlled vs uncontrolled usage should include a note or examples mentioning as much, and how onChange and value can be used.

environment
OS - ubuntu 16.04 64bit
node version v11.9.0
npm version 6.7.0

$git clone https://github.com/OHIF/react-viewerbase
$cd react-viewerbase/
$yarn install
$yarn start

rollup v0.68.2
bundles src/index.js → dist/index.js, dist/index.es.js...

and rollup watches files, If i change a file it recompiled
Problem
I visit http://localhost:3000/ nothing is there.
This site can’t be reached

FYI create-react-app works fine,

When adding a style like:

user-select: none;

I currently need to make sure to include all appropriate vendor prefixes:

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

In a perfect world, I would lean on something like https://github.com/postcss/autoprefixer so I don't need to remember in which stage of adoption each feature is in.

src/components/studyBrowser/ImageThumbnail.js uses cornerstone to async render image thumbnails. However, cornerstone is never passed in, and react-viewerbase does not have cornerstone as a peerDependency.

The only reason this has worked up until now is due to us attaching cornerstone to the window to assist with debugging. As part of cleaning things up, I went to remove this reference, and it causes the app to crash.

In my opinion, this should be factored out entirely and handled in the application. This component should be simple and work with image source data only.

https://deploy-preview-100--ohif-react-viewerbase.netlify.com/components/toolbar-section

TypeError: Cannot read property 'includes' of undefined

I want to implement complete code with all components when I import and uses this is says it is an object expected a single component

import CornerstoneViewport from 'react-viewerbase'

How to implement complete ohif running code in my react app ?

This is more of a discussion item.

src/LayoutChooser/LayoutManager.js appears to be where we look at our "availablePlugins" (viewport modules), and determine which ones should be rendered for the current layout.

While I like our ExtensionManager living here, as it can provide a well tested, view agnostic, way to manage our extensions and modules, our components should be as dumb as possible. This allows for increased re-use, and for the implementing Viewer to determine how/when/where to slot registered extensions.

Button

A lot of the "structures" from the OHIF Viewer have been recreated in react-viewerbase, but most of the elements that they combine have not. For example, take the buttons used in the UserPreferencesModal:

These should be replaced with a new component, under Elements, named Button. It should support the following:

• Type/Color: default, primary, secondary
• Disabled: true/false
• Href: string; if used, a element is used as root node
• Size: small, medium, large
• These could be props, or passed as children
  • Label: string
  • Icon: name, or icon object

We're currently throwing some css variables on :root and calling it a day. While that does the trick, we lose out on testing, composition, etc.

We will want to look into libraries in this space that have become the React "go to" libraries for accomplishing theming.

• Emotion
  • Recommended by Kent C. Dodds
  • Articles:
    • The Next Generation of CSS-in-JS
    • Emotion 8 release (now on 10.x)
• Styled-Components
  • Encumbant with a bit more usage, but known for being a tad more complex
  • See fannypack for a component lib. usage
• Smooth UI supports theming using either of the above ^^

Label

This should just be a label rendering with a basic reset styling. It only needs to support:

• children: (required) (text node for label)
• className: string
• htmlFor: string

A few components rely on class styles provided by bootstrap. For example, the "LayoutButton" has a "LayoutChooser" that's white background is set by .dropdown-menu from Bootstrap.

This dependency is not immediately obvious and can create tricky situations. Pulling in all of Bootstrap can create unnecessary styling conflicts, adds unused styles (bloat), may be a deterrent for would-be library consumers.

• Want to use Bootstrap's Grid? Use flexbox or CSS grid instead
• Want to leverage modal, dropdown, or some other component styling? Integrate the relevant portions directly into our component styles.

FieldWrapper

A field wrapper wraps a form element. It allows you to supply a label, description, hint text, etc.

Props

• Children: element or func (REQUIRED)
• className: string
• description: string or element
• hint: string or element
• isOptional: bool
• isRequired: bool
• label: string or element
• color/state/type: string
• validationText: string

FontAwesome is a great library, but we don't want to lock users into it as a dependency. By providing a custom icon font, or set of SVGs, we reduce bloat/dependencies and provide more flexibility.

• icomoon is a good tool for managing an icon library
• or re-purposing this editable SVG icon component pattern

Would be preferable options. If you have questions, comments, or concerns; please feel free to chime in. If you would like to claim this issue, please feel free to 🙌

I've noticed this package is used in other places such as OHIF viewer in here: https://github.com/OHIF/Viewers/tree/react/Packages-react. I've started to modify react-viewerbase locally and see its effect in ohif-viewer. As the external dependency, I've used yarn link react-viewerbase and OHIF viewer appears to be able to link to it.

The problem is with debugging both projects at the same time. While I'm able to set debugging breakpoints in ohif-viewer/src, setting breakpoints in react-viewerbase/src does not work when launching the ohif-viewer. My intuition tells me that the source maps of the external (and local) dependencies are not built by default as yarn link creates a symbolic link under ohif-viewer/node_modules. I haven't been able to solve this problem after googling for a few days (few people seem to have this issue after all, which makes me think there are other alternative ways to accomplish it), and wonder if you would have some good suggestions. Thank you in advance and any help is much appreciated.

Do we have an example using react-viewerbase via a script tag? Is it supported?