migrate more more

malcolm-kee · Jun 28, 2023 · 0d15436 · 0d15436 · github-actions · Jun 28, 2023
1 parent 1ff7386
commit 0d15436
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 110 deletions.
diff --git a/packages/react-showroom/client/components/code-preview-frame.tsx b/packages/react-showroom/client/components/code-preview-frame.tsx
@@ -1,11 +1,10 @@
 import { CommandLineIcon } from '@heroicons/react/20/solid';
 import { SupportedLanguage } from '@showroomjs/core';
-import { Alert, icons, tw } from '@showroomjs/ui';
+import { Alert, iconClass, tw } from '@showroomjs/ui';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useStableCallback } from '../lib/callback';
 import { useCodeCompilation } from '../lib/use-code-compilation';
-import { Div } from './base';
 import { CodePreview } from './code-preview';
 import { ErrorFallback } from './error-fallback';
 
@@ -40,14 +39,12 @@ export const CodePreviewFrame = React.forwardRef<
   }, [code]);
 
   return (
-    <Div
-      css={{
-        position: 'relative',
-        padding: nonVisual ? 0 : '$1',
-        minHeight: nonVisual ? 0 : 30,
-        backgroundColor: 'White',
-      }}
+    <div
       {...divProps}
+      className={tw(
+        ['relative bg-white', nonVisual ? 'p-0 min-h-0' : 'p-1 min-h-[30px]'],
+        [divProps.className]
+      )}
       ref={forwardedRef}
     >
       {isError ? (
@@ -71,25 +68,16 @@ export const CodePreviewFrame = React.forwardRef<
         ))
       )}
       {isCompiling && !nonVisual && (
-        <Div
-          css={{
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            bottom: 0,
-            px: '$4',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'rgba(229, 231, 235, 0.1)',
-            gap: '$2',
-          }}
+        <div
+          className={tw([
+            'flex items-center justify-center gap-2 absolute inset-y-0 right-0 px-4 bg-zinc-300/10',
+          ])}
         >
-          <CommandLineIcon width="20" height="20" className={icons()} />
+          <CommandLineIcon width="20" height="20" className={iconClass} />
           <span className={tw(['text-zinc-500'])}>Compiling...</span>
-        </Div>
+        </div>
       )}
-    </Div>
+    </div>
   );
 });
 

diff --git a/packages/react-showroom/client/components/code-preview-iframe.tsx b/packages/react-showroom/client/components/code-preview-iframe.tsx
@@ -1,12 +1,10 @@
 import { SupportedLanguage } from '@showroomjs/core';
 import {
-  css,
   ResizeIcon,
-  styled,
+  tw,
   useDebouncedCallback,
   useStableCallback,
 } from '@showroomjs/ui';
-import cx from 'classnames';
 import { Resizable, Enable as ResizeEnable } from 're-resizable';
 import * as React from 'react';
 import { useComponentMeta } from '../lib/component-props-context';
@@ -16,7 +14,7 @@ import { getScrollFn } from '../lib/scroll-into-view';
 import { useA11yResult } from '../lib/use-a11y-result';
 import { useConsole } from '../lib/use-preview-console';
 import { PropsEditorContext } from '../lib/use-props-editor';
-import { useActiveWidth, WidthMarkers } from './width-markers';
+import { WidthMarkers, useActiveWidth } from './width-markers';
 
 export interface CodePreviewIframeImperative {
   sendToChild: (msg: Message) => void;
@@ -39,11 +37,12 @@ export interface CodePreviewIframeProps {
   height?: number;
   initialWidth?: number;
   'data-frame-id'?: string;
+  style?: React.CSSProperties;
 }
 
 const initialHeightMap = new Map<string, number>();
 
-export const CodePreviewIframe = styled(function CodePreviewIframe({
+export function CodePreviewIframe({
   code,
   codeHash,
   lang,
@@ -58,6 +57,7 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
   initialHeight = 100,
   height: providedHeight,
   initialWidth,
+  style,
   'data-frame-id': frameId,
 }: CodePreviewIframeProps) {
   const [frameHeight, setFrameHeight] = React.useState(
@@ -174,14 +174,21 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
   // }, []);
 
   const content = codeHash ? (
-    <Frame
+    <iframe
       ref={targetRef}
       src={getPreviewUrl(codeHash, componentMeta && componentMeta.id)}
       title="Preview"
       height={nonVisual ? 0 : resizable ? height : '100%'}
-      animate={!isResizing}
-      className={resizable ? undefined : className}
+      className={tw(
+        [
+          'flex-1 w-full border-0',
+          !isResizing &&
+            '[transition-property:height] duration-300 ease-in-out',
+        ],
+        [resizable ? undefined : className]
+      )}
       data-frame-id={frameId}
+      style={resizable ? undefined : style}
     />
   ) : null;
 
@@ -198,11 +205,13 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
       }}
     >
       <Resizable
-        className={cx(
-          resizableStyle({
-            animate: !isResizing,
-          }),
-          className
+        className={tw(
+          [
+            'flex overflow-hidden border-1 border-zinc-300 rounded-r bg-white',
+            !isResizing &&
+              '[transition-property:max-height] duration-300 ease-in-out',
+          ],
+          [className]
         )}
         minHeight={height}
         maxHeight={height}
@@ -234,39 +243,39 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
             setActiveWidth(width);
           }
         }}
+        style={style}
         ref={resizableRef}
       >
         {content}
-        <ResizeHandle>
-          <HandleIcon width={16} height={16} />
-        </ResizeHandle>
-        {isResizing && <SizeDisplay ref={sizeEl} />}
+        <div
+          className={tw(['flex-shrink-0 flex items-center bg-zinc-200'])}
+          style={{
+            width: handleWidth,
+          }}
+        >
+          <ResizeIcon
+            width={16}
+            height={16}
+            className={tw(['text-zinc-500'])}
+          />
+        </div>
+        {isResizing && (
+          <div
+            ref={sizeEl}
+            className={tw([
+              'absolute top-px right-4 text-xs px-3 py-1 bg-white/70',
+            ])}
+          />
+        )}
       </Resizable>
     </WidthMarkers>
   ) : (
     content
   );
-});
+}
 
 const handleWidth = 16;
 
-const resizableStyle = css({
-  overflow: 'hidden',
-  display: 'flex',
-  border: '1px solid',
-  borderColor: '$gray-300',
-  borderTopRightRadius: '$base',
-  borderBottomRightRadius: '$base',
-  backgroundColor: 'White',
-  variants: {
-    animate: {
-      true: {
-        transition: 'max-height 300ms ease-in-out',
-      },
-    },
-  },
-});
-
 const resizeEnable: ResizeEnable = {
   top: false,
   right: true,
@@ -277,39 +286,3 @@ const resizeEnable: ResizeEnable = {
   bottomLeft: false,
   topLeft: false,
 };
-
-const SizeDisplay = styled('div', {
-  position: 'absolute',
-  top: 1,
-  right: 16,
-  backgroundColor: 'rgba(255, 255, 255, 0.7)',
-  fontSize: '$xs',
-  lineHeight: '$xs',
-  px: '$3',
-  py: '$1',
-});
-
-const ResizeHandle = styled('div', {
-  flexShrink: 0,
-  width: handleWidth,
-  backgroundColor: '$gray-200',
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const HandleIcon = styled(ResizeIcon, {
-  color: '$gray-500',
-});
-
-const Frame = styled('iframe', {
-  width: '100%',
-  flex: 1,
-  border: 0,
-  variants: {
-    animate: {
-      true: {
-        transition: 'height 300ms ease-in-out',
-      },
-    },
-  },
-});
diff --git a/packages/react-showroom/client/components/link-to-standalone-view.tsx b/packages/react-showroom/client/components/link-to-standalone-view.tsx
@@ -1,5 +1,5 @@
 import { ArrowsPointingOutIcon } from '@heroicons/react/20/solid';
-import { icons, TextTooltip, tw } from '@showroomjs/ui';
+import { iconClass, TextTooltip, tw } from '@showroomjs/ui';
 import { Link } from '../lib/routing';
 
 export const LinkToStandaloneView = (props: {
@@ -17,7 +17,7 @@ export const LinkToStandaloneView = (props: {
           'inline-flex items-center gap-1 text-sm text-zinc-500 no-underline px-1 hover:text-zinc-700 hover:bg-zinc-100',
         ])}
       >
-        <ArrowsPointingOutIcon width={20} height={20} className={icons()} />
+        <ArrowsPointingOutIcon width={20} height={20} className={iconClass} />
       </Link>
     </TextTooltip>
   ) : null;

diff --git a/packages/react-showroom/client/components/sidebar.tsx b/packages/react-showroom/client/components/sidebar.tsx
@@ -6,7 +6,7 @@ import {
   DropdownMenu,
   IconButton,
   Portal,
-  icons,
+  iconClass,
   tw,
   useIsClient,
 } from '@showroomjs/ui';
@@ -169,7 +169,7 @@ const DropdownSection = (props: {
           >
             {section.title}
             {isExternalLink(section.href) && (
-              <ExternalLinkIcon className={icons()} width={20} height={20} />
+              <ExternalLinkIcon className={iconClass} width={20} height={20} />
             )}
           </a>
         </DropdownMenu.Item>
@@ -279,7 +279,7 @@ const SidebarSection = ({
           <div className={tw(['flex justify-between items-center gap-2'])}>
             {section.title}
             {isExternalLink(section.href) && (
-              <ExternalLinkIcon className={icons()} width={16} height={16} />
+              <ExternalLinkIcon className={iconClass} width={16} height={16} />
             )}
           </div>
         </SidebarLink>

diff --git a/packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx b/packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx
@@ -1,5 +1,5 @@
 import { isFunction, isNumber, SupportedLanguage } from '@showroomjs/core';
-import { css, styled, useConstant, useQueryParams } from '@showroomjs/ui';
+import { css, styled, tw, useConstant, useQueryParams } from '@showroomjs/ui';
 import { Enable as ResizeEnable, Resizable } from 're-resizable';
 import * as React from 'react';
 import { useCodeFrameContext } from '../lib/code-frame-context';
@@ -185,9 +185,9 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
                 code={props.code}
                 lang={props.lang}
                 codeHash={props.codeHash}
-                css={{
+                className={tw(['h-full'])}
+                style={{
                   width: `${dimension.width}px`,
-                  height: '100%',
                 }}
                 imperativeRef={(ref) => {
                   if (ref) {

diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
@@ -1,7 +1,8 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as React from 'react';
-import { icons, styled, keyframes } from '../stitches.config';
+import { iconClass } from '../shared-styles';
+import { keyframes, styled } from '../stitches.config';
 
 const overlayShow = keyframes({
   '0%': { opacity: 0 },
@@ -85,7 +86,7 @@ const DialogContent = styled(
         {children}
         {showCloseBtn && (
           <Close>
-            <XMarkIcon width={24} height={24} className={icons()} />
+            <XMarkIcon width={24} height={24} className={iconClass} />
           </Close>
         )}
       </Content>

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -46,4 +46,5 @@ export { usePersistedState } from './lib/use-persisted-state';
 export { searchParamsToObject, useQueryParams } from './lib/use-query-params';
 export { useStableCallback } from './lib/use-stable-callback';
 export { useTransientState } from './lib/use-transient-state';
+export { iconClass } from './shared-styles';
 export * from './stitches.config';
diff --git a/packages/ui/src/shared-styles.ts b/packages/ui/src/shared-styles.ts
@@ -0,0 +1,3 @@
+import { tw } from './lib/tw';
+
+export const iconClass = tw(['text-zinc-400']);
diff --git a/packages/ui/src/stitches.config.ts b/packages/ui/src/stitches.config.ts
@@ -224,10 +224,6 @@ export const {
   config,
 } = result;
 
-export const icons = css({
-  color: '$gray-400',
-});
-
 export const text = css({
   variants: {
     variant: {