payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/elements/ReactSelect/types.d.ts

@@ -0,0 +1,21 @@
+import { OptionsType, GroupedOptionsType } from 'react-select';
+export declare type Options = OptionsType<Value> | GroupedOptionsType<Value>;
+export declare type Value = {
+    label: string;
+    value: string | null;
+    options?: Options;
+};
+export declare type Props = {
+    className?: string;
+    value?: Value | Value[];
+    onChange?: (value: any) => void;
+    disabled?: boolean;
+    showError?: boolean;
+    options: Options;
+    isMulti?: boolean;
+    isDisabled?: boolean;
+    onInputChange?: (val: string) => void;
+    onMenuScrollToBottom?: () => void;
+    placeholder?: string;
+    isSearchable?: boolean;
+};

package/dist/admin/components/elements/ReactSelect/types.js

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

package/dist/admin/components/elements/RenderTitle/index.d.ts

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

package/dist/admin/components/elements/RenderTitle/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import useTitle from '../../../hooks/useTitle';
+import IDLabel from '../IDLabel';
+const baseClass = 'render-title';
+const RenderTitle = (props) => {
+    const { useAsTitle, title: titleFromProps, data, fallback = '[untitled]', } = props;
+    const titleFromForm = useTitle(useAsTitle);
+    const titleFromData = data && data[useAsTitle];
+    let title = titleFromData;
+    if (!title)
+        title = titleFromForm;
+    if (!title)
+        title = data === null || data === void 0 ? void 0 : data.id;
+    if (!title)
+        title = fallback;
+    title = titleFromProps || title;
+    const idAsTitle = title === (data === null || data === void 0 ? void 0 : data.id);
+    if (idAsTitle) {
+        return (React.createElement(IDLabel, { id: data === null || data === void 0 ? void 0 : data.id }));
+    }
+    return (React.createElement("span", { className: baseClass }, title));
+};
+export default RenderTitle;

package/dist/admin/components/elements/RenderTitle/types.d.ts

@@ -0,0 +1,8 @@
+export declare type Props = {
+    useAsTitle?: string;
+    data?: {
+        id?: string;
+    };
+    title?: string;
+    fallback?: string;
+};

package/dist/admin/components/elements/RenderTitle/types.js

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

package/dist/admin/components/elements/SaveDraft/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+declare const SaveDraft: React.FC;
+export default SaveDraft;

package/dist/admin/components/elements/SaveDraft/index.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useConfig } from '../../utilities/Config';
+import FormSubmit from '../../forms/Submit';
+import { useForm, useFormModified } from '../../forms/Form/context';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { useLocale } from '../../utilities/Locale';
+import './index.scss';
+const baseClass = 'save-draft';
+const SaveDraft = () => {
+    const { serverURL, routes: { api } } = useConfig();
+    const { submit } = useForm();
+    const { collection, global, id } = useDocumentInfo();
+    const modified = useFormModified();
+    const locale = useLocale();
+    const canSaveDraft = modified;
+    const saveDraft = useCallback(() => {
+        const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
+        let action;
+        let method = 'POST';
+        if (collection) {
+            action = `${serverURL}${api}/${collection.slug}${id ? `/${id}` : ''}${search}`;
+            if (id)
+                method = 'PUT';
+        }
+        if (global) {
+            action = `${serverURL}${api}/globals/${global.slug}${search}`;
+        }
+        submit({
+            action,
+            method,
+            skipValidation: true,
+            overrides: {
+                _status: 'draft',
+            },
+        });
+    }, [submit, collection, global, serverURL, api, locale, id]);
+    return (React.createElement(FormSubmit, { className: baseClass, type: "button", buttonStyle: "secondary", onClick: saveDraft, disabled: !canSaveDraft }, "Save draft"));
+};
+export default SaveDraft;

package/dist/admin/components/elements/SearchFilter/index.d.ts

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

package/dist/admin/components/elements/SearchFilter/index.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import queryString from 'qs';
+import Search from '../../icons/Search';
+import useDebounce from '../../../hooks/useDebounce';
+import { useSearchParams } from '../../utilities/SearchParams';
+import './index.scss';
+const baseClass = 'search-filter';
+const SearchFilter = (props) => {
+    const { fieldName = 'id', fieldLabel = 'ID', modifySearchQuery = true, handleChange, } = props;
+    const params = useSearchParams();
+    const history = useHistory();
+    const [search, setSearch] = useState(() => { var _a, _b; return ((_b = (_a = params === null || params === void 0 ? void 0 : params.where) === null || _a === void 0 ? void 0 : _a[fieldName]) === null || _b === void 0 ? void 0 : _b.like) || ''; });
+    const debouncedSearch = useDebounce(search, 300);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e;
+        if (debouncedSearch !== ((_b = (_a = params === null || params === void 0 ? void 0 : params.where) === null || _a === void 0 ? void 0 : _a[fieldName]) === null || _b === void 0 ? void 0 : _b.like)) {
+            const newWhere = {
+                ...(typeof (params === null || params === void 0 ? void 0 : params.where) === 'object' ? params.where : {}),
+                [fieldName]: {
+                    like: debouncedSearch,
+                },
+            };
+            if (!debouncedSearch) {
+                delete newWhere[fieldName];
+            }
+            if (handleChange)
+                handleChange(newWhere);
+            if (modifySearchQuery && ((_d = (_c = params === null || params === void 0 ? void 0 : params.where) === null || _c === void 0 ? void 0 : _c[fieldName]) === null || _d === void 0 ? void 0 : _d.like) !== ((_e = newWhere === null || newWhere === void 0 ? void 0 : newWhere[fieldName]) === null || _e === void 0 ? void 0 : _e.like)) {
+                history.replace({
+                    search: queryString.stringify({
+                        ...params,
+                        page: 1,
+                        where: newWhere,
+                    }),
+                });
+            }
+        }
+    }, [debouncedSearch, history, fieldName, params, handleChange, modifySearchQuery]);
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("input", { className: `${baseClass}__input`, placeholder: `Search by ${fieldLabel}`, type: "text", value: search || '', onChange: (e) => setSearch(e.target.value) }),
+        React.createElement(Search, null)));
+};
+export default SearchFilter;

package/dist/admin/components/elements/SearchFilter/index.scss

@@ -0,0 +1,16 @@
+@import '../../../scss/styles';
+
+.search-filter {
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: base(.5);
+  }
+
+  &__input {
+    @include formInput;
+  }
+}

package/dist/admin/components/elements/SearchFilter/types.d.ts

@@ -0,0 +1,7 @@
+import { Where } from '../../../../types';
+export declare type Props = {
+    fieldName?: string;
+    fieldLabel?: string;
+    modifySearchQuery?: boolean;
+    handleChange?: (where: Where) => void;
+};

package/dist/admin/components/elements/SearchFilter/types.js

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

package/dist/admin/components/elements/SortColumn/index.d.ts

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

package/dist/admin/components/elements/SortColumn/index.js

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import queryString from 'qs';
+import Chevron from '../../icons/Chevron';
+import Button from '../Button';
+import './index.scss';
+import { useSearchParams } from '../../utilities/SearchParams';
+const baseClass = 'sort-column';
+const SortColumn = (props) => {
+    const { label, name, disable = false, } = props;
+    const params = useSearchParams();
+    const history = useHistory();
+    const { sort } = params;
+    const desc = `-${name}`;
+    const asc = name;
+    const ascClasses = [`${baseClass}__asc`];
+    if (sort === asc)
+        ascClasses.push(`${baseClass}--active`);
+    const descClasses = [`${baseClass}__desc`];
+    if (sort === desc)
+        descClasses.push(`${baseClass}--active`);
+    const setSort = useCallback((newSort) => {
+        history.push({
+            search: queryString.stringify({
+                ...params,
+                sort: newSort,
+            }, { addQueryPrefix: true }),
+        });
+    }, [params, history]);
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("span", { className: `${baseClass}__label` }, label),
+        !disable && (React.createElement("span", { className: `${baseClass}__buttons` },
+            React.createElement(Button, { round: true, buttonStyle: "none", className: ascClasses.join(' '), onClick: () => setSort(asc) },
+                React.createElement(Chevron, null)),
+            React.createElement(Button, { round: true, buttonStyle: "none", className: descClasses.join(' '), onClick: () => setSort(desc) },
+                React.createElement(Chevron, null))))));
+};
+export default SortColumn;

package/dist/admin/components/elements/SortColumn/index.scss

@@ -0,0 +1,51 @@
+@import '../../../scss/styles.scss';
+
+.sort-column {
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__buttons {
+    flex-shrink: 0;
+  }
+
+  &__label,
+  &__buttons,
+  .btn {
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  &__label {
+    cursor: default;
+  }
+
+  button.btn {
+    margin: 0;
+    opacity: .3;
+
+    &.sort-column--active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &:hover {
+      opacity: .7;
+    }
+  }
+
+  &__asc {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:hover {
+    .btn {
+      opacity: .4;
+      visibility: visible;
+    }
+  }
+}

package/dist/admin/components/elements/SortColumn/types.d.ts

@@ -0,0 +1,5 @@
+export declare type Props = {
+    label: string;
+    name: string;
+    disable?: boolean;
+};

package/dist/admin/components/elements/SortColumn/types.js

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

package/dist/admin/components/elements/SortComplex/index.d.ts

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

package/dist/admin/components/elements/SortComplex/index.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import queryString from 'qs';
+import { useHistory } from 'react-router-dom';
+import ReactSelect from '../ReactSelect';
+import sortableFieldTypes from '../../../../fields/sortableFieldTypes';
+import { useSearchParams } from '../../utilities/SearchParams';
+import { fieldAffectsData } from '../../../../fields/config/types';
+import './index.scss';
+const baseClass = 'sort-complex';
+const sortOptions = [{ label: 'Ascending', value: '' }, { label: 'Descending', value: '-' }];
+const SortComplex = (props) => {
+    const { collection, modifySearchQuery = true, handleChange, } = props;
+    const history = useHistory();
+    const params = useSearchParams();
+    const [sortFields] = useState(() => collection.fields.reduce((fields, field) => {
+        if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {
+            return [
+                ...fields,
+                { label: field.label, value: field.name },
+            ];
+        }
+        return fields;
+    }, []));
+    const [sortField, setSortField] = useState(sortFields[0]);
+    const [sortOrder, setSortOrder] = useState({ label: 'Descending', value: '-' });
+    useEffect(() => {
+        if (sortField === null || sortField === void 0 ? void 0 : sortField.value) {
+            const newSortValue = `${sortOrder.value}${sortField.value}`;
+            if (handleChange)
+                handleChange(newSortValue);
+            if (params.sort !== newSortValue && modifySearchQuery) {
+                history.replace({
+                    search: queryString.stringify({
+                        ...params,
+                        sort: newSortValue,
+                    }, { addQueryPrefix: true }),
+                });
+            }
+        }
+    }, [history, params, sortField, sortOrder, modifySearchQuery, handleChange]);
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { className: `${baseClass}__wrap` },
+                React.createElement("div", { className: `${baseClass}__select` },
+                    React.createElement("div", { className: `${baseClass}__label` }, "Column to Sort"),
+                    React.createElement(ReactSelect, { value: sortField, options: sortFields, onChange: setSortField })),
+                React.createElement("div", { className: `${baseClass}__select` },
+                    React.createElement("div", { className: `${baseClass}__label` }, "Order"),
+                    React.createElement(ReactSelect, { value: sortOrder, options: sortOptions, onChange: setSortOrder }))))));
+};
+export default SortComplex;

package/dist/admin/components/elements/SortComplex/index.scss

@@ -0,0 +1,36 @@
+@import '../../../scss/styles.scss';
+
+.sort-complex {
+  background: var(--theme-elevation-100);
+  padding: base(0.5);
+  display: flex;
+
+  &__wrap {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__select {
+    width: 50%;
+    margin-bottom: base(0.5);
+    padding: 0 base(0.5);
+    flex-grow: 1;
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+    margin: base(0.5) 0;
+  }
+
+  @include mid-break {
+    &__wrap {
+      display: block;
+    }
+
+    &__select {
+      margin: 0 0 base(0.5);
+      width: 100%;
+    }
+  }
+}

package/dist/admin/components/elements/SortComplex/types.d.ts

@@ -0,0 +1,7 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type Props = {
+    collection: SanitizedCollectionConfig;
+    sort?: string;
+    handleChange?: (sort: string) => void;
+    modifySearchQuery?: boolean;
+};

package/dist/admin/components/elements/SortComplex/types.js

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

package/dist/admin/components/elements/Status/index.d.ts

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

package/dist/admin/components/elements/Status/index.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useState } from 'react';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../utilities/Config';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import Button from '../Button';
+import { MinimalTemplate } from '../..';
+import { requests } from '../../../api';
+import { useForm } from '../../forms/Form/context';
+import { useLocale } from '../../utilities/Locale';
+import './index.scss';
+const baseClass = 'status';
+const unPublishModalSlug = 'confirm-un-publish';
+const revertModalSlug = 'confirm-revert';
+const Status = () => {
+    var _a, _b;
+    const { publishedDoc, unpublishedVersions, collection, global, id, getVersions } = useDocumentInfo();
+    const { toggle, closeAll: closeAllModals } = useModal();
+    const { serverURL, routes: { api } } = useConfig();
+    const [processing, setProcessing] = useState(false);
+    const { reset: resetForm } = useForm();
+    const locale = useLocale();
+    let statusToRender;
+    if (((_a = unpublishedVersions === null || unpublishedVersions === void 0 ? void 0 : unpublishedVersions.docs) === null || _a === void 0 ? void 0 : _a.length) > 0 && publishedDoc) {
+        statusToRender = 'Changed';
+    }
+    else if (!publishedDoc) {
+        statusToRender = 'Draft';
+    }
+    else if (publishedDoc && ((_b = unpublishedVersions === null || unpublishedVersions === void 0 ? void 0 : unpublishedVersions.docs) === null || _b === void 0 ? void 0 : _b.length) <= 1) {
+        statusToRender = 'Published';
+    }
+    const performAction = useCallback(async (action) => {
+        let url;
+        let method;
+        let body;
+        setProcessing(true);
+        if (action === 'unpublish') {
+            body = {
+                _status: 'draft',
+            };
+        }
+        if (action === 'revert') {
+            body = publishedDoc;
+        }
+        if (collection) {
+            url = `${serverURL}${api}/${collection.slug}/${id}?depth=0&locale=${locale}&fallback-locale=null`;
+            method = 'put';
+        }
+        if (global) {
+            url = `${serverURL}${api}/globals/${global.slug}?depth=0&locale=${locale}&fallback-locale=null`;
+            method = 'post';
+        }
+        const res = await requests[method](url, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+        if (res.status === 200) {
+            let data;
+            let fields;
+            const json = await res.json();
+            if (global) {
+                data = json.result;
+                fields = global.fields;
+            }
+            if (collection) {
+                data = json.doc;
+                fields = collection.fields;
+            }
+            resetForm(fields, data);
+            toast.success(json.message);
+            getVersions();
+        }
+        else {
+            toast.error('There was a problem while un-publishing this document.');
+        }
+        setProcessing(false);
+        closeAllModals();
+    }, [closeAllModals, collection, global, serverURL, api, resetForm, id, locale, getVersions, publishedDoc]);
+    if (statusToRender) {
+        return (React.createElement("div", { className: baseClass },
+            React.createElement("div", { className: `${baseClass}__value-wrap` },
+                React.createElement("span", { className: `${baseClass}__value` }, statusToRender),
+                statusToRender === 'Published' && (React.createElement(React.Fragment, null,
+                    "\u00A0\u2014\u00A0",
+                    React.createElement(Button, { onClick: () => toggle(unPublishModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Unpublish"),
+                    React.createElement(Modal, { slug: unPublishModalSlug, className: `${baseClass}__modal` },
+                        React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
+                            React.createElement("h1", null, "Confirm unpublish"),
+                            React.createElement("p", null, "You are about to unpublish this document. Are you sure?"),
+                            React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(unPublishModalSlug) }, "Cancel"),
+                            React.createElement(Button, { onClick: processing ? undefined : () => performAction('unpublish') }, processing ? 'Unpublishing...' : 'Confirm'))))),
+                statusToRender === 'Changed' && (React.createElement(React.Fragment, null,
+                    "\u00A0\u2014\u00A0",
+                    React.createElement(Button, { onClick: () => toggle(revertModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Revert to published"),
+                    React.createElement(Modal, { slug: revertModalSlug, className: `${baseClass}__modal` },
+                        React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
+                            React.createElement("h1", null, "Confirm revert to saved"),
+                            React.createElement("p", null, "You are about to revert this document's changes to its published state. Are you sure?"),
+                            React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(revertModalSlug) }, "Cancel"),
+                            React.createElement(Button, { onClick: processing ? undefined : () => performAction('revert') }, processing ? 'Reverting...' : 'Confirm'))))))));
+    }
+    return null;
+};
+export default Status;

package/dist/admin/components/elements/Status/index.scss

@@ -0,0 +1,35 @@
+@import '../../../scss/styles.scss';
+
+.status {
+  &__label {
+    color: gray;
+  }
+
+  &__value {
+    font-weight: 600;
+  }
+
+  &__action {
+    text-decoration: underline;
+  }
+
+  &__modal {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &__toggle {
+      @extend %btn-reset;
+    }
+
+    .btn {
+      margin-right: $baseline;
+    }
+  }
+
+  &__modal-template {
+    position: relative;
+    z-index: 1;
+  }
+}

package/dist/admin/components/elements/Status/types.d.ts

@@ -0,0 +1 @@
+export declare type Props = {};

package/dist/admin/components/elements/Status/types.js

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

package/dist/admin/components/elements/StepNav/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Context as ContextType } from './types';
+import './index.scss';
+declare const StepNavProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+declare const useStepNav: () => ContextType;
+declare const StepNav: React.FC;
+export { StepNavProvider, useStepNav, };
+export default StepNav;

package/dist/admin/components/elements/StepNav/index.js

@@ -0,0 +1,34 @@
+import React, { useState, createContext, useContext, } from 'react';
+import { Link } from 'react-router-dom';
+import Chevron from '../../icons/Chevron';
+import './index.scss';
+const Context = createContext({});
+const StepNavProvider = ({ children }) => {
+    const [stepNav, setStepNav] = useState([]);
+    return (React.createElement(Context.Provider, { value: {
+            stepNav,
+            setStepNav,
+        } }, children));
+};
+const useStepNav = () => useContext(Context);
+const StepNav = () => {
+    const dashboardLabel = React.createElement("span", null, "Dashboard");
+    const { stepNav } = useStepNav();
+    return (React.createElement("nav", { className: "step-nav" },
+        stepNav.length > 0
+            ? (React.createElement(Link, { to: "/admin" },
+                dashboardLabel,
+                React.createElement(Chevron, null)))
+            : dashboardLabel,
+        stepNav.map((item, i) => {
+            const StepLabel = React.createElement("span", { key: i }, item.label);
+            const Step = stepNav.length === i + 1
+                ? StepLabel
+                : (React.createElement(Link, { to: item.url, key: i },
+                    StepLabel,
+                    React.createElement(Chevron, null)));
+            return Step;
+        })));
+};
+export { StepNavProvider, useStepNav, };
+export default StepNav;

package/dist/admin/components/elements/StepNav/index.scss

@@ -0,0 +1,38 @@
+@import '../../../scss/styles.scss';
+
+.step-nav {
+  display: flex;
+
+  * {
+    display: block;
+  }
+
+  a {
+    margin-right: base(.25);
+    border: 0;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    text-decoration: none;
+
+    svg {
+      margin-left: base(.25);
+      transform: rotate(-90deg);
+    }
+
+    label {
+      cursor: pointer;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  span {
+    max-width: base(6);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}