Merge pull request Weaverse#155 from Weaverse/dev

Update components schema. add `Featured Collections` section, update `Header`
Weaverse · Jul 3, 2024 · 8f3ebf6 · 8f3ebf6
2 parents 86b068b + c1a50a5
commit 8f3ebf6
Show file tree

Hide file tree

Showing 62 changed files with 622 additions and 287 deletions.
diff --git a/README.md b/README.md
@@ -213,7 +213,6 @@ Export a `schema` object from the file to define the component's schema with def
 export let schema: HydrogenComponentSchema = {
   type: 'video',
   title: 'Video',
-  toolbar: ['general-settings', ['duplicate', 'delete']],
   inspector: [
     {
       group: 'Video',

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -38,25 +38,29 @@ let variants = cva(
   },
 );
 
+export interface ButtonStyleProps {
+  buttonStyle: "inherit" | "custom";
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+  backgroundColorHover: string;
+  textColorHover: string;
+  borderColorHover: string;
+}
+
 export interface ButtonProps
   extends VariantProps<typeof variants>,
     Omit<
       HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,
       "children" | "type"
     >,
-    Partial<HydrogenComponentProps> {
+    Partial<HydrogenComponentProps>,
+    Partial<ButtonStyleProps> {
   as?: keyof HTMLElementTagNameMap;
   className?: string;
   text: string;
   link?: string;
   openInNewTab?: boolean;
-  buttonStyle?: "inherit" | "custom";
-  backgroundColor?: string;
-  textColor?: string;
-  borderColor?: string;
-  backgroundColorHover?: string;
-  textColorHover?: string;
-  borderColorHover?: string;
 }
 
 let Button = forwardRef<HTMLElement, ButtonProps>((props, ref) => {
@@ -158,10 +162,6 @@ export let buttonContentInputs: InspectorGroup["inputs"] = [
   },
 ];
 export let buttonStylesInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Button styles",
-  },
   {
     type: "select",
     name: "buttonStyle",
@@ -222,6 +222,10 @@ export let buttonStylesInputs: InspectorGroup["inputs"] = [
 
 export let buttonInputs: InspectorGroup["inputs"] = [
   ...buttonContentInputs,
+  {
+    type: "heading",
+    label: "Button styles",
+  },
   ...buttonStylesInputs,
 ];
 
@@ -234,5 +238,4 @@ export let schema: HydrogenComponentSchema = {
       inputs: buttonInputs,
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };
diff --git a/app/components/Heading.tsx b/app/components/Heading.tsx
@@ -220,5 +220,4 @@ export let schema: HydrogenComponentSchema = {
       inputs: headingInputs,
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };
diff --git a/app/components/Paragraph.tsx b/app/components/Paragraph.tsx
@@ -128,5 +128,4 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };
diff --git a/app/components/SubHeading.tsx b/app/components/SubHeading.tsx
@@ -144,5 +144,4 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };
diff --git a/app/data/queries.ts b/app/data/queries.ts
@@ -42,29 +42,6 @@ export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
   ${PRODUCT_CARD_FRAGMENT}
 `;
 
-// @see: https://shopify.dev/api/storefront/current/queries/collections
-export let FEATURED_COLLECTIONS_QUERY = `#graphql
-  query homepageFeaturedCollections($country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    collections(
-      first: 4,
-      sortKey: UPDATED_AT
-    ) {
-      nodes {
-        id
-        title
-        handle
-        image {
-          altText
-          width
-          height
-          url
-        }
-      }
-    }
-  }
-` as const;
-
 export let PRODUCT_INFO_QUERY = `#graphql
   query ProductInfo(
     $country: CountryCode

diff --git a/app/lib/utils.ts b/app/lib/utils.ts
@@ -1,7 +1,6 @@
 import { useLocation } from "@remix-run/react";
 import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
 import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
-import type { WeaverseImage } from "@weaverse/hydrogen";
 import type { LinkHTMLAttributes } from "react";
 import type {
   ChildMenuItemFragment,
@@ -335,7 +334,11 @@ export function removeFalsy<T = any>(
 }
 
 export function getImageAspectRatio(
-  image: Partial<WeaverseImage>,
+  image: {
+    width?: number | null;
+    height?: number | null;
+    [key: string]: any;
+  },
   aspectRatio: string,
 ) {
   let aspRt: string | undefined;

diff --git a/app/modules/FeaturedCollections.tsx b/app/modules/FeaturedCollections.tsx
diff --git a/app/modules/ProductGallery.tsx b/app/modules/ProductGallery.tsx
@@ -19,7 +19,7 @@ export function ProductGallery({
 
   return (
     <div
-      className={`swimlane md:grid-flow-row hiddenScroll md:p-0 md:overflow-x-auto md:grid-cols-2 ${className}`}
+      className={`swimlane md:grid-flow-row hidden-scroll md:p-0 md:overflow-x-auto md:grid-cols-2 ${className}`}
     >
       {media.map((med, i) => {
         const isFirst = i === 0;

diff --git a/app/modules/ProductSwimlane.tsx b/app/modules/ProductSwimlane.tsx
@@ -18,7 +18,7 @@ export function ProductSwimlane({
 }: ProductSwimlaneProps) {
   return (
     <Section heading={title} padding="y" {...props}>
-      <div className="swimlane hiddenScroll md:pb-8 md:scroll-px-8 lg:scroll-px-12 md:px-8 lg:px-12">
+      <div className="swimlane hidden-scroll md:pb-8 md:scroll-px-8 lg:scroll-px-12 md:px-8 lg:px-12">
         {products.nodes.slice(0, count).map((product) => (
           <ProductCard
             product={product}

diff --git a/app/modules/header/menu/DesktopMenu.tsx b/app/modules/header/menu/DesktopMenu.tsx
@@ -20,32 +20,22 @@ export function DesktopMenu(props: { menu: EnhancedMenu }) {
         let level = getMaxDepth(item);
         let isAllResourceType =
           item.items.length &&
-          item.items.every((item) => item?.resource !== null && item.items.length === 0);
+          item.items.every(
+            (item) => item?.resource?.image && item.items.length === 0,
+          );
         let Comp: React.FC<SingleMenuItem> = isAllResourceType
           ? ImageMenu
           : level > 2
             ? MultiMenu
             : level === 2
               ? SingleMenu
-              : ItemHeader;
+              : GroupWrapper;
         return <Comp key={id} title={title} {...rest} />;
       })}
     </nav>
   );
 }
 
-function ItemHeader({ title, to }: { title: string; to: string }) {
-  return (
-    <div className="h-full flex items-center px-3 cursor-pointer relative z-30">
-      <button className="py-2 group-hover:border-b hover:border-b">
-        <Link to={to}>
-          <span className="uppercase">{title}</span>
-        </Link>
-      </button>
-    </div>
-  );
-}
-
 function MultiMenu(props: SingleMenuItem) {
   let { title, items, to } = props;
 
@@ -56,8 +46,8 @@ function MultiMenu(props: SingleMenuItem) {
       style={{ "--item-index": idx } as { [key: string]: any }}
     >
       <h5 className="mb-4 uppercase font-medium">
-        <Link to={item.to} prefetch="intent" className="animate-hover">
-          {item.title}
+        <Link to={item.to} prefetch="intent">
+          <span className="text-animation">{item.title}</span>
         </Link>
       </h5>
       <ul className="space-y-1.5">
@@ -67,9 +57,9 @@ function MultiMenu(props: SingleMenuItem) {
               key={ind}
               to={subItem.to}
               prefetch="intent"
-              className="animate-hover"
+              className="relative"
             >
-              {subItem.title}
+              <span className="text-animation">{subItem.title}</span>
             </Link>
           </li>
         ))}
@@ -96,8 +86,7 @@ function MultiMenu(props: SingleMenuItem) {
     </div>
   );
   return (
-    <div className="group">
-      <ItemHeader title={title} to={to} />
+    <GroupWrapper title={title} to={to}>
       <div className={clsx("w-screen top-full left-0", dropdownContentClass)}>
         <div className="container mx-auto py-8">
           <div className="flex gap-4 w-full">
@@ -110,15 +99,14 @@ function MultiMenu(props: SingleMenuItem) {
           <div className="flex gap-6"></div>
         </div>
       </div>
-    </div>
+    </GroupWrapper>
   );
 }
 
 function SingleMenu(props: SingleMenuItem) {
   let { title, items, to } = props;
   return (
-    <div className="group relative">
-      <ItemHeader title={title} to={to} />
+    <GroupWrapper title={title} to={to} className="relative">
       <div
         className={clsx(
           "top-full -left-3 group-hover:h-auto",
@@ -128,34 +116,29 @@ function SingleMenu(props: SingleMenuItem) {
         <div className="p-6 min-w-48">
           <div>
             <h5 className="mb-4 uppercase font-medium">
-              <Link to={to} prefetch="intent" className="animate-hover">
-                {title}
+              <Link to={to} prefetch="intent">
+                <span className="text-animation">{title}</span>
               </Link>
             </h5>
             <ul className="space-y-1.5">
               {items.map((subItem, ind) => (
                 <li key={ind} className="leading-6">
-                  <Link
-                    to={subItem.to}
-                    prefetch="intent"
-                    className="animate-hover"
-                  >
-                    {subItem.title}
+                  <Link to={subItem.to} prefetch="intent">
+                    <span className="text-animation">{subItem.title}</span>
                   </Link>
                 </li>
               ))}
             </ul>
           </div>
         </div>
       </div>
-    </div>
+    </GroupWrapper>
   );
 }
 
 function ImageMenu({ title, items, to }: SingleMenuItem) {
   return (
-    <div className="group">
-      <ItemHeader title={title} to={to} />
+    <GroupWrapper title={title} to={to}>
       <div className={clsx("w-screen top-full left-0", dropdownContentClass)}>
         <div className="py-8">
           <div className="flex gap-6 w-fit container mx-auto">
@@ -182,6 +165,31 @@ function ImageMenu({ title, items, to }: SingleMenuItem) {
           </div>
         </div>
       </div>
+    </GroupWrapper>
+  );
+}
+
+function GroupHeader({ title, to }: { title: string; to: string }) {
+  return (
+    <div className="h-full flex items-center px-3 cursor-pointer relative z-30">
+      <Link to={to} className="py-2">
+        <span className="uppercase text-animation group/header">{title}</span>
+      </Link>
+    </div>
+  );
+}
+
+function GroupWrapper(props: {
+  children?: React.ReactNode;
+  className?: string;
+  title: string;
+  to: string;
+}) {
+  let { children, className, title, to } = props;
+  return (
+    <div className={clsx("group", className)}>
+      <GroupHeader title={title} to={to} />
+      {children}
     </div>
   );
 }
diff --git a/app/modules/header/menu/MobileMenu.tsx b/app/modules/header/menu/MobileMenu.tsx
@@ -83,7 +83,6 @@ function MultiMenu(props: SingleMenuItem) {
                                 key={ind}
                                 to={subItem.to}
                                 prefetch="intent"
-                                className="animate-hover"
                               >
                                 {subItem.title}
                               </Link>
@@ -192,7 +191,6 @@ function SingleMenu(props: SingleMenuItem) {
                 key={ind}
                 to={subItem.to}
                 prefetch="intent"
-                className="animate-hover"
               >
                 {subItem.title}
               </Link>

diff --git a/app/modules/product-form/judgeme-review.tsx b/app/modules/product-form/judgeme-review.tsx
@@ -60,7 +60,6 @@ export default JudgemeReview;
 export let schema: HydrogenComponentSchema = {
   type: "judgeme",
   title: "Judgeme review",
-  toolbar: ["general-settings", ["duplicate", "delete"]],
   inspector: [
     {
       group: "Judgeme",
-Original file line number
+Diff line change
@@ Expand Up / @@ -220,5 +220,4 @@ export let schema: HydrogenComponentSchema = { @@
           inputs: headingInputs,
         },
       ],
-      toolbar: ["general-settings", ["duplicate", "delete"]],
     };