chore(repo): remove forward refs, adjust types, change imports in demos

apps/demo/emails/airbnb-review.tsx

@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface AirbnbReviewEmailProps {

apps/demo/emails/amazon-review.tsx

@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface AmazonReviewEmailProps {

apps/demo/emails/apple-receipt.tsx

@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';

apps/demo/emails/codepen-challengers.tsx

@@ -12,7 +12,7 @@ import {
   Section,
   Text,
   Row
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';

apps/demo/emails/dropbox-reset-password.tsx

@@ -9,7 +9,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface DropboxResetPasswordEmailProps {

apps/demo/emails/github-access-token.tsx

@@ -9,7 +9,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface GithubAccessTokenEmailProps {

apps/demo/emails/google-play-policy-update.tsx

@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';

apps/demo/emails/koala-welcome.tsx

@@ -9,7 +9,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface KoalaWelcomeEmailProps {

apps/demo/emails/linear-login-code.tsx

@@ -11,7 +11,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface LinearLoginCodeEmailProps {

apps/demo/emails/netlify-welcome.tsx

@@ -13,7 +13,7 @@ import {
   Section,
   Tailwind,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface NetlifyWelcomeEmailProps {

apps/demo/emails/nike-receipt.tsx

@@ -12,7 +12,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';

apps/demo/emails/notion-magic-link.tsx

@@ -1,14 +1,4 @@
-import {
-  Body,
-  Container,
-  Head,
-  Heading,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Text
-} from '@jsx-email/components';
+import { Body, Container, Head, Heading, Html, Img, Link, Preview, Text } from '@jsx-email/all';
 import * as React from 'react';
 
 interface NotionMagicLinkEmailProps {

apps/demo/emails/plaid-verify-identity.tsx

@@ -1,14 +1,4 @@
-import {
-  Body,
-  Container,
-  Head,
-  Heading,
-  Html,
-  Img,
-  Link,
-  Section,
-  Text
-} from '@jsx-email/components';
+import { Body, Container, Head, Heading, Html, Img, Link, Section, Text } from '@jsx-email/all';
 import * as React from 'react';
 
 interface PlaidVerifyIdentityEmailProps {

apps/demo/emails/raycast-magic-link.tsx

@@ -10,7 +10,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface RaycastMagicLinkEmailProps {

apps/demo/emails/slack-confirm.tsx

@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface SlackConfirmEmailProps {

apps/demo/emails/stack-overflow-tips.tsx

@@ -12,7 +12,7 @@ import {
   Section,
   Text,
   Row
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface StackOverflowTipsEmailProps {

apps/demo/emails/stripe-welcome.tsx

@@ -10,7 +10,7 @@ import {
   Preview,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : '';

apps/demo/emails/twitch-reset-password.tsx

@@ -10,7 +10,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface TwitchResetPasswordEmailProps {

apps/demo/emails/vercel-invite-user.tsx

@@ -14,7 +14,7 @@ import {
   Section,
   Tailwind,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface VercelInviteUserEmailProps {

apps/demo/emails/yelp-recent-login.tsx

@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text
-} from '@jsx-email/components';
+} from '@jsx-email/all';
 import * as React from 'react';
 
 interface YelpRecentLoginEmailProps {

apps/demo/package.json

@@ -11,4 +11,4 @@
     "@jsx-email/all": "workspace:*",
     "@jsx-email/cli": "workspace:*"
   }
-}
+}

package.json

@@ -48,4 +48,4 @@
       "react-router-dom": "6.16.0"
     }
   }
-}
+}

packages/body/src/body.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 type RootProps = React.ComponentPropsWithoutRef<'body'>;
 

packages/button/src/button.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type React from 'react';
 
 import { pxToPt, parsePadding } from './utils';
 
-type ButtonElement = React.ElementRef<'a'>;
 type RootProps = React.ComponentPropsWithoutRef<'a'>;
 
 export interface ButtonProps extends RootProps {
@@ -40,40 +39,38 @@ const buttonTextStyle = (pb?: number) => {
   };
 };
 
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  ({ children, style, target = '_blank', ...props }, forwardedRef) => {
-    const { pt, pr, pb, pl } = parsePadding({
-      padding: style?.padding,
-      paddingBottom: style?.paddingBottom,
-      paddingLeft: style?.paddingLeft,
-      paddingRight: style?.paddingRight,
-      paddingTop: style?.paddingTop
-    });
+export const Button: React.FC<Readonly<ButtonProps>> = ({
+  children,
+  style,
+  target = '_blank',
+  ...props
+}) => {
+  const { pt, pr, pb, pl } = parsePadding({
+    padding: style?.padding,
+    paddingBottom: style?.paddingBottom,
+    paddingLeft: style?.paddingLeft,
+    paddingRight: style?.paddingRight,
+    paddingTop: style?.paddingTop
+  });
 
-    const y = pt + pb;
-    const textRaise = pxToPt(y);
+  const y = pt + pb;
+  const textRaise = pxToPt(y);
 
-    return (
-      <a
-        {...props}
-        ref={forwardedRef}
-        target={target}
-        style={buttonStyle({ ...style, pb, pl, pr, pt })}
-      >
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
-          }}
-        />
-        <span style={buttonTextStyle(pb)}>{children}</span>
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
-          }}
-        />
-      </a>
-    );
-  }
-);
+  return (
+    <a {...props} target={target} style={buttonStyle({ ...style, pb, pl, pr, pt })}>
+      <span
+        dangerouslySetInnerHTML={{
+          __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
+        }}
+      />
+      <span style={buttonTextStyle(pb)}>{children}</span>
+      <span
+        dangerouslySetInnerHTML={{
+          __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
+        }}
+      />
+    </a>
+  );
+};
 
 Button.displayName = 'Button';

packages/cli/app/src/css/globals.css

@@ -1,13 +1,23 @@
 @import url(https://fonts.bunny.net/css?family=andika:400,400i,700,700i|inter:400,600|montserrat:100,200,300,400,500,600);
-@import './monokai4.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  html, body {
-    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  html,
+  body {
+    font-family:
+      'Montserrat',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Helvetica,
+      Arial,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol';
   }
 
   .shiki {
@@ -27,11 +37,13 @@
     white-space: pre;
   }
 
-  .shiki .line:last-child:before, .shiki .line:last-child span {
+  .shiki .line:last-child:before,
+  .shiki .line:last-child span {
     padding-bottom: 30px;
   }
 
-  .shiki .line:first-child:before, .shiki .line:first-child span {
+  .shiki .line:first-child:before,
+  .shiki .line:first-child span {
     padding-top: 10px;
   }
 

packages/column/src/column.tsx

@@ -1,16 +1,17 @@
-import * as React from 'react';
+import type React from 'react';
 
-type ColumnElement = React.ElementRef<'td'>;
 type RootProps = React.ComponentPropsWithoutRef<'td'>;
 
 export interface ColumnProps extends RootProps {}
 
-export const Column = React.forwardRef<ColumnElement, Readonly<ColumnProps>>(
-  ({ children, style, ...props }, forwardedRef) => (
-    <td {...props} ref={forwardedRef} data-id="@jsx-email/column" style={style}>
-      {children}
-    </td>
-  )
+export const Column = ({
+  children,
+  style,
+  ...props
+}: React.PropsWithChildren<Readonly<ColumnProps>>) => (
+  <td {...props} data-id="@jsx-email/column" style={style}>
+    {children}
+  </td>
 );
 
 Column.displayName = 'Column';