From 484fdff3f7c53e501c65db3194661e5aa596734b Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper <57960885+gaelyn@users.noreply.github.com> Date: Tue, 16 Apr 2024 17:31:08 -0600 Subject: [PATCH] Add dynamic theme and document (#27) --- .../dynamic-portal/workspace.tsx | 6 +- lib/dynamic/document.ts | 175 ++++++++++++++++++ lib/dynamic/theme.ts | 66 +++++++ 3 files changed, 245 insertions(+), 2 deletions(-) create mode 100644 lib/dynamic/document.ts create mode 100644 lib/dynamic/theme.ts diff --git a/app/(authenticated)/dynamic-portal/workspace.tsx b/app/(authenticated)/dynamic-portal/workspace.tsx index bc248f2..28f094c 100644 --- a/app/(authenticated)/dynamic-portal/workspace.tsx +++ b/app/(authenticated)/dynamic-portal/workspace.tsx @@ -17,6 +17,8 @@ import dynamic from "next/dynamic"; import { type ISpace } from "@flatfile/react"; import { SheetConfig } from "@flatfile/api/api"; import { listener } from "@/lib/dynamic/listener"; +import { theme } from "@/lib/dynamic/theme"; +import { document } from "@/lib/dynamic/document"; const DynamicEmbeddedSpace = dynamic( () => import("@/components/shared/embedded-space"), @@ -91,9 +93,9 @@ export default function Workspace({ publishableKey: process.env.NEXT_PUBLIC_FLATFILE_PUBLISHABLE_KEY, environmentId: process.env.NEXT_PUBLIC_FLATFILE_ENVIRONMENT_ID, name: "Dynamic Portal", - // themeConfig: theme("#71a3d2", "#3A7CB9"), + themeConfig: theme, listener, - // document, + document, workbook: generateConfig({ sheet, customFieldConfig, diff --git a/lib/dynamic/document.ts b/lib/dynamic/document.ts new file mode 100644 index 0000000..921ffc1 --- /dev/null +++ b/lib/dynamic/document.ts @@ -0,0 +1,175 @@ +export const document = { + title: "Welcome", + body: ` +
+ + +
+
+

Welcome!

+

We're excited to help you import your data to PLM Show.

+
+ +
+

Follow the steps below to get started:

+
+
+ +
+

1. Upload your file

+

Click "Files" in the left-hand sidebar, and upload the sample data you want to import into Flatfile. You can do this by clicking "Add files" or dragging and dropping the file onto the page.

+
+ +
+

2. Import the Products Data

+

Click "Import" and select the products data. Follow the mapping instructions in Flatfile to complete the import. Once the data has been mapped, it will be loaded into Flatfile's table UI, where validations and transformations have been applied.

+
+ +
+

3. Validate and Transform Data

+

Make sure to verify that your data is correctly formatted and transformed by Flatfile. Flatfile will handle formatting dates, rounding amounts, and validating the existence of products for you! If there are any issues or errors, you can easily address them within Flatfile's user interface.

+
+ +
+

4. Load Data into PLM.Show

+

Once the data has been validated and transformed, use the “Push records to PLM.show” button to load data into the PLM.Show application.

+
+ +
+

5. Return to PLM.Show

+

Once you have loaded the data from Flatfile to PLM Show, return to PLM.Show and navigate to the Data Templates section within the application to view the products data that you have just loaded.

+
+ + +
+ +
+
+

Flatfile features covered:

+
+
+ +
+
+ +

Event-based workflow

+
+ +
+ +

Plug-in functionality

+
+ +
+ +

Custom actions

+
+ +
+ +

External API Calls

+
+ +
+ +

Custom Theming

+
+ +
+ +

Data Hooks

+
+ +
+ +
+

View the code for this workflow on Github

+ View on Github + + + + + + + + + + + +
+ +
+ + + +

Remember, if you need any assistance, you can always refer back to this page by clicking "Welcome" in the left-hand sidebar!

+
+ + +
+ + +
+ + `, +}; diff --git a/lib/dynamic/theme.ts b/lib/dynamic/theme.ts new file mode 100644 index 0000000..00bf894 --- /dev/null +++ b/lib/dynamic/theme.ts @@ -0,0 +1,66 @@ +export const theme = { + root: { + primaryColor: "#3A7CB9", + warningColor: "#FF9800", + }, + sidebar: { + logo: `https://images.ctfassets.net/e8fqfbar73se/4c9ouGKgET1qfA4uxp4qLZ/e3f1a8b31be67a798c1e49880581fd3d/white-logo-w-padding.png`, + textColor: "#FFFFFF", + titleColor: "#FFFFFF", + focusBgColor: "#71a3d2", + focusTextColor: "#FFFFFF", + backgroundColor: "#3A7CB9", + footerTextColor: "#FFFFFF", + textUltralightColor: "#FF0000", + }, + table: { + inputs: { + radio: { + color: "rgb(8 117 225)", + }, + checkbox: { + color: "rgb(8 117 225)", + }, + }, + filters: { + color: "#808080", + active: { + backgroundColor: "rgb(8 117 225)", + }, + error: { + activeBackgroundColor: "#FA8072", + }, + }, + column: { + header: { + fontSize: "12px", + backgroundColor: "rgb(240 240 240)", + color: "#678090", + dragHandle: { + idle: "rgb(8 117 225)", + dragging: "#0000FF", + }, + }, + }, + fontFamily: "Arial", + indexColumn: { + backgroundColor: "rgb(240 240 240)", + selected: { + color: "rgb(240 240 240)", + backgroundColor: "rgb(200 200 200)", + }, + }, + cell: { + selected: { + backgroundColor: "rgb(235 245 255)", + }, + active: { + borderColor: "rgb(8 117 225)", + spinnerColor: "#808080", + }, + }, + loading: { + color: "rgb(240 240 240)", + }, + }, +};