### Install OneSchema Angular SDK

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-angular/projects/oneschema/README.md

Install the necessary OneSchema packages for Angular using npm. This includes the core SDK and the importer module.

```bash
npm i --save @oneschema/angular @oneschema/importer
```

--------------------------------

### Install OneSchema Vue SDK

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-vue/README.md

Install the required package using npm to enable OneSchema functionality in your Vue project.

```bash
npm i --save @oneschema/vue
```

--------------------------------

### Install OneSchema FileFeeds SDK

Source: https://github.com/oneschema/sdk/blob/main/packages/filefeeds/README.md

Methods for adding the OneSchema FileFeeds library to your project via npm or a direct script tag inclusion.

```bash
npm i --save @oneschema/filefeeds
```

```html
<script src="https://d3ah8o189k1llu.cloudfront.net/oneschema-filefeeds-0.4.latest.min.js"></script>
```

--------------------------------

### Install OneSchema Importer SDK

Source: https://github.com/oneschema/sdk/blob/main/packages/importer/README.md

Methods for adding the OneSchema Importer library to your project. You can use a package manager like npm or include it directly via a script tag in your HTML.

```bash
npm i --save @oneschema/importer
```

```html
<script src="https://d3ah8o189k1llu.cloudfront.net/oneschema-importer-0.3.latest.min.js"></script>
```

--------------------------------

### Install OneSchema React Package

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-react/README.md

Installs the OneSchema React package using npm. This is the first step to integrating the OneSchema Importer into your React application.

```bash
npm i --save @oneschema/react
```

--------------------------------

### Install OneSchema FileFeeds React Package

Source: https://github.com/oneschema/sdk/blob/main/packages/filefeeds-react/README.md

Installs the @oneschema/filefeeds-react package using npm. This is the first step to integrate OneSchema FileFeeds into a React application.

```bash
npm i --save @oneschema/filefeeds-react
```

--------------------------------

### Apply CSS Styles to OneSchema Iframe

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-angular/projects/oneschema/README.md

Style the OneSchema iframe using CSS. Styles can be applied globally, to a specific component, or directly via the module configuration. This example shows global CSS for full viewport coverage.

```css
.oneschema-iframe {
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
```

--------------------------------

### Initialize and Launch OneSchema FileFeeds

Source: https://github.com/oneschema/sdk/blob/main/packages/filefeeds/README.md

Demonstrates how to import the library, initialize the instance with a user JWT, and set up event listeners for lifecycle hooks like initialization and saving.

```javascript
import oneschemaFileFeeds from "@oneschema/filefeeds"

const fileFeeds = oneschemaFileFeeds({
  userJwt: "YOUR_USER_JWT",
  devMode: true,
  className: "oneschema-filefeeds",
})

fileFeeds.launch()

fileFeeds.on("init-failed", (data) => {
  // handle failures.
})

fileFeeds.on("init-succeeded", (data) => {
  // handle embedding session updates.
})

fileFeeds.on("saved", (data) => {
  // handle FileFeeds transforms being saved.
})
```

--------------------------------

### Initialize and Launch OneSchema Importer (JavaScript)

Source: https://context7.com/oneschema/sdk/llms.txt

Demonstrates how to initialize and launch the OneSchema Importer using the core JavaScript library. It covers configuration options for clientId, templateKey, userJwt, and customization overrides. It also shows how to handle import success, cancellation, errors, and launch status, along with methods to close the importer.

```javascript
import oneschemaImporter from "@oneschema/importer"

// Initialize the importer with configuration
const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "contacts_template",
  userJwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  devMode: true,
  className: "oneschema-importer",
  styles: {
    position: "fixed",
    top: "0",
    left: "0",
    width: "100vw",
    height: "100vh",
    zIndex: "10000"
  },
  importConfig: { type: "local" },
  customizationOverrides: {
    fileSizeLimit: 50000000,
    skipHeaderRow: "detect",
    mappingStrategy: ["fuzzy", "historical_user"],
    autofixAfterMapping: true
  }
})

// Launch the importer
const status = importer.launch()
console.log("Launch status:", status) // { success: true }

// Handle successful import - data contains all validated rows
importer.on("success", (data) => {
  console.log("Imported rows:", data.rows)
  console.log("Row count:", data.count)
  // Process the cleaned data
  data.rows.forEach(row => {
    console.log(`Contact: ${row.first_name} ${row.last_name}, Email: ${row.email}`)
  })
})

// Handle user cancellation
importer.on("cancel", () => {
  console.log("User cancelled the import")
})

// Handle errors during import
importer.on("error", (error) => {
  console.error("Import error:", error.message)
  console.error("Severity:", error.severity) // "error" or "fatal"
})

// Handle launch status
importer.on("launched", (result) => {
  if (result.success) {
    console.log("Importer ready, session token:", result.sessionToken)
    console.log("Embed ID:", result.embedId)
  } else {
    console.error("Launch failed:", result.error)
  }
})

// Close the importer when done
importer.close()

// Clean up completely (removes iframe and listeners)
importer.close(true)
```

--------------------------------

### Initialize and Launch OneSchema Importer

Source: https://github.com/oneschema/sdk/blob/main/packages/importer/README.md

Configures the OneSchema importer instance with client credentials and template keys. It demonstrates how to launch the importer and attach event listeners for success, cancellation, and error states.

```javascript
import oneschemaImporter from "@oneschema/importer"

const importer = oneschemaImporter({
  clientID: 'YOUR_CLIENT_ID',
  templateKey: 'YOUR_TEMPLATE_KEY',
  userJwt: 'YOUR_USER_JWT',
  importConfig: { type: "local" },
  devMode: true,
  className: 'oneschema-importer',
})

importer.launch()

importer.on("success", (data) => {
  // handle success
})

importer.on("cancel", () => {
  // handle cancel
})

importer.on("error", (message) => {
  // handle error
})
```

--------------------------------

### Initialize and Manage OneSchema FileFeeds

Source: https://context7.com/oneschema/sdk/llms.txt

This snippet demonstrates how to initialize the FileFeeds instance with configuration options, launch the interface, and attach event listeners for lifecycle and session management. It also covers methods for showing, hiding, and destroying the instance.

```javascript
import oneschemaFileFeeds from "@oneschema/filefeeds"

const fileFeeds = oneschemaFileFeeds({
  userJwt: "YOUR_USER_JWT",
  devMode: true,
  className: "oneschema-filefeeds",
  styles: {
    position: "fixed",
    top: "0",
    left: "0",
    width: "100vw",
    height: "100vh",
    zIndex: "10000"
  },
  saveSession: true,
  customizationKey: "default",
  customizationOverrides: {
    primaryColor: "#6366F1",
    fileSizeLimit: 50000000
  }
})

fileFeeds.launch({ userJwt: "YOUR_USER_JWT" })

fileFeeds.on("init-started", () => console.log("FileFeeds initialization started"))
fileFeeds.on("init-succeeded", (data) => console.log("FileFeeds ready!", data))
fileFeeds.on("init-failed", (data) => console.error("Initialization failed:", data.error.message))
fileFeeds.on("saved", (data) => console.log("Transforms saved:", data))
fileFeeds.on("cancelled", () => console.log("Editing cancelled"))
fileFeeds.on("shown", () => console.log("Iframe shown"))
fileFeeds.on("hidden", () => console.log("Iframe hidden"))
fileFeeds.on("session-invalidated", (data) => console.warn("Session invalidated:", data.error.message))

fileFeeds.hide()
fileFeeds.launch()
fileFeeds.destroy()
```

--------------------------------

### Launch OneSchema Importer and Handle Events

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-angular/projects/oneschema/README.md

Implement a component to launch the OneSchema importer and subscribe to its events (success, error, cancel). This involves using the OneSchemaService to manage the importer's lifecycle and callbacks.

```javascript
import { Component, OnDestroy } from '@angular/core'
import { OneSchemaService } from './oneschema.service'

@Component({
  selector: 'oneschema-button',
  template: `<button (click)="launch()">Open OneSchema</button>`,
  styles: [],
})
export class OneSchemaButton implements OnDestroy {
  constructor(public oneschema: OneSchemaService) {
    this.oneschema.on('success', this.onSuccess)
    this.oneschema.on('error', this.onError)
    this.oneschema.on('cancel', this.onCancel)
  }

  launch() {
    this.oneschema.launch()
  }

  onSuccess(data: any) {
    // handle success
  }

  onError(error: any) {
    // handle error
  }

  onCancel() {
    // handle cancel
  }

  ngOnDestroy() {
    this.oneschema.off('success', this.onSuccess)
    this.oneschema.off('error', this.onError)
    this.oneschema.off('cancel', this.onCancel)
  }
}
```

--------------------------------

### Manage OneSchema Importer Sessions

Source: https://context7.com/oneschema/sdk/llms.txt

Demonstrates how to enable session persistence in the OneSchema Importer to allow users to resume previous import sessions. It covers initializing the importer with session saving enabled, handling the 'launched' event to capture session tokens, and resuming sessions via the API.

```javascript
import oneschemaImporter from "@oneschema/importer"

// Enable session saving for automatic resume capability
const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "orders_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: { type: "local" },
  saveSession: true // Saves session to localStorage
})

// Launch with a specific session token (for API-created sessions)
const status = importer.launch({
  sessionToken: "existing_session_token_from_api"
})

// Handle launched event to get session information
importer.on("launched", (result) => {
  if (result.success) {
    // Store session token for later use
    const sessionToken = result.sessionToken
    const embedId = result.embedId

    console.log("Session token:", sessionToken)
    console.log("Embed ID:", embedId)

    // You can save this to your backend to track import sessions
    saveSessionToBackend(embedId, sessionToken)
  }
})

// To resume a session later:
const resumeImporter = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  devMode: true
})

// Resume with the saved session token
resumeImporter.launch({
  sessionToken: savedSessionToken
})
```

--------------------------------

### Implement OneSchema Importer with Composition API

Source: https://context7.com/oneschema/sdk/llms.txt

Shows how to use the useOneSchemaImporter hook to launch the importer, handle success/error/cancel events, and ensure proper cleanup when the component is unmounted.

```typescript
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { useOneSchemaImporter } from '@oneschema/vue'

interface InventoryItem {
  sku: string
  name: string
  quantity: number
  location: string
}

const importer = useOneSchemaImporter()
const isImporting = ref(false)
const importedItems = ref<InventoryItem[]>([])
const statusMessage = ref('')

const startImport = () => {
  isImporting.value = true
  statusMessage.value = ''

  importer.launch({
    templateKey: 'inventory_template',
    customizationOverrides: {
      uploadPaneHeaderText: 'Upload Inventory Data',
      importMaxRowLimit: 10000
    }
  })
}

const handleSuccess = (data: { rows: InventoryItem[], count: number }) => {
  isImporting.value = false
  importedItems.value = data.rows
  statusMessage.value = `Successfully imported ${data.count} inventory items`
}

const handleError = (error: { message: string }) => {
  isImporting.value = false
  statusMessage.value = `Error: ${error.message}`
}

const handleCancel = () => {
  isImporting.value = false
  statusMessage.value = 'Import cancelled'
}

importer.on('success', handleSuccess)
importer.on('error', handleError)
importer.on('cancel', handleCancel)

onUnmounted(() => {
  importer.removeAllListeners()
  importer.close(true)
})
</script>
```

--------------------------------

### Customize Import Experience with OneSchema Importer

Source: https://context7.com/oneschema/sdk/llms.txt

Shows how to customize the look, feel, and behavior of the import experience using the OneSchema Importer SDK. This includes UI elements, validation behavior, branding, and text overrides. It requires the @oneschema/importer package and potentially a preset customization key.

```javascript
import oneschemaImporter from "@oneschema/importer"

const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "employees_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: { type: "local" },
  customizationKey: "enterprise_theme", // Use a preset customization
  customizationOverrides: {
    // File size and upload settings
    fileSizeLimit: 100000000, // 100MB

    // Header row detection
    skipHeaderRow: "detect", // "always" | "detect" | "never"

    // Column mapping behavior
    mappingStrategy: ["exact", "fuzzy", "historical_user"],
    aiSuggestedMappings: ["column", "picklist"],
    includeUnmappedColumns: true,
    oneClickMode: false,

    // Review and validation settings
    autofixAfterMapping: true,
    acceptCodeHookSuggestions: true,
    importErrorUX: "promptIfErrors", // "blockIfErrors" | "promptIfErrors" | "ignoreErrors"
    preventRowDeletion: ["selection"],
    allowEmptyImports: false,
    importMaxRowLimit: 50000,

    // Sidebar configuration
    uploaderShowSidebar: true,
    uploaderSidebarDetails: "required",
    mappingShowSidebar: true,
    mappingSidebarDetails: "all",

    // Branding colors
    primaryColor: "#4F46E5",
    backgroundPrimaryColor: "#FFFFFF",
    headerColor: "#F9FAFB",
    successColor: "#10B981",
    errorColor: "#EF4444",

    // Button styling
    buttonBorderRadius: "8px",
    buttonPrimaryFillColor: "#4F46E5",
    buttonPrimaryTextColor: "#FFFFFF",

    // Modal styling
    modalFullscreen: false,
    modalBorderRadius: "12px",
    hideCloseButton: false,

    // Font customization
    fontFamily: "Inter, sans-serif",
    fontColorPrimary: "#111827",
    fontColorSecondary: "#6B7280",

    // Text overrides
    uploadPaneHeaderText: "Upload Your Data",
    uploaderHeaderText: "Drag and drop your file",
    uploaderSubheaderText: "Supports CSV and Excel files",
    mappingPaneHeaderText: "Map Your Columns",
    cleaningPaneHeaderText: "Review and Fix Issues",
    cleaningConfirmButtonText: "Complete Import",

    // Education widgets
    showUploadEducationWidget: true,
    uploadEducationWidgetMessage: "Upload CSV or Excel files up to 100MB",
    uploadEducationWidgetAutoOpen: true
  }
})

importer.launch()
```

--------------------------------

### Initialize and Use OneSchema Importer via Script Tag

Source: https://context7.com/oneschema/sdk/llms.txt

This snippet shows how to include the OneSchema Importer script and initialize it within an HTML page. It configures the importer with client ID, template key, user JWT, and development mode. It also sets up event listeners for import success, cancellation, and errors, and handles the UI updates for the import button and results display.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Import</title>
  <script src="https://d3ah8o189k1llu.cloudfront.net/oneschema-importer-0.3.latest.min.js"></script>
  <style>
    .oneschema-iframe {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      border: none;
      z-index: 10000;
    }
    .import-btn {
      padding: 12px 24px;
      background: #4F46E5;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
    }
    .import-btn:hover {
      background: #4338CA;
    }
    .import-btn:disabled {
      background: #9CA3AF;
      cursor: not-allowed;
    }
    .results {
      margin-top: 20px;
      padding: 16px;
      background: #F9FAFB;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>Customer Import</h1>
    <button id="import-btn" class="import-btn">Import Customers</button>
    <div id="results" class="results" style="display: none;"></div>
  </div>

  <script>
    // Initialize the importer (available as window.oneschemaImporter)
    const importer = oneschemaImporter({
      clientId: 'YOUR_CLIENT_ID',
      templateKey: 'customers_template',
      userJwt: 'YOUR_USER_JWT',
      devMode: true,
      className: 'oneschema-iframe',
      importConfig: { type: 'local' },
      customizationOverrides: {
        primaryColor: '#4F46E5',
        modalFullscreen: true
      }
    });

    const importBtn = document.getElementById('import-btn');
    const resultsDiv = document.getElementById('results');

    // Handle button click
    importBtn.addEventListener('click', function() {
      importBtn.disabled = true;
      importBtn.textContent = 'Importing...';
      importer.launch();
    });

    // Handle successful import
    importer.on('success', function(data) {
      importBtn.disabled = false;
      importBtn.textContent = 'Import Customers';

      resultsDiv.style.display = 'block';
      resultsDiv.innerHTML = '<h3>Imported ' + data.count + ' customers</h3>' +
        '<table border="1" cellpadding="8">' +
        '<tr><th>Name</th><th>Email</th><th>Company</th></tr>' +
        data.rows.slice(0, 10).map(function(row) {
          return '<tr><td>' + row.name + '</td><td>' + row.email + '</td><td>' + (row.company || '-') + '</td></tr>';
        }).join('') +
        '</table>';
    });

    // Handle cancellation
    importer.on('cancel', function() {
      importBtn.disabled = false;
      importBtn.textContent = 'Import Customers';
    });

    // Handle errors
    importer.on('error', function(error) {
      importBtn.disabled = false;
      importBtn.textContent = 'Import Customers';
      alert('Import error: ' + error.message);
    });
  </script>
</body>
</html>
```

--------------------------------

### Override Template Configuration with OneSchema Importer

Source: https://context7.com/oneschema/sdk/llms.txt

Demonstrates how to override template configurations at runtime using the OneSchema Importer SDK. This includes adding, updating, and removing columns, as well as adding validation webhooks and mapping validations. It requires the @oneschema/importer package.

```javascript
import oneschemaImporter from "@oneschema/importer"

const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "base_contacts_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: { type: "local" },
  templateOverrides: {
    // Add new columns to the template
    columns_to_add: [
      {
        key: "customer_segment",
        label: "Customer Segment",
        data_type: "PICKLIST",
        is_required: true,
        validation_options: {
          picklist_options: [
            { value: "Enterprise", alternative_names: ["corp", "corporate"] },
            { value: "SMB", alternative_names: ["small business"] },
            { value: "Consumer", alternative_names: ["individual", "personal"] }
          ]
        }
      },
      {
        key: "annual_revenue",
        label: "Annual Revenue",
        data_type: "NUMBER",
        validation_options: {
          min_num: 0,
          allow_thousand_separators: true,
          format: "us"
        }
      }
    ],
    // Update existing columns
    columns_to_update: [
      {
        key: "email",
        is_required: true,
        is_unique: true
      },
      {
        key: "phone",
        data_type: "PHONE_NUMBER"
      }
    ],
    // Remove columns from the template
    columns_to_remove: [
      { key: "legacy_id" }
    ],
    // Add validation webhooks
    validation_hooks_to_add: [
      {
        name: "Validate Email Domain",
        url: "https://api.example.com/validate/email",
        column_keys: ["email"],
        hook_type: "column",
        authorization_type: "bearer_user_jwt",
        batch_size: 100
      }
    ],
    // Add mapping validations
    mapping_validations_to_add: [
      {
        type: "required-column-group",
        columns: ["phone", "email"] // At least one must be mapped
      }
    ]
  }
})

importer.launch()
```

--------------------------------

### Configure OneSchema Plugin

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-vue/README.md

Initialize the OneSchema plugin within your Vue application instance by providing your client ID and configuration parameters.

```javascript
import { createOneSchemaImporter } from '@oneschema/vue'

const app = createApp(App)

app.use(
  createOneSchemaImporter({
    clientId: '<CLIENT_ID>',
    ...initParams
  })
)

app.mount('#app')
```

--------------------------------

### Launch OneSchema Importer

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-vue/README.md

Use the useOneSchemaImporter hook to launch the importer and handle success, cancel, and error events within a Vue component.

```vue
<script setup lang="ts">
  import { useOneSchemaImporter } from "@oneschema/vue"

  const importer = useOneSchemaImporter();

  const launchOneSchema = function () {
    importer.launch();

    importer.on('success', (data) => {
      console.log(data);
    });

    importer.on('cancel', () => {
      // TODO: handle cancel
    });

    importer.on('error', (message) => {
      console.log(message);
    });
  };
</script>
<template>
  <button @click="launchOneSchema">Launch embed</button>
</template>
```

--------------------------------

### Configure OneSchema Importer Plugin in Vue 3

Source: https://context7.com/oneschema/sdk/llms.txt

Demonstrates how to register the OneSchema Importer plugin globally in a Vue 3 application using the createOneSchemaImporter function within the main entry file.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { createOneSchemaImporter } from '@oneschema/vue'

const app = createApp(App)

app.use(
  createOneSchemaImporter({
    clientId: 'YOUR_CLIENT_ID',
    templateKey: 'inventory_template',
    userJwt: 'YOUR_USER_JWT',
    devMode: import.meta.env.DEV,
    importConfig: { type: 'local' },
    customizationOverrides: {
      primaryColor: '#8B5CF6'
    }
  })
)

app.mount('#app')
```

--------------------------------

### Configure OneSchema Importer for Webhook Import (JavaScript)

Source: https://context7.com/oneschema/sdk/llms.txt

Shows how to configure the OneSchema Importer to send validated data to a webhook endpoint. This is useful for server-side processing of large datasets. It includes setting up the import type, webhook key, and event listeners for import status.

```javascript
import oneschemaImporter from "@oneschema/importer"

const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "orders_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: {
    type: "webhook",
    key: "orders_webhook_key"
  },
  eventWebhookKeys: ["import_started", "import_completed"]
})

importer.launch()

// For webhook imports, success event contains webhook response info
importer.on("success", (data) => {
  console.log("Event ID:", data.eventId)
  console.log("Webhook responses:", data.responses)
})
```

--------------------------------

### Configure OneSchema Importer for File Upload (JavaScript)

Source: https://context7.com/oneschema/sdk/llms.txt

Illustrates how to configure the OneSchema Importer to upload cleaned data directly to a specified URL. Supports CSV and JSON formats, with options for custom headers and format-specific settings like header style.

```javascript
import oneschemaImporter from "@oneschema/importer"

const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "products_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: {
    type: "file-upload",
    url: "https://api.example.com/upload/products",
    format: "csv",
    headers: {
      "Authorization": "Bearer your-api-token",
      "X-Custom-Header": "custom-value"
    },
    formatOptions: {
      headerStyle: "keys" // Use column keys instead of labels
    }
  }
})

importer.launch()

// For JSON format uploads
const jsonImporter = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "products_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: {
    type: "file-upload",
    url: "https://api.example.com/upload/products",
    format: "json",
    headers: {
      "Authorization": "Bearer your-api-token"
    }
  }
})

```

--------------------------------

### OneSchemaService API

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-angular/projects/oneschema/README.md

Interacting with the OneSchema service to launch the importer and handle lifecycle events.

```APIDOC
## OneSchemaService Methods

### Description
Provides methods to control the importer lifecycle and subscribe to events.

### Methods
- **launch()**: Opens the OneSchema importer interface.
- **on(event, callback)**: Subscribes to events such as 'success', 'error', or 'cancel'.
- **off(event, callback)**: Unsubscribes from specific events.
- **setIframe(element)**: Manually binds an iframe element for inline mode.

### Event Handling Example
this.oneschema.on('success', (data) => { console.log(data); });
this.oneschema.on('error', (err) => { console.error(err); });
```

--------------------------------

### React Component for OneSchema Importer

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-react/README.md

Demonstrates the usage of the OneSchemaImporter React component. It shows how to manage the modal's open state, configure essential props like clientId, userJwt, and templateKey, and handle import results via onSuccess, onCancel, and onError callbacks.

```javascript
import React, { useState } from "react"
import OneSchemaImporter from "@oneschema/react"

function OneSchemaExample() {
  const [isOpen, setIsOpen] = useState(false)

  const handleData = (data) => {
    console.log(data)
  }

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Import</button>

      <OneSchemaImporter
        /* managing state from your application */
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        /* required config values */
        clientId={clientId}
        userJwt={token}
        templateKey={templateKey}
        /* optional config values */
        importConfig={{ type: "local", metadataOnly: false, }}
        devMode={process.env.NODE_ENV !== "production"}
        className="oneschema-importer"
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
        }}
        inline={false}
        /* handling results */
        onSuccess={handleData}
        onCancel={() => console.log("cancelled")}
        onError={(error) => console.log(error)}
      />
    </div>
  )
}
```

--------------------------------

### Configure OneSchema Module in Angular

Source: https://context7.com/oneschema/sdk/llms.txt

Demonstrates how to import and configure the OneSchemaModule within an Angular AppModule. It uses forRoot to pass client credentials, template keys, and UI customization options.

```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { ImportPageComponent } from "./import-page/import-page.component";
import { OneSchemaModule } from "@oneschema/angular";

@NgModule({
  declarations: [AppComponent, ImportPageComponent],
  imports: [
    BrowserModule,
    OneSchemaModule.forRoot({
      clientId: "YOUR_CLIENT_ID",
      templateKey: "products_template",
      userJwt: "YOUR_USER_JWT",
      devMode: true,
      styles: {
        position: "fixed",
        top: "0",
        left: "0",
        width: "100vw",
        height: "100vh",
        zIndex: "10000"
      },
      importConfig: { type: "local" },
      customizationOverrides: {
        primaryColor: "#3B82F6",
        modalFullscreen: true
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

--------------------------------

### Implement OneSchema FileFeeds in React

Source: https://context7.com/oneschema/sdk/llms.txt

A comprehensive React component implementation for embedding OneSchema FileFeeds. It demonstrates managing component state, handling lifecycle events like initialization, saving, and session invalidation, and applying customization overrides.

```jsx
import React, { useState, useCallback } from "react"
import OneSchemaFileFeeds from "@oneschema/filefeeds-react"

function FileFeedManager() {
  const [isOpen, setIsOpen] = useState(false)
  const [sessionId, setSessionId] = useState(null)
  const [status, setStatus] = useState({ type: null, message: "" })
  const [fileFeedInfo, setFileFeedInfo] = useState(null)

  const handleInitSucceed = useCallback((data) => {
    setSessionId(data.sessionToken)
    setFileFeedInfo(data.fileFeed)
    setStatus({
      type: "success",
      message: `Connected to feed: ${data.fileFeed.name}`
    })
  }, [])

  const handleInitFail = useCallback((data) => {
    setStatus({
      type: "error",
      message: `Failed to initialize: ${data.error.message}`
    })
  }, [])

  const handleSave = useCallback((data) => {
    setStatus({
      type: "success",
      message: `Transforms saved! ${data.errorsCount} errors remaining.`
    })
    console.log("Errors by file:", data.errorCountPerSampleFile)
  }, [])

  const handleCancel = useCallback(() => {
    setStatus({ type: "info", message: "Editing cancelled" })
  }, [])

  const handleSessionInvalidate = useCallback((data) => {
    setStatus({
      type: "warning",
      message: `Session expired: ${data.error.message}`
    })
    setSessionId(null)
  }, [])

  return (
    <div className="filefeed-manager">
      <h1>File Feed Configuration</h1>
      <div className="controls">
        <button onClick={() => setIsOpen(true)} disabled={isOpen}>
          {isOpen ? "Editing..." : "Configure File Feed"}
        </button>
        {sessionId && (
          <span className="session-info">
            Session: {sessionId.substring(0, 8)}...
          </span>
        )}
      </div>
      {status.message && (
        <div className={`status status-${status.type}`}>
          {status.message}
        </div>
      )}
      {fileFeedInfo && (
        <div className="feed-info">
          <h3>Current Feed</h3>
          <p>Name: {fileFeedInfo.name}</p>
          <p>ID: {fileFeedInfo.id}</p>
        </div>
      )}
      <OneSchemaFileFeeds
        isOpen={isOpen}
        userJwt={userToken}
        sessionToken={sessionId}
        devMode={process.env.NODE_ENV !== "production"}
        baseUrl="https://embed.oneschema.co"
        inline={true}
        saveSession={true}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
          zIndex: 1000
        }}
        className="filefeeds-modal"
        customizationOverrides={{
          primaryColor: "#8B5CF6",
          fileSizeLimit: 100000000
        }}
        onRequestClose={() => setIsOpen(false)}
        onInitStart={() => setStatus({ type: "info", message: "Initializing..." })}
        onInitSucceed={handleInitSucceed}
        onInitFail={handleInitFail}
        onSave={handleSave}
        onCancel={handleCancel}
        onSessionInvalidate={handleSessionInvalidate}
        onShow={() => console.log("FileFeeds shown")}
        onHide={() => console.log("FileFeeds hidden")}
        onDestroy={() => console.log("FileFeeds destroyed")}
        onPageLoad={() => console.log("FileFeeds page loaded")}
      />
    </div>
  )
}

export default FileFeedManager
```

--------------------------------

### React Component for OneSchema FileFeeds Integration

Source: https://github.com/oneschema/sdk/blob/main/packages/filefeeds-react/README.md

Demonstrates how to use the OneSchemaFileFeeds React component. It shows how to manage the component's visibility, pass required configuration like userJwt, and handle initialization and save events. The component allows embedding an iframe for creating and editing OneSchema FileFeeds.

```javascript
import React, { useState } from "react"
import OneSchemaFileFeeds from "@oneschema/filefeeds-react"

function OneSchemaFileFeedsExample() {
  const [isOpen, setIsOpen] = useState(false)

  const handleData = (data) => {
    console.log(data)
  }

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open the file feed transforms</button>

      <OneSchemaFileFeeds
        /* managing state from your application */
        isOpen={isOpen}
        /* required config values */
        userJwt={userJwt}
        /* optional config values */
        devMode={process.env.NODE_ENV !== "production"}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
        }}
        inline={false}
        /* handling results */
        onInitFail={(data) => updateStatus("Initialization failed.", data)}
        onInitSucceed={(data) => {
          setSessionId(data.sessionId)
          updateStatus("Initialization succeeded.", data)
        }}
        onSave={(data) => updateStatus("Saved.", data)}
      />
    </div>
  )
}
```

--------------------------------

### OneSchema Importer - Customization Overrides

Source: https://context7.com/oneschema/sdk/llms.txt

Customize the look, feel, and behavior of the import experience including UI elements, validation behavior, and branding.

```APIDOC
## OneSchema Importer - Customization Overrides

### Description
Customize the look, feel, and behavior of the import experience including UI elements, validation behavior, and branding.

### Method
N/A (Client-side configuration)

### Endpoint
N/A (Client-side configuration)

### Parameters
#### Request Body
- **clientId** (string) - Required - Your OneSchema client ID.
- **templateKey** (string) - Required - The key of the template to use.
- **userJwt** (string) - Required - The user's JWT for authentication.
- **importConfig** (object) - Optional - Configuration for the import process (e.g., `{ type: "local" }`).
- **customizationKey** (string) - Optional - A preset customization key to apply.
- **customizationOverrides** (object) - Optional - Object containing various overrides for the import experience:
  - **fileSizeLimit** (number) - Maximum file size in bytes.
  - **skipHeaderRow** (string) - Header row detection strategy (`"always"`, `"detect"`, `"never"`).
  - **mappingStrategy** (array) - Array of mapping strategies (e.g., `["exact", "fuzzy", "historical_user"]`).
  - **aiSuggestedMappings** (array) - Types of AI suggestions for mappings (e.g., `["column", "picklist"]`).
  - **includeUnmappedColumns** (boolean) - Whether to include unmapped columns.
  - **oneClickMode** (boolean) - Enable one-click import mode.
  - **autofixAfterMapping** (boolean) - Automatically fix issues after column mapping.
  - **acceptCodeHookSuggestions** (boolean) - Allow accepting suggestions from code hooks.
  - **importErrorUX** (string) - User experience for import errors (`"blockIfErrors"`, `"promptIfErrors"`, `"ignoreErrors"`).
  - **preventRowDeletion** (array) - Types of row deletion to prevent (e.g., `["selection"]`).
  - **allowEmptyImports** (boolean) - Allow importing empty files.
  - **importMaxRowLimit** (number) - Maximum number of rows allowed for import.
  - **uploaderShowSidebar** (boolean) - Show sidebar in the uploader pane.
  - **uploaderSidebarDetails** (string) - Details to show in the uploader sidebar (`"required"`, `"all"`).
  - **mappingShowSidebar** (boolean) - Show sidebar in the mapping pane.
  - **mappingSidebarDetails** (string) - Details to show in the mapping sidebar (`"required"`, `"all"`).
  - **primaryColor** (string) - Primary brand color.
  - **backgroundPrimaryColor** (string) - Primary background color.
  - **headerColor** (string) - Header background color.
  - **successColor** (string) - Success state color.
  - **errorColor** (string) - Error state color.
  - **buttonBorderRadius** (string) - Border radius for buttons.
  - **buttonPrimaryFillColor** (string) - Fill color for primary buttons.
  - **buttonPrimaryTextColor** (string) - Text color for primary buttons.
  - **modalFullscreen** (boolean) - Make modals fullscreen.
  - **modalBorderRadius** (string) - Border radius for modals.
  - **hideCloseButton** (boolean) - Hide the close button on modals.
  - **fontFamily** (string) - CSS font-family value.
  - **fontColorPrimary** (string) - Primary font color.
  - **fontColorSecondary** (string) - Secondary font color.
  - **uploadPaneHeaderText** (string) - Header text for the upload pane.
  - **uploaderHeaderText** (string) - Header text for the uploader.
  - **uploaderSubheaderText** (string) - Subheader text for the uploader.
  - **mappingPaneHeaderText** (string) - Header text for the mapping pane.
  - **cleaningPaneHeaderText** (string) - Header text for the cleaning pane.
  - **cleaningConfirmButtonText** (string) - Text for the confirm button in the cleaning pane.
  - **showUploadEducationWidget** (boolean) - Show the upload education widget.
  - **uploadEducationWidgetMessage** (string) - Message for the upload education widget.
  - **uploadEducationWidgetAutoOpen** (boolean) - Automatically open the upload education widget.

### Request Example
```javascript
import oneschemaImporter from "@oneschema/importer"

const importer = oneschemaImporter({
  clientId: "YOUR_CLIENT_ID",
  templateKey: "employees_template",
  userJwt: "YOUR_USER_JWT",
  importConfig: { type: "local" },
  customizationKey: "enterprise_theme",
  customizationOverrides: {
    fileSizeLimit: 100000000,
    skipHeaderRow: "detect",
    mappingStrategy: ["exact", "fuzzy", "historical_user"],
    aiSuggestedMappings: ["column", "picklist"],
    includeUnmappedColumns: true,
    oneClickMode: false,
    autofixAfterMapping: true,
    acceptCodeHookSuggestions: true,
    importErrorUX: "promptIfErrors",
    preventRowDeletion: ["selection"],
    allowEmptyImports: false,
    importMaxRowLimit: 50000,
    uploaderShowSidebar: true,
    uploaderSidebarDetails: "required",
    mappingShowSidebar: true,
    mappingSidebarDetails: "all",
    primaryColor: "#4F46E5",
    backgroundPrimaryColor: "#FFFFFF",
    headerColor: "#F9FAFB",
    successColor: "#10B981",
    errorColor: "#EF4444",
    buttonBorderRadius: "8px",
    buttonPrimaryFillColor: "#4F46E5",
    buttonPrimaryTextColor: "#FFFFFF",
    modalFullscreen: false,
    modalBorderRadius: "12px",
    hideCloseButton: false,
    fontFamily: "Inter, sans-serif",
    fontColorPrimary: "#111827",
    fontColorSecondary: "#6B7280",
    uploadPaneHeaderText: "Upload Your Data",
    uploaderHeaderText: "Drag and drop your file",
    uploaderSubheaderText: "Supports CSV and Excel files",
    mappingPaneHeaderText: "Map Your Columns",
    cleaningPaneHeaderText: "Review and Fix Issues",
    cleaningConfirmButtonText: "Complete Import",
    showUploadEducationWidget: true,
    uploadEducationWidgetMessage: "Upload CSV or Excel files up to 100MB",
    uploadEducationWidgetAutoOpen: true
  }
})

importer.launch()
```

### Response
N/A (Client-side configuration)
```

--------------------------------

### Implement OneSchema Service in Angular Component

Source: https://context7.com/oneschema/sdk/llms.txt

Shows how to inject the OneSchemaService into a component to trigger the importer and manage event listeners. It includes logic for handling success, error, and cancellation states.

```typescript
import { Component, OnDestroy, OnInit } from "@angular/core";
import { OneSchemaService } from "@oneschema/angular";

@Component({
  selector: "app-import-page",
  template: "..."
})
export class ImportPageComponent implements OnInit, OnDestroy {
  isImporting = false;
  importedProducts: any[] = [];

  constructor(public oneschema: OneSchemaService) {}

  ngOnInit() {
    this.oneschema.on("success", this.onSuccess.bind(this));
    this.oneschema.on("error", this.onError.bind(this));
  }

  launch() {
    this.isImporting = true;
    this.oneschema.launch();
  }

  onSuccess(data: any) {
    this.isImporting = false;
    this.importedProducts = data.rows;
  }

  ngOnDestroy() {
    this.oneschema.off("success", this.onSuccess);
    this.oneschema.off("error", this.onError);
  }
}
```

--------------------------------

### Configure OneSchemaModule in AppModule

Source: https://github.com/oneschema/sdk/blob/main/packages/importer-angular/projects/oneschema/README.md

Import and configure the OneSchemaModule in your application's root module. This involves providing essential configuration like clientId, templateKey, and userJwt, along with optional styling.

```javascript
import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"

// Import the module from the OneSchema package
import { OneSchemaModule } from "@oneschema/angular"

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Import the module into the application, with configuration
    OneSchemaModule.forRoot({
      clientId: "CLIENT_ID",
      templateKey: "TEMPLATE_KEY",
      userJwt: "USER_JWT",
      styles: {
        position: "fixed",
        top: "0",
        left: "0",
        width: "100vw",
        height: "100vh",
      },
    }),
  ],

  bootstrap: [AppComponent],
})
export class AppModule {}
```

--------------------------------

### Implement OneSchema Importer in React

Source: https://context7.com/oneschema/sdk/llms.txt

A functional React component that manages the OneSchema Importer lifecycle. It uses state hooks to track import status and data, and provides callback handlers for success, error, and cancellation events.

```jsx
import React, { useState, useCallback } from "react"
import OneSchemaImporter from "@oneschema/react"

function DataImportPage() {
  const [isOpen, setIsOpen] = useState(false)
  const [importStatus, setImportStatus] = useState(null)
  const [importedData, setImportedData] = useState(null)

  const handleSuccess = useCallback((data) => {
    console.log("Import successful:", data)
    setImportedData(data)
    setImportStatus({ type: "success", count: data.count })
  }, [])

  const handleError = useCallback((error) => {
    console.error("Import error:", error)
    setImportStatus({ type: "error", message: error.message })
  }, [])

  const handleCancel = useCallback(() => {
    console.log("Import cancelled")
    setImportStatus({ type: "cancelled" })
  }, [])

  const handleLaunched = useCallback((result) => {
    if (result.success) {
      console.log("Importer launched, session:", result.sessionToken)
    } else {
      console.error("Launch failed:", result.error)
    }
  }, [])

  return (
    <div className="import-container">
      <h1>Import Contacts</h1>

      <button
        onClick={() => setIsOpen(true)}
        disabled={isOpen}
      >
        Start Import
      </button>

      {importStatus && (
        <div className={`status status-${importStatus.type}`}>
          {importStatus.type === "success" && `Successfully imported ${importStatus.count} rows`}
          {importStatus.type === "error" && `Error: ${importStatus.message}`}
          {importStatus.type === "cancelled" && "Import was cancelled"}
        </div>
      )}

      <OneSchemaImporter
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        clientId={process.env.REACT_APP_ONESCHEMA_CLIENT_ID}
        userJwt={userToken}
        templateKey="contacts_v2"
        importConfig={{ type: "local", metadataOnly: false }}
        devMode={process.env.NODE_ENV !== "production"}
        inline={true}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
          zIndex: 1000
        }}
        className="oneschema-modal"
        customizationOverrides={{
          primaryColor: "#6366F1",
          modalFullscreen: true
        }}
        onSuccess={handleSuccess}
        onError={handleError}
        onCancel={handleCancel}
        onLaunched={handleLaunched}
        onPageLoad={() => console.log("Importer page loaded")}
      />

      {importedData && (
        <div className="imported-data">
          <h2>Imported Data Preview</h2>
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              {importedData.rows.slice(0, 10).map((row, i) => (
                <tr key={i}>
                  <td>{row.first_name} {row.last_name}</td>
                  <td>{row.email}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}

export default DataImportPage
```