payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/utilities/OperationProvider/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const OperationContext: import("react").Context<any>;
+export declare type Operation = 'create' | 'update';
+export declare const useOperation: () => Operation | undefined;

package/dist/admin/components/utilities/OperationProvider/index.js

@@ -0,0 +1,3 @@
+import { useContext, createContext } from 'react';
+export const OperationContext = createContext(undefined);
+export const useOperation = () => useContext(OperationContext);

package/dist/admin/components/utilities/Portal/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const Portal: ({ children }: {
+    children: React.ReactNode;
+}) => React.ReactPortal;
+export default Portal;

package/dist/admin/components/utilities/Portal/index.js

@@ -0,0 +1,3 @@
+import ReactDOM from 'react-dom';
+const Portal = ({ children }) => ReactDOM.createPortal(children, document.getElementById('portal'));
+export default Portal;

package/dist/admin/components/utilities/Preferences/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type PreferencesContext = {
+    getPreference: <T>(key: string) => T | Promise<T>;
+    setPreference: <T>(key: string, value: T) => void;
+};
+export declare const PreferencesProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const usePreferences: () => PreferencesContext;
+export {};

package/dist/admin/components/utilities/Preferences/index.js

@@ -0,0 +1,50 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import { useConfig } from '../Config';
+import { useAuth } from '../Auth';
+import { requests } from '../../../api';
+const Context = createContext({});
+const requestOptions = (value) => ({
+    body: JSON.stringify({ value }),
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+export const PreferencesProvider = ({ children }) => {
+    const contextRef = useRef({});
+    const preferencesRef = useRef({});
+    const config = useConfig();
+    const { user } = useAuth();
+    const { serverURL, routes: { api } } = config;
+    useEffect(() => {
+        if (!user) {
+            // clear preferences between users
+            preferencesRef.current = {};
+        }
+    }, [user]);
+    const getPreference = useCallback(async (key) => {
+        if (typeof preferencesRef.current[key] !== 'undefined')
+            return preferencesRef.current[key];
+        const promise = new Promise((resolve) => {
+            (async () => {
+                const request = await requests.get(`${serverURL}${api}/_preferences/${key}`);
+                let value = null;
+                if (request.status === 200) {
+                    const preference = await request.json();
+                    value = preference.value;
+                }
+                preferencesRef.current[key] = value;
+                resolve(value);
+            })();
+        });
+        preferencesRef.current[key] = promise;
+        return promise;
+    }, [api, preferencesRef, serverURL]);
+    const setPreference = useCallback(async (key, value) => {
+        preferencesRef.current[key] = value;
+        await requests.post(`${serverURL}${api}/_preferences/${key}`, requestOptions(value));
+    }, [api, serverURL]);
+    contextRef.current.getPreference = getPreference;
+    contextRef.current.setPreference = setPreference;
+    return (React.createElement(Context.Provider, { value: contextRef.current }, children));
+};
+export const usePreferences = () => useContext(Context);

package/dist/admin/components/utilities/RenderCustomComponent/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './types';
+declare const RenderCustomComponent: React.FC<Props>;
+export default RenderCustomComponent;

package/dist/admin/components/utilities/RenderCustomComponent/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+const RenderCustomComponent = (props) => {
+    const { CustomComponent, DefaultComponent, componentProps } = props;
+    if (CustomComponent) {
+        return (React.createElement(CustomComponent, { ...componentProps }));
+    }
+    return (React.createElement(DefaultComponent, { ...componentProps }));
+};
+export default RenderCustomComponent;

package/dist/admin/components/utilities/RenderCustomComponent/types.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type Props = {
+    CustomComponent: React.ComponentType;
+    DefaultComponent: React.ComponentType;
+    componentProps?: Record<string, unknown>;
+};

package/dist/admin/components/utilities/RenderCustomComponent/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/utilities/SearchParams/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import qs from 'qs';
+export declare const SearchParamsProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const useSearchParams: () => qs.ParsedQs;

package/dist/admin/components/utilities/SearchParams/index.js

@@ -0,0 +1,10 @@
+import React, { createContext, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import qs from 'qs';
+const Context = createContext({});
+export const SearchParamsProvider = ({ children }) => {
+    const location = useLocation();
+    const params = qs.parse(location.search, { ignoreQueryPrefix: true, depth: 10 });
+    return (React.createElement(Context.Provider, { value: params }, children));
+};
+export const useSearchParams = () => useContext(Context);

package/dist/admin/components/utilities/Theme/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type Theme = 'light' | 'dark';
+export declare type ThemeContext = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    autoMode: boolean;
+};
+declare const Context: React.Context<ThemeContext>;
+export declare const ThemeProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const useTheme: () => ThemeContext;
+export default Context;

package/dist/admin/components/utilities/Theme/index.js

@@ -0,0 +1,47 @@
+import React, { createContext, useCallback, useContext, useState, } from 'react';
+const initialContext = {
+    theme: 'light',
+    setTheme: () => null,
+    autoMode: true,
+};
+const Context = createContext(initialContext);
+const localStorageKey = 'payload-theme';
+const getTheme = () => {
+    let theme;
+    const themeFromStorage = window.localStorage.getItem(localStorageKey);
+    if (themeFromStorage === 'light' || themeFromStorage === 'dark') {
+        theme = themeFromStorage;
+    }
+    else {
+        theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+    return theme;
+};
+export const ThemeProvider = ({ children }) => {
+    const [theme, setThemeState] = useState(getTheme);
+    const [autoMode, setAutoMode] = useState(() => {
+        const themeFromStorage = window.localStorage.getItem(localStorageKey);
+        return !themeFromStorage;
+    });
+    const setTheme = useCallback((themeToSet) => {
+        if (themeToSet === 'light' || themeToSet === 'dark') {
+            setThemeState(themeToSet);
+            setAutoMode(false);
+            window.localStorage.setItem(localStorageKey, themeToSet);
+            document.documentElement.setAttribute('data-theme', themeToSet);
+        }
+        else if (themeToSet === 'auto') {
+            const existingThemeFromStorage = window.localStorage.getItem(localStorageKey);
+            if (existingThemeFromStorage)
+                window.localStorage.removeItem(localStorageKey);
+            const themeFromOS = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', themeFromOS);
+            setAutoMode(true);
+            setThemeState(themeFromOS);
+        }
+    }, []);
+    return (React.createElement(Context.Provider, { value: { theme, setTheme, autoMode } }, children));
+};
+export const useTheme = () => useContext(Context);
+export default Context;

package/dist/admin/components/views/Account/Default.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const DefaultAccount: React.FC<Props>;
+export default DefaultAccount;

package/dist/admin/components/views/Account/Default.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import format from 'date-fns/format';
+import { useConfig } from '../../utilities/Config';
+import Eyebrow from '../../elements/Eyebrow';
+import Form from '../../forms/Form';
+import PreviewButton from '../../elements/PreviewButton';
+import FormSubmit from '../../forms/Submit';
+import RenderFields from '../../forms/RenderFields';
+import CopyToClipboard from '../../elements/CopyToClipboard';
+import fieldTypes from '../../forms/field-types';
+import RenderTitle from '../../elements/RenderTitle';
+import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
+import Meta from '../../utilities/Meta';
+import Auth from '../collections/Edit/Auth';
+import Loading from '../../elements/Loading';
+import { OperationContext } from '../../utilities/OperationProvider';
+import { ToggleTheme } from './ToggleTheme';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
+const baseClass = 'account';
+const DefaultAccount = (props) => {
+    var _a, _b, _c, _d;
+    const { collection, data, permissions, hasSavePermission, apiURL, initialState, isLoading, action, } = props;
+    const { slug, fields, admin: { useAsTitle, preview, }, timestamps, auth, } = collection;
+    const { admin: { dateFormat }, routes: { admin } } = useConfig();
+    const classes = [
+        baseClass,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes },
+        isLoading && (React.createElement(Loading, null)),
+        !isLoading && (React.createElement(OperationContext.Provider, { value: "update" },
+            React.createElement(Form, { className: `${baseClass}__form`, method: "put", action: action, initialState: initialState, disabled: !hasSavePermission },
+                React.createElement("div", { className: `${baseClass}__main` },
+                    React.createElement(Meta, { title: "Account", description: "Account of current user", keywords: "Account, Dashboard, Payload, CMS" }),
+                    React.createElement(Eyebrow, null),
+                    !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
+                    React.createElement("div", { className: `${baseClass}__edit` },
+                        React.createElement(Gutter, { className: `${baseClass}__header` },
+                            React.createElement("h1", null,
+                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } })),
+                            React.createElement(Auth, { useAPIKey: auth.useAPIKey, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: "update" }),
+                            React.createElement(RenderFields, { permissions: permissions.fields, readOnly: !hasSavePermission, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) !== 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields })),
+                        React.createElement(Gutter, { className: `${baseClass}__payload-settings` },
+                            React.createElement("h3", null, "Payload Settings"),
+                            React.createElement(ToggleTheme, null)))),
+                React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
+                    React.createElement("div", { className: `${baseClass}__sidebar` },
+                        React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },
+                            React.createElement("ul", { className: `${baseClass}__collection-actions` }, ((_d = permissions === null || permissions === void 0 ? void 0 : permissions.create) === null || _d === void 0 ? void 0 : _d.permission) && (React.createElement(React.Fragment, null,
+                                React.createElement("li", null,
+                                    React.createElement(Link, { to: `${admin}/collections/${slug}/create` }, "Create New"))))),
+                            React.createElement("div", { className: `${baseClass}__document-actions${preview ? ` ${baseClass}__document-actions--with-preview` : ''}` },
+                                React.createElement(PreviewButton, { generatePreviewURL: preview, data: data }),
+                                hasSavePermission && (React.createElement(FormSubmit, null, "Save"))),
+                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
+                                React.createElement(RenderFields, { permissions: permissions.fields, readOnly: !hasSavePermission, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) === 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields })),
+                            React.createElement("ul", { className: `${baseClass}__meta` },
+                                React.createElement("li", { className: `${baseClass}__api-url` },
+                                    React.createElement("span", { className: `${baseClass}__label` },
+                                        "API URL",
+                                        ' ',
+                                        React.createElement(CopyToClipboard, { value: apiURL })),
+                                    React.createElement("a", { href: apiURL, target: "_blank", rel: "noopener noreferrer" }, apiURL)),
+                                React.createElement("li", null,
+                                    React.createElement("div", { className: `${baseClass}__label` }, "ID"),
+                                    React.createElement("div", null, data === null || data === void 0 ? void 0 : data.id)),
+                                timestamps && (React.createElement(React.Fragment, null,
+                                    data.updatedAt && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Last Modified"),
+                                        React.createElement("div", null, format(new Date(data.updatedAt), dateFormat)))),
+                                    data.createdAt && (React.createElement("li", null,
+                                        React.createElement("div", { className: `${baseClass}__label` }, "Created"),
+                                        React.createElement("div", null, format(new Date(data.createdAt), dateFormat)))))))))))))));
+};
+export default DefaultAccount;

package/dist/admin/components/views/Account/ToggleTheme/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToggleTheme: React.FC;

package/dist/admin/components/views/Account/ToggleTheme/index.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import RadioGroupInput from '../../../forms/field-types/RadioGroup/Input';
+import { useTheme } from '../../../utilities/Theme';
+export const ToggleTheme = () => {
+    const { theme, setTheme, autoMode } = useTheme();
+    const onChange = useCallback((newTheme) => {
+        setTheme(newTheme);
+    }, [setTheme]);
+    return (React.createElement(RadioGroupInput, { name: "theme", label: "Admin Theme", value: autoMode ? 'auto' : theme, onChange: onChange, options: [
+            {
+                label: 'Automatic',
+                value: 'auto',
+            },
+            {
+                label: 'Light',
+                value: 'light',
+            },
+            {
+                label: 'Dark',
+                value: 'dark',
+            },
+        ] }));
+};

package/dist/admin/components/views/Account/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AccountView: React.FC;
+export default AccountView;

package/dist/admin/components/views/Account/index.js

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import { useStepNav } from '../../elements/StepNav';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import { useLocale } from '../../utilities/Locale';
+import DefaultAccount from './Default';
+import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+const AccountView = () => {
+    var _a, _b;
+    const { state: locationState } = useLocation();
+    const locale = useLocale();
+    const { setStepNav } = useStepNav();
+    const { user, permissions } = useAuth();
+    const [initialState, setInitialState] = useState({});
+    const { id, preferences } = useDocumentInfo();
+    const { serverURL, routes: { api }, collections, admin: { user: adminUser, components: { views: { Account: CustomAccount, } = {
+        Account: undefined,
+    }, } = {}, } = {
+        user: 'users',
+    }, } = useConfig();
+    const collection = collections.find((coll) => coll.slug === user.collection);
+    const { fields } = collection;
+    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[adminUser];
+    const [{ data, isLoading: isLoadingDocument }] = usePayloadAPI(`${serverURL}${api}/${collection === null || collection === void 0 ? void 0 : collection.slug}/${user === null || user === void 0 ? void 0 : user.id}?depth=0`, { initialParams: { 'fallback-locale': 'null' } });
+    const hasSavePermission = (_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.update) === null || _b === void 0 ? void 0 : _b.permission;
+    const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
+    const apiURL = `${serverURL}${api}/${user.collection}/${data === null || data === void 0 ? void 0 : data.id}`;
+    const action = `${serverURL}${api}/${user.collection}/${data === null || data === void 0 ? void 0 : data.id}?locale=${locale}&depth=0`;
+    useEffect(() => {
+        const nav = [{
+                label: 'Account',
+            }];
+        setStepNav(nav);
+    }, [setStepNav]);
+    useEffect(() => {
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema({ fieldSchema: fields, data: dataToRender, operation: 'update', id, user, locale });
+            setInitialState(state);
+        };
+        awaitInitialState();
+    }, [dataToRender, fields, id, user, locale]);
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultAccount, CustomComponent: CustomAccount, componentProps: {
+            action,
+            data,
+            collection,
+            permissions: collectionPermissions,
+            hasSavePermission,
+            initialState,
+            apiURL,
+            isLoading: isLoadingDocument || !preferences,
+        } }));
+};
+export default AccountView;

package/dist/admin/components/views/Account/index.scss

@@ -0,0 +1,220 @@
+@import '../../../scss/styles.scss';
+
+.account {
+  width: 100%;
+
+  &__form {
+    height: 100%;
+  }
+
+  &__main {
+    width: calc(100% - #{base(15)});
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__header {
+    h1 {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__collection-actions {
+    list-style: none;
+    margin: 0;
+    padding: base(1.5) 0 base(.5);
+    display: flex;
+
+    li {
+      margin-right: base(.75);
+    }
+  }
+
+  &__edit {
+    padding: base(1) 0 base(2);
+    flex-grow: 1;
+  }
+
+  &__sidebar-wrap {
+    position: fixed;
+    width: base(15);
+    height: 100%;
+    top: 0;
+    right: 0;
+    overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
+  }
+
+  &__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  &__sidebar-sticky-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__collection-actions,
+  &__document-actions,
+  &__meta,
+  &__sidebar-fields {
+    padding-left: base(1.5);
+  }
+
+  &__document-actions {
+    @include blur-bg;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    padding-right: $baseline;
+
+    >* {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  &__document-actions--with-preview {
+    display: flex;
+
+    >* {
+      width: calc(50% - #{base(.5)});
+    }
+
+    >*:first-child {
+      margin-right: base(.5);
+    }
+
+    >*:last-child {
+      margin-left: base(.5);
+    }
+
+    .form-submit {
+      .btn {
+        width: 100%;
+        padding-left: base(2);
+        padding-right: base(2);
+      }
+    }
+  }
+
+  &__api-url {
+    margin-bottom: base(1.5);
+    padding-right: base(1.5);
+
+    a {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__meta {
+    margin: auto 0 $baseline;
+    padding-top: $baseline;
+    list-style: none;
+
+    li {
+      margin-bottom: base(.5);
+    }
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+  }
+
+  &__collection-actions,
+  &__api-url {
+
+    a,
+    button {
+      cursor: pointer;
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__payload-settings {
+    margin-top: base(4);
+    padding-top: base(3);
+    border-top: 1px solid var(--theme-elevation-100);
+  }
+
+  @include mid-break {
+    &__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    &__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding: 0;
+    }
+
+    &__document-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: auto;
+    }
+
+    &__meta {
+      padding: base(2) 0 base(1.5);
+      margin: 0;
+    }
+
+    &__collection-actions,
+    &__document-actions,
+    &__meta,
+    &__sidebar-fields {
+      padding-left: var(--gutter-h);
+    }
+
+    &__api-url {
+      margin-bottom: base(.5);
+    }
+
+    &__collection-actions {
+      border-top: 1px solid var(--theme-elevation-100);
+      padding: base(1) 0 0 base(1);
+      order: 1;
+
+      li {
+        margin: 0 base(.5) 0 0;
+      }
+    }
+
+    &__sidebar {
+      padding-bottom: base(4);
+      height: auto;
+    }
+
+    &__payload-settings {
+      margin-top: base(2);
+      padding-top: base(2);
+      padding-bottom: base(.5);
+      border-top: 1px solid var(--theme-elevation-100);
+      border-bottom: 1px solid var(--theme-elevation-100);
+    }
+  }
+}

package/dist/admin/components/views/Account/types.d.ts

@@ -0,0 +1,13 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { Fields, Data } from '../../forms/Form/types';
+import { CollectionPermission } from '../../../../auth/types';
+export declare type Props = {
+    hasSavePermission: boolean;
+    apiURL: string;
+    collection: SanitizedCollectionConfig;
+    data: Data;
+    permissions: CollectionPermission;
+    initialState: Fields;
+    isLoading: boolean;
+    action: string;
+};

package/dist/admin/components/views/Account/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/CreateFirstUser/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const CreateFirstUser: React.FC<Props>;
+export default CreateFirstUser;