From 3d3671e727659deb029611bb70ca8c02c4799081 Mon Sep 17 00:00:00 2001 From: nvim Date: Wed, 12 Jun 2024 18:28:48 +0200 Subject: [PATCH 1/2] Add allotment component --- web/package.json | 1 + web/src/components/Cell/Cell.module.scss | 33 ++++ web/src/components/Cell/index.tsx | 23 +++ web/src/containers/Main/index.tsx | 204 ++++++++++++----------- yarn.lock | 43 ++++- 5 files changed, 201 insertions(+), 103 deletions(-) create mode 100644 web/src/components/Cell/Cell.module.scss create mode 100644 web/src/components/Cell/index.tsx diff --git a/web/package.json b/web/package.json index 8cf3117c..038f5302 100644 --- a/web/package.json +++ b/web/package.json @@ -32,6 +32,7 @@ "@types/react-toastify": "^4.1.0", "@types/yaml": "^1.9.7", "aidbox-react": "^1.4.0", + "allotment": "^1.20.2", "babel-loader": "8.1.0", "babel-plugin-import": "^1.13.3", "classnames": "^2.3.1", diff --git a/web/src/components/Cell/Cell.module.scss b/web/src/components/Cell/Cell.module.scss new file mode 100644 index 00000000..d82953b7 --- /dev/null +++ b/web/src/components/Cell/Cell.module.scss @@ -0,0 +1,33 @@ +@import 'src/styles/colors'; + +.title { + display: flex; + line-height: 32px; + margin-bottom: 3px; +} + +.container { + width: 100%; + height: 100%; + overflow: auto; + display: flex; + flex-direction: column; +} + +.evenContainer { + background-color: $base-light-color; +} + +.oddContainer { + background-color: $base-surface-color; +} + +.content { + flex: 1; + padding: 20px; + overflow-y: auto; +} + +.boxHeader { + position: relative; +} diff --git a/web/src/components/Cell/index.tsx b/web/src/components/Cell/index.tsx new file mode 100644 index 00000000..6658df63 --- /dev/null +++ b/web/src/components/Cell/index.tsx @@ -0,0 +1,23 @@ +import classNames from 'classnames'; + +import s from './Cell.module.scss'; + +interface CellProps extends React.HTMLAttributes { + title?: string; + even?: boolean; +} + +export function Cell({ title, children, even }: CellProps) { + const isEven = even ?? false; + + return ( +
+
+
+

{title}

+
+ {children} +
+
+ ); +} diff --git a/web/src/containers/Main/index.tsx b/web/src/containers/Main/index.tsx index e91be8a0..2753c010 100644 --- a/web/src/containers/Main/index.tsx +++ b/web/src/containers/Main/index.tsx @@ -1,11 +1,10 @@ import Editor from '@monaco-editor/react'; +import { Allotment } from 'allotment'; import { FhirResource } from 'fhir/r4b'; import { useParams } from 'react-router-dom'; -import { ToastContainer } from 'react-toastify'; import { Button } from 'web/src/components/Button'; +import { Cell } from 'web/src/components/Cell'; import { CodeEditor } from 'web/src/components/CodeEditor'; -import { ExpandableElement } from 'web/src/components/ExpandableElement'; -import { ExpandableRow } from 'web/src/components/ExpandableRow'; import { LaunchContextEditor } from 'web/src/components/LaunchContextEditor'; import { Logo } from 'web/src/components/Logo'; import 'react-toastify/dist/ReactToastify.css'; @@ -22,6 +21,8 @@ import { QuestionnaireEditor } from './QuestionnaireEditor'; import { useFHIRMappingLanguage } from './useFHIRMappingLanguage'; import { useMain } from './useMain'; +import 'allotment/dist/style.css'; + export function Main() { const { questionnaireId } = useParams<{ questionnaireId: string }>(); const { @@ -41,109 +42,110 @@ export function Main() { return ( <>
- - - - - {(resource) => ( - - )} - - - - - - - - - - - - - - - {fhirMappingLangMode ? ( - { - setMapString(value as string); - }} - value={mapString} - options={{ - formatOnPaste: true, - formatOnType: true, - autoIndent: 'full', - minimap: { - enabled: false, - }, - }} - /> - ) : ( - + + + + {(resource) => ( + + )} + + + + - )} - - - {fhirMappingLangMode ? ( - + + - ) : ( - - )} - {isSuccess(extractRD) && ( - - )} - - + + + + + + + + {fhirMappingLangMode ? ( + { + setMapString(value as string); + }} + value={mapString} + options={{ + formatOnPaste: true, + formatOnType: true, + autoIndent: 'full', + minimap: { + enabled: false, + }, + }} + /> + ) : ( + + )} + + + {fhirMappingLangMode ? ( + + ) : ( + + )} + {isSuccess(extractRD) && ( + + )} + + +
{`v${version}`}
diff --git a/yarn.lock b/yarn.lock index af1d96aa..e18ec564 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1903,6 +1903,11 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@juggle/resize-observer@^3.3.1": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60" + integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA== + "@leichtgewicht/ip-codec@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" @@ -3756,6 +3761,18 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0: require-from-string "^2.0.2" uri-js "^4.2.2" +allotment@^1.20.2: + version "1.20.2" + resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.20.2.tgz#5ea3a630b3265479debb69156658244711f83843" + integrity sha512-TaCuHfYNcsJS9EPk04M7TlG5Rl3vbAdHeAyrTE9D5vbpzV+wxnRoUrulDbfnzaQcPIZKpHJNixDOoZNuzliKEA== + dependencies: + classnames "^2.3.0" + eventemitter3 "^5.0.0" + lodash.clamp "^4.0.0" + lodash.debounce "^4.0.0" + lodash.isequal "^4.5.0" + use-resize-observer "^9.0.0" + ansi-colors@^4.1.1: version "4.1.3" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b" @@ -4652,6 +4669,11 @@ classnames@*, classnames@^2.3.1: resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== +classnames@^2.3.0: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + clean-css@^5.2.2: version "5.3.2" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224" @@ -6468,7 +6490,7 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.4: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== -eventemitter3@^5.0.1: +eventemitter3@^5.0.0, eventemitter3@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4" integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA== @@ -9226,7 +9248,12 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash.debounce@^4.0.8: +lodash.clamp@^4.0.0: + version "4.0.3" + resolved "https://registry.yarnpkg.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa" + integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg== + +lodash.debounce@^4.0.0, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== @@ -9236,6 +9263,11 @@ lodash.get@~4.4.2: resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ== +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ== + lodash.ismatch@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" @@ -13509,6 +13541,13 @@ use-isomorphic-layout-effect@^1.1.2: resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== +use-resize-observer@^9.0.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c" + integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow== + dependencies: + "@juggle/resize-observer" "^3.3.1" + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From 4a7199adc0123f87e2af071232ef1519a9dcfe8f Mon Sep 17 00:00:00 2001 From: nvim Date: Thu, 13 Jun 2024 09:41:34 +0200 Subject: [PATCH 2/2] Remove Expandable Row and Element --- .../ExpandableElement.module.scss | 74 ------------------- .../components/ExpandableElement/index.tsx | 49 ------------ .../ExpandableRow/ExpandableRow.module.scss | 16 ---- web/src/components/ExpandableRow/index.tsx | 20 ----- 4 files changed, 159 deletions(-) delete mode 100644 web/src/components/ExpandableElement/ExpandableElement.module.scss delete mode 100644 web/src/components/ExpandableElement/index.tsx delete mode 100644 web/src/components/ExpandableRow/ExpandableRow.module.scss delete mode 100644 web/src/components/ExpandableRow/index.tsx diff --git a/web/src/components/ExpandableElement/ExpandableElement.module.scss b/web/src/components/ExpandableElement/ExpandableElement.module.scss deleted file mode 100644 index 1ecf5ddb..00000000 --- a/web/src/components/ExpandableElement/ExpandableElement.module.scss +++ /dev/null @@ -1,74 +0,0 @@ -@import 'src/styles/colors'; - -.title { - line-height: 32px; - margin-bottom: 3px; -} - -.container { - position: relative; - display: flex; - flex-direction: column; - flex: 1; - transition: all 0.2s; - overflow-x: auto; - - &:hover .expandButton { - opacity: 1; - } - - &:nth-child(even) { - background-color: $base-surface-color; - } - - &:nth-child(odd) { - background-color: $base-light-color; - } -} - -.content { - flex: 1; - padding: 20px; - overflow-y: auto; -} - -.boxHeader { - position: relative; -} - -.expandButton { - position: absolute; - right: -20px; - top: 50%; - transform: translate(0px, -50%); - background-color: $primary-color; - color: $base-light-color; - font-size: 12px; - line-height: 1; - padding: 4px 18px 4px 8px; - border-radius: 1px 0px 0px 1px; - cursor: pointer; - opacity: 0; - transition: all 0.2s; - - &::after { - content: ''; - position: absolute; - width: 4px; - height: 4px; - top: calc(50% - 1px); - transform: rotate(45deg) translate(0px, -50%); - right: 8px; - border-top: 2px solid $base-light-color; - border-right: 2px solid $base-light-color; - } -} - -.expanded { - &::after { - border-top: 0px solid $base-light-color; - border-right: 0px solid $base-light-color; - border-bottom: 2px solid $base-light-color; - border-left: 2px solid $base-light-color; - } -} diff --git a/web/src/components/ExpandableElement/index.tsx b/web/src/components/ExpandableElement/index.tsx deleted file mode 100644 index d5d8716b..00000000 --- a/web/src/components/ExpandableElement/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import classNames from 'classnames'; -import { useRef, useState } from 'react'; - -import s from './ExpandableElement.module.scss'; - -interface ExpandableElementProps extends React.HTMLAttributes { - title?: string; -} - -export function ExpandableElement({ title, className, children }: ExpandableElementProps) { - const [expanded, setExpanded] = useState(false); - const headerRef = useRef(null); - - return ( -
-
-
-

{title}

- {expanded ? ( -
{ - if (e.target === headerRef.current) { - setExpanded((f) => !f); - } - }} - > - {expanded ? 'collapse' : 'expand'} -
- ) : ( -
{ - if (e.target === headerRef.current) { - setExpanded((f) => !f); - } - }} - > - {expanded ? 'collapse' : 'expand'} -
- )} -
- {children} -
-
- ); -} diff --git a/web/src/components/ExpandableRow/ExpandableRow.module.scss b/web/src/components/ExpandableRow/ExpandableRow.module.scss deleted file mode 100644 index a7964a91..00000000 --- a/web/src/components/ExpandableRow/ExpandableRow.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -.arrow { - position: absolute; - left: 0; - cursor: pointer; - z-index: 1; - padding: 0; - margin: 0; - background: 0; - outline: none; - border: 0; - height: 24px; - width: 24px; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/web/src/components/ExpandableRow/index.tsx b/web/src/components/ExpandableRow/index.tsx deleted file mode 100644 index 544751b8..00000000 --- a/web/src/components/ExpandableRow/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useState } from 'react'; - -import s from './ExpandableRow.module.scss'; -import { Arrow } from '../Icon/Arrow'; - -interface Props extends React.HTMLAttributes {} - -export function ExpandableRow(props: Props) { - const { className, children } = props; - const [expanded, setExpanded] = useState(false); - - return ( -
- - {children} -
- ); -}