docs: Remove UI components for now, we will use Storybook instead later. Clean up links and introduction. (#2520)
This commit is contained in:
Erik Ziegler authored and Alireza committed
1 parent
2327b4ae12
commit
00d7192423
104 files changed
+538
-4956
No files matched your search
@@ -1,24 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { usePluginData } from '@docusaurus/useGlobalData';
|
||||
import { PropsTable } from '../react-docgen-props-table/PropsTable'
|
||||
|
||||
export function ComponentPropsTable({ componentName }) {
|
||||
if (!componentName) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = usePluginData('docusaurus-plugin-react-docgen')
|
||||
const componentDocGenData = data[componentName.toLowerCase()]
|
||||
if (!componentDocGenData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PropsTable className={'table-auto'} props={componentDocGenData.props}/>
|
||||
)
|
||||
}
|
||||
|
||||
ComponentPropsTable.PropTypes = {
|
||||
componentName: PropTypes.string.required
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './HomepageFeatures.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Focus on What Matters',
|
||||
Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Powered by React',
|
||||
Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({Svg, title, description}) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} alt={title} />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
@@ -99,7 +99,7 @@ html[data-theme='dark'] {
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -225,7 +225,6 @@ article header h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Footer logo MGH */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
# Help
|
||||
|
||||
We all need a little help sometimes. Don't let a few roadblocks stand in the way
|
||||
of you building something awesome.
|
||||
|
||||
## Community Support
|
||||
|
||||
If you're a developer looking to contribute code, documentation, or discussion;
|
||||
we are more than happy to help provide clarification and answer questions via
|
||||
[GitHub issues][gh-issues] or our [community forum][google-group]. Regular
|
||||
contributors may also be invited to join our Slack Group to streamline
|
||||
discussion.
|
||||
|
||||
For bug reports and feature requests (including incomplete or confusing
|
||||
documentation), [GitHub issues][gh-issues] continue to be your best avenue of
|
||||
communication.
|
||||
|
||||
Complex issues specific to your organization/situation are still okay to post,
|
||||
but they're less likely to receive a response. Unfortunately, we have limited
|
||||
resources and must be judicious with how we allocate them. If you find yourself
|
||||
in this situation and in need of assistance, it may be in your best interest to
|
||||
persue paid support.
|
||||
|
||||
## Commercial Support
|
||||
|
||||
The Open Health Imaging Foundation does not offer commercial support, however,
|
||||
some community members do offer consulting services. You can search our
|
||||
[Community Forum](https://community.ohif.org/) for more information.
|
||||
|
||||
<!--
|
||||
Links
|
||||
-->
|
||||
|
||||
[gh-issues]: https://github.com/OHIF/Viewers/issues/
|
||||
[google-group]: https://groups.google.com/forum/#!forum/cornerstone-platform
|
||||
@@ -1,25 +0,0 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Markdown page example
|
||||
---
|
||||
|
||||
# Markdown page example
|
||||
|
||||
You don't need React to write simple standalone pages.
|
||||
@@ -1,102 +0,0 @@
|
||||
import React from 'react';
|
||||
import get from 'lodash.get';
|
||||
import capitalize from 'capitalize';
|
||||
|
||||
import { humanize } from './humanize-prop';
|
||||
import { Table } from './components/Table';
|
||||
import { Tooltip } from './components/Tooltip';
|
||||
|
||||
const styles = {
|
||||
thead: {
|
||||
textAlign: 'left',
|
||||
},
|
||||
};
|
||||
|
||||
export const getPropType = (prop, Tooltip) => {
|
||||
const propName = prop.flowType ? prop.flowType.name : prop.type.name;
|
||||
const isEnum = propName.startsWith('"') || propName === 'enum';
|
||||
const name = capitalize(isEnum ? 'enum' : propName);
|
||||
const value = prop.type && prop.type.value;
|
||||
|
||||
if (!name) return null;
|
||||
|
||||
if (
|
||||
!Tooltip ||
|
||||
(isEnum && typeof value === 'string') ||
|
||||
(!prop.flowType && !isEnum && !value) ||
|
||||
(prop.flowType && !prop.flowType.elements)
|
||||
) {
|
||||
return name;
|
||||
}
|
||||
|
||||
return prop.flowType ? (
|
||||
<Tooltip text={humanize(prop.flowType)}>{name}</Tooltip>
|
||||
) : (
|
||||
<Tooltip text={humanize(prop.type)}>{name}</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export const PropsTable = ({ props, ...rest }) => {
|
||||
if (!props || typeof props !== 'object') {
|
||||
throw new Error('invalid props passed to PropsTable');
|
||||
}
|
||||
|
||||
const hasDescription = Object.keys(props).some(name => {
|
||||
const description = get(props, `${name}.description`);
|
||||
return Boolean(description) && Boolean(get(description, 'length'));
|
||||
});
|
||||
|
||||
const Thead = 'thead';
|
||||
const Tr = 'tr';
|
||||
const Th = 'th';
|
||||
const Tbody = 'tbody';
|
||||
const Td = 'td';
|
||||
|
||||
return (
|
||||
<Table {...rest}>
|
||||
<Thead style={styles.thead}>
|
||||
<Tr>
|
||||
<Th>Property</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Required</Th>
|
||||
<Th>Default</Th>
|
||||
|
||||
{hasDescription && <Th width="40%">Description</Th>}
|
||||
</Tr>
|
||||
</Thead>
|
||||
|
||||
<Tbody>
|
||||
{props &&
|
||||
Object.keys(props).map(name => {
|
||||
const prop = props[name];
|
||||
|
||||
if (!prop.flowType && !prop.type) return null;
|
||||
return (
|
||||
<Tr key={name}>
|
||||
<Td>{name}</Td>
|
||||
<Td>{getPropType(prop, Tooltip)}</Td>
|
||||
<Td>{String(prop.required)}</Td>
|
||||
{!prop.defaultValue ? (
|
||||
<Td>
|
||||
<em>-</em>
|
||||
</Td>
|
||||
) : (
|
||||
<Td>
|
||||
{prop.defaultValue.value === "''" ? (
|
||||
<em>[Empty String]</em>
|
||||
) : (
|
||||
prop.defaultValue &&
|
||||
prop.defaultValue.value.replace(/'/g, '')
|
||||
)}
|
||||
</Td>
|
||||
)}
|
||||
{hasDescription && (
|
||||
<Td>{prop.description && prop.description}</Td>
|
||||
)}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Table = props => {
|
||||
const { className, style, ...rest } = props;
|
||||
return (
|
||||
<div className={className}>
|
||||
<table className={className} {...rest} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
|
||||
export const Tooltip = ({ text, children }) => {
|
||||
const id = JSON.stringify(text);
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a data-tip data-for={id} href="#" onClick={ev => ev.preventDefault()}>
|
||||
{children}
|
||||
</a>
|
||||
|
||||
<ReactTooltip id={id} effect="solid">
|
||||
{text}
|
||||
</ReactTooltip>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import capitalize from 'capitalize'
|
||||
import get from 'lodash.get'
|
||||
import { humanize } from './humanize-prop'
|
||||
|
||||
export const getPropType = (prop) => {
|
||||
const propName = get(prop.flowType || prop.type, 'name')
|
||||
if (!propName) return null
|
||||
|
||||
const isEnum = propName.startsWith('"') || propName === 'enum'
|
||||
const name = capitalize(isEnum ? 'enum' : propName)
|
||||
const value = get(prop, 'type.value')
|
||||
if (!name) return null
|
||||
|
||||
if (
|
||||
(isEnum && typeof value === 'string') ||
|
||||
(!prop.flowType && !isEnum && !value) ||
|
||||
(prop.flowType && !prop.flowType.elements)
|
||||
) {
|
||||
return name
|
||||
}
|
||||
|
||||
return prop.flowType ? humanize(prop.flowType) : humanize(prop.type)
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import capitalize from 'capitalize'
|
||||
|
||||
const RE_OBJECTOF = /(?:React\.)?(?:PropTypes\.)?objectOf\((?:React\.)?(?:PropTypes\.)?(\w+)\)/
|
||||
|
||||
const getTypeStr = (type) => {
|
||||
switch (type.name.toLowerCase()) {
|
||||
case 'instanceof':
|
||||
return `Class(${type.value})`
|
||||
case 'enum':
|
||||
if (type.computed) return type.value
|
||||
return type.value
|
||||
? type.value.map((v) => `${v.value}`).join(' │ ')
|
||||
: type.raw
|
||||
case 'union':
|
||||
return type.value
|
||||
? type.value.map((t) => `${getTypeStr(t)}`).join(' │ ')
|
||||
: type.raw
|
||||
case 'array':
|
||||
return type.raw
|
||||
case 'arrayof':
|
||||
return `Array<${getTypeStr(type.value)}>`
|
||||
case 'custom':
|
||||
if (type.raw.indexOf('function') !== -1 || type.raw.indexOf('=>') !== -1) {
|
||||
return 'Custom(Function)'
|
||||
} else if (type.raw.toLowerCase().indexOf('objectof') !== -1) {
|
||||
const m = type.raw.match(RE_OBJECTOF)
|
||||
if (m && m[1]) return `ObjectOf(${capitalize(m[1])})`
|
||||
return 'ObjectOf'
|
||||
}
|
||||
return 'Custom'
|
||||
case 'bool':
|
||||
return 'Boolean'
|
||||
case 'func':
|
||||
return 'Function'
|
||||
case 'shape':
|
||||
const shape = type.value
|
||||
const rst = {}
|
||||
|
||||
Object.keys(shape).forEach(key => {
|
||||
rst[key] = getTypeStr(shape[key])
|
||||
})
|
||||
|
||||
return JSON.stringify(rst, null, 2)
|
||||
default:
|
||||
return capitalize(type.name)
|
||||
}
|
||||
}
|
||||
|
||||
export const humanize = (type) => getTypeStr(type)
|
||||
@@ -1,2 +0,0 @@
|
||||
import { PropsTable } from './PropsTable'
|
||||
export default PropsTable
|
||||
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import * as ui from '@ohif/ui';
|
||||
import utils from '../../utils/';
|
||||
|
||||
// Add react-live imports you need here
|
||||
const ReactLiveScope = {
|
||||
React,
|
||||
...React,
|
||||
...ui,
|
||||
classnames,
|
||||
utils,
|
||||
moment,
|
||||
};
|
||||
|
||||
export default ReactLiveScope;
|
||||
Reference in new issue
Block a user