feat: add more components

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
 <Space
@@ -68,6 +76,8 @@ Configures all Workbook Creation request data and an new onRecordHooks helper fu
 `onSubmit` and a new `onRecordHooks` helper can be added to the Workbook. A Workbook object containing the sheets can be passed along in the `config`.
 `onRecordHooks` takes an array of record hooks. Each one can take a slug for manually setting each per sheet. Otherwise, if no slug is added, it will apply the record hook to the corresponding sheet in the Workbook index.
 
+Learn more about the [Workbook](/apps/embedding/react/components/Workbook)
+
 ```tsx
 <Workbook
   config={workbook}
@@ -87,13 +97,20 @@ Configures all Workbook Creation request data and an new onRecordHooks helper fu
 ```
 
 ### Sheet
+The `Sheet` component from the `@flatfile/react` package integrates Flatfile's data import functionality into React applications. It simplifies configuring the data import process and managing the lifecycle of data submission and record handling.
 
-The Sheet option is similar to the [Simplified SDK Approach](apps/embedding/reference/simple)..
+#### Main Props
+
+- `config`: Defines the structure and settings of the data to be imported.
+- `onSubmit`: A callback function that is triggered upon successful data submission.
+- `onRecordHook`: A function that allows for custom record manipulation during the import process.
+- `submitSettings`: Customizes the behavior of the data submission process.
 
-Configures a Sheet config, with an `onRecordHook` helper
 
-Note: an `onSubmit` can be added to the Workbook Component for ease of use
+The Sheet option is similar to the [Simplified SDK Approach](apps/embedding/reference/simple)..
+Learn more about the [Sheet](/apps/embedding/react/components/Sheet)
 
+Example usage:
 ```tsx
 <Sheet
   config={sheet}

apps/embedding/react/components/FlatfileProvider.mdx

@@ -1,43 +1,21 @@
 ---
-title: FlatfileProvider Component
+title: FlatfileProvider Component Overview
 ---
 
-`FlatfileProvider` is a React component that serves as a context provider for Flatfile integration.
-It encapsulates all the necessary state and methods required to manage and interact with Flatfile's services.
-This provider component makes use of the Flatfile API and listener to handle data import processes within your application.
+# FlatfileProvider Component Overview
 
-## Props
+`FlatfileProvider` is a context provider for the `@flatfile/react` package that wraps your application's components where Flatfile's import functionality will be used. It initializes and provides the Flatfile import system to its child components.
 
-- **`children`**: `ReactNode` - The child components that will have access to the Flatfile context.
-- **`publishableKey`**: `string` - The publishable key provided by Flatfile for authentication.
-- **`accessToken`**: `string` - Access token for secure interaction with the Flatfile API.
-- **`environmentId`**: `string` - Identifier for the environment within Flatfile.
-- **`apiUrl`**: `string` - (Optional) URL of the Flatfile API. Defaults to 'https://platform.flatfile.com/api'.
-- **`config`**: `object` - Configuration options for the Flatfile import.
+## Main Props
 
-## State
+- `publishableKey`: The key provided by Flatfile to authenticate your application.
+- `accessToken`: An alternative to `publishableKey` for authentication, typically used for server-side operations.
+- `children`: React nodes for nested components, which can include `Space`, `Workbook`, or `Sheet` components.
 
-- **`internalAccessToken`**: `string | undefined` - Manages the internal state of the access token.
-- **`listener`**: `FlatfileListener` - An instance of FlatfileListener to handle browser-based events.
-- **`open`**: `boolean` - State to manage the visibility of the Flatfile import modal.
-- **`sessionSpace`**: `any` - Represents the current session's workspace.
-- **`createSpace`**: `object` - Configuration for creating a new workspace, document, or workbook.
-
-## Methods
-
-- **`addSheet`**: `(newSheet: Flatfile.SheetConfig) => void` - Adds a new sheet to the workbook if it doesn't already exist.
-- **`updateSheet`**: `(sheetSlug: string, sheetUpdates: Partial<Flatfile.SheetConfig>) => 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
-<FlatfileProvider
-  publishableKey="your-publishable-key"
-  accessToken="your-access-token"
->
+<FlatfileProvider publishableKey="your-publishable-key">
   <YourComponent />
 </FlatfileProvider>
 ```

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 (
+    <Sheet
+      config={sheetConfig}
+      onSubmit={handleSubmit}
+      onRecordHook={handleRecord}
+    />
+  );
+};
+```
+
+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)

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
+<Space config={spaceConfig}>
+    <Workbook config={workbookConfig} />
+</Space>
+```

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
+<Workbook
+  config={workbookConfig}
+  onSubmit={handleWorkbookSubmit}
+  onRecordHooks={recordHooksArray}
+>
+  <Sheet config={sheetConfig} />
+</Workbook>
+```