More fixes

examples/magento-graphcms/pages/account/index.tsx

@@ -1,5 +1,5 @@
 import { PageOptions } from '@graphcommerce/framer-next-pages'
-import { cacheFirst, useQuery } from '@graphcommerce/graphql'
+import { cacheFirst } from '@graphcommerce/graphql'
 import {
   AccountDashboardDocument,
   AccountMenu,

examples/magento-graphcms/pages/checkout/customer/addresses/edit.tsx

@@ -76,7 +76,7 @@ function CheckoutCustomerAddressesEdit() {
             </div>
           )}
 
-          {address && !loading && <EditAddressForm onCompleteRoute='/checkout' address={address} />}
+          {address && !loading && <EditAddressForm address={address} />}
         </SectionContainer>
       </Container>
     </>

examples/magento-graphcms/pages/checkout/success.tsx

@@ -74,7 +74,7 @@ function OrderSuccessPage() {
 
             <SignupNewsletter />
 
-            <InlineAccount accountHref='/account' />
+            <InlineAccount />
 
             <Box textAlign='center' m={8}>
               <Button href='/' color='primary' variant='pill' size='large' id='back-to-home'>

packages/algolia-products/mesh/algoliaFacetsToAggregations.ts

@@ -109,6 +109,7 @@ export function algoliaPricesToPricesAggregations(pricesList: {
   return Object.values(pricesBucket)
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function assertAlgoliaFacets(facets: any): facets is AlgoliaFacets {
   return true
 }

packages/algolia-products/mesh/algoliaHitToMagentoProduct.ts

@@ -11,8 +11,6 @@ import type {
   ResolversParentTypes,
   ResolversTypes,
 } from '@graphcommerce/graphql-mesh'
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { GraphQLResolveInfo } from 'graphql'
 import type { GetStoreConfigReturn } from './getStoreConfig'
 
 export function assertAdditional(

packages/algolia-recommend/mesh/getRecommendations.ts

@@ -84,7 +84,7 @@ export async function getRecommendations<
     )
   } catch (e) {
     if (isGraphQLError(e)) {
-      console.log(
+      console.info(
         'There was an error retrieving Algolia Recommendations, make sure the recommendation models are created',
         e,
       )

packages/algolia-search/package.json

@@ -31,6 +31,7 @@
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
     "next": "*",
+    "react": "^18.3.1",
     "react-instantsearch-hooks-web": "^6.47.3"
   }
 }

packages/demo-magento-graphcommerce/plugins/demo/DemoRecentlyViewedProducts.tsx

@@ -23,7 +23,7 @@ export const config: PluginConfig = {
 }
 
 export function RecentlyViewedProducts(props: PluginProps<RecentlyViewedProductsProps>) {
-  const { Prev, exclude, title, productListRenderer, loading = 'lazy', ...scrollerProps } = props
+  const { exclude, title, productListRenderer, loading = 'lazy' } = props
 
   const ref = useRef<HTMLDivElement>(null)
   const isInView = useInView(ref, { margin: '300px' })

packages/ecommerce-ui/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,6 +1,5 @@
 import type { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
-import { Trans } from '@lingui/react'
 import type { AlertProps, SxProps, Theme } from '@mui/material'
 import { Alert, Box } from '@mui/material'
 import { maskNetworkError } from './maskNetworkError'

packages/ecommerce-ui/components/FormComponents/AutoCompleteElement.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
-import { Controller, useController } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { AutocompleteProps, TextFieldProps } from '@mui/material'
 import { Autocomplete, Checkbox, TextField, CircularProgress } from '@mui/material'
@@ -19,6 +19,7 @@ export type AutocompleteElementProps<
   label?: TextFieldProps['label']
   showCheckbox?: boolean
   autocompleteProps?: Omit<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     AutocompleteProps<T, M, D, any>,
     'name' | 'options' | 'loading' | 'renderInput'
   >
@@ -48,6 +49,7 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   shouldUnregister,
 }: AutocompleteElementProps<
   TFieldValues,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   AutoDefault | string | any,
   boolean | undefined,
   boolean | undefined
@@ -75,7 +77,8 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   let currentValue = multiple ? value || [] : value || null
   if (matchId) {
     currentValue = multiple
-      ? values.map((i: any) => options.find((j) => (j.id || j) === i))
+      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        values.map((i: any) => options.find((j) => (j.id || j) === i))
       : options.find((i) => (i.id || i) === value) || null
   }
 

packages/ecommerce-ui/components/FormComponents/CheckboxButtonGroup.tsx

@@ -13,12 +13,14 @@ import {
 } from '@mui/material'
 
 export type CheckboxButtonGroupProps<T extends FieldValues> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { id: string | number; label: string }[] | any[]
   helperText?: string
   required?: boolean
   label?: string
   labelKey?: string
   valueKey?: string
+  // eslint-disable-next-line @typescript-eslint/ban-types
   onChange?: Function
   returnObject?: boolean
   disabled?: boolean
@@ -63,13 +65,17 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
   const parsedHelperText = error ? error.message : helperText
 
   const handleChange = (index: number | string) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const newArray: (string | number)[] | any[] = [...value]
     const exists =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)) === -1
     if (exists) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       newArray.push(returnObject ? options.find((i) => i[valueKey] === index) : index)
     } else {
       newArray.splice(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)),
         1,
       )
@@ -94,7 +100,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
             )
           }
           const isChecked =
-            value.findIndex((item: any) =>
+            value.findIndex((item) =>
               returnObject ? item[valueKey] === optionKey : item === optionKey,
             ) !== -1
           return (
@@ -108,6 +114,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
                   value={optionKey}
                   checked={isChecked}
                   disabled={disabled}
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                   onChange={() => handleChange(optionKey)}
                 />
               }

packages/ecommerce-ui/components/FormComponents/MultiSelectElement.tsx

@@ -16,6 +16,7 @@ import {
 } from '@mui/material'
 
 export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, 'value'> & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { id: string | number; label: string }[] | any[]
   label?: string
   itemKey?: string
@@ -127,12 +128,14 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             : showChips
               ? (selected) => (
                   <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                     {((selected as any[]) || []).map((selectedValue) => (
                       <Chip
                         key={selectedValue}
                         label={selectedValue}
                         style={{ display: 'flex', flexWrap: 'wrap' }}
                         onDelete={() => {
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
                           onChange(value.filter((i: any) => i !== selectedValue))
                           // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
                         }}

packages/ecommerce-ui/components/FormComponents/RadioButtonGroup.tsx

@@ -13,6 +13,7 @@ import {
 import type { ChangeEvent } from 'react'
 
 export type RadioButtonGroupProps<T extends FieldValues> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { label: string; id: string | number }[] | any[]
   helperText?: string
   required?: boolean
@@ -21,6 +22,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   valueKey?: string
   type?: 'number' | 'string'
   emptyOptionLabel?: 'string'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (value: any) => void
   returnObject?: boolean
   row?: boolean
@@ -96,7 +98,7 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
             value=''
           />
         )}
-        {options.map((option: any) => {
+        {options.map((option) => {
           const optionKey = option[valueKey]
           if (!optionKey) {
             console.error(

packages/ecommerce-ui/components/FormComponents/SelectElement.tsx

@@ -84,6 +84,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
           ),
       }}
     >
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
       {isNativeSelect && <option />}
       {options.map((item) => (
         <ChildComponent key={item.id} value={item.id}>

packages/ecommerce-ui/components/FormComponents/SliderElement.tsx

@@ -1,5 +1,5 @@
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
-import { FieldError, useController } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { FormControlProps, SliderProps } from '@mui/material'
 import { FormControl, FormHelperText, FormLabel, Slider } from '@mui/material'

packages/ecommerce-ui/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,5 +1,5 @@
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
-import { FieldError, useController } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { FormLabelProps, ToggleButtonGroupProps, ToggleButtonProps } from '@mui/material'
 import {
@@ -81,9 +81,9 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
           }
         }}
       >
-        {options.map(({ label, id, ...toggleProps }) => (
+        {options.map(({ label: labelVal, id, ...toggleProps }) => (
           <ToggleButton value={id} {...toggleProps} key={id}>
-            {label}
+            {labelVal}
           </ToggleButton>
         ))}
       </ToggleButtonGroup>

packages/ecommerce-ui/components/PreviewMode/PreviewMode.tsx

@@ -47,6 +47,7 @@ function PreviewModeEnabled() {
   const revalidateHandler = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()
     Object.entries(formValues).forEach(([key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       url.searchParams.append(key, `${value}`)
     })
     url.searchParams.append('action', 'revalidate')

packages/ecommerce-ui/components/PreviewMode/PreviewModeActions.tsx

@@ -1,6 +1,6 @@
 export type PreviewModeActionsProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function PreviewModeActions(props: PreviewModeActionsProps) {
-  const {} = props
-  return <></>
+  return null
 }

packages/ecommerce-ui/components/PreviewMode/PreviewModeToolbar.tsx

@@ -1,6 +1,6 @@
 export type PreviewModeToolbarProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function PreviewModeToolbar(props: PreviewModeToolbarProps) {
-  const {} = props
   return null
 }

packages/ecommerce-ui/components/WaitForQueries/WaitForQueries.tsx

@@ -3,11 +3,8 @@ import { useIsSSR } from '@graphcommerce/next-ui'
 import React from 'react'
 
 export type WaitForQueriesProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
-  /**
-   * @deprecated Will be automatically correct.
-   */
-  noSsr?: boolean
   children: React.ReactNode
   fallback?: React.ReactNode
 }

packages/framer-next-pages/components/Page.tsx

@@ -1,6 +1,6 @@
 import { dvh } from '@graphcommerce/framer-utils'
 import { m, useIsPresent } from 'framer-motion'
-import React, { HTMLAttributes } from 'react'
+import React from 'react'
 import type { PageItem } from '../types'
 
 export type PageProps = Pick<PageItem, 'routerKey'> & {

packages/framer-next-pages/components/PageRenderer.tsx

@@ -6,7 +6,9 @@ import React, { useMemo } from 'react'
 import { pageRouterContext } from '../context/pageRouterContext'
 import type { PageItem } from '../types'
 
-const NoLayout: React.FC<{ children?: React.ReactNode }> = ({ children }) => <>{children}</>
+function NoLayout({ children }: { children?: React.ReactNode }) {
+  return <>{children}</>
+}
 
 export type PageRendererProps = Omit<AppPropsType, 'router'> & {
   Layout: React.ComponentType<AppPropsType>

packages/framer-next-pages/example/package.json

@@ -17,6 +17,15 @@
     }
   },
   "dependencies": {
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "11.12.0",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.13.0",
+    "@graphcommerce/framer-next-pages": "9.0.0-canary.102",
+    "@graphcommerce/framer-scroller": "9.0.0-canary.102",
+    "@graphcommerce/framer-utils": "9.0.0-canary.102",
+    "@graphcommerce/image": "9.0.0-canary.102",
+    "@graphcommerce/next-ui": "9.0.0-canary.102",
     "@lingui/core": "4.11.4",
     "@lingui/macro": "4.11.4",
     "@lingui/react": "4.11.4",

packages/framer-next-pages/example/pages/_app.tsx

@@ -3,6 +3,7 @@
 import '../demo.css'
 import type { PageComponent } from '@graphcommerce/framer-next-pages'
 import { FramerNextPages } from '@graphcommerce/framer-next-pages'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { LinguiProvider } from '@graphcommerce/lingui-next'
 import { responsiveVal } from '@graphcommerce/next-ui'
 import { createTheme, CssBaseline, ThemeProvider } from '@mui/material'

packages/framer-scroller/components/ScrollerBar.tsx

@@ -53,7 +53,7 @@ export function ScrollerBar(props: ScrollerBarProps) {
 
   const scrollProgress = scroll[`${direction}Progress`]
 
-  const thumbSize = useTransform(scrollProgress, (directionProgress) => {
+  const thumbSize = useTransform(scrollProgress, () => {
     if (!scrollerRef.current) return 0
     const trackWidth = scrollerRef.current[offsetSize]
     return trackWidth * (trackWidth / scrollerRef.current[scrollSize])

packages/framer-scroller/example/package.json

@@ -10,6 +10,18 @@
     "start": "next start"
   },
   "dependencies": {
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "11.12.0",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.13.0",
+    "@graphcommerce/framer-next-pages": "9.0.0-canary.102",
+    "@graphcommerce/framer-scroller": "9.0.0-canary.102",
+    "@graphcommerce/framer-utils": "9.0.0-canary.102",
+    "@graphcommerce/image": "9.0.0-canary.102",
+    "@graphcommerce/lingui-next": "9.0.0-canary.102",
+    "@graphcommerce/next-config": "9.0.0-canary.102",
+    "@graphcommerce/next-ui": "9.0.0-canary.102",
+    "@lingui/conf": "4.11.4",
     "@lingui/core": "4.11.4",
     "@lingui/macro": "4.11.4",
     "@lingui/react": "4.11.4",

packages/framer-utils/hooks/useMotionSelector.ts

@@ -3,10 +3,12 @@ import { startTransition, useState } from 'react'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 type UnwrapMotionValue<T> = T extends MotionValue<infer U> ? U : T
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type UnwrapMotionValues<T extends [...any[]]> = T extends [infer Head, ...infer Tail]
   ? [UnwrapMotionValue<Head>, ...UnwrapMotionValues<Tail>]
   : []
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useMotionSelector<T extends [...any[]], R>(
   motionValues: readonly [...T],
   effect: (v: UnwrapMotionValues<T>) => R,

packages/google-datalayer/api/sendEvent.ts

@@ -6,7 +6,9 @@ export type SendEvent = (
 ) => void
 
 export function sendEvent<Event extends keyof GoogleEventTypes>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   eventName: Event,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   eventData: GoogleEventTypes[Event],
 ) {
   // This is a generic event handler and is plugins from google-analytics and google datalayer

packages/google-datalayer/components/DatalayerViewItemList.tsx

@@ -18,7 +18,7 @@ export function useViewItemList() {
   const context = useContext(DatalayerSelectItemContext)
   if (!context) {
     return (itemId: string) => {
-      console.log(`No DatalayerSelectItemContext provider found, trying to select item ${itemId}`)
+      console.warn(`No DatalayerSelectItemContext provider found, trying to select item ${itemId}`)
     }
   }
   return context

packages/google-datalayer/package.json

@@ -19,6 +19,7 @@
     "@graphcommerce/magento-product": "^9.0.0-canary.102",
     "@graphcommerce/next-ui": "^9.0.0-canary.102",
     "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.102",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.102",
     "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.102",
     "@mui/material": "^5.14.20",
     "next": "^14",