Stitches v1 canary migration

components/Accordion.tsx

@@ -3,8 +3,6 @@ import { styled, CSS } from '../stitches.config';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 
-import * as Polymorphic from '@radix-ui/react-polymorphic';
-
 const StyledAccordion = styled(AccordionPrimitive.Root, {});
 
 const StyledItem = styled(AccordionPrimitive.Item, {
@@ -59,23 +57,20 @@ const StyledButton = styled(AccordionPrimitive.Button, {
   },
 });
 
-type AccordionButtonOwnProps = Polymorphic.OwnProps<typeof AccordionPrimitive.Button> & {
-  css?: any;
-};
-
-type AccordionButtonComponent = Polymorphic.ForwardRefComponent<
-  Polymorphic.IntrinsicElement<typeof AccordionPrimitive.Button>,
-  AccordionButtonOwnProps
->;
+type AccordionPrimitiveProps = Omit<React.ComponentProps<typeof AccordionPrimitive.Button>, 'as'>;
+type AccordionButtonProps = AccordionPrimitiveProps & { css?: CSS };
 
-export const AccordionButton = React.forwardRef(({ children, ...props }, forwardedRef) => (
+export const AccordionButton = React.forwardRef<
+  React.ElementRef<typeof StyledButton>,
+  AccordionButtonProps
+>(({ children, ...props }, forwardedRef) => (
   <StyledHeader>
     <StyledButton {...props} ref={forwardedRef}>
       {children}
       <ChevronDownIcon />
     </StyledButton>
   </StyledHeader>
-)) as AccordionButtonComponent;
+));
 
 const StyledPanel = styled(AccordionPrimitive.Panel, {
   p: '$2',

components/Alert.tsx

@@ -1,11 +1,6 @@
-import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled } from '../stitches.config';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
-const DEFAULT_TAG = 'div';
-
-const StyledAlert = styled(DEFAULT_TAG, {
+export const Alert = styled('div', {
   // Reset
   boxSizing: 'border-box',
   '&::before': {
@@ -52,16 +47,3 @@ const StyledAlert = styled(DEFAULT_TAG, {
     variant: 'gray',
   },
 });
-
-type AlertCSSProp = { css?: CSS };
-// TODO: Remove omit fix when this is merged https://github.com/modulz/stitches/issues/421
-type AlertVariants = Omit<StitchesVariants<typeof StyledAlert>, 'size'>;
-type AlertOwnProps = AlertCSSProp & AlertVariants & { size?: any };
-
-type AlertComponent = Polymorphic.ForwardRefComponent<typeof DEFAULT_TAG, AlertOwnProps>;
-
-export const Alert = React.forwardRef((props, forwardedRef) => {
-  return <StyledAlert {...props} ref={forwardedRef} />;
-}) as AlertComponent;
-
-Alert.toString = () => `.${StyledAlert.className}`;

components/AlertDialog.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
-import { styled, CSS } from '../stitches.config';
+import { styled } from '../stitches.config';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { overlayStyles } from './Overlay';
 import { panelStyles } from './Panel';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
 type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {
   children: React.ReactNode;
 };
 
-const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
-  ...overlayStyles,
+const StyledOverlay = styled(AlertDialogPrimitive.Overlay, overlayStyles, {
   position: 'fixed',
   top: 0,
   right: 0,
@@ -28,8 +25,7 @@ export function AlertDialog({ children, ...props }: AlertDialogProps) {
   );
 }
 
-const StyledContent = styled(AlertDialogPrimitive.Content, {
-  ...panelStyles,
+export const AlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles, {
   position: 'fixed',
   top: '50%',
   left: '50%',
@@ -44,20 +40,6 @@ const StyledContent = styled(AlertDialogPrimitive.Content, {
   },
 });
 
-type AlertDialogContentOwnProps = Polymorphic.OwnProps<typeof AlertDialogPrimitive.Content> & {
-  css?: CSS;
-};
-type AlertDialogContentComponent = Polymorphic.ForwardRefComponent<
-  Polymorphic.IntrinsicElement<typeof AlertDialogPrimitive.Content>,
-  AlertDialogContentOwnProps
->;
-
-export const AlertDialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => (
-  <StyledContent {...props} ref={forwardedRef}>
-    {children}
-  </StyledContent>
-)) as AlertDialogContentComponent;
-
 export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 export const AlertDialogTitle = AlertDialogPrimitive.Title;
 export const AlertDialogDescription = AlertDialogPrimitive.Description;

components/Avatar.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { styled, StitchesVariants, CSS } from '../stitches.config';
+import { styled, VariantProps, CSS } from '../stitches.config';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { Box } from './Box';
 import { Status } from './Status';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   alignItems: 'center',
   justifyContent: 'center',
@@ -22,7 +20,7 @@ const StyledAvatar = styled(AvatarPrimitive.Root, {
   margin: '0',
   outline: 'none',
   padding: '0',
-  fontWeight: '500',
+  fontWeight: '500' as any,
   color: '$hiContrast',
 
   '&::before': {
@@ -244,30 +242,23 @@ export const AvatarGroup = styled('div', {
 type StatusVariants = React.ComponentProps<typeof Status>;
 type StatusColors = Pick<StatusVariants, 'variant'>;
 
-type AvatarCSSProp = { css?: CSS };
-// TODO: Remove omit fix when this is merged https://github.com/modulz/stitches/issues/421
-type AvatarVariants = Omit<StitchesVariants<typeof StyledAvatar>, 'size'>;
-type AvatarOwnProps = Polymorphic.OwnProps<typeof AvatarPrimitive.Root> &
-  AvatarCSSProp &
+type AvatarVariants = VariantProps<typeof StyledAvatar>;
+type AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;
+type AvatarOwnProps = AvatarPrimitiveProps &
   AvatarVariants & {
+    css?: CSS;
     alt?: string;
     src?: string;
     fallback?: React.ReactNode;
     status?: StatusColors['variant'];
-    size?: any; // TODO: Fix when this is merged https://github.com/modulz/stitches/issues/421
   };
 
-type AvatarComponent = Polymorphic.ForwardRefComponent<
-  Polymorphic.IntrinsicElement<typeof AvatarPrimitive.Root>,
-  AvatarOwnProps
->;
-
-export const Avatar = React.forwardRef(
+export const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(
   ({ alt, src, fallback, size, variant, shape, css, status, ...props }, forwardedRef) => {
     return (
       <Box
         css={{
-          ...(css as any),
+          ...css,
           position: 'relative',
           height: 'fit-content',
           width: 'fit-content',
@@ -289,11 +280,10 @@ export const Avatar = React.forwardRef(
               mb: '-3px',
             }}
           >
-            {/* TODO: Fix when this is merged https://github.com/modulz/stitches/issues/421 */}
-            <Status size={size > 2 ? ('2' as any) : ('1' as any)} variant={status} />
+            <Status size={size && size > 2 ? '2' : '1'} variant={status} />
           </Box>
         )}
       </Box>
     );
   }
-) as AvatarComponent;
+);

components/Badge.tsx

@@ -1,11 +1,6 @@
-import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled } from '../stitches.config';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
-const DEFAULT_TAG = 'span';
-
-const StyledBadge = styled(DEFAULT_TAG, {
+export const Badge = styled('span', {
   // Reset
   alignItems: 'center',
   appearance: 'none',
@@ -437,14 +432,3 @@ const StyledBadge = styled(DEFAULT_TAG, {
     variant: 'gray',
   },
 });
-
-type BadgeCSSProp = { css?: CSS };
-// TODO: Remove omit fix when this is merged https://github.com/modulz/stitches/issues/421
-type BadgeVariants = Omit<StitchesVariants<typeof StyledBadge>, 'size'>;
-type BadgeOwnProps = BadgeCSSProp & BadgeVariants & { size?: any };
-
-type BadgeComponent = Polymorphic.ForwardRefComponent<typeof DEFAULT_TAG, BadgeOwnProps>;
-
-export const Badge = React.forwardRef((props, forwardedRef) => {
-  return <StyledBadge {...props} ref={forwardedRef} />;
-}) as BadgeComponent;

components/Banner.tsx

@@ -1,11 +1,6 @@
-import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled } from '../stitches.config';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
-const DEFAULT_TAG = 'div';
-
-const StyledBanner = styled(DEFAULT_TAG, {
+export const Banner = styled('div', {
   // Reset
   boxSizing: 'border-box',
   '&::before': {
@@ -83,16 +78,3 @@ const StyledBanner = styled(DEFAULT_TAG, {
     variant: 'gray',
   },
 });
-
-type BannerCSSProp = { css?: CSS };
-// TODO: Remove omit fix when this is merged https://github.com/modulz/stitches/issues/421
-type BannerVariants = Omit<StitchesVariants<typeof StyledBanner>, 'size'>;
-type BannerOwnProps = BannerCSSProp & BannerVariants & { size?: any };
-
-type BannerComponent = Polymorphic.ForwardRefComponent<typeof DEFAULT_TAG, BannerOwnProps>;
-
-export const Banner = React.forwardRef((props, forwardedRef) => {
-  return <StyledBanner {...props} ref={forwardedRef} />;
-}) as BannerComponent;
-
-Banner.toString = () => `.${StyledBanner.className}`;

components/Button.tsx

@@ -1,11 +1,6 @@
-import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled } from '../stitches.config';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
-const DEFAULT_TAG = 'button';
-
-const StyledButton = styled(DEFAULT_TAG, {
+export const Button = styled('button', {
   // Reset
   all: 'unset',
   alignItems: 'center',
@@ -324,16 +319,3 @@ const StyledButton = styled(DEFAULT_TAG, {
     variant: 'gray',
   },
 });
-
-type ButtonCSSProp = { css?: CSS };
-// TODO: Remove omit fix when this is merged https://github.com/modulz/stitches/issues/421
-type ButtonVariants = Omit<StitchesVariants<typeof StyledButton>, 'size'>;
-type ButtonOwnProps = ButtonCSSProp & ButtonVariants & { size?: any };
-
-type ButtonComponent = Polymorphic.ForwardRefComponent<typeof DEFAULT_TAG, ButtonOwnProps>;
-
-export const Button = React.forwardRef((props, forwardedRef) => {
-  return <StyledButton {...props} ref={forwardedRef} />;
-}) as ButtonComponent;
-
-Button.toString = () => `.${StyledButton.className}`;

components/Card.tsx

@@ -1,15 +1,6 @@
-import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled } from '../stitches.config';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
-const DEFAULT_TAG = 'div';
-
-type CardCSSProp = { css?: CSS };
-type CardVariants = StitchesVariants<typeof StyledCard>;
-type CardOwnProps = CardCSSProp & CardVariants;
-
-const StyledCard = styled(DEFAULT_TAG, {
+export const Card = styled('div', {
   appearance: 'none',
   border: 'none',
   boxSizing: 'border-box',
@@ -105,9 +96,3 @@ const StyledCard = styled(DEFAULT_TAG, {
     },
   },
 });
-
-type CardComponent = Polymorphic.ForwardRefComponent<typeof DEFAULT_TAG, CardOwnProps>;
-
-export const Card = React.forwardRef((props, forwardedRef) => {
-  return <StyledCard {...props} ref={forwardedRef} />;
-}) as CardComponent;

components/Checkbox.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled, CSS, VariantProps } from '../stitches.config';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
 const StyledCheckbox = styled(CheckboxPrimitive.Root, {
   all: 'unset',
   boxSizing: 'border-box',
@@ -67,22 +65,16 @@ const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
   width: '100%',
 });
 
-type CheckboxCSSProp = { css?: CSS };
-// TODO: Remove omit fix when this is merged https://github.com/modulz/stitches/issues/421
-type CheckboxVariants = Omit<StitchesVariants<typeof StyledCheckbox>, 'size'>;
-type CheckboxOwnProps = Polymorphic.OwnProps<typeof CheckboxPrimitive.Root> &
-  CheckboxCSSProp &
-  CheckboxVariants & { size?: any };
-
-type CheckboxComponent = Polymorphic.ForwardRefComponent<
-  Polymorphic.IntrinsicElement<typeof CheckboxPrimitive.Root>,
-  CheckboxOwnProps
->;
+type CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;
+type CheckboxVariants = VariantProps<typeof StyledCheckbox>;
+type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };
 
-export const Checkbox = React.forwardRef((props, forwardedRef) => (
-  <StyledCheckbox {...props} ref={forwardedRef}>
-    <StyledIndicator>
-      <CheckIcon />
-    </StyledIndicator>
-  </StyledCheckbox>
-)) as CheckboxComponent;
+export const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(
+  (props, forwardedRef) => (
+    <StyledCheckbox {...props} ref={forwardedRef}>
+      <StyledIndicator>
+        <CheckIcon />
+      </StyledIndicator>
+    </StyledCheckbox>
+  )
+);

components/Code.tsx

@@ -1,15 +1,6 @@
-import React from 'react';
-import { styled, CSS, StitchesVariants } from '../stitches.config';
+import { styled } from '../stitches.config';
 
-import type * as Polymorphic from '@radix-ui/react-polymorphic';
-
-const DEFAULT_TAG = 'code';
-
-type CodeCSSProp = { css?: CSS };
-type CodeVariants = StitchesVariants<typeof StyledCode>;
-type CodeOwnProps = CodeCSSProp & CodeVariants;
-
-const StyledCode = styled(DEFAULT_TAG, {
+export const Code = styled('code', {
   fontFamily: '$mono',
   fontSize: 'max(12px, 85%)',
   whiteSpace: 'nowrap',
@@ -31,9 +22,3 @@ const StyledCode = styled(DEFAULT_TAG, {
     variant: 'violet',
   },
 });
-
-type CodeComponent = Polymorphic.ForwardRefComponent<typeof DEFAULT_TAG, CodeOwnProps>;
-
-export const Code = React.forwardRef((props, forwardedRef) => {
-  return <StyledCode {...props} ref={forwardedRef} />;
-}) as CodeComponent;