diff --git a/apps/embedding/react/components.mdx b/apps/embedding/react/components.mdx index 084f0087d..d8439b8f4 100644 --- a/apps/embedding/react/components.mdx +++ b/apps/embedding/react/components.mdx @@ -33,8 +33,16 @@ Learn more about the [FlatfileProvider](/apps/embedding/react/components/Flatfil ``` ### Space +The `Space` component from the `@flatfile/react` package is utilized to define a collaborative environment or workspace within Flatfile's import system. It can be configured to create a new space or to reuse an existing one by providing a space ID. -Configures all Space Creation request data and the `id` for reusing a space +#### Main Props + +- `config`: Sets up the configuration for a new space, including theming and metadata. +- `id`: An optional prop that, when provided, indicates the specific existing space to be reused instead of creating a new one. + +Learn more about the [Space](/apps/embedding/react/components/Space) + +Example usage for creating a new space: ```tsx void` - Adds a new sheet to the workbook if it doesn't already exist. -- **`updateSheet`**: `(sheetSlug: string, sheetUpdates: Partial) => void` - Updates properties of an existing sheet. -- **`updateWorkbook`, `updateDocument`, `updateSpace`**: Functions to update respective configurations. - -## Usage - -Wrap your component tree with `FlatfileProvider` to provide all child components access to Flatfile functionalities through context. +Example usage: ```jsx - + ``` diff --git a/apps/embedding/react/components/Sheet.mdx b/apps/embedding/react/components/Sheet.mdx new file mode 100644 index 000000000..1ba770a0d --- /dev/null +++ b/apps/embedding/react/components/Sheet.mdx @@ -0,0 +1,55 @@ +--- +title: "Sheet Component Overview" +--- + +# Sheet Component Overview + +The `Sheet` component is a fundamental part of the `@flatfile/react` package, designed to handle the configuration and management of a single data sheet within a Flatfile import process. It provides a declarative way to define the structure, validation, and manipulation of data records. + +## Main Props + +- `config`: An object that defines the sheet's configuration, including its name, slug, and fields. + + - `name`: The human-readable name of the sheet. + - `slug`: A unique identifier for the sheet, used for referencing in the import process. + - `fields`: An array of objects defining the structure and constraints of each field in the sheet. + +- `onSubmit`: A callback function that is invoked when the sheet's data is successfully submitted. It receives the submitted data as an argument. + +- `onRecordHook`: A function that allows for custom manipulation of each record during the import process. It is called for each record and can modify, validate, or enrich the record data. + +- `submitSettings`: An object for customizing the behavior of the sheet's submission process, such as handling errors or setting a completion message. + +Example usage: + +```tsx +const App = () => { + const sheetConfig: Flatfile.SheetConfig = { + name: "Users", + slug: "users", + fields: [ + { key: "name", label: "Name", type: "string" }, + { key: "email", label: "Email", type: "string" }, + ], + }; + const handleSubmit = (data) => { + console.log("Submitted data:", data); + }; + const handleRecord = (record) => { + record.set("name", record.get("name").toUpperCase()); + }; + return ( + + ); +}; +``` + +In this example, the `Sheet` component is configured with a `config` object that defines the structure of the "Users" sheet. The `onSubmit` callback logs the submitted data, while the `onRecordHook` function modifies each record by converting the "name" field to uppercase. + +The `Sheet` component simplifies the process of defining and managing data sheets within a Flatfile import workflow, making it easier to create custom import experiences in your React application. + +For more details, refer to the code in the `Sheet.tsx` file in the [Flatfile SDK](https://github.com/FlatFilers/flatfile-core-libraries/blob/main/packages/react/src/components/Sheet.tsx) diff --git a/apps/embedding/react/components/Space.mdx b/apps/embedding/react/components/Space.mdx new file mode 100644 index 000000000..7369b8c5b --- /dev/null +++ b/apps/embedding/react/components/Space.mdx @@ -0,0 +1,21 @@ +--- +title: Space Component Overview +--- + +# Space Component Overview + +The `Space` component within the `@flatfile/react` package is used to define a workspace in Flatfile's import system. It encapsulates `Workbook` components and provides a context for the entire import process. + +## Main Props + +- `config`: Sets up the configuration for a new space, including theming and metadata. +- `id`: An optional prop that, when provided, indicates the specific existing space to be reused instead of creating a new one. +- `children`: React nodes for nested components, typically `Workbook`, `Sheet`, or `Document` components. + +Example usage: + +```tsx + + + +``` \ No newline at end of file diff --git a/apps/embedding/react/components/Workbook.mdx b/apps/embedding/react/components/Workbook.mdx new file mode 100644 index 000000000..2d04baba7 --- /dev/null +++ b/apps/embedding/react/components/Workbook.mdx @@ -0,0 +1,26 @@ +--- +title: Workbook Component Overview +--- + +# Workbook Component Overview + +The `Workbook` component is a key part of the `@flatfile/react` package, designed to manage multiple `Sheet` components as a collection. It represents a workbook within Flatfile's import system, allowing for the configuration of multiple sheets and associated actions. + +## Main Props + +- `config`: Configuration for the workbook, including its sheets and actions. +- `onSubmit`: Callback function executed when the workbook is submitted. +- `onRecordHooks`: Array of hooks for custom record processing. +- `children`: React nodes for nested components, typically `Sheet` components. + +Example usage: + +```tsx + + + +```