Merge pull request Weaverse#121 from Weaverse/dev

Refactoring theme, update sections

app/components/BackgroundImage.tsx

@@ -7,18 +7,22 @@ import type {
 import type { CSSProperties } from "react";
 
 export type BackgroundImageProps = {
-  backgroundImage?: WeaverseImage;
+  backgroundImage?: WeaverseImage | string;
   backgroundFit?: CSSProperties["objectFit"];
   backgroundPosition?: PositionInputValue;
 };
 
 export function BackgroundImage(props: BackgroundImageProps) {
   let { backgroundImage, backgroundFit, backgroundPosition } = props;
   if (backgroundImage) {
+    let data =
+      typeof backgroundImage === "string"
+        ? { url: backgroundImage, altText: "Section background" }
+        : backgroundImage;
     return (
       <Image
         className="absolute inset-0 w-full h-full z-[-1]"
-        data={backgroundImage}
+        data={data}
         sizes="auto"
         style={{
           objectFit: backgroundFit,
@@ -31,10 +35,6 @@ export function BackgroundImage(props: BackgroundImageProps) {
 }
 
 export let backgroundInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Background",
-  },
   {
     type: "select",
     name: "backgroundFor",

app/components/Button.tsx

@@ -6,6 +6,7 @@ import type {
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
+import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { Link } from "~/modules";
 
@@ -15,6 +16,13 @@ export interface ButtonProps extends VariantProps<typeof variants> {
   text: string;
   link?: string;
   openInNewTab?: boolean;
+  buttonStyle: "inherit" | "custom";
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+  backgroundColorHover?: string;
+  textColorHover?: string;
+  borderColorHover?: string;
 }
 
 let variants = cva(
@@ -45,7 +53,10 @@ let variants = cva(
   },
 );
 
-interface Props extends ButtonProps, Partial<HydrogenComponentProps> {}
+interface Props
+  extends ButtonProps,
+    Omit<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "children">,
+    Partial<HydrogenComponentProps> {}
 
 let Button = forwardRef<HTMLElement, Props>((props, ref) => {
   let {
@@ -57,15 +68,35 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
     link,
     openInNewTab,
     className,
+    buttonStyle,
+    backgroundColor,
+    textColor,
+    borderColor,
+    backgroundColorHover,
+    textColorHover,
+    borderColorHover,
+    style = {},
     ...rest
   } = props;
+  if (buttonStyle === "custom") {
+    style = {
+      ...style,
+      "--color-button-bg": backgroundColor,
+      "--color-button-text": textColor,
+      "--color-button-border": borderColor,
+      "--color-button-bg-hover": backgroundColorHover,
+      "--color-button-text-hover": textColorHover,
+      "--color-button-border-hover": borderColorHover,
+    } as React.CSSProperties;
+  }
 
   if (link) {
     return (
       <Link
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+        style={style}
         {...rest}
-        className={clsx(variants({ variant: variant, className }))}
+        className={clsx(variants({ variant, className }))}
         to={link || "/"}
         target={openInNewTab ? "_blank" : "_self"}
         rel="noreferrer"
@@ -77,9 +108,10 @@ let Button = forwardRef<HTMLElement, Props>((props, ref) => {
   return (
     <button
       ref={ref as React.ForwardedRef<HTMLButtonElement>}
+      style={style}
       {...rest}
       type="button"
-      className={clsx(variants({ variant: variant, className }))}
+      className={clsx(variants({ variant, className }))}
     >
       {text}
     </button>
@@ -123,6 +155,64 @@ export let buttonInputs: InspectorGroup["inputs"] = [
     },
     defaultValue: "primary",
   },
+  {
+    type: "heading",
+    label: "Styles",
+  },
+  {
+    type: "select",
+    name: "buttonStyle",
+    label: "Button style",
+    configs: {
+      options: [
+        { label: "Inherit", value: "inherit" },
+        { label: "Custom", value: "custom" },
+      ],
+    },
+    defaultValue: "inherit",
+  },
+  {
+    type: "color",
+    label: "Background color",
+    name: "backgroundColor",
+    defaultValue: "#000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Text color",
+    name: "textColor",
+    defaultValue: "#fff",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Border color",
+    name: "borderColor",
+    defaultValue: "#00000000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Background color (hover)",
+    name: "backgroundColorHover",
+    defaultValue: "#00000000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Text color (hover)",
+    name: "textColorHover",
+    defaultValue: "#000",
+    condition: "buttonStyle.eq.custom",
+  },
+  {
+    type: "color",
+    label: "Border color (hover)",
+    name: "borderColorHover",
+    defaultValue: "#000",
+    condition: "buttonStyle.eq.custom",
+  },
 ];
 
 export let schema: HydrogenComponentSchema = {

app/components/Overlay.tsx

@@ -23,10 +23,6 @@ export function Overlay({ enable, color, opacity }: OverlayProps) {
 }
 
 export let overlayInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Overlay",
-  },
   {
     type: "switch",
     name: "enableOverlay",

app/components/Description.tsx → app/components/Paragraph.tsx

@@ -2,36 +2,38 @@ import {
   type HydrogenComponentProps,
   type HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 
-import type { Alignment } from "~/lib/type";
-
-type DescriptionProps = HydrogenComponentProps & {
-  content: string;
+export interface ParagraphProps extends VariantProps<typeof variants> {
   as?: "p" | "div";
+  content: string;
   color?: string;
-  width?: Width;
-  alignment?: Alignment;
   className?: string;
-};
-
-type Width = "full" | "narrow";
-
-let widthClasses: Record<Width, string> = {
-  full: "w-full mx-auto",
-  narrow: "w-full md:w-1/2 lg:w-3/4 max-w-4xl mx-auto",
-};
+}
 
-let alignmentClasses: Record<Alignment, string> = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right",
-};
+let variants = cva("paragraph", {
+  variants: {
+    width: {
+      full: "w-full mx-auto",
+      narrow: "w-full md:w-1/2 lg:w-3/4 max-w-4xl mx-auto",
+    },
+    alignment: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    width: "full",
+  },
+});
 
-let Description = forwardRef<
+let Paragraph = forwardRef<
   HTMLParagraphElement | HTMLDivElement,
-  DescriptionProps
+  ParagraphProps & HydrogenComponentProps
 >((props, ref) => {
   let {
     as: Tag = "p",
@@ -47,33 +49,21 @@ let Description = forwardRef<
       ref={ref}
       {...rest}
       style={{ color }}
-      className={clsx(
-        widthClasses[width!],
-        alignmentClasses[alignment!],
-        className,
-      )}
+      className={clsx(variants({ width, alignment, className }))}
       suppressHydrationWarning
       dangerouslySetInnerHTML={{ __html: content }}
     />
   );
 });
 
-Description.defaultProps = {
-  as: "p",
-  width: "narrow",
-  content:
-    "Pair large text with an image or full-width video to showcase your brand's lifestyle to describe and showcase an important detail of your products that you can tag on your image.",
-  alignment: "center",
-};
-
-export default Description;
+export default Paragraph;
 
 export let schema: HydrogenComponentSchema = {
-  type: "description",
-  title: "Description",
+  type: "paragraph",
+  title: "Paragraph",
   inspector: [
     {
-      group: "Description",
+      group: "Paragraph",
       inputs: [
         {
           type: "select",