migrate more

malcolm-kee · Jun 29, 2023 · affa819 · affa819 · github-actions · Jun 29, 2023
1 parent af69811
commit affa819
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 286 deletions.
diff --git a/packages/react-showroom/client/components/a11y-result-panel-for-frames.tsx b/packages/react-showroom/client/components/a11y-result-panel-for-frames.tsx
@@ -16,7 +16,7 @@ export interface A11yResultPanelForFramesProps {
     selectors: Array<string>;
     color: string;
   }) => void;
-  resetHiglights: () => void;
+  resetHighlights: () => void;
   scrollToFrameWhenSelect?: boolean;
 }
 
@@ -77,7 +77,7 @@ export const A11yResultPanelForFrames = (
               }
             }
           : undefined,
-        props.resetHiglights
+        props.resetHighlights
       )}
     >
       <Tabs.List>

diff --git a/packages/react-showroom/client/components/radio-dropdown.tsx b/packages/react-showroom/client/components/radio-dropdown.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon } from '@heroicons/react/20/solid';
-import { DropdownMenu, DropdownMenuContentProps } from '@showroomjs/ui';
+import { DropdownMenu, DropdownMenuContentProps, tw } from '@showroomjs/ui';
 
 export interface RadioDropdownProps<Value extends string>
   extends DropdownMenuContentProps {
@@ -27,13 +27,7 @@ export const RadioDropdown = <Value extends string>({
         {options.map((option, i) => (
           <DropdownMenu.RadioItem
             value={option.value}
-            css={{
-              paddingLeft: '$8',
-              '@md': {
-                fontSize: '$sm',
-                lineHeight: '$sm',
-              },
-            }}
+            className={tw(['!pl-8 md:!text-sm'])}
             key={i}
           >
             <DropdownMenu.ItemIndicator>

diff --git a/packages/react-showroom/client/components/standalone-code-live-editor-comment.tsx b/packages/react-showroom/client/components/standalone-code-live-editor-comment.tsx
@@ -1,21 +1,47 @@
-import { styled, tw } from '@showroomjs/ui';
-import * as React from 'react';
 import { XMarkIcon } from '@heroicons/react/20/solid';
+import { tw } from '@showroomjs/ui';
+import * as React from 'react';
 
-const CommentListImpl = styled('ul', {
-  display: 'grid',
-  gap: '$3',
-  padding: '$3',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+const CommentListImpl = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentPropsWithoutRef<'ul'>
+>(function CommentList(props, forwardedRef) {
+  return (
+    <ul
+      {...props}
+      ref={forwardedRef}
+      className={tw(['grid gap-3 p-3'], [props.className])}
+      style={{
+        gridTemplateColumns: 'repeat(auto-fill, minmax(300px,1fr))', // not working with tailwind
+        ...(props.style || {}),
+      }}
+    />
+  );
 });
 
 interface CommentItemProps extends React.ComponentPropsWithoutRef<'li'> {
   onDismiss: () => void;
+  active?: boolean;
 }
 
-function CommentItemImpl({ children, onDismiss, ...props }: CommentItemProps) {
+function CommentItem({
+  children,
+  onDismiss,
+  className,
+  active,
+  ...props
+}: CommentItemProps) {
   return (
-    <li {...props}>
+    <li
+      {...props}
+      className={tw(
+        [
+          'relative text-sm px-6 py-3 whitespace-pre-wrap cursor-pointer',
+          active ? 'bg-yellow-200 shadow-lg' : 'bg-white',
+        ],
+        [className]
+      )}
+    >
       <button
         onClick={onDismiss}
         type="button"
@@ -32,25 +58,6 @@ function CommentItemImpl({ children, onDismiss, ...props }: CommentItemProps) {
   );
 }
 
-const CommentItem = styled(CommentItemImpl, {
-  px: '$6',
-  py: '$3',
-  cursor: 'pointer',
-  backgroundColor: 'White',
-  fontSize: '$sm',
-  lineHeight: '$sm',
-  position: 'relative',
-  whiteSpace: 'pre-wrap',
-  variants: {
-    active: {
-      true: {
-        backgroundColor: '$yellow-200',
-        shadow: 'lg',
-      },
-    },
-  },
-});
-
 export const CommentList = Object.assign(CommentListImpl, {
   Item: CommentItem,
 });
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,6 +1,6 @@
 import { isFunction, isNumber, SupportedLanguage } from '@showroomjs/core';
-import { css, styled, tw, useConstant, useQueryParams } from '@showroomjs/ui';
-import { Enable as ResizeEnable, Resizable } from 're-resizable';
+import { tw, useConstant, useQueryParams } from '@showroomjs/ui';
+import { Resizable, Enable as ResizeEnable } from 're-resizable';
 import * as React from 'react';
 import { useCodeFrameContext } from '../lib/code-frame-context';
 import { safeCompress, safeDecompress } from '../lib/compress';
@@ -166,18 +166,25 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
         onResultChange={(result) => setResult(dimension.name, result)}
         key={dimension.name}
       >
-        <ScreenWrapper isCommenting={props.isCommenting}>
+        <div
+          className={tw([
+            'group/wrapper mb-6',
+            props.isCommenting && 'pointer-events-none',
+          ])}
+        >
           <DeviceFrame dimension={dimension} showFrame={props.showFrame}>
-            <Screen
-              css={
+            <div
+              className={tw([
+                'h-full overflow-hidden transition-shadow bg-white shadow-sm',
+                'group-hover/wrapper:shadow-lg',
+              ])}
+              style={
                 props.showFrame
                   ? {
                       width: '100%',
-                      height: '100%',
                     }
                   : {
                       width: `${dimension.width}px`,
-                      height: '100%',
                     }
               }
             >
@@ -259,11 +266,15 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
                 }}
                 data-frame-id={getFrameId(dimension)}
               />
-            </Screen>
+            </div>
           </DeviceFrame>
-          <ScreenSize>
-            <ScreenSizeText
-              css={
+          <div className={tw(['px-2 py-1'])}>
+            <span
+              className={tw([
+                'inline-flex flex-col items-start text-sm',
+                'text-zinc-500 group-hover/wrapper:text-black',
+              ])}
+              style={
                 shouldAdjustZoom
                   ? {
                       transform: `scale(${100 / zoomValue})`,
@@ -276,17 +287,31 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
               <A11ySummary
                 onClick={() => props.onA11ySummaryClick(dimension.name)}
               />
-            </ScreenSizeText>
-          </ScreenSize>
-        </ScreenWrapper>
+            </span>
+          </div>
+        </div>
       </A11yResultContextProvider>
     );
   });
 
   const rootProps = {
-    className: resizeStyle({
-      isCommenting: props.isCommenting,
-    }),
+    className: tw([
+      'relative pt-3 pb-6 px-3 bg-zinc-200 overflow-x-auto overflow-y-hidden',
+      props.isCommenting && 'text-zinc-300',
+      screenListSize ? 'flex-none' : 'flex-1',
+    ]),
+    style: {
+      ...(props.isCommenting
+        ? {
+            cursor: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E"), auto`,
+          }
+        : {}),
+      ...(screenListSize
+        ? {
+            height: screenListSize.height + 36,
+          }
+        : {}),
+    },
     onClick: props.isCommenting
       ? (ev: React.MouseEvent<HTMLElement, MouseEvent>) => {
           props.onClickCommentPoint({
@@ -298,20 +323,9 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
   };
 
   return props.fitHeight ? (
-    <Root
-      {...rootProps}
-      css={
-        screenListSize
-          ? {
-              height: screenListSize.height + 36,
-              flex: 'none',
-            }
-          : {}
-      }
-      ref={forwardedRef}
-    >
+    <div {...rootProps} ref={forwardedRef}>
       <ScreenList
-        css={
+        style={
           shouldAdjustZoom
             ? {
                 transform: `scale(${zoomValue / 100})`,
@@ -330,7 +344,7 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
         {content}
       </ScreenList>
       {props.children}
-    </Root>
+    </div>
   ) : (
     <Resizable
       enable={resizeEnable}
@@ -353,7 +367,7 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
       {...rootProps}
     >
       <ScreenList
-        css={
+        style={
           shouldAdjustZoom
             ? {
                 transform: `scale(${zoomValue / 100})`,
@@ -387,79 +401,17 @@ const resizeEnable: ResizeEnable = {
   topLeft: false,
 };
 
-const Root = styled('div', {
-  flex: 1,
-});
-
-const ScreenList = styled('div', {
-  display: 'flex',
-  gap: '$6',
-  variants: {
-    wrap: {
-      true: {
-        flexWrap: 'wrap',
-      },
-    },
-  },
-});
-
-const resizeStyle = css({
-  overflowX: 'auto',
-  overflowY: 'hidden',
-  paddingTop: '$3',
-  paddingBottom: '$6',
-  px: '$3',
-  backgroundColor: '$gray-200',
-  position: 'relative',
-  variants: {
-    isCommenting: {
-      true: {
-        color: '$gray-300',
-        cursor: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E"), auto`,
-      },
-    },
-  },
-});
-
-const ScreenSize = styled('div', {
-  gap: '$1',
-  px: '$2',
-  py: '$1',
-});
-
-const ScreenSizeText = styled('span', {
-  display: 'inline-flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  fontSize: '$sm',
-  lineHeight: '$sm',
-  color: '$gray-500',
-});
-
-const Screen = styled('div', {
-  shadow: 'sm',
-  backgroundColor: 'White',
-  transition: 'box-shadow 100ms ease-in-out',
-  height: '100%',
-  overflow: 'hidden',
-});
-
-const ScreenWrapper = styled('div', {
-  [`&:hover ${ScreenSize}`]: {
-    color: 'Black',
-    fontWeight: '500',
-  },
-  [`&:hover ${Screen}`]: {
-    shadow: 'lg',
-  },
-  marginBottom: '$6',
-  variants: {
-    isCommenting: {
-      true: {
-        pointerEvents: 'none',
-      },
-    },
-  },
+const ScreenList = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & { wrap?: boolean }
+>(function ScreenList({ wrap, className, ...props }, forwardedRef) {
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      className={tw(['flex gap-6', wrap && 'flex-wrap'], [className])}
+    />
+  );
 });
 
 const serializeStateMaps = (stateMaps: StateMaps): string => {