diff --git a/.git-hooks/pre-commit b/.git-hooks/pre-commit new file mode 100755 index 0000000..df1f02e --- /dev/null +++ b/.git-hooks/pre-commit @@ -0,0 +1,7 @@ +#!/bin/sh +FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') +[ -z "$FILES" ] && exit 0 +echo "$FILES" | xargs pnpm prettier --ignore-unknown --write +echo "$FILES" | xargs git add + +exit 0 \ No newline at end of file diff --git a/app/components/AccountAddressBook.tsx b/app/components/AccountAddressBook.tsx index aab25b0..0f43b57 100644 --- a/app/components/AccountAddressBook.tsx +++ b/app/components/AccountAddressBook.tsx @@ -22,10 +22,7 @@ export function AccountAddressBook({ )}
-
diff --git a/app/components/Button.tsx b/app/components/Button.tsx index d249059..62bda67 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -26,7 +26,8 @@ export const Button = forwardRef( const baseButtonClasses = 'inline-block rounded font-medium text-center py-3 px-4 text-sm font-medium'; - const disabledClasses = 'disabled:opacity-50 disabled:cursor-not-allowed disabled:select-none disabled:hover:bg-btn disabled:hover:text-btn-content'; + const disabledClasses = + 'disabled:opacity-50 disabled:cursor-not-allowed disabled:select-none disabled:hover:bg-btn disabled:hover:text-btn-content'; const variants = { primary: `${baseButtonClasses} border-2 border-btn hover:bg-inv-btn hover:text-inv-btn-content bg-btn text-btn-content`, diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx index 0f20b65..53120b8 100644 --- a/app/components/Logo.tsx +++ b/app/components/Logo.tsx @@ -15,7 +15,11 @@ export function Logo() { prefetch="intent" >
- +
); diff --git a/app/routes/($locale).$shopid.orders.$token.authenticate.tsx b/app/routes/($locale).$shopid.orders.$token.authenticate.tsx index d039484..70916da 100644 --- a/app/routes/($locale).$shopid.orders.$token.authenticate.tsx +++ b/app/routes/($locale).$shopid.orders.$token.authenticate.tsx @@ -10,7 +10,10 @@ import {Button, PageHeader} from '~/components'; that are routing to your Hydrogen storefront. To prevent this, ensure that you redirect those requests back to Shopify. */ -export async function loader({request, context: {storefront}}: LoaderFunctionArgs) { +export async function loader({ + request, + context: {storefront}, +}: LoaderFunctionArgs) { const {origin} = new URL(request.url); const {shop} = await storefront.query( `#graphql diff --git a/app/routes/($locale).account.edit.tsx b/app/routes/($locale).account.edit.tsx index 48c641e..bb57971 100644 --- a/app/routes/($locale).account.edit.tsx +++ b/app/routes/($locale).account.edit.tsx @@ -230,10 +230,7 @@ export default function AccountDetailsEdit() { - diff --git a/app/routes/($locale).api.products.tsx b/app/routes/($locale).api.products.tsx index 2ba6c53..2618df2 100644 --- a/app/routes/($locale).api.products.tsx +++ b/app/routes/($locale).api.products.tsx @@ -14,7 +14,10 @@ import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; * @returns Product[] * @see https://shopify.dev/api/storefront/current/queries/products */ -export async function loader({request, context: {storefront}}: LoaderFunctionArgs) { +export async function loader({ + request, + context: {storefront}, +}: LoaderFunctionArgs) { const url = new URL(request.url); const searchParams = new URLSearchParams(url.search); diff --git a/app/routes/($locale).policies._index.tsx b/app/routes/($locale).policies._index.tsx index e7394d7..95ea7d6 100644 --- a/app/routes/($locale).policies._index.tsx +++ b/app/routes/($locale).policies._index.tsx @@ -9,7 +9,10 @@ import type {NonNullableFields} from '~/lib/type'; export const headers = routeHeaders; -export async function loader({request, context: {storefront}}: LoaderFunctionArgs) { +export async function loader({ + request, + context: {storefront}, +}: LoaderFunctionArgs) { const data = await storefront.query(POLICIES_QUERY); invariant(data, 'No data returned from Shopify API'); diff --git a/app/routes/[sitemap.xml].tsx b/app/routes/[sitemap.xml].tsx index 63b13d1..e38cccd 100644 --- a/app/routes/[sitemap.xml].tsx +++ b/app/routes/[sitemap.xml].tsx @@ -17,7 +17,10 @@ interface ProductEntry { }; } -export async function loader({request, context: {storefront}}: LoaderFunctionArgs) { +export async function loader({ + request, + context: {storefront}, +}: LoaderFunctionArgs) { const data = await storefront.query(SITEMAP_QUERY, { variables: { urlLimits: MAX_URLS, diff --git a/app/sections/ColumnWithText/index.tsx b/app/sections/ColumnWithText/index.tsx index eb032a1..438f97e 100644 --- a/app/sections/ColumnWithText/index.tsx +++ b/app/sections/ColumnWithText/index.tsx @@ -2,8 +2,8 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import type { CSSProperties } from 'react'; -import { forwardRef } from 'react'; +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; interface ContentColumnWithImageProps extends HydrogenComponentProps { heading: string; @@ -14,8 +14,20 @@ interface ContentColumnWithImageProps extends HydrogenComponentProps { bottomPadding: number; } -let ContentColumnWithImage = forwardRef((props, ref) => { - let {heading, textColor, headingAlignment, gap, topPadding, bottomPadding, children, ...rest } = props; +let ContentColumnWithImage = forwardRef< + HTMLElement, + ContentColumnWithImageProps +>((props, ref) => { + let { + heading, + textColor, + headingAlignment, + gap, + topPadding, + bottomPadding, + children, + ...rest + } = props; let headingStyle: CSSProperties = { justifyContent: `${headingAlignment}`, } as CSSProperties; @@ -27,12 +39,12 @@ let ContentColumnWithImage = forwardRef -
-
-

{heading}

+
+
+
+

{heading}

-
+
{children}
@@ -69,9 +81,9 @@ export let schema: HydrogenComponentSchema = { name: 'headingAlignment', configs: { options: [ - { label: 'Left', value: 'flex-start' }, - { label: 'Center', value: 'center' }, - { label: 'Right', value: 'flex-end' }, + {label: 'Left', value: 'flex-start'}, + {label: 'Center', value: 'center'}, + {label: 'Right', value: 'flex-end'}, ], }, defaultValue: 'center', diff --git a/app/sections/ColumnWithText/item.tsx b/app/sections/ColumnWithText/item.tsx index 6c67af4..5f5dbfc 100644 --- a/app/sections/ColumnWithText/item.tsx +++ b/app/sections/ColumnWithText/item.tsx @@ -3,11 +3,11 @@ import type { HydrogenComponentSchema, WeaverseImage, } from '@weaverse/hydrogen'; -import type { CSSProperties } from 'react'; -import { forwardRef } from 'react'; -import { Image } from '@shopify/hydrogen'; +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; +import {Image} from '@shopify/hydrogen'; import clsx from 'clsx'; -import { IconImageBlank } from '~/components'; +import {IconImageBlank} from '~/components'; interface ContentColumnItemProps extends HydrogenComponentProps { imageSrc: WeaverseImage; @@ -48,25 +48,37 @@ let ContentColumnItem = forwardRef( )} >
- {imageSrc ? : -
- -
} + {imageSrc ? ( + + ) : ( +
+ +
+ )}
{titleText && ( -

{titleText}

+

+ {titleText} +

)} {descriptionText && ( -

{descriptionText}

+

+ {descriptionText} +

)} {buttonLabel && ( {buttonLabel} @@ -104,9 +116,9 @@ export let schema: HydrogenComponentSchema = { name: 'contentAlignment', configs: { options: [ - { label: 'Left', value: 'left' }, - { label: 'Center', value: 'center' }, - { label: 'Right', value: 'right' }, + {label: 'Left', value: 'left'}, + {label: 'Center', value: 'center'}, + {label: 'Right', value: 'right'}, ], }, defaultValue: 'center', @@ -143,12 +155,25 @@ export let schema: HydrogenComponentSchema = { name: 'buttonStyle', configs: { options: [ - { label: '1', value: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white' }, - { label: '2', value: 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white' }, - { label: '3', value: 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white' }, + { + label: '1', + value: + 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white', + }, + { + label: '2', + value: + 'transition bg-white border-2 border-solid border-gray-900 text-black hover:bg-black hover:text-white', + }, + { + label: '3', + value: + 'transition hover:bg-white border-2 border-solid border-white hover:text-black bg-gray-200 text-white', + }, ], }, - defaultValue: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white', + defaultValue: + 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white', }, { type: 'switch', diff --git a/app/sections/CountDown/ButtonItems.tsx b/app/sections/CountDown/ButtonItems.tsx index 715a14c..c6c23ea 100644 --- a/app/sections/CountDown/ButtonItems.tsx +++ b/app/sections/CountDown/ButtonItems.tsx @@ -2,19 +2,19 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import { forwardRef, CSSProperties } from 'react'; +import {forwardRef, CSSProperties} from 'react'; interface ButtonItemsProps extends HydrogenComponentProps { gap: number; } let ButtonItems = forwardRef((props, ref) => { - let { gap, children, ...rest } = props; + let {gap, children, ...rest} = props; let spacingStyle: CSSProperties = { gap: `${gap}px`, } as CSSProperties; return ( -
+
{children}
); @@ -54,7 +54,7 @@ export let schema: HydrogenComponentSchema = { { type: 'button', content: 'Button', - } + }, ], }, }; diff --git a/app/sections/CountDown/CountDown.tsx b/app/sections/CountDown/CountDown.tsx index e932ad2..80634e4 100644 --- a/app/sections/CountDown/CountDown.tsx +++ b/app/sections/CountDown/CountDown.tsx @@ -3,10 +3,9 @@ import type { HydrogenComponentSchema, WeaverseImage, } from '@weaverse/hydrogen'; -import type { CSSProperties } from 'react'; -import { forwardRef } from 'react'; -import { Image } from '@shopify/hydrogen'; - +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; +import {Image} from '@shopify/hydrogen'; interface CountDownProps extends HydrogenComponentProps { backgroundColor: string; @@ -17,7 +16,15 @@ interface CountDownProps extends HydrogenComponentProps { } let Countdown = forwardRef((props, ref) => { - let { backgroundColor, backgroundImage, overlayColor, overlayOpacity, sectionHeight, children, ...rest } = props; + let { + backgroundColor, + backgroundImage, + overlayColor, + overlayOpacity, + sectionHeight, + children, + ...rest + } = props; let sectionStyle: CSSProperties = { '--section-height': `${sectionHeight}px`, '--section-background-color': backgroundColor, @@ -26,12 +33,25 @@ let Countdown = forwardRef((props, ref) => { } as CSSProperties; return ( -
-
- {backgroundImage && } - {backgroundImage &&
} +
+
+ {backgroundImage && ( + + )} + {backgroundImage && ( +
+ )}
-
+
{children}
@@ -79,7 +99,12 @@ export let schema: HydrogenComponentSchema = { ], }, ], - childTypes: ['heading', 'subheading', 'count-down--timer', 'countdown-buttons'], + childTypes: [ + 'heading', + 'subheading', + 'count-down--timer', + 'countdown-buttons', + ], presets: { children: [ { @@ -95,7 +120,7 @@ export let schema: HydrogenComponentSchema = { }, { type: 'countdown-buttons', - } + }, ], }, }; diff --git a/app/sections/CountDown/Timer.tsx b/app/sections/CountDown/Timer.tsx index 48c22db..6f5e8d7 100644 --- a/app/sections/CountDown/Timer.tsx +++ b/app/sections/CountDown/Timer.tsx @@ -2,81 +2,104 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import type { CSSProperties } from 'react'; -import { useState, useEffect, forwardRef } from 'react'; +import type {CSSProperties} from 'react'; +import {useState, useEffect, forwardRef} from 'react'; interface CountDownTimerProps extends HydrogenComponentProps { textColor: string; startDate: number; } -let CountDownTimer = forwardRef((props, ref) => { - let { textColor, startDate, ...rest } = props; - const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining(startDate)); - useEffect(() => { - const intervalId = setInterval(() => { - const updatedTimeRemaining = calculateTimeRemaining(startDate); - setTimeRemaining(updatedTimeRemaining); - if (updatedTimeRemaining.days <= 0 && updatedTimeRemaining.hours <= 0 && - updatedTimeRemaining.minutes <= 0 && updatedTimeRemaining.seconds <= 0) { - clearInterval(intervalId); +let CountDownTimer = forwardRef( + (props, ref) => { + let {textColor, startDate, ...rest} = props; + const [timeRemaining, setTimeRemaining] = useState( + calculateTimeRemaining(startDate), + ); + useEffect(() => { + const intervalId = setInterval(() => { + const updatedTimeRemaining = calculateTimeRemaining(startDate); + setTimeRemaining(updatedTimeRemaining); + if ( + updatedTimeRemaining.days <= 0 && + updatedTimeRemaining.hours <= 0 && + updatedTimeRemaining.minutes <= 0 && + updatedTimeRemaining.seconds <= 0 + ) { + clearInterval(intervalId); + } + }, 1000); + return () => clearInterval(intervalId); + }, [startDate]); + + function calculateTimeRemaining(startTime: number) { + const now = new Date().getTime(); + const difference = startTime - now; + if (difference <= 0) { + return { + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }; } - }, 1000); - return () => clearInterval(intervalId); - }, [startDate]); - function calculateTimeRemaining(startTime: number) { - const now = new Date().getTime(); - const difference = startTime - now; - if (difference <= 0) { + const days = Math.floor(difference / (1000 * 60 * 60 * 24)); + const hours = Math.floor( + (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60), + ); + const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((difference % (1000 * 60)) / 1000); return { - days: 0, - hours: 0, - minutes: 0, - seconds: 0, + days, + hours, + minutes, + seconds, }; } - const days = Math.floor(difference / (1000 * 60 * 60 * 24)); - const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((difference % (1000 * 60)) / 1000); - return { - days, - hours, - minutes, - seconds, - }; - } + let timerStyle: CSSProperties = { + '--timer-text-color': textColor, + } as CSSProperties; - let timerStyle: CSSProperties = { - '--timer-text-color': textColor, - } as CSSProperties; - - return ( -
-
-

{timeRemaining?.days || 0}

-

DAYS

-
-
-
-

{timeRemaining?.hours || 0}

-

HOURS

+ return ( +
+
+

+ {timeRemaining?.days || 0} +

+

DAYS

+
+
+
+

+ {timeRemaining?.hours || 0} +

+

HOURS

+
+
+
+

+ {timeRemaining?.minutes || 0} +

+

MINUTES

+
+
+
+

+ {timeRemaining?.seconds || 0} +

+

SECONDS

+
-
-
-

{timeRemaining?.minutes || 0}

-

MINUTES

-
-
-
-

{timeRemaining?.seconds || 0}

-

SECONDS

-
-
- ); -}); + ); + }, +); export default CountDownTimer; @@ -94,11 +117,11 @@ export let schema: HydrogenComponentSchema = { defaultValue: '#000000', }, { - type: "datepicker", - label: "Start date", - name: "startDate", - defaultValue: "2024-01-01" - } + type: 'datepicker', + label: 'Start date', + name: 'startDate', + defaultValue: '2024-01-01', + }, ], }, ], diff --git a/app/sections/HeaderImage/HeaderImage.tsx b/app/sections/HeaderImage/HeaderImage.tsx index f2443a9..16263fe 100644 --- a/app/sections/HeaderImage/HeaderImage.tsx +++ b/app/sections/HeaderImage/HeaderImage.tsx @@ -37,7 +37,7 @@ let HeaderImage = forwardRef((props, ref) => { '--section-height-mobile': `${sectionHeightMobile}px`, '--overlay-opacity': `${overlayOpacity}%`, '--overlay-color': `${overlayColor}`, - '--max-width-content': '600px' + '--max-width-content': '600px', } as CSSProperties; return ( @@ -156,17 +156,12 @@ export let schema: HydrogenComponentSchema = { ], }, ], - childTypes: [ - 'subheading', - 'heading', - 'description', - 'button', - ], + childTypes: ['subheading', 'heading', 'description', 'button'], presets: { children: [ { type: 'subheading', - content: 'Subheading' + content: 'Subheading', }, { type: 'heading', diff --git a/app/sections/ImageGallery/index.tsx b/app/sections/ImageGallery/index.tsx index c83e446..d86a7cc 100644 --- a/app/sections/ImageGallery/index.tsx +++ b/app/sections/ImageGallery/index.tsx @@ -32,15 +32,16 @@ export let schema: HydrogenComponentSchema = { children: [ { type: 'heading', - content: "Hello World from Weaverse!", + content: 'Hello World from Weaverse!', }, { 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.", + 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.", }, { type: 'image-gallery--items', - } + }, ], }, }; diff --git a/app/sections/ImageGallery/items.tsx b/app/sections/ImageGallery/items.tsx index 99832b8..a918dc8 100644 --- a/app/sections/ImageGallery/items.tsx +++ b/app/sections/ImageGallery/items.tsx @@ -8,15 +8,22 @@ interface ImageGalleyItemsProps extends HydrogenComponentProps { gap: number; } -let ImageGalleyItems = forwardRef((props, ref) => { - let {children, gap, ...rest } = props; +let ImageGalleyItems = forwardRef( + (props, ref) => { + let {children, gap, ...rest} = props; - return ( -
- {children} -
- ); -}); + return ( +
+ {children} +
+ ); + }, +); export default ImageGalleyItems; diff --git a/app/sections/ImageWithText/Content.tsx b/app/sections/ImageWithText/Content.tsx new file mode 100644 index 0000000..5e4427f --- /dev/null +++ b/app/sections/ImageWithText/Content.tsx @@ -0,0 +1,71 @@ +import type { + HydrogenComponentProps, + HydrogenComponentSchema, +} from '@weaverse/hydrogen'; +import { forwardRef, CSSProperties } from 'react'; + +interface ContentItemsProps extends HydrogenComponentProps { + gap: number; +} + +let ContentItems = forwardRef((props, ref) => { + let { children, gap, ...rest } = props; + let style = { + gap: `${gap}px`, + textAlign: 'left', + } as CSSProperties; + return ( +
+ {children} +
+ ); +}); + +export default ContentItems; + +export let schema: HydrogenComponentSchema = { + type: 'content-items', + title: 'Content', + limit: 1, + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [ + { + group: 'Content', + inputs: [ + { + type: 'range', + name: 'gap', + label: 'Items gap', + configs: { + min: 0, + max: 40, + step: 4, + unit: 'px', + }, + defaultValue: 20, + }, + ], + }, + ], + childTypes: ['subheading', 'heading', 'description', 'button'], + presets: { + children: [ + { + type: 'subheading', + content: 'Subheading', + }, + { + type: 'heading', + content: 'Heading for image', + }, + { + type: 'description', + content: 'Pair large text with an image to tell a story.', + }, + { + type: 'button', + content: 'Button section', + }, + ], + }, +}; diff --git a/app/sections/ImageWithText/Image.tsx b/app/sections/ImageWithText/Image.tsx new file mode 100644 index 0000000..563e072 --- /dev/null +++ b/app/sections/ImageWithText/Image.tsx @@ -0,0 +1,67 @@ +import type { + HydrogenComponentProps, + HydrogenComponentSchema, + WeaverseImage, +} from '@weaverse/hydrogen'; +import { forwardRef } from 'react'; +import { Image } from '@shopify/hydrogen'; +import { IconImageBlank } from '~/components'; + +interface ImageItemsProps extends HydrogenComponentProps { + image: WeaverseImage, + loading: HTMLImageElement['loading']; +} + +let ImageItems = forwardRef((props, ref) => { + let { image, loading, ...rest } = props; + + return ( +
+ {image ? : +
+ +
+ } +
+ ); +}); + +export default ImageItems; + +export let schema: HydrogenComponentSchema = { + type: 'image-items', + title: 'Image', + toolbar: ['general-settings', ['duplicate', 'delete']], + limit: 1, + inspector: [ + { + group: 'Image', + inputs: [ + { + type: 'image', + name: 'image', + label: 'Image', + }, + { + type: 'toggle-group', + name: 'loading', + label: 'Image loading', + defaultValue: 'eager', + configs: { + options: [ + { label: 'Eager', value: 'eager', icon: 'Lightning' }, + { + label: 'Lazy', + value: 'lazy', + icon: 'SpinnerGap', + weight: 'light', + }, + ], + }, + helpText: + 'Learn more about image loading strategies.', + }, + ], + }, + ], +}; diff --git a/app/sections/ImageWithText/ImageWithText.tsx b/app/sections/ImageWithText/ImageWithText.tsx new file mode 100644 index 0000000..d496e06 --- /dev/null +++ b/app/sections/ImageWithText/ImageWithText.tsx @@ -0,0 +1,93 @@ +import type { + HydrogenComponentProps, + HydrogenComponentSchema, +} from '@weaverse/hydrogen'; +import type { CSSProperties } from 'react'; +import { forwardRef } from 'react'; +import { clsx } from 'clsx'; + +type AlignImage = 'left' | 'right'; +interface ImageWithTextProps extends HydrogenComponentProps { + sectionHeight: number; + backgroundColor: string; + imageAlignment?: AlignImage; +} + +let AlignImageClasses: Record = { + left: 'flex-row-reverse', + right: 'flex-row', +}; + +let ImageWithText = forwardRef((props, ref) => { + let { imageAlignment, sectionHeight, backgroundColor, children, ...rest } = props; + let styleSection: CSSProperties = { + '--section-height': `${sectionHeight}px`, + backgroundColor: backgroundColor, + } as CSSProperties; + + return ( +
+
+
+ {children} +
+
+
+ ); +}); + +export default ImageWithText; + +export let schema: HydrogenComponentSchema = { + type: 'image-with-text', + title: 'Image with text', + toolbar: ['general-settings', ['duplicate', 'delete']], + inspector: [ + { + group: 'Image', + inputs: [ + { + type: 'toggle-group', + label: 'Image alignment', + name: 'imageAlignment', + configs: { + options: [ + { label: 'Left', value: 'left', icon: 'AlignLeft' }, + { label: 'Right', value: 'right', icon: 'AlignRight' }, + ], + }, + defaultValue: 'left', + }, + { + type: 'range', + name: 'sectionHeight', + label: 'Section height', + defaultValue: 450, + configs: { + min: 400, + max: 700, + step: 10, + unit: 'px', + }, + }, + { + type: 'color', + name: 'backgroundColor', + label: 'Background color', + defaultValue: '#f4f4f4', + }, + ], + }, + ], + childTypes: ['content-items', 'image-items'], + presets: { + children: [ + { + type: 'content-items', + }, + { + type: 'image-items', + }, + ], + }, +}; diff --git a/app/sections/PromotionGrid/ButtonItems.tsx b/app/sections/PromotionGrid/ButtonItems.tsx index 013391d..5739932 100644 --- a/app/sections/PromotionGrid/ButtonItems.tsx +++ b/app/sections/PromotionGrid/ButtonItems.tsx @@ -2,19 +2,19 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import { forwardRef, CSSProperties } from 'react'; +import {forwardRef, CSSProperties} from 'react'; interface ButtonItemsProps extends HydrogenComponentProps { gap: number; } let ButtonItems = forwardRef((props, ref) => { - let { gap, children, ...rest } = props; + let {gap, children, ...rest} = props; let spacingStyle: CSSProperties = { gap: `${gap}px`, } as CSSProperties; return ( -
+
{children}
); @@ -54,7 +54,7 @@ export let schema: HydrogenComponentSchema = { { type: 'button', content: 'Button', - } + }, ], }, }; diff --git a/app/sections/PromotionGrid/PromotionGrid.tsx b/app/sections/PromotionGrid/PromotionGrid.tsx index 546e3c9..824d299 100644 --- a/app/sections/PromotionGrid/PromotionGrid.tsx +++ b/app/sections/PromotionGrid/PromotionGrid.tsx @@ -2,8 +2,8 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import type { CSSProperties } from 'react'; -import { forwardRef } from 'react'; +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; interface PromotionProps extends HydrogenComponentProps { gap: number; @@ -12,16 +12,16 @@ interface PromotionProps extends HydrogenComponentProps { } let PromotionGrid = forwardRef((props, ref) => { - let {gap, topPadding, bottomPadding, children, ...rest } = props; + let {gap, topPadding, bottomPadding, children, ...rest} = props; let spacingStyle: CSSProperties = { gap: `${gap}px`, paddingTop: `${topPadding}px`, paddingBottom: `${bottomPadding}px`, } as CSSProperties; return ( -
-
-
+
+
+
{children}
diff --git a/app/sections/PromotionGrid/item.tsx b/app/sections/PromotionGrid/item.tsx index 5930598..15ce214 100644 --- a/app/sections/PromotionGrid/item.tsx +++ b/app/sections/PromotionGrid/item.tsx @@ -3,33 +3,44 @@ import type { HydrogenComponentSchema, WeaverseImage, } from '@weaverse/hydrogen'; -import { forwardRef } from 'react'; -import { Image } from '@shopify/hydrogen'; +import {forwardRef} from 'react'; +import {Image} from '@shopify/hydrogen'; import {IconImageBlank} from '~/components'; - interface PromotionItemProps extends HydrogenComponentProps { backgroundImage: WeaverseImage; } -let PromotionGridItem = forwardRef((props, ref) => { - let { backgroundImage, children, ...rest } = props; - return ( -
-
- {backgroundImage ? : -
- -
} -
-
-
- {children} +let PromotionGridItem = forwardRef( + (props, ref) => { + let {backgroundImage, children, ...rest} = props; + return ( +
+
+ {backgroundImage ? ( + + ) : ( +
+ +
+ )} +
+
+
+ {children} +
-
- ); -}); + ); + }, +); export default PromotionGridItem; @@ -61,11 +72,12 @@ export let schema: HydrogenComponentSchema = { }, { type: 'description', - content: 'Include the smaller details of your promotion in text below the title.', + content: + 'Include the smaller details of your promotion in text below the title.', }, { type: 'promotion-buttons', - } + }, ], }, }; diff --git a/app/sections/RichText/RichText.tsx b/app/sections/RichText/RichText.tsx index 9bf80c3..61cd73f 100644 --- a/app/sections/RichText/RichText.tsx +++ b/app/sections/RichText/RichText.tsx @@ -2,8 +2,8 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import type { CSSProperties } from 'react'; -import { forwardRef } from 'react'; +import type {CSSProperties} from 'react'; +import {forwardRef} from 'react'; interface RichTextProps extends HydrogenComponentProps { contentAlignment: string; @@ -14,18 +14,31 @@ interface RichTextProps extends HydrogenComponentProps { } let RichText = forwardRef((props, ref) => { - let { contentAlignment, sectionHeight, backgroundColor, topPadding, bottomPadding, children, ...rest } = props; + let { + contentAlignment, + sectionHeight, + backgroundColor, + topPadding, + bottomPadding, + children, + ...rest + } = props; let sectionStyle: CSSProperties = { alignItems: `${contentAlignment}`, '--section-height': `${sectionHeight}px`, backgroundColor: `${backgroundColor}`, paddingTop: `${topPadding}px`, paddingBottom: `${bottomPadding}px`, - '--max-width-content': '600px' + '--max-width-content': '600px', } as CSSProperties; return ( -
-
+
+
{children}
@@ -54,9 +67,9 @@ export let schema: HydrogenComponentSchema = { name: 'contentAlignment', configs: { options: [ - { label: 'Left', value: 'flex-start' }, - { label: 'Center', value: 'center' }, - { label: 'Right', value: 'flex-end' }, + {label: 'Left', value: 'flex-start'}, + {label: 'Center', value: 'center'}, + {label: 'Right', value: 'flex-end'}, ], }, defaultValue: 'center', @@ -109,12 +122,13 @@ export let schema: HydrogenComponentSchema = { }, { type: 'description', - content: 'Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.', + content: + 'Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.', }, { type: 'button', content: 'Button section', - } + }, ], }, -} +}; diff --git a/app/sections/Video/VideoItem.tsx b/app/sections/Video/VideoItem.tsx index e55d446..5fb1033 100644 --- a/app/sections/Video/VideoItem.tsx +++ b/app/sections/Video/VideoItem.tsx @@ -2,16 +2,18 @@ import type { HydrogenComponentProps, HydrogenComponentSchema, } from '@weaverse/hydrogen'; -import { forwardRef } from 'react'; +import {forwardRef} from 'react'; interface VideoItemProps extends HydrogenComponentProps { videoUrl: string; } let VideoItem = forwardRef((props, ref) => { - let { videoUrl, ...rest } = props; + let {videoUrl, ...rest} = props; return ( -