Merge branch 'Weaverse:main' into main

Weaverse · May 27, 2024 · 4ba2a5e · 4ba2a5e
2 parents 258046f + 9b46c4a
commit 4ba2a5e
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 84 deletions.
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -173,7 +173,7 @@ export let buttonStylesInputs: InspectorGroup["inputs"] = [
     },
     defaultValue: "inherit",
     helpText:
-      "Select 'Inherit' to use the default button styles from global theme settings, or 'Custom' to customize the button styles.",
+      "Use 'Inherit' for theme-based styles, or 'Custom' to modify button appearance.",
   },
   {
     type: "color",

diff --git a/app/components/Overlay.tsx b/app/components/Overlay.tsx
@@ -1,19 +1,22 @@
 import type { InspectorGroup } from "@weaverse/hydrogen";
+import { cn } from "~/lib/cn";
 
-type OverlayProps = {
-  enable?: boolean;
-  color?: string;
-  opacity?: number;
+export type OverlayProps = {
+  enableOverlay: boolean;
+  overlayColor: string;
+  overlayOpacity: number;
+  className?: string;
 };
 
-export function Overlay({ enable, color, opacity }: OverlayProps) {
-  if (enable && color) {
+export function Overlay(props: OverlayProps) {
+  let { enableOverlay, overlayColor, overlayOpacity, className } = props;
+  if (enableOverlay && overlayColor) {
     return (
       <div
-        className="absolute inset-0 z-[-1]"
+        className={cn("absolute inset-0 z-[-1]", className)}
         style={{
-          backgroundColor: color,
-          opacity: (opacity || 100) / 100,
+          backgroundColor: overlayColor,
+          opacity: (overlayOpacity || 100) / 100,
           margin: 0,
         }}
       />

diff --git a/app/components/Section.tsx b/app/components/Section.tsx
@@ -8,6 +8,7 @@ import React, { forwardRef } from "react";
 import { removeFalsy } from "~/lib/utils";
 import type { BackgroundImageProps } from "./BackgroundImage";
 import { BackgroundImage, backgroundInputs } from "./BackgroundImage";
+import type { OverlayProps } from "./Overlay";
 import { Overlay, overlayInputs } from "./Overlay";
 
 export type SectionWidth = "full" | "stretch" | "fixed";
@@ -16,16 +17,14 @@ export type VerticalPadding = "none" | "small" | "medium" | "large";
 export type SectionProps = HydrogenComponentProps &
   HTMLAttributes<HTMLElement> &
   BackgroundImageProps &
+  OverlayProps &
   Partial<{
     as: React.ElementType;
     width: SectionWidth;
     gap: number;
     className: string;
     verticalPadding: VerticalPadding;
     borderRadius: number;
-    enableOverlay: boolean;
-    overlayColor: string;
-    overlayOpacity: number;
     backgroundColor: string;
     backgroundFor: "section" | "content";
     children: React.ReactNode;
@@ -109,20 +108,7 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
         borderRadius: !isBackgroundForContent ? borderRadius : "",
       })}
     >
-      {!isBackgroundForContent && (
-        <>
-          <BackgroundImage
-            backgroundImage={backgroundImage}
-            backgroundFit={backgroundFit}
-            backgroundPosition={backgroundPosition}
-          />
-          <Overlay
-            enable={enableOverlay}
-            color={overlayColor}
-            opacity={overlayOpacity}
-          />
-        </>
-      )}
+      {!isBackgroundForContent && <OverlayAndBackground {...props} />}
       <div
         className={clsx(
           "relative overflow-hidden",
@@ -136,26 +122,38 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
           borderRadius: isBackgroundForContent ? borderRadius : "",
         })}
       >
-        {isBackgroundForContent && (
-          <>
-            <BackgroundImage
-              backgroundImage={backgroundImage}
-              backgroundFit={backgroundFit}
-              backgroundPosition={backgroundPosition}
-            />
-            <Overlay
-              enable={enableOverlay}
-              color={overlayColor}
-              opacity={overlayOpacity}
-            />
-          </>
-        )}
+        {isBackgroundForContent && <OverlayAndBackground {...props} />}
         {children}
       </div>
     </Component>
   );
 });
 
+function OverlayAndBackground(props: SectionProps) {
+  let {
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    enableOverlay,
+    overlayColor,
+    overlayOpacity,
+  } = props;
+  return (
+    <>
+      <BackgroundImage
+        backgroundImage={backgroundImage}
+        backgroundFit={backgroundFit}
+        backgroundPosition={backgroundPosition}
+      />
+      <Overlay
+        enableOverlay={enableOverlay}
+        overlayColor={overlayColor}
+        overlayOpacity={overlayOpacity}
+      />
+    </>
+  );
+}
+
 export let layoutInputs: InspectorGroup["inputs"] = [
   {
     type: "select",

diff --git a/app/lib/cn.ts b/app/lib/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge as merge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return merge(clsx(inputs))
+}
diff --git a/app/sections/hero-video/index.tsx b/app/sections/hero-video/index.tsx
@@ -1,39 +1,36 @@
-import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from "@weaverse/hydrogen";
 import clsx from "clsx";
 import type { CSSProperties } from "react";
-import { forwardRef, lazy, Suspense } from "react";
-import { overlayInputs } from "~/components/Overlay";
+import { Suspense, forwardRef, lazy } from "react";
+import type { OverlayProps } from "~/components/Overlay";
+import { Overlay, overlayInputs } from "~/components/Overlay";
 import { gapClasses } from "~/components/Section";
 
-type HeroVideoProps = {
+type HeroVideoProps = OverlayProps & {
   videoURL: string;
-  gap: number;
-  enableOverlay: boolean;
-  overlayColor: string;
-  overlayOpacity: number;
   sectionHeightDesktop: number;
   sectionHeightMobile: number;
-  children: React.ReactNode;
+  gap: number;
 };
 
-let RP = lazy(() => import("react-player/lazy"));
-let ReactPlayer = (props: any) => (
-  <Suspense fallback={null}>
-    <RP {...props} />
-  </Suspense>
-);
-let FALLBACK_VIDEO = "https://www.youtube.com/watch?v=Su-x4Mo5xmU";
+let ReactPlayer = lazy(() => import("react-player/lazy"));
 
-let HeroVideo = forwardRef<HTMLElement, HeroVideoProps>((props, ref) => {
+let HeroVideo = forwardRef<
+  HTMLElement,
+  HeroVideoProps & HydrogenComponentProps
+>((props, ref) => {
   let {
     videoURL,
     gap,
     sectionHeightDesktop,
     sectionHeightMobile,
-    children,
     enableOverlay,
     overlayColor,
     overlayOpacity,
+    children,
     ...rest
   } = props;
   let sectionStyle: CSSProperties = {
@@ -56,28 +53,27 @@ let HeroVideo = forwardRef<HTMLElement, HeroVideoProps>((props, ref) => {
           "translate-x-[min(0px,calc((var(--mobile-height)/9*16-100vw)/-2))] sm:translate-x-[min(0px,calc((var(--desktop-height)/9*16-100vw)/-2))]",
         )}
       >
-        <ReactPlayer
-          url={videoURL || FALLBACK_VIDEO}
-          playing
-          muted
-          loop
-          width="100%"
-          height="auto"
-          controls={false}
-          className="aspect-video"
-        />
-        {enableOverlay ? (
-          <div
-            className="absolute inset-0"
-            style={{
-              backgroundColor: overlayColor,
-              opacity: (overlayOpacity || 50) / 100,
-            }}
+        <Suspense fallback={null}>
+          <ReactPlayer
+            url={videoURL}
+            playing
+            muted
+            loop={true}
+            width="100%"
+            height="auto"
+            controls={false}
+            className="aspect-video"
           />
-        ) : null}
+        </Suspense>
+        <Overlay
+          enableOverlay={enableOverlay}
+          overlayColor={overlayColor}
+          overlayOpacity={overlayOpacity}
+          className="z-0"
+        />
         <div
           className={clsx(
-            "absolute inset-0 max-w-[100vw] mx-auto px-3 flex flex-col justify-center z-10",
+            "absolute inset-0 max-w-[100vw] mx-auto px-3 flex flex-col justify-center items-center z-10",
             gapClasses[gap],
           )}
         >
@@ -96,7 +92,7 @@ export let schema: HydrogenComponentSchema = {
   toolbar: ["general-settings", ["duplicate", "delete"]],
   inspector: [
     {
-      group: "Video hero",
+      group: "Video",
       inputs: [
         {
           type: "text",
@@ -137,7 +133,7 @@ export let schema: HydrogenComponentSchema = {
         {
           type: "range",
           name: "gap",
-          label: "Content spacing",
+          label: "Items spacing",
           configs: {
             min: 0,
             max: 40,
@@ -146,26 +142,36 @@ export let schema: HydrogenComponentSchema = {
           },
           defaultValue: 20,
         },
-        ...overlayInputs,
       ],
     },
+    {
+      group: "Overlay",
+      inputs: overlayInputs,
+    },
   ],
   childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
     enableOverlay: true,
+    overlayColor: "#000000",
+    overlayOpacity: 40,
+    videoURL: "https://www.youtube.com/watch?v=gbLmku5QACM",
     children: [
       {
         type: "subheading",
         content: "Seamless hero videos",
+        color: "#fff",
       },
       {
         type: "heading",
         content: "Bring your brand to life.",
+        size: "jumbo",
+        color: "#fff",
       },
       {
         type: "paragraph",
         content:
           "Pair large video with a compelling message to captivate your audience.",
+        color: "#fff",
       },
     ],
   },

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
@@ -152,7 +152,7 @@ export let themeSchema: HydrogenThemeSchema = {
           type: "color",
           label: "Border",
           name: "colorBorder",
-          defaultValue: "#0F0F0F",
+          defaultValue: "#ffbaba7d",
         },
       ],
     },

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@weaverse/pilot",
   "private": true,
   "sideEffects": false,
-  "version": "2.6.9",
+  "version": "2.6.10",
   "type": "module",
   "author": "Weaverse",
   "scripts": {
@@ -45,6 +45,7 @@
     "react-player": "^2.16.0",
     "react-use": "17.5.0",
     "schema-dts": "1.1.2",
+    "tailwind-merge": "^2.3.0",
     "tiny-invariant": "1.3.3",
     "typographic-base": "1.0.4"
   },
@@ -82,4 +83,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}