migrate more

malcolm-kee · Jun 29, 2023 · af69811 · af69811
1 parent 9e51d13
commit af69811
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 102 deletions.
diff --git a/packages/react-showroom/client/components/sidebar.tsx b/packages/react-showroom/client/components/sidebar.tsx
@@ -16,7 +16,6 @@ import { isExternalLink } from '../lib/is-external-link';
 import { NavLink, useNavigate } from '../lib/routing';
 import { THEME, colorTheme } from '../theme';
 import { AudienceDropdownGroup, AudienceToggle } from './audience-toggle';
-import { Div } from './base';
 
 const toggle = audienceDefault ? (
   <div className={tw(['text-right'])}>
@@ -50,34 +49,20 @@ export const Sidebar = (props: { sections: Array<ReactShowroomSection> }) => {
 
   return (
     <>
-      <Div
-        as="nav"
-        css={{
-          display: 'none',
-          '@md': {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'sticky',
-            top: 'var(--header-height, 64px)',
-            left: 0,
-            bottom: 0,
-            height: 'calc(100vh - var(--header-height, 64px))',
-          },
-          borderRight: '1px solid',
-          borderRightColor: '$gray-200',
-          width: 240,
-          background: '$gray-100',
-          overflowY: 'scroll',
-          overscrollBehaviorBlock: 'contain',
-        }}
+      <nav
+        className={tw([
+          'hidden md:flex md:flex-col md:sticky md:left-0 md:bottom-0',
+          'md:top-[var(--header-height)] md:h-[calc(100vh-var(--header-height))]',
+          'border-r border-zinc-200 w-60 bg-zinc-100 overflow-y-scroll overscroll-contain',
+        ])}
       >
         <div className={tw(['flex-1'])}>
           {props.sections.map((section, i) => (
             <SidebarSection section={section} key={i} />
           ))}
         </div>
         {toggle}
-      </Div>
+      </nav>
       {isClient && <MobileSidebar sections={mobileSections} />}
     </>
   );
@@ -97,29 +82,18 @@ const MobileSidebar = (props: { sections: Array<ReactShowroomSection> }) => (
     <DropdownMenu>
       <DropdownMenu.Trigger asChild>
         <IconButton
-          css={{
-            width: 48,
-            height: 48,
-            backgroundColor: '$primary-700',
-            color: 'White',
-            boxShadow:
-              '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
-            '&:hover': {
-              backgroundColor: '$primary-900',
-            },
-            '@md': {
-              display: 'none',
-            },
-          }}
+          className={tw(['md:hidden shadow-lg'])}
+          colorClass={tw(['!bg-primary-700 !text-white hover:!bg-primary-900'])}
+          sizeClass={tw(['w-12 h-12'])}
         >
           <MenuIcon width={24} height={24} />
         </IconButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content
         className={colorTheme}
-        css={{
+        style={{
           maxHeight:
-            'calc(100vh - env(safe-area-inset-bottom, 24px) - env(safe-area-inset-top, 24px) - 48px - 2rem)',
+            'calc(100vh - env(safe-area-inset-bottom, 24px) - env(safe-area-inset-top, 24px) - 100px - 2rem)',
           maxWidth:
             'calc(100vw - env(safe-area-inset-right, 24px) - env(safe-area-inset-left, 24px) - 2rem)',
           overflowY: 'auto',

diff --git a/packages/react-showroom/client/components/standalone-code-live-editor-comment-popover.tsx b/packages/react-showroom/client/components/standalone-code-live-editor-comment-popover.tsx
@@ -1,6 +1,5 @@
-import { Button, Popover, Textarea } from '@showroomjs/ui';
+import { Button, Popover, Textarea, tw } from '@showroomjs/ui';
 import * as React from 'react';
-import { Div } from './base';
 
 export interface StandaloneCodeLiveEditorCommentPopoverProps
   extends Pick<
@@ -22,9 +21,7 @@ export const StandaloneCodeLiveEditorCommentPopover = React.forwardRef<
       <Popover.Anchor asChild>{props.children}</Popover.Anchor>
       <Popover.Content
         sideOffset={5}
-        css={{
-          pointerEvents: 'auto',
-        }}
+        className={tw(['pointer-events-auto'])}
         onClick={(ev) => ev.stopPropagation()}
       >
         <form
@@ -40,14 +37,7 @@ export const StandaloneCodeLiveEditorCommentPopover = React.forwardRef<
             required
             ref={forwardedRef}
           />
-          <Div
-            css={{
-              display: 'flex',
-              justifyContent: 'end',
-              gap: '$3',
-              paddingTop: '$2',
-            }}
-          >
+          <div className={tw(['flex justify-end gap-3 pt-2'])}>
             <Popover.RawClose asChild>
               <Button variant="outline">Cancel</Button>
             </Popover.RawClose>
@@ -58,7 +48,7 @@ export const StandaloneCodeLiveEditorCommentPopover = React.forwardRef<
             >
               Post
             </Button>
-          </Div>
+          </div>
         </form>
         <Popover.Arrow />
       </Popover.Content>

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,4 +1,4 @@
-import { styled } from '@showroomjs/ui';
+import { styled, tw } from '@showroomjs/ui';
 import * as React from 'react';
 import { XMarkIcon } from '@heroicons/react/20/solid';
 
@@ -16,26 +16,22 @@ interface CommentItemProps extends React.ComponentPropsWithoutRef<'li'> {
 function CommentItemImpl({ children, onDismiss, ...props }: CommentItemProps) {
   return (
     <li {...props}>
-      <DismissButton onClick={onDismiss} type="button">
-        <DismissIcon width={20} height={20} />
-      </DismissButton>
+      <button
+        onClick={onDismiss}
+        type="button"
+        className={tw(['absolute top-1 right-1'])}
+      >
+        <XMarkIcon
+          width={20}
+          height={20}
+          className={tw(['w-5 h-5 text-zinc-400'])}
+        />
+      </button>
       {children}
     </li>
   );
 }
 
-const DismissIcon = styled(XMarkIcon, {
-  width: 20,
-  height: 20,
-  color: '$gray-400',
-});
-
-const DismissButton = styled('button', {
-  position: 'absolute',
-  top: '$1',
-  right: '$1',
-});
-
 const CommentItem = styled(CommentItemImpl, {
   px: '$6',
   py: '$3',

diff --git a/packages/react-showroom/client/components/standalone-code-live-editor.tsx b/packages/react-showroom/client/components/standalone-code-live-editor.tsx
@@ -786,12 +786,8 @@ export const StandaloneCodeLiveEditor = ({
                           editorPosition === 'bottom' ? 'right' : 'bottom'
                         )
                       }
-                      css={{
-                        display: 'none',
-                        '@md': {
-                          display: 'inline-flex',
-                        },
-                      }}
+                      className={tw(['!hidden md:!inline-flex'])}
+                      flat
                     >
                       {isDockToRight ? (
                         <EditorRightIcon />
@@ -807,6 +803,7 @@ export const StandaloneCodeLiveEditor = ({
                         onPressedChange={(show) =>
                           setShowEditor(show, show ? undefined : 'true')
                         }
+                        className={tw(['rounded-full'])}
                         css={
                           showEditor
                             ? {
@@ -977,10 +974,8 @@ const Toolbar = styled('div', {
   px: '$3',
   backgroundColor: 'White',
   borderBottom: '1px solid $gray-200',
-  '@lg': {
-    position: 'sticky',
-    zIndex: 10,
-  },
+  position: 'sticky',
+  zIndex: 1,
 });
 
 const CommentIcon = styled(ChatIcon, {

diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
@@ -1,19 +1,35 @@
-import { styled } from '../stitches.config';
+import * as React from 'react';
+import { tw } from '../lib/tw';
 
-export const IconButton = styled('button', {
-  cursor: 'pointer',
-  all: 'unset',
-  fontFamily: 'inherit',
-  borderRadius: '100%',
-  height: 35,
-  width: 35,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '$gray-400',
-  backgroundColor: 'white',
-  boxShadow: `0 2px 10px $gray-400`,
-  '&:hover': { backgroundColor: '$gray-100' },
-  '&:disabled': { cursor: 'default' },
-  outlineRing: '',
-});
+export type IconButtonProps = React.ComponentPropsWithoutRef<'button'> & {
+  sizeClass?: string;
+  colorClass?: string;
+  flat?: boolean;
+};
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      sizeClass = tw(['w-9 h-9']),
+      colorClass = tw(['text-zinc-400 bg-white hover:bg-zinc-100']),
+      flat,
+      ...props
+    },
+    forwardedRef
+  ) {
+    return (
+      <button
+        type="button"
+        {...props}
+        className={tw(
+          [
+            'inline-flex justify-center items-center rounded-full cursor-pointer disabled:cursor-default',
+            !flat && 'shadow',
+          ],
+          [sizeClass, colorClass, props.className]
+        )}
+        ref={forwardedRef}
+      />
+    );
+  }
+);
diff --git a/packages/ui/src/components/number-input.tsx b/packages/ui/src/components/number-input.tsx
@@ -2,6 +2,7 @@ import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
 import { callAll, isDefined, isNumber, noop } from '@showroomjs/core';
 import { useRifm } from 'rifm';
 import { formatMoney } from '../lib/number';
+import { tw } from '../lib/tw';
 import { styled } from '../stitches.config';
 import { IconButton } from './icon-button';
 import { TextInput, TextInputProps } from './text-input';
@@ -92,11 +93,8 @@ const NumberInputImpl = styled(function NumberInput({
         }
         type="button"
         aria-label="decrement"
-        css={{
-          flexShrink: 0,
-          width: 34,
-          height: 34,
-        }}
+        className={tw(['flex-shrink-0'])}
+        sizeClass={tw(['w-[34px] h-[34px]'])}
         disabled={inputProps.disabled}
       >
         <MinusIcon width={16} height={16} aria-hidden />
@@ -124,7 +122,8 @@ const NumberInputImpl = styled(function NumberInput({
         }
         type="button"
         aria-label="increment"
-        css={{ flexShrink: 0, width: 34, height: 34 }}
+        className={tw(['flex-shrink-0'])}
+        sizeClass={tw(['w-[34px] h-[34px]'])}
         disabled={inputProps.disabled}
       >
         <PlusIcon width={16} height={16} aria-hidden />