@payloadcms/plugin-import-export 0.0.1-beta.0

package/README.md

@@ -0,0 +1,17 @@
+# Payload Import/Export Plugin
+
+A plugin for [Payload](https://github.com/payloadcms/payload) to easily import and export data.
+
+- [Source code](https://github.com/payloadcms/payload/tree/main/packages/plugin-import-export)
+- [Documentation](https://payloadcms.com/docs/plugins/import-export)
+- [Documentation source](https://github.com/payloadcms/payload/tree/main/docs/plugins/import-export.mdx)
+
+[//]: # 'TODO: Remove requirements'
+
+## Requirements
+
+### Exports
+
+- [ ] The export button should be visible on the collection list.
+
+Create writable streams for each collection and write the data to the streams. The streams should be piped to a zip stream and sent to the client.

package/dist/components/CollectionField/index.d.ts

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

package/dist/components/CollectionField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CollectionField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAanC,CAAA"}

package/dist/components/CollectionField/index.js

@@ -0,0 +1,24 @@
+'use client';
+import { useDocumentInfo, useField } from '@payloadcms/ui';
+import { useEffect } from 'react';
+import { useImportExport } from '../ImportExportProvider/index.js';
+export const CollectionField = ()=>{
+    const { id } = useDocumentInfo();
+    const { setValue } = useField({
+        path: 'collectionSlug'
+    });
+    const { collection } = useImportExport();
+    useEffect(()=>{
+        if (id) {
+            return;
+        }
+        setValue(collection);
+    }, [
+        id,
+        collection,
+        setValue
+    ]);
+    return null;
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/CollectionField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CollectionField/index.tsx"],"sourcesContent":["'use client'\nimport type React from 'react'\n\nimport { useDocumentInfo, useField } from '@payloadcms/ui'\nimport { useEffect } from 'react'\n\nimport { useImportExport } from '../ImportExportProvider/index.js'\n\nexport const CollectionField: React.FC = () => {\n  const { id } = useDocumentInfo()\n  const { setValue } = useField({ path: 'collectionSlug' })\n  const { collection } = useImportExport()\n\n  useEffect(() => {\n    if (id) {\n      return\n    }\n    setValue(collection)\n  }, [id, collection, setValue])\n\n  return null\n}\n"],"names":["useDocumentInfo","useField","useEffect","useImportExport","CollectionField","id","setValue","path","collection"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAC1D,SAASC,SAAS,QAAQ,QAAO;AAEjC,SAASC,eAAe,QAAQ,mCAAkC;AAElE,OAAO,MAAMC,kBAA4B;IACvC,MAAM,EAAEC,EAAE,EAAE,GAAGL;IACf,MAAM,EAAEM,QAAQ,EAAE,GAAGL,SAAS;QAAEM,MAAM;IAAiB;IACvD,MAAM,EAAEC,UAAU,EAAE,GAAGL;IAEvBD,UAAU;QACR,IAAIG,IAAI;YACN;QACF;QACAC,SAASE;IACX,GAAG;QAACH;QAAIG;QAAYF;KAAS;IAE7B,OAAO;AACT,EAAC"}

package/dist/components/ExportListMenuItem/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.scss';
+export declare const ExportListMenuItem: React.FC<{
+    collectionSlug: string;
+    exportCollectionSlug: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ExportListMenuItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExportListMenuItem/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,cAAc,EAAE,MAAM,CAAA;IACtB,oBAAoB,EAAE,MAAM,CAAA;CAC7B,CAuBA,CAAA"}

package/dist/components/ExportListMenuItem/index.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { PopupList, useConfig, useDocumentDrawer, useTranslation } from '@payloadcms/ui';
+import React, { useEffect } from 'react';
+import { useImportExport } from '../ImportExportProvider/index.js';
+import './index.scss';
+const baseClass = 'export-list-menu-item';
+export const ExportListMenuItem = ({ collectionSlug, exportCollectionSlug })=>{
+    const { getEntityConfig } = useConfig();
+    const { i18n } = useTranslation();
+    const currentCollectionConfig = getEntityConfig({
+        collectionSlug
+    });
+    const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
+        collectionSlug: exportCollectionSlug
+    });
+    const { setCollection } = useImportExport();
+    // Set collection and selected items on mount or when selection changes
+    useEffect(()=>{
+        setCollection(currentCollectionConfig.slug ?? '');
+    }, [
+        currentCollectionConfig,
+        setCollection
+    ]);
+    return /*#__PURE__*/ _jsxs(PopupList.Button, {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxs(DocumentDrawerToggler, {
+                children: [
+                    "Export ",
+                    getTranslation(currentCollectionConfig.labels.plural, i18n)
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DocumentDrawer, {})
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/ExportListMenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExportListMenuItem/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { PopupList, useConfig, useDocumentDrawer, useTranslation } from '@payloadcms/ui'\nimport React, { useEffect } from 'react'\n\nimport { useImportExport } from '../ImportExportProvider/index.js'\nimport './index.scss'\n\nconst baseClass = 'export-list-menu-item'\n\nexport const ExportListMenuItem: React.FC<{\n  collectionSlug: string\n  exportCollectionSlug: string\n}> = ({ collectionSlug, exportCollectionSlug }) => {\n  const { getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n  const currentCollectionConfig = getEntityConfig({ collectionSlug })\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    collectionSlug: exportCollectionSlug,\n  })\n  const { setCollection } = useImportExport()\n\n  // Set collection and selected items on mount or when selection changes\n  useEffect(() => {\n    setCollection(currentCollectionConfig.slug ?? '')\n  }, [currentCollectionConfig, setCollection])\n\n  return (\n    <PopupList.Button className={baseClass}>\n      <DocumentDrawerToggler>\n        Export {getTranslation(currentCollectionConfig.labels.plural, i18n)}\n      </DocumentDrawerToggler>\n      <DocumentDrawer />\n    </PopupList.Button>\n  )\n}\n"],"names":["getTranslation","PopupList","useConfig","useDocumentDrawer","useTranslation","React","useEffect","useImportExport","baseClass","ExportListMenuItem","collectionSlug","exportCollectionSlug","getEntityConfig","i18n","currentCollectionConfig","DocumentDrawer","DocumentDrawerToggler","setCollection","slug","Button","className","labels","plural"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,SAAS,EAAEC,SAAS,EAAEC,iBAAiB,EAAEC,cAAc,QAAQ,iBAAgB;AACxF,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,eAAe,QAAQ,mCAAkC;AAClE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAGR,CAAC,EAAEC,cAAc,EAAEC,oBAAoB,EAAE;IAC5C,MAAM,EAAEC,eAAe,EAAE,GAAGV;IAC5B,MAAM,EAAEW,IAAI,EAAE,GAAGT;IACjB,MAAMU,0BAA0BF,gBAAgB;QAAEF;IAAe;IAEjE,MAAM,CAACK,gBAAgBC,sBAAsB,GAAGb,kBAAkB;QAChEO,gBAAgBC;IAClB;IACA,MAAM,EAAEM,aAAa,EAAE,GAAGV;IAE1B,uEAAuE;IACvED,UAAU;QACRW,cAAcH,wBAAwBI,IAAI,IAAI;IAChD,GAAG;QAACJ;QAAyBG;KAAc;IAE3C,qBACE,MAAChB,UAAUkB,MAAM;QAACC,WAAWZ;;0BAC3B,MAACQ;;oBAAsB;oBACbhB,eAAec,wBAAwBO,MAAM,CAACC,MAAM,EAAET;;;0BAEhE,KAACE;;;AAGP,EAAC"}

package/dist/components/ExportListMenuItem/index.scss

@@ -0,0 +1,52 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .export-list-menu-item {
+    .doc-drawer__toggler {
+      height: 100%;
+      width: 100%;
+      text-align: left;
+    }
+
+
+    // TODO: is any of this css needed?
+    &__subheader,
+    &__header {
+      padding: 0 var(--gutter-h);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--theme-border-color);
+
+      & h2 {
+        margin: calc(var(--gutter-h) * 0.5) 0;
+      }
+    }
+
+    &__options,
+    &__preview {
+      padding: calc(var(--gutter-h) * 0.5) var(--gutter-h);
+    }
+
+    &__preview-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: calc(var(--gutter-h) * 0.5);
+    }
+
+    &__close {
+      @include btn-reset;
+    }
+
+    &__icon {
+      width: 3rem;
+      height: 3rem;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}

package/dist/components/ExportSaveButton/index.d.ts

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

package/dist/components/ExportSaveButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExportSaveButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAiBpC,CAAA"}

package/dist/components/ExportSaveButton/index.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, SaveButton, useTranslation } from '@payloadcms/ui';
+import React from 'react';
+export const ExportSaveButton = ()=>{
+    const { t } = useTranslation();
+    const label = t('general:save');
+    const handleDownload = ()=>{
+        console.log('Download');
+    // TODO: create a post to the download endpoint to stream data back to the client
+    };
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(SaveButton, {
+                label: label
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: handleDownload,
+                size: "medium",
+                type: "button",
+                children: "Download"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/ExportSaveButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExportSaveButton/index.tsx"],"sourcesContent":["'use client'\n\nimport { Button, SaveButton, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nexport const ExportSaveButton: React.FC = () => {\n  const { t } = useTranslation()\n  const label = t('general:save')\n\n  const handleDownload = () => {\n    console.log('Download')\n    // TODO: create a post to the download endpoint to stream data back to the client\n  }\n\n  return (\n    <React.Fragment>\n      <SaveButton label={label}></SaveButton>\n      <Button onClick={handleDownload} size=\"medium\" type=\"button\">\n        Download\n      </Button>\n    </React.Fragment>\n  )\n}\n"],"names":["Button","SaveButton","useTranslation","React","ExportSaveButton","t","label","handleDownload","console","log","Fragment","onClick","size","type"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,iBAAgB;AACnE,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,mBAA6B;IACxC,MAAM,EAAEC,CAAC,EAAE,GAAGH;IACd,MAAMI,QAAQD,EAAE;IAEhB,MAAME,iBAAiB;QACrBC,QAAQC,GAAG,CAAC;IACZ,iFAAiF;IACnF;IAEA,qBACE,MAACN,MAAMO,QAAQ;;0BACb,KAACT;gBAAWK,OAAOA;;0BACnB,KAACN;gBAAOW,SAASJ;gBAAgBK,MAAK;gBAASC,MAAK;0BAAS;;;;AAKnE,EAAC"}

package/dist/components/FieldsToExport/index.d.ts

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

package/dist/components/FieldsToExport/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldsToExport/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAkB1E,eAAO,MAAM,cAAc,EAAE,0BAiF5B,CAAA"}

package/dist/components/FieldsToExport/index.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldLabel, ReactSelect, useConfig, useDocumentInfo, useField, usePreferences } from '@payloadcms/ui';
+import React, { useEffect, useState } from 'react';
+import { useImportExport } from '../ImportExportProvider/index.js';
+import { reduceFields } from './reduceFields.js';
+const baseClass = 'fields-to-export';
+export const FieldsToExport = (props)=>{
+    const { id } = useDocumentInfo();
+    const { path } = props;
+    const { setValue, value } = useField({
+        path
+    });
+    const { value: collectionSlug } = useField({
+        path: 'collectionSlug'
+    });
+    const { getEntityConfig } = useConfig();
+    const { collection } = useImportExport();
+    const { getPreference } = usePreferences();
+    const [displayedValue, setDisplayedValue] = useState([]);
+    const collectionConfig = getEntityConfig({
+        collectionSlug: collectionSlug ?? collection
+    });
+    const fieldOptions = reduceFields({
+        fields: collectionConfig?.fields
+    });
+    useEffect(()=>{
+        if (value && value.length > 0) {
+            setDisplayedValue((prevDisplayedValue)=>{
+                if (prevDisplayedValue.length > 0) {
+                    return prevDisplayedValue;
+                } // Prevent unnecessary updates
+                return value.map((field)=>{
+                    const match = fieldOptions.find((option)=>option.value === field);
+                    return match ? {
+                        ...match,
+                        id: field
+                    } : {
+                        id: field,
+                        label: field,
+                        value: field
+                    };
+                });
+            });
+        }
+    }, [
+        value,
+        fieldOptions
+    ]);
+    useEffect(()=>{
+        if (id || !collectionSlug) {
+            return;
+        }
+        const doAsync = async ()=>{
+            const currentPreferences = await getPreference(`${collectionSlug}-list`);
+            const columns = currentPreferences?.columns?.filter((a)=>a.active).map((b)=>b.accessor);
+            setValue(columns ?? collectionConfig?.admin?.defaultColumns ?? []);
+        };
+        void doAsync();
+    }, [
+        getPreference,
+        collection,
+        setValue,
+        collectionSlug,
+        id,
+        collectionConfig?.admin?.defaultColumns
+    ]);
+    const onChange = (options)=>{
+        if (!options) {
+            setValue([]);
+            return;
+        }
+        const updatedValue = options?.map((option)=>typeof option === 'object' ? option.value : option);
+        setValue(updatedValue);
+        setDisplayedValue(options);
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsx(FieldLabel, {
+                label: "Columns to Export"
+            }),
+            /*#__PURE__*/ _jsx(ReactSelect, {
+                className: baseClass,
+                disabled: props.readOnly,
+                getOptionValue: (option)=>String(option.value),
+                isClearable: true,
+                isMulti: true,
+                isSortable: true,
+                // @ts-expect-error react select option
+                onChange: onChange,
+                options: fieldOptions,
+                value: displayedValue
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/FieldsToExport/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FieldsToExport/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ListPreferences, SelectFieldClientComponent } from 'payload'\nimport type { ReactNode } from 'react'\n\nimport {\n  FieldLabel,\n  ReactSelect,\n  useConfig,\n  useDocumentInfo,\n  useField,\n  usePreferences,\n} from '@payloadcms/ui'\nimport React, { useEffect, useState } from 'react'\n\nimport { useImportExport } from '../ImportExportProvider/index.js'\nimport { reduceFields } from './reduceFields.js'\n\nconst baseClass = 'fields-to-export'\n\nexport const FieldsToExport: SelectFieldClientComponent = (props) => {\n  const { id } = useDocumentInfo()\n  const { path } = props\n  const { setValue, value } = useField<string[]>({ path })\n  const { value: collectionSlug } = useField<string>({ path: 'collectionSlug' })\n  const { getEntityConfig } = useConfig()\n  const { collection } = useImportExport()\n  const { getPreference } = usePreferences()\n  const [displayedValue, setDisplayedValue] = useState<\n    { id: string; label: ReactNode; value: string }[]\n  >([])\n\n  const collectionConfig = getEntityConfig({ collectionSlug: collectionSlug ?? collection })\n  const fieldOptions = reduceFields({ fields: collectionConfig?.fields })\n\n  useEffect(() => {\n    if (value && value.length > 0) {\n      setDisplayedValue((prevDisplayedValue) => {\n        if (prevDisplayedValue.length > 0) {\n          return prevDisplayedValue\n        } // Prevent unnecessary updates\n\n        return value.map((field) => {\n          const match = fieldOptions.find((option) => option.value === field)\n          return match ? { ...match, id: field } : { id: field, label: field, value: field }\n        })\n      })\n    }\n  }, [value, fieldOptions])\n\n  useEffect(() => {\n    if (id || !collectionSlug) {\n      return\n    }\n    const doAsync = async () => {\n      const currentPreferences = await getPreference<{\n        columns: ListPreferences['columns']\n      }>(`${collectionSlug}-list`)\n\n      const columns = currentPreferences?.columns?.filter((a) => a.active).map((b) => b.accessor)\n      setValue(columns ?? collectionConfig?.admin?.defaultColumns ?? [])\n    }\n\n    void doAsync()\n  }, [\n    getPreference,\n    collection,\n    setValue,\n    collectionSlug,\n    id,\n    collectionConfig?.admin?.defaultColumns,\n  ])\n  const onChange = (options: { id: string; label: ReactNode; value: string }[]) => {\n    if (!options) {\n      setValue([])\n      return\n    }\n    const updatedValue = options?.map((option) =>\n      typeof option === 'object' ? option.value : option,\n    )\n    setValue(updatedValue)\n    setDisplayedValue(options)\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label=\"Columns to Export\" />\n      <ReactSelect\n        className={baseClass}\n        disabled={props.readOnly}\n        getOptionValue={(option) => String(option.value)}\n        isClearable={true}\n        isMulti={true}\n        isSortable={true}\n        // @ts-expect-error react select option\n        onChange={onChange}\n        options={fieldOptions}\n        value={displayedValue}\n      />\n    </div>\n  )\n}\n"],"names":["FieldLabel","ReactSelect","useConfig","useDocumentInfo","useField","usePreferences","React","useEffect","useState","useImportExport","reduceFields","baseClass","FieldsToExport","props","id","path","setValue","value","collectionSlug","getEntityConfig","collection","getPreference","displayedValue","setDisplayedValue","collectionConfig","fieldOptions","fields","length","prevDisplayedValue","map","field","match","find","option","label","doAsync","currentPreferences","columns","filter","a","active","b","accessor","admin","defaultColumns","onChange","options","updatedValue","div","className","disabled","readOnly","getOptionValue","String","isClearable","isMulti","isSortable"],"mappings":"AAAA;;AAKA,SACEA,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,eAAe,EACfC,QAAQ,EACRC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAElD,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,YAAY,QAAQ,oBAAmB;AAEhD,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAA6C,CAACC;IACzD,MAAM,EAAEC,EAAE,EAAE,GAAGX;IACf,MAAM,EAAEY,IAAI,EAAE,GAAGF;IACjB,MAAM,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAGb,SAAmB;QAAEW;IAAK;IACtD,MAAM,EAAEE,OAAOC,cAAc,EAAE,GAAGd,SAAiB;QAAEW,MAAM;IAAiB;IAC5E,MAAM,EAAEI,eAAe,EAAE,GAAGjB;IAC5B,MAAM,EAAEkB,UAAU,EAAE,GAAGX;IACvB,MAAM,EAAEY,aAAa,EAAE,GAAGhB;IAC1B,MAAM,CAACiB,gBAAgBC,kBAAkB,GAAGf,SAE1C,EAAE;IAEJ,MAAMgB,mBAAmBL,gBAAgB;QAAED,gBAAgBA,kBAAkBE;IAAW;IACxF,MAAMK,eAAef,aAAa;QAAEgB,QAAQF,kBAAkBE;IAAO;IAErEnB,UAAU;QACR,IAAIU,SAASA,MAAMU,MAAM,GAAG,GAAG;YAC7BJ,kBAAkB,CAACK;gBACjB,IAAIA,mBAAmBD,MAAM,GAAG,GAAG;oBACjC,OAAOC;gBACT,EAAE,8BAA8B;gBAEhC,OAAOX,MAAMY,GAAG,CAAC,CAACC;oBAChB,MAAMC,QAAQN,aAAaO,IAAI,CAAC,CAACC,SAAWA,OAAOhB,KAAK,KAAKa;oBAC7D,OAAOC,QAAQ;wBAAE,GAAGA,KAAK;wBAAEjB,IAAIgB;oBAAM,IAAI;wBAAEhB,IAAIgB;wBAAOI,OAAOJ;wBAAOb,OAAOa;oBAAM;gBACnF;YACF;QACF;IACF,GAAG;QAACb;QAAOQ;KAAa;IAExBlB,UAAU;QACR,IAAIO,MAAM,CAACI,gBAAgB;YACzB;QACF;QACA,MAAMiB,UAAU;YACd,MAAMC,qBAAqB,MAAMf,cAE9B,GAAGH,eAAe,KAAK,CAAC;YAE3B,MAAMmB,UAAUD,oBAAoBC,SAASC,OAAO,CAACC,IAAMA,EAAEC,MAAM,EAAEX,IAAI,CAACY,IAAMA,EAAEC,QAAQ;YAC1F1B,SAASqB,WAAWb,kBAAkBmB,OAAOC,kBAAkB,EAAE;QACnE;QAEA,KAAKT;IACP,GAAG;QACDd;QACAD;QACAJ;QACAE;QACAJ;QACAU,kBAAkBmB,OAAOC;KAC1B;IACD,MAAMC,WAAW,CAACC;QAChB,IAAI,CAACA,SAAS;YACZ9B,SAAS,EAAE;YACX;QACF;QACA,MAAM+B,eAAeD,SAASjB,IAAI,CAACI,SACjC,OAAOA,WAAW,WAAWA,OAAOhB,KAAK,GAAGgB;QAE9CjB,SAAS+B;QACTxB,kBAAkBuB;IACpB;IAEA,qBACE,MAACE;QAAIC,WAAWtC;;0BACd,KAACX;gBAAWkC,OAAM;;0BAClB,KAACjC;gBACCgD,WAAWtC;gBACXuC,UAAUrC,MAAMsC,QAAQ;gBACxBC,gBAAgB,CAACnB,SAAWoB,OAAOpB,OAAOhB,KAAK;gBAC/CqC,aAAa;gBACbC,SAAS;gBACTC,YAAY;gBACZ,uCAAuC;gBACvCX,UAAUA;gBACVC,SAASrB;gBACTR,OAAOK;;;;AAIf,EAAC"}

package/dist/components/FieldsToExport/reduceFields.d.ts

@@ -0,0 +1,12 @@
+import type { ClientField } from 'payload';
+import React from 'react';
+export declare const reduceFields: ({ fields, labelPrefix, path, }: {
+    fields: ClientField[];
+    labelPrefix?: React.ReactNode;
+    path?: string;
+}) => {
+    id: string;
+    label: React.ReactNode;
+    value: string;
+}[];
+//# sourceMappingURL=reduceFields.d.ts.map

package/dist/components/FieldsToExport/reduceFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduceFields.d.ts","sourceRoot":"","sources":["../../../src/components/FieldsToExport/reduceFields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAyCvC,eAAO,MAAM,YAAY,mCAItB;IACD,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,KAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EA0DxD,CAAA"}

package/dist/components/FieldsToExport/reduceFields.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldAffectsData, fieldHasSubFields } from 'payload/shared';
+import React, { Fragment } from 'react';
+const createNestedClientFieldPath = (parentPath, field)=>{
+    if (parentPath) {
+        if (fieldAffectsData(field)) {
+            return `${parentPath}.${field.name}`;
+        }
+        return parentPath;
+    }
+    if (fieldAffectsData(field)) {
+        return field.name;
+    }
+    return '';
+};
+const combineLabel = ({ field, prefix })=>{
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            prefix ? /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            display: 'inline-block'
+                        },
+                        children: prefix
+                    }),
+                    ' > '
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    display: 'inline-block'
+                },
+                children: 'label' in field && typeof field.label === 'string' ? field.label : ('name' in field && field.name) ?? 'unnamed field'
+            })
+        ]
+    });
+};
+export const reduceFields = ({ fields, labelPrefix = null, path = '' })=>{
+    if (!fields) {
+        return [];
+    }
+    return fields.reduce((fieldsToUse, field)=>{
+        // escape for a variety of reasons, include ui fields as they have `name`.
+        if (field.type === 'ui') {
+            return fieldsToUse;
+        }
+        if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
+            return [
+                ...fieldsToUse,
+                ...reduceFields({
+                    fields: field.fields,
+                    labelPrefix: combineLabel({
+                        field,
+                        prefix: labelPrefix
+                    }),
+                    path: createNestedClientFieldPath(path, field)
+                })
+            ];
+        }
+        if (field.type === 'tabs' && 'tabs' in field) {
+            return [
+                ...fieldsToUse,
+                ...field.tabs.reduce((tabFields, tab)=>{
+                    if ('fields' in tab) {
+                        const isNamedTab = 'name' in tab && tab.name;
+                        return [
+                            ...tabFields,
+                            ...reduceFields({
+                                fields: tab.fields,
+                                labelPrefix,
+                                path: isNamedTab ? createNestedClientFieldPath(path, field) : path
+                            })
+                        ];
+                    }
+                    return tabFields;
+                }, [])
+            ];
+        }
+        const val = createNestedClientFieldPath(path, field);
+        const formattedField = {
+            id: val,
+            label: combineLabel({
+                field,
+                prefix: labelPrefix
+            }),
+            value: val
+        };
+        return [
+            ...fieldsToUse,
+            formattedField
+        ];
+    }, []);
+};
+
+//# sourceMappingURL=reduceFields.js.map

package/dist/components/FieldsToExport/reduceFields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FieldsToExport/reduceFields.tsx"],"sourcesContent":["import type { ClientField } from 'payload'\n\nimport { fieldAffectsData, fieldHasSubFields } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nconst createNestedClientFieldPath = (parentPath: string, field: ClientField): string => {\n  if (parentPath) {\n    if (fieldAffectsData(field)) {\n      return `${parentPath}.${field.name}`\n    }\n    return parentPath\n  }\n\n  if (fieldAffectsData(field)) {\n    return field.name\n  }\n\n  return ''\n}\n\nconst combineLabel = ({\n  field,\n  prefix,\n}: {\n  field: ClientField\n  prefix?: React.ReactNode\n}): React.ReactNode => {\n  return (\n    <Fragment>\n      {prefix ? (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      ) : null}\n      <span style={{ display: 'inline-block' }}>\n        {'label' in field && typeof field.label === 'string'\n          ? field.label\n          : (('name' in field && field.name) ?? 'unnamed field')}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const reduceFields = ({\n  fields,\n  labelPrefix = null,\n  path = '',\n}: {\n  fields: ClientField[]\n  labelPrefix?: React.ReactNode\n  path?: string\n}): { id: string; label: React.ReactNode; value: string }[] => {\n  if (!fields) {\n    return []\n  }\n\n  return fields.reduce<{ id: string; label: React.ReactNode; value: string }[]>(\n    (fieldsToUse, field) => {\n      // escape for a variety of reasons, include ui fields as they have `name`.\n      if (field.type === 'ui') {\n        return fieldsToUse\n      }\n\n      if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n        return [\n          ...fieldsToUse,\n          ...reduceFields({\n            fields: field.fields,\n            labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n            path: createNestedClientFieldPath(path, field),\n          }),\n        ]\n      }\n\n      if (field.type === 'tabs' && 'tabs' in field) {\n        return [\n          ...fieldsToUse,\n          ...field.tabs.reduce<{ id: string; label: React.ReactNode; value: string }[]>(\n            (tabFields, tab) => {\n              if ('fields' in tab) {\n                const isNamedTab = 'name' in tab && tab.name\n                return [\n                  ...tabFields,\n                  ...reduceFields({\n                    fields: tab.fields,\n                    labelPrefix,\n                    path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n                  }),\n                ]\n              }\n              return tabFields\n            },\n            [],\n          ),\n        ]\n      }\n\n      const val = createNestedClientFieldPath(path, field)\n\n      const formattedField = {\n        id: val,\n        label: combineLabel({ field, prefix: labelPrefix }),\n        value: val,\n      }\n\n      return [...fieldsToUse, formattedField]\n    },\n    [],\n  )\n}\n"],"names":["fieldAffectsData","fieldHasSubFields","React","Fragment","createNestedClientFieldPath","parentPath","field","name","combineLabel","prefix","span","style","display","label","reduceFields","fields","labelPrefix","path","reduce","fieldsToUse","type","tabs","tabFields","tab","isNamedTab","val","formattedField","id","value"],"mappings":";AAEA,SAASA,gBAAgB,EAAEC,iBAAiB,QAAQ,iBAAgB;AACpE,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,MAAMC,8BAA8B,CAACC,YAAoBC;IACvD,IAAID,YAAY;QACd,IAAIL,iBAAiBM,QAAQ;YAC3B,OAAO,GAAGD,WAAW,CAAC,EAAEC,MAAMC,IAAI,EAAE;QACtC;QACA,OAAOF;IACT;IAEA,IAAIL,iBAAiBM,QAAQ;QAC3B,OAAOA,MAAMC,IAAI;IACnB;IAEA,OAAO;AACT;AAEA,MAAMC,eAAe,CAAC,EACpBF,KAAK,EACLG,MAAM,EAIP;IACC,qBACE,MAACN;;YACEM,uBACC,MAACN;;kCACC,KAACO;wBAAKC,OAAO;4BAAEC,SAAS;wBAAe;kCAAIH;;oBAC1C;;iBAED;0BACJ,KAACC;gBAAKC,OAAO;oBAAEC,SAAS;gBAAe;0BACpC,WAAWN,SAAS,OAAOA,MAAMO,KAAK,KAAK,WACxCP,MAAMO,KAAK,GACV,AAAC,CAAA,UAAUP,SAASA,MAAMC,IAAI,AAAD,KAAM;;;;AAIhD;AAEA,OAAO,MAAMO,eAAe,CAAC,EAC3BC,MAAM,EACNC,cAAc,IAAI,EAClBC,OAAO,EAAE,EAKV;IACC,IAAI,CAACF,QAAQ;QACX,OAAO,EAAE;IACX;IAEA,OAAOA,OAAOG,MAAM,CAClB,CAACC,aAAab;QACZ,0EAA0E;QAC1E,IAAIA,MAAMc,IAAI,KAAK,MAAM;YACvB,OAAOD;QACT;QAEA,IAAI,CAAEb,CAAAA,MAAMc,IAAI,KAAK,WAAWd,MAAMc,IAAI,KAAK,QAAO,KAAMnB,kBAAkBK,QAAQ;YACpF,OAAO;mBACFa;mBACAL,aAAa;oBACdC,QAAQT,MAAMS,MAAM;oBACpBC,aAAaR,aAAa;wBAAEF;wBAAOG,QAAQO;oBAAY;oBACvDC,MAAMb,4BAA4Ba,MAAMX;gBAC1C;aACD;QACH;QAEA,IAAIA,MAAMc,IAAI,KAAK,UAAU,UAAUd,OAAO;YAC5C,OAAO;mBACFa;mBACAb,MAAMe,IAAI,CAACH,MAAM,CAClB,CAACI,WAAWC;oBACV,IAAI,YAAYA,KAAK;wBACnB,MAAMC,aAAa,UAAUD,OAAOA,IAAIhB,IAAI;wBAC5C,OAAO;+BACFe;+BACAR,aAAa;gCACdC,QAAQQ,IAAIR,MAAM;gCAClBC;gCACAC,MAAMO,aAAapB,4BAA4Ba,MAAMX,SAASW;4BAChE;yBACD;oBACH;oBACA,OAAOK;gBACT,GACA,EAAE;aAEL;QACH;QAEA,MAAMG,MAAMrB,4BAA4Ba,MAAMX;QAE9C,MAAMoB,iBAAiB;YACrBC,IAAIF;YACJZ,OAAOL,aAAa;gBAAEF;gBAAOG,QAAQO;YAAY;YACjDY,OAAOH;QACT;QAEA,OAAO;eAAIN;YAAaO;SAAe;IACzC,GACA,EAAE;AAEN,EAAC"}

package/dist/components/ImportExportProvider/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type ImportExportContext = {
+    collection: string;
+    setCollection: (collection: string) => void;
+};
+export declare const ImportExportContext: React.Context<ImportExportContext>;
+export declare const ImportExportProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useImportExport: () => ImportExportContext;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImportExportProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImportExportProvider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAAA;AAED,eAAO,MAAM,mBAAmB,oCAA2C,CAAA;AAE3E,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAiBxE,CAAA;AAED,eAAO,MAAM,eAAe,QAAO,mBAAsD,CAAA"}

package/dist/components/ImportExportProvider/index.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback, useContext, useState } from 'react';
+export const ImportExportContext = /*#__PURE__*/ createContext({});
+export const ImportExportProvider = ({ children })=>{
+    const [collection, setCollectionState] = useState('');
+    const setCollection = useCallback((collection)=>{
+        setCollectionState(collection);
+    }, []);
+    return /*#__PURE__*/ _jsx(ImportExportContext.Provider, {
+        value: {
+            collection,
+            setCollection
+        },
+        children: children
+    });
+};
+export const useImportExport = ()=>useContext(ImportExportContext);
+
+//# sourceMappingURL=index.js.map

package/dist/components/ImportExportProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ImportExportProvider/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useCallback, useContext, useState } from 'react'\n\ntype ImportExportContext = {\n  collection: string\n  setCollection: (collection: string) => void\n}\n\nexport const ImportExportContext = createContext({} as ImportExportContext)\n\nexport const ImportExportProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [collection, setCollectionState] = useState<string>('')\n\n  const setCollection = useCallback((collection: string) => {\n    setCollectionState(collection)\n  }, [])\n\n  return (\n    <ImportExportContext.Provider\n      value={{\n        collection,\n        setCollection,\n      }}\n    >\n      {children}\n    </ImportExportContext.Provider>\n  )\n}\n\nexport const useImportExport = (): ImportExportContext => useContext(ImportExportContext)\n"],"names":["React","createContext","useCallback","useContext","useState","ImportExportContext","ImportExportProvider","children","collection","setCollectionState","setCollection","Provider","value","useImportExport"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAO;AAO/E,OAAO,MAAMC,oCAAsBJ,cAAc,CAAC,GAAyB;AAE3E,OAAO,MAAMK,uBAAgE,CAAC,EAAEC,QAAQ,EAAE;IACxF,MAAM,CAACC,YAAYC,mBAAmB,GAAGL,SAAiB;IAE1D,MAAMM,gBAAgBR,YAAY,CAACM;QACjCC,mBAAmBD;IACrB,GAAG,EAAE;IAEL,qBACE,KAACH,oBAAoBM,QAAQ;QAC3BC,OAAO;YACLJ;YACAE;QACF;kBAECH;;AAGP,EAAC;AAED,OAAO,MAAMM,kBAAkB,IAA2BV,WAAWE,qBAAoB"}

package/dist/components/Preview/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+export declare const Preview: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,OAAO,yBA8FnB,CAAA"}

package/dist/components/Preview/index.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, useConfig, useField } from '@payloadcms/ui';
+import { fieldAffectsData } from 'payload/shared';
+import * as qs from 'qs-esm';
+import React from 'react';
+import { useImportExport } from '../ImportExportProvider/index.js';
+import './index.scss';
+const baseClass = 'preview';
+export const Preview = ()=>{
+    const { collection } = useImportExport();
+    const { config } = useConfig();
+    const { value: where } = useField({
+        path: 'where'
+    });
+    const { value: limit } = useField({
+        path: 'limit'
+    });
+    const { value: fields } = useField({
+        path: 'fields'
+    });
+    const { value: sort } = useField({
+        path: 'sort'
+    });
+    const { value: draft } = useField({
+        path: 'draft'
+    });
+    const [dataToRender, setDataToRender] = React.useState([]);
+    const [resultCount, setResultCount] = React.useState('');
+    const [columns, setColumns] = React.useState([]);
+    const collectionSlug = typeof collection === 'string' && collection;
+    const collectionConfig = config.collections.find((collection)=>collection.slug === collectionSlug);
+    React.useEffect(()=>{
+        const fetchData = async ()=>{
+            if (!collectionSlug) {
+                return;
+            }
+            try {
+                const whereQuery = qs.stringify({
+                    depth: 0,
+                    draft,
+                    limit: limit > 10 ? 10 : limit,
+                    sort,
+                    where
+                }, {
+                    addQueryPrefix: true
+                });
+                const response = await fetch(`/api/${collectionSlug}${whereQuery}`, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    method: 'GET'
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    setResultCount(limit && limit < data.totalDocs ? limit : data.totalDocs);
+                    // TODO: check if this data is in the correct format for the table
+                    const filteredFields = collectionConfig?.fields?.filter((field)=>{
+                        if (!fieldAffectsData(field)) {
+                            return false;
+                        }
+                        if (fields?.length > 0) {
+                            return fields.includes(field.name);
+                        }
+                        return true;
+                    }) ?? [];
+                    setColumns(filteredFields.map((field)=>({
+                            accessor: field.name || '',
+                            active: true,
+                            field: field,
+                            Heading: field?.label || field.name,
+                            renderedCells: data.docs.map((doc)=>{
+                                if (!field.name || !doc[field.name]) {
+                                    return null;
+                                }
+                                if (typeof doc[field.name] === 'object') {
+                                    return JSON.stringify(doc[field.name]);
+                                }
+                                return String(doc[field.name]);
+                            })
+                        })));
+                    setDataToRender(data.docs);
+                }
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
+        };
+        void fetchData();
+    }, [
+        collectionConfig?.fields,
+        collectionSlug,
+        draft,
+        fields,
+        limit,
+        sort,
+        where
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        children: "Preview"
+                    }),
+                    resultCount && /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            resultCount,
+                            " total documents"
+                        ]
+                    })
+                ]
+            }),
+            dataToRender && /*#__PURE__*/ _jsx(Table, {
+                columns: columns,
+                data: dataToRender
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map