New widgets

apps/web/package.json

@@ -1,96 +1,96 @@
 {
-  "name": "@courselit/web",
-  "version": "0.57.12",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "prettier": "prettier --write **/*.ts"
-  },
-  "dependencies": {
-    "@courselit/common-logic": "workspace:^",
-    "@courselit/common-models": "workspace:^",
-    "@courselit/common-widgets": "workspace:^",
-    "@courselit/components-library": "workspace:^",
-    "@courselit/icons": "workspace:^",
-    "@courselit/state-management": "workspace:^",
-    "@courselit/utils": "workspace:^",
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-compose-refs": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-tooltip": "^1.1.8",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@stripe/stripe-js": "^5.4.0",
-    "@types/base-64": "^1.0.0",
-    "archiver": "^5.3.1",
-    "aws4": "^1.13.2",
-    "base-64": "^1.0.0",
-    "chart.js": "^4.4.7",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cookie": "^0.4.2",
-    "date-fns": "^4.1.0",
-    "graphql": "^16.10.0",
-    "graphql-type-json": "^0.3.2",
-    "lodash.debounce": "^4.0.8",
-    "lucide-react": "^0.475.0",
-    "mongodb": "^6.15.0",
-    "mongoose": "^8.13.1",
-    "next": "^14.2.4",
-    "next-auth": "5.0.0-beta.19",
-    "nodemailer": "^6.7.2",
-    "pug": "^3.0.2",
-    "razorpay": "^2.9.4",
-    "react": "^18.2.0",
-    "react-chartjs-2": "^5.3.0",
-    "react-csv": "^2.2.2",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.54.1",
-    "react-redux": "^8.1.2",
-    "recharts": "^2.15.1",
-    "remirror": "^3.0.1",
-    "sharp": "^0.33.2",
-    "slugify": "^1.6.5",
-    "stripe": "^17.5.0",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.1"
-  },
-  "devDependencies": {
-    "@types/bcryptjs": "^2.4.2",
-    "@types/cookie": "^0.4.1",
-    "@types/mongodb": "^4.0.7",
-    "@types/node": "17.0.21",
-    "@types/nodemailer": "^6.4.4",
-    "@types/pug": "^2.0.6",
-    "@types/react": "18.2.31",
-    "@types/react-redux": "^7.1.23",
-    "@types/redux-thunk": "^2.1.0",
-    "eslint": "8.48.0",
-    "eslint-config-next": "^14.0.4",
-    "eslint-config-prettier": "^9.0.0",
-    "postcss": "^8.4.27",
-    "prettier": "^3.0.2",
-    "tailwind-config": "workspace:^",
-    "tailwindcss": "^3.4.1",
-    "tsconfig": "workspace:^",
-    "typescript": "^5.6.2"
-  }
+    "name": "@courselit/web",
+    "version": "0.57.12",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "prettier": "prettier --write **/*.ts"
+    },
+    "dependencies": {
+        "@courselit/common-logic": "workspace:^",
+        "@courselit/common-models": "workspace:^",
+        "@courselit/common-widgets": "workspace:^",
+        "@courselit/components-library": "workspace:^",
+        "@courselit/icons": "workspace:^",
+        "@courselit/state-management": "workspace:^",
+        "@courselit/utils": "workspace:^",
+        "@hookform/resolvers": "^3.9.1",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
+        "@radix-ui/react-avatar": "^1.1.3",
+        "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-collapsible": "^1.1.3",
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-radio-group": "^1.2.3",
+        "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-select": "^2.1.6",
+        "@radix-ui/react-separator": "^1.1.2",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.1.3",
+        "@radix-ui/react-tabs": "^1.1.3",
+        "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-visually-hidden": "^1.1.0",
+        "@stripe/stripe-js": "^5.4.0",
+        "@types/base-64": "^1.0.0",
+        "archiver": "^5.3.1",
+        "aws4": "^1.13.2",
+        "base-64": "^1.0.0",
+        "chart.js": "^4.4.7",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "cookie": "^0.4.2",
+        "date-fns": "^4.1.0",
+        "graphql": "^16.10.0",
+        "graphql-type-json": "^0.3.2",
+        "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.475.0",
+        "mongodb": "^6.15.0",
+        "mongoose": "^8.13.1",
+        "next": "^14.2.4",
+        "next-auth": "5.0.0-beta.19",
+        "nodemailer": "^6.7.2",
+        "pug": "^3.0.2",
+        "razorpay": "^2.9.4",
+        "react": "^18.2.0",
+        "react-chartjs-2": "^5.3.0",
+        "react-csv": "^2.2.2",
+        "react-dom": "^18.2.0",
+        "react-hook-form": "^7.54.1",
+        "react-redux": "^8.1.2",
+        "recharts": "^2.15.1",
+        "remirror": "^3.0.1",
+        "sharp": "^0.33.2",
+        "slugify": "^1.6.5",
+        "stripe": "^17.5.0",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.24.1"
+    },
+    "devDependencies": {
+        "@types/bcryptjs": "^2.4.2",
+        "@types/cookie": "^0.4.1",
+        "@types/mongodb": "^4.0.7",
+        "@types/node": "17.0.21",
+        "@types/nodemailer": "^6.4.4",
+        "@types/pug": "^2.0.6",
+        "@types/react": "18.2.31",
+        "@types/react-redux": "^7.1.23",
+        "@types/redux-thunk": "^2.1.0",
+        "eslint": "8.48.0",
+        "eslint-config-next": "^14.0.4",
+        "eslint-config-prettier": "^9.0.0",
+        "postcss": "^8.4.27",
+        "prettier": "^3.0.2",
+        "tailwind-config": "workspace:^",
+        "tailwindcss": "^3.4.1",
+        "tsconfig": "workspace:^",
+        "typescript": "^5.6.2"
+    }
 }

apps/web/ui-config/widgets.tsx

@@ -12,6 +12,8 @@ import {
     FAQ,
     Pricing,
     Media,
+    Embed,
+    Marquee,
 } from "@courselit/common-widgets";
 
 function loadWidgets(): Record<string, any> {
@@ -27,6 +29,8 @@ function loadWidgets(): Record<string, any> {
     widgets[FAQ.metadata.name] = FAQ;
     widgets[Pricing.metadata.name] = Pricing;
     widgets[Media.metadata.name] = Media;
+    widgets[Embed.metadata.name] = Embed;
+    widgets[Marquee.metadata.name] = Marquee;
     widgets[Footer.metadata.name] = Object.assign({}, Footer, { shared: true });
     widgets[Header.metadata.name] = Object.assign({}, Header, { shared: true });
     widgets[EmailForm.metadata.name] = Object.assign({}, EmailForm, {

packages/common-widgets/src/embed/admin-widget.tsx

@@ -0,0 +1,161 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import Settings from "./settings";
+import {
+    horizontalPadding as defaultHorizontalPadding,
+    verticalPadding as defaultVerticalPadding,
+    height as defaultHeight,
+} from "./defaults";
+import {
+    CssIdField,
+    AdminWidgetPanel,
+    ColorSelector,
+    ContentPaddingSelector,
+    Form,
+    FormField,
+    Select,
+    Textarea,
+    AlertTitle,
+    AlertDescription,
+    Alert,
+} from "@courselit/components-library";
+import { AlertCircle, Lightbulb } from "lucide-react";
+
+export default function AdminWidget({
+    settings,
+    onChange,
+}: {
+    settings: Settings;
+    onChange: (...args: any[]) => void;
+}) {
+    const [backgroundColor, setBackgroundColor] = useState(
+        settings.backgroundColor,
+    );
+    const [url, setUrl] = useState(settings.url);
+    const [script, setScript] = useState(settings.script);
+    const [aspectRatio, setAspectRatio] = useState(settings.aspectRatio);
+    const [height, setHeight] = useState(settings.height || defaultHeight);
+    const [horizontalPadding, setHorizontalPadding] = useState<number>(
+        settings.horizontalPadding || defaultHorizontalPadding,
+    );
+    const [verticalPadding, setVerticalPadding] = useState<number>(
+        settings.verticalPadding || defaultVerticalPadding,
+    );
+    const [cssId, setCssId] = useState(settings.cssId);
+
+    useEffect(() => {
+        onChange({
+            backgroundColor,
+            url,
+            script,
+            aspectRatio,
+            height,
+            horizontalPadding,
+            verticalPadding,
+            cssId,
+        });
+    }, [
+        backgroundColor,
+        url,
+        script,
+        aspectRatio,
+        height,
+        horizontalPadding,
+        verticalPadding,
+        cssId,
+    ]);
+
+    return (
+        <div className="flex flex-col gap-4">
+            <Alert variant="destructive">
+                <AlertTitle>
+                    <span className="flex items-center gap-2">
+                        <AlertCircle className="w-4 h-4" /> Beware
+                    </span>
+                </AlertTitle>
+                <AlertDescription className="text-sm">
+                    Embedding external content may have security implications.
+                    Only embed content from trusted sources.
+                </AlertDescription>
+            </Alert>
+            <AdminWidgetPanel title="Content">
+                <Form className="flex flex-col gap-4">
+                    <FormField
+                        label="URL"
+                        value={url}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setUrl(e.target.value)
+                        }
+                    />
+                    <div className="flex items-center gap-4 my-1">
+                        <hr className="flex-grow border-t border-gray-300" />
+                        <span className="text-gray-500 text-sm font-medium">
+                            OR
+                        </span>
+                        <hr className="flex-grow border-t border-gray-300" />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <label className="mb-1 font-semibold">Script</label>
+                        <Textarea
+                            value={script}
+                            rows={10}
+                            onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
+                                setScript(e.target.value)
+                            }
+                        />
+                    </div>
+                    <div className="text-xs text-gray-500 flex items-center gap-1">
+                        <Lightbulb className="w-4 h-4" />
+                        <p>
+                            If you use the script option, the URL option will be
+                            ignored.
+                        </p>
+                    </div>
+                </Form>
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Design" className="flex flex-col gap-4">
+                <Form className="flex flex-col gap-4">
+                    <FormField
+                        label="Height"
+                        type="number"
+                        value={height}
+                        min={0}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setHeight(Number(e.target.value))
+                        }
+                    />
+                    <Select
+                        title="Aspect ratio"
+                        value={aspectRatio}
+                        onChange={(value?: string) =>
+                            setAspectRatio(value as "16:9" | "4:3" | "1:1")
+                        }
+                        options={[
+                            { label: "Default", value: "default" },
+                            { label: "16:9", value: "16:9" },
+                            { label: "4:3", value: "4:3" },
+                            { label: "1:1", value: "1:1" },
+                        ]}
+                    />
+                </Form>
+                <ColorSelector
+                    title="Background color"
+                    value={backgroundColor || "inherit"}
+                    onChange={(value?: string) => setBackgroundColor(value)}
+                />
+                <ContentPaddingSelector
+                    value={horizontalPadding}
+                    min={50}
+                    onChange={setHorizontalPadding}
+                />
+                <ContentPaddingSelector
+                    variant="vertical"
+                    value={verticalPadding}
+                    onChange={setVerticalPadding}
+                />
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Advanced">
+                <CssIdField value={cssId} onChange={setCssId} />
+            </AdminWidgetPanel>
+        </div>
+    );
+}

packages/common-widgets/src/embed/defaults.ts

@@ -0,0 +1,3 @@
+export const horizontalPadding = 100;
+export const verticalPadding = 50;
+export const height = 500;

packages/common-widgets/src/embed/index.ts

@@ -0,0 +1,10 @@
+import AdminWidget from "./admin-widget";
+import metadata from "./metadata";
+import Widget from "./widget";
+import { Widget as WidgetType } from "@courselit/common-models";
+
+export const Embed: WidgetType = {
+    widget: Widget,
+    metadata,
+    adminWidget: AdminWidget,
+};

packages/common-widgets/src/embed/metadata.ts

@@ -0,0 +1,10 @@
+import { WidgetMetadata, Constants } from "@courselit/common-models";
+const { PageType } = Constants;
+
+const metadata: WidgetMetadata = {
+    name: "embed",
+    displayName: "Embed",
+    compatibleWith: [PageType.PRODUCT, PageType.SITE, PageType.COMMUNITY],
+};
+
+export default metadata;