Import/export settings

The ImportExportSettings component handles backup and restore of application settings as JSON files. It manages:

Export (onExport): callback to generate and download settings JSON.
Import (onImport): callback when end user confirms import.
File parsing (onParseFile): validate and parse uploaded files.
State indicators (isExporting, isImporting): show loading feedback.
Styling (className): optional CSS class.

Import

import { ImportExportSettings } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`onExport`	`function`	none	Required: Callback to trigger settings export
`onImport`	`function`	none	Required: Callback when import is confirmed
`onParseFile`	`function`	none	Required: Parse and validate uploaded file
`isExporting`	`boolean`	`false`	Export in progress
`isImporting`	`boolean`	`false`	Import in progress
`className`	`string`	none	Additional CSS class

Data structure

The SettingsExportData type defines the structure for exported settings:

import type { SettingsExportData } from '@mdk/foundation'

type SettingsExportData = {
  headerControls?: HeaderPreferences
  featureFlags?: Record<string, boolean>
  timestamp?: string
}

Callbacks

`onExport`

Called when end user clicks Export JSON. Generate settings and trigger download:

const handleExport = async () => {
  const data = await api.getSettingsExport()
  downloadJson(data, 'settings-backup.json')
}

`onImport`

Called after end user confirms import. Receives parsed SettingsExportData:

const handleImport = async (data: SettingsExportData) => {
  await api.importSettings(data)
}

`onParseFile`

Validates and parses the uploaded file. Must return a Promise<SettingsExportData>:

const parseFile = async (file: File): Promise<SettingsExportData> => {
  const text = await file.text()
  return JSON.parse(text)
}

Basic usage

import { ImportExportSettings } from '@mdk/foundation'
import type { SettingsExportData } from '@mdk/foundation'

function ImportExportSection() {
  const [isExporting, setIsExporting] = useState(false)
  const [isImporting, setIsImporting] = useState(false)

  const handleExport = async () => {
    setIsExporting(true)
    const data = await api.getSettingsExport()
    downloadJson(data, 'settings-backup.json')
    setIsExporting(false)
  }

  const handleImport = async (data: SettingsExportData) => {
    setIsImporting(true)
    await api.importSettings(data)
    setIsImporting(false)
  }

  const parseFile = async (file: File): Promise<SettingsExportData> => {
    const text = await file.text()
    return JSON.parse(text)
  }

  return (
    <ImportExportSettings
      onExport={handleExport}
      onImport={handleImport}
      onParseFile={parseFile}
      isExporting={isExporting}
      isImporting={isImporting}
    />
  )
}