From ba85871cc4d10881ae58c498ee64d038b0bd8acd Mon Sep 17 00:00:00 2001 From: Joshua Bolk Date: Wed, 10 Jul 2024 12:37:33 +0200 Subject: [PATCH 1/2] [GCOM-1450] fix hygraph studio bugs in Dynamic Row UI module. Style config screen DR UI app. --- .../components/PropertyPicker.tsx | 12 +-- .../components/Setup.tsx | 68 ++++++++++------ .../components/setup.module.css | 79 ++++++++++++++++--- 3 files changed, 118 insertions(+), 41 deletions(-) diff --git a/packages/hygraph-dynamic-rows-ui/components/PropertyPicker.tsx b/packages/hygraph-dynamic-rows-ui/components/PropertyPicker.tsx index a931edb3c5..8419ae70f8 100644 --- a/packages/hygraph-dynamic-rows-ui/components/PropertyPicker.tsx +++ b/packages/hygraph-dynamic-rows-ui/components/PropertyPicker.tsx @@ -8,7 +8,7 @@ import { fetchGraphQLInterface } from '../lib/fetchGraphQLInterface' import { __Field } from '../types' export function PropertyPicker() { - const { value, onChange, field, extension } = useFieldExtension() + const { value, onChange, extension } = useFieldExtension() const [localValue, setLocalValue] = useState( typeof value === 'string' ? value : undefined, ) @@ -29,7 +29,7 @@ export function PropertyPicker() { return fetchGraphQLInterface(client) }, [extension.config.backend]) - // Prepare options + // Prepare options const numberOptions = useMemo( () => createOptionsFromInterfaceObject( @@ -60,10 +60,10 @@ export function PropertyPicker() { [numberOptions, textOptions], ) - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - outdated types from @hygraph/app-sdk-react - const fieldType = field.parent.apiId ?? 'ConditionText' - const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text + // For now this we can not split number and text field options anymore as Hygraph made parent field apiId unreachable :/ + // const fieldType = field.parent.apiId ?? 'ConditionText' + // const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text + const options = [...allOptions.text, ...allOptions.number] if (!fields) { Promise.resolve(graphQLInterfaceQuery) diff --git a/packages/hygraph-dynamic-rows-ui/components/Setup.tsx b/packages/hygraph-dynamic-rows-ui/components/Setup.tsx index 69b2f8d0a2..156e6a57ca 100644 --- a/packages/hygraph-dynamic-rows-ui/components/Setup.tsx +++ b/packages/hygraph-dynamic-rows-ui/components/Setup.tsx @@ -1,15 +1,14 @@ import { useApp, Wrapper } from '@hygraph/app-sdk-react' +import Image from 'next/image' import { useState } from 'react' import styles from './setup.module.css' function Install() { - // @ts-expect-error - outdated types from @hygraph/app-sdk-react - const { updateInstallation, installation, showToast, extension } = useApp() + const { updateInstallation, installation, showToast } = useApp() + const installed = installation.status === 'COMPLETED' const [gqlUri, setGqlUri] = useState('') - const changedUri = extension.config.backend !== gqlUri - const saveOnClick = () => updateInstallation({ config: { backend: gqlUri }, @@ -64,10 +63,8 @@ function Install() { let buttonText: string let buttonAction: typeof uninstallOnClick | typeof installOnClick - if (changedUri) { - buttonText = 'Save' - buttonAction = saveOnClick - } else if (installed) { + + if (installed) { buttonText = 'Disable app' buttonAction = uninstallOnClick } else { @@ -78,17 +75,30 @@ function Install() { return ( <> <> - GraphQL API URI + + GraphQL API URI + setGqlUri(e.target.value)} /> - +
+ + +
) } @@ -96,16 +106,28 @@ function Install() { export function Page() { return (
-

Dynamic Rows Property Selector

-

- Enhance your content management experience with Dynamic Rows, specifically designed to - integrate seamlessly with our Dynamic Row module. It features an intuitive property picker - field, allowing for effortless selection and organization of properties to customize your - content layout. Press install to get started! -

- - - +
+
+ GraphCommerce logo +
+ +

+ Dynamic Rows Property Selector by Joshua Bolk +

+

+ Enhance your content management experience with Dynamic Rows, specifically designed to + integrate seamlessly with our Dynamic Row module. It features an intuitive property picker + field, allowing for effortless selection and organization of properties to customize your + content layout. Enable the app and put your graphQL URI to get started. +

+ + + +
) } diff --git a/packages/hygraph-dynamic-rows-ui/components/setup.module.css b/packages/hygraph-dynamic-rows-ui/components/setup.module.css index 7608f37b65..50d8b3af29 100644 --- a/packages/hygraph-dynamic-rows-ui/components/setup.module.css +++ b/packages/hygraph-dynamic-rows-ui/components/setup.module.css @@ -1,11 +1,28 @@ .container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; height: 100%; max-width: 1200px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: 'Roboto', sans-serif; + line-height: 1.3; + font-size: 18px; + background-color: aliceblue; + padding: 32px 24px; + border-radius: 8px; + margin: 0 auto; +} + +.contentWrapper { + max-width: 700px; + display: flex; + flex-direction: column; + align-items: left; + margin: 0 auto; +} + +.logoWrapper { + position: relative; + height: 60px; + width: 50%; + margin-bottom: 32px; } .title { @@ -15,6 +32,12 @@ margin-bottom: 16px; } +.author { + font-size: 12px; + font-weight: 300; + line-height: 16px; +} + .desciption { font-size: 14px; font-weight: 300; @@ -40,19 +63,51 @@ text-decoration: none; font-weight: 500; border: 0px; - margin: 16px 0px 0px; + margin: 16px 0 0 0; border-radius: 4px; - font-size: 12px; + font-size: 18px; line-height: 16px; - height: 24px; + height: 40px; min-width: 24px; - padding-left: 8px; - padding-right: 8px; + padding-left: 16px; + padding-right: 16px; color: rgb(255, 255, 255); - background-color: rgb(90, 92, 236); + background-color: #2563eb; + transition: background-color 0.2s ease 0s; } .button:hover { cursor: pointer; - background-color: rgb(58, 48, 166); + background-color: #1d4ed8; +} + +.button[aria-disabled='true'] { + background-color: rgb(200, 200, 200); +} + +.button[aria-disabled='true']:hover { + background-color: rgb(192, 192, 192); +} + +.button[aria-disabled='false'] { + background-color: #16a34a; +} + +.button[aria-disabled='false']:hover { + background-color: #15803d; +} + +.buttonsContainer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 8px; + column-gap: 24px; +} + +.textInput { + display: inline; + margin: 24px 0; + font-size: 18px; + padding: 12px 6px; } From 28d470861a10a38690d565d236ce573905038d2b Mon Sep 17 00:00:00 2001 From: Joshua Bolk Date: Wed, 10 Jul 2024 12:38:27 +0200 Subject: [PATCH 2/2] [GCOM-1450] changeset --- .changeset/eight-hounds-sit.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eight-hounds-sit.md diff --git a/.changeset/eight-hounds-sit.md b/.changeset/eight-hounds-sit.md new file mode 100644 index 0000000000..498c3248a2 --- /dev/null +++ b/.changeset/eight-hounds-sit.md @@ -0,0 +1,5 @@ +--- +"@graphcommerce/hygraph-dynamic-rows-ui": patch +--- + +fix hygraph studio bugs in Dynamic Row UI module. Style config screen DR UI app.