fixes for jsx live blocks

2021-07-14 00:15:02 +02:00 · 2021-07-14 00:15:02 +02:00 · 7a79e42929
commit 7a79e42929
parent 09469e6ac5
12 changed files with 657 additions and 719 deletions
--- a/platform/docs/docs/component-library/components/Button.mdx
+++ b/platform/docs/docs/component-library/components/Button.mdx
@ -18,7 +18,7 @@ import { Button } from '@ohif/ui';

 ## Outlined Buttons

-````jsx live
+```jsx live
 <div className="p-4">
  <Button variant="outlined" className="m-1">
    Default
@ -95,20 +95,10 @@ import { Button } from '@ohif/ui';
    </Button>
  </div>
  <div className="mb-2">
-      <Button
-        variant="contained"
-        rounded="none"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" rounded="none" color="primary" className="m-1">
      Non Rounded
    </Button>
-      <Button
-        variant="contained"
-        rounded="small"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" rounded="small" color="primary" className="m-1">
      Small Rounded
    </Button>
    <Button
@ -119,20 +109,10 @@ import { Button } from '@ohif/ui';
    >
      Medium Rounded
    </Button>
-      <Button
-        variant="contained"
-        rounded="large"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" rounded="large" color="primary" className="m-1">
      Large Rounded
    </Button>
-      <Button
-        variant="contained"
-        rounded="full"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" rounded="full" color="primary" className="m-1">
      Full Rounded
    </Button>
  </div>
@ -185,12 +165,7 @@ import { Button } from '@ohif/ui';
    <Button variant="contained" rounded="small" color="white" className="m-1">
      Small Rounded
    </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="white"
-        className="m-1"
-      >
+    <Button variant="contained" rounded="medium" color="white" className="m-1">
      Medium Rounded
    </Button>
    <Button variant="contained" rounded="large" color="white" className="m-1">
@ -219,84 +194,38 @@ import { Button } from '@ohif/ui';
    </Button>
  </div>
  <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" size="small" color="primary" className="m-1">
      Small
    </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" size="medium" color="primary" className="m-1">
      Medium
    </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="primary"
-        className="m-1"
-      >
+    <Button variant="contained" size="large" color="primary" className="m-1">
      Large
    </Button>
  </div>
  <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="secondary"
-        className="m-1"
-      >
+    <Button variant="contained" size="small" color="secondary" className="m-1">
      Small
    </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="secondary"
-        className="m-1"
-      >
+    <Button variant="contained" size="medium" color="secondary" className="m-1">
      Medium
    </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="secondary"
-        className="m-1"
-      >
+    <Button variant="contained" size="large" color="secondary" className="m-1">
      Large
    </Button>
  </div>
  <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="white"
-        className="m-1"
-      >
+    <Button variant="contained" size="small" color="white" className="m-1">
      Small
    </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="white"
-        className="m-1"
-      >
+    <Button variant="contained" size="medium" color="white" className="m-1">
      Medium
    </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="white"
-        className="m-1"
-      >
+    <Button variant="contained" size="large" color="white" className="m-1">
      Large
    </Button>
  </div>
-
 </div>
 ```

@ -338,9 +267,9 @@ Icon buttons are generally used in toolbars.

 ```javascript
 import { IconButton } from '@ohif/ui';
-````
+```

-````jsx live
+```jsx live
 <div className="p-4 flex flex-col items-center">
  <div className="">
    <IconButton className="m-2">
--- a/platform/docs/docs/component-library/components/ButtonGroup.mdx
+++ b/platform/docs/docs/component-library/components/ButtonGroup.mdx
@ -18,7 +18,7 @@ import { ButtonGroup } from '@ohif/ui';

 ## Basic button group

-````jsx live
+```jsx live
 <div className="p-4 flex flex-col items-center">
  <ButtonGroup color="primary" className="m-2">
    <Button>One</Button>
--- a/platform/docs/docs/component-library/components/DateRange.mdx
+++ b/platform/docs/docs/component-library/components/DateRange.mdx
@ -21,8 +21,7 @@ import { DateRange } from '@ohif/ui';
 ## Date Range

 ```jsx live
-{
-  () => {
+function() {
  const [dates, setDates] = useState({
    startDate: null,
    endDate: null,
@ -38,7 +37,6 @@ import { DateRange } from '@ohif/ui';
      />
    </div>
  );
-  };
 }
 ```

--- a/platform/docs/docs/component-library/components/ErrorBoundary.mdx
+++ b/platform/docs/docs/component-library/components/ErrorBoundary.mdx
@ -18,10 +18,10 @@ import { ErrorBoundary } from '@ohif/ui';

 ## Basic usage

-````jsx live
+```jsx live
  <div className="p-4">
    <ErrorBoundary context="Somewhere">
-      {() => {
+      function() {
        throw new Error('Error!');
        return <p></p>;
      }}
@ -32,7 +32,7 @@ import { ErrorBoundary } from '@ohif/ui';
 ## Custom error fallback

 ```jsx live
-  {() => {
+  function() {
    const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
      return (
        <div>
@ -43,7 +43,7 @@ import { ErrorBoundary } from '@ohif/ui';
    return (
      <div className="p-4">
        <ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
-          {() => {
+          function() {
            throw new Error('Error!');
            return <p></p>;
          }}
--- a/platform/docs/docs/component-library/components/MeasurementTable.mdx
+++ b/platform/docs/docs/component-library/components/MeasurementTable.mdx
@ -18,8 +18,8 @@ import { MeasurementTable } from '@ohif/ui';

 ## Basic usage

-````jsx live
-  {() => {
+```jsx live
+function() {
  const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
  const measurementTableData = {
    title: 'Measurements',
@ -38,19 +38,19 @@ import { MeasurementTable } from '@ohif/ui';
      <MeasurementTable {...measurementTableData} />
    </div>
  );
-  }}
+}
 ```

 ## Empty Data

 ```jsx live
-  {() => {
+function() {
  return (
    <div className="p-4 w-80">
      <MeasurementTable title="Measurements" />
    </div>
  );
-  }}
+}
 ```

 ## Properties
--- a/platform/docs/docs/component-library/components/Select.mdx
+++ b/platform/docs/docs/component-library/components/Select.mdx
@ -16,7 +16,7 @@ import { Select } from '@ohif/ui';

 ## Basic usage

-````jsx live
+```jsx live
 <div className="flex flex-col flex-1 p-4 items-center">
  <div className="w-56">
    <Select
@ -55,7 +55,7 @@ import { Select } from '@ohif/ui';
  <div className="flex flex-col flex-1 p-4 items-center">
    <div className="w-56">
      <Select
-        noOptionsMessage={() => {
+        noOptionsMessage=function() {
          'No Options';
        }}
        options={[]}
--- a/platform/docs/docs/component-library/components/SidePanel.mdx
+++ b/platform/docs/docs/component-library/components/SidePanel.mdx
@ -16,7 +16,7 @@ import { SidePanel } from '@ohif/ui';

 ## Basic usage

-````jsx live
+```jsx live
 <div
  className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
  style={{ height: '500px' }}
@ -24,11 +24,13 @@ import { SidePanel } from '@ohif/ui';
  <SidePanel
    side="left"
    childComponents={{
-        iconName: "group-layers",
-        iconLabel: "Studies",
-        name: "studies",
-        label: "Studies",
-        content: <div className="flex justify-center text-white p-2">panel content</div>,
+      iconName: 'group-layers',
+      iconLabel: 'Studies',
+      name: 'studies',
+      label: 'Studies',
+      content: (
+        <div className="flex justify-center text-white p-2">panel content</div>
+      ),
    }}
  />
  <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
@ -37,7 +39,6 @@ import { SidePanel } from '@ohif/ui';
 </div>
 ```

-
 ## Multiple panels

 ```jsx live
@ -47,20 +48,30 @@ import { SidePanel } from '@ohif/ui';
 >
  <SidePanel
    side="left"
-      childComponents={[{
-        iconName: "group-layers",
-        iconLabel: "Studies",
-        name: "studies",
-        label: "Studies",
-        content: <div className="flex justify-center text-white p-2">studies panel content</div>,
+    childComponents={[
+      {
+        iconName: 'group-layers',
+        iconLabel: 'Studies',
+        name: 'studies',
+        label: 'Studies',
+        content: (
+          <div className="flex justify-center text-white p-2">
+            studies panel content
+          </div>
+        ),
      },
      {
-        iconName: "list-bullets",
-        iconLabel: "Measure",
-        name: "measurements",
-        label: "Measurements",
-        content: <div className="flex justify-center text-white p-2">measure panel content</div>,
-      }]}
+        iconName: 'list-bullets',
+        iconLabel: 'Measure',
+        name: 'measurements',
+        label: 'Measurements',
+        content: (
+          <div className="flex justify-center text-white p-2">
+            measure panel content
+          </div>
+        ),
+      },
+    ]}
  />
  <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
    CONTENT
@ -68,7 +79,6 @@ import { SidePanel } from '@ohif/ui';
 </div>
 ```

-
 ## Properties

 <Props of={SidePanel} />
--- a/platform/docs/docs/component-library/components/ToolbarButton.mdx
+++ b/platform/docs/docs/component-library/components/ToolbarButton.mdx
@ -4,7 +4,7 @@ menu: General
 route: components/toolbarButton
 ---

-import { useState } from 'react';
+import { useState, useCallback } from 'react';

 import { ToolbarButton } from '@ohif/ui';

@ -19,17 +19,18 @@ import { ToolbarButton } from '@ohif/ui';
 ```

 ```jsx live
-function ToolbarButtonExample(props) {
-  // const [isActive, setIsActive] = useState(false);
+function() {
+  const [isActive, setIsActive] = useState(false);
+
  const tool = {
    id: 'Zoom',
    label: 'Zoom',
    icon: 'tool-zoom',
    type: null,
-    commandName: 'setToolActive',
-    commandOptions: { toolName: 'Zoom' },
-    //onClick: () => setIsActive(true),
-    isActive: true,
+    /*commandName: 'setToolActive',
+    commandOptions: { toolName: 'Zoom' },*/
+    onInteraction: () => setIsActive(!isActive),
+    isActive,
  };

  return (
--- a/platform/docs/docs/component-library/components/Typography.mdx
+++ b/platform/docs/docs/component-library/components/Typography.mdx
@ -19,7 +19,7 @@ import { Typography } from '@ohif/ui';

 ## Basic usage

-````jsx live
+```jsx live
 <div className="p-4">
  <Typography variant="h1">
    h1. The five boxing wizards jump quickly.
--- a/platform/docs/docs/component-library/components/ViewportActionBar.mdx
+++ b/platform/docs/docs/component-library/components/ViewportActionBar.mdx
@ -18,7 +18,7 @@ import { ViewportActionBar } from '@ohif/ui';

 ## Basic usage

-````jsx live
+```jsx live
 <div className="p-4 h-64">
  <ViewportActionBar
    onSeriesChange={direction => alert(`Series ${direction}`)}
@ -101,6 +101,7 @@ import { ViewportActionBar } from '@ohif/ui';
  />
 </div>
 ```
+
 ```jsx live
 <div className="p-4 h-64">
  <ViewportActionBar
@ -128,7 +129,6 @@ import { ViewportActionBar } from '@ohif/ui';
  />
 </div>
 ```
-</>

 ## Properties

--- a/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
+++ b/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
@ -22,8 +22,8 @@ component across all application.

 ## Sample

-````jsx live
-  {() => {
+```jsx live
+  function() {
    const ViewportNotification = ({ hide }) => {
      return (
        <Notification
@ -88,7 +88,7 @@ component across all application.
 ## Example using UIViewportDialogService

 ```jsx live
-  {() => {
+  function() {
    const ViewportNotification = ({ hide }) => {
      return (
        <Notification
--- a/platform/docs/docs/component-library/pages/Colors.mdx
+++ b/platform/docs/docs/component-library/pages/Colors.mdx
@ -28,7 +28,7 @@ details about color classes.

 ## Text

-````jsx live
+```jsx live
 <div className="p-8">
  <p className="text-common-bright">text-common-bright</p>
  <p className="text-common-light">text-common-light</p>
@ -79,4 +79,4 @@ common: {
  dark: '#726f7e',
  active: '#2c3074',
 },
-````
+```