Merge branch 'main' into 2130-Table_icon_issue

# Conflicts:
#	components/tina-markdown/markdown-component-mapping.tsx
#	pnpm-lock.yaml
#	styles.css
#	tina/tina-lock.json

Author: PothieuG

components/embeds/asideEmbed.tsx components/embeds/boxEmbed.tsxcomponents/embeds/asideEmbed.tsx renamed to components/embeds/boxEmbed.tsx

@@ -3,19 +3,19 @@ import React from "react";
 import { FaLightbulb } from "react-icons/fa6";
 import { Template } from "tinacms";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import MarkdownComponentMapping from "../tina-markdown/markdown-component-mapping";
-import { ComponentWithFigure, withFigureEmbedTemplateFields } from "./componentWithFigure";
 import { toolbarFields } from "@/tina/collection/shared/toolbarFields";
+import MarkdownComponentMapping from "../tina-markdown/markdown-component-mapping";
+import { Figure, inlineFigureDefaultItem, inlineFigureFields } from "./figure";
 
-type AsideVariant = "greybox" | "info" | "todo" | "china" | "codeauditor" | "highlight" | "warning" | "tips";
+type BoxVariant = "greybox" | "info" | "todo" | "china" | "codeauditor" | "highlight" | "warning" | "tips";
 
 type VariantConfig = {
   containerClass: string;
   icon?: JSX.Element;
   textClass?: string;
 };
 
-const variantConfig: Record<AsideVariant, VariantConfig> = {
+const variantConfig: Record<BoxVariant, VariantConfig> = {
   greybox: {
     containerClass: "bg-gray-100",
   },
@@ -73,40 +73,44 @@ const variantConfig: Record<AsideVariant, VariantConfig> = {
   },
 };
 
-export function AsideEmbed(props: any) {
-  // Handle both cases: props.data (from asideEmbedComponent) or props directly (from IntroEmbed)
+export function BoxEmbed(props: any) {
+  // Handle both cases: props.data (from BoxEmbedComponent) or props directly (from IntroEmbed)
   const data = props.data || props;
 
   // Safety check: if data is undefined or null, return null
   if (!data) {
     return null;
   }
 
-  const variant: AsideVariant = data?.variant || "info";
+  // Support both legacy 'variant' and new 'style' prop names
+  const variant: BoxVariant = (data?.style || "info") as BoxVariant;
   const config = variantConfig[variant];
+  const figure: string = data?.figure || "";
+  const figurePrefix: any = data?.figurePrefix || "default";
 
   return (
-    <ComponentWithFigure data={data}>
+    <>
       <div className={`p-4 rounded-sm my-4 ${config.containerClass}`}>
         <div className="flex items-start">
           {config.icon}
-          <div className={`${config.textClass ?? ""}`}>
+          <div className={`[&_p:last-child]:mb-0 ${config.textClass ?? ""}`}>
             <div>
               <TinaMarkdown content={data.body} components={MarkdownComponentMapping} />
             </div>
           </div>
         </div>
       </div>
-    </ComponentWithFigure>
+      <Figure prefix={figurePrefix} text={figure} />
+    </>
   );
 }
 
-export const asideEmbedTemplate: Template = withFigureEmbedTemplateFields({
-  name: "asideEmbed",
-  label: "Aside Box",
+export const boxEmbedTemplate: Template = {
+  name: "boxEmbed",
+  label: "Box",
   ui: {
     defaultItem: {
-      variant: "info",
+      style: "info",
       body: {
         type: "root",
         children: [
@@ -116,12 +120,13 @@ export const asideEmbedTemplate: Template = withFigureEmbedTemplateFields({
           },
         ],
       },
+      ...inlineFigureDefaultItem,
     },
   },
   fields: [
     {
-      name: "variant",
-      label: "Variant",
+      name: "style",
+      label: "style",
       type: "string",
       options: [
         { value: "greybox", label: "Greybox" },
@@ -140,9 +145,10 @@ export const asideEmbedTemplate: Template = withFigureEmbedTemplateFields({
       type: "rich-text",
       toolbarOverride: toolbarFields,
     },
+    ...(inlineFigureFields as any),
   ],
-});
+};
 
-export const asideEmbedComponent = {
-  asideEmbed: (props: any) => <AsideEmbed data={props} />,
+export const boxEmbedComponent = {
+  boxEmbed: (props: any) => <BoxEmbed data={props} />,
 };

components/embeds/componentWithFigure.tsx

@@ -1,13 +1,11 @@
-'use client'
+"use client";
+
+import React, { useRef } from "react";
 import { Template } from "tinacms";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import React, { useRef } from "react";
-import {
-  ComponentWithFigure,
-  withFigureEmbedTemplateFields,
-} from "./componentWithFigure";
-import MarkdownComponentMapping from "../tina-markdown/markdown-component-mapping";
 import { useMarkHighlight } from "@/lib/useMarkHighlight";
+import MarkdownComponentMapping from "../tina-markdown/markdown-component-mapping";
+import { Figure, inlineFigureDefaultItem, inlineFigureFields } from "./figure";
 
 export function EmailEmbed({ data }: { data: any }) {
   const fields = [
@@ -21,17 +19,18 @@ export function EmailEmbed({ data }: { data: any }) {
   const contentRef = useRef<HTMLDivElement>(null);
   useMarkHighlight(contentRef, "ol li div");
 
+  const figure: string = data?.figure || "";
+  const figurePrefix: any = data?.figurePrefix || "default";
+
   return (
-    <ComponentWithFigure data={data}>
+    <>
       <div className="bg-gray-100 p-6 rounded-md mt-4">
         <div className="space-y-3">
           {fields.map(({ label, value }) => (
             <div key={label} className="flex items-start text-right">
               <div className="w-24 pt-2 pr-2">{label}:</div>
               <div className="flex-1">
-                <div className="bg-white border px-3 py-2 rounded text-sm min-h-[40px] flex items-center">
-                  {value}
-                </div>
+                <div className="bg-white border px-3 py-2 rounded text-sm min-h-[40px] flex items-center">{value}</div>
               </div>
             </div>
           ))}
@@ -47,11 +46,12 @@ export function EmailEmbed({ data }: { data: any }) {
           </div>
         )}
       </div>
-    </ComponentWithFigure>
+      <Figure prefix={figurePrefix} text={figure} className="mt-2" />
+    </>
   );
 }
 
-export const emailEmbedTemplate: Template = withFigureEmbedTemplateFields({
+export const emailEmbedTemplate: Template = {
   name: "emailEmbed",
   label: "Email",
   ui: {
@@ -75,6 +75,7 @@ export const emailEmbedTemplate: Template = withFigureEmbedTemplateFields({
           },
         ],
       },
+      ...inlineFigureDefaultItem,
     },
   },
   fields: [
@@ -85,8 +86,9 @@ export const emailEmbedTemplate: Template = withFigureEmbedTemplateFields({
     { name: "subject", label: "Subject", type: "string" },
     { name: "shouldDisplayBody", label: "Display Body?", type: "boolean" },
     { name: "body", label: "Body", type: "rich-text" },
+    ...(inlineFigureFields as any),
   ],
-});
+};
 
 export const emailEmbedComponent = {
   emailEmbed: (props: any) => <EmailEmbed data={props} />,

components/embeds/emailEmbed.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Template } from "tinacms";
 
-export function EndOfIntro() {
+export function EndIntro() {
   return <></>;
 }
 
-export const endOfIntroTemplate: Template = {
-  name: "endOfIntro",
-  label: "End Of Intro",
+export const endIntroTemplate: Template = {
+  name: "endIntro",
+  label: "End Intro",
   fields: [
     {
       type: "string",
@@ -27,6 +27,6 @@ export const endOfIntroTemplate: Template = {
   },
 };
 
-export const endOfIntroComponent = {
-  endOfIntro: () => <EndOfIntro />,
+export const endIntroComponent = {
+  endIntro: () => <EndIntro />,
 };

components/embeds/endOfIntro.tsx components/embeds/endIntro.tsxcomponents/embeds/endOfIntro.tsx renamed to components/embeds/endIntro.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+export type FigurePrefix = "none" | "bad" | "ok" | "good";
+
+export function getPrefix(prefix?: FigurePrefix): string {
+  switch (prefix) {
+    case "bad":
+      return "❌ Figure: ";
+    case "ok":
+      return "😐 Figure: ";
+    case "good":
+      return "✅ Figure: ";
+    case "none":
+    default:
+      return "Figure: ";
+  }
+}
+
+export function Figure({ prefix = "none", text, className }: { prefix?: FigurePrefix; text?: string; className?: string }) {
+  const trimmed = text?.trim();
+  if (!trimmed) return null;
+  const prefixText = getPrefix(prefix);
+  return (
+    <p className={`font-bold mt-1 ${className ?? ""}`.trim()}>
+      {prefixText}
+      {trimmed}
+    </p>
+  );
+}
+
+export const inlineFigureFields = [
+  {
+    name: "figurePrefix",
+    label: "Figure Prefix",
+    type: "string",
+    options: [
+      { value: "none", label: "Default" },
+      { value: "bad", label: "Bad Example" },
+      { value: "ok", label: "OK Example" },
+      { value: "good", label: "Good Example" },
+    ],
+  },
+  { name: "figure", label: "Figure", type: "string" },
+] as const;
+
+export const inlineFigureDefaultItem = {
+  figurePrefix: "none",
+  figure: "",
+};