Skip to content

Commit

Permalink
Merge pull request #51 from Weaverse/dev
Browse files Browse the repository at this point in the history
v2.3.1
  • Loading branch information
hta218 committed Nov 19, 2023
2 parents fbd86d8 + 84e70ea commit b0ed335
Show file tree
Hide file tree
Showing 39 changed files with 1,312 additions and 474 deletions.
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@weaverse:registry=https://registry.npmjs.com
@shopify:registry=https://registry.npmjs.com
progress=false
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div align="center">
<p style="text-align: center;">
<img alt="Version" src="https://img.shields.io/badge/version-2.3.0-blue.svg?cacheSeconds=2592000" />
<img alt="Version" src="https://img.shields.io/badge/version-2.3.1-blue.svg?cacheSeconds=2592000" />
<a href="#" target="_blank">
<img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg?label=license" />
</a>
Expand Down
17 changes: 17 additions & 0 deletions app/components/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -320,3 +320,20 @@ export function IconMapBlank(props: IconProps) {
</Icon>
);
}

export function IconImageBlank(props: IconProps) {
return (
<Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.1818 26.1365C65.0438 26.1365 62.5 28.6803 62.5 31.8183C62.5 34.9563 65.0438 37.5001 68.1818 37.5001C71.3198 37.5001 73.8636 34.9563 73.8636 31.8183C73.8636 28.6803 71.3198 26.1365 68.1818 26.1365ZM55.6818 31.8183C55.6818 24.9147 61.2782 19.3183 68.1818 19.3183C75.0854 19.3183 80.6818 24.9147 80.6818 31.8183C80.6818 38.7218 75.0854 44.3183 68.1818 44.3183C61.2782 44.3183 55.6818 38.7218 55.6818 31.8183Z" fill="#0F0F0F" fill-opacity="0.05" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.7392 1.13648H50.2608C60.7535 1.13642 68.9764 1.13637 75.3922 1.99896C81.9592 2.88187 87.1411 4.72432 91.2084 8.79164C95.2758 12.859 97.1182 18.0409 98.0011 24.6079C98.8637 31.0237 98.8637 39.2466 98.8636 49.7393V50.2609C98.8637 60.7536 98.8637 68.9765 98.0011 75.3923C97.1182 81.9593 95.2758 87.1413 91.2084 91.2086C87.1411 95.2759 81.9592 97.1183 75.3922 98.0012C68.9764 98.8638 60.7535 98.8638 50.2608 98.8637H49.7392C39.2465 98.8638 31.0236 98.8638 24.6077 98.0012C18.0408 97.1183 12.8588 95.2759 8.79152 91.2086C4.7242 87.1413 2.88174 81.9593 1.99884 75.3923C1.13625 68.9765 1.13629 60.7536 1.13635 50.2609V49.7393C1.13629 39.2466 1.13625 31.0237 1.99884 24.6079C2.88174 18.0409 4.7242 12.859 8.79152 8.79164C12.8588 4.72432 18.0408 2.88187 24.6077 1.99896C31.0236 1.13637 39.2465 1.13642 49.7392 1.13648ZM13.6127 86.3874C11.0234 83.798 9.53748 80.2948 8.75622 74.4838C8.05859 69.295 7.96799 62.6752 7.95627 53.8189L14.7521 47.8726C17.5435 45.4301 21.7506 45.5702 24.3734 48.193L43.8722 67.6917C48.1674 71.9869 54.9286 72.5725 59.8984 69.0799L61.2538 68.1273C65.1546 65.3858 70.4322 65.7035 73.9761 68.893L88.6285 82.0801C88.788 82.2236 88.9572 82.3493 89.1339 82.4573C88.3992 84.0069 87.494 85.2806 86.3873 86.3874C83.7979 88.9767 80.2946 90.4626 74.4837 91.2439C68.5747 92.0383 60.8101 92.0455 50 92.0455C39.1899 92.0455 31.4252 92.0383 25.5162 91.2439C19.7053 90.4626 16.202 88.9767 13.6127 86.3874ZM25.5162 8.75634C19.7053 9.5376 16.202 11.0235 13.6127 13.6128C11.0234 16.2022 9.53748 19.7054 8.75622 25.5164C8.09652 30.4232 7.97964 36.6095 7.95897 44.7568L10.2623 42.7414C15.7551 37.9352 24.0337 38.2108 29.1946 43.3718L48.6933 62.8705C50.6457 64.8229 53.719 65.0891 55.978 63.5015L57.3334 62.5489C63.8348 57.9799 72.6308 58.5092 78.5372 63.825L91.1461 75.1731C91.1798 74.947 91.2124 74.7173 91.2437 74.4838C92.0382 68.5748 92.0454 60.8102 92.0454 50.0001C92.0454 39.19 92.0382 31.4254 91.2437 25.5164C90.4625 19.7054 88.9766 16.2022 86.3873 13.6128C83.7979 11.0235 80.2946 9.5376 74.4837 8.75634C68.5747 7.9619 60.8101 7.95466 50 7.95466C39.1899 7.95466 31.4252 7.9619 25.5162 8.75634Z" fill="#0F0F0F" fill-opacity="0.05" />
</Icon>
);
}
export function IconVideoBlank(props: IconProps) {
return(
<Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
<path fill-rule="evenodd" clip-rule="evenodd" d="M101.519 68.8267C89.3402 61.6363 75.6249 71.4144 75.6249 84.454V135.546C75.6249 148.586 89.3403 158.364 101.519 151.173L144.787 125.627C156.46 118.736 156.46 101.264 144.787 94.3727L101.519 68.8267ZM89.3749 84.454C89.3749 82.6346 90.2562 81.362 91.295 80.7124C92.3003 80.0838 93.4252 80.0158 94.5282 80.667L137.797 106.213C139.013 106.931 139.791 108.302 139.791 110C139.791 111.698 139.013 113.069 137.797 113.787L94.5282 139.333C93.4252 139.984 92.3003 139.916 91.295 139.288C90.2562 138.638 89.3749 137.365 89.3749 135.546V84.454Z" fill="#0F0F0F" fill-opacity="0.05" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M110 11.4585C55.5769 11.4585 11.4583 55.577 11.4583 110C11.4583 164.423 55.5769 208.542 110 208.542C164.423 208.542 208.541 164.423 208.541 110C208.541 55.577 164.423 11.4585 110 11.4585ZM25.2083 110C25.2083 63.171 63.1708 25.2085 110 25.2085C156.829 25.2085 194.791 63.171 194.791 110C194.791 156.829 156.829 194.792 110 194.792C63.1708 194.792 25.2083 156.829 25.2083 110Z" fill="#0F0F0F" fill-opacity="0.05" />
</Icon>
);
}
1 change: 1 addition & 0 deletions app/root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
type LoaderFunctionArgs,
type AppLoadContext,
type SerializeFrom,
LinksFunction,
} from '@shopify/remix-oxygen';
import {
isRouteErrorResponse,
Expand Down
66 changes: 66 additions & 0 deletions app/routes/($locale).api.review.$productHandle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import {type RouteLoaderArgs} from '@weaverse/hydrogen';
import invariant from 'tiny-invariant';

type JudgemeProductData = {
product: {
id: string;
handle: string;
};
};

type JudgemeReviewsData = {
reviews: {
rating: number;
}[];
};

async function getInternalIdByHandle(
api_token: string,
shop_domain: string,
handle: string,
) {
let api =
`https://judge.me/api/v1/products/-1?` +
new URLSearchParams({
api_token,
shop_domain,
handle: handle,
});
let data = (await fetch(api).then((res) => res.json())) as JudgemeProductData;
return data?.product?.id;
}

export async function loader(args: RouteLoaderArgs) {
let {params, context} = args;
let env = context.env;
let handle = params.productHandle;
let api_token = env.JUDGEME_PUBLIC_TOKEN;
let shop_domain = env.PUBLIC_STORE_DOMAIN;
invariant(handle, 'Missing product handle');
if (!api_token)
return {
error: 'Missing JUDGEME_PUBLIC_TOKEN',
};
let internalId = await getInternalIdByHandle(api_token, shop_domain, handle);
if (internalId) {
let data = (await fetch(
`https://judge.me/api/v1/reviews?` +
new URLSearchParams({
api_token,
shop_domain,
product_id: internalId,
}),
).then((res) => res.json())) as JudgemeReviewsData;
let reviews = data.reviews;
let rating =
reviews.reduce((acc, review) => acc + review.rating, 0) /
(reviews.length || 1);
return {
rating,
reviewNumber: reviews.length,
};
}
return {
rating: 0,
};
}
77 changes: 56 additions & 21 deletions app/sections/column-with-text/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,32 @@ import { CSSProperties } from 'react';

interface ContentColumnWithImageProps extends HydrogenComponentProps {
heading: string;
headingSize: string;
textColor: string;
gap: number;
headingAlignment: string;
topPadding: number;
bottomPadding: number;
}

let ContentColumnWithImage = forwardRef<HTMLElement, ContentColumnWithImageProps>((props, ref) => {
let {heading, headingSize, headingAlignment, children, ...rest } = props;
let {heading, textColor, headingAlignment, gap, topPadding, bottomPadding, children, ...rest } = props;
let headingStyle: CSSProperties = {
justifyContent: `${headingAlignment}`,
fontSize: `${headingSize}`,
} as CSSProperties;
let sectionStyle: CSSProperties = {
paddingTop: `${topPadding}px`,
paddingBottom: `${bottomPadding}px`,
'--text-color': `${textColor}`,
'--gap-item': `${gap}px`,
} as CSSProperties;

return (
<section ref={ref} {...rest} className='w-full h-full'>
<div className='px-10 py-10 sm-max:px-6'>
<div className='mb-5 flex' style={headingStyle}>
<p className='font-sans font-bold'>{heading}</p>
<section ref={ref} {...rest} className='w-full h-full' style={sectionStyle}>
<div className='px-10 py-10 flex flex-col gap-5 sm-max:px-6'>
<div className='flex' style={headingStyle}>
<h3 className='text-[var(--text-color)] font-medium'>{heading}</h3>
</div>
<div className='flex flex-wrap gap-5 justify-center'>
<div className='flex flex-wrap gap-[var(--gap-item)] justify-center'>
{children}
</div>
</div>
Expand All @@ -50,19 +58,10 @@ export let schema: HydrogenComponentSchema = {
placeholder: 'Heading for Image section',
},
{
type: 'toggle-group',
label: 'Heading size',
name: 'headingSize',
configs: {
options: [
{ label: 'XS', value: '20px' },
{ label: 'S', value: '24px' },
{ label: 'M', value: '30px' },
{ label: 'L', value: '36px' },
{ label: 'XL', value: '40px' },
],
},
defaultValue: '24px',
type: 'color',
name: 'textColor',
label: 'Text color',
defaultValue: '#000000',
},
{
type: 'toggle-group',
Expand All @@ -77,6 +76,42 @@ export let schema: HydrogenComponentSchema = {
},
defaultValue: 'center',
},
{
type: 'range',
name: 'gap',
label: 'Gap',
defaultValue: 20,
configs: {
min: 10,
max: 50,
step: 1,
unit: 'px',
},
},
{
type: 'range',
name: 'topPadding',
label: 'Top padding',
defaultValue: 0,
configs: {
min: 0,
max: 100,
step: 5,
unit: 'px',
},
},
{
type: 'range',
name: 'bottomPadding',
label: 'Bottom padding',
defaultValue: 0,
configs: {
min: 0,
max: 100,
step: 5,
unit: 'px',
},
},
],
},
],
Expand Down
70 changes: 43 additions & 27 deletions app/sections/column-with-text/item.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
import type {
HydrogenComponentProps,
HydrogenComponentSchema,
WeaverseImage,
} 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';
import { IconImageBlank } from '~/components';

interface ContentColumnItemProps extends HydrogenComponentProps {
imageSrc: {
url: string;
altText: string;
width?: number;
height?: number;
};
imageSrc: WeaverseImage;
titleText: string;
contentAlignment: string;
descriptionText: string;
buttonLabel: string;
buttonLink: string;
openInNewTab: boolean;
buttonStyle: string;
hideOnMobile: boolean;
}

Expand All @@ -31,6 +30,8 @@ let ContentColumnItem = forwardRef<HTMLDivElement, ContentColumnItemProps>(
descriptionText,
buttonLabel,
buttonLink,
openInNewTab,
buttonStyle,
hideOnMobile,
...rest
} = props;
Expand All @@ -42,27 +43,30 @@ let ContentColumnItem = forwardRef<HTMLDivElement, ContentColumnItemProps>(
ref={ref}
{...rest}
className={clsx(
'flex flex-col items-center pt-8 sm-max:w-full sm-max:pt-0',
'flex flex-col items-center sm-max:w-full sm-max:pt-0',
hideOnMobile && 'hidden sm:block',
)}
>
<div className="h-64 w-64 border border-solid border-gray-500 rounded-md">
<Image data={imageSrc} className="w-full h-full" />
{imageSrc ? <Image data={imageSrc} className="w-full h-full" /> :
<div className='w-full h-full bg-gray-200 flex justify-center items-center'>
<IconImageBlank viewBox='0 0 100 100' className='!w-24 !h-24 opacity-40' />
</div>}
</div>
<div className="text-center w-full sm-max:w-64" style={contentStyle}>
{titleText && (
<p className="font-sans font-semibold mt-4 text-sm">{titleText}</p>
<p className="text-[var(--text-color)] font-normal mt-4 text-sm">{titleText}</p>
)}
{descriptionText && (
<p
className="font-sans text-sm font-normal mt-2"
dangerouslySetInnerHTML={{__html: descriptionText}}
></p>
className="text-sm font-normal mt-2 text-[var(--text-color)]"
>{descriptionText}</p>
)}
{buttonLabel && (
<a
href={buttonLink}
className="px-4 py-3 mt-4 cursor-pointer rounded border-2 border-solid border-gray-900 inline-block"
target={openInNewTab ? '_blank' : ''}
className={clsx("px-4 py-3 mt-4 cursor-pointer rounded inline-block", buttonStyle)}
>
{buttonLabel}
</a>
Expand All @@ -86,13 +90,6 @@ export let schema: HydrogenComponentSchema = {
type: 'image',
name: 'imageSrc',
label: 'Image',
defaultValue: {
id: 'image-placeholder',
url: 'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg',
altText: 'Image index',
width: 0,
height: 0,
},
},
{
type: 'text',
Expand All @@ -107,15 +104,15 @@ 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',
},
{
type: 'richtext',
type: 'textarea',
label: 'Text',
name: 'descriptionText',
placeholder: 'Brief description',
Expand All @@ -134,6 +131,25 @@ export let schema: HydrogenComponentSchema = {
name: 'buttonLink',
placeholder: 'Button link',
},
{
type: 'switch',
name: 'openInNewTab',
label: 'Open in new tab',
defaultValue: true,
},
{
type: 'toggle-group',
label: 'Button style',
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' },
],
},
defaultValue: 'transition hover:bg-white border-2 border-solid hover:border-gray-900 hover:text-black bg-black text-white',
},
{
type: 'switch',
label: 'Hide on Mobile',
Expand Down

0 comments on commit b0ed335

Please sign in to comment.