Merge pull request #99 from thomasKn/thomas/fv-283-add-initial-values…

…-and-documents Add Initial Values and documents
frontvibe · Feb 24, 2024 · a82ee79 · a82ee79
2 parents f272780 + 857e020
commit a82ee79
Show file tree

Hide file tree

Showing 32 changed files with 1,126 additions and 189 deletions.
diff --git a/app/components/CmsSection.tsx b/app/components/CmsSection.tsx
@@ -32,7 +32,7 @@ export function CmsSection(props: {
   const type = data._type;
   const Section = useMemo(() => sections[type], [type]);
 
-  if (data.settings.hide) return null;
+  if (data.settings?.hide) return null;
 
   return Section ? (
     <SectionWrapper data={data} type={props.type}>

diff --git a/app/components/CollectionCard.tsx b/app/components/CollectionCard.tsx
@@ -23,8 +23,9 @@ export function CollectionCard(props: {
   const {collection, skeleton} = props;
   const sanityRoot = useSanityRoot();
   const {data} = vercelStegaCleanAll(sanityRoot);
-  const style = data?.settings?.collectionCards.style;
-  const textAlignment = data?.settings?.collectionCards.textAlignment || 'left';
+  const style = data?.settings?.collectionCards?.style;
+  const textAlignment =
+    data?.settings?.collectionCards?.textAlignment || 'left';
   const sizes = cx([
     '(min-width: 1024px)',
     props.columns ? `${100 / props.columns}vw,` : '33vw,',

diff --git a/app/components/Fonts.tsx b/app/components/Fonts.tsx
@@ -10,6 +10,9 @@ import {useSanityRoot} from '~/hooks/useSanityRoot';
 type FontsQuery = InferType<typeof FONTS_QUERY>;
 type FontAssetsFragment = InferType<typeof FONT_CATEGORY_FRAGMENT.fontAssets>;
 
+const defaultFontFamily =
+  '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;';
+
 export function Fonts() {
   const {data} = useSanityRoot();
   const fontsData = vercelStegaCleanAll(data?.fonts);
@@ -87,46 +90,48 @@ function resolveFontAssetUrls(font: FontAssetsFragment[0]) {
 
 function generateCssFontVariables({fontsData}: {fontsData: FontsQuery}) {
   const fontCategories: Array<{
-    antialiased: boolean | null;
-    baseSize: null | number;
-    capitalize: boolean | null;
-    categoryName: string;
-    fontName: string;
-    fontType: string;
-    letterSpacing: null | number;
-    lineHeight: null | number;
+    antialiased?: boolean | null;
+    baseSize?: null | number;
+    capitalize?: boolean | null;
+    categoryName?: string;
+    fontName?: string;
+    fontType?: string;
+    letterSpacing?: null | number;
+    lineHeight?: null | number;
   }> = [];
 
-  fontsData?.heading.font &&
-    fontsData.heading.font?.length > 0 &&
-    fontCategories.push({
-      baseSize: fontsData.heading.baseSize,
-      capitalize: fontsData.heading.capitalize,
-      categoryName: 'heading',
-      letterSpacing: fontsData.heading.letterSpacing,
-      lineHeight: fontsData.heading.lineHeight,
-      ...fontsData.heading.font[0],
-    });
-  fontsData?.body.font &&
-    fontsData.body.font?.length > 0 &&
-    fontCategories.push({
-      baseSize: fontsData.body.baseSize,
-      capitalize: fontsData.body.capitalize,
-      categoryName: 'body',
-      letterSpacing: fontsData.body.letterSpacing,
-      lineHeight: fontsData.body.lineHeight,
-      ...fontsData.body.font[0],
-    });
-  fontsData?.extra.font &&
-    fontsData.extra.font?.length > 0 &&
-    fontCategories.push({
-      baseSize: fontsData.extra.baseSize,
-      capitalize: fontsData.extra.capitalize,
-      categoryName: 'extra',
-      letterSpacing: fontsData.extra.letterSpacing,
-      lineHeight: fontsData.extra.lineHeight,
-      ...fontsData.extra.font[0],
-    });
+  fontCategories.push({
+    baseSize: fontsData?.heading.baseSize,
+    capitalize: fontsData?.heading.capitalize,
+    categoryName: 'heading',
+    fontName: fontsData?.heading.font?.[0]?.fontName || defaultFontFamily,
+    fontType: fontsData?.heading.font?.[0]?.fontType || 'unset',
+    letterSpacing: fontsData?.heading.letterSpacing,
+    lineHeight: fontsData?.heading.lineHeight,
+    ...fontsData?.heading.font?.[0],
+  });
+
+  fontCategories.push({
+    baseSize: fontsData?.body.baseSize,
+    capitalize: fontsData?.body.capitalize,
+    categoryName: 'body',
+    fontName: fontsData?.body.font?.[0]?.fontName || defaultFontFamily,
+    fontType: fontsData?.body.font?.[0]?.fontType || 'unset',
+    letterSpacing: fontsData?.body.letterSpacing,
+    lineHeight: fontsData?.body.lineHeight,
+    ...fontsData?.body.font?.[0],
+  });
+
+  fontCategories.push({
+    baseSize: fontsData?.extra.baseSize,
+    capitalize: fontsData?.extra.capitalize,
+    categoryName: 'extra',
+    fontName: fontsData?.extra.font?.[0]?.fontName || defaultFontFamily,
+    fontType: fontsData?.extra.font?.[0]?.fontType || 'unset',
+    letterSpacing: fontsData?.extra.letterSpacing,
+    lineHeight: fontsData?.extra.lineHeight,
+    ...fontsData?.extra.font?.[0],
+  });
 
   if (fontCategories?.length > 0) {
     return `
@@ -140,7 +145,7 @@ function generateCssFontVariables({fontsData}: {fontsData: FontsQuery}) {
     return fontCategories
       .map((fontCategory) => {
         return `
-        --${fontCategory.categoryName}-font-family: "${fontCategory.fontName}";
+        --${fontCategory.categoryName}-font-family: ${fontCategory.fontName};
         --${fontCategory.categoryName}-font-type: ${fontCategory.fontType};
         --${fontCategory.categoryName}-line-height: ${
           fontCategory.lineHeight ? fontCategory.lineHeight : 'unset'

diff --git a/app/components/cart/CartDetails.tsx b/app/components/cart/CartDetails.tsx
@@ -124,7 +124,7 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
           {cartIsLoading ? (
             <IconLoader className="size-5 animate-spin" />
           ) : (
-            <span>{themeContent?.cart.proceedToCheckout}</span>
+            <span>{themeContent?.cart?.proceedToCheckout}</span>
           )}
         </a>
       </Button>
@@ -153,10 +153,10 @@ function CartSummary({
           layout === 'page' && 'grid gap-6',
         ])}
       >
-        <h2 className="sr-only">{themeContent?.cart.orderSummary}</h2>
+        <h2 className="sr-only">{themeContent?.cart?.orderSummary}</h2>
         <dl className="grid">
           <div className="flex items-center justify-between font-medium">
-            <span>{themeContent?.cart.subtotal}</span>
+            <span>{themeContent?.cart?.subtotal}</span>
             {cost?.subtotalAmount &&
               parseFloat(cost.subtotalAmount.amount) > 0 && (
                 <span>

diff --git a/app/components/cart/CartDiscounts.tsx b/app/components/cart/CartDiscounts.tsx
@@ -36,7 +36,7 @@ export function CartDiscounts({
       {/* Have existing discount, display it with a remove option */}
       <dl className={codes && codes.length !== 0 ? 'grid' : 'hidden'}>
         <div className="flex items-center justify-between font-medium">
-          <span>{themeContent?.cart.discounts}</span>
+          <span>{themeContent?.cart?.discounts}</span>
           <div className="flex items-center justify-between">
             <UpdateDiscountForm>
               <button
@@ -65,15 +65,15 @@ export function CartDiscounts({
         >
           <Input
             name="discountCode"
-            placeholder={themeContent?.cart.discountCode || ''}
+            placeholder={themeContent?.cart?.discountCode || ''}
             type="text"
           />
           <Button
             className={cn(layout === 'page' && 'w-full lg:w-auto')}
             disabled={cartIsLoading}
             variant="outline"
           >
-            {themeContent?.cart.applyDiscount}
+            {themeContent?.cart?.applyDiscount}
           </Button>
         </div>
       </UpdateDiscountForm>

diff --git a/app/components/cart/CartEmpty.tsx b/app/components/cart/CartEmpty.tsx
@@ -54,17 +54,17 @@ export function CartEmpty({
               layout === 'drawer' && 'justify-center text-center',
             ])}
           >
-            <span>{themeContent?.cart.emptyMessage}</span>
+            <span>{themeContent?.cart?.emptyMessage}</span>
             <div>
               {layout === 'page' ? (
                 <Button asChild>
                   <Link prefetch="intent" to={collectionsPath}>
-                    {themeContent?.cart.continueShopping}
+                    {themeContent?.cart?.continueShopping}
                   </Link>
                 </Button>
               ) : (
                 <Button onClick={onClose}>
-                  {themeContent?.cart.continueShopping}
+                  {themeContent?.cart?.continueShopping}
                 </Button>
               )}
             </div>

diff --git a/app/components/cart/CartLineItem.tsx b/app/components/cart/CartLineItem.tsx
@@ -171,7 +171,7 @@ function ItemRemoveButton({
         disabled={loading}
         type="submit"
       >
-        <span className="sr-only">{themeContent?.cart.remove}</span>
+        <span className="sr-only">{themeContent?.cart?.remove}</span>
         <IconRemove aria-hidden="true" />
       </IconButton>
       <OptimisticInput data={{action: 'remove', lineId}} id="cart-line-item" />
@@ -246,7 +246,7 @@ function CartLineQuantityAdjust({
   return (
     <>
       <label className="sr-only" htmlFor={`quantity-${lineId}`}>
-        {themeContent?.cart.quantity}, {optimisticQuantity}
+        {themeContent?.cart?.quantity}, {optimisticQuantity}
       </label>
       <QuantitySelector>
         <UpdateCartForm lines={[{id: lineId, quantity: prevQuantity}]}>

diff --git a/app/components/collection/SortFilterLayout.tsx b/app/components/collection/SortFilterLayout.tsx
@@ -247,8 +247,7 @@ export function DesktopFiltersDrawer({
       className={cn(
         'h-[calc(100dvh_-_var(--desktopHeaderHeight)_-2rem)] w-full px-4 transition-all',
         'rounded-[--product-card-border-corner-radius]',
-        'border-[rgb(var(--border)_/_var(--product-card-border-opacity))] [border-width:--product-card-border-thickness]',
-        '[box-shadow:rgb(var(--shadow)_/_var(--product-card-shadow-opacity))_var(--product-card-shadow-horizontal-offset)_var(--product-card-shadow-vertical-offset)_var(--product-card-shadow-blur-radius)_0px]',
+        'border border-[rgb(var(--border))]',
       )}
     >
       <nav>

diff --git a/app/components/footers/FooterSocialLinksOnly.tsx b/app/components/footers/FooterSocialLinksOnly.tsx
@@ -3,6 +3,8 @@ import type {TypeFromSelection} from 'groqd';
 import type {SectionDefaultProps} from '~/lib/type';
 import type {FOOTER_SOCIAL_LINKS_ONLY_FRAGMENT} from '~/qroq/footers';
 
+import {useColorsCssVars} from '~/hooks/useColorsCssVars';
+
 import {SocialMediaButtons} from '../SocialMedia';
 import {CountrySelector} from '../layout/CountrySelector';
 
@@ -14,9 +16,14 @@ export function FooterSocialLinksOnly(
   props: SectionDefaultProps & {data: FooterSocialLinksOnlyProps},
 ) {
   const {data} = props;
+  const colorsCssVars = useColorsCssVars({
+    selector: '#country-selector',
+    settings: data.settings,
+  });
 
   return (
     <div className="container flex flex-col items-center justify-center gap-5">
+      <style dangerouslySetInnerHTML={{__html: colorsCssVars}} />
       <div className="flex flex-wrap items-center justify-center gap-1">
         <SocialMediaButtons />
       </div>

diff --git a/app/components/icons/IconSocial.tsx b/app/components/icons/IconSocial.tsx
@@ -4,14 +4,14 @@ import {Icon} from './Icon';
 export const socials = [
   'facebook',
   'instagram',
-  'linkedin',
+  'twitter',
+  'tiktok',
+  'youtube',
   'pinterest',
+  'linkedin',
   'snapchat',
-  'tiktok',
-  'tumblr',
-  'twitter',
   'vimeo',
-  'youtube',
+  'tumblr',
 ] as const;
 
 export type Socials = (typeof socials)[number];

diff --git a/app/components/layout/AnnoucementBar.tsx b/app/components/layout/AnnoucementBar.tsx
@@ -1,5 +1,6 @@
 import type {TypeFromSelection} from 'groqd';
 
+import {Link} from '@remix-run/react';
 import {cx} from 'class-variance-authority';
 import Autoplay from 'embla-carousel-autoplay';
 import {useMemo} from 'react';
@@ -55,7 +56,13 @@ export function AnnouncementBar() {
           <CarouselContent className="relative ml-0 justify-center">
             {annoucementBar?.map((item) => (
               <CarouselItem key={item._key}>
-                <Item _key={item._key} link={item.link} text={item.text} />
+                <Item
+                  _key={item._key}
+                  externalLink={item.externalLink}
+                  link={item.link}
+                  openInNewTab={item.openInNewTab}
+                  text={item.text}
+                />
               </CarouselItem>
             ))}
           </CarouselContent>
@@ -87,16 +94,31 @@ function Item(props: AnnoucementBarProps) {
         name: props.text,
       }}
     >
-      <p className="flex items-center text-sm underline-offset-4 group-hover:underline">
-        <span className="relative z-[2] block bg-background pr-2">
-          {props.text}
-        </span>
-        <span className="-translate-x-[2px] transition-transform group-hover:translate-x-[-0.15px]">
-          <IconArrowRight />
-        </span>
-      </p>
+      <LinkWrapper>{props.text}</LinkWrapper>
     </SanityInternalLink>
+  ) : props.externalLink ? (
+    <Link
+      className={cx(['group', className])}
+      rel={props.openInNewTab ? 'noopener noreferrer' : ''}
+      target={props.openInNewTab ? '_blank' : undefined}
+      to={props.externalLink}
+    >
+      <LinkWrapper>{props.text}</LinkWrapper>
+    </Link>
   ) : (
     <p className={className}>{props.text}</p>
   );
 }
+
+function LinkWrapper({children}: {children: React.ReactNode}) {
+  return (
+    <p className="flex items-center text-sm underline-offset-4 group-hover:underline">
+      <span className="relative z-[2] block bg-background pr-2">
+        {children}
+      </span>
+      <span className="-translate-x-[2px] transition-transform group-hover:translate-x-[-0.15px]">
+        <IconArrowRight />
+      </span>
+    </p>
+  );
+}
diff --git a/app/components/layout/CartDrawer.tsx b/app/components/layout/CartDrawer.tsx
@@ -104,7 +104,7 @@ function Badge(props: {cart?: CartApiQueryFragment; count: number}) {
       >
         <DrawerHeader className="px-6 py-5 shadow-sm shadow-foreground/10">
           <DrawerTitle className="flex items-center gap-4 font-body font-bold">
-            <span>{themeContent?.cart.heading}</span>
+            <span>{themeContent?.cart?.heading}</span>
           </DrawerTitle>
         </DrawerHeader>
         <Cart

diff --git a/app/components/layout/CountrySelector.tsx b/app/components/layout/CountrySelector.tsx
@@ -34,7 +34,7 @@ export function CountrySelector() {
           <IconChevron className="size-3" direction="down" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent id="country-selector">
         {locales.map((locale) => (
           <DropdownMenuItem
             className="flex [&>*]:flex-grow"

diff --git a/app/components/product/MediaGallery.tsx b/app/components/product/MediaGallery.tsx
@@ -193,7 +193,7 @@ function ThumbnailCarousel({
                   {media.__typename === 'MediaImage' && media.image && (
                     <button
                       className={cn(
-                        'overflow-hidden rounded-[--media-border-corner-radius] border-2 border-foreground border-opacity-0 transition-opacity hover:border-opacity-100',
+                        'overflow-hidden rounded-[--media-border-corner-radius] border-2 border-primary border-opacity-0 transition-opacity hover:border-opacity-100',
                         'ring-offset-background transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
                         media.id === selectedImage.id && 'border-opacity-100',
                       )}

diff --git a/app/components/product/ProductCard.tsx b/app/components/product/ProductCard.tsx
@@ -27,8 +27,8 @@ export function ProductCard(props: {
 }) {
   const {columns, product, skeleton} = props;
   const {data} = vercelStegaCleanAll(useSanityRoot());
-  const style = data?.settings?.productCards.style;
-  const textAlignment = data?.settings?.productCards.textAlignment || 'left';
+  const style = data?.settings?.productCards?.style;
+  const textAlignment = data?.settings?.productCards?.textAlignment || 'left';
   const variants = product?.variants?.nodes.length
     ? flattenConnection(product?.variants)
     : null;

diff --git a/app/hooks/useColorsCssVars.tsx b/app/hooks/useColorsCssVars.tsx
@@ -2,13 +2,15 @@ import type {InferType} from 'groqd';
 
 import {darken, mix, readableColor, toRgba} from 'color2k';
 
+import type {FOOTER_SETTINGS_FRAGMENT} from '~/qroq/footers';
 import type {SETTINGS_FRAGMENT} from '~/qroq/fragments';
 import type {HEADER_QUERY} from '~/qroq/queries';
 import type {SECTION_SETTINGS_FRAGMENT} from '~/qroq/sections';
 
 import {useSanityRoot} from './useSanityRoot';
 
 export type CmsSectionSettings = InferType<typeof SECTION_SETTINGS_FRAGMENT>;
+export type FooterSettings = InferType<typeof FOOTER_SETTINGS_FRAGMENT>;
 type HeaderQuery = InferType<typeof HEADER_QUERY>;
 type CartColorScheme = {
   colorScheme?: InferType<typeof SETTINGS_FRAGMENT.cartColorScheme>;
@@ -17,7 +19,11 @@ type Rgb = {b: number; g: number; r: number} | undefined;
 
 export function useColorsCssVars(props: {
   selector?: string;
-  settings?: CartColorScheme | CmsSectionSettings | HeaderQuery;
+  settings?:
+    | CartColorScheme
+    | CmsSectionSettings
+    | FooterSettings
+    | HeaderQuery;
 }) {
   const {settings} = props;
   const {data} = useSanityRoot();