From 7295f62d630404b2533b8366dc0c8ffaad7228a1 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Wed, 8 May 2024 09:43:13 +0200
Subject: [PATCH 1/2] utopia fixes 1

---
 utopia/antd.utopia.js | 161 ------------------------------------------
 utopia/storyboard.js  |  19 ++---
 2 files changed, 10 insertions(+), 170 deletions(-)
 delete mode 100644 utopia/antd.utopia.js

diff --git a/utopia/antd.utopia.js b/utopia/antd.utopia.js
deleted file mode 100644
index 882fc76..0000000
--- a/utopia/antd.utopia.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import * as Utopia from 'utopia-api';
-import {
-  TypographyText,
-  TypographyTitle,
-  TypographyParagraph,
-} from '../app/components/Components';
-
-export const AntdTextVariants = [
-  {
-    label: 'Text',
-    imports: 'import { TypographyText } from "/app/components/Components"',
-    code: `<TypographyText>Sample Text</TypographyText>`,
-  },
-  {
-    label: 'Text (italic)',
-    imports: 'import { TypographyText } from "/app/components/Components"',
-    code: `<TypographyText italic>Sample Text</TypographyText>`,
-  },
-  {
-    label: 'Text (bold)',
-    imports: 'import { TypographyText } from "/app/components/Components"',
-    code: `<TypographyText strong>Sample Text</TypographyText>`,
-  },
-];
-
-export const AntdTitleVariants = [
-  {
-    label: 'Title (Level 1)',
-    imports: 'import { TypographyTitle } from "/app/components/Components"',
-    code: `<TypographyTitle level={1}>Sample Text</TypographyTitle>`,
-  },
-  {
-    label: 'Title (Level 2)',
-    imports: 'import { TypographyTitle } from "/app/components/Components"',
-    code: `<TypographyTitle level={2}>Sample Text</TypographyTitle>`,
-  },
-  {
-    label: 'Title (Level 3)',
-    imports: 'import { TypographyTitle } from "/app/components/Components"',
-    code: `<TypographyTitle level={3}>Sample Text</TypographyTitle>`,
-  },
-  {
-    label: 'Title (Level 4)',
-    imports: 'import { TypographyTitle } from "/app/components/Components"',
-    code: `<TypographyTitle level={4}>Sample Text</TypographyTitle>`,
-  },
-  {
-    label: 'Title (Level 5)',
-    imports: 'import { TypographyTitle } from "/app/components/Components"',
-    code: `<TypographyTitle level={5}>Sample Text</TypographyTitle>`,
-  },
-];
-
-export const AntdParagraphVariants = [
-  {
-    label: 'Paragraph',
-    imports: 'import { TypographyParagraph } from "/app/components/Components"',
-    code: `<TypographyParagraph>Sample Text</TypographyParagraph>`,
-  },
-  {
-    label: 'Paragraph (italic)',
-    imports: 'import { TypographyParagraph } from "/app/components/Components"',
-    code: `<TypographyParagraph italic>Sample Text</TypographyParagraph>`,
-  },
-  {
-    label: 'Paragraph (bold)',
-    imports: 'import { TypographyParagraph } from "/app/components/Components"',
-    code: `<TypographyParagraph strong>Sample Text</TypographyParagraph>`,
-  },
-];
-
-const AntdTypoBaseProps = {
-  italic: Utopia.checkboxControl(),
-  underline: Utopia.checkboxControl(),
-  mark: Utopia.checkboxControl(),
-  code: Utopia.checkboxControl(),
-  delete: Utopia.checkboxControl(),
-  disabled: Utopia.checkboxControl(),
-  ellipsis: Utopia.checkboxControl(),
-  keyboard: Utopia.checkboxControl(),
-  copyable: Utopia.checkboxControl(),
-  type: Utopia.popupListControl([
-    {
-      label: 'none',
-      value: 'undefined',
-    },
-    {
-      label: 'secondary',
-      value: 'secondary',
-    },
-    {
-      label: 'success',
-      value: 'success',
-    },
-    {
-      label: 'warning',
-      value: 'warning',
-    },
-    {
-      label: 'danger',
-      value: 'danger',
-    },
-  ]),
-};
-
-const AntdTypoAnnotations = {
-  properties: AntdTypoBaseProps,
-  focus: 'never',
-  children: {
-    preferredContents: 'text',
-  },
-  focus: 'never',
-  inspector: ['typography'],
-};
-
-/**
- * @type {{[modulePath: string]: {[componentName:string]: import("utopia-api").ComponentToRegister}}}
- */
-const Components = {
-  '/app/components/Components': {
-    TypographyText: {
-      ...AntdTypoAnnotations,
-      properties: {
-        ...AntdTypoBaseProps,
-        strong: {
-          control: 'checkbox',
-          label: 'bold',
-        },
-      },
-      component: TypographyText,
-      icon: 'text',
-      variants: AntdTextVariants,
-    },
-    TypographyTitle: {
-      ...AntdTypoAnnotations,
-      properties: {
-        level: Utopia.sliderControl(1, 5, 1),
-        ...AntdTypoBaseProps,
-      },
-      component: TypographyTitle,
-      icon: 'title',
-      variants: AntdTitleVariants,
-    },
-    TypographyParagraph: {
-      ...AntdTypoAnnotations,
-      properties: {
-        deemphasized: Utopia.checkboxControl(),
-        strong: {
-          control: 'checkbox',
-          label: 'bold',
-        },
-        ...AntdTypoBaseProps,
-      },
-      component: TypographyParagraph,
-      icon: 'paragraph',
-      variants: AntdParagraphVariants,
-    },
-  },
-};
-
-export default Components;
diff --git a/utopia/storyboard.js b/utopia/storyboard.js
index 7ebaa14..c117eec 100644
--- a/utopia/storyboard.js
+++ b/utopia/storyboard.js
@@ -1,25 +1,26 @@
-import * as React from 'react';
-import {Storyboard, RemixScene} from 'utopia-api';
+import * as React from 'react'
+import { Storyboard, RemixScene } from 'utopia-api'
 
-import {getLoadContext} from '../server';
-import {Image} from '@shopify/hydrogen';
+import { getLoadContext } from '../server-context-getter'
+import { Image } from '@shopify/hydrogen'
 
 const contextGetter = getLoadContext(
   {
     PUBLIC_STORE_DOMAIN: 'praiseful-pear.myshopify.com',
-    PUBLIC_STOREFRONT_API_TOKEN: '541564e540184b9648c529272ffa4b53',
+    PUBLIC_STOREFRONT_API_TOKEN:
+      '541564e540184b9648c529272ffa4b53',
   },
   {
     waitUntil: () => {},
   },
   // Demo cart ID obtained from https://mock.shop/create-cart
   'gid://shopify/Cart/Z2NwLXVzLWNlbnRyYWwxOjAxSEhKQ0I3RFoySlY3Mk5ORlhUVEo2RjhU',
-);
+)
 
 export var storyboard = (
   <Storyboard>
     <RemixScene
-      data-label="Desktop"
+      data-label='Desktop'
       style={{
         position: 'absolute',
         width: 1440,
@@ -29,7 +30,7 @@ export var storyboard = (
         overflow: 'hidden',
       }}
       getLoadContext={contextGetter}
-      commentId="bjt"
+      commentId='bjt'
     />
   </Storyboard>
-);
+)

From 49019499c6f76307fc0ab02ce99125d7245949d3 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Wed, 8 May 2024 09:44:40 +0200
Subject: [PATCH 2/2] disabling css imports

---
 app/root.jsx | 105 +++++++++++++++++++++++++++++----------------------
 1 file changed, 59 insertions(+), 46 deletions(-)

diff --git a/app/root.jsx b/app/root.jsx
index e18f651..4a9865a 100644
--- a/app/root.jsx
+++ b/app/root.jsx
@@ -1,5 +1,5 @@
-import {useNonce} from '@shopify/hydrogen';
-import {defer} from '@shopify/remix-oxygen';
+import { useNonce } from '@shopify/hydrogen'
+import { defer } from '@shopify/remix-oxygen'
 import {
   Links,
   Meta,
@@ -9,34 +9,41 @@ import {
   useLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
-} from '@remix-run/react';
-import favicon from './assets/favicon.svg';
-import resetStyles from './styles/reset.css?url';
-import appStyles from './styles/app.css?url';
-import {Layout} from '~/components/Layout';
+} from '@remix-run/react'
+import favicon from './assets/favicon.svg'
+
+// Utopia TODO – fix this
+// import resetStyles from './styles/reset.css?url'
+// import appStyles from './styles/app.css?url'
+
+import { Layout } from '~/components/Layout'
 
 /**
  * This is important to avoid re-fetching root queries on sub-navigations
  * @type {ShouldRevalidateFunction}
  */
-export const shouldRevalidate = ({formMethod, currentUrl, nextUrl}) => {
+export const shouldRevalidate = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
   // revalidate when a mutation is performed e.g add to cart, login...
   if (formMethod && formMethod !== 'GET') {
-    return true;
+    return true
   }
 
   // revalidate when manually revalidating via useRevalidator
   if (currentUrl.toString() === nextUrl.toString()) {
-    return true;
+    return true
   }
 
-  return false;
-};
+  return false
+}
 
 export function links() {
   return [
-    {rel: 'stylesheet', href: resetStyles},
-    {rel: 'stylesheet', href: appStyles},
+    // { rel: 'stylesheet', href: resetStyles },
+    // { rel: 'stylesheet', href: appStyles },
     {
       rel: 'preconnect',
       href: 'https://cdn.shopify.com',
@@ -45,19 +52,19 @@ export function links() {
       rel: 'preconnect',
       href: 'https://shop.app',
     },
-    {rel: 'icon', type: 'image/svg+xml', href: favicon},
-  ];
+    { rel: 'icon', type: 'image/svg+xml', href: favicon },
+  ]
 }
 
 /**
  * @param {LoaderFunctionArgs}
  */
-export async function loader({context}) {
-  const {storefront, customerAccount, cart} = context;
-  const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
+export async function loader({ context }) {
+  const { storefront, customerAccount, cart } = context
+  const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN
 
-  const isLoggedInPromise = customerAccount.isLoggedIn();
-  const cartPromise = cart.get();
+  const isLoggedInPromise = customerAccount.isLoggedIn()
+  const cartPromise = cart.get()
 
   // defer the footer query (below the fold)
   const footerPromise = storefront.query(FOOTER_QUERY, {
@@ -65,7 +72,7 @@ export async function loader({context}) {
     variables: {
       footerMenuHandle: 'footer', // Adjust to your footer menu handle
     },
-  });
+  })
 
   // await the header query (above the fold)
   const headerPromise = storefront.query(HEADER_QUERY, {
@@ -73,7 +80,7 @@ export async function loader({context}) {
     variables: {
       headerMenuHandle: 'main-menu', // Adjust to your header menu handle
     },
-  });
+  })
 
   return defer(
     {
@@ -88,19 +95,22 @@ export async function loader({context}) {
         'Set-Cookie': await context.session.commit(),
       },
     },
-  );
+  )
 }
 
 export default function App() {
-  const nonce = useNonce();
+  const nonce = useNonce()
   /** @type {LoaderReturnData} */
-  const data = useLoaderData();
+  const data = useLoaderData()
 
   return (
-    <html lang="en">
+    <html lang='en'>
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta charSet='utf-8' />
+        <meta
+          name='viewport'
+          content='width=device-width,initial-scale=1'
+        />
         <Meta />
         <Links />
       </head>
@@ -112,35 +122,38 @@ export default function App() {
         <Scripts nonce={nonce} />
       </body>
     </html>
-  );
+  )
 }
 
 export function ErrorBoundary() {
-  const error = useRouteError();
+  const error = useRouteError()
   /** @type {LoaderReturnData} */
-  const rootData = useLoaderData();
-  const nonce = useNonce();
-  let errorMessage = 'Unknown error';
-  let errorStatus = 500;
+  const rootData = useLoaderData()
+  const nonce = useNonce()
+  let errorMessage = 'Unknown error'
+  let errorStatus = 500
 
   if (isRouteErrorResponse(error)) {
-    errorMessage = error?.data?.message ?? error.data;
-    errorStatus = error.status;
+    errorMessage = error?.data?.message ?? error.data
+    errorStatus = error.status
   } else if (error instanceof Error) {
-    errorMessage = error.message;
+    errorMessage = error.message
   }
 
   return (
-    <html lang="en">
+    <html lang='en'>
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta charSet='utf-8' />
+        <meta
+          name='viewport'
+          content='width=device-width,initial-scale=1'
+        />
         <Meta />
         <Links />
       </head>
       <body>
         <Layout {...rootData}>
-          <div className="route-error">
+          <div className='route-error'>
             <h1>Oops</h1>
             <h2>{errorStatus}</h2>
             {errorMessage && (
@@ -154,7 +167,7 @@ export function ErrorBoundary() {
         <Scripts nonce={nonce} />
       </body>
     </html>
-  );
+  )
 }
 
 const MENU_FRAGMENT = `#graphql
@@ -181,7 +194,7 @@ const MENU_FRAGMENT = `#graphql
       ...ParentMenuItem
     }
   }
-`;
+`
 
 const HEADER_QUERY = `#graphql
   fragment Shop on Shop {
@@ -212,7 +225,7 @@ const HEADER_QUERY = `#graphql
     }
   }
   ${MENU_FRAGMENT}
-`;
+`
 
 const FOOTER_QUERY = `#graphql
   query Footer(
@@ -225,7 +238,7 @@ const FOOTER_QUERY = `#graphql
     }
   }
   ${MENU_FRAGMENT}
-`;
+`
 
 /** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
 /** @typedef {import('@remix-run/react').ShouldRevalidateFunction} ShouldRevalidateFunction */