chore: reformat code

Weaverse · Jun 14, 2024 · 7b6cfac · 7b6cfac
1 parent 10b4520
commit 7b6cfac
Show file tree

Hide file tree

Showing 19 changed files with 5,499 additions and 1,849 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -2,7 +2,14 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [["@weaverse/core", "@weaverse/react", "@weaverse/hydrogen", "@weaverse/shopify"]],
+  "fixed": [
+    [
+      "@weaverse/core",
+      "@weaverse/react",
+      "@weaverse/hydrogen",
+      "@weaverse/shopify"
+    ]
+  ],
   "linked": [],
   "access": "public",
   "baseBranch": "main",

diff --git a/.prettierignore b/.prettierignore
@@ -9,3 +9,4 @@ dist/**
 /.pnpm-store/
 /pnpm-global/
 /packages/core/pnpm-global/
+/templates/**
diff --git a/docs/guides/component-schema.md b/docs/guides/component-schema.md
@@ -138,7 +138,11 @@ toolbar ? : (HydrogenToolbarAction | HydrogenToolbarAction[])[]
 Determines the available actions (like duplicate, delete, general settings) for the component in the studio.
 
 ```tsx
-type HydrogenToolbarAction = 'general-settings' | 'settings-level-2' | 'duplicate' | 'delete'
+type HydrogenToolbarAction =
+  | 'general-settings'
+  | 'settings-level-2'
+  | 'duplicate'
+  | 'delete'
 ```
 
 ## Example

diff --git a/docs/guides/csp.md b/docs/guides/csp.md
@@ -33,7 +33,8 @@ export default async function handleRequest(
   const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     ...getWeaverseCsp(request, context),
     shop: {
-      checkoutDomain: context.env?.PUBLIC_CHECKOUT_DOMAIN || context.env?.PUBLIC_STORE_DOMAIN,
+      checkoutDomain:
+        context.env?.PUBLIC_CHECKOUT_DOMAIN || context.env?.PUBLIC_STORE_DOMAIN,
       storeDomain: context.env?.PUBLIC_STORE_DOMAIN,
     },
   })
@@ -81,7 +82,8 @@ Weaverse uses default CSP policies that are suitable for most needs, defined in
  */
 export function getWeaverseCsp(request: Request, context: AppLoadContext) {
   let url = new URL(request.url)
-  let weaverseHost = url.searchParams.get('weaverseHost') || context.env.WEAVERSE_HOST
+  let weaverseHost =
+    url.searchParams.get('weaverseHost') || context.env.WEAVERSE_HOST
   let isDesignMode = url.searchParams.get('weaverseHost')
   let weaverseHosts = ['*.weaverse.io', '*.shopify.com', '*.myshopify.com']
   if (weaverseHost) {
@@ -112,7 +114,12 @@ export function getWeaverseCsp(request: Request, context: AppLoadContext) {
 If you need to customize CSP for specific requirements, such as loading external scripts or enabling additional integrations, update the `getWeaverseCsp` function with the appropriate sources. For example, to allow scripts from additional external domains, you might modify the `scriptSrc` directive:
 
 ```tsx
-scriptSrc: ['cdn.example.com', 'www.googletagmanager.com', '*.clarity.ms', ...weaverseHosts]
+scriptSrc: [
+  'cdn.example.com',
+  'www.googletagmanager.com',
+  '*.clarity.ms',
+  ...weaverseHosts,
+]
 ```
 
 For detailed guidance on CSP directive values, visit [content-security-policy.com](https://content-security-policy.com/).

diff --git a/docs/guides/fetching-and-caching.md b/docs/guides/fetching-and-caching.md
@@ -41,7 +41,11 @@ Let's delve a bit deeper:
 Here's a sample to give you an idea:
 
 ```tsx
-import { ComponentLoaderArgs, getSelectedProductOptions, WeaverseProduct } from '@weaverse/hydrogen'
+import {
+  ComponentLoaderArgs,
+  getSelectedProductOptions,
+  WeaverseProduct,
+} from '@weaverse/hydrogen'
 import { PRODUCT_QUERY } from '~/data/queries'
 import { ProductInfoQuery } from 'storefrontapi.generated'
 

diff --git a/docs/guides/input-settings.md b/docs/guides/input-settings.md
@@ -419,15 +419,24 @@ interface ImageGalleryItemProps extends HydrogenComponentProps {
   source: WeaverseImage
 }
 
-let ImageGalleryItem = forwardRef<HTMLImageElement, ImageGalleryItemProps>((props, ref) => {
-  let { source, ...rest } = props
-  /*
+let ImageGalleryItem = forwardRef<HTMLImageElement, ImageGalleryItemProps>(
+  (props, ref) => {
+    let { source, ...rest } = props
+    /*
       Pass the object returned from the `image` input (name it as you like, e.g., `source`)
       directly to the `data` prop of the `Image` component.
       This will automatically generate all the necessary attributes for the image element.
     */
-  return <Image ref={ref} {...rest} data={source} sizes={`(min-width: 45em) 50vw, 100vw`} />
-})
+    return (
+      <Image
+        ref={ref}
+        {...rest}
+        data={source}
+        sizes={`(min-width: 45em) 50vw, 100vw`}
+      />
+    )
+  },
+)
 
 export default ImageGalleryItem
 ```
@@ -484,7 +493,13 @@ let date = new Date(timestamp)
 
 // Parsing examples:
 console.log(date.toISOString().split('T')[0]) // => "2024-01-01"
-console.log(date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })) // => "January 1, 2024"
+console.log(
+  date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  }),
+) // => "January 1, 2024"
 ```
 
 #### `map-autocomplete`

diff --git a/docs/guides/localization.md b/docs/guides/localization.md
@@ -46,7 +46,8 @@ import { countries } from '~/data/countries'
 
 export function getLocaleFromRequest(request: Request): I18nLocale {
   const url = new URL(request.url)
-  const firstPathPart = '/' + url.pathname.substring(1).split('/')[0].toLowerCase()
+  const firstPathPart =
+    '/' + url.pathname.substring(1).split('/')[0].toLowerCase()
 
   return countries[firstPathPart]
     ? {

diff --git a/docs/guides/rendering-page.md b/docs/guides/rendering-page.md
@@ -32,7 +32,12 @@ export async function loader({ context }: RouteLoaderArgs) {
 The **`loadPage()`** function takes an optional object as its parameters:
 
 ```tsx
-async function loadPage(params?: { strategy?: AllCacheOptions; type?: PageType; locale?: string; handle?: string }) {}
+async function loadPage(params?: {
+  strategy?: AllCacheOptions
+  type?: PageType
+  locale?: string
+  handle?: string
+}) {}
 ```
 
 - **`strategy`**: Sets the caching strategy for the page data. Defaults to **`CacheShort()`**. Dive deeper into caching
@@ -137,6 +142,11 @@ import { GenericError } from '~/components/GenericError'
 import { components } from './components'
 
 export function WeaverseContent() {
-  return <WeaverseHydrogenRoot components={components} errorComponent={GenericError} />
+  return (
+    <WeaverseHydrogenRoot
+      components={components}
+      errorComponent={GenericError}
+    />
+  )
 }
 ```
diff --git a/docs/guides/weaverse-component.md b/docs/guides/weaverse-component.md
@@ -22,15 +22,22 @@ A Weaverse Component file typically comprises these parts:
 An abbreviated glance at each part:
 
 ```tsx
-import type { ComponentLoaderArgs, HydrogenComponentProps, HydrogenComponentSchema } from '@weaverse/hydrogen'
+import type {
+  ComponentLoaderArgs,
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen'
 import { forwardRef } from 'react'
 
 type MyComponentData = {
   heading: string
   // More type definitions...
 }
 
-type MyComponentProps = HydrogenComponentProps<Awaited<ReturnType<typeof loader>>> & MyComponentData
+type MyComponentProps = HydrogenComponentProps<
+  Awaited<ReturnType<typeof loader>>
+> &
+  MyComponentData
 
 let MyComponent = forwardRef<HTMLElement, MyComponentProps>((props, ref) => {
   let { heading, loaderData, ...rest } = props

diff --git a/docs/hydrogen/tutorial.md b/docs/hydrogen/tutorial.md
@@ -218,8 +218,12 @@ const UserCard = () => {
         width="320"
       />
       <div className="p-4">
-        <h2 className="text-2xl font-bold hover:text-gray-700 transition-all duration-200">Emily Johnson</h2>
-        <h3 className="text-gray-500 hover:text-gray-600 transition-all duration-200">Front-end Developer</h3>
+        <h2 className="text-2xl font-bold hover:text-gray-700 transition-all duration-200">
+          Emily Johnson
+        </h2>
+        <h3 className="text-gray-500 hover:text-gray-600 transition-all duration-200">
+          Front-end Developer
+        </h3>
         <p className="mt-2 text-gray-600 hover:text-gray-700 transition-all duration-200">
           Passionate about creating interactive user interfaces.
         </p>
@@ -241,13 +245,15 @@ const UserCard = () => {
 
 ```tsx
 interface UserProfilesProps extends HydrogenComponentProps {}
-const UserProfiles = forwardRef<HTMLDivElement, UserProfilesProps>((props, ref) => {
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-      <UserCard />
-    </div>
-  )
-})
+const UserProfiles = forwardRef<HTMLDivElement, UserProfilesProps>(
+  (props, ref) => {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+        <UserCard />
+      </div>
+    )
+  },
+)
 
 export default UserProfiles
 ```
@@ -427,7 +433,11 @@ It's time to finalize the `UserProfiles` section. Update your code with the foll
 // app/sections/user-profiles/index.tsx
 
 import { Image } from '@shopify/hydrogen'
-import type { ComponentLoaderArgs, HydrogenComponentProps, HydrogenComponentSchema } from '@weaverse/hydrogen'
+import type {
+  ComponentLoaderArgs,
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen'
 import { Button } from '~/components'
 import { METAOBJECTS_QUERY } from '~/data/queries'
 import clsx from 'clsx'
@@ -439,7 +449,9 @@ const UserCard = ({ user }: { user: any }) => {
   let imageData = image?.reference?.image
   let name = fields.find((field: any) => field.key === 'name')?.value
   let role = fields.find((field: any) => field.key === 'role')?.value
-  let description = fields.find((field: any) => field.key === 'description')?.value
+  let description = fields.find(
+    (field: any) => field.key === 'description',
+  )?.value
   return (
     <div
       className="flex flex-col gap-2 items-center border bg-card text-card-foreground rounded-lg overflow-hidden shadow-lg max-w-sm mx-auto hover:shadow-xl transition-all duration-200"
@@ -451,9 +463,15 @@ const UserCard = ({ user }: { user: any }) => {
         style={{ aspectRatio: '320/320', objectFit: 'contain' }}
       />
       <div className="p-4">
-        <h2 className="text-2xl font-bold hover:text-gray-700 transition-all duration-200">{name}</h2>
-        <h3 className="text-gray-500 hover:text-gray-600 transition-all duration-200">{role}</h3>
-        <p className="mt-2 text-gray-600 hover:text-gray-700 transition-all duration-200">{description}</p>
+        <h2 className="text-2xl font-bold hover:text-gray-700 transition-all duration-200">
+          {name}
+        </h2>
+        <h3 className="text-gray-500 hover:text-gray-600 transition-all duration-200">
+          {role}
+        </h3>
+        <p className="mt-2 text-gray-600 hover:text-gray-700 transition-all duration-200">
+          {description}
+        </p>
         <div className="flex mt-4 space-x-2">
           <Button>Follow</Button>
           <Button variant={'secondary'}>Message</Button>
@@ -471,35 +489,44 @@ interface UserProfilesProps extends HydrogenComponentProps {
   itemsPerRow: number
 }
 
-const UserProfiles = forwardRef<HTMLDivElement, UserProfilesProps>((props, ref) => {
-  let { loaderData, metaObjectData, itemsPerRow, className, ...rest } = props
-  if (!metaObjectData) {
+const UserProfiles = forwardRef<HTMLDivElement, UserProfilesProps>(
+  (props, ref) => {
+    let { loaderData, metaObjectData, itemsPerRow, className, ...rest } = props
+    if (!metaObjectData) {
+      return (
+        <section
+          className={clsx(
+            'w-full px-6 py-12 md:py-24 lg:py-32 bg-amber-50 mx-auto',
+            className,
+          )}
+          ref={ref}
+          {...rest}
+        >
+          <p className="text-center">Please select a metaobject definition</p>
+        </section>
+      )
+    }
     return (
-      <section
-        className={clsx('w-full px-6 py-12 md:py-24 lg:py-32 bg-amber-50 mx-auto', className)}
+      <div
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4"
         ref={ref}
         {...rest}
       >
-        <p className="text-center">Please select a metaobject definition</p>
-      </section>
-    )
-  }
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4" ref={ref} {...rest}>
-      <div
-        className="grid w-fit mx-auto"
-        style={{
-          gridTemplateColumns: `repeat(${itemsPerRow}, minmax(0, 1fr))`,
-          gap: '16rem',
-        }}
-      >
-        {loaderData?.userProfiles.map((user: any) => {
-          return <UserCard key={user.id} user={user} />
-        })}
+        <div
+          className="grid w-fit mx-auto"
+          style={{
+            gridTemplateColumns: `repeat(${itemsPerRow}, minmax(0, 1fr))`,
+            gap: '16rem',
+          }}
+        >
+          {loaderData?.userProfiles.map((user: any) => {
+            return <UserCard key={user.id} user={user} />
+          })}
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  },
+)
 ```
 
 The updated `UserProfiles` component utilizes data fetched by the loader function. This data is passed from the `loaderData` prop and used to render individual `UserCard` components for each user profile, displaying the user's name, role, description, and avatar.

diff --git a/docs/migration/hydrogen-to-weaverse.md b/docs/migration/hydrogen-to-weaverse.md
@@ -250,7 +250,9 @@ import { getWeaverseCsp } from '~/weaverse/weaverse.server'
 
 // ...
 
-const { nonce, header, NonceProvider } = createContentSecurityPolicy(getWeaverseCsp(request))
+const { nonce, header, NonceProvider } = createContentSecurityPolicy(
+  getWeaverseCsp(request),
+)
 ```
 
 ### Updating app/root.tsx for Weaverse Theme Settings

diff --git a/package.json b/package.json
@@ -50,7 +50,19 @@
     "plugins": [
       "prettier-plugin-tailwindcss",
       "@ianvs/prettier-plugin-sort-imports"
-    ]
+    ],
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "printWidth": 80,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
   },
   "dependencies": {
     "@changesets/cli": "^2.27.5"