@@ -99,7 +96,7 @@ export default function Recover() {
aria-label="Email address"
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
- onBlur={(event) => {
+ onBlur={(event: MouseEvent) => {
setNativeEmailError(
event.currentTarget.value.length &&
!event.currentTarget.validity.valid
diff --git a/app/routes/($locale).account.register.tsx b/app/routes/($locale).account.register.tsx
index 118d8f6..d8754d0 100644
--- a/app/routes/($locale).account.register.tsx
+++ b/app/routes/($locale).account.register.tsx
@@ -5,7 +5,7 @@ import {
type LoaderArgs,
} from '@shopify/remix-oxygen';
import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
-import {useState} from 'react';
+import {useState, type MouseEvent} from 'react';
import {getInputStyleClasses} from '~/lib/utils';
import {Button, Input, Link} from '~/components';
@@ -120,7 +120,7 @@ export default function Register() {
aria-label="Email"
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
- onBlur={(event) => {
+ onBlur={(event: MouseEvent) => {
setNativeEmailError(
event.currentTarget.value.length &&
!event.currentTarget.validity.valid
@@ -147,7 +147,7 @@ export default function Register() {
required
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
- onBlur={(event) => {
+ onBlur={(event: MouseEvent) => {
if (
event.currentTarget.validity.valid ||
!event.currentTarget.value.length
diff --git a/app/sections/column-with-text/item.tsx b/app/sections/column-with-text/item.tsx
index 626d814..0b19ea8 100644
--- a/app/sections/column-with-text/item.tsx
+++ b/app/sections/column-with-text/item.tsx
@@ -2,11 +2,10 @@ import type {
HydrogenComponentProps,
HydrogenComponentSchema,
} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import { Image } from '@shopify/hydrogen';
+import {forwardRef} from 'react';
+import {Image} from '@shopify/hydrogen';
import clsx from 'clsx';
-import { CSSProperties } from 'react';
-
+import {CSSProperties} from 'react';
interface ContentColumnItemProps extends HydrogenComponentProps {
imageSrc: {
@@ -23,27 +22,56 @@ interface ContentColumnItemProps extends HydrogenComponentProps {
hideOnMobile: boolean;
}
-let ContentColumnItem = forwardRef((props, ref) => {
- let { imageSrc, titleText, contentAlignment, descriptionText, buttonLabel, buttonLink, hideOnMobile, ...rest } = props;
- let contentStyle: CSSProperties = {
- textAlign: `${contentAlignment}`,
- } as CSSProperties;
- return (
-
-
-
-
-
- {titleText &&
{titleText}
}
- {descriptionText &&
}
- {buttonLabel &&
{buttonLabel}}
+let ContentColumnItem = forwardRef
(
+ (props, ref) => {
+ let {
+ imageSrc,
+ titleText,
+ contentAlignment,
+ descriptionText,
+ buttonLabel,
+ buttonLink,
+ hideOnMobile,
+ ...rest
+ } = props;
+ let contentStyle: CSSProperties = {
+ textAlign: `${contentAlignment}`,
+ } as CSSProperties;
+ return (
+
+
+
+
+
+ {titleText && (
+
{titleText}
+ )}
+ {descriptionText && (
+
+ )}
+ {buttonLabel && (
+
+ {buttonLabel}
+
+ )}
+
- );
-});
+ );
+ },
+);
export default ContentColumnItem;
@@ -61,7 +89,7 @@ export let schema: HydrogenComponentSchema = {
defaultValue: {
id: 'image-placeholder',
url: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg',
- alt: 'Image index',
+ altText: 'Image index',
width: 0,
height: 0,
},
@@ -79,9 +107,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',
diff --git a/app/sections/header-image/description-text-item.tsx b/app/sections/header-image/description-text-item.tsx
index b569103..db9ef63 100644
--- a/app/sections/header-image/description-text-item.tsx
+++ b/app/sections/header-image/description-text-item.tsx
@@ -2,21 +2,25 @@ import type {
HydrogenComponentProps,
HydrogenComponentSchema,
} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-
+import {forwardRef} from 'react';
interface DescriptionTextItemProps extends HydrogenComponentProps {
descriptionText: string;
}
-let DescriptionTextItem = forwardRef
((props, ref) => {
- let { descriptionText, ...rest } = props;
- return (
-
- );
-});
+let DescriptionTextItem = forwardRef(
+ (props, ref) => {
+ let {descriptionText, ...rest} = props;
+ return (
+
+ );
+ },
+);
export default DescriptionTextItem;
@@ -28,7 +32,7 @@ export let schema: HydrogenComponentSchema = {
group: 'Description text',
inputs: [
{
- type: 'text-editor',
+ type: 'richtext',
label: 'Text',
name: 'descriptionText',
defaultValue: 'Pair large text with an image to tell a story.',
@@ -36,4 +40,4 @@ export let schema: HydrogenComponentSchema = {
],
},
],
-}
+};
diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx
index a3f899b..85bef37 100644
--- a/app/sections/image-gallery/image.tsx
+++ b/app/sections/image-gallery/image.tsx
@@ -1,19 +1,14 @@
+import {Image} from '@shopify/hydrogen';
import type {
HydrogenComponentProps,
HydrogenComponentSchema,
+ WeaverseImage,
} from '@weaverse/hydrogen';
import clsx from 'clsx';
import {forwardRef} from 'react';
-import {Image} from '@shopify/hydrogen';
interface ImageGalleryItemProps extends HydrogenComponentProps {
- // TODO: change src to imageData
- src: {
- url: string;
- altText: string;
- width?: number;
- height?: number;
- };
+ src: WeaverseImage;
columnSpan: number;
borderRadius: number;
hideOnMobile: boolean;
@@ -66,18 +61,11 @@ export let schema: HydrogenComponentSchema = {
inputs: [
{
type: 'image',
- // TODO: change src to imageData object
name: 'src',
label: 'Image',
defaultValue:
'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg',
},
- // {
- // type: 'text',
- // label: 'Alt Text',
- // name: 'altText',
- // defaultValue: 'Pilot Image',
- // },
{
type: 'range',
label: 'Column Span',
diff --git a/app/sections/image-with-text.tsx b/app/sections/image-with-text.tsx
index c4b4b5f..9ac64d4 100644
--- a/app/sections/image-with-text.tsx
+++ b/app/sections/image-with-text.tsx
@@ -2,24 +2,23 @@ import type {
HydrogenComponentProps,
HydrogenComponentSchema,
} from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import { CSSProperties } from 'react';
-import { Image } from '@shopify/hydrogen';
-
+import {forwardRef} from 'react';
+import {CSSProperties} from 'react';
+import {Image} from '@shopify/hydrogen';
interface ImageWithTextProps extends HydrogenComponentProps {
- imageFisrt: {
+ imageFirst: {
url: string;
altText: string;
width?: number;
height?: number;
- }
+ };
imageSecond: {
url: string;
altText: string;
width?: number;
height?: number;
- }
+ };
heading: string;
subHeading: string;
subHeadingSize: string;
@@ -31,38 +30,86 @@ interface ImageWithTextProps extends HydrogenComponentProps {
loading: HTMLImageElement['loading'];
}
-let ImageWithText = forwardRef((props, ref) => {
- let { imageFisrt, imageSecond, heading, subHeading, subHeadingSize, headingSize, descriptionText, textAlignment, buttonLabel, buttonLink, loading, ...rest } = props;
- let styleSection: CSSProperties = {
- '--height-section': '410px',
- '--font-size-display': `${headingSize}`,
- '--font-size-heading': `${subHeadingSize}`,
- textAlign: `${textAlignment}`,
- } as CSSProperties;
- const isDescriptionEmpty = /^
<\/p>$/i.test(descriptionText);
- return (
-
-
-
-
- {subHeading &&
{subHeading}
}
- {heading &&
{heading}
}
- {!isDescriptionEmpty && (
)}
- {buttonLabel &&
{buttonLabel}}
-
-
-
-
+let ImageWithText = forwardRef
(
+ (props, ref) => {
+ let {
+ imageFirst,
+ imageSecond,
+ heading,
+ subHeading,
+ subHeadingSize,
+ headingSize,
+ descriptionText,
+ textAlignment,
+ buttonLabel,
+ buttonLink,
+ loading,
+ ...rest
+ } = props;
+ let styleSection: CSSProperties = {
+ '--height-section': '410px',
+ '--font-size-display': `${headingSize}`,
+ '--font-size-heading': `${subHeadingSize}`,
+ textAlign: `${textAlignment}`,
+ } as CSSProperties;
+ const isDescriptionEmpty = /^
<\/p>$/i.test(descriptionText);
+ return (
+
+
+
+
+ {subHeading && (
+
+ {subHeading}
+
+ )}
+ {heading && (
+
+ {heading}
+
+ )}
+ {!isDescriptionEmpty && (
+
+ )}
+ {buttonLabel && (
+
+ {buttonLabel}
+
+ )}
-
-
+
+ {heading &&
{heading}
}
+ {address &&
{address}
}
+ {descriptionText &&
{descriptionText}
}
+ {buttonLabel &&
{buttonLabel}}
+
+
+
{heading}
+
+ );
+});
+
+export default VideoHeadingItem;
+
+export let schema: HydrogenComponentSchema = {
+ type: 'video-heading--item',
+ title: 'Heading item',
+ limit: 1,
+ inspector: [
+ {
+ group: 'Heading',
+ inputs: [
+ {
+ type: 'text',
+ name: 'heading',
+ label: 'Heading',
+ defaultValue: 'Heading for Video',
+ placeholder: 'Heading for video section',
+ },
+ {
+ type: 'toggle-group',
+ label: 'Heading size',
+ name: 'headingSize',
+ configs: {
+ options: [
+ { label: 'XS', value: '22px' },
+ { label: 'S', value: '24px' },
+ { label: 'M', value: '26px' },
+ { label: 'L', value: '28px' },
+ { label: 'XL', value: '30px' },
+ ],
+ },
+ defaultValue: '24px',
+ },
+ {
+ type: 'color',
+ name: 'headingColor',
+ label: 'Heading color',
+ defaultValue: '#333333',
+ },
+ ],
+ },
+ ],
+}
diff --git a/app/sections/video-with-text/video-subheading-item.tsx b/app/sections/video-with-text/video-subheading-item.tsx
new file mode 100644
index 0000000..9812ad0
--- /dev/null
+++ b/app/sections/video-with-text/video-subheading-item.tsx
@@ -0,0 +1,63 @@
+import type {
+ HydrogenComponentProps,
+ HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef } from 'react';
+
+interface VideoSubheadingProps extends HydrogenComponentProps {
+ subHeading: string;
+ subHeadingSize: string;
+ subHeadingColor: string;
+}
+
+let VideoSubheadingItem = forwardRef((props, ref) => {
+ let {subHeading, subHeadingSize, subHeadingColor, ...rest} = props;
+ return (
+
+ );
+});
+
+export default VideoSubheadingItem;
+
+export let schema: HydrogenComponentSchema = {
+ type: 'video-subheading--item',
+ title: 'Subheading item',
+ limit: 1,
+ inspector: [
+ {
+ group: 'Subheading',
+ inputs: [
+ {
+ type: 'text',
+ name: 'subHeading',
+ label: 'Subheading',
+ defaultValue: 'Subheading',
+ placeholder: 'Subheading',
+ },
+ {
+ type: 'toggle-group',
+ label: 'Subheading size',
+ name: 'subHeadingSize',
+ configs: {
+ options: [
+ { label: 'XS', value: '14px' },
+ { label: 'S', value: '16px' },
+ { label: 'M', value: '18px' },
+ { label: 'L', value: '20px' },
+ { label: 'XL', value: '22px' },
+ ],
+ },
+ defaultValue: '16px',
+ },
+ {
+ type: 'color',
+ name: 'subHeadingColor',
+ label: 'Subheading color',
+ defaultValue: '#333333',
+ },
+ ],
+ },
+ ],
+}
diff --git a/app/sections/video-with-text/video-with-text.tsx b/app/sections/video-with-text/video-with-text.tsx
new file mode 100644
index 0000000..2e15258
--- /dev/null
+++ b/app/sections/video-with-text/video-with-text.tsx
@@ -0,0 +1,173 @@
+import type {
+ HydrogenComponentProps,
+ HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import { forwardRef } from 'react';
+import { CSSProperties } from 'react';
+import ReactPlayer from 'react-player/youtube';
+
+interface VideoWithTextProps extends HydrogenComponentProps {
+ videoLink: string;
+ enableOverlay: boolean;
+ overlayColor: string;
+ overlayOpacity: number;
+ sectionHeightDesktop: number;
+ sectionHeightMobile: number;
+ enableAutoPlay: boolean;
+ enableLoop: boolean;
+ enableMuted: boolean;
+ contentAlignment: string;
+}
+
+let VideoWithText = forwardRef((props, ref) => {
+ let { videoLink, enableOverlay, overlayColor, overlayOpacity, sectionHeightDesktop, sectionHeightMobile, enableAutoPlay, enableLoop, enableMuted, contentAlignment, children, ...rest } = props;
+ let sectionStyle: CSSProperties = {
+ justifyContent: `${contentAlignment}`,
+ '--section-height-desktop': `${sectionHeightDesktop}px`,
+ '--section-height-mobile': `${sectionHeightMobile}px`,
+ '--overlay-opacity': `${overlayOpacity}%`,
+ '--overlay-color': `${overlayColor}`,
+ } as CSSProperties;
+
+ return (
+
+ {videoLink ? :
+ }
+ {enableOverlay && }
+
+ {children}
+
+
+ );
+});
+
+export default VideoWithText;
+
+export let schema: HydrogenComponentSchema = {
+ type: 'video-with-text',
+ title: 'Video with text',
+ toolbar: ['general-settings', ['duplicate', 'delete']],
+ inspector: [
+ {
+ group: 'Video',
+ inputs: [
+ {
+ type: 'text',
+ name: 'videoLink',
+ label: 'Video link',
+ defaultValue: 'https://www.youtube.com/embed/_9VUPq3SxOc',
+ placeholder: 'https://',
+ },
+ {
+ type: 'switch',
+ name: 'enableOverlay',
+ label: 'Enable overlay',
+ defaultValue: true,
+ },
+ {
+ type: 'color',
+ name: 'overlayColor',
+ label: 'Overlay color',
+ defaultValue: '#333333',
+ condition: `enableOverlay.eq.true`,
+ },
+ {
+ type: 'range',
+ name: 'overlayOpacity',
+ label: 'Overlay opacity',
+ defaultValue: 50,
+ configs: {
+ min: 10,
+ max: 100,
+ step: 10,
+ unit: '%',
+ },
+ condition: `enableOverlay.eq.true`
+ },
+ {
+ type: 'toggle-group',
+ label: 'Content alignment',
+ name: 'contentAlignment',
+ configs: {
+ options: [
+ { label: 'Left', value: 'flex-start' },
+ { label: 'Center', value: 'center' },
+ { label: 'Right', value: 'flex-end' },
+ ],
+ },
+ defaultValue: 'center',
+ },
+ {
+ type: 'range',
+ name: 'sectionHeightDesktop',
+ label: 'Section height desktop',
+ defaultValue: 450,
+ configs: {
+ min: 400,
+ max: 500,
+ step: 10,
+ unit: 'px',
+ },
+ },
+ {
+ type: 'range',
+ name: 'sectionHeightMobile',
+ label: 'Section height mobile',
+ defaultValue: 250,
+ configs: {
+ min: 200,
+ max: 300,
+ step: 10,
+ unit: 'px',
+ },
+ },
+ {
+ type: 'switch',
+ name: 'enableAutoPlay',
+ label: 'Auto play',
+ defaultValue: true,
+ },
+ {
+ type: 'switch',
+ name: 'enableLoop',
+ label: 'Loop',
+ defaultValue: true,
+ },
+ {
+ type: 'switch',
+ name: 'enableMuted',
+ label: 'Muted',
+ defaultValue: true,
+ },
+ ],
+ },
+ ],
+ childTypes: ['video-subheading--item', 'video-heading--item', 'video-description--item', 'video-button--item'],
+ presets: {
+ children: [
+ {
+ type: 'video-heading--item',
+ },
+ {
+ type: 'video-subheading--item',
+ },
+ {
+ type: 'video-description--item',
+ },
+ {
+ type: 'video-button--item',
+ }
+ ],
+ },
+};
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index 8ad12e5..75e76d0 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -36,6 +36,12 @@ import * as RichText from '~/sections/rich-text/index';
import * as RichTextHeadingItem from '~/sections/rich-text/headings-item';
import * as RichTextDescriptionItem from '~/sections/rich-text/descriptions-item';
import * as RichTextButtonItem from '~/sections/rich-text/buttons-item';
+import * as VideoWithText from '~/sections/video-with-text/video-with-text';
+import * as VideoSubheadingItem from '~/sections/video-with-text/video-subheading-item';
+import * as VideoHeadingItem from '~/sections/video-with-text/video-heading-item';
+import * as VideoDescriptionItem from '~/sections/video-with-text/video-description-item';
+import * as VideoButtonItem from '~/sections/video-with-text/video-button-item';
+import * as Map from '~/sections/map';
export let components: HydrogenComponent[] = [
Main,
@@ -60,6 +66,12 @@ export let components: HydrogenComponent[] = [
RichTextHeadingItem,
RichTextDescriptionItem,
RichTextButtonItem,
+ VideoWithText,
+ VideoSubheadingItem,
+ VideoHeadingItem,
+ VideoDescriptionItem,
+ VideoButtonItem,
+ Map,
Blogs,
BlogPost,
AllProducts,
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 39a97b8..c8d6d6a 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -7,7 +7,7 @@ export let themeSchema: HydrogenThemeSchema = {
author: 'Weaverse',
name: 'Pilot',
authorProfilePhoto:
- 'https://ucarecdn.com/174c3d08-fc53-4088-8d12-8eaf7090cdec/',
+ 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Weaverse_logo_-_3000x_e2fa8c13-dac2-4dcb-a2c2-f7aaf7a58169.png?v=1698245759',
documentationUrl: 'https://weaverse.io/docs',
supportUrl: 'https://help.weaverse.io/',
},