diff --git a/.eslintignore b/.eslintignore index a362bca..482809e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,5 @@ node_modules bin *.d.ts dist +/customer-accountapi.generated.d.ts +/storefrontapi.generated.d.ts diff --git a/.eslintrc.js b/.eslintrc.js index 6d3e0ee..09826a5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,3 @@ -/** - * @type {import("@types/eslint").Linter.BaseConfig} - */ module.exports = { extends: ['@remix-run/eslint-config'], rules: { @@ -10,8 +7,6 @@ module.exports = { 'no-useless-escape': 'off', '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', 'no-case-declarations': 'off', - // TODO: Remove jest plugin from hydrogen/eslint-plugin - 'jest/no-deprecated-functions': 'off', 'eslint-comments/disable-enable-pair': 'off', 'prefer-const': 'off', 'no-console': 'off', diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d09b78..6a404c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # @weaverse/pilot +## 2.5.3 + +### Patch Changes + +- 3a975da: Adding url input type +- Updated dependencies [3a975da] + - @weaverse/hydrogen@3.1.1 + ## 2.5.2 ### Patch Changes diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx index 2d4ceef..74f7441 100644 --- a/app/components/CountrySelector.tsx +++ b/app/components/CountrySelector.tsx @@ -1,4 +1,4 @@ -import {useFetcher, useLocation, useMatches} from '@remix-run/react'; +import {useFetcher, useLocation} from '@remix-run/react'; import {useCallback, useEffect, useRef} from 'react'; import {useInView} from 'react-intersection-observer'; import clsx from 'clsx'; diff --git a/app/components/FeaturedCollections.tsx b/app/components/FeaturedCollections.tsx index ee1a817..fdf40c3 100644 --- a/app/components/FeaturedCollections.tsx +++ b/app/components/FeaturedCollections.tsx @@ -11,12 +11,15 @@ type FeaturedCollectionsProps = HomepageFeaturedCollectionsQuery & { export function FeaturedCollections({ collections, title = 'Collections', + count, ...props }: FeaturedCollectionsProps) { const haveCollections = collections?.nodes?.length > 0; if (!haveCollections) return null; - const collectionsWithImage = collections.nodes.filter((item) => item.image); + const collectionsWithImage = collections.nodes + .filter((item) => item.image) + .slice(0, count); return (
diff --git a/app/components/FeaturedSection.tsx b/app/components/FeaturedSection.tsx index 3f9b452..337d23a 100644 --- a/app/components/FeaturedSection.tsx +++ b/app/components/FeaturedSection.tsx @@ -13,6 +13,7 @@ export function FeaturedSection() { useEffect(() => { load(path); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [path]); if (!data) return null; diff --git a/app/components/Link.tsx b/app/components/Link.tsx index 56154de..e65bc56 100644 --- a/app/components/Link.tsx +++ b/app/components/Link.tsx @@ -1,12 +1,13 @@ import { Link as RemixLink, NavLink as RemixNavLink, - type NavLinkProps as RemixNavLinkProps, type LinkProps as RemixLinkProps, + type NavLinkProps as RemixNavLinkProps, } from '@remix-run/react'; -import {useRootLoaderData} from '~/root'; import {useThemeSettings} from '@weaverse/hydrogen'; +import {forwardRef} from 'react'; +import {useRootLoaderData} from '~/root'; type LinkProps = Omit & { className?: RemixNavLinkProps['className'] | RemixLinkProps['className']; @@ -27,33 +28,41 @@ type LinkProps = Omit & { * * Ultimately, it is up to you to decide how to implement this behavior. */ -export function Link(props: LinkProps) { - const {to, className, ...resOfProps} = props; - const rootData = useRootLoaderData(); - let {enableViewTransition} = useThemeSettings(); - const selectedLocale = rootData?.selectedLocale; +export let Link = forwardRef( + (props: LinkProps, ref: React.Ref) => { + let {to, className, ...resOfProps} = props; + let rootData = useRootLoaderData(); + let {enableViewTransition} = useThemeSettings(); + let selectedLocale = rootData?.selectedLocale; - let toWithLocale = to; + let toWithLocale = to; - if (typeof toWithLocale === 'string' && selectedLocale?.pathPrefix) { - if (!toWithLocale.toLowerCase().startsWith(selectedLocale.pathPrefix)) { - toWithLocale = `${selectedLocale.pathPrefix}${to}`; + if (typeof toWithLocale === 'string' && selectedLocale?.pathPrefix) { + if (!toWithLocale.toLowerCase().startsWith(selectedLocale.pathPrefix)) { + toWithLocale = `${selectedLocale.pathPrefix}${to}`; + } + } + + if (typeof className === 'function') { + return ( + + ); } - } - if (typeof className === 'function') { return ( - + {...resOfProps} + /> ); - } - - return ; -} + }, +); diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx index e8b5a10..8972b24 100644 --- a/app/components/product-form/product-media.tsx +++ b/app/components/product-form/product-media.tsx @@ -1,7 +1,7 @@ import {Image} from '@shopify/hydrogen'; import clsx from 'clsx'; import {useKeenSlider} from 'keen-slider/react'; -import {useCallback, useEffect, useState} from 'react'; +import {useEffect, useState} from 'react'; import type {MediaFragment} from 'storefrontapi.generated'; interface ProductMediaProps { @@ -39,12 +39,12 @@ export function ProductMedia(props: ProductMediaProps) { }, }; - let [activeInd, setAcitveInd] = useState(0); - const [sliderRef, instanceRef] = useKeenSlider({ + let [activeInd, setActiveInd] = useState(0); + let [sliderRef, instanceRef] = useKeenSlider({ ...slideOptions, - slideChanged(slider) { + slideChanged: (slider) => { let pos = slider.track.details.rel; - setAcitveInd(pos); + setActiveInd(pos); let maxThumbnailIndex = thumbnailInstance.current?.track.details.maxIdx || 0; let thumbnailNext = Math.min( @@ -54,19 +54,18 @@ export function ProductMedia(props: ProductMediaProps) { thumbnailInstance.current?.moveToIdx(thumbnailNext); }, }); - let moveToIdx = useCallback( - (idx: number) => { - setAcitveInd(idx); - if (instanceRef.current) { - instanceRef.current.moveToIdx(idx); - } - }, - [instanceRef], - ); - const [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions); - let handleClickThumbnail = (idx: number) => { + + function moveToIdx(idx: number) { + setActiveInd(idx); + if (instanceRef.current) { + instanceRef.current.moveToIdx(idx); + } + } + + let [thumbnailRef, thumbnailInstance] = useKeenSlider(thumbnailOptions); + function handleClickThumbnail(idx: number) { moveToIdx(idx); - }; + } useEffect(() => { // instanceRef.current?.update(slideOptions); @@ -77,14 +76,10 @@ export function ProductMedia(props: ProductMediaProps) { }); moveToIdx(selectedInd); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedVariant?.id, moveToIdx]); + }, [selectedVariant?.id]); + return ( -
+
{media.map((med, i) => { let image = diff --git a/app/lib/utils.ts b/app/lib/utils.ts index ef38eec..05dc7e8 100644 --- a/app/lib/utils.ts +++ b/app/lib/utils.ts @@ -1,4 +1,4 @@ -import {useLocation, useMatches} from '@remix-run/react'; +import {useLocation} from '@remix-run/react'; import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types'; import type {FulfillmentStatus} from '@shopify/hydrogen/customer-account-api-types'; import typographicBase from 'typographic-base'; diff --git a/app/root.tsx b/app/root.tsx index 8ccf7b2..d13b059 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -151,7 +151,6 @@ function App() { export default withWeaverse(App); const ErrorBoundaryComponent = ({error}: {error: Error}) => { - const nonce = useNonce(); const routeError = useRouteError(); const rootData = useRootLoaderData(); const locale = rootData?.selectedLocale ?? DEFAULT_LOCALE; @@ -175,25 +174,25 @@ const ErrorBoundaryComponent = ({error}: {error: Error}) => { - {isRouteError ? ( - <> - {routeError.status === 404 ? ( - - ) : ( - - )} - - ) : ( - - )} + {isRouteError ? ( + <> + {routeError.status === 404 ? ( + + ) : ( + + )} + + ) : ( + + )} {/*((props, ref) => { } as CSSProperties; return ( -
+
{backgroundImage ? ( ((props, ref) => { {children}
- ); }); @@ -121,11 +129,12 @@ export let schema: HydrogenComponentSchema = { }, { type: 'heading', - content: 'Slide Heading' + content: 'Slide Heading', }, { type: 'description', - content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown." + content: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.", }, { type: 'button', diff --git a/app/sections/blog-post.tsx b/app/sections/blog-post.tsx index bc3806a..2ee90c8 100644 --- a/app/sections/blog-post.tsx +++ b/app/sections/blog-post.tsx @@ -44,7 +44,7 @@ let BlogPost = forwardRef((props, ref) => { by {author?.name}
-
+
diff --git a/app/sections/columns-with-images/column.tsx b/app/sections/columns-with-images/column.tsx new file mode 100644 index 0000000..97736e8 --- /dev/null +++ b/app/sections/columns-with-images/column.tsx @@ -0,0 +1,204 @@ +import {Image} from '@shopify/hydrogen'; +import { + type HydrogenComponentProps, + type HydrogenComponentSchema, + type WeaverseImage, +} from '@weaverse/hydrogen'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; + +interface ColumnWithImageItemProps extends HydrogenComponentProps { + imageSrc: WeaverseImage; + heading: string; + text: string; + buttonLabel: string; + buttonLink: string; + openInNewTab: boolean; + buttonStyle: string; + hideOnMobile: boolean; + size: 'large' | 'medium'; +} + +let sizeMap = { + large: 'col-span-6', + medium: 'col-span-4', +}; + +let FALLBACK_IMAGE = + 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg'; + +let ColumnWithImageItem = forwardRef( + (props, ref) => { + let { + imageSrc, + heading, + text, + buttonLabel, + buttonLink, + openInNewTab, + buttonStyle, + hideOnMobile, + size, + ...rest + } = props; + + let imageData = + typeof imageSrc === 'object' + ? imageSrc + : {url: imageSrc || FALLBACK_IMAGE, altText: imageSrc}; + return ( +
+ +
+ {heading && ( +

+ {heading} +

+ )} + {text && ( +

+ {text} +

+ )} + {buttonLabel && ( + + {buttonLabel} + + )} +
+
+ ); + }, +); + +export default ColumnWithImageItem; + +export let schema: HydrogenComponentSchema = { + type: 'column-with-image--item', + title: 'Column', + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [ + { + group: 'Column', + inputs: [ + { + type: 'image', + name: 'imageSrc', + label: 'Image', + }, + { + type: 'text', + name: 'heading', + label: 'Heading', + placeholder: 'Example heading', + defaultValue: 'Example heading', + }, + { + type: 'richtext', + label: 'Text', + name: 'text', + placeholder: + 'Use this section to promote content throughout every page of your site. Add images for further impact.', + defaultValue: + 'Use this section to promote content throughout every page of your site. Add images for further impact.', + }, + { + type: 'select', + name: 'size', + label: 'Size', + configs: { + options: [ + { + label: 'Large', + value: 'large', + }, + { + label: 'Medium', + value: 'medium', + }, + ], + }, + defaultValue: 'medium', + }, + { + type: 'switch', + label: 'Hide on Mobile', + name: 'hideOnMobile', + defaultValue: false, + }, + { + type: 'heading', + label: 'Button (optional)', + }, + { + type: 'text', + label: 'Button label', + name: 'buttonLabel', + placeholder: 'Button label', + defaultValue: 'Optional button', + }, + { + type: 'toggle-group', + label: 'Button style', + name: 'buttonStyle', + configs: { + options: [ + { + label: 'Primary', + value: 'primary', + }, + { + label: 'Secondary', + value: 'secondary', + }, + { + label: 'Subtle', + value: 'subtle', + }, + ], + }, + defaultValue: 'secondary', + }, + { + type: 'url', + label: 'Button link', + name: 'buttonLink', + placeholder: '/products', + defaultValue: '/products', + }, + { + type: 'switch', + name: 'openInNewTab', + label: 'Open link in new tab', + defaultValue: true, + condition: 'buttonLink.ne.nil', + }, + ], + }, + ], + presets: { + imageSrc: + 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', + children: [ + { + type: 'button', + }, + ], + }, +}; diff --git a/app/sections/columns-with-images/index.tsx b/app/sections/columns-with-images/index.tsx new file mode 100644 index 0000000..7da7fca --- /dev/null +++ b/app/sections/columns-with-images/index.tsx @@ -0,0 +1,38 @@ +import type {HydrogenComponentSchema} from '@weaverse/hydrogen'; +import {forwardRef} from 'react'; +import type {SectionProps} from '~/sections/shared/Section'; +import {Section, sectionInspector} from '~/sections/shared/Section'; + +interface ColumnsWithImagesProps extends SectionProps {} + +let ColumnsWithImages = forwardRef( + (props, ref) => { + let {children, ...rest} = props; + return ( +
+ {children} +
+ ); + }, +); + +export default ColumnsWithImages; + +export let schema: HydrogenComponentSchema = { + type: 'columns-with-images', + title: 'Columns with images', + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [sectionInspector], + childTypes: ['subheading', 'heading', 'description'], + presets: { + children: [ + { + type: 'heading', + content: 'Columns with images', + }, + { + type: 'columns-with-images--items', + }, + ], + }, +}; diff --git a/app/sections/columns-with-images/items.tsx b/app/sections/columns-with-images/items.tsx new file mode 100644 index 0000000..97ef5fe --- /dev/null +++ b/app/sections/columns-with-images/items.tsx @@ -0,0 +1,74 @@ +import { + type HydrogenComponentProps, + type HydrogenComponentSchema, +} from '@weaverse/hydrogen'; +import {forwardRef} from 'react'; + +interface ColumnsWithImagesItemsProps extends HydrogenComponentProps { + gap: number; +} + +let ColumnsWithImagesItems = forwardRef< + HTMLDivElement, + ColumnsWithImagesItemsProps +>((props, ref) => { + let {children, gap, ...rest} = props; + + return ( +
+ {children} +
+ ); +}); + +export default ColumnsWithImagesItems; + +export let schema: HydrogenComponentSchema = { + type: 'columns-with-images--items', + title: 'Items', + inspector: [ + { + group: 'Items', + inputs: [ + { + type: 'range', + label: 'Items gap', + name: 'gap', + configs: { + min: 16, + max: 40, + step: 6, + unit: 'px', + }, + defaultValue: 24, + }, + ], + }, + ], + childTypes: ['column-with-image--item'], + toolbar: ['general-settings', ['duplicate', 'delete']], + presets: { + children: [ + { + type: 'column-with-image--item', + imageSrc: + 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', + }, + { + type: 'column-with-image--item', + imageSrc: + 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', + }, + { + type: 'column-with-image--item', + imageSrc: + 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', + }, + ], + }, +}; diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx index 85bef37..707fe83 100644 --- a/app/sections/image-gallery/image.tsx +++ b/app/sections/image-gallery/image.tsx @@ -57,18 +57,18 @@ export let schema: HydrogenComponentSchema = { title: 'Image', inspector: [ { - group: 'Image Gallery Item', + group: 'Image gallery item', inputs: [ { type: 'image', name: 'src', label: 'Image', defaultValue: - 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg', + 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, { type: 'range', - label: 'Column Span', + label: 'Column span', name: 'columnSpan', configs: { min: 1, @@ -79,7 +79,7 @@ export let schema: HydrogenComponentSchema = { }, { type: 'range', - label: 'Border Radius', + label: 'Border radius', name: 'borderRadius', configs: { min: 0, @@ -91,7 +91,7 @@ export let schema: HydrogenComponentSchema = { }, { type: 'switch', - label: 'Hide on Mobile', + label: 'Hide on mobile', name: 'hideOnMobile', defaultValue: false, }, diff --git a/app/sections/image-gallery/index.tsx b/app/sections/image-gallery/index.tsx index cc7428c..1c4270f 100644 --- a/app/sections/image-gallery/index.tsx +++ b/app/sections/image-gallery/index.tsx @@ -1,15 +1,12 @@ import type {HydrogenComponentSchema} from '@weaverse/hydrogen'; import {forwardRef} from 'react'; import type {SectionProps} from '~/sections/shared/Section'; -import {Section, sectionConfigs} from '~/sections/shared/Section'; +import {Section, sectionInspector} from '~/sections/shared/Section'; -type ImageGalleryProps = SectionProps & { - heading: string; - description: string; -}; +type ImageGalleryProps = SectionProps; let ImageGallery = forwardRef((props, ref) => { - let {heading, description, children, ...rest} = props; + let {children, ...rest} = props; return (
{children} @@ -21,20 +18,20 @@ export default ImageGallery; export let schema: HydrogenComponentSchema = { type: 'image-gallery', - title: 'Image Gallery', - childTypes: ['heading', 'description', 'image-gallery--items'], - inspector: [sectionConfigs], + title: 'Image gallery', + childTypes: ['subheading', 'heading', 'description', 'image-gallery--items'], + inspector: [sectionInspector], toolbar: ['general-settings', ['duplicate', 'delete']], presets: { children: [ { type: 'heading', - content: 'Hello World from Weaverse!', + content: 'Image Gallery', }, { type: 'description', content: - "Stay on trend this season with our newest arrivals. We've curated the latest looks in women's fashion so you can refresh your wardrobe with ease. From flowy dresses and printed blouses perfect for summer, to cozy sweaters and tall boots for cooler months, our new collection has versatile pieces to take you from work to weekend. Shop cute and comfortable athleisure wear, chic handbags, and so much more.", + 'Showcase your chosen images. This visual focus will enhance user engagement and understanding of your offerings.', }, { type: 'image-gallery--items', diff --git a/app/sections/image-gallery/items.tsx b/app/sections/image-gallery/items.tsx index a918dc8..30695df 100644 --- a/app/sections/image-gallery/items.tsx +++ b/app/sections/image-gallery/items.tsx @@ -4,9 +4,9 @@ import { } from '@weaverse/hydrogen'; import {forwardRef} from 'react'; -interface ImageGalleyItemsProps extends HydrogenComponentProps { +type ImageGalleyItemsProps = HydrogenComponentProps & { gap: number; -} +}; let ImageGalleyItems = forwardRef( (props, ref) => { @@ -16,7 +16,7 @@ let ImageGalleyItems = forwardRef(
{children} @@ -29,19 +29,20 @@ export default ImageGalleyItems; export let schema: HydrogenComponentSchema = { type: 'image-gallery--items', - title: 'Items', + title: 'Images', inspector: [ { - group: 'Image', + group: 'Images', inputs: [ { type: 'range', - label: 'Gap', + label: 'Images gap', name: 'gap', configs: { min: 16, max: 40, step: 6, + unit: 'px', }, defaultValue: 16, }, @@ -55,32 +56,32 @@ export let schema: HydrogenComponentSchema = { { type: 'image-gallery--item', columnSpan: 2, - src: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/wv-hand-placed-on-the-iridescent-keys-of-a-small-piano.jpg?v=1694236467', + src: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, { type: 'image-gallery--item', hideOnMobile: true, - src: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/wv-open-novel-with-a-hand-on-it-by-dried-flowers.jpg?v=1694236467', + src: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, { type: 'image-gallery--item', hideOnMobile: true, - src: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/wv-creamy-cold-drink-sits-on-a-wooden-table.jpg?v=1694236467', + src: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, { type: 'image-gallery--item', hideOnMobile: true, - src: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/wv-hands-reach-to-feed-a-flying-seagull.jpg?v=1694236467', + src: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, { type: 'image-gallery--item', hideOnMobile: true, - src: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/wv-nati-melnychuk-5ngCICAXiH0-unsplash.jpg?v=1694231122', + src: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, { type: 'image-gallery--item', columnSpan: 2, - src: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/wv-flatlay-of-a-coffee-mug-and-items-to-plan-travel.jpg?v=1694236467', + src: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/h2-placeholder-image.svg', }, ], }, diff --git a/app/sections/image-hotspots/image-hotspot.tsx b/app/sections/image-hotspots/image-hotspot.tsx index 1571598..6f55cb5 100644 --- a/app/sections/image-hotspots/image-hotspot.tsx +++ b/app/sections/image-hotspots/image-hotspot.tsx @@ -3,11 +3,10 @@ import type { HydrogenComponentSchema, WeaverseImage, } from '@weaverse/hydrogen'; -import { forwardRef } from 'react'; -import { Image } from '@shopify/hydrogen'; -import { CSSProperties } from 'react'; -import { IconImageBlank } from '~/components'; - +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; +import {Image} from '@shopify/hydrogen'; +import {IconImageBlank} from '~/components'; interface ImageHotspotProps extends HydrogenComponentProps { imageHostpots: WeaverseImage; @@ -18,20 +17,39 @@ interface ImageHotspotProps extends HydrogenComponentProps { } let ImageHotspot = forwardRef((props, ref) => { - let { imageHostpots, heading, children, sectionHeight, topPadding, bottomPadding, ...rest } = props; + let { + imageHostpots, + heading, + children, + sectionHeight, + topPadding, + bottomPadding, + ...rest + } = props; let sectionStyles: CSSProperties = { '--section-height': `${sectionHeight}px`, paddingTop: `${topPadding}px`, - paddingBottom: `${bottomPadding}px` + paddingBottom: `${bottomPadding}px`, } as CSSProperties; return ( -
+

{heading}

-
- {imageHostpots ? : -
- -
} +
+ {imageHostpots ? ( + + ) : ( +
+ +
+ )} {children}
diff --git a/app/sections/image-hotspots/items.tsx b/app/sections/image-hotspots/items.tsx index ca5ad78..cfe4191 100644 --- a/app/sections/image-hotspots/items.tsx +++ b/app/sections/image-hotspots/items.tsx @@ -1,18 +1,17 @@ -import { +import type { + ComponentLoaderArgs, HydrogenComponentProps, HydrogenComponentSchema, - ComponentLoaderArgs, - getSelectedProductOptions, WeaverseProduct, } from '@weaverse/hydrogen'; -import { forwardRef } from 'react'; -import { Image } from '@shopify/hydrogen'; -import { ProductQuery } from 'storefrontapi.generated'; -import { PRODUCT_QUERY } from '~/data/queries'; +import {getSelectedProductOptions} from '@weaverse/hydrogen'; +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; +import {Image} from '@shopify/hydrogen'; +import type {ProductQuery} from 'storefrontapi.generated'; +import {PRODUCT_QUERY} from '~/data/queries'; import clsx from 'clsx'; -import { CSSProperties } from 'react'; -import { IconImageBlank } from '~/components'; - +import {IconImageBlank, Link} from '~/components'; type ProductData = { verticalPosition: number; @@ -25,49 +24,145 @@ type ProductsHotspotProps = HydrogenComponentProps< > & ProductData; -let ProductHotspotItems = forwardRef((props, ref) => { - let { product, verticalPosition, horizontalPosition, loaderData, ...rest } = props; - const ProductImage = loaderData?.product?.variants.nodes.map((variant) => variant.image); - const ProductPrice = loaderData?.product?.variants.nodes.map((variant) => variant.price.amount) || '0.00'; - const ProductCurrency = loaderData?.product?.variants.nodes.map((variant) => variant.price.currencyCode) || '$'; - const ProductTittle = loaderData?.product?.title || 'Product title'; - console.log(loaderData?.product); +let ProductHotspotItems = forwardRef( + (props, ref) => { + let {product, verticalPosition, horizontalPosition, loaderData, ...rest} = + props; + + let Horizontal = + horizontalPosition >= 50 ? 'left-auto right-1/2' : 'right-auto left-1/2'; + let Vertical = + verticalPosition >= 50 ? 'top-auto bottom-full' : 'bottom-auto top-full'; - let Horizontal = horizontalPosition >= 50 ? 'left-auto right-1/2' : 'right-auto left-1/2'; - let Vertical = verticalPosition >= 50 ? 'top-auto bottom-full' : 'bottom-auto top-full'; - let sectionStyle: CSSProperties = { - left: `${horizontalPosition}%`, - top: `${verticalPosition}%`, - } as CSSProperties; - return ( -
- - - -
-
- {ProductImage ? ProductImage.map((image, index) => ( - + + - )) : - } + +
+
+ +
+
+

+ Product title +

+

+ 0.00 $ +

+

+ Please select product +

+
+
-
-

{ProductTittle}

-

{`${ProductPrice} ${ProductCurrency}`}

+ ); + } + + const ProductImage = loaderData?.product?.variants.nodes.map( + (variant) => variant.image, + ); + const ProductPrice = + loaderData?.product?.variants.nodes.map( + (variant) => variant.price.amount, + ) || '0.00'; + const ProductCurrency = + loaderData?.product?.variants.nodes.map( + (variant) => variant.price.currencyCode, + ) || '$'; + const ProductTittle = loaderData?.product?.title || 'Product title'; + + return ( +
+ + + +
+
+ {ProductImage ? ( + ProductImage.map((image, index) => ( + + )) + ) : ( + + )} +
+
+

+ {ProductTittle} +

+

{`${ProductPrice} ${ProductCurrency}`}

+ {product.handle && ( + + See details + + )} +
-
- ); -}); + ); + }, +); export default ProductHotspotItems; export let loader = async (args: ComponentLoaderArgs) => { - let { weaverse, data } = args; - let { storefront, request } = weaverse; + let {weaverse, data} = args; + let {storefront, request} = weaverse; if (data.product) { return await storefront.query(PRODUCT_QUERY, { variables: { @@ -81,7 +176,6 @@ export let loader = async (args: ComponentLoaderArgs) => { return null; }; - export let schema: HydrogenComponentSchema = { type: 'product-hotspot--items', title: 'Product hotspot items', diff --git a/app/sections/shared/BackgroundImage.tsx b/app/sections/shared/BackgroundImage.tsx index 3502421..b1da7fb 100644 --- a/app/sections/shared/BackgroundImage.tsx +++ b/app/sections/shared/BackgroundImage.tsx @@ -44,14 +44,14 @@ export let backgroundImageInputs: InspectorGroup['inputs'] = [ label: 'Background image', }, { - type: 'toggle-group', + type: 'select', name: 'backgroundFit', label: 'Background fit', configs: { options: [ - {value: 'fill', label: 'Fill', icon: 'CornersOut'}, - {value: 'cover', label: 'Cover', icon: 'ArrowsOut'}, - {value: 'contain', label: 'Contain', icon: 'ArrowsIn'}, + {value: 'fill', label: 'Fill'}, + {value: 'cover', label: 'Cover'}, + {value: 'contain', label: 'Contain'}, ], }, defaultValue: 'cover', diff --git a/app/sections/shared/Button.tsx b/app/sections/shared/Button.tsx index 8514391..50e297e 100644 --- a/app/sections/shared/Button.tsx +++ b/app/sections/shared/Button.tsx @@ -5,6 +5,7 @@ import { import {clsx} from 'clsx'; import {forwardRef} from 'react'; import type {CSSProperties} from 'react'; +import {Link} from '~/components'; type ButtonStyle = 'primary' | 'secondary' | 'subtle'; type ButtonProps = HydrogenComponentProps & { @@ -26,7 +27,8 @@ let Button = forwardRef((props, ref) => { props; let style = {} as CSSProperties; return ( - ((props, ref) => { buttonStyleClasses[buttonStyle!], className, )} - href={`${buttonLink}`} target={openInNewTab ? '_blank' : ''} + to={buttonLink || '#'} + target={openInNewTab ? '_blank' : '_self'} + rel="noreferrer" > {content} - + ); }); @@ -66,7 +70,7 @@ export let schema: HydrogenComponentSchema = { type: 'text', name: 'buttonLink', label: 'Button link', - placeholder: 'https://', + placeholder: 'https://example.com', }, { type: 'switch', diff --git a/app/sections/shared/Description.tsx b/app/sections/shared/Description.tsx index 73ebc82..a822cf8 100644 --- a/app/sections/shared/Description.tsx +++ b/app/sections/shared/Description.tsx @@ -3,13 +3,13 @@ import { type HydrogenComponentSchema, } from '@weaverse/hydrogen'; import {clsx} from 'clsx'; -import type {CSSProperties} from 'react'; import {forwardRef} from 'react'; import type {Alignment} from '~/lib/type'; type DescriptionProps = HydrogenComponentProps & { content: string; as?: 'p' | 'div'; + color?: string; width?: Width; alignment?: Alignment; className?: string; @@ -18,7 +18,7 @@ type DescriptionProps = HydrogenComponentProps & { type Width = 'full' | 'narrow'; let widthClasses: Record = { - full: 'w-full lg:w-3/4 mx-auto', + full: 'w-full mx-auto', narrow: 'w-full md:w-1/2 lg:w-3/4 max-w-4xl mx-auto', }; @@ -32,21 +32,27 @@ let Description = forwardRef< HTMLParagraphElement | HTMLDivElement, DescriptionProps >((props, ref) => { - let {as: Tag = 'p', width, content, alignment, className, ...rest} = props; - let style = {} as CSSProperties; + let { + as: Tag = 'p', + width, + content, + color, + alignment, + className, + ...rest + } = props; return ( - {content} - + dangerouslySetInnerHTML={{__html: content}} + > ); }); @@ -88,17 +94,22 @@ export let schema: HydrogenComponentSchema = { placeholder: "Pair large text with an image or full-width video to showcase your brand's lifestyle to describe and showcase an important detail of your products that you can tag on your image.", }, + { + type: 'color', + name: 'color', + label: 'Text color', + }, { type: 'toggle-group', name: 'width', label: 'Width', configs: { options: [ - {value: 'full', label: 'Full', icon: 'ArrowsHorizontal'}, + {value: 'full', label: 'Full', icon: 'move-horizontal'}, { value: 'narrow', label: 'Narrow', - icon: 'ArrowsInLineHorizontal', + icon: 'fold-horizontal', }, ], }, @@ -110,9 +121,9 @@ export let schema: HydrogenComponentSchema = { label: 'Alignment', configs: { options: [ - {value: 'left', label: 'Left', icon: 'AlignLeft'}, - {value: 'center', label: 'Center', icon: 'AlignCenterHorizontal'}, - {value: 'right', label: 'Right', icon: 'AlignRight'}, + {value: 'left', label: 'Left', icon: 'align-start-vertical'}, + {value: 'center', label: 'Center', icon: 'align-center-vertical'}, + {value: 'right', label: 'Right', icon: 'align-end-vertical'}, ], }, defaultValue: 'center', diff --git a/app/sections/shared/Heading.tsx b/app/sections/shared/Heading.tsx index b784d17..3b20598 100644 --- a/app/sections/shared/Heading.tsx +++ b/app/sections/shared/Heading.tsx @@ -3,8 +3,8 @@ import { type HydrogenComponentSchema, } from '@weaverse/hydrogen'; import {clsx} from 'clsx'; -import {forwardRef} from 'react'; import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; import type {Alignment} from '~/lib/type'; type Size = 'default' | 'lead' | 'heading' | 'display' | 'jumbo' | 'scale'; @@ -14,6 +14,7 @@ type HeadingProps = HydrogenComponentProps & { content: string; as?: 'h1' | 'h2' | 'h3' | 'h4'; size?: Size; + color?: string; weight?: Weight; tracking?: Tracking; alignment?: Alignment; @@ -55,6 +56,7 @@ let Heading = forwardRef((props, ref) => { as: Tag = 'h2', content, size, + color, weight, tracking, alignment, @@ -63,9 +65,10 @@ let Heading = forwardRef((props, ref) => { className, ...rest } = props; - let style = {} as CSSProperties; + let style: CSSProperties = {color}; if (size === 'scale') { style = { + ...style, '--min-size-px': `${minSize}px`, '--min-size': minSize, '--max-size': maxSize, @@ -132,6 +135,11 @@ export let schema: HydrogenComponentSchema = { defaultValue: 'Section heading', placeholder: 'Section heading', }, + { + type: 'color', + name: 'color', + label: 'Text color', + }, { type: 'select', name: 'size', @@ -143,7 +151,7 @@ export let schema: HydrogenComponentSchema = { {value: 'heading', label: 'Heading'}, {value: 'display', label: 'Display'}, {value: 'jumbo', label: 'Jumbo'}, - {value: 'scale', label: 'Auto Scale'}, + {value: 'scale', label: 'Auto scale'}, ], }, defaultValue: 'default', @@ -192,17 +200,17 @@ export let schema: HydrogenComponentSchema = { defaultValue: 'bold', }, { - type: 'toggle-group', + type: 'select', name: 'tracking', label: 'Letter spacing', configs: { options: [ - {value: 'tight', label: 'Tight', icon: 'ArrowsInLineHorizontal'}, - {value: 'inherit', label: 'Inherit', icon: 'Placeholder'}, - {value: 'wide', label: 'Wide', icon: 'ArrowsOutLineHorizontal'}, + {value: 'tight', label: 'Tight'}, + {value: 'inherit', label: 'Inherit'}, + {value: 'wide', label: 'Wide'}, ], }, - defaultValue: 'normal', + defaultValue: 'inherit', }, { type: 'toggle-group', @@ -210,9 +218,9 @@ export let schema: HydrogenComponentSchema = { label: 'Alignment', configs: { options: [ - {value: 'left', label: 'Left', icon: 'AlignLeft'}, - {value: 'center', label: 'Center', icon: 'AlignCenterHorizontal'}, - {value: 'right', label: 'Right', icon: 'AlignRight'}, + {value: 'left', label: 'Left', icon: 'align-start-vertical'}, + {value: 'center', label: 'Center', icon: 'align-center-vertical'}, + {value: 'right', label: 'Right', icon: 'align-end-vertical'}, ], }, defaultValue: 'center', diff --git a/app/sections/shared/Section.tsx b/app/sections/shared/Section.tsx index ba70ba9..774d698 100644 --- a/app/sections/shared/Section.tsx +++ b/app/sections/shared/Section.tsx @@ -15,40 +15,46 @@ export type DividerType = 'none' | 'top' | 'bottom' | 'both'; export type SectionProps = HydrogenComponentProps & HTMLAttributes & - BackgroundImageProps & { - as?: React.ElementType; - width?: SectionWidth; - gap?: number; - children?: React.ReactNode; - className?: string; - verticalPadding?: VerticalPadding; - divider?: DividerType; - enableOverlay?: boolean; - overlayColor?: string; - overlayOpacity?: number; - backgroundColor?: string; - }; + BackgroundImageProps & + Partial<{ + as: React.ElementType; + width: SectionWidth; + gap: number; + className: string; + verticalPadding: VerticalPadding; + divider: DividerType; + enableOverlay: boolean; + overlayColor: string; + overlayOpacity: number; + backgroundColor: string; + children: React.ReactNode; + }>; -let gapClasses: Record = { +export let gapClasses: Record = { 0: '', 4: 'space-y-1', 8: 'space-y-2', 12: 'space-y-3', 16: 'space-y-4', 20: 'space-y-5', + 24: 'space-y-3 lg:space-y-6', + 28: 'space-y-3.5 lg:space-y-7', + 32: 'space-y-4 lg:space-y-8', + 36: 'space-y-4 lg:space-y-9', + 40: 'space-y-5 lg:space-y-10', }; -let verticalPaddingClasses: Record = { +export let verticalPaddingClasses: Record = { none: '', small: 'py-4 md:py-6 lg:py-8', medium: 'py-8 md:py-12 lg:py-16', large: 'py-12 md:py-24 lg:py-32', }; -let widthClasses: Record = { - full: 'w-full', - stretch: 'w-full px-6 md:px-8 lg:px-12', - fixed: 'max-w-screen-xl px-3 md:px-4 lg:px-6 mx-auto', +export let widthClasses: Record = { + full: 'w-full h-full', + stretch: 'w-full h-full px-3 md:px-10 lg:px-16', + fixed: 'w-full h-full max-w-screen-xl px-3 md:px-4 lg:px-6 mx-auto', }; export let Section = forwardRef((props, ref) => { @@ -67,6 +73,7 @@ export let Section = forwardRef((props, ref) => { overlayOpacity, className, children, + style, ...rest } = props; return ( @@ -85,6 +92,7 @@ export let Section = forwardRef((props, ref) => { backgroundImage: backgroundImage ? `url(${backgroundImage})` : '', backgroundSize: backgroundFit, backgroundPosition, + ...style, }} > {backgroundImage && ( @@ -144,7 +152,7 @@ export let layoutInputs: InspectorGroup['inputs'] = [ { type: 'range', name: 'gap', - label: 'Items gap', + label: 'Items spacing', configs: { min: 0, max: 40, @@ -183,7 +191,7 @@ export let layoutInputs: InspectorGroup['inputs'] = [ }, ]; -export let sectionConfigs: InspectorGroup = { +export let sectionInspector: InspectorGroup = { group: 'General', inputs: [...layoutInputs, ...backgroundImageInputs, ...overlayInputs], }; diff --git a/app/sections/shared/SubHeading.tsx b/app/sections/shared/SubHeading.tsx index 0766bf9..220f2bb 100644 --- a/app/sections/shared/SubHeading.tsx +++ b/app/sections/shared/SubHeading.tsx @@ -3,7 +3,6 @@ import { type HydrogenComponentSchema, } from '@weaverse/hydrogen'; import {clsx} from 'clsx'; -import type {CSSProperties} from 'react'; import {forwardRef} from 'react'; import type {Alignment} from '~/lib/type'; @@ -12,6 +11,7 @@ type Weight = 'normal' | 'medium'; type SubHeadingProps = HydrogenComponentProps & { content: string; as?: 'h4' | 'h5' | 'h6' | 'div' | 'p'; + color?: string; size?: Size; weight?: Weight; alignment: Alignment; @@ -41,18 +41,18 @@ let SubHeading = forwardRef< let { as: Tag = 'p', content, + color, size, weight, alignment, className, ...rest } = props; - let style = {} as CSSProperties; return ( ((props, ref) => { {...rest} className="mx-auto mt-8 w-full max-w-2xl h-64 rounded-lg lg:mt-12 sm:h-96" src={videoUrl} + allowFullScreen title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen - sandbox={'allow-presentation allow-same-origin allow-scripts'} + sandbox="allow-presentation allow-same-origin allow-scripts" /> ); }); @@ -36,9 +36,11 @@ export let schema: HydrogenComponentSchema = { { type: 'text', name: 'videoUrl', - label: 'Video URL', - defaultValue: 'https://www.youtube.com/embed/-akQyQN8rYM', - placeholder: 'https://www.youtube.com/embed/-akQyQN8rYM', + label: 'Embed URL', + defaultValue: 'https://www.youtube.com/embed/Su-x4Mo5xmU', + placeholder: 'https://www.youtube.com/embed/Su-x4Mo5xmU', + helpText: + 'How to get YouTube embed code.', }, ], }, diff --git a/app/sections/video-hero/index.tsx b/app/sections/video-hero/index.tsx new file mode 100644 index 0000000..64f5065 --- /dev/null +++ b/app/sections/video-hero/index.tsx @@ -0,0 +1,167 @@ +import type {HydrogenComponentSchema} from '@weaverse/hydrogen'; +import clsx from 'clsx'; +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; +import ReactPlayer from 'react-player'; +import {overlayInputs} from '~/sections/shared/Overlay'; +import {gapClasses} from '~/sections/shared/Section'; + +type VideoHeroProps = { + videoURL: string; + gap: number; + enableOverlay: boolean; + overlayColor: string; + overlayOpacity: number; + sectionHeightDesktop: number; + sectionHeightMobile: number; + children: React.ReactNode; +}; + +let FALLBACK_VIDEO = 'https://www.youtube.com/watch?v=Su-x4Mo5xmU'; + +let VideoHero = forwardRef((props, ref) => { + let { + videoURL, + gap, + sectionHeightDesktop, + sectionHeightMobile, + children, + enableOverlay, + overlayColor, + overlayOpacity, + ...rest + } = props; + let sectionStyle: CSSProperties = { + '--desktop-height': `${sectionHeightDesktop}px`, + '--mobile-height': `${sectionHeightMobile}px`, + } as CSSProperties; + + return ( +
+
+ + {enableOverlay ? ( +
+ ) : null} +
+ {children} +
+
+
+ ); +}); + +export default VideoHero; + +export let schema: HydrogenComponentSchema = { + type: 'video-hero', + title: 'Video hero', + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [ + { + group: 'Video hero', + inputs: [ + { + type: 'text', + name: 'videoURL', + label: 'Video URL', + defaultValue: 'https://www.youtube.com/watch?v=Su-x4Mo5xmU', + placeholder: 'https://www.youtube.com/watch?v=Su-x4Mo5xmU', + helpText: 'Support YouTube, Vimeo, MP4, WebM, and HLS streams.', + }, + { + type: 'heading', + label: 'Layout', + }, + { + type: 'range', + name: 'sectionHeightDesktop', + label: 'Height on desktop', + defaultValue: 650, + configs: { + min: 400, + max: 800, + step: 10, + unit: 'px', + }, + }, + { + type: 'range', + name: 'sectionHeightMobile', + label: 'Height on mobile', + defaultValue: 300, + configs: { + min: 250, + max: 500, + step: 10, + unit: 'px', + }, + }, + { + type: 'range', + name: 'gap', + label: 'Content spacing', + configs: { + min: 0, + max: 40, + step: 4, + unit: 'px', + }, + defaultValue: 20, + }, + ...overlayInputs, + ], + }, + ], + childTypes: ['subheading', 'heading', 'description', 'button'], + presets: { + enableOverlay: true, + children: [ + { + type: 'subheading', + content: 'Seamless hero videos', + }, + { + type: 'heading', + content: 'Bring your brand to life.', + }, + { + type: 'description', + content: + 'Pair large video with a compelling message to captivate your audience.', + }, + ], + }, +}; diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts index b63ffe1..f3d02ea 100644 --- a/app/weaverse/components.ts +++ b/app/weaverse/components.ts @@ -5,8 +5,9 @@ import * as Blogs from '~/sections/blogs'; import * as CollectionBanner from '~/sections/collection-banner'; import * as CollectionFilters from '~/sections/collection-filters'; import * as CollectionList from '~/sections/collection-list'; -import * as ColumnWithImage from '~/sections/column-with-image'; -import * as ColumnWithImageItem from '~/sections/column-with-image/item'; +import * as ColumnsWithImages from '~/sections/columns-with-images'; +import * as ColumnsWithImagesItems from '~/sections/columns-with-images/items'; +import * as ColumnWithImageItem from '~/sections/columns-with-images/column'; import * as Countdown from '~/sections/countdown'; import * as CountdownActions from '~/sections/countdown/actions'; import * as CountDownTimer from '~/sections/countdown/timer'; @@ -33,7 +34,7 @@ import * as Judgeme from '~/components/product-form/judgeme-review'; import * as Testimonial from '~/sections/testimonials'; import * as TestimonialItem from '~/sections/testimonials/item'; import * as TestimonialItems from '~/sections/testimonials/items'; -import * as VideoBanner from '~/sections/video-banner'; +import * as VideoHero from '~/sections/video-hero'; import * as VideoEmbed from '~/sections/video-embed'; import * as VideoEmbedItem from '~/sections/video-embed/video'; import * as MetaDemo from '~/sections/meta-demo'; @@ -59,9 +60,10 @@ export let components: HydrogenComponent[] = [ ImageWithText, ImageWithTextContent, ImageWithTextImage, - ColumnWithImage, + ColumnsWithImages, + ColumnsWithImagesItems, ColumnWithImageItem, - VideoBanner, + VideoHero, Map, PromotionGrid, PromotionGridItem, diff --git a/app/weaverse/create-weaverse.server.ts b/app/weaverse/create-weaverse.server.ts index eccd98f..7ce7f6f 100644 --- a/app/weaverse/create-weaverse.server.ts +++ b/app/weaverse/create-weaverse.server.ts @@ -29,6 +29,8 @@ export function getWeaverseCsp(request: Request) { "'self'", 'shopify.com', '*.youtube.com', + '*.youtu.be', + '*.vimeo.com', '*.google.com', 'fonts.gstatic.com', ...localDirectives, @@ -45,6 +47,7 @@ export function getWeaverseCsp(request: Request) { connectSrc: [ "'self'", 'https://monorail-edge.shopifysvc.com', + 'https://vimeo.com', ...localDirectives, ...weaverseHosts, ], diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts index 2f1ecc1..1e27a60 100644 --- a/app/weaverse/schema.server.ts +++ b/app/weaverse/schema.server.ts @@ -210,7 +210,7 @@ export let themeSchema: HydrogenThemeSchema = { max: 2, step: 0.1, }, - defaultValue: 1.2, + defaultValue: 1.5, }, ], }, diff --git a/package.json b/package.json index d0eda60..a1d9382 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "sideEffects": false, "author": "Weaverse", - "version": "2.5.2", + "version": "2.5.3", "scripts": { "dev": "shopify hydrogen dev --codegen --port 3456", "build": "shopify hydrogen build", @@ -24,22 +24,22 @@ "dependencies": { "@fontsource/roboto": "^5.0.12", "@headlessui/react": "1.7.18", - "@remix-run/react": "2.7.2", - "@remix-run/server-runtime": "2.7.2", - "@shopify/cli": "3.53.0", - "@shopify/cli-hydrogen": "^7.0.1", - "@shopify/hydrogen": "~2024.1.2", + "@remix-run/react": "2.8.1", + "@remix-run/server-runtime": "2.8.1", + "@shopify/cli": "3.58.2", + "@shopify/cli-hydrogen": "^7.1.2", + "@shopify/hydrogen": "~2024.1.6", "@shopify/remix-oxygen": "^2.0.3", - "@weaverse/hydrogen": "3.1.0", + "@weaverse/hydrogen": "3.1.1", "clsx": "2.1.0", "cross-env": "7.0.3", "graphql": "16.8.1", "graphql-tag": "2.12.6", - "isbot": "5.1.1", + "isbot": "5.1.4", "keen-slider": "^6.8.6", "react": "18.2.0", "react-dom": "18.2.0", - "react-intersection-observer": "9.8.1", + "react-intersection-observer": "9.8.2", "react-player": "^2.15.1", "react-use": "17.5.0", "schema-dts": "1.1.2", @@ -47,28 +47,28 @@ "typographic-base": "1.0.4" }, "devDependencies": { - "@playwright/test": "^1.42.1", - "@remix-run/dev": "2.7.2", - "@remix-run/eslint-config": "2.7.2", + "@playwright/test": "^1.43.0", + "@remix-run/dev": "2.8.1", + "@remix-run/eslint-config": "2.8.1", "@shopify/eslint-plugin": "44.0.0", "@shopify/oxygen-workers-types": "^4.0.0", "@shopify/prettier-config": "1.1.2", "@tailwindcss/forms": "0.5.7", - "@tailwindcss/typography": "0.5.10", + "@tailwindcss/typography": "0.5.12", "@total-typescript/ts-reset": "0.5.1", - "@types/eslint": "8.56.4", - "@types/react": "18.2.60", - "@types/react-dom": "18.2.19", + "@types/eslint": "8.56.7", + "@types/react": "18.2.75", + "@types/react-dom": "18.2.24", "cross-env": "7.0.3", - "eslint": "8.57.0", + "eslint": "9.0.0", "eslint-plugin-hydrogen": "0.12.3", - "postcss": "8.4.35", - "postcss-import": "16.0.1", - "postcss-preset-env": "9.4.0", + "postcss": "8.4.38", + "postcss-import": "16.1.0", + "postcss-preset-env": "9.5.4", "prettier": "3.2.5", "rimraf": "5.0.5", - "tailwindcss": "3.4.1", - "typescript": "5.3.3" + "tailwindcss": "3.4.3", + "typescript": "5.4.4" }, "optionalDependencies": { "@esbuild/linux-x64": "^0.20.2" diff --git a/remix.env.d.ts b/remix.env.d.ts index 509c908..67d4a73 100644 --- a/remix.env.d.ts +++ b/remix.env.d.ts @@ -2,8 +2,8 @@ /// /// -import type {WithCache, HydrogenCart} from '@shopify/hydrogen'; -import type {Storefront, CustomerAccount} from '~/lib/type'; +import type {HydrogenCart} from '@shopify/hydrogen'; +import type {CustomerAccount, Storefront} from '~/lib/type'; import type {AppSession} from '~/lib/session.server'; import type {WeaverseClient} from '@weaverse/hydrogen';