Merge branch 'Weaverse:main' into main

Weaverse · May 26, 2024 · 258046f · 258046f
2 parents 89a04e1 + 853f2c1
commit 258046f
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 73 deletions.
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -1,7 +1,7 @@
 import type {
-  InspectorGroup,
   HydrogenComponentProps,
   HydrogenComponentSchema,
+  InspectorGroup,
 } from "@weaverse/hydrogen";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
@@ -16,7 +16,7 @@ export interface ButtonProps extends VariantProps<typeof variants> {
   text: string;
   link?: string;
   openInNewTab?: boolean;
-  buttonStyle: "inherit" | "custom";
+  buttonStyle?: "inherit" | "custom";
   backgroundColor?: string;
   textColor?: string;
   borderColor?: string;
@@ -120,7 +120,7 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
 
 export default Button;
 
-export let buttonInputs: InspectorGroup["inputs"] = [
+export let buttonContentInputs: InspectorGroup["inputs"] = [
   {
     type: "text",
     name: "text",
@@ -155,9 +155,11 @@ export let buttonInputs: InspectorGroup["inputs"] = [
     },
     defaultValue: "primary",
   },
+];
+export let buttonStylesInputs: InspectorGroup["inputs"] = [
   {
     type: "heading",
-    label: "Styles",
+    label: "Button styles",
   },
   {
     type: "select",
@@ -170,6 +172,8 @@ export let buttonInputs: InspectorGroup["inputs"] = [
       ],
     },
     defaultValue: "inherit",
+    helpText:
+      "Select 'Inherit' to use the default button styles from global theme settings, or 'Custom' to customize the button styles.",
   },
   {
     type: "color",
@@ -215,6 +219,11 @@ export let buttonInputs: InspectorGroup["inputs"] = [
   },
 ];
 
+export let buttonInputs: InspectorGroup["inputs"] = [
+  ...buttonContentInputs,
+  ...buttonStylesInputs,
+];
+
 export let schema: HydrogenComponentSchema = {
   type: "button",
   title: "Button",

diff --git a/app/components/Section.tsx b/app/components/Section.tsx
@@ -5,13 +5,13 @@ import {
 import clsx from "clsx";
 import type { HTMLAttributes } from "react";
 import React, { forwardRef } from "react";
+import { removeFalsy } from "~/lib/utils";
 import type { BackgroundImageProps } from "./BackgroundImage";
 import { BackgroundImage, backgroundInputs } from "./BackgroundImage";
 import { Overlay, overlayInputs } from "./Overlay";
 
 export type SectionWidth = "full" | "stretch" | "fixed";
 export type VerticalPadding = "none" | "small" | "medium" | "large";
-export type DividerType = "none" | "top" | "bottom" | "both";
 
 export type SectionProps = HydrogenComponentProps &
   HTMLAttributes<HTMLElement> &
@@ -22,7 +22,6 @@ export type SectionProps = HydrogenComponentProps &
     gap: number;
     className: string;
     verticalPadding: VerticalPadding;
-    divider: DividerType;
     borderRadius: number;
     enableOverlay: boolean;
     overlayColor: string;
@@ -76,7 +75,6 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     as: Component = "section",
     width,
     gap,
-    divider,
     verticalPadding,
     borderRadius,
     backgroundColor,
@@ -97,23 +95,48 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
   let isBackgroundForContent = backgroundFor === "content";
 
   return (
-    <>
-      {(divider === "top" || divider === "both") && <Divider />}
-      <Component
-        ref={ref}
-        {...rest}
+    <Component
+      ref={ref}
+      {...rest}
+      className={clsx(
+        "relative overflow-hidden",
+        paddingClasses[width!],
+        className,
+      )}
+      style={removeFalsy({
+        ...style,
+        backgroundColor: !isBackgroundForContent ? backgroundColor : "",
+        borderRadius: !isBackgroundForContent ? borderRadius : "",
+      })}
+    >
+      {!isBackgroundForContent && (
+        <>
+          <BackgroundImage
+            backgroundImage={backgroundImage}
+            backgroundFit={backgroundFit}
+            backgroundPosition={backgroundPosition}
+          />
+          <Overlay
+            enable={enableOverlay}
+            color={overlayColor}
+            opacity={overlayOpacity}
+          />
+        </>
+      )}
+      <div
         className={clsx(
           "relative overflow-hidden",
-          paddingClasses[width!],
-          className,
+          widthClasses[width!],
+          gapClasses[gap!],
+          verticalPaddingClasses[verticalPadding!],
+          containerClassName,
         )}
-        style={{
-          ...style,
-          backgroundColor: !isBackgroundForContent ? backgroundColor : "",
-          borderRadius: !isBackgroundForContent ? borderRadius : "",
-        }}
+        style={removeFalsy({
+          backgroundColor: isBackgroundForContent ? backgroundColor : "",
+          borderRadius: isBackgroundForContent ? borderRadius : "",
+        })}
       >
-        {!isBackgroundForContent && (
+        {isBackgroundForContent && (
           <>
             <BackgroundImage
               backgroundImage={backgroundImage}
@@ -127,45 +150,12 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
             />
           </>
         )}
-        <div
-          className={clsx(
-            "relative overflow-hidden",
-            widthClasses[width!],
-            gapClasses[gap!],
-            verticalPaddingClasses[verticalPadding!],
-            containerClassName,
-          )}
-          style={{
-            backgroundColor: isBackgroundForContent ? backgroundColor : "",
-            borderRadius: isBackgroundForContent ? borderRadius : "",
-          }}
-        >
-          {isBackgroundForContent && (
-            <>
-              <BackgroundImage
-                backgroundImage={backgroundImage}
-                backgroundFit={backgroundFit}
-                backgroundPosition={backgroundPosition}
-              />
-              <Overlay
-                enable={enableOverlay}
-                color={overlayColor}
-                opacity={overlayOpacity}
-              />
-            </>
-          )}
-          {children}
-        </div>
-      </Component>
-      {(divider === "bottom" || divider === "both") && <Divider />}
-    </>
+        {children}
+      </div>
+    </Component>
   );
 });
 
-function Divider() {
-  return <div className="border-t w-2/3 lg:w-1/2 mx-auto" />;
-}
-
 export let layoutInputs: InspectorGroup["inputs"] = [
   {
     type: "select",
@@ -206,20 +196,6 @@ export let layoutInputs: InspectorGroup["inputs"] = [
     },
     defaultValue: "medium",
   },
-  {
-    type: "select",
-    name: "divider",
-    label: "Divider",
-    configs: {
-      options: [
-        { value: "none", label: "None" },
-        { value: "top", label: "Top" },
-        { value: "bottom", label: "Bottom" },
-        { value: "both", label: "Both" },
-      ],
-    },
-    defaultValue: "none",
-  },
   {
     type: "range",
     name: "borderRadius",

diff --git a/app/lib/utils.ts b/app/lib/utils.ts
@@ -312,3 +312,24 @@ export function isLocalPath(url: string) {
 
   return false;
 }
+
+export function removeFalsy<T = any>(
+  obj: {},
+  falsyValues: any[] = ["", null, undefined],
+): T {
+  if (!obj || typeof obj !== "object") return obj as any;
+
+  return Object.entries(obj).reduce((a: any, c) => {
+    let [k, v]: [string, any] = c;
+    if (
+      falsyValues.indexOf(v) === -1 &&
+      JSON.stringify(removeFalsy(v, falsyValues)) !== "{}"
+    ) {
+      a[k] =
+        typeof v === "object" && !Array.isArray(v)
+          ? removeFalsy(v, falsyValues)
+          : v;
+    }
+    return a;
+  }, {}) as T;
+}
diff --git a/app/sections/columns-with-images/column.tsx b/app/sections/columns-with-images/column.tsx
@@ -8,7 +8,7 @@ import {
 import clsx from "clsx";
 import { forwardRef } from "react";
 import type { ButtonProps } from "~/components/Button";
-import Button, { buttonInputs } from "~/components/Button";
+import Button, { buttonContentInputs } from "~/components/Button";
 
 interface ColumnWithImageItemProps extends ButtonProps, HydrogenComponentProps {
   imageSrc: WeaverseImage;
@@ -129,7 +129,7 @@ export let schema: HydrogenComponentSchema = {
           type: "heading",
           label: "Button (optional)",
         },
-        ...buttonInputs,
+        ...buttonContentInputs,
       ],
     },
   ],

diff --git a/app/sections/spacer.tsx b/app/sections/spacer.tsx
@@ -0,0 +1,102 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from "@weaverse/hydrogen";
+import { forwardRef } from "react";
+
+type SpacerProps = HydrogenComponentProps & {
+  mobileHeight: number;
+  desktopHeight: number;
+  backgroundColor: string;
+  addSeparator: boolean;
+  separatorColor: string;
+};
+
+let Spacer = forwardRef<HTMLDivElement, SpacerProps>((props, ref) => {
+  let {
+    mobileHeight,
+    desktopHeight,
+    backgroundColor,
+    addSeparator,
+    separatorColor,
+    ...rest
+  } = props;
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className="w-full flex items-center justify-center h-[var(--mobile-height)] md:h-[var(--desktop-height)]"
+      style={
+        {
+          backgroundColor,
+          "--mobile-height": mobileHeight + "px",
+          "--desktop-height": desktopHeight + "px",
+          "--separator-color": separatorColor,
+        } as React.CSSProperties
+      }
+    >
+      {addSeparator && (
+        <div className="w-3/4 md:w-2/3 mx-auto border-t h-px border-[var(--separator-color,var(--color-border))]" />
+      )}
+    </div>
+  );
+});
+
+export default Spacer;
+
+export let schema: HydrogenComponentSchema = {
+  type: "spacer",
+  title: "Spacer",
+  inspector: [
+    {
+      group: "Spacer",
+      inputs: [
+        {
+          type: "range",
+          label: "Mobile height",
+          name: "mobileHeight",
+          configs: {
+            min: 0,
+            max: 200,
+            step: 1,
+            unit: "px",
+          },
+          defaultValue: 50,
+          helpText: "Set to 0 to hide the Spacer on mobile devices",
+        },
+        {
+          type: "range",
+          label: "Desktop height",
+          name: "desktopHeight",
+          configs: {
+            min: 0,
+            max: 300,
+            step: 1,
+            unit: "px",
+          },
+          defaultValue: 100,
+        },
+        {
+          type: "color",
+          label: "Background color",
+          name: "backgroundColor",
+          defaultValue: "#00000000",
+        },
+        {
+          type: "switch",
+          label: "Add border separator",
+          name: "addSeparator",
+          defaultValue: false,
+        },
+        {
+          type: "color",
+          label: "Separator color",
+          name: "separatorColor",
+          defaultValue: "#000",
+          condition: "addSeparator.eq.true",
+        },
+      ],
+    },
+  ],
+  toolbar: ["general-settings", ["duplicate", "delete"]],
+};
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -47,7 +47,9 @@
   h3,
   h4,
   h5,
-  h6 {
+  h6,
+  a,
+  button {
     @apply font-sans;
   }
 

diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
@@ -46,6 +46,7 @@ import * as TestimonialItems from "~/sections/testimonials/items";
 import * as UserProfiles from "~/sections/user-profiles";
 import * as VideoEmbed from "~/sections/video-embed";
 import * as VideoEmbedItem from "~/sections/video-embed/video";
+import * as Spacer from "~/sections/spacer";
 
 export let components: HydrogenComponent[] = [
   ...sharedComponents,
@@ -97,4 +98,5 @@ export let components: HydrogenComponent[] = [
   SlideShowItem,
   ProductList,
   ContactForm,
+  Spacer,
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,9 @@ @@
       h3,
       h4,
       h5,
-      h6 {
+      h6,
+      a,
+      button {
         @apply font-sans;
       }
@@ Expand Down @@