@payloadcms/figma 0.0.1-alpha.5 → 0.0.1-alpha.51

package/dist/endpoints/health.js

@@ -0,0 +1,11 @@
+export const health = {
+    handler: ()=>{
+        return Response.json({
+            status: 200
+        });
+    },
+    method: 'get',
+    path: '/health'
+};
+
+//# sourceMappingURL=health.js.map

package/dist/endpoints/schema.d.ts

@@ -0,0 +1,3 @@
+import type { Endpoint } from 'payload';
+export declare const schema: Endpoint;
+//# sourceMappingURL=schema.d.ts.map

package/dist/endpoints/schema.js

@@ -0,0 +1,29 @@
+import crypto from 'crypto';
+import { configToJSONSchema } from 'payload';
+export const schema = {
+    handler: (req)=>{
+        if (!req.user) {
+            return Response.json({
+                error: 'Unauthorized'
+            }, {
+                status: 401
+            });
+        }
+        const format = req.query?.format;
+        const jsonSchema = configToJSONSchema(req.payload.config);
+        const hash = crypto.createHash('sha256').update(JSON.stringify(jsonSchema)).digest('hex');
+        if (format === 'hash') {
+            return Response.json({
+                hash
+            });
+        }
+        return Response.json({
+            hash,
+            schema: jsonSchema
+        });
+    },
+    method: 'get',
+    path: '/figma/schema'
+};
+
+//# sourceMappingURL=schema.js.map

package/dist/exports/client.d.ts

@@ -1,3 +1,6 @@
+export { FigmaAvatar } from '../oauth/components/FigmaAvatar/index.js';
+export { FigmaAvatarCell } from '../oauth/components/FigmaAvatarCell/index.js';
 export { DefaultLoginButton } from '../oauth/components/LoginButton/index.js';
 export { LogoutButton } from '../oauth/components/LogoutButton/index.js';
+export { ContentApiClientUploadHandler } from '../storage-content-api/client-uploads/ClientUploadHandler.js';
 //# sourceMappingURL=client.d.ts.map

package/dist/exports/client.js

@@ -1,4 +1,7 @@
+export { FigmaAvatar } from '../oauth/components/FigmaAvatar/index.js';
+export { FigmaAvatarCell } from '../oauth/components/FigmaAvatarCell/index.js';
 export { DefaultLoginButton } from '../oauth/components/LoginButton/index.js';
 export { LogoutButton } from '../oauth/components/LogoutButton/index.js';
+export { ContentApiClientUploadHandler } from '../storage-content-api/client-uploads/ClientUploadHandler.js';
 
 //# sourceMappingURL=client.js.map

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+export { contentAPIAdapter } from './db-content-api/index.js';
 export { figmaContentSystem } from './plugin/adapter.js';
 export type { FigmaContentSystemOptions } from './plugin/adapter.js';
-export { buildConfig } from './plugin/build-config.js';
+export { buildFigmaConfig } from './plugin/build-config.js';
 export type { FigmaConfig } from './plugin/build-config.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,6 +1,8 @@
+// Export contentAPIAdapter for testing use cases
+export { contentAPIAdapter } from './db-content-api/index.js';
 // Export database adapter for advanced use cases
 export { figmaContentSystem } from './plugin/adapter.js';
 // Export buildConfig wrapper and its config type
-export { buildConfig } from './plugin/build-config.js';
+export { buildFigmaConfig } from './plugin/build-config.js';
 
 //# sourceMappingURL=index.js.map

package/dist/oauth/components/FigmaAvatar/index.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import './index.scss';
+export declare const FigmaAvatar: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/oauth/components/FigmaAvatar/index.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from '@payloadcms/ui';
+import { useState } from 'react';
+import { FigmaAvatarPlaceholder, isValidImageUrl } from '../FigmaAvatarPlaceholder/index.js';
+import './index.scss';
+const baseClass = 'figma-avatar';
+export const FigmaAvatar = ()=>{
+    const { user } = useAuth();
+    const [hasError, setHasError] = useState(false);
+    const figmaImageUrl = user?.figmaImageUrl;
+    if (!figmaImageUrl || hasError || !isValidImageUrl(figmaImageUrl)) {
+        return /*#__PURE__*/ _jsx(FigmaAvatarPlaceholder, {
+            size: 25
+        });
+    }
+    return /*#__PURE__*/ _jsx("img", {
+        alt: "Profile",
+        className: `${baseClass}__image`,
+        height: 25,
+        onError: ()=>setHasError(true),
+        src: figmaImageUrl,
+        width: 25
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/oauth/components/FigmaAvatar/index.scss

@@ -0,0 +1,12 @@
+@layer payload-default {
+  .figma-avatar {
+    &__image {
+      border-radius: 50%;
+      border: 1px solid var(--theme-elevation-200);
+
+      &:hover {
+        border-color: var(--theme-elevation-600);
+      }
+    }
+  }
+}

package/dist/oauth/components/FigmaAvatarCell/index.d.ts

@@ -0,0 +1,5 @@
+import type { DefaultCellComponentProps } from 'payload';
+import type React from 'react';
+import './index.scss';
+export declare const FigmaAvatarCell: React.FC<DefaultCellComponentProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/oauth/components/FigmaAvatarCell/index.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FigmaAvatarPlaceholder, isValidImageUrl } from '../FigmaAvatarPlaceholder/index.js';
+import './index.scss';
+const baseClass = 'figma-avatar-cell';
+export const FigmaAvatarCell = ({ cellData })=>{
+    const [hasError, setHasError] = useState(false);
+    const figmaImageUrl = cellData;
+    if (!figmaImageUrl || hasError || !isValidImageUrl(figmaImageUrl)) {
+        return /*#__PURE__*/ _jsx(FigmaAvatarPlaceholder, {
+            size: 20
+        });
+    }
+    return /*#__PURE__*/ _jsx("img", {
+        alt: "Avatar",
+        className: `${baseClass}__image`,
+        height: 20,
+        onError: ()=>setHasError(true),
+        src: figmaImageUrl,
+        width: 20
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/oauth/components/FigmaAvatarCell/index.scss

@@ -0,0 +1,5 @@
+.figma-avatar-cell {
+  &__image {
+    border-radius: 50%;
+  }
+}

package/dist/oauth/components/FigmaAvatarPlaceholder/index.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import './index.scss';
+type FigmaAvatarPlaceholderProps = {
+    size?: number;
+};
+export declare const FigmaAvatarPlaceholder: React.FC<FigmaAvatarPlaceholderProps>;
+export declare function isValidImageUrl(url: string): boolean;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/oauth/components/FigmaAvatarPlaceholder/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+const baseClass = 'figma-avatar-placeholder';
+export const FigmaAvatarPlaceholder = ({ size = 25 })=>/*#__PURE__*/ _jsxs("svg", {
+        className: baseClass,
+        height: size,
+        viewBox: "0 0 25 25",
+        width: size,
+        children: [
+            /*#__PURE__*/ _jsx("circle", {
+                className: `${baseClass}__bg`,
+                cx: "12.5",
+                cy: "12.5",
+                r: "11.5"
+            }),
+            /*#__PURE__*/ _jsx("circle", {
+                className: `${baseClass}__head`,
+                cx: "12.5",
+                cy: "10",
+                r: "4"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: `${baseClass}__body`,
+                d: "M12.5 15c-4 0-7 2-7 4.5v1h14v-1c0-2.5-3-4.5-7-4.5z"
+            })
+        ]
+    });
+export function isValidImageUrl(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === 'https:' || parsed.protocol === 'http:';
+    } catch  {
+        return false;
+    }
+}
+
+//# sourceMappingURL=index.js.map

package/dist/oauth/components/FigmaAvatarPlaceholder/index.scss

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .figma-avatar-placeholder {
+    &__bg {
+      fill: var(--theme-elevation-50);
+      stroke: var(--theme-elevation-200);
+      stroke-width: 1px;
+    }
+
+    &__head,
+    &__body {
+      fill: var(--theme-elevation-200);
+    }
+
+    &:hover {
+      .figma-avatar-placeholder {
+        &__bg {
+          fill: var(--theme-elevation-200);
+          stroke: var(--theme-elevation-600);
+        }
+
+        &__head,
+        &__body {
+          fill: var(--theme-elevation-600);
+        }
+      }
+    }
+  }
+}

package/dist/oauth/components/LoginButton/index.js

@@ -1,10 +1,49 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, useConfig } from '@payloadcms/ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig } from '@payloadcms/ui';
 import { useSearchParams } from 'next/navigation.js';
 import React, { useEffect, useState } from 'react';
 import './index.scss';
 const baseClass = 'oauth-login';
+// Figma logo SVG colored version
+// const FigmaIcon: React.FC = () => (
+//   <svg fill="none" height="27" viewBox="0 0 400 600" width="18">
+//     <path
+//       d="M0 500C0 444.772 44.772 400 100 400H200V500C200 555.228 155.228 600 100 600C44.772 600 0 555.228 0 500Z"
+//       fill="#24CB71"
+//     />
+//     <path
+//       d="M200 0V200H300C355.228 200 400 155.228 400 100C400 44.772 355.228 0 300 0H200Z"
+//       fill="#FF7237"
+//     />
+//     <path
+//       d="M299.167 400C354.395 400 399.167 355.228 399.167 300C399.167 244.772 354.395 200 299.167 200C243.939 200 199.167 244.772 199.167 300C199.167 355.228 243.939 400 299.167 400Z"
+//       fill="#00B6FF"
+//     />
+//     <path
+//       d="M0 100C0 155.228 44.772 200 100 200H200V0H100C44.772 0 0 44.772 0 100Z"
+//       fill="#FF3737"
+//     />
+//     <path
+//       d="M0 300C0 355.228 44.772 400 100 400H200V200H100C44.772 200 0 244.772 0 300Z"
+//       fill="#874FFF"
+//     />
+//   </svg>
+// )
+// Figma logo SVG monochrome version
+const FigmaIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        fill: "none",
+        height: "20px",
+        viewBox: "0 0 15 15",
+        width: "20px",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ _jsx("path", {
+            clipRule: "evenodd",
+            d: "M7.00005 2.04999H5.52505C4.71043 2.04999 4.05005 2.71037 4.05005 3.52499C4.05005 4.33961 4.71043 4.99999 5.52505 4.99999H7.00005V2.04999ZM7.00005 1.04999H8.00005H9.47505C10.842 1.04999 11.95 2.15808 11.95 3.52499C11.95 4.33163 11.5642 5.04815 10.9669 5.49999C11.5642 5.95184 11.95 6.66836 11.95 7.475C11.95 8.8419 10.842 9.95 9.47505 9.95C8.92236 9.95 8.41198 9.76884 8.00005 9.46266V9.95L8.00005 11.425C8.00005 12.7919 6.89195 13.9 5.52505 13.9C4.15814 13.9 3.05005 12.7919 3.05005 11.425C3.05005 10.6183 3.43593 9.90184 4.03317 9.44999C3.43593 8.99814 3.05005 8.28163 3.05005 7.475C3.05005 6.66836 3.43594 5.95184 4.03319 5.5C3.43594 5.04815 3.05005 4.33163 3.05005 3.52499C3.05005 2.15808 4.15814 1.04999 5.52505 1.04999H7.00005ZM8.00005 2.04999V4.99999H9.47505C10.2897 4.99999 10.95 4.33961 10.95 3.52499C10.95 2.71037 10.2897 2.04999 9.47505 2.04999H8.00005ZM5.52505 8.94998H7.00005L7.00005 7.4788L7.00005 7.475L7.00005 7.4712V6H5.52505C4.71043 6 4.05005 6.66038 4.05005 7.475C4.05005 8.28767 4.70727 8.94684 5.5192 8.94999L5.52505 8.94998ZM4.05005 11.425C4.05005 10.6123 4.70727 9.95315 5.5192 9.94999L5.52505 9.95H7.00005L7.00005 11.425C7.00005 12.2396 6.33967 12.9 5.52505 12.9C4.71043 12.9 4.05005 12.2396 4.05005 11.425ZM8.00005 7.47206C8.00164 6.65879 8.66141 6 9.47505 6C10.2897 6 10.95 6.66038 10.95 7.475C10.95 8.28962 10.2897 8.95 9.47505 8.95C8.66141 8.95 8.00164 8.29121 8.00005 7.47794V7.47206Z",
+            fill: "#FFFFFF",
+            fillRule: "evenodd"
+        })
+    });
 export const DefaultLoginButton = ({ disabled, endpointSlug })=>{
     const { config: { admin: { user: userSlug }, routes: { api }, serverURL } } = useConfig();
     const [authorizeURL, setAuthorizeURL] = useState('');
@@ -40,11 +79,16 @@ export const DefaultLoginButton = ({ disabled, endpointSlug })=>{
     }
     return /*#__PURE__*/ _jsx("div", {
         className: baseClass,
-        children: /*#__PURE__*/ _jsx(Button, {
+        children: /*#__PURE__*/ _jsxs("a", {
             className: `${baseClass}__btn`,
-            el: "anchor",
-            url: authorizeURL,
-            children: "Log in"
+            href: authorizeURL,
+            children: [
+                /*#__PURE__*/ _jsx(FigmaIcon, {}),
+                /*#__PURE__*/ _jsx("span", {
+                    className: `${baseClass}__text`,
+                    children: "Log in with Figma"
+                })
+            ]
         })
     });
 };

package/dist/oauth/components/LoginButton/index.scss

@@ -1,10 +1,57 @@
 .oauth-login {
   display: flex;
   justify-content: center;
+  padding: 1rem 0;
 
-  &__btn:focus {
-    .btn__icon {
-      background: none;
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    min-height: 3rem;
+    background-color: #4d49fc;
+    color: #ffffff;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    font-weight: 450;
+    letter-spacing: 0.05px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+    box-shadow: none;
+
+    &:hover {
+      background-color: #4440e8;
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      background-color: #3c38d4;
+      transform: translateY(0);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(77, 73, 252, 0.4);
     }
   }
+
+  &__icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+  }
+
+  &__text {
+    white-space: nowrap;
+    line-height: 1rem;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen, Ubuntu, Cantarell, sans-serif;
+  }
 }

package/dist/oauth/components/LogoutButton/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Logout, useConfig } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import { getAdminPath } from '../../utilities/getAdminPath.js';
 import './index.scss';
 const baseClass = 'oauth-logout';
 export const LogoutButton = ({ disabled, endpointSlug })=>{
@@ -16,9 +16,10 @@ export const LogoutButton = ({ disabled, endpointSlug })=>{
         if (port) {
             redirectToSet += `:${port}`;
         }
-        redirectToSet += getAdminPath(config);
-        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-        setRedirect(redirectToSet);
+        setRedirect(formatAdminURL({
+            adminRoute: config.routes.admin,
+            serverURL: redirectToSet
+        }));
     }, [
         config
     ]);

package/dist/oauth/defaults.js

@@ -1,5 +1,19 @@
+import { parseCookies } from 'payload';
 import { v4 as uuid } from 'uuid';
 import { hasUserTokenPropsChanged } from './utilities/hasUserTokenPropsChanged.js';
+import { isDuplicateKeyError } from './utilities/isDuplicateKeyError.js';
+function getFigmaUserInfo(headers) {
+    try {
+        const cookies = parseCookies(headers);
+        const encoded = cookies.get('figma-user-info');
+        if (!encoded) {
+            return null;
+        }
+        return JSON.parse(Buffer.from(encoded, 'base64').toString('utf-8'));
+    } catch  {
+        return null;
+    }
+}
 export const defaultScope = [
     'openid',
     'profile',
@@ -14,7 +28,7 @@ export const defaultUsernameField = {
     },
     unique: true
 };
-export const defaultVerify = ({ collection, strategyName, usernameField })=>async ({ payload, token })=>{
+export const defaultVerify = ({ collection, strategyName, usernameField })=>async ({ headers, payload, token })=>{
         let tokenUsername = 'preferred_username';
         if (usernameField.name !== 'preferredUsername') {
             tokenUsername = usernameField.name;
@@ -24,6 +38,13 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 user: null
             };
         }
+        const figmaUserInfo = getFigmaUserInfo(headers);
+        let responseHeaders;
+        // Clear the cookie after reading
+        if (figmaUserInfo) {
+            responseHeaders = new Headers();
+            responseHeaders.append('Set-Cookie', 'figma-user-info=; Max-Age=0; Path=/;');
+        }
         let user = null;
         const depth = typeof collection.auth === 'object' ? collection.auth.depth : undefined;
         try {
@@ -40,13 +61,19 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
             });
             if (results.docs.length > 0) {
                 user = results.docs[0];
-                // Update user with new token data
-                if (hasUserTokenPropsChanged(user, token)) {
+                // Check if update needed (token changed OR figma info missing/changed)
+                const userWithFigma = user;
+                const needsFigmaUpdate = figmaUserInfo && (userWithFigma.figmaHandle !== figmaUserInfo.handle || userWithFigma.figmaImageUrl !== figmaUserInfo.img_url);
+                if (hasUserTokenPropsChanged(user, token) || needsFigmaUpdate) {
                     user = await payload.update({
                         id: user.id,
                         collection: collection.slug,
                         data: {
-                            ...token
+                            ...token,
+                            ...figmaUserInfo && {
+                                figmaHandle: figmaUserInfo.handle,
+                                figmaImageUrl: figmaUserInfo.img_url
+                            }
                         },
                         depth
                     });
@@ -55,16 +82,43 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 const newUser = {
                     email: token.preferredUsername || token.email,
                     [usernameField.name]: token[tokenUsername],
-                    ...token
+                    ...token,
+                    ...figmaUserInfo && {
+                        figmaHandle: figmaUserInfo.handle,
+                        figmaImageUrl: figmaUserInfo.img_url
+                    }
                 };
                 if (typeof collection.auth === 'object' && !collection.auth.disableLocalStrategy) {
                     newUser.password = uuid();
                 }
-                user = await payload.create({
-                    collection: collection.slug,
-                    data: newUser,
-                    depth
-                });
+                try {
+                    user = await payload.create({
+                        collection: collection.slug,
+                        data: newUser,
+                        depth,
+                        overrideAccess: true
+                    });
+                } catch (createErr) {
+                    // Race condition: if unique constraint violation, user was created by concurrent request
+                    if (isDuplicateKeyError(createErr)) {
+                        const retryResults = await payload.find({
+                            collection: collection.slug,
+                            depth,
+                            limit: 1,
+                            pagination: false,
+                            where: {
+                                [usernameField.name]: {
+                                    equals: token[tokenUsername]
+                                }
+                            }
+                        });
+                        if (retryResults.docs.length > 0) {
+                            user = retryResults.docs[0];
+                        }
+                    } else {
+                        throw createErr;
+                    }
+                }
             }
         } catch (err) {
             payload.logger.error({
@@ -72,6 +126,7 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
                 msg: 'Error verifying user from defaultVerify.'
             });
             return {
+                responseHeaders,
                 user: null
             };
         }
@@ -80,10 +135,12 @@ export const defaultVerify = ({ collection, strategyName, usernameField })=>asyn
             user._strategy = strategyName;
             user.exp = token.exp;
             return {
+                responseHeaders,
                 user
             };
         }
         return {
+            responseHeaders,
             user: null
         };
     };