othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix broken UI package build (#1990)

Browse Source 
* Use path instead of alias

* Add missing pacakges

* Use path in viewers

* Use path in contextProviders

* Add base to config

* Add conditionals for window

* Copy config to avoid breaking build

* Update and lock versions

* Update lock file

* Remove scaling config

* Fix broken versions of react date

* Fix broken dev
This commit is contained in:
Igor Octaviano 2020-08-14 15:25:08 -03:00 committed by GitHub
parent e04f74499f
commit ef163cd702
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
93 changed files with 3244 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/ui/doczrc.js
View File

@ -11,4 +11,5 @@ export default {
// 'Other',
],
ignore: ['README.md'],
base: '/ui/'
};

1
platform/ui/gatsby-config.js
View File

@ -1,5 +1,6 @@
module.exports = {
plugins: [
'gatsby-theme-docz',
'gatsby-plugin-react-svg',
'gatsby-plugin-sass',
`gatsby-plugin-postcss`,

43
platform/ui/package.json
View File

@ -27,33 +27,34 @@
"docs:preview": "yarn run dev"
},
"dependencies": {
"classnames": "^2.2.6",
"docz": "^2.3.0",
"gatsby": "2.22.19",
"gatsby-plugin-postcss": "2.3.3",
"classnames": "2.2.6",
"docz": "2.3.2-alpha.0",
"gatsby": "2.24.47",
"gatsby-plugin-postcss": "2.3.11",
"gatsby-plugin-react-svg": "3.0.0",
"gatsby-plugin-sass": "2.3.3",
"gatsby-theme-docz": "2.3.1",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",
"gatsby-plugin-sass": "2.3.12",
"gatsby-theme-docz": "2.3.1-alpha.0",
"moment": "2.24.0",
"node-sass": "^4.14.1",
"prop-types": "15.7.2",
"react": "16.11.0",
"react-dates": "^21.8.0",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dnd-touch-backend": "^10.0.2",
"react-error-boundary": "2.2.x",
"react-dnd": "10.0.2",
"react-dnd-html5-backend": "10.0.2",
"react-dnd-touch-backend": "10.0.2",
"react-dom": "16.11.0",
"react-modal": "^3.11.2",
"react-draggable": "4.4.3",
"react-error-boundary": "2.2.3",
"react-modal": "3.11.2",
"react-powerplug": "1.0.0",
"react-select": "^3.0.8",
"theme-ui": "^0.2.38"
"react-select": "3.0.8",
"theme-ui": "0.2.x"
},
"devDependencies": {
"autoprefixer": "^9.7.4",
"postcss-cli": "^7.1.0",
"stylelint": "^13.1.0",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "^1.2.0"
"autoprefixer": "9.7.4",
"postcss-cli": "7.1.1",
"stylelint": "13.6.1",
"stylelint-config-standard": "20.0.0",
"tailwindcss": "1.6.2"
}
}

2
platform/ui/src/components/Button/Button.mdx
View File

@ -5,7 +5,7 @@ route: components/button
---
import { Playground, Props } from 'docz';
import { Button, IconButton, Icon } from '@ohif/ui';
import { Button, IconButton, Icon } from '../';
# Button

2
platform/ui/src/components/ButtonGroup/ButtonGroup.mdx
View File

@ -5,7 +5,7 @@ route: components/buttonGroup
---
import { Playground, Props } from 'docz';
import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';
import { ButtonGroup, Button, IconButton, Icon } from '../';
# ButtonGroup

2
platform/ui/src/components/ContextMenu/ContextMenu.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from '@ohif/ui';
import { Typography } from '../';
const ContextMenu = ({ items }) => {
return (

2
platform/ui/src/components/ContextMenu/ContextMenu.mdx
View File

@ -5,7 +5,7 @@ route: components/contextMenu
---
import { Playground, Props } from 'docz';
import { ContextMenu } from '@ohif/ui';
import { ContextMenu } from '../';
# Context Menu

2
platform/ui/src/components/ContextMenuMeasurements/ContextMenuMeasurements.jsx
View File

@ -1,4 +1,4 @@
import { ContextMenu } from '@ohif/ui';
import { ContextMenu } from '../';
import PropTypes from 'prop-types';
import React from 'react';

15
platform/ui/src/components/DateRange/DateRange.jsx
View File

@ -1,14 +1,13 @@
/** REACT DATES */
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
import './DateRange.css';
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
/** REACT DATES */
import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import './DateRange.css';
const today = moment();
const lastWeek = moment().subtract(7, 'day');
const lastMonth = moment().subtract(1, 'month');
@ -90,7 +89,7 @@ const DateRange = (props) => {
onYearSelect(month, event.target.value);
};
const handleOnBlur = () => {};
const handleOnBlur = () => { };
return (
<div className="flex justify-center">

2
platform/ui/src/components/DateRange/DateRange.mdx
View File

@ -6,7 +6,7 @@ route: components/date-range
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { DateRange } from '@ohif/ui';
import { DateRange } from '../';
# Date Range

2
platform/ui/src/components/Dropdown/Dropdown.jsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, Typography } from '@ohif/ui';
import { Icon, Typography } from '../';
const Dropdown = ({ children, showDropdownIcon, list }) => {
const [open, setOpen] = useState(false);

2
platform/ui/src/components/Dropdown/Dropdown.mdx
View File

@ -5,7 +5,7 @@ route: components/dropdown
---
import { Playground, Props } from 'docz';
import { Dropdown, IconButton, Icon } from '@ohif/ui';
import { Dropdown, IconButton, Icon } from '../';
# Dropdown

2
platform/ui/src/components/EmptyStudies/EmptyStudies.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, Typography } from '@ohif/ui';
import { Icon, Typography } from '../';
// TODO: Add loading spinner to OHIF + use it here.
const EmptyStudies = ({ className, isLoading }) => {

2
platform/ui/src/components/EmptyStudies/EmptyStudies.mdx
View File

@ -5,7 +5,7 @@ route: components/empty-studies
---
import { Playground, Props } from 'docz';
import { EmptyStudies } from '@ohif/ui';
import { EmptyStudies } from '../';
# Empty Studies

2
platform/ui/src/components/ErrorBoundary/ErrorBoundary.jsx
View File

@ -61,7 +61,7 @@ const ErrorBoundary = ({
title={'Something went wrong'}
onClose={() => {
setIsOpen(false);
if (fallbackRoute) {
if (fallbackRoute && typeof window !== 'undefined') {
window.location = fallbackRoute;
}
}}

2
platform/ui/src/components/ErrorBoundary/ErrorBoundary.mdx
View File

@ -5,7 +5,7 @@ route: components/errorBoundary
---
import { Playground, Props } from 'docz';
import { ErrorBoundary } from '@ohif/ui';
import { ErrorBoundary } from '../';
# Error Boundary

2
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { IconButton, Icon } from '@ohif/ui';
import { IconButton, Icon } from '../';
import './ExpandableToolbarButton.css';

2
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx
View File

@ -6,7 +6,7 @@ route: components/expandableToolbarButton
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
import { ExpandableToolbarButton, ListMenu } from '../';
# Toolbar Button

2
platform/ui/src/components/Icon/icon.mdx
View File

@ -5,7 +5,7 @@ route: components/icon
---
import { Playground, Props } from 'docz';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
import { ICONS } from './getIcon';
# Icon

2
platform/ui/src/components/Input/Input.mdx
View File

@ -5,7 +5,7 @@ route: components/input
---
import { Playground, Props } from 'docz';
import { Input } from '@ohif/ui';
import { Input } from '../';
# Input

2
platform/ui/src/components/InputDateRange/InputDateRange.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { DateRange, InputLabelWrapper } from '@ohif/ui';
import { DateRange, InputLabelWrapper } from '../';
const InputDateRange = ({
label,

2
platform/ui/src/components/InputDateRange/InputDateRange.mdx
View File

@ -6,7 +6,7 @@ route: components/InputDateRange
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { InputDateRange } from '@ohif/ui';
import { InputDateRange } from '../';
# Input Date Range

2
platform/ui/src/components/InputGroup/InputGroup.jsx
View File

@ -7,7 +7,7 @@ import {
InputDateRange,
InputMultiSelect,
InputLabelWrapper,
} from '@ohif/ui';
} from '../';
const InputGroup = ({
inputMeta,

2
platform/ui/src/components/InputGroup/InputGroup.mdx
View File

@ -6,7 +6,7 @@ route: components/InputGroup
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { InputGroup } from '@ohif/ui';
import { InputGroup } from '../';
# Input Group

2
platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
const baseLabelClassName =
'flex flex-col flex-1 text-white text-lg pl-1 select-none';

2
platform/ui/src/components/InputMultiSelect/InputMultiSelect.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Select, InputLabelWrapper } from '@ohif/ui';
import { Select, InputLabelWrapper } from '../';
const InputMultiSelect = ({
label,

2
platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx
View File

@ -6,7 +6,7 @@ route: components/InputMultiSelect
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { InputMultiSelect } from '@ohif/ui';
import { InputMultiSelect } from '../';
# Input Multi Select

2
platform/ui/src/components/InputText/InputText.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Input, InputLabelWrapper } from '@ohif/ui';
import { Input, InputLabelWrapper } from '../';
const InputText = ({
label,

2
platform/ui/src/components/InputText/InputText.mdx
View File

@ -6,7 +6,7 @@ route: components/InputText
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { InputText } from '@ohif/ui';
import { InputText } from '../';
# Input Text

2
platform/ui/src/components/Label/Label.mdx
View File

@ -5,7 +5,7 @@ route: components/label
---
import { Playground, Props } from 'docz';
import { Label } from '@ohif/ui';
import { Label } from '../';
# Label

2
platform/ui/src/components/ListMenu/ListMenu.mdx
View File

@ -6,7 +6,7 @@ route: components/listMenu
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { ListMenu } from '@ohif/ui';
import { ListMenu } from '../';
# List Menu

2
platform/ui/src/components/MeasurementTable/MeasurementItem.js
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
const [isHovering, setIsHovering] = useState(false);

2
platform/ui/src/components/MeasurementTable/MeasurementTable.mdx
View File

@ -6,7 +6,7 @@ route: components/measurementTable
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { MeasurementTable } from '@ohif/ui';
import { MeasurementTable } from '../';
# Measurement Table

5
platform/ui/src/components/Modal/Modal.jsx
View File

@ -4,9 +4,10 @@ import ReactModal from 'react-modal';
import './Modal.css';
import { Typography, useModal, Icon } from '@ohif/ui';
import { Typography, Icon } from '../../components';
import { useModal } from '../../contextProviders';
ReactModal.setAppElement(document.getElementById('root'));
if (typeof document !== 'undefined') ReactModal.setAppElement(document.getElementById('root'));
const Modal = ({
closeButton,

2
platform/ui/src/components/NavBar/NavBar.mdx
View File

@ -5,7 +5,7 @@ route: components/navBar
---
import { Playground, Props } from 'docz';
import { NavBar, Typography } from '@ohif/ui';
import { NavBar, Typography } from '../';
# NavBar

2
platform/ui/src/components/Notification/Notification.jsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Button, Icon } from '@ohif/ui';
import { Button, Icon } from '../';
const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
const notificationRef = useRef(null);

2
platform/ui/src/components/Notification/Notification.mdx
View File

@ -5,7 +5,7 @@ route: components/notification
---
import { Playground, Props } from 'docz';
import { Notification } from '@ohif/ui';
import { Notification } from '../';
# Notification

2
platform/ui/src/components/SegmentationTable/SegmentationTable.jsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
const SegmentationTable = ({ title, amount, data }) => {
const [activeItem, setActiveItem] = useState(null);

2
platform/ui/src/components/SegmentationTable/SegmentationTable.mdx
View File

@ -5,7 +5,7 @@ route: components/segmentationTable
---
import { Playground, Props } from 'docz';
import { SegmentationTable } from '@ohif/ui';
import { SegmentationTable } from '../';
# Segmentation Table

2
platform/ui/src/components/Select/Select.mdx
View File

@ -5,7 +5,7 @@ route: components/select
---
import { Playground, Props } from 'docz';
import { Select } from '@ohif/ui';
import { Select } from '../';
# Select

2
platform/ui/src/components/SidePanel/SidePanel.jsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Button, Icon } from '@ohif/ui';
import { Button, Icon } from '../';
const borderSize = 4;
const expandedWidth = 248;

2
platform/ui/src/components/SidePanel/SidePanel.mdx
View File

@ -5,7 +5,7 @@ route: components/sidePanel
---
import { Playground, Props } from 'docz';
import { SidePanel } from '@ohif/ui';
import { SidePanel } from '../';
# SidePanel

2
platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonGroup, Button, StudyItem, ThumbnailList } from '@ohif/ui';
import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';
const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
const activeButtonClasses = 'bg-primary-main';

2
platform/ui/src/components/StudyBrowser/StudyBrowser.mdx
View File

@ -5,7 +5,7 @@ route: components/studyBrowser
---
import { Playground, Props } from 'docz';
import { StudyBrowser } from '@ohif/ui';
import { StudyBrowser } from '../';
# StudyBrowser

2
platform/ui/src/components/StudyItem/StudyItem.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
const baseClasses =
'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none';

2
platform/ui/src/components/StudyItem/StudyItem.mdx
View File

@ -6,7 +6,7 @@ route: components/studyItem
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { StudyItem } from '@ohif/ui';
import { StudyItem } from '../';
# StudyItem

2
platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
const StudyListExpandedRow = ({
seriesTableColumns,

3
platform/ui/src/components/StudyListFilter/StudyListFilter.jsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon, Typography, InputGroup, useModal } from '@ohif/ui';
import { Button, Icon, Typography, InputGroup } from '../../components';
import { useModal } from '../../contextProviders';
const StudyListFilter = ({
filtersMeta,

2
platform/ui/src/components/StudyListFilter/StudyListFilter.mdx
View File

@ -6,7 +6,7 @@ route: components/studyListFilter
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { StudyListFilter } from '@ohif/ui';
import { StudyListFilter } from '../';
# Study List Filter

2
platform/ui/src/components/StudyListPagination/StudyListPagination.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonGroup, Icon, Typography } from '@ohif/ui';
import { Button, ButtonGroup, Icon, Typography } from '../';
const StudyListPagination = ({
onChangePage,

2
platform/ui/src/components/StudyListPagination/StudyListPagination.mdx
View File

@ -6,7 +6,7 @@ route: components/studyListPagination
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { StudyListPagination } from '@ohif/ui';
import { StudyListPagination } from '../';
# StudyListPagination

2
platform/ui/src/components/StudyListTable/StudyListTable.mdx
View File

@ -6,7 +6,7 @@ route: components/studyListTable
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { StudyListTable } from '@ohif/ui';
import { StudyListTable } from '../';
# StudyListTable

2
platform/ui/src/components/StudyListTable/StudyListTableRow.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
const StudyListTableRow = props => {
const { tableData } = props;

2
platform/ui/src/components/Table/Table.mdx
View File

@ -5,7 +5,7 @@ route: components/table
---
import { Playground, Props, Link } from 'docz';
import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
# Table

2
platform/ui/src/components/Thumbnail/Thumbnail.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useDrag } from 'react-dnd';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
/**
*

2
platform/ui/src/components/Thumbnail/Thumbnail.mdx
View File

@ -5,7 +5,7 @@ route: components/thumbnail
---
import { Playground, Props } from 'docz';
import { Thumbnail } from '@ohif/ui';
import { Thumbnail } from '../';
# Thumbnail

2
platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../';
const ThumbnailList = ({
thumbnails,

2
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useDrag } from 'react-dnd';
import { Icon, Tooltip, Typography } from '@ohif/ui';
import { Icon, Tooltip, Typography } from '../';
const ThumbnailNoImage = ({
displaySetInstanceUID,

2
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.mdx
View File

@ -5,7 +5,7 @@ route: components/ThumbnailNoImage
---
import { Playground, Props } from 'docz';
import { ThumbnailNoImage } from '@ohif/ui';
import { ThumbnailNoImage } from '../';
# ThumbnailNoImage

2
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
import { Icon, Thumbnail, Tooltip } from '../';
const ThumbnailTracked = ({
displaySetInstanceUID,

2
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx
View File

@ -5,7 +5,7 @@ route: components/ThumbnailTracked
---
import { Playground, Props } from 'docz';
import { ThumbnailTracked } from '@ohif/ui';
import { ThumbnailTracked } from '../';
# ThumbnailTracked

2
platform/ui/src/components/ToolbarButton/ToolbarButton.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { IconButton, Icon, Tooltip } from '@ohif/ui';
import { IconButton, Icon, Tooltip } from '../';
const ToolbarButton = ({
type,

2
platform/ui/src/components/ToolbarButton/ToolbarButton.mdx
View File

@ -6,7 +6,7 @@ route: components/toolbarButton
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { ToolbarButton } from '@ohif/ui';
import { ToolbarButton } from '../';
# Toolbar Button

2
platform/ui/src/components/Tooltip/Tooltip.mdx
View File

@ -5,7 +5,7 @@ route: components/tooltip
---
import { Playground, Props } from 'docz';
import { Tooltip, Typography } from '@ohif/ui';
import { Tooltip, Typography } from '../';
# Tooltip

16
platform/ui/src/components/TooltipClipboard/TooltipClipboard.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import { Icon } from '../';
const DELAY_TO_SHOW = 1000;
const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide
@ -92,12 +92,20 @@ const TooltipClipboard = ({ children, text }) => {
useEffect(() => {
if (isActive) {
refreshElementPosition();
window.addEventListener('scroll', refreshElementPosition);
if (typeof window !== 'undefined') {
window.addEventListener('scroll', refreshElementPosition);
}
} else {
window.removeEventListener('scroll', refreshElementPosition);
if (typeof window !== 'undefined') {
window.removeEventListener('scroll', refreshElementPosition);
}
}
return () => window.removeEventListener('scroll', refreshElementPosition);
return () => {
if (typeof window !== 'undefined') {
window.removeEventListener('scroll', refreshElementPosition);
}
};
}, [isActive]);
const onClickHandler = e => {

2
platform/ui/src/components/TooltipClipboard/TooltipClipboard.mdx
View File

@ -5,7 +5,7 @@ route: components/tooltipClipboard
---
import { Playground, Props } from 'docz';
import { TooltipClipboard } from '@ohif/ui';
import { TooltipClipboard } from '../';
# Tooltip Clipboard

2
platform/ui/src/components/Typography/Typography.mdx
View File

@ -5,7 +5,7 @@ route: components/typography
---
import { Playground, Props } from 'docz';
import { Typography } from '@ohif/ui';
import { Typography } from '../';
# Typography

4
platform/ui/src/components/Viewport/Viewport.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { ViewportActionBar, Notification, Button } from '@ohif/ui';
import { ViewportActionBar, Notification, Button } from '../';
const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
return (
@ -33,7 +33,7 @@ const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
},
]}
onSubmit={value => {
window.alert(value);
if (typeof window !== 'undefined') window.alert(value);
}}
/>
</div>

2
platform/ui/src/components/Viewport/Viewport.mdx
View File

@ -5,7 +5,7 @@ route: components/viewport
---
import { Playground, Props } from 'docz';
import { Viewport } from '@ohif/ui';
import { Viewport } from '../';
# Viewport

2
platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
import { Icon, ButtonGroup, Button, Tooltip } from '../';
import useOnClickOutside from '../../utils/useOnClickOutside';
const classes = {

2
platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx
View File

@ -5,7 +5,7 @@ route: components/viewportActionBar
---
import { Playground, Props } from 'docz';
import { ViewportActionBar } from '@ohif/ui';
import { ViewportActionBar } from '../';
# Viewport Action Bar

2
platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx
View File

@ -17,7 +17,7 @@ import {
Select,
InputLabelWrapper,
Button,
} from '@ohif/ui';
} from '../';
const FILE_TYPE_OPTIONS = [
{

3
platform/ui/src/components/ViewportGrid/ViewportGrid.mdx
View File

@ -5,7 +5,8 @@ route: components/viewportGrid
---
import { Playground, Props } from 'docz';
import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';
import { DragAndDropProvider } from '../../contextProviders';
import { ViewportGrid } from '../../components';
# ViewportGrid

3
platform/ui/src/components/ViewportPane/ViewportPane.mdx
View File

@ -5,7 +5,8 @@ route: components/viewport-pane
---
import { Playground, Props } from 'docz';
import { DragAndDropProvider, ViewportGrid, ViewportPane } from '@ohif/ui';
import { ViewportGrid, ViewportPane } from '../../components';
import { DragAndDropProvider } from '../../contextProviders';
# ViewportPane

11
platform/ui/src/contextProviders/DialogProvider.jsx
View File

@ -11,7 +11,12 @@ import PropTypes from 'prop-types';
import Draggable from 'react-draggable';
import classNames from 'classnames';
import { utils } from '@ohif/core';
/*
* This is a workaround to import things from ohif/core as docz does
* not allow us to access window element and @ohif/core does use it once
* we import to instanciate cornerstone
*/
import guid from './../../../core/src/utils/guid';
import './DialogProvider.css';
@ -88,7 +93,7 @@ const DialogProvider = ({ children, service }) => {
let dialogId = id;
if (!dialogId) {
dialogId = utils.guid();
dialogId = guid();
}
setDialogs(dialogs => [...dialogs, { ...props, id: dialogId }]);
@ -172,7 +177,7 @@ const DialogProvider = ({ children, service }) => {
defaultPosition={position}
bounds="parent"
onStart={event => {
const e = event || window.event;
const e = event || (typeof window !== 'undefined' && window.event);
const target = e.target || e.srcElement;
const BLACKLIST = [
'SVG',

2
platform/ui/src/contextProviders/DragAndDropProvider.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import TouchBackend from 'react-dnd-touch-backend';
// import TouchBackend from 'react-dnd-touch-backend';
// TODO: this is false when it should not be :thinking:
const isTouchDevice =

2
platform/ui/src/contextProviders/ModalProvider.mdx
View File

@ -4,7 +4,7 @@ route: customHooks/modalProvider
---
import { Props } from 'docz';
import { ModalProvider } from '@ohif/ui';
import { ModalProvider } from '../contextProviders';
import ModalComponent from './ModalComponent.jsx';
# Modal Context Provider

22
platform/ui/src/contextProviders/SnackbarProvider.jsx
View File

@ -92,15 +92,17 @@ const SnackbarProvider = ({ children, service }) => {
setSnackbarItems(() => []);
};
/**
* expose snackbar methods to window for debug purposes
* TODO: Check if it's really necessary
*/
window.snackbar = {
show,
hide,
hideAll,
};
if (typeof window !== 'undefined') {
/**
* expose snackbar methods to window for debug purposes
* TODO: Check if it's really necessary
*/
window.snackbar = {
show,
hide,
hideAll,
};
}
return (
<SnackbarContext.Provider value={{ show, hide, hideAll, snackbarItems }}>
@ -133,7 +135,7 @@ SnackbarProvider.propTypes = {
export const withSnackbar = Component => {
return function WrappedComponent(props) {
const snackbarContext = {
...useSnackbarContext(),
...useSnackbar(),
};
return <Component {...props} snackbarContext={snackbarContext} />;
};

5
platform/ui/src/contextProviders/ViewportDialogProvider.jsx
View File

@ -41,10 +41,7 @@ const ViewportDialogProvider = ({ children, service }) => {
useEffect(() => {
if (service) {
service.setServiceImplementation({
hide,
show,
});
service.setServiceImplementation({ hide, show });
}
}, [hide, service, show]);

36
platform/ui/src/contextProviders/ViewportDialogProvider.mdx
View File

@ -6,15 +6,11 @@ route: customHooks/viewportDialogProvider
import { Playground, Props } from 'docz';
<!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
import { UIViewportDialogService, ServicesManager } from './../../../core/src/services';
import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
import ServicesManager from './../../../core/src/services/ServicesManager';
import {
ViewportDialogProvider,
Dialog,
Button,
useViewportDialog,
Notification,
} from '@ohif/ui';
import { Dialog, Button, Notification } from '../components';
import { ViewportDialogProvider, useViewportDialog } from '../contextProviders';
# Viewport Dialog Provider
@ -47,20 +43,18 @@ component across all application.
value: 1,
},
]}
onSubmit={value => { window.alert(value); }}
onSubmit={value => {
if (typeof window !== 'undefined') {
window.alert(value);
}
}}
/>
);
};
const ViewportActionButtons = () => {
const dialog = useViewportDialog();
const [dialogState, dialogApi] = useViewportDialog();
return (
<Button
onClick={() =>
dialog.show({
content: ViewportNotification,
})
}
>
<Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
Open Dialog
</Button>
);
@ -114,7 +108,11 @@ component across all application.
value: 1,
},
]}
onSubmit={value => { window.alert(value); }}
onSubmit={value => {
if (typeof window !== 'undefined') {
window.alert(value);
}
}}
/>
);
};
@ -124,6 +122,7 @@ component across all application.
// Get service instance
const _UIViewportDialogService =
servicesManager.services.UIViewportDialogService;
console.log(_UIViewportDialogService);
return (
<div className="w-full flex flex-col p-4" style={{height: '400px'}}>
<div className="flex flex-2">
@ -175,7 +174,6 @@ component across all application.
}}
</Playground>
## Properties:
<Props of={ViewportDialogProvider} />

7
platform/ui/src/gatsby-theme-docz/wrapper.js
View File

@ -1,9 +1,10 @@
import * as React from 'react';
import './tailwind.css';
import './theme.css';
import PropTypes from 'prop-types';
const Wrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>;
import './tailwind.css';
import './theme.css';
const Wrapper = ({ children }) => <>{children}</>;
Wrapper.propTypes = {
children: PropTypes.node,

2
platform/ui/src/pages/Colors/BackgroundColor.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import tailwindConfig from '../../../tailwind.config';
import tailwindConfig from './tailwind.config';
const BackgroundColor = ({ color }) => {
const getColorValue = () => {

818
platform/ui/src/pages/Colors/tailwind.config.js Normal file
View File

@ -0,0 +1,818 @@
module.exports = {
prefix: '',
important: false,
separator: ':',
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
colors: {
overlay: 'rgba(0, 0, 0, 0.8)',
transparent: 'transparent',
black: '#000',
white: '#fff',
initial: 'initial',
inherit: 'inherit',
indigo: {
dark: '#0b1a42',
},
aqua: {
pale: '#7bb2ce',
},
primary: {
light: '#5acce6',
main: '#0944b3',
dark: '#090c29',
active: '#348cfd',
},
secondary: {
light: '#3a3f99',
main: '#2b166b',
dark: '#041c4a',
active: '#1f1f27',
},
common: {
bright: '#e1e1e1',
light: '#a19fad',
main: '#fff',
dark: '#726f7e',
active: '#2c3074',
},
gray: {
100: '#f7fafc',
200: '#edf2f7',
300: '#e2e8f0',
400: '#cbd5e0',
500: '#a0aec0',
600: '#718096',
700: '#4a5568',
800: '#2d3748',
900: '#1a202c',
},
red: {
100: '#fff5f5',
200: '#fed7d7',
300: '#feb2b2',
400: '#fc8181',
500: '#f56565',
600: '#e53e3e',
700: '#c53030',
800: '#9b2c2c',
900: '#742a2a',
},
orange: {
100: '#fffaf0',
200: '#feebc8',
300: '#fbd38d',
400: '#f6ad55',
500: '#ed8936',
600: '#dd6b20',
700: '#c05621',
800: '#9c4221',
900: '#7b341e',
},
yellow: {
100: '#fffff0',
200: '#fefcbf',
300: '#faf089',
400: '#f6e05e',
500: '#ecc94b',
600: '#d69e2e',
700: '#b7791f',
800: '#975a16',
900: '#744210',
},
green: {
100: '#f0fff4',
200: '#c6f6d5',
300: '#9ae6b4',
400: '#68d391',
500: '#48bb78',
600: '#38a169',
700: '#2f855a',
800: '#276749',
900: '#22543d',
},
teal: {
100: '#e6fffa',
200: '#b2f5ea',
300: '#81e6d9',
400: '#4fd1c5',
500: '#38b2ac',
600: '#319795',
700: '#2c7a7b',
800: '#285e61',
900: '#234e52',
},
blue: {
100: '#ebf8ff',
200: '#bee3f8',
300: '#90cdf4',
400: '#63b3ed',
500: '#4299e1',
600: '#3182ce',
700: '#2b6cb0',
800: '#2c5282',
900: '#2a4365',
},
indigo: {
100: '#ebf4ff',
200: '#c3dafe',
300: '#a3bffa',
400: '#7f9cf5',
500: '#667eea',
600: '#5a67d8',
700: '#4c51bf',
800: '#434190',
900: '#3c366b',
},
purple: {
100: '#faf5ff',
200: '#e9d8fd',
300: '#d6bcfa',
400: '#b794f4',
500: '#9f7aea',
600: '#805ad5',
700: '#6b46c1',
800: '#553c9a',
900: '#44337a',
},
pink: {
100: '#fff5f7',
200: '#fed7e2',
300: '#fbb6ce',
400: '#f687b3',
500: '#ed64a6',
600: '#d53f8c',
700: '#b83280',
800: '#97266d',
900: '#702459',
},
},
spacing: {
px: '1px',
'0': '0',
'1': '0.15rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'18': '4.5rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem',
'72': '18rem',
'80': '20rem',
'88': '22rem',
'96': '24rem',
'104': '26rem',
'112': '28rem',
'250px': '250px',
},
backgroundColor: theme => theme('colors'),
backgroundPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
},
borderColor: theme => ({
...theme('colors'),
default: theme('colors.gray.300', 'currentColor'),
}),
borderRadius: {
none: '0',
sm: '0.125rem',
default: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
full: '9999px',
},
borderWidth: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
'8': '8px',
},
boxShadow: {
xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
default:
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md:
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg:
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl:
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
none: 'none',
},
container: {},
cursor: {
auto: 'auto',
default: 'default',
pointer: 'pointer',
wait: 'wait',
text: 'text',
move: 'move',
'not-allowed': 'not-allowed',
},
fill: {
current: 'currentColor',
},
flex: {
'1': '1 1 0%',
'0.3': '0.3 0.3 0%',
'0.5': '0.5 0.5 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
},
flexGrow: {
'0': '0',
default: '1',
},
flexShrink: {
'0': '0',
default: '1',
},
fontFamily: {
sans: [
'Lato',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
},
fontSize: {
xs: '0.65rem',
sm: '0.75rem',
base: '0.875rem',
lg: '1rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
},
fontWeight: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
height: theme => ({
auto: 'auto',
...theme('spacing'),
full: '100%',
screen: '100vh',
}),
inset: {
'0': '0',
auto: 'auto',
full: '100%',
viewport: '0.5rem',
'1/2': '50%',
'viewport-scrollbar': '1.3rem',
},
letterSpacing: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
'3': '.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'9': '2.25rem',
'10': '2.5rem',
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
}),
maxHeight: theme => ({
full: '100%',
screen: '100vh',
...theme('spacing'),
}),
maxWidth: (theme, { breakpoints }) => ({
none: 'none',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
full: '100%',
...breakpoints(theme('screens')),
...theme('spacing'),
}),
minHeight: theme => ({
...theme('spacing'),
'0': '0',
full: '100%',
screen: '100vh',
}),
minWidth: theme => ({
...theme('spacing'),
'0': '0',
xs: '2rem',
sm: '4rem',
md: '6rem',
lg: '8rem',
xl: '10rem',
full: '100%',
}),
objectPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
opacity: {
'0': '0',
'5': '.5',
'10': '.10',
'15': '.15',
'20': '.20',
'25': '.25',
'30': '.30',
'35': '.35',
'40': '.40',
'45': '.45',
'50': '.50',
'55': '.55',
'60': '.60',
'65': '.65',
'70': '.70',
'75': '.75',
'80': '.80',
'85': '.85',
'90': '.90',
'95': '.95',
'100': '1',
},
order: {
first: '-9999',
last: '9999',
none: '0',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
},
padding: theme => theme('spacing'),
placeholderColor: theme => theme('colors'),
stroke: theme => ({
...theme('colors'),
current: 'currentColor',
}),
strokeWidth: {
'0': '0',
'1': '1',
'2': '2',
},
textColor: theme => theme('colors'),
width: theme => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
'1/24': '4.166666667%',
'2/24': '8.333333333%',
'3/24': '12.5%',
'4/24': '16.66666667%',
'5/24': '20.83333333%',
'6/24': '25%',
'7/24': '29.16666667%',
'8/24': '33.33333333%',
'9/24': '37.5%',
'10/24': '41.66666667%',
'11/24': '45.83333333%',
'12/24': '50%',
'13/24': '54.16666667%',
'14/24': '58.33333333%',
'15/24': '62.5%',
'16/24': '66.66666667%',
'17/24': '70.83333333%',
'18/24': '75%',
'19/24': '79.16666667%',
'20/24': '83.33333333%',
'21/24': '87.5%',
'22/24': '91.66666667%',
'23/24': '95.83333333%',
full: '100%',
screen: '100vw',
'max-content': 'max-content',
}),
zIndex: {
auto: 'auto',
'0': '0',
'10': '10',
'20': '20',
'30': '30',
'40': '40',
'50': '50',
},
gap: theme => theme('spacing'),
gridTemplateColumns: {
none: 'none',
'1': 'repeat(1, minmax(0, 1fr))',
'2': 'repeat(2, minmax(0, 1fr))',
'3': 'repeat(3, minmax(0, 1fr))',
'4': 'repeat(4, minmax(0, 1fr))',
'5': 'repeat(5, minmax(0, 1fr))',
'6': 'repeat(6, minmax(0, 1fr))',
'7': 'repeat(7, minmax(0, 1fr))',
'8': 'repeat(8, minmax(0, 1fr))',
'9': 'repeat(9, minmax(0, 1fr))',
'10': 'repeat(10, minmax(0, 1fr))',
'11': 'repeat(11, minmax(0, 1fr))',
'12': 'repeat(12, minmax(0, 1fr))',
},
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
},
gridColumnStart: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
},
gridColumnEnd: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
},
gridTemplateRows: {
none: 'none',
'1': 'repeat(1, minmax(0, 1fr))',
'2': 'repeat(2, minmax(0, 1fr))',
'3': 'repeat(3, minmax(0, 1fr))',
'4': 'repeat(4, minmax(0, 1fr))',
'5': 'repeat(5, minmax(0, 1fr))',
'6': 'repeat(6, minmax(0, 1fr))',
},
gridRow: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
},
gridRowStart: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
},
gridRowEnd: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
},
transformOrigin: {
center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',
},
scale: {
'0': '0',
'50': '.5',
'75': '.75',
'90': '.9',
'95': '.95',
'100': '1',
'105': '1.05',
'110': '1.1',
'125': '1.25',
'150': '1.5',
},
rotate: {
'-180': '-180deg',
'-90': '-90deg',
'-45': '-45deg',
'0': '0',
'45': '45deg',
'90': '90deg',
'180': '180deg',
},
translate: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
'-full': '-100%',
'-1/2': '-50%',
'1/2': '50%',
full: '100%',
}),
skew: {
'-12': '-12deg',
'-6': '-6deg',
'-3': '-3deg',
'0': '0',
'3': '3deg',
'6': '6deg',
'12': '12deg',
},
transitionProperty: {
none: 'none',
all: 'all',
height: 'height',
default:
'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
colors: 'background-color, border-color, color, fill, stroke',
opacity: 'opacity',
shadow: 'box-shadow',
transform: 'transform',
},
transitionTimingFunction: {
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
transitionDuration: {
'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',
},
},
variants: {
accessibility: ['responsive', 'focus'],
alignContent: ['responsive'],
alignItems: ['responsive'],
alignSelf: ['responsive'],
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColor: [
'responsive',
'hover',
'focus',
'active',
'group-focus',
'group-hover',
],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: ['responsive'],
borderColor: [
'responsive',
'hover',
'focus',
'active',
'group-focus',
'group-hover',
],
borderRadius: ['responsive', 'focus', 'first', 'last'],
borderStyle: ['responsive', 'focus'],
borderWidth: ['responsive', 'focus', 'first', 'last'],
boxShadow: ['responsive', 'hover', 'focus'],
boxSizing: ['responsive'],
cursor: ['responsive'],
display: ['responsive'],
fill: ['responsive'],
flex: ['responsive'],
flexDirection: ['responsive'],
flexGrow: ['responsive'],
flexShrink: ['responsive'],
flexWrap: ['responsive'],
float: ['responsive'],
clear: ['responsive'],
fontFamily: ['responsive'],
fontSize: ['responsive'],
fontSmoothing: ['responsive'],
fontStyle: ['responsive'],
fontWeight: ['responsive', 'hover', 'focus'],
height: ['responsive'],
inset: ['responsive'],
justifyContent: ['responsive'],
letterSpacing: ['responsive'],
lineHeight: ['responsive'],
listStylePosition: ['responsive'],
listStyleType: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
objectFit: ['responsive'],
objectPosition: ['responsive'],
opacity: ['responsive', 'hover', 'focus', 'active'],
order: ['responsive'],
outline: ['responsive', 'focus'],
overflow: ['responsive'],
padding: ['responsive', 'first'],
placeholderColor: ['responsive', 'focus'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
stroke: ['responsive'],
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
textDecoration: ['responsive', 'hover', 'focus'],
textTransform: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
width: ['responsive'],
wordBreak: ['responsive'],
zIndex: ['responsive'],
gap: ['responsive'],
gridAutoFlow: ['responsive'],
gridTemplateColumns: ['responsive'],
gridColumn: ['responsive'],
gridColumnStart: ['responsive'],
gridColumnEnd: ['responsive'],
gridTemplateRows: ['responsive'],
gridRow: ['responsive'],
gridRowStart: ['responsive'],
gridRowEnd: ['responsive'],
transform: ['responsive'],
transformOrigin: ['responsive'],
scale: ['responsive', 'hover', 'focus'],
rotate: ['responsive', 'hover', 'focus'],
translate: ['responsive', 'hover', 'focus'],
skew: ['responsive', 'hover', 'focus'],
transitionProperty: ['responsive'],
transitionTimingFunction: ['responsive'],
transitionDuration: ['responsive'],
},
corePlugins: {},
plugins: [],
};

2
platform/ui/src/pages/getting-started.mdx
View File

@ -4,7 +4,7 @@ route: /
---
import { Playground } from 'docz';
import { Button } from '@ohif/ui';
import { Button } from '../components';
# Getting Started

17
platform/ui/src/utils/useOnClickOutside.js
View File

@ -2,13 +2,22 @@ export default (element, onClickOutside) => {
const clickOutsideHandler = event => {
if (element.current && !element.current.contains(event.target)) {
onClickOutside();
window.removeEventListener('mousedown', clickOutsideHandler);
if (typeof window !== 'undefined') {
window.removeEventListener('mousedown', clickOutsideHandler);
}
}
};
const add = () => window.addEventListener('mousedown', clickOutsideHandler);
const remove = () =>
window.removeEventListener('mousedown', clickOutsideHandler);
const add = () => {
if (typeof window !== 'undefined') {
window.addEventListener('mousedown', clickOutsideHandler);
}
};
const remove = () => {
if (typeof window !== 'undefined') {
window.removeEventListener('mousedown', clickOutsideHandler);
}
};
return {
add,

5
platform/ui/src/views/StudyList/StudyList.js
View File

@ -7,14 +7,15 @@ import moment from 'moment';
import {
EmptyStudies,
utils,
Icon,
StudyListExpandedRow,
Button,
StudyListPagination,
StudyListTable,
StudyListFilter,
} from '@ohif/ui';
} from '../../components';
import utils from '../../utils';
// fix imports after refactor
import Header from './components/Header';

2
platform/ui/src/views/StudyList/StudyList.mdx
View File

@ -19,7 +19,7 @@ import {
StudyListTable,
StudyListPagination,
StudyListFilter
} from '@ohif/ui';
} from '../../components';
import classnames from 'classnames';

2
platform/ui/src/views/StudyList/components/Header.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { IconButton, Icon, NavBar } from '@ohif/ui';
import { IconButton, Icon, NavBar } from '../../../components';
import OHIFLogo from './OHIFLogo.js';

2
platform/ui/src/views/StudyList/components/OHIFLogo.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Svg } from '@ohif/ui';
import { Svg } from '../../../components';
function OHIFLogo() {
return (

3
platform/ui/src/views/Viewer/Viewer.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { SidePanel, StudyBrowser, DragAndDropProvider } from '@ohif/ui';
import { SidePanel, StudyBrowser } from '../../components';
import { DragAndDropProvider } from '../../contextProviders';
import Header from './components/Header';

2
platform/ui/src/views/Viewer/Viewer.mdx
View File

@ -22,7 +22,7 @@ import {
Viewport,
ViewportGrid,
ViewportPane,
} from '@ohif/ui';
} from '../../components';
import Header from './components/Header';

2
platform/ui/src/views/Viewer/components/Header.js
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
import { NavBar, Svg, Icon, IconButton } from '../../../components';
const Header = () => {
const [activeTool, setActiveTool] = useState('Zoom');

2377
yarn.lock
View File

File diff suppressed because it is too large Load Diff