feat(web): wrap tailwind copy-paste component code with <Tailwind> (#2699)

Author: gabrielmfern

apps/web/src/components/component-code-view.spec.tsx

@@ -0,0 +1,61 @@
+import { wrapWithTailwind } from './component-code-view';
+
+const code = `<Section className="my-[16px] text-center">
+  <Section className="inline-block w-full max-w-[250px] text-left align-top">
+    <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
+      What's new
+    </Text>
+    <Text className="m-0 mt-[8px] font-semibold text-[20px] text-gray-900 leading-[28px]">
+      Versatile Comfort
+    </Text>
+    <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
+      Experience ultimate comfort and versatility with our furniture
+      collection, designed to adapt to your ever-changing needs.
+    </Text>
+    <Link className="text-indigo-600 underline" href="https://react.email">
+      Read more
+    </Link>
+  </Section>
+  <Section className="my-[8px] inline-block w-full max-w-[220px] align-top">
+    <Img
+      alt="An aesthetic picture taken of an Iphone, flowers, glasses and a card that reads 'Gucci, bloom' coming out of a leathered bag with a ziper"
+      className="rounded-[8px] object-cover"
+      height={220}
+      src="/static/versatile-comfort.jpg"
+      width={220}
+    />
+  </Section>
+</Section>`;
+
+test('wrapWithTailwind()', () => {
+  expect(wrapWithTailwind(code)).toMatchInlineSnapshot(`
+    "<Tailwind>
+      <Section className="my-[16px] text-center">
+        <Section className="inline-block w-full max-w-[250px] text-left align-top">
+          <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
+            What's new
+          </Text>
+          <Text className="m-0 mt-[8px] font-semibold text-[20px] text-gray-900 leading-[28px]">
+            Versatile Comfort
+          </Text>
+          <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
+            Experience ultimate comfort and versatility with our furniture
+            collection, designed to adapt to your ever-changing needs.
+          </Text>
+          <Link className="text-indigo-600 underline" href="https://react.email">
+            Read more
+          </Link>
+        </Section>
+        <Section className="my-[8px] inline-block w-full max-w-[220px] align-top">
+          <Img
+            alt="An aesthetic picture taken of an Iphone, flowers, glasses and a card that reads 'Gucci, bloom' coming out of a leathered bag with a ziper"
+            className="rounded-[8px] object-cover"
+            height={220}
+            src="/static/versatile-comfort.jpg"
+            width={220}
+          />
+        </Section>
+      </Section>  
+    </Tailwind>"
+  `);
+});

apps/web/src/components/component-code-view.tsx

@@ -15,6 +15,12 @@ import { TabTrigger } from './tab-trigger';
 
 type ReactCodeVariant = Exclude<CodeVariant, 'html' | 'react'>;
 
+export function wrapWithTailwind(jsx: string) {
+  return `<Tailwind>
+${jsx.replaceAll(/[^\n\r]*(\n|\r|\r\n)?/g, (match) => `  ${match}`)}
+</Tailwind>`;
+}
+
 export function ComponentCodeView({
   component,
 }: {
@@ -51,6 +57,11 @@ export function ComponentCodeView({
       Object.keys(allReactEmailComponents),
     );
 
+    if (selectedReactCodeVariant === 'tailwind') {
+      importsReactEmail.push('Tailwind');
+      code = wrapWithTailwind(code);
+    }
+
     let importStatements = '';
 
     if (importsReactEmail.length > 0) {