From 3213bbf076428f18dbd7925aae6e4a9dca1b6550 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 30 Sep 2025 22:07:18 -0400 Subject: [PATCH 01/12] Select sheet disabled state --- .../google-sheets/src/pages/SelectSheet.tsx | 65 ++++++++++++------- 1 file changed, 41 insertions(+), 24 deletions(-) diff --git a/plugins/google-sheets/src/pages/SelectSheet.tsx b/plugins/google-sheets/src/pages/SelectSheet.tsx index b45aad241..2bb0da1f9 100644 --- a/plugins/google-sheets/src/pages/SelectSheet.tsx +++ b/plugins/google-sheets/src/pages/SelectSheet.tsx @@ -1,5 +1,6 @@ +import cx from "classnames" import { framer } from "framer-plugin" -import { useEffect, useState } from "react" +import { useEffect, useMemo, useState } from "react" import { Hero } from "../components/Hero" import { useSpreadsheetInfoQuery } from "../sheets" @@ -12,14 +13,29 @@ interface Props { } export function SelectSheetPage({ onError, onSheetSelected }: Props) { - const [selectedSpreadsheetId, setSelectedSpreadsheetId] = useState() - const [selectedSheetTitle, setSelectedSheetTitle] = useState() + const [spreadsheetUrl, setSpreadsheetUrl] = useState("") + const [selectedSheetTitle, setSelectedSheetTitle] = useState("") + + const selectedSpreadsheetId = useMemo(() => { + if (!spreadsheetUrl) return "" + + try { + const url = new URL(spreadsheetUrl) + if (url.hostname !== "docs.google.com") throw new Error("Not a Google Sheets URL") + + const id = url.pathname.replace("/spreadsheets/d/", "").replace("/edit", "") + + return id + } catch (err) { + return "" + } + }, [spreadsheetUrl]) const { data: spreadsheetInfo, isFetching: isFetchingSheets, isError: isSpreadSheetInfoError, - } = useSpreadsheetInfoQuery(selectedSpreadsheetId ?? "") + } = useSpreadsheetInfoQuery(selectedSpreadsheetId) useEffect(() => { if (isSpreadSheetInfoError) { @@ -36,12 +52,16 @@ export function SelectSheetPage({ onError, onSheetSelected }: Props) { setSelectedSheetTitle(firstSheet.properties.title) }, [spreadsheetInfo]) - const handleSheetSelect = (e: SelectChangeEvent) => { + const handleSpreadsheetUrlChange = (e: InputChangeEvent) => { + setSpreadsheetUrl(e.target.value) + } + + const handleSheetChange = (e: SelectChangeEvent) => { setSelectedSheetTitle(e.target.value) } - const handleSheetSelected = () => { - if (selectedSpreadsheetId === undefined || selectedSheetTitle === undefined) { + const handleNextClick = () => { + if (!selectedSpreadsheetId || !selectedSheetTitle) { framer.notify("Please select a spreadsheet and sheet", { variant: "error" }) return } @@ -49,35 +69,27 @@ export function SelectSheetPage({ onError, onSheetSelected }: Props) { onSheetSelected(selectedSpreadsheetId, selectedSheetTitle) } - const handleSheetURLChange = (e: InputChangeEvent) => { - try { - const url = new URL(e.target.value) - if (url.hostname !== "docs.google.com") throw new Error("Not a Google Sheets URL") - - const id = url.pathname.replace("/spreadsheets/d/", "").replace("/edit", "") - - setSelectedSpreadsheetId(id) - } catch (err) { - setSelectedSpreadsheetId(undefined) - } - } - return (

Spreadsheet

- +

Sheet

+ {value}
) } diff --git a/plugins/google-sheets/src/components/Hero.tsx b/plugins/google-sheets/src/components/Hero.tsx index b63809a3f..13f619a5d 100644 --- a/plugins/google-sheets/src/components/Hero.tsx +++ b/plugins/google-sheets/src/components/Hero.tsx @@ -2,6 +2,6 @@ import hero from "../assets/hero.png" export const Hero = () => (
- Floating sheet + Floating sheet
) diff --git a/plugins/google-sheets/src/globals.css b/plugins/google-sheets/src/globals.css index ae1d2f1ec..cccde2a02 100644 --- a/plugins/google-sheets/src/globals.css +++ b/plugins/google-sheets/src/globals.css @@ -3,6 +3,12 @@ @custom-variant dark (&:where([data-framer-theme="dark"], [data-framer-theme="dark"] *)); +main { + user-select: none; + + --framer-color-tint: #00c43e; +} + @theme inline { --background-color-primary: var(--framer-color-bg); --background-color-secondary: var(--framer-color-bg-secondary); @@ -20,7 +26,6 @@ --color-tertiary: var(--framer-color-text-tertiary); --color-inverted: var(--framer-color-text-inverted); --color-content: #999; - --color-sheets-green: #00c43e; --color-framer-red: #ff3366; --border-color-divider: var(--framer-color-divider); diff --git a/plugins/google-sheets/src/pages/MapSheetFields.tsx b/plugins/google-sheets/src/pages/MapSheetFields.tsx index 88331224e..a3f8fb5d4 100644 --- a/plugins/google-sheets/src/pages/MapSheetFields.tsx +++ b/plugins/google-sheets/src/pages/MapSheetFields.tsx @@ -259,8 +259,8 @@ export function MapSheetFieldsPage({
Column - Field Type + Field {fieldConfig.map((field, i) => { const isDisabled = disabledColumns.has(field.id) @@ -278,20 +278,8 @@ export function MapSheetFieldsPage({
- { - handleFieldNameChange(field.id, e.target.value) - }} - /> + { + handleFieldNameChange(field.id, e.target.value) + }} + /> ) })} From 2932d615ce974810f666dddfad58c6c97a3060a2 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 30 Sep 2025 22:25:27 -0400 Subject: [PATCH 03/12] Update notification, eslint fix --- plugins/google-sheets/src/App.tsx | 1 - plugins/google-sheets/src/pages/SelectSheet.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/google-sheets/src/App.tsx b/plugins/google-sheets/src/App.tsx index 1003fbf91..580b77120 100644 --- a/plugins/google-sheets/src/App.tsx +++ b/plugins/google-sheets/src/App.tsx @@ -72,7 +72,6 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp if (result.status === "success") { framer.closePlugin("Synchronization successful") - return } }, onError: e => framer.notify(e.message, { variant: "error" }), diff --git a/plugins/google-sheets/src/pages/SelectSheet.tsx b/plugins/google-sheets/src/pages/SelectSheet.tsx index 2bb0da1f9..db4235c32 100644 --- a/plugins/google-sheets/src/pages/SelectSheet.tsx +++ b/plugins/google-sheets/src/pages/SelectSheet.tsx @@ -87,7 +87,7 @@ export function SelectSheetPage({ onError, onSheetSelected }: Props) { { - setSlugColumn(e.target.value) - }} - required +
+
+
+
+
+ + +
+
+
+ Column + Type + Name + {fieldConfig.map((field, i) => { + const isDisabled = disabledColumns.has(field.id) + + return ( + + { + handleFieldToggle(field.id) + }} + disabled={!isAllowedToManage} + /> +
+ +
+ + { + handleFieldNameChange(field.id, e.target.value) + }} + /> + + ) + })} + {fieldConfig.length > 4 && !isAtBottom &&
} +
+
+
+
-
-
- Column - Type - Name - {fieldConfig.map((field, i) => { - const isDisabled = disabledColumns.has(field.id) - - return ( - - { - handleFieldToggle(field.id) - }} - disabled={!isAllowedToManage} - /> -
- -
- - { - handleFieldNameChange(field.id, e.target.value) - }} - /> - - ) - })} - {fieldConfig.length > 4 && !isAtBottom &&
} -
-
-
- -
-
+ +
) } diff --git a/plugins/google-sheets/src/pages/Problem.tsx b/plugins/google-sheets/src/pages/Problem.tsx index 74c8049af..21f8495b4 100644 --- a/plugins/google-sheets/src/pages/Problem.tsx +++ b/plugins/google-sheets/src/pages/Problem.tsx @@ -40,7 +40,7 @@ export function Problem({ height, spreadsheetId, setContext, children }: Props) } return ( -
+
{children}
)}
-
+ ) } diff --git a/plugins/google-sheets/src/pages/SelectSheet.tsx b/plugins/google-sheets/src/pages/SelectSheet.tsx index db4235c32..04f676e8e 100644 --- a/plugins/google-sheets/src/pages/SelectSheet.tsx +++ b/plugins/google-sheets/src/pages/SelectSheet.tsx @@ -70,7 +70,7 @@ export function SelectSheetPage({ onError, onSheetSelected }: Props) { } return ( -
+
@@ -110,6 +110,6 @@ export function SelectSheetPage({ onError, onSheetSelected }: Props) { > Next -
+
) } From 93e0248c4d3e64f178253110eb5de6658bf682e2 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Wed, 1 Oct 2025 01:57:23 -0400 Subject: [PATCH 07/12] Fix broken imports --- plugins/google-sheets/src/pages/Authenticate.tsx | 1 - plugins/google-sheets/src/pages/MapSheetFields.tsx | 1 - plugins/google-sheets/src/pages/Problem.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/plugins/google-sheets/src/pages/Authenticate.tsx b/plugins/google-sheets/src/pages/Authenticate.tsx index 45427a827..f07d4296f 100644 --- a/plugins/google-sheets/src/pages/Authenticate.tsx +++ b/plugins/google-sheets/src/pages/Authenticate.tsx @@ -1,7 +1,6 @@ import { framer } from "framer-plugin" import { useLayoutEffect, useRef, useState } from "react" import auth from "../auth" -import { Button } from "../components/Button" import { GoogleLogo } from "../components/GoogleLogo" import { Hero } from "../components/Hero" import { getPluginContext, type PluginContext } from "../sheets" diff --git a/plugins/google-sheets/src/pages/MapSheetFields.tsx b/plugins/google-sheets/src/pages/MapSheetFields.tsx index 4a3c8a9d7..9466d1f9c 100644 --- a/plugins/google-sheets/src/pages/MapSheetFields.tsx +++ b/plugins/google-sheets/src/pages/MapSheetFields.tsx @@ -2,7 +2,6 @@ import cx from "classnames" import { type ManagedCollectionFieldInput, useIsAllowedTo } from "framer-plugin" import { Fragment, useMemo, useState } from "react" import { useInView } from "react-intersection-observer" -import { Button } from "../components/Button" import { CheckboxTextfield } from "../components/CheckboxTextField" import { IconChevron } from "../components/Icons" import type { CellValue, CollectionFieldType, HeaderRow, PluginContext, Row, SyncMutationOptions } from "../sheets" diff --git a/plugins/google-sheets/src/pages/Problem.tsx b/plugins/google-sheets/src/pages/Problem.tsx index 21f8495b4..5494ac659 100644 --- a/plugins/google-sheets/src/pages/Problem.tsx +++ b/plugins/google-sheets/src/pages/Problem.tsx @@ -1,6 +1,5 @@ import { framer } from "framer-plugin" import { type PropsWithChildren, useLayoutEffect, useState } from "react" -import { Button } from "../components/Button" import { getPluginContext, type PluginContext } from "../sheets" interface Props extends PropsWithChildren { From 768be4da084dbb0d587793417e006b8e23ec4ab6 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Wed, 1 Oct 2025 12:19:23 -0400 Subject: [PATCH 08/12] Main CSS classes --- plugins/google-sheets/src/App.tsx | 2 +- plugins/google-sheets/src/globals.css | 4 ---- plugins/google-sheets/src/pages/Authenticate.tsx | 2 +- plugins/google-sheets/src/pages/MapSheetFields.tsx | 2 +- plugins/google-sheets/src/pages/Problem.tsx | 2 +- plugins/google-sheets/src/pages/SelectSheet.tsx | 2 +- 6 files changed, 5 insertions(+), 9 deletions(-) diff --git a/plugins/google-sheets/src/App.tsx b/plugins/google-sheets/src/App.tsx index dd34d075f..0de1ef195 100644 --- a/plugins/google-sheets/src/App.tsx +++ b/plugins/google-sheets/src/App.tsx @@ -142,7 +142,7 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp if (isSheetPending) { return ( -
+
) diff --git a/plugins/google-sheets/src/globals.css b/plugins/google-sheets/src/globals.css index 1a192f33d..505451241 100644 --- a/plugins/google-sheets/src/globals.css +++ b/plugins/google-sheets/src/globals.css @@ -4,10 +4,6 @@ @custom-variant dark (&:where([data-framer-theme="dark"], [data-framer-theme="dark"] *)); main { - user-select: none; - width: 100%; - height: 100%; - --framer-color-tint: #00c43e; --framer-color-tint-dark: #00b539; --framer-color-tint-extra-dark: #00ab36; diff --git a/plugins/google-sheets/src/pages/Authenticate.tsx b/plugins/google-sheets/src/pages/Authenticate.tsx index f07d4296f..214df87b4 100644 --- a/plugins/google-sheets/src/pages/Authenticate.tsx +++ b/plugins/google-sheets/src/pages/Authenticate.tsx @@ -68,7 +68,7 @@ export function Authenticate({ onAuthenticated }: AuthenticationProps) { } return ( -
+
  1. diff --git a/plugins/google-sheets/src/pages/MapSheetFields.tsx b/plugins/google-sheets/src/pages/MapSheetFields.tsx index 9466d1f9c..9b86926dd 100644 --- a/plugins/google-sheets/src/pages/MapSheetFields.tsx +++ b/plugins/google-sheets/src/pages/MapSheetFields.tsx @@ -233,7 +233,7 @@ export function MapSheetFieldsPage({ const isAllowedToManage = useIsAllowedTo("ManagedCollection.setFields", ...syncMethods) return ( -
    +
    diff --git a/plugins/google-sheets/src/pages/Problem.tsx b/plugins/google-sheets/src/pages/Problem.tsx index 5494ac659..fc90541ae 100644 --- a/plugins/google-sheets/src/pages/Problem.tsx +++ b/plugins/google-sheets/src/pages/Problem.tsx @@ -39,7 +39,7 @@ export function Problem({ height, spreadsheetId, setContext, children }: Props) } return ( -
    +
    {children}
    -
    +
    Column Type Name From 5f760606057696770cd5c274f01eb8430687ba2f Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Thu, 2 Oct 2025 12:22:48 -0400 Subject: [PATCH 12/12] Add comment, return null --- plugins/google-sheets/src/pages/Authenticate.tsx | 1 + plugins/google-sheets/src/pages/SelectSheet.tsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/plugins/google-sheets/src/pages/Authenticate.tsx b/plugins/google-sheets/src/pages/Authenticate.tsx index 214df87b4..0ab229712 100644 --- a/plugins/google-sheets/src/pages/Authenticate.tsx +++ b/plugins/google-sheets/src/pages/Authenticate.tsx @@ -81,6 +81,7 @@ export function Authenticate({ onAuthenticated }: AuthenticationProps) { Map the column fields to the CMS
+ {/* Don't disable button because we want to allow the user to reopen the log in page if they close it without finishing */}