npm package: @sparrowengg/payloadcms-plugin-import-export
Description: Payload CMS Custom Views for importing and exporting collections
Author: Pranav K S
Latest version: 0.1.9

# Payload CMS Import-Export Plugin

A PayloadCMS plugin providing custom views for importing and exporting collection data as JSON through the admin UI.

## Requirements

Peer dependencies:

```json
"react": "^19.0.0",
"@payloadcms/ui": "^3.33.0"
```

## Installation

```bash
npm install @sparrowengg/payloadcms-plugin-import-export
# or
yarn add @sparrowengg/payloadcms-plugin-import-export
# or
pnpm add @sparrowengg/payloadcms-plugin-import-export
```

## Setup

### 1. Add Server Component Templates

Create `payload/views/Import/index.tsx`:

```typescript
import type { AdminViewServerProps } from 'payload';
import { DefaultTemplate } from '@payloadcms/next/templates';
import { Gutter } from '@payloadcms/ui';
import { redirect } from 'next/navigation';
import { ImportClient } from '@sparrowengg/payloadcms-plugin-import-export';

export default function ImportView({
  initPageResult,
  params,
  searchParams,
}: AdminViewServerProps) {
  const user = initPageResult.req.user;
  if (!user) {
    redirect('/admin/login');
  }

  return (
    <DefaultTemplate
      i18n={initPageResult.req.i18n}
      locale={initPageResult.locale}
      params={params}
      payload={initPageResult.req.payload}
      permissions={initPageResult.permissions}
      searchParams={searchParams}
      user={user}
      visibleEntities={initPageResult.visibleEntities}
    >
      {user.roles.includes('admin') ? ( // Configure based on your access control setup
        <Gutter>
          <h1>Import Collections</h1>
          <ImportClient />
        </Gutter>
      ) : (
        <Gutter>
          <div className="text-center">
            <h1>Insufficient Permissions</h1>
            <p>You don&apos;t have permission to access this dashboard.</p>
          </div>
        </Gutter>
      )}
    </DefaultTemplate>
  );
}
```

Create `payload/views/Export/index.tsx`:

```typescript
import type { AdminViewServerProps } from 'payload';
import { DefaultTemplate } from '@payloadcms/next/templates';
import { Gutter } from '@payloadcms/ui';
import { redirect } from 'next/navigation';
import { ExportClient } from '@sparrowengg/payloadcms-plugin-import-export';

export default function Export({
  initPageResult,
  params,
  searchParams,
  payload
}: AdminViewServerProps) {
  const user = initPageResult.req.user;
  if (!user) {
    redirect('/admin/login');
  }

  return (
    <DefaultTemplate
      i18n={initPageResult.req.i18n}
      locale={initPageResult.locale}
      params={params}
      payload={initPageResult.req.payload}
      permissions={initPageResult.permissions}
      searchParams={searchParams}
      user={user}
      visibleEntities={initPageResult.visibleEntities}
    >
      <Gutter>
        <h1>Export Collections</h1>
        <ExportClient collections={Object.keys(payload.collections)}/>
      </Gutter>
    </DefaultTemplate>
  );
}
```

### 2. Register the Custom Views

Add to your `payload.config.ts`:

```typescript
export default buildConfig({
  admin: {
    components: {
      views: {
        export: {
          Component: '@/payload/views/Export',
          path: '/views/export',
        },
        import: {
          Component: '@/payload/views/Import',
          path: '/views/import',
        },
      },
    },
  },
  // ... rest of your config
});
```

### 3. Setup Tailwind CSS

This plugin uses Tailwind CSS for styling.
Create `payload-tailwind-styles.css` and import it in `app/(payload)/layout.tsx`:

```css
/* Define the Tailwind layers in the correct order */
@layer theme,
base,
components,
utilities;

/* Import the Tailwind theme styles */
@import 'tailwindcss/theme.css' layer(theme);

/* Skip the preflight reset to avoid conflicts with Payload's admin styles */
/* @import 'tailwindcss/preflight.css' layer(base); */

/* Import Tailwind utilities */
@import 'tailwindcss/utilities.css' layer(utilities);

/* Support Payload's dark mode toggle by adding a custom variant */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Reset styles that break Payload's admin styles */
.table {
  display: block;
}

/* Include the plugins styles in Tailwind scanning */
/* Give appropriate relative path to node modules */
@source '../../node_modules/@sparrowengg';
```

### 4. Regenerate Payload's Importmap

```bash
pnpm payload generate:importmap
```

### 5. Allow id field overwriting in postgres

Add to your `payload.config.ts`'s postgresAdapter config:

```typescript
db: postgresAdapter({
    // Your code...
    allowIDOnCreate: true, // Add this
}),
```

### 6. Access the Views

Navigate to:

- `/admin/views/import` - Import collection data
- `/admin/views/export` - Export collection data

## License

MIT