Merge branch 'Weaverse:main' into main

Weaverse · May 31, 2024 · 13e55eb · 13e55eb
2 parents 88af712 + 5a777f9
commit 13e55eb
Show file tree

Hide file tree

Showing 10 changed files with 639 additions and 607 deletions.
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -10,21 +10,6 @@ import { forwardRef } from "react";
 import { cn } from "~/lib/cn";
 import { Link } from "~/modules";
 
-export interface ButtonProps extends VariantProps<typeof variants> {
-  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 variants = cva(
   "inline-flex items-center justify-center whitespace-nowrap text-base font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
@@ -53,12 +38,25 @@ let variants = cva(
   },
 );
 
-interface Props
-  extends ButtonProps,
+export interface ButtonProps
+  extends VariantProps<typeof variants>,
     Omit<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "children">,
-    Partial<HydrogenComponentProps> {}
+    Partial<HydrogenComponentProps> {
+  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, Props>((props, ref) => {
+let Button = forwardRef<HTMLElement, ButtonProps>((props, ref) => {
   let {
     // as = "button",
     variant,

diff --git a/app/components/Heading.tsx b/app/components/Heading.tsx
@@ -19,7 +19,6 @@ type HeadingProps = HydrogenComponentProps & {
   weight?: Weight;
   tracking?: Tracking;
   alignment?: Alignment;
-  className?: string;
   minSize?: number;
   maxSize?: number;
 };

diff --git a/app/components/Paragraph.tsx b/app/components/Paragraph.tsx
@@ -11,7 +11,6 @@ export interface ParagraphProps extends VariantProps<typeof variants> {
   as?: "p" | "div";
   content: string;
   color?: string;
-  className?: string;
 }
 
 let variants = cva("paragraph", {

diff --git a/app/components/Section.tsx b/app/components/Section.tsx
@@ -25,7 +25,6 @@ export interface SectionProps
     OverlayProps {
   as: React.ElementType;
   borderRadius: number;
-  className: string;
   containerClassName: string;
 }
 
@@ -89,34 +88,32 @@ export let Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     style = {},
     ...rest
   } = props;
+
   style = {
     ...style,
     "--section-background-color": backgroundColor,
     "--section-border-radius": `${borderRadius}px`,
   } as React.CSSProperties;
+
   let isBgForContent = backgroundFor === "content";
+  let hasBackground = backgroundColor || backgroundImage || borderRadius > 0;
 
   return (
     <Component
       ref={ref}
       {...rest}
       style={style}
-      className={cn(variants({ padding: width, className }), {
-        "has-background": !isBgForContent,
-      })}
+      className={cn(
+        variants({ padding: width, className }),
+        hasBackground && !isBgForContent && "has-background",
+      )}
     >
       {!isBgForContent && <OverlayAndBackground {...props} />}
       <div
         className={cn(
-          variants({
-            gap,
-            width,
-            verticalPadding,
-            className: containerClassName,
-          }),
-          {
-            "has-background": isBgForContent,
-          },
+          variants({ gap, width, verticalPadding }),
+          containerClassName,
+          hasBackground && isBgForContent && "has-background px-2 sm:px-4",
         )}
       >
         {isBgForContent && <OverlayAndBackground {...props} />}
@@ -206,7 +203,7 @@ export let layoutInputs: InspectorGroup["inputs"] = [
 ];
 
 export let sectionInspector: InspectorGroup[] = [
-  { group: "Layout", inputs: [...layoutInputs] },
-  { group: "Background", inputs: [...backgroundInputs] },
-  { group: "Overlay", inputs: [...overlayInputs] },
+  { group: "Layout", inputs: layoutInputs },
+  { group: "Background", inputs: backgroundInputs },
+  { group: "Overlay", inputs: overlayInputs },
 ];
diff --git a/app/components/SubHeading.tsx b/app/components/SubHeading.tsx
@@ -16,7 +16,6 @@ type SubHeadingProps = HydrogenComponentProps & {
   size?: Size;
   weight?: Weight;
   alignment: Alignment;
-  className?: string;
 };
 
 let sizes: Record<Size, string> = {

diff --git a/app/sections/hero-image.tsx b/app/sections/hero-image.tsx
@@ -106,7 +106,7 @@ export let schema: HydrogenComponentSchema = {
         ),
       ],
     },
-    { group: "Overlay", inputs: [...overlayInputs] },
+    { group: "Overlay", inputs: overlayInputs },
   ],
   childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {

diff --git a/app/sections/image-with-text/content.tsx b/app/sections/image-with-text/content.tsx
@@ -2,34 +2,44 @@ import type {
   HydrogenComponentProps,
   HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
-import type { CSSProperties } from "react";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
 import { forwardRef } from "react";
 
-interface ContentItemsProps extends HydrogenComponentProps {
-  gap: number;
-}
-
-let ContentItems = forwardRef<HTMLDivElement, ContentItemsProps>(
-  (props, ref) => {
-    let { children, gap, ...rest } = props;
-    let style = {
-      gap: `${gap}px`,
-      textAlign: "left",
-    } as CSSProperties;
-    return (
-      <div
-        ref={ref}
-        {...rest}
-        className="w-1/2 flex flex-col justify-center gap-5 p-16 sm-max:w-full sm-max:pt-0 sm-max:px-0 sm-max:pb-10"
-        style={style}
-      >
-        {children}
-      </div>
-    );
+let variants = cva(
+  "grow flex flex-col justify-center gap-5 py-6 px-4 md:px-8 md:py-8 [&_.paragraph]:mx-[unset] [&_.paragraph]:w-auto",
+  {
+    variants: {
+      alignment: {
+        left: "items-start",
+        center: "items-center",
+        right: "items-end",
+      },
+    },
+    defaultVariants: {
+      alignment: "center",
+    },
   },
 );
 
-export default ContentItems;
+interface ImageWithTextContentProps
+  extends VariantProps<typeof variants>,
+    HydrogenComponentProps {}
+
+let ImageWithTextContent = forwardRef<
+  HTMLDivElement,
+  ImageWithTextContentProps
+>((props, ref) => {
+  let { alignment, children, ...rest } = props;
+  return (
+    <div ref={ref} {...rest} className={clsx(variants({ alignment }))}>
+      {children}
+    </div>
+  );
+});
+
+export default ImageWithTextContent;
 
 export let schema: HydrogenComponentSchema = {
   type: "image-with-text--content",
@@ -41,22 +51,25 @@ export let schema: HydrogenComponentSchema = {
       group: "Content",
       inputs: [
         {
-          type: "range",
-          name: "gap",
-          label: "Items gap",
+          type: "select",
+          name: "alignment",
+          label: "Alignment",
           configs: {
-            min: 0,
-            max: 40,
-            step: 4,
-            unit: "px",
+            options: [
+              { value: "left", label: "Left" },
+              { value: "center", label: "Center" },
+              { value: "right", label: "Right" },
+            ],
           },
-          defaultValue: 20,
+          helpText:
+            "This will override the default alignment setting of all children components.",
         },
       ],
     },
   ],
   childTypes: ["subheading", "heading", "paragraph", "button"],
   presets: {
+    alignment: "center",
     children: [
       {
         type: "subheading",