@payloadcms/figma 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/plugin/build-config.js

@@ -1,6 +1,7 @@
 import { cloudStoragePlugin } from '@payloadcms/plugin-cloud-storage';
 import { lexicalEditor } from '@payloadcms/richtext-lexical';
 import { buildConfig as payloadBuildConfig } from 'payload';
+import { deepMergeSimple } from 'payload/shared';
 import { getBootstrapInfo } from '../api/control-plane.js';
 import { getValidCredential } from '../auth/oauth-flow.js';
 import { getTokenStore } from '../auth/token-store.js';
@@ -12,6 +13,7 @@ import { schema } from '../endpoints/schema.js';
 import { oAuth2Plugin } from '../oauth/index.js';
 import { createStorageClient } from '../storage-content-api/client.js';
 import { contentApiStorageAdapter } from '../storage-content-api/index.js';
+import { translations as figmaTranslations } from '../translations/index.js';
 import { cacheAllEnvironments } from '../utils/cache-bootstrap.js';
 import { getEnvVarSync } from '../utils/env-management.js';
 import * as log from '../utils/log.js';
@@ -323,7 +325,14 @@ export async function buildFigmaConfig(config) {
             avatar: {
                 Component: '@payloadcms/figma/client#FigmaAvatar'
             },
-            ...config.admin
+            ...config.admin,
+            components: {
+                ...config.admin?.components,
+                providers: [
+                    ...config.admin?.components?.providers ?? [],
+                    '@payloadcms/figma/client#FigmaCloudLimitProvider'
+                ]
+            }
         },
         custom: {
             figma: {
@@ -339,6 +348,10 @@ export async function buildFigmaConfig(config) {
             health,
             schema
         ],
+        i18n: {
+            ...config.i18n,
+            translations: deepMergeSimple(figmaTranslations, config.i18n?.translations ?? {})
+        },
         // Gate /api/payload-jobs/run and /api/payload-jobs/handle-schedules. Honor the
         // sites-worker trust marker so Figma infra job runs never break, defer to the
         // tenant's jobs.access.run if they set one, otherwise fall back to Payload's
@@ -403,16 +416,32 @@ export async function buildFigmaConfig(config) {
     };
     // Inject figma fields into users collection
     const collections = configWithFigmaDefaults.collections?.map((col)=>{
+        const withSlugTracker = {
+            ...col,
+            admin: {
+                ...col.admin,
+                components: {
+                    ...col.admin?.components,
+                    edit: {
+                        ...col.admin?.components?.edit,
+                        beforeDocumentControls: [
+                            '@payloadcms/figma/client#FigmaCloudLimitSlugTracker',
+                            ...col.admin?.components?.edit?.beforeDocumentControls ?? []
+                        ]
+                    }
+                }
+            }
+        };
         if (col.slug === 'users') {
             return {
-                ...col,
+                ...withSlugTracker,
                 fields: [
                     ...col.fields || [],
                     ...figmaUserFields
                 ]
             };
         }
-        return col;
+        return withSlugTracker;
     });
     if (collections) {
         configWithFigmaDefaults.collections = collections;

package/dist/plugin/cloud-limits/CloudLimitModal/index.d.ts

@@ -0,0 +1,9 @@
+import './index.scss';
+type Props = {
+    adminRoute: string;
+    collectionLabel?: string;
+    collectionSlug?: string;
+    onRetry: () => void;
+};
+export declare function FigmaCloudLimitDocumentCountModal({ adminRoute, collectionLabel, collectionSlug, onRetry, }: Props): import("react").JSX.Element;
+export {};

package/dist/plugin/cloud-limits/CloudLimitModal/index.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogBody, DialogCancel, DialogFooter, DialogHeader, DialogModal, useModal, useTranslation } from '@payloadcms/ui';
+import { useRouter } from 'next/navigation.js';
+import { useCallback } from 'react';
+import { ExternalLinkIcon } from '../icons/ExternalLinkIcon.js';
+import { cloudLimitDocumentCountModalSlug } from '../shared.js';
+import './index.scss';
+const baseClass = 'figma-cloud-limit-modal';
+export function FigmaCloudLimitDocumentCountModal({ adminRoute, collectionLabel, collectionSlug, onRetry }) {
+    const { t } = useTranslation();
+    const { closeModal } = useModal();
+    const router = useRouter();
+    const handleReviewClick = useCallback(()=>{
+        closeModal(cloudLimitDocumentCountModalSlug);
+        router.push(`${adminRoute}/collections/${collectionSlug}`);
+    }, [
+        adminRoute,
+        closeModal,
+        collectionSlug,
+        router
+    ]);
+    return /*#__PURE__*/ _jsxs(DialogModal, {
+        size: "small",
+        slug: cloudLimitDocumentCountModalSlug,
+        children: [
+            /*#__PURE__*/ _jsx(DialogHeader, {
+                showClose: true,
+                title: t('figma:cloudLimitModalHeading')
+            }),
+            /*#__PURE__*/ _jsx(DialogBody, {
+                children: /*#__PURE__*/ _jsx("p", {
+                    className: `${baseClass}__body`,
+                    children: t('figma:cloudLimitModalBody')
+                })
+            }),
+            /*#__PURE__*/ _jsx(DialogFooter, {
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__footer`,
+                    children: [
+                        collectionLabel && collectionSlug ? /*#__PURE__*/ _jsxs("button", {
+                            className: `${baseClass}__review-btn`,
+                            onClick: handleReviewClick,
+                            type: "button",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: `${baseClass}__review-btn-label`,
+                                    children: t('figma:cloudLimitModalReviewCollection', {
+                                        collection: collectionLabel
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
+                            ]
+                        }) : null,
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__actions`,
+                            children: [
+                                /*#__PURE__*/ _jsx(DialogCancel, {
+                                    label: t('figma:cloudLimitModalConfirm')
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    buttonStyle: "primary",
+                                    margin: false,
+                                    onClick: ()=>{
+                                        closeModal(cloudLimitDocumentCountModalSlug);
+                                        onRetry();
+                                    },
+                                    size: "medium",
+                                    children: t('figma:cloudLimitModalRetry')
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/plugin/cloud-limits/CloudLimitModal/index.scss

@@ -0,0 +1,51 @@
+.figma-cloud-limit-modal {
+  &__body {
+    margin: 0;
+  }
+
+  &__footer {
+    align-items: center;
+    display: flex;
+    gap: var(--spacer-4);
+    width: 100%;
+  }
+
+  &__review-btn {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--color-text-brand);
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 1;
+    font-size: var(--text-body-medium-font-size);
+    gap: var(--spacer-1);
+    min-width: 0;
+    padding: 0;
+
+    &:hover {
+      color: var(--ramp-blue-700);
+    }
+
+    &:active {
+      color: var(--ramp-blue-800);
+    }
+  }
+
+  &__review-btn-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Prevents the icon from shrinking when the label ellipses.
+  &__review-btn svg {
+    flex-shrink: 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--spacer-2);
+    margin-inline-start: auto;
+  }
+}

package/dist/plugin/cloud-limits/CloudLimitProvider/index.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+/**
+ * Surfaces Content API cloud-limit errors in the admin UI.
+ */
+export declare function FigmaCloudLimitProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/plugin/cloud-limits/CloudLimitProvider/index.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { FormErrorHandlerContext, toast, useConfig, useFormErrorHandler, useModal, useTranslation } from '@payloadcms/ui';
+import { hasAutosaveEnabled } from 'payload/shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { FigmaCloudLimitDocumentCountModal } from '../CloudLimitModal/index.js';
+import { cloudLimitDocumentCountModalSlug, cloudLimitErrorCodes, cloudLimitToastKeyByCode, getCloudLimitErrorCode } from '../shared.js';
+import { FigmaCloudLimitSlugRegistryContext } from '../SlugRegistryContext/index.js';
+const AUTOSAVE_TOAST_ID = 'figma-cloud-limit-doc-count';
+let isUploadFetchPatched = false;
+function slugFromPathSuffix(suffix) {
+    return /^\/collections\/([^/?#]+)/.exec(suffix)?.[1];
+}
+/**
+ * Surfaces Content API cloud-limit errors in the admin UI.
+ */ export function FigmaCloudLimitProvider({ children }) {
+    const { openModal } = useModal();
+    const { i18n, t } = useTranslation();
+    const { config, getEntityConfig } = useConfig();
+    const parentErrorHandler = useFormErrorHandler();
+    const adminRouteRef = useRef(config.routes?.admin ?? '/admin');
+    const apiRouteRef = useRef(config.routes?.api ?? '/api');
+    const [collectionSlug, setCollectionSlug] = useState();
+    const [collectionLabel, setCollectionLabel] = useState();
+    const retryRef = useRef(undefined);
+    // Ref so the handler always calls the latest getEntityConfig without being recreated.
+    const getEntityConfigRef = useRef(getEntityConfig);
+    getEntityConfigRef.current = getEntityConfig;
+    const tRef = useRef(t);
+    tRef.current = t;
+    // Stack of active collection slugs. FigmaCloudLimitSlugTracker components push/pop as
+    // documents mount/unmount (including drawers). The last entry is the active form's collection.
+    const slugStackRef = useRef([]);
+    const registerCollectionSlug = useCallback((slug)=>{
+        const id = Symbol();
+        slugStackRef.current = [
+            ...slugStackRef.current,
+            {
+                id,
+                slug
+            }
+        ];
+        return ()=>{
+            slugStackRef.current = slugStackRef.current.filter((e)=>e.id !== id);
+        };
+    }, []);
+    // Detect upload related cloud-limit that bypass form state
+    useEffect(()=>{
+        if (isUploadFetchPatched) {
+            return;
+        }
+        isUploadFetchPatched = true;
+        const originalFetch = window.fetch.bind(window);
+        const originalToastError = toast.error;
+        const toastObj = toast;
+        const pendingSuppressions = [];
+        const removeSuppression = (suppression)=>{
+            window.clearTimeout(suppression.timeout);
+            const index = pendingSuppressions.indexOf(suppression);
+            if (index !== -1) {
+                pendingSuppressions.splice(index, 1);
+            }
+        };
+        toastObj.error = (...args)=>{
+            // prevent the thrown error from sending a duplicate toast
+            const msg = typeof args[0] === 'string' ? args[0] : args[0]?.props?.errorMessage ?? '';
+            const suppression = pendingSuppressions.find(({ message })=>msg.includes(message));
+            if (suppression) {
+                removeSuppression(suppression);
+                return '';
+            }
+            return originalToastError(...args);
+        };
+        window.fetch = async function(...args) {
+            const response = await originalFetch(...args);
+            if (response.status === 409) {
+                const url = args[0] instanceof Request ? args[0].url : String(args[0]);
+                const uploadInstructionsPath = `${apiRouteRef.current.replace(/\/$/, '')}/upload-instructions`;
+                if (new URL(url, window.location.origin).pathname === uploadInstructionsPath) {
+                    try {
+                        const json = await response.clone().json();
+                        const code = getCloudLimitErrorCode(json);
+                        const messageKey = code !== undefined ? cloudLimitToastKeyByCode[code] : undefined;
+                        if (messageKey) {
+                            toast.info(tRef.current(messageKey));
+                            const rawMessage = json?.errors?.[0]?.message;
+                            if (rawMessage) {
+                                const suppression = {
+                                    message: rawMessage,
+                                    timeout: 0
+                                };
+                                suppression.timeout = window.setTimeout(()=>removeSuppression(suppression), 0);
+                                pendingSuppressions.push(suppression);
+                            }
+                        }
+                    } catch  {
+                    // ignore JSON parse failures
+                    }
+                }
+            }
+            return response;
+        };
+        return ()=>{
+            pendingSuppressions.forEach(({ timeout })=>window.clearTimeout(timeout));
+            window.fetch = originalFetch;
+            toastObj.error = originalToastError;
+            isUploadFetchPatched = false;
+        };
+    }, []);
+    const handleNonFieldError = useCallback((err, retry)=>{
+        const code = getCloudLimitErrorCode({
+            errors: [
+                err
+            ]
+        });
+        if (!code) {
+            return parentErrorHandler?.(err, retry) ?? false;
+        }
+        if (code === cloudLimitErrorCodes.documentCount) {
+            // Prefer the tracker-provided slug (correct even in drawers) over URL parsing.
+            const stack = slugStackRef.current;
+            const slug = stack.length > 0 ? stack[stack.length - 1]?.slug : slugFromPathSuffix(window.location.pathname.slice(adminRouteRef.current.length));
+            const collectionConfig = slug ? getEntityConfigRef.current({
+                collectionSlug: slug
+            }) : undefined;
+            const isAutosave = collectionConfig ? hasAutosaveEnabled(collectionConfig) : false;
+            if (isAutosave) {
+                // Stable ID prevents a new toast stacking on every autosave attempt.
+                toast.info(t('figma:cloudLimitDocumentCountError'), {
+                    id: AUTOSAVE_TOAST_ID
+                });
+                return true;
+            }
+            const label = collectionConfig?.labels?.plural != null ? getTranslation(collectionConfig.labels.plural, i18n) : slug;
+            setCollectionSlug(slug);
+            setCollectionLabel(label);
+            retryRef.current = retry;
+            openModal(cloudLimitDocumentCountModalSlug);
+            return true;
+        }
+        const messageKey = cloudLimitToastKeyByCode[code];
+        if (messageKey) {
+            toast.info(t(messageKey));
+            return true;
+        }
+        return false;
+    }, [
+        i18n,
+        openModal,
+        parentErrorHandler,
+        t
+    ]);
+    return /*#__PURE__*/ _jsx(FigmaCloudLimitSlugRegistryContext, {
+        value: registerCollectionSlug,
+        children: /*#__PURE__*/ _jsxs(FormErrorHandlerContext, {
+            value: handleNonFieldError,
+            children: [
+                children,
+                /*#__PURE__*/ _jsx(FigmaCloudLimitDocumentCountModal, {
+                    adminRoute: adminRouteRef.current,
+                    collectionLabel: collectionLabel,
+                    collectionSlug: collectionSlug,
+                    onRetry: ()=>retryRef.current?.()
+                })
+            ]
+        })
+    });
+}

package/dist/plugin/cloud-limits/SlugRegistryContext/index.d.ts

@@ -0,0 +1,2 @@
+export type RegisterCollectionSlug = (slug: string | undefined) => () => void;
+export declare const FigmaCloudLimitSlugRegistryContext: import("react").Context<RegisterCollectionSlug>;

package/dist/plugin/cloud-limits/SlugRegistryContext/index.js

@@ -0,0 +1,3 @@
+'use client';
+import { createContext } from 'react';
+export const FigmaCloudLimitSlugRegistryContext = /*#__PURE__*/ createContext(()=>()=>{});

package/dist/plugin/cloud-limits/SlugTracker/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Invisible component injected into every collection's
+ * `admin.components.edit.beforeDocumentControls`. Renders inside
+ * DocumentInfoProvider so it can read the correct collectionSlug even inside
+ * relationship drawers. Pushes to / pops from the slug stack owned by
+ * FigmaCloudLimitProvider so the error handler always knows which collection
+ * the active form belongs to.
+ */
+export declare function FigmaCloudLimitSlugTracker(): null;

package/dist/plugin/cloud-limits/SlugTracker/index.js

@@ -0,0 +1,23 @@
+'use client';
+import { useDocumentInfo } from '@payloadcms/ui';
+import { use, useEffect } from 'react';
+import { FigmaCloudLimitSlugRegistryContext } from '../SlugRegistryContext/index.js';
+/**
+ * Invisible component injected into every collection's
+ * `admin.components.edit.beforeDocumentControls`. Renders inside
+ * DocumentInfoProvider so it can read the correct collectionSlug even inside
+ * relationship drawers. Pushes to / pops from the slug stack owned by
+ * FigmaCloudLimitProvider so the error handler always knows which collection
+ * the active form belongs to.
+ */ export function FigmaCloudLimitSlugTracker() {
+    const register = use(FigmaCloudLimitSlugRegistryContext);
+    const { collectionSlug } = useDocumentInfo();
+    useEffect(()=>{
+        const unregister = register(collectionSlug);
+        return unregister;
+    }, [
+        collectionSlug,
+        register
+    ]);
+    return null;
+}

package/dist/plugin/cloud-limits/icons/ExternalLinkIcon.d.ts

@@ -0,0 +1,2 @@
+/** External link icon (box with arrow pointing out). Used in cloud-limit UI. */
+export declare function ExternalLinkIcon(): import("react").JSX.Element;

package/dist/plugin/cloud-limits/icons/ExternalLinkIcon.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** External link icon (box with arrow pointing out). Used in cloud-limit UI. */ export function ExternalLinkIcon() {
+    return /*#__PURE__*/ _jsxs("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        height: "14",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        width: "14",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+            }),
+            /*#__PURE__*/ _jsx("polyline", {
+                points: "15 3 21 3 21 9"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                x1: "10",
+                x2: "21",
+                y1: "14",
+                y2: "3"
+            })
+        ]
+    });
+}

package/dist/plugin/cloud-limits/shared.d.ts

@@ -0,0 +1,10 @@
+export declare const cloudLimitErrorCodes: {
+    readonly assetStorage: "cloud_limit.cms_assets_bytes_exceeded";
+    readonly documentCount: "cloud_limit.document_count_exceeded";
+    readonly documentDataSize: "cloud_limit.per_document_data_bytes_exceeded";
+};
+export type CloudLimitErrorCode = (typeof cloudLimitErrorCodes)[keyof typeof cloudLimitErrorCodes];
+export declare function isCloudLimitErrorCode(code: unknown): code is CloudLimitErrorCode;
+export declare function getCloudLimitErrorCode(json: unknown): CloudLimitErrorCode | undefined;
+export declare const cloudLimitDocumentCountModalSlug = "figma-cloud-limit-document-count";
+export declare const cloudLimitToastKeyByCode: Partial<Record<CloudLimitErrorCode, string>>;

package/dist/plugin/cloud-limits/shared.js

@@ -0,0 +1,27 @@
+export const cloudLimitErrorCodes = {
+    assetStorage: 'cloud_limit.cms_assets_bytes_exceeded',
+    documentCount: 'cloud_limit.document_count_exceeded',
+    documentDataSize: 'cloud_limit.per_document_data_bytes_exceeded'
+};
+const knownCloudLimitCodes = Object.values(cloudLimitErrorCodes);
+export function isCloudLimitErrorCode(code) {
+    return typeof code === 'string' && knownCloudLimitCodes.includes(code);
+}
+export function getCloudLimitErrorCode(json) {
+    const errors = json?.errors;
+    if (!Array.isArray(errors)) {
+        return undefined;
+    }
+    for (const err of errors){
+        const code = err?.data?.code;
+        if (isCloudLimitErrorCode(code)) {
+            return code;
+        }
+    }
+    return undefined;
+}
+export const cloudLimitDocumentCountModalSlug = 'figma-cloud-limit-document-count';
+export const cloudLimitToastKeyByCode = {
+    [cloudLimitErrorCodes.assetStorage]: 'figma:cloudLimitAssetStorageError',
+    [cloudLimitErrorCodes.documentDataSize]: 'figma:cloudLimitDocumentDataSizeError'
+};