themeManagerCn and tailwind cleanup

yext · Nov 22, 2024 · 34f74df · 34f74df
1 parent b7d2b78
commit 34f74df
Show file tree

Hide file tree

Showing 28 changed files with 258 additions and 182 deletions.
diff --git a/src/components/puck/CtaWrapper.tsx b/src/components/puck/CtaWrapper.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { ComponentConfig, Fields } from "@measured/puck";
 import { CTA, CTAProps } from "./atoms/cta.js";
 import {
-  yextCn,
   useDocument,
   resolveYextEntityField,
   EntityField,
@@ -57,7 +56,7 @@ const CTAWrapper: React.FC<CTAWrapperProps> = ({
         label={cta?.label}
         link={cta?.link || "#"}
         variant={variant}
-        className={yextCn(className)}
+        className={className}
         fontSize={fontSize}
         {...rest}
       />

diff --git a/src/components/puck/Emails.tsx b/src/components/puck/Emails.tsx
@@ -3,7 +3,7 @@ import { ComponentConfig, Fields } from "@measured/puck";
 import { cva, type VariantProps } from "class-variance-authority";
 import mailIcon from "./assets/mail_outline.svg";
 import {
-  yextCn,
+  themeMangerCn,
   useDocument,
   resolveYextEntityField,
   EntityField,
@@ -32,15 +32,15 @@ const emailsVariants = cva("list-inside font-body-fontFamily", {
     },
     fontWeight: {
       default: "font-body-fontWeight",
-      thin: "font-thin",
-      extralight: "font-extralight",
-      light: "font-light",
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
-      extrabold: "font-extrabold",
-      black: "font-black",
+      "100": "font-thin",
+      "200": "font-extralight",
+      "300": "font-light",
+      "400": "font-normal",
+      "500": "font-medium",
+      "600": "font-semibold",
+      "700": "font-bold",
+      "800": "font-extrabold",
+      "900": "font-black",
     },
     color: {
       default: "text-body-color",
@@ -49,7 +49,6 @@ const emailsVariants = cva("list-inside font-body-fontFamily", {
       accent: "text-palette-accent",
       text: "text-palette-text",
       background: "text-palette-background",
-      foreground: "text-palette-foreground",
     },
   },
   defaultVariants: {
@@ -141,7 +140,7 @@ const Emails: React.FC<EmailsProps> = ({
   return (
     <EntityField displayName="Email List" fieldId={emailListField.field}>
       <ul
-        className={yextCn(
+        className={themeMangerCn(
           "components",
           emailsVariants({ fontSize, fontWeight, color }),
           `${includeHyperlink ? "text-blue-600 dark:text-blue-500 hover:underline" : ""}`

diff --git a/src/components/puck/FlexContainer.tsx b/src/components/puck/FlexContainer.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { ComponentConfig, Fields } from "@measured/puck";
-import { yextCn } from "../../index.js";
+import { themeMangerCn } from "../../index.js";
 
 const flexContainerVariants = cva("flex", {
   variants: {
@@ -62,14 +62,14 @@ const FlexContainer = React.forwardRef<HTMLDivElement, FlexContainerProps>(
   ) => {
     return (
       <div
-        className={yextCn(
+        className={themeMangerCn(
           flexContainerVariants({
             direction,
             alignment,
             justification,
             spacing,
-            className,
-          })
+          }),
+          className
         )}
         ref={ref}
         {...props}
@@ -146,13 +146,15 @@ const FlexContainerComponent: ComponentConfig<FlexContainerProps> = {
     alignment,
     justification,
     spacing,
+    className,
     puck: { renderDropZone },
   }) => (
     <FlexContainer
       renderDropZone={renderDropZone}
       direction={direction}
       alignment={alignment}
       justification={justification}
+      className={className}
       spacing={spacing}
     />
   ),

diff --git a/src/components/puck/GridSection.tsx b/src/components/puck/GridSection.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { ComponentConfig, Fields } from "@measured/puck";
 import { Section } from "./atoms/section.js";
-import { yextCn } from "../../index.js";
+import { themeMangerCn } from "../../index.js";
 
 const paddingClasses = [
   { label: "0", value: "py-0" },
@@ -112,18 +112,18 @@ const GridSection = React.forwardRef<HTMLDivElement, GridSectionProps>(
   ) => {
     return (
       <Section
-        className={yextCn(
+        className={themeMangerCn(
           backgroundVariants({ maxContentWidth, backgroundColor }),
           verticalPadding
         )}
         padding="none"
       >
         <div
-          className={yextCn(
+          className={themeMangerCn(
             gridSectionVariants({
               horizontalSpacing,
-              className,
-            })
+            }),
+            className
           )}
           ref={ref}
           style={{
@@ -137,7 +137,7 @@ const GridSection = React.forwardRef<HTMLDivElement, GridSectionProps>(
           {columns.map(({ span, verticalAlignment }, idx) => (
             <div
               key={idx}
-              className={yextCn(
+              className={themeMangerCn(
                 columnVariants({
                   verticalAlignment,
                 })

diff --git a/src/components/puck/HeadingText.tsx b/src/components/puck/HeadingText.tsx
@@ -58,7 +58,6 @@ const headingTextFields: Fields<HeadingTextProps> = {
       { label: "Accent", value: "accent" },
       { label: "Text", value: "text" },
       { label: "Background", value: "background" },
-      { label: "Foreground", value: "foreground" },
     ],
   },
   transform: {

diff --git a/src/components/puck/HoursStatus.tsx b/src/components/puck/HoursStatus.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { ComponentConfig, Fields } from "@measured/puck";
 import { HoursStatus, HoursType } from "@yext/pages-components";
 import {
-  yextCn,
+  themeMangerCn,
   useDocument,
   resolveYextEntityField,
   EntityField,
@@ -79,7 +79,7 @@ const HoursStatusWrapper: React.FC<HoursStatusProps> = ({
     <EntityField displayName="Hours" fieldId={hoursField.field}>
       <HoursStatus
         hours={hours}
-        className={yextCn(
+        className={themeMangerCn(
           "components font-semibold mb-2 font-body-fontFamily",
           className
         )}

diff --git a/src/components/puck/Image.tsx b/src/components/puck/Image.tsx
@@ -3,7 +3,7 @@ import { ComponentConfig, Fields } from "@measured/puck";
 import { Image, ImageProps, ImageType } from "@yext/pages-components";
 import { cva, type VariantProps } from "class-variance-authority";
 import {
-  yextCn,
+  themeMangerCn,
   useDocument,
   resolveYextEntityField,
   EntityField,
@@ -105,7 +105,7 @@ const ImageWrapper: React.FC<ImageWrapperProps> = ({
   return (
     <EntityField displayName="Image" fieldId={imageField.field}>
       <div
-        className={yextCn(
+        className={themeMangerCn(
           imageWrapperVariants({ size, aspectRatio, rounded }),
           "overflow-hidden"
         )}

diff --git a/src/components/puck/Phone.tsx b/src/components/puck/Phone.tsx
@@ -34,7 +34,6 @@ const phoneVariants = cva(
         accent: "text-palette-accent",
         text: "text-palette-text",
         background: "text-palette-background",
-        foreground: "text-palette-foreground",
       },
     },
     defaultVariants: {

diff --git a/src/components/puck/Promo.tsx b/src/components/puck/Promo.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { ComponentConfig, Fields } from "@measured/puck";
 import { Image, ImageProps, ImageType } from "@yext/pages-components";
 import {
-  yextCn,
+  themeMangerCn,
   useDocument,
   resolveYextEntityField,
   EntityField,
@@ -75,7 +75,6 @@ const promoFields: Fields<PromoProps> = {
           { label: "Accent", value: "accent" },
           { label: "Text", value: "text" },
           { label: "Background", value: "background" },
-          { label: "Foreground", value: "foreground" },
         ],
       },
       transform: {
@@ -111,7 +110,6 @@ const promoFields: Fields<PromoProps> = {
           { label: "Accent", value: "accent" },
           { label: "Text", value: "text" },
           { label: "Background", value: "background" },
-          { label: "Foreground", value: "foreground" },
         ],
       },
       transform: {
@@ -213,15 +211,15 @@ const PromoWrapper: React.FC<PromoProps> = ({
   return (
     <Section className="components">
       <div
-        className={yextCn(
+        className={themeMangerCn(
           "flex flex-col md:flex-row bg-white overflow-hidden md:gap-8",
           orientation === "right" && "md:flex-row-reverse"
         )}
       >
         {resolvedImage && (
           <EntityField displayName="Image" fieldId={image.image.field}>
             <div
-              className={yextCn(
+              className={themeMangerCn(
                 imageWrapperVariants({
                   size: image.size,
                   rounded: image.rounded,

diff --git a/src/components/puck/atoms/body.tsx b/src/components/puck/atoms/body.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { clsx } from "clsx";
+import { themeMangerCn } from "../../../index.ts";
 
 // Define the variants for the body component
 const bodyVariants = cva("components font-body-fontFamily", {
@@ -68,15 +68,15 @@ const Body = React.forwardRef<HTMLParagraphElement, BodyProps>(
   ) => {
     return (
       <p
-        className={clsx(
-          className,
+        className={themeMangerCn(
           bodyVariants({
             fontSize,
             fontWeight,
             color,
             textTransform,
             className,
-          })
+          }),
+          className
         )}
         ref={ref}
         {...props}

diff --git a/src/components/puck/atoms/button.tsx b/src/components/puck/atoms/button.tsx
@@ -1,15 +1,18 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { clsx } from "clsx";
+import { themeMangerCn } from "../../../index.ts";
 
 const buttonVariants = cva(
-  "py-4 components inline-flex items-center justify-center whitespace-nowrap rounded-button-borderRadius font-body-fontFamily font-button-fontWeight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
+  "py-4 components inline-flex items-center justify-center whitespace-nowrap rounded-button-borderRadius font-body-fontFamily font-button-fontWeight " +
+    "ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
+    "disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         primary:
-          "bg-button-backgroundColor text-button-textColor border-2 border-button-backgroundColor hover:border-button-textColor focus:border-button-textColor active:bg-button-textColor active:text-button-backgroundColor active:border-button-backgroundColor",
+          "bg-button-backgroundColor text-button-textColor border-2 border-button-backgroundColor hover:border-button-textColor " +
+          "focus:border-button-textColor active:bg-button-textColor active:text-button-backgroundColor active:border-button-backgroundColor",
         link: "text-button-textColor underline-offset-4 underline",
       },
       size: {
@@ -73,9 +76,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
-        className={clsx(
-          className,
-          buttonVariants({ variant, size, borderRadius, fontSize })
+        className={themeMangerCn(
+          buttonVariants({ variant, size, borderRadius, fontSize }),
+          className
         )}
         ref={ref}
         {...props}