Skip to content

Commit

Permalink
Merge branch 'Weaverse:main' into main
Browse files Browse the repository at this point in the history
hta218 authored May 26, 2024
2 parents 89a04e1 + 853f2c1 commit 258046f
Showing 7 changed files with 185 additions and 73 deletions.
17 changes: 13 additions & 4 deletions app/components/Button.tsx
Original file line number Diff line number Diff line change
@@ -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",
108 changes: 42 additions & 66 deletions app/components/Section.tsx
Original file line number Diff line number Diff line change
@@ -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",
21 changes: 21 additions & 0 deletions app/lib/utils.ts
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 2 additions & 2 deletions app/sections/columns-with-images/column.tsx
Original file line number Diff line number Diff line change
@@ -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,
],
},
],
102 changes: 102 additions & 0 deletions app/sections/spacer.tsx
Original file line number Diff line number Diff line change
@@ -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"]],
};
4 changes: 3 additions & 1 deletion app/styles/app.css
Original file line number Diff line number Diff line change
@@ -47,7 +47,9 @@
h3,
h4,
h5,
h6 {
h6,
a,
button {
@apply font-sans;
}

2 changes: 2 additions & 0 deletions app/weaverse/components.ts
Original file line number Diff line number Diff line change
@@ -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,
];

0 comments on commit 258046f

Please sign in to comment.