payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/views/collections/Edit/index.scss

@@ -0,0 +1,221 @@
+@import '../../../../scss/styles.scss';
+
+.collection-edit {
+  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;
+      line-height: 1.25;
+    }
+  }
+
+  &__collection-actions {
+    list-style: none;
+    margin: 0;
+    padding: base(1.5) 0 base(.5);
+    display: flex;
+
+    li {
+      margin-right: base(.75);
+    }
+  }
+
+  &__edit {
+    padding-top: base(1);
+    padding-bottom: 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;
+    padding-right: $baseline;
+    position: sticky;
+    top: 0;
+    z-index: $z-nav;
+
+    >* {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  &__document-actions--has-2 {
+    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(.5);
+        padding-right: base(.5);
+      }
+    }
+  }
+
+  &__api-url {
+    margin-bottom: base(1.5);
+    padding-right: base(1.5);
+
+    a {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__sidebar-fields {
+    padding-right: $baseline;
+
+    .preview-btn {
+      display: inline-block;
+      margin-top: 0;
+      width: calc(50% - #{base(.5)});
+    }
+  }
+
+  &__meta {
+    margin: auto 0 $baseline 0;
+    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;
+      }
+    }
+  }
+
+  &--is-editing {
+    .collection-edit__sidebar {
+      padding-top: 0;
+    }
+  }
+
+  @include mid-break {
+    &__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    &__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &__document-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: auto;
+      z-index: $z-nav;
+    }
+
+    &__document-actions,
+    &__meta,
+    &__sidebar-fields {
+      padding-left: var(--gutter-h);
+    }
+
+    &__sidebar-fields {
+      .preview-btn {
+        width: 100%;
+      }
+    }
+
+    &__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);
+    }
+  }
+}

package/dist/admin/components/views/collections/Edit/types.d.ts

@@ -0,0 +1,19 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { CollectionPermission } from '../../../../../auth/types';
+import { Document } from '../../../../../types';
+import { Fields } from '../../../forms/Form/types';
+export declare type IndexProps = {
+    collection: SanitizedCollectionConfig;
+    isEditing?: boolean;
+};
+export declare type Props = IndexProps & {
+    data: Document;
+    onSave?: () => void;
+    permissions: CollectionPermission;
+    isLoading: boolean;
+    initialState?: Fields;
+    apiURL: string;
+    action: string;
+    hasSavePermission: boolean;
+    autosaveEnabled: boolean;
+};

package/dist/admin/components/views/collections/Edit/types.js

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

package/dist/admin/components/views/collections/List/Cell/cellTypes.spec.d.ts

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

package/dist/admin/components/views/collections/List/Cell/cellTypes.spec.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import BlocksCell from './field-types/Blocks';
+import DateCell from './field-types/Date';
+import Checkbox from './field-types/Checkbox';
+import Textarea from './field-types/Textarea';
+import Select from './field-types/Select';
+jest.mock('../../../../utilities/Config', () => ({
+    useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),
+}));
+describe('Cell Types', () => {
+    describe('Blocks', () => {
+        const field = {
+            label: 'Blocks Content',
+            name: 'blocks',
+            labels: {
+                singular: 'Block',
+                plural: 'Blocks Content',
+            },
+            type: 'blocks',
+            blocks: [
+                {
+                    slug: 'number',
+                    labels: {
+                        singular: 'Number',
+                    },
+                },
+            ],
+        };
+        it('renders multiple', () => {
+            const data = [
+                { blockType: 'number' },
+                { blockType: 'number' },
+            ];
+            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('2 Blocks Content - Number, Number');
+        });
+        it('renders zero', () => {
+            const data = [];
+            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('0 Blocks Content');
+        });
+        it('renders "and X more" if over maximum of 5', () => {
+            const data = [
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+                { blockType: 'number' },
+            ];
+            const { container } = render(React.createElement(BlocksCell, { data: data, field: field }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('6 Blocks Content - Number, Number, Number, Number, Number and 1 more');
+        });
+    });
+    describe('Date', () => {
+        it('renders date', () => {
+            const timeStamp = '2020-10-06T14:07:39.033Z';
+            const { container } = render(React.createElement(DateCell, { data: timeStamp }));
+            const dateMatch = /October\s6th\s2020,\s[\d]{1,2}:07\s[A|P]M/; // Had to account for timezones in CI
+            const el = container.querySelector('span');
+            expect(el.textContent).toMatch(dateMatch);
+        });
+        it('handles undefined', () => {
+            const timeStamp = undefined;
+            const { container } = render(React.createElement(DateCell, { data: timeStamp }));
+            const el = container.querySelector('span');
+            expect(el.textContent).toBe('');
+        });
+    });
+    describe('Checkbox', () => {
+        it('renders true', () => {
+            const { container } = render(React.createElement(Checkbox, { data: true }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('true');
+        });
+        it('renders false', () => {
+            const { container } = render(React.createElement(Checkbox, { data: false }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('false');
+        });
+    });
+    describe('Textarea', () => {
+        it('renders data', () => {
+            const { container } = render(React.createElement(Textarea, { data: "data" }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('data');
+        });
+        it('handle undefined - bug/13', () => {
+            const { container } = render(React.createElement(Textarea, { data: undefined }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('');
+        });
+    });
+    describe('Select', () => {
+        const fieldWithOptionsObject = {
+            type: 'select',
+            name: 'selectObject',
+            options: [{
+                    value: 'one',
+                    label: 'One',
+                }, {
+                    value: 'two',
+                    label: 'Two',
+                }],
+        };
+        const fieldWithStringsOptions = {
+            type: 'select',
+            name: 'selectString',
+            options: ['blue', 'green', 'yellow'],
+        };
+        it('renders options objects', () => {
+            const { container } = render(React.createElement(Select, { data: "one", field: fieldWithOptionsObject }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('One');
+        });
+        it('renders option strings', () => {
+            const { container } = render(React.createElement(Select, { data: "blue", field: fieldWithStringsOptions }));
+            const el = container.querySelector('span');
+            expect(el).toHaveTextContent('blue');
+        });
+        describe('HasMany', () => {
+            it('renders options objects', () => {
+                const { container } = render(React.createElement(Select, { data: ['one', 'two'], field: fieldWithOptionsObject }));
+                const el = container.querySelector('span');
+                expect(el).toHaveTextContent('One, Two');
+            });
+            it('renders option strings', () => {
+                const { container } = render(React.createElement(Select, { data: ['blue', 'green'], field: fieldWithStringsOptions }));
+                const el = container.querySelector('span');
+                expect(el).toHaveTextContent('blue, green');
+            });
+        });
+    });
+});

package/dist/admin/components/views/collections/List/Cell/field-types/Array/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ArrayField } from '../../../../../../../../fields/config/types';
+declare type Props = {
+    data: Record<string, unknown>;
+    field: ArrayField;
+};
+declare const ArrayCell: React.FC<Props>;
+export default ArrayCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Array/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+const ArrayCell = ({ data, field }) => {
+    var _a;
+    const arrayFields = data !== null && data !== void 0 ? data : [];
+    const label = `${arrayFields.length} ${((_a = field === null || field === void 0 ? void 0 : field.labels) === null || _a === void 0 ? void 0 : _a.plural) || 'Rows'}`;
+    return (React.createElement("span", null, label));
+};
+export default ArrayCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Blocks/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const BlocksCell: ({ data, field }: {
+    data: any;
+    field: any;
+}) => JSX.Element;
+export default BlocksCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Blocks/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+const BlocksCell = ({ data, field }) => {
+    const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
+    const blockLabels = field.blocks.map((s) => ({ slug: s.slug, label: s.labels.singular }));
+    let label = `0 ${field.labels.plural}`;
+    const formatBlockList = (blocks) => blocks.map((b) => {
+        var _a;
+        const filtered = (_a = blockLabels.filter((f) => f.slug === b)) === null || _a === void 0 ? void 0 : _a[0];
+        return filtered === null || filtered === void 0 ? void 0 : filtered.label;
+    }).join(', ');
+    const itemsToShow = 5;
+    if (selectedBlocks.length > itemsToShow) {
+        const more = selectedBlocks.length - itemsToShow;
+        label = `${selectedBlocks.length} ${field.labels.plural} - ${formatBlockList(selectedBlocks.slice(0, itemsToShow))} and ${more} more`;
+    }
+    else if (selectedBlocks.length > 0) {
+        label = `${selectedBlocks.length} ${selectedBlocks.length === 1 ? field.labels.singular : field.labels.plural} - ${formatBlockList(selectedBlocks)}`;
+    }
+    return (React.createElement("span", null, label));
+};
+export default BlocksCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Checkbox/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './index.scss';
+declare const Checkbox: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default Checkbox;

package/dist/admin/components/views/collections/List/Cell/field-types/Checkbox/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+// Handles boolean values
+const Checkbox = ({ data }) => (React.createElement("code", { className: "bool-cell" },
+    React.createElement("span", null, JSON.stringify(data))));
+export default Checkbox;

package/dist/admin/components/views/collections/List/Cell/field-types/Checkbox/index.scss

@@ -0,0 +1,17 @@
+@import '../../../../../../../scss/styles.scss';
+
+.bool-cell {
+  font-size: 1rem;
+  line-height: base(1);
+  border: 0;
+  display: inline-flex;
+  vertical-align: middle;
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
+  border-radius: $style-radius-s;
+  padding: 0 base(0.25);
+  padding-left: base(0.0875 + 0.25);
+
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-800);
+}

package/dist/admin/components/views/collections/List/Cell/field-types/Code/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './index.scss';
+declare const CodeCell: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default CodeCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Code/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+const CodeCell = ({ data }) => {
+    const textToShow = data.length > 100 ? `${data.substring(0, 100)}\u2026` : data;
+    return (React.createElement("code", { className: "code-cell" },
+        React.createElement("span", null, textToShow)));
+};
+export default CodeCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Code/index.scss

@@ -0,0 +1,17 @@
+@import '../../../../../../../scss/styles.scss';
+
+.code-cell {
+  font-size: 1rem;
+  line-height: base(1);
+  border: 0;
+  display: inline-flex;
+  vertical-align: middle;
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
+  border-radius: $style-radius-s;
+  padding: 0 base(0.25);
+  padding-left: base(0.0875 + 0.25);
+
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-800);
+}

package/dist/admin/components/views/collections/List/Cell/field-types/Date/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const DateCell: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default DateCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Date/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import format from 'date-fns/format';
+import { useConfig } from '../../../../../../utilities/Config';
+const DateCell = ({ data }) => {
+    const { admin: { dateFormat } } = useConfig();
+    return (React.createElement("span", null, data && format(new Date(data), dateFormat)));
+};
+export default DateCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Relationship/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.scss';
+declare const RelationshipCell: (props: any) => JSX.Element;
+export default RelationshipCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Relationship/index.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { useConfig } from '../../../../../../utilities/Config';
+import useIntersect from '../../../../../../../hooks/useIntersect';
+import { useListRelationships } from '../../../RelationshipProvider';
+import './index.scss';
+const baseClass = 'relationship-cell';
+const totalToShow = 3;
+const RelationshipCell = (props) => {
+    var _a;
+    const { field, data: cellData } = props;
+    const { collections, routes } = useConfig();
+    const [intersectionRef, entry] = useIntersect();
+    const [values, setValues] = useState([]);
+    const { getRelationships, documents } = useListRelationships();
+    const [hasRequested, setHasRequested] = useState(false);
+    const isAboveViewport = ((_a = entry === null || entry === void 0 ? void 0 : entry.boundingClientRect) === null || _a === void 0 ? void 0 : _a.top) > 0;
+    useEffect(() => {
+        if (cellData && isAboveViewport && !hasRequested) {
+            const formattedValues = [];
+            const arrayCellData = Array.isArray(cellData) ? cellData : [cellData];
+            arrayCellData.slice(0, (arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow)).forEach((cell) => {
+                if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {
+                    formattedValues.push(cell);
+                }
+                if ((typeof cell === 'number' || typeof cell === 'string') && typeof field.relationTo === 'string') {
+                    formattedValues.push({
+                        value: cell,
+                        relationTo: field.relationTo,
+                    });
+                }
+            });
+            getRelationships(formattedValues);
+            setHasRequested(true);
+            setValues(formattedValues);
+        }
+    }, [cellData, field, collections, isAboveViewport, routes.api, hasRequested, getRelationships]);
+    return (React.createElement("div", { className: baseClass, ref: intersectionRef },
+        values.map(({ relationTo, value }, i) => {
+            const document = documents[relationTo][value];
+            const relatedCollection = collections.find(({ slug }) => slug === relationTo);
+            return (React.createElement(React.Fragment, { key: i },
+                document === false && `Untitled - ID: ${value}`,
+                document === null && 'Loading...',
+                document && (document[relatedCollection.admin.useAsTitle] ? document[relatedCollection.admin.useAsTitle] : `Untitled - ID: ${value}`),
+                values.length > i + 1 && ', '));
+        }),
+        Array.isArray(cellData) && cellData.length > totalToShow && ` and ${cellData.length - totalToShow} more`,
+        values.length === 0 && `No <${field.label}>`));
+};
+export default RelationshipCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Relationship/index.scss

@@ -0,0 +1,3 @@
+.relationship-cell {
+  min-width: 250px;
+}

package/dist/admin/components/views/collections/List/Cell/field-types/Richtext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const RichTextCell: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default RichTextCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Richtext/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+const RichTextCell = ({ data }) => {
+    const flattenedText = data === null || data === void 0 ? void 0 : data.map((i) => { var _a; return (_a = i === null || i === void 0 ? void 0 : i.children) === null || _a === void 0 ? void 0 : _a.map((c) => c.text); }).join(' ');
+    const textToShow = (flattenedText === null || flattenedText === void 0 ? void 0 : flattenedText.length) > 100 ? `${flattenedText.slice(0, 100)}\u2026` : flattenedText;
+    return (React.createElement("span", null, textToShow));
+};
+export default RichTextCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Select/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SelectField } from '../../../../../../../../fields/config/types';
+declare const SelectCell: ({ data, field }: {
+    data: any;
+    field: SelectField;
+}) => JSX.Element;
+export default SelectCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Select/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { optionsAreObjects } from '../../../../../../../../fields/config/types';
+const SelectCell = ({ data, field }) => {
+    const findLabel = (items) => items.map((i) => {
+        var _a, _b;
+        const found = (_b = (_a = field.options
+            .filter((f) => f.value === i)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label;
+        return found;
+    }).join(', ');
+    let content = '';
+    if (optionsAreObjects(field.options)) {
+        content = Array.isArray(data)
+            ? findLabel(data) // hasMany
+            : findLabel([data]);
+    }
+    else {
+        content = Array.isArray(data)
+            ? data.join(', ') // hasMany
+            : data;
+    }
+    return (React.createElement("span", null, content));
+};
+export default SelectCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Textarea/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const TextareaCell: ({ data }: {
+    data: any;
+}) => JSX.Element;
+export default TextareaCell;

package/dist/admin/components/views/collections/List/Cell/field-types/Textarea/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const TextareaCell = ({ data }) => {
+    const textToShow = (data === null || data === void 0 ? void 0 : data.length) > 100 ? `${data.substr(0, 100)}\u2026` : data;
+    return (React.createElement("span", null, textToShow));
+};
+export default TextareaCell;