Remove circular dependency between components-library and page-primitives

Author: rajat1saxena

apps/web/app/(with-contexts)/(with-layout)/products/products-list.tsx

@@ -7,7 +7,8 @@ import { useProducts } from "@/hooks/use-products";
 import { BookOpen } from "lucide-react";
 import { EmptyState } from "./empty-state";
 import { Button } from "@components/ui/button";
-import { SkeletonCard, ProductCard } from "@courselit/components-library";
+import { SkeletonCard } from "@components/skeleton-card";
+import { ProductCard } from "@courselit/page-blocks";
 import { SiteInfoContext } from "@components/contexts";
 import { truncate } from "@ui-lib/utils";
 const ITEMS_PER_PAGE = 9;

packages/components-library/package.json

@@ -56,7 +56,6 @@
         "@courselit/state-management": "workspace:^",
         "@courselit/text-editor": "workspace:^",
         "@courselit/utils": "workspace:^",
-        "@courselit/page-primitives": "workspace:^",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",

packages/components-library/src/index.ts

@@ -55,7 +55,6 @@ export * from "./paginated-table";
 import getSymbolFromCurrency from "currency-symbol-map";
 export * from "./content-card";
 export * from "./skeleton-card";
-export * from "./product-card";
 export * from "./video-with-preview";
 export * from "./image";
 export * from "./vertical-padding-selector";

packages/components-library/src/product-card.tsx

@@ -20,7 +20,6 @@ import {
     Constants,
     PaymentPlan,
     Theme,
-    UITheme,
 } from "@courselit/common-models";
 import { DEFAULT_FAILURE_MESSAGE, DEFAULT_SUCCESS_MESSAGE } from "../constants";
 
@@ -30,7 +29,7 @@ interface CustomSettingsProps {
     pageData: Record<string, unknown>;
     onChange: (...args: any[]) => void;
     address: Address;
-    theme: UITheme;
+    theme: Theme;
 }
 
 export default function CustomSettings({
@@ -83,13 +82,10 @@ export default function CustomSettings({
     >(settings.editingViewShowSuccess || "0");
     const [maxWidth, setMaxWidth] = useState<
         Theme["structure"]["page"]["width"]
-    >(settings.maxWidth || theme.theme.structure.page.width);
+    >(settings.maxWidth || theme.structure.page.width);
     const [verticalPadding, setVerticalPadding] = useState<
         Theme["structure"]["section"]["verticalPadding"]
-    >(
-        settings.verticalPadding ||
-            theme.theme.structure.section.verticalPadding,
-    );
+    >(settings.verticalPadding || theme.structure.section.verticalPadding);
     const [mediaBorderRadius, setMediaBorderRadius] = useState(
         settings.mediaRadius || 2,
     );

packages/page-blocks/src/banner/admin-widget/custom-settings.tsx

@@ -0,0 +1 @@
+export * from "./product-card";

packages/page-blocks/src/components/index.ts

@@ -0,0 +1,58 @@
+import { Course, SiteInfo, Theme } from "@courselit/common-models";
+import { getSymbolFromCurrency, Image } from "@courselit/components-library";
+import { Badge } from "@courselit/components-library";
+import { PageCardHeader, Subheader2 } from "@courselit/page-primitives";
+import { PageCardContent } from "@courselit/page-primitives";
+import { PageCard, PageCardImage } from "@courselit/page-primitives";
+import { getPlanPrice, truncate } from "@courselit/utils";
+
+export function ProductCard({
+    product,
+    siteinfo,
+    theme,
+}: {
+    product: Course;
+    siteinfo: SiteInfo;
+    theme?: Theme;
+}) {
+    const defaultPlan = product.paymentPlans?.filter(
+        (plan) => plan.planId === product.defaultPaymentPlan,
+    )[0];
+    const { amount, period } = getPlanPrice(defaultPlan);
+
+    return (
+        <PageCard
+            href={`/p/${product.pageId}`}
+            className="overflow-hidden"
+            theme={theme}
+        >
+            <PageCardImage
+                src={product.featuredImage?.file}
+                alt={product.title}
+                className="aspect-video object-cover rounded-t-lg rounded-b-none"
+                theme={theme}
+            />
+            <PageCardContent theme={theme}>
+                <PageCardHeader theme={theme}>{product.title}</PageCardHeader>
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1">
+                        <Image
+                            src={product.user?.avatar?.thumbnail}
+                            alt={product.user?.name || "User Avatar"}
+                        />
+                        <Subheader2 theme={theme}>
+                            {truncate(product.user?.name || "Unnamed", 20)}
+                        </Subheader2>
+                    </div>
+                    <Badge className="flex items-center font-medium">
+                        {getSymbolFromCurrency(
+                            siteinfo.currencyISOCode || "USD",
+                        )}
+                        <span>{amount.toFixed(2)}</span>
+                        <span className="ml-1">{period}</span>
+                    </Badge>
+                </div>
+            </PageCardContent>
+        </PageCard>
+    );
+}

packages/page-blocks/src/components/product-card.tsx

@@ -1,14 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { Course, Theme, WidgetProps } from "@courselit/common-models";
-import {
-    TextRenderer,
-    SkeletonCard,
-    ProductCard,
-} from "@courselit/components-library";
+import { TextRenderer, SkeletonCard } from "@courselit/components-library";
 import { actionCreators } from "@courselit/state-management";
 import { FetchBuilder } from "@courselit/utils";
 import Settings from "./settings";
 import { Header1, Subheader1, Section } from "@courselit/page-primitives";
+import { ProductCard } from "../components";
 
 export default function Widget({
     settings: {

packages/page-blocks/src/featured/widget.tsx

@@ -31,3 +31,4 @@ export * from "./content";
 export * from "./faq";
 export * from "./pricing";
 export * from "./media";
+export * from "./components";