refactor: remove tw classes on dm-core components

equinor · Jun 2, 2024 · 72065a7 · 72065a7
1 parent d990dde
commit 72065a7
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 105 deletions.
diff --git a/example/src/plugins/marmo-ui/containers/views/SignalTable/SignalTable.tsx b/example/src/plugins/marmo-ui/containers/views/SignalTable/SignalTable.tsx
@@ -128,15 +128,15 @@ const SignalTable = (props: { document: TGenericObject }) => {
             disabled={page === 0}
             variant='ghost_icon'
             onClick={() => setPage((prevPage) => prevPage - 1)}
-            className='overflow-hidden'
+            style={{ overflow: 'hidden' }}
           >
             <Icon data={chevron_left} />
           </Button>
           <Button
             disabled={page + 1 === availablePages}
             variant='ghost_icon'
             onClick={() => setPage((prevPage) => prevPage + 1)}
-            className='overflow-hidden'
+            style={{ overflow: 'hidden' }}
           >
             <Icon data={chevron_right} />
           </Button>

diff --git a/packages/dm-core/src/components/CopyLinkDialog/CopyLinkDialog.tsx b/packages/dm-core/src/components/CopyLinkDialog/CopyLinkDialog.tsx
@@ -24,6 +24,7 @@ import {
   useApplication,
   useDocument,
 } from '../../'
+import { Stack } from '../../layout'
 import { setMetaInDocument } from './utils'
 
 type TPropsBase = {
@@ -180,103 +181,114 @@ export const CopyLinkDialog = (props: TProps) => {
         <Dialog.Title>{title || 'Copy or link entity'}</Dialog.Title>
       </Dialog.Header>
       <Dialog.CustomContent>
-        {description && <p className='mb-4'>{description}</p>}
-        <TextField
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            setNote(e.target.value)
-          }
-          id='textfield-normal'
-          placeholder='Note on published version'
-          label='Note'
-          autoComplete='off'
-        />
-        {(!destination || !hideProvidedFields) && (
-          <div className={'flex justify-between align-center py-2'}>
-            <div className={'flex items-center'}>
-              <Label label='Destination:' />
-              <p>{truncatePathString(selectedDestination.path || '-')}</p>
-            </div>
-            <Button
-              variant='ghost_icon'
-              aria-label='browse destination action'
-              onClick={() => setShowDestinationDialog(true)}
+        <Stack spacing={0.5}>
+          {description && <p>{description}</p>}
+          <TextField
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setNote(e.target.value)
+            }
+            id='textfield-normal'
+            placeholder='Note on published version'
+            label='Note'
+            autoComplete='off'
+          />
+          {(!destination || !hideProvidedFields) && (
+            <Stack
+              direction='row'
+              alignItems='center'
+              justifyContent='space-between'
             >
-              <Icon data={folder_open}></Icon>
-            </Button>
-          </div>
-        )}
-        {(!linkTarget || !hideProvidedFields) &&
-          selectedMode === 'copy&link' && (
-            <div className={'flex justify-between align-center py-2'}>
-              <div className={'flex items-center'}>
-                <Label label='Link target:' />
-                <p>{truncatePathString(selectedLinkTarget.path || '-')}</p>
-              </div>
+              <Stack direction='row' alignItems='center'>
+                <Label label='Destination:' />
+                <p>{truncatePathString(selectedDestination.path || '-')}</p>
+              </Stack>
               <Button
                 variant='ghost_icon'
-                aria-label='browse link action'
-                onClick={() => setShowLinkTargetDialog(true)}
+                aria-label='browse destination action'
+                onClick={() => setShowDestinationDialog(true)}
               >
                 <Icon data={folder_open}></Icon>
               </Button>
-            </div>
+            </Stack>
           )}
-        {(!mode || !hideProvidedFields) && (
-          <fieldset>
-            <legend>Publish mode</legend>
-            <Tooltip title='Make a copy at the destination'>
-              <Radio
-                label='Copy'
-                name='group'
-                value='copy'
-                checked={selectedMode === 'copy'}
-                onChange={() => setSelectedMode('copy')}
-              />
-            </Tooltip>
-            <Tooltip title='Insert a link at destination'>
-              <Radio
-                label='Link'
-                name='group'
-                value='link'
-                checked={selectedMode === 'link'}
-                onChange={() => setSelectedMode('link')}
-              />
-            </Tooltip>
-            <Tooltip title='Make a copy at destination, and insert a link at link target'>
-              <Radio
-                label='Copy & Link'
-                name='group'
-                value='copy&link'
-                checked={selectedMode === 'copy&link'}
-                onChange={() => setSelectedMode('copy&link')}
-              />
-            </Tooltip>
-          </fieldset>
-        )}
-        <EntityPickerDialog
-          title={`Select destination for the copy`}
-          showModal={showDestinationDialog}
-          setShowModal={setShowDestinationDialog}
-          onChange={(v: TEntityPickerReturn) => {
-            setSelectedDestination(v)
-          }}
-        />
-        <EntityPickerDialog
-          title={`Select target to insert link`}
-          showModal={showLinkTargetDialog}
-          setShowModal={setShowLinkTargetDialog}
-          onChange={(v: TEntityPickerReturn) => {
-            setLinkTarget(v)
-          }}
-        />
+          {(!linkTarget || !hideProvidedFields) &&
+            selectedMode === 'copy&link' && (
+              <Stack
+                direction='row'
+                alignItems='center'
+                justifyContent='space-between'
+              >
+                <Stack direction='row' alignItems='center'>
+                  <Label label='Link target:' />
+                  <p>{truncatePathString(selectedLinkTarget.path || '-')}</p>
+                </Stack>
+                <Button
+                  variant='ghost_icon'
+                  aria-label='browse link action'
+                  onClick={() => setShowLinkTargetDialog(true)}
+                >
+                  <Icon data={folder_open}></Icon>
+                </Button>
+              </Stack>
+            )}
+          {(!mode || !hideProvidedFields) && (
+            <fieldset>
+              <legend>Publish mode</legend>
+              <Tooltip title='Make a copy at the destination'>
+                <Radio
+                  label='Copy'
+                  name='group'
+                  value='copy'
+                  checked={selectedMode === 'copy'}
+                  onChange={() => setSelectedMode('copy')}
+                />
+              </Tooltip>
+              <Tooltip title='Insert a link at destination'>
+                <Radio
+                  label='Link'
+                  name='group'
+                  value='link'
+                  checked={selectedMode === 'link'}
+                  onChange={() => setSelectedMode('link')}
+                />
+              </Tooltip>
+              <Tooltip title='Make a copy at destination, and insert a link at link target'>
+                <Radio
+                  label='Copy & Link'
+                  name='group'
+                  value='copy&link'
+                  checked={selectedMode === 'copy&link'}
+                  onChange={() => setSelectedMode('copy&link')}
+                />
+              </Tooltip>
+            </fieldset>
+          )}
+          <EntityPickerDialog
+            title={`Select destination for the copy`}
+            showModal={showDestinationDialog}
+            setShowModal={setShowDestinationDialog}
+            onChange={(v: TEntityPickerReturn) => {
+              setSelectedDestination(v)
+            }}
+          />
+          <EntityPickerDialog
+            title={`Select target to insert link`}
+            showModal={showLinkTargetDialog}
+            setShowModal={setShowLinkTargetDialog}
+            onChange={(v: TEntityPickerReturn) => {
+              setLinkTarget(v)
+            }}
+          />
+        </Stack>
       </Dialog.CustomContent>
       <Dialog.Actions>
-        <div className={'flex justify-around w-full'}>
-          <Button
-            variant='outlined'
-            color='danger'
-            onClick={() => setOpen(false)}
-          >
+        <Stack
+          direction='row'
+          fullWidth
+          justifyContent='flex-end'
+          spacing={0.5}
+        >
+          <Button variant='outlined' onClick={() => setOpen(false)}>
             Cancel
           </Button>
           <Button
@@ -301,7 +313,7 @@ export const CopyLinkDialog = (props: TProps) => {
                 'Insert link'
               ))}
           </Button>
-        </div>
+        </Stack>
       </Dialog.Actions>
     </Dialog>
   )

diff --git a/packages/dm-core/src/components/EntityView.tsx b/packages/dm-core/src/components/EntityView.tsx
@@ -2,6 +2,7 @@ import React, { Suspense, memo, useState } from 'react'
 
 import { Typography } from '@equinor/eds-core-react'
 import { useRecipe } from '../hooks'
+import { Stack } from '../layout'
 import { IUIPlugin, TUiRecipe } from '../types'
 import { ErrorBoundary, ErrorGroup } from '../utils/ErrorBoundary'
 import { Loading } from './Loading'
@@ -63,15 +64,18 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
       </ErrorGroup>
     )
   if (!recipe || !Object.keys(recipe).length)
-    return <div className='w-full flex'>No compatible uiRecipes for entity</div>
+    return <Stack fullWidth>No compatible uiRecipes for entity</Stack>
 
   const refreshable = showRefreshButton ?? recipe.showRefreshButton ?? false
 
   return (
     <Suspense fallback={<Loading />}>
       <ErrorBoundary message={`Plugin "${recipe.plugin}" crashed...`}>
-        <div
-          className='flex flex-col flex-grow min-h-0 w-full relative'
+        <Stack
+          grow={1}
+          minHeight={0}
+          fullWidth
+          position='relative'
           style={{
             boxShadow: hoverRefresh ? 'inset 0px 0px 0px 1px #5c5c5c' : 'none',
             borderRadius: hoverRefresh ? '4px' : '0',
@@ -92,8 +96,10 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
               }}
             />
           )}
-          <div
-            className='flex flex-col flex-grow min-h-0 w-full'
+          <Stack
+            grow={1}
+            minHeight={0}
+            fullWidth
             style={{
               opacity: hoverRefresh ? 0.6 : 1,
             }}
@@ -107,8 +113,8 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
               onOpen={onOpen}
               onChange={onChange}
             />
-          </div>
-        </div>
+          </Stack>
+        </Stack>
       </ErrorBoundary>
     </Suspense>
   )

diff --git a/packages/dm-core/src/components/Pickers/EntityPickerDialog.tsx b/packages/dm-core/src/components/Pickers/EntityPickerDialog.tsx
@@ -11,6 +11,7 @@ import styled from 'styled-components'
 import { useApplication } from '../../ApplicationContext'
 import { EBlueprint } from '../../Enums'
 import { Tree, TreeNode } from '../../domain/Tree'
+import { Stack } from '../../layout'
 import { TValidEntity } from '../../types'
 import { truncatePathString } from '../../utils/truncatePathString'
 import { TREE_DIALOG_HEIGHT, TREE_DIALOG_WIDTH } from '../../utils/variables'
@@ -215,13 +216,17 @@ export const EntityPickerDialog = (
         </Dialog.Title>
       </Dialog.Header>
       <Dialog.CustomContent style={{ overflow: 'hidden' }}>
-        <div className='flex flex-col h-full'>
+        <Stack
+          fullHeight
+          padding={[0, 0, 1, 0]}
+          style={{ borderBottom: '1px solid #e0dcdc' }}
+        >
           {loading ? (
             <div style={{ display: 'flex', justifyContent: 'center' }}>
               <Progress.Circular />
             </div>
           ) : (
-            <div className='overflow-auto h-full'>
+            <Stack fullHeight scrollY padding={[0, 1, 0, 0]}>
               <TreeView
                 // If configured to hide "invalidTypes", only show the "typeFilter", along with data sources and packages to allow for browsing
                 includeTypes={
@@ -251,10 +256,9 @@ export const EntityPickerDialog = (
                   })
                 }}
               />
-            </div>
+            </Stack>
           )}
-          <div className='bg-[#e0dcdc] h-px inline mt-5'></div>
-        </div>
+        </Stack>
       </Dialog.CustomContent>
       <Dialog.Actions style={{ justifyContent: 'right' }}>
         <Button

diff --git a/packages/dm-core/src/components/TreeView/TreeButton/TreeButton.tsx b/packages/dm-core/src/components/TreeView/TreeButton/TreeButton.tsx
@@ -51,8 +51,10 @@ export const TreeButton = (props: {
         {isExpandable ? (
           <Icon
             data={chevron_right}
-            className='transition-all'
-            style={{ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)' }}
+            style={{
+              transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              transition: 'ease-in-out all 0.15s',
+            }}
           />
         ) : (
           <span style={{ width: '25px' }}></span>