diff --git a/src/builder-registry.ts b/src/builder-registry.ts index c709f0c..3cd10b7 100644 --- a/src/builder-registry.ts +++ b/src/builder-registry.ts @@ -8,6 +8,7 @@ import "./components/Column/cmp.builder"; import "./components/Row/cmp.builder"; import "./components/Button/cmp.builder"; import "./components/Text/cmp.builder"; +import "./components/TextGradient/cmp.builder"; import "./components/H1/cmp.builder"; import "./components/H2/cmp.builder"; import "./components/BulletList/cmp.builder"; @@ -18,5 +19,6 @@ import "./components/Breadcrumb/cmp.builder"; import "./components/Image/cmp.builder"; import "./components/Columns/cmp.builder"; import "./components/CardWithSideImage/cmp.builder"; +import "./components/ObjectImage/cmp.builder"; builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!); diff --git a/src/components/Box/cmp.builder.tsx b/src/components/Box/cmp.builder.tsx index 720ba0e..d43c0bf 100644 --- a/src/components/Box/cmp.builder.tsx +++ b/src/components/Box/cmp.builder.tsx @@ -1,6 +1,7 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import { BACKGROUND_COLORS, REM_VALUES } from "@/constants/builderEnums"; import Box from "."; Builder.registerComponent(withChildren(Box), { @@ -8,11 +9,11 @@ Builder.registerComponent(withChildren(Box), { name: "Custom Box", canHaveChildren: true, inputs: [ - ...CSS_EDITABLE_INPUTS, { name: "backgroundColor", type: "string", - enum: ["bg-base0", "bg-base1"], + enum: BACKGROUND_COLORS, }, + ...CSS_EDITABLE_INPUTS, ], }); diff --git a/src/components/Box/styles.tsx b/src/components/Box/styles.tsx index 5d60aab..f91ab31 100644 --- a/src/components/Box/styles.tsx +++ b/src/components/Box/styles.tsx @@ -1,32 +1,9 @@ -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { BoxProps } from "./types"; +import { calculateCssEditableProps } from "@/hooks/calculateCssEditableProps"; export const StyledBox = styled.div` - ${({ - theme, - margin, - marginTop, - marginBottom, - marginRight, - marginLeft, - padding, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - }) => { - return css` - margin: ${margin}; - margin-top: ${marginTop}; - margin-bottom: ${marginBottom}; - margin-right: ${marginRight}; - margin-left: ${marginLeft}; - padding: ${padding}; - padding-top: ${paddingTop}; - padding-bottom: ${paddingBottom}; - padding-right: ${paddingRight}; - padding-left: ${paddingLeft}; - position: relative; - `; + ${({ theme, ...cssEditableProps }) => { + return calculateCssEditableProps(theme, cssEditableProps); }} `; diff --git a/src/components/Box/types.ts b/src/components/Box/types.ts index 9522405..b58a701 100644 --- a/src/components/Box/types.ts +++ b/src/components/Box/types.ts @@ -1,6 +1,8 @@ import { CssEditableProps } from "@/types/CssEditableProps"; +import { HTMLAttributes } from "react"; -export type BoxProps = CssEditableProps & { - children: React.ReactNode; - backgroundColor: string; -}; +export type BoxProps = HTMLAttributes & + CssEditableProps & { + children: React.ReactNode; + backgroundColor: string; + }; diff --git a/src/components/Button/cmp.builder.tsx b/src/components/Button/cmp.builder.tsx index 27667a4..71e2b24 100644 --- a/src/components/Button/cmp.builder.tsx +++ b/src/components/Button/cmp.builder.tsx @@ -1,37 +1,56 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import { Button } from "@aleph-front/core"; +import { COLORS } from "@/constants/builderEnums"; Builder.registerComponent(withChildren(Button), { ...DEFAULT_PROPS, - name: "Button", + name: "Core:Button", canHaveChildren: true, + noWrap: true, inputs: [ ...DEFAULT_PROPS.inputs, { name: "children", + friendlyName: "Text content", + helperText: "Press Enter to add a line break", type: "longText", }, { name: "href", + friendlyName: "Link", type: "string", }, { name: "kind", type: "string", + enum: ["gradient", "yellow", "functional"], }, { name: "variant", type: "string", + enum: ["primary", "secondary", "tertiary"], }, { name: "size", type: "string", enum: ["sm", "md", "lg"], }, + { + name: "as", + type: "string", + enum: ["button", "a"], + }, + { + name: "target", + type: "string", + enum: ["_self", "_blank"], + defaultValue: "_self", + }, { name: "color", type: "string", + enum: COLORS, }, { name: "hover", @@ -49,16 +68,5 @@ Builder.registerComponent(withChildren(Button), { name: "disabled", type: "boolean", }, - { - name: "as", - type: "string", - enum: ["button", "a"], - }, - { - name: "target", - type: "string", - enum: ["_self", "_blank"], - defaultValue: "_self", - }, ], }); diff --git a/src/components/CardWithSideImage/cmp.builder.tsx b/src/components/CardWithSideImage/cmp.builder.tsx index a750d2a..b3db42b 100644 --- a/src/components/CardWithSideImage/cmp.builder.tsx +++ b/src/components/CardWithSideImage/cmp.builder.tsx @@ -1,6 +1,7 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import CardWithSideImage from "."; +import { BACKGROUND_COLORS } from "@/constants/builderEnums"; Builder.registerComponent(withChildren(CardWithSideImage), { ...DEFAULT_PROPS, @@ -27,7 +28,12 @@ Builder.registerComponent(withChildren(CardWithSideImage), { type: "string", enum: ["left", "right"], defaultValue: "left", - helperText: "", + }, + { + name: "cardBackgroundColor", + type: "string", + enum: BACKGROUND_COLORS, + defaultValue: "bg-base0", }, { name: "reverseColumnsWhenStacked", diff --git a/src/components/CardWithSideImage/cmp.tsx b/src/components/CardWithSideImage/cmp.tsx index 77084b0..de01b0c 100644 --- a/src/components/CardWithSideImage/cmp.tsx +++ b/src/components/CardWithSideImage/cmp.tsx @@ -10,6 +10,7 @@ export const CardWithSideImage = ({ imageSrc, imageAlt, imagePosition, + cardBackgroundColor, reverseColumnsWhenStacked, }: CardWithSideImageProps) => { const imageCmp = ( @@ -18,7 +19,7 @@ export const CardWithSideImage = ({ const cardCmp = ( -
+
{children}
diff --git a/src/components/CardWithSideImage/types.ts b/src/components/CardWithSideImage/types.ts index 1fcaed7..7bf5bbc 100644 --- a/src/components/CardWithSideImage/types.ts +++ b/src/components/CardWithSideImage/types.ts @@ -3,5 +3,6 @@ export type CardWithSideImageProps = { imageSrc: string; imageAlt: string; imagePosition: string; + cardBackgroundColor: string; reverseColumnsWhenStacked: boolean; }; diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx index 1e68779..8eda836 100644 --- a/src/components/Container/styles.tsx +++ b/src/components/Container/styles.tsx @@ -1,36 +1,16 @@ import styled, { css } from "styled-components"; import tw from "twin.macro"; import { ContainerProps } from "./types"; +import { calculateCssEditableProps } from "@/hooks/calculateCssEditableProps"; export const StyledContainer = styled.div` - ${({ - theme, - margin, - marginTop, - marginBottom, - marginRight, - marginLeft, - padding, - paddingTop, - paddingBottom, - paddingRight, - paddingLeft, - }) => { + ${({ theme, ...cssEditableProps }) => { return css` ${tw`px-6 md:px-16`} box-sizing: border-box; width: 100%; max-width: 100rem; - margin: ${margin}; - margin-top: ${marginTop}; - margin-bottom: ${marginBottom}; - margin-right: ${marginRight}; - margin-left: ${marginLeft}; - padding: ${padding}; - padding-top: ${paddingTop}; - padding-bottom: ${paddingBottom}; - padding-right: ${paddingRight}; - padding-left: ${paddingLeft}; + ${calculateCssEditableProps(theme, cssEditableProps)} `; }} `; diff --git a/src/components/H1/cmp.builder.tsx b/src/components/H1/cmp.builder.tsx index 76b5129..0f94baa 100644 --- a/src/components/H1/cmp.builder.tsx +++ b/src/components/H1/cmp.builder.tsx @@ -1,7 +1,7 @@ import { Builder } from "@builder.io/react"; import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; import H1 from "."; -import { TYPO_KIND } from "@/constants/enums"; +import { TYPO_KIND } from "@/constants/builderEnums"; Builder.registerComponent(H1, { ...DEFAULT_TEXT_PROPS, diff --git a/src/components/H2/cmp.builder.tsx b/src/components/H2/cmp.builder.tsx index 9ac6c0f..9f7179d 100644 --- a/src/components/H2/cmp.builder.tsx +++ b/src/components/H2/cmp.builder.tsx @@ -1,6 +1,6 @@ import { Builder } from "@builder.io/react"; import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; -import { TYPO_KIND } from "@/constants/enums"; +import { TYPO_KIND } from "@/constants/builderEnums"; import H2 from "."; Builder.registerComponent(H2, { diff --git a/src/components/Header/cmp.tsx b/src/components/Header/cmp.tsx index 25edc05..9b01ff6 100644 --- a/src/components/Header/cmp.tsx +++ b/src/components/Header/cmp.tsx @@ -12,7 +12,6 @@ export const Header = ({ children, routes, breakpoint }: HeaderProps) => { const handleCloseMenu = useCallback((open: boolean) => setIsOpen(open), []); const router = useRouter(); - console.log(router.asPath); return ( diff --git a/src/components/ObjectImage/cmp.builder.tsx b/src/components/ObjectImage/cmp.builder.tsx new file mode 100644 index 0000000..4c50bcc --- /dev/null +++ b/src/components/ObjectImage/cmp.builder.tsx @@ -0,0 +1,50 @@ +import { Builder } from "@builder.io/react"; +import { DEFAULT_PROPS } from "@/constants/builderProps"; +import { ObjectImg } from "@aleph-front/core"; + +Builder.registerComponent(ObjectImg, { + ...DEFAULT_PROPS, + name: "Object Image", + inputs: [ + ...DEFAULT_PROPS.inputs, + { + name: "id", + type: "string", + enum: [ + "Object1", + "Object2", + "Object3", + "Object4", + "Object5", + "Object6", + "Object7", + "Object8", + "Object9", + "Object10", + "Object11", + "Object12", + "Object13", + "Object14", + "Object15", + "Object16", + "Object17", + "Object18", + "Object19", + ], + defaultValue: "Object1", + }, + { + name: "size", + type: "number", + }, + { + name: "color", + type: "string", + defaultValue: "main0", + }, + { + name: "color2", + type: "string", + }, + ], +}); diff --git a/src/components/Section/cmp.builder.tsx b/src/components/Section/cmp.builder.tsx index 743c864..5b15360 100644 --- a/src/components/Section/cmp.builder.tsx +++ b/src/components/Section/cmp.builder.tsx @@ -1,6 +1,8 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_PROPS } from "@/constants/builderProps"; import Section from "."; +import { CSS_EDITABLE_INPUTS } from "@/constants/builderInputs"; +import { EFFECTS } from "@/constants/builderEnums"; Builder.registerComponent(withChildren(Section), { ...DEFAULT_PROPS, @@ -8,11 +10,11 @@ Builder.registerComponent(withChildren(Section), { override: true, canHaveChildren: true, inputs: [ - ...DEFAULT_PROPS.inputs, { name: "effects", type: "string", - enum: ["", "fx-grain-1", "fx-grain-2"], + enum: EFFECTS, }, + ...CSS_EDITABLE_INPUTS, ], }); diff --git a/src/components/Section/cmp.tsx b/src/components/Section/cmp.tsx index 0d7ecca..b049356 100644 --- a/src/components/Section/cmp.tsx +++ b/src/components/Section/cmp.tsx @@ -2,11 +2,16 @@ import React from "react"; import { SectionProps } from "./types"; +import { StyledSection } from "./styles"; -export const Section = ({ children, effects }: SectionProps) => { +export const Section = ({ children, effects, ...props }: SectionProps) => { const calculatedClassName = `${effects || ""}`; - return
{children}
; + return ( + + {children} + + ); }; export default Section; diff --git a/src/components/Section/styles.tsx b/src/components/Section/styles.tsx new file mode 100644 index 0000000..36a2f69 --- /dev/null +++ b/src/components/Section/styles.tsx @@ -0,0 +1,9 @@ +import styled, { css } from "styled-components"; +import { SectionProps } from "./types"; +import { calculateCssEditableProps } from "@/hooks/calculateCssEditableProps"; + +export const StyledSection = styled.div` + ${({ theme, ...cssEditableProps }) => { + return calculateCssEditableProps(theme, cssEditableProps); + }} +`; diff --git a/src/components/Section/types.ts b/src/components/Section/types.ts index acd51a6..cd0d7af 100644 --- a/src/components/Section/types.ts +++ b/src/components/Section/types.ts @@ -1,6 +1,6 @@ -import { HTMLAttributes } from "react"; +import { CssEditableProps } from "@/types/CssEditableProps"; -export type SectionProps = HTMLAttributes & { +export type SectionProps = CssEditableProps & { children: React.ReactNode; - effects: string; + effects?: string; }; diff --git a/src/components/TextGradient/cmp.builder.tsx b/src/components/TextGradient/cmp.builder.tsx index d16a6dc..a440840 100644 --- a/src/components/TextGradient/cmp.builder.tsx +++ b/src/components/TextGradient/cmp.builder.tsx @@ -1,7 +1,7 @@ import { Builder, withChildren } from "@builder.io/react"; import { DEFAULT_TEXT_PROPS } from "@/constants/builderProps"; import TextGradient from "."; -import { COLORS } from "@/constants/enums"; +import { COLORS } from "@/constants/builderEnums"; Builder.registerComponent(TextGradient, { ...DEFAULT_TEXT_PROPS, diff --git a/src/constants/builderEnums.tsx b/src/constants/builderEnums.tsx new file mode 100644 index 0000000..44aa406 --- /dev/null +++ b/src/constants/builderEnums.tsx @@ -0,0 +1,104 @@ +export const TYPO_KIND: string[] = [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "h7", + "header", + "logo", + "nav", + "info", + "body", + "body1", + "body2", + "body3", + "code", + "code1", + "table", + "form", +]; + +export const COLORS: string[] = [ + "white", + "black", + "translucid", + "base0", + "base1", + "base2", + "main0", + "main1", + "info", + "success", + "warning", + "error", + "disabled", + "disabled2", + "background", + "contentBackground", + "foreground", + "text", +]; + +export const BACKGROUND_COLORS: string[] = [ + "bg-none", + "bg-white", + "bg-black", + "bg-base0", + "bg-base1", + "bg-base2", + "bg-main0", + "bg-main1", +]; + +export const EFFECTS: string[] = [ + "", + "fx-grain-1", + "fx-grain-2", + "fx-grain-3", + "fx-grain-4", + "fx-grain-5", +]; + +export const REM_VALUES = [ + "", + "auto", + "0", + "0.25rem", + "0.5rem", + "0.75rem", + "1rem", + "1.25rem", + "1.5rem", + "1.75rem", + "2.00rem", + "2.25rem", + "2.50rem", + "2.75rem", + "3.00rem", + "3.25rem", + "3.50rem", + "3.75rem", + "4.00rem", + "4.25rem", + "4.50rem", + "4.75rem", + "5.00rem", + "5.25rem", + "5.50rem", + "5.75rem", + "6.00rem", + "6.25rem", + "6.50rem", + "6.75rem", + "7.00rem", + "7.25rem", + "7.50rem", + "7.75rem", + "8.00rem", + "8.25rem", + "8.50rem", + "8.75rem", + "9.00rem", +]; diff --git a/src/constants/builderInputs.tsx b/src/constants/builderInputs.tsx index 584268c..8d54e46 100644 --- a/src/constants/builderInputs.tsx +++ b/src/constants/builderInputs.tsx @@ -1,93 +1,149 @@ +import { REM_VALUES } from "./builderEnums"; import { DEFAULT_PROPS } from "./builderProps"; -const remValues = [ - "auto", - "0", - "0.25rem", - "0.5rem", - "0.75rem", - "1rem", - "1.25rem", - "1.5rem", - "1.75rem", - "2.00rem", - "2.25rem", - "2.50rem", - "2.75rem", - "3.00rem", - "3.25rem", - "3.50rem", - "3.75rem", - "4.00rem", - "4.25rem", - "4.50rem", - "4.75rem", - "5.00rem", - "5.25rem", - "5.50rem", - "5.75rem", - "6.00rem", -]; - -export const CSS_EDITABLE_INPUTS = [ - ...DEFAULT_PROPS.inputs, +const EDITABLE_MARGIN_INPUTS = [ { name: "margin", type: "string", defaultValue: "auto", - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginTop", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginBottom", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginLeft", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "marginRight", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, +]; + +const EDITABLE_PADDING_INPUTS = [ { name: "padding", type: "string", - enum: [...remValues], + defaultValue: "0", + enum: [...REM_VALUES], }, { name: "paddingTop", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "paddingBottom", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "paddingLeft", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], }, { name: "paddingRight", type: "string", advanced: true, - enum: [...remValues], + enum: [...REM_VALUES], + }, +]; + +export const CSS_EDITABLE_INPUTS = [ + ...DEFAULT_PROPS.inputs, + { + name: "direction", + type: "string", + enum: ["", "inline", "row", "column"], + }, + { + name: "alignItems", + type: "string", + enum: ["", "start", "end", "center"], + }, + { + name: "wrap", + type: "string", + enum: ["", "nowrap", "wrap", "wrap-reverse"], + advanced: true, + }, + { + name: "gap", + type: "string", + enum: [...REM_VALUES], + advanced: true, + }, + { + name: "opacity", + type: "string", + enum: [ + "0", + "0.1", + "0.2", + "0.3", + "0.4", + "0.5", + "0.6", + "0.7", + "0.8", + "0.9", + "1", + ], + advanced: true, + }, + { + name: "remStyleBreakpoints", + type: "list", + advanced: true, + subFields: [ + { + name: "breakpoint", + type: "string", + enum: ["xs", "sm", "md", "lg", "xl", "2xl"], + }, + { + name: "style", + type: "string", + enum: [ + "margin", + "margin-top", + "margin-bottom", + "margin-right", + "margin-left", + "padding", + "padding-top", + "padding-bottom", + "padding-right", + "padding-left", + "gap", + "opacity", + ], + }, + { + name: "value", + type: "string", + enum: REM_VALUES, + }, + ], }, + ...EDITABLE_MARGIN_INPUTS, + ...EDITABLE_PADDING_INPUTS, ]; diff --git a/src/constants/builderProps.tsx b/src/constants/builderProps.tsx index 1bde7ab..6e81d04 100644 --- a/src/constants/builderProps.tsx +++ b/src/constants/builderProps.tsx @@ -10,7 +10,7 @@ export const DEFAULT_TEXT_PROPS = { { name: "children", friendlyName: "Text content", - helperText: "Shift+Enter for line break", + helperText: "Press Enter to add a line break", type: "longText", }, { @@ -21,7 +21,7 @@ export const DEFAULT_TEXT_PROPS = { { name: "tp", type: "string", - enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h4", "tp-h7"], + enum: ["", "tp-info", "tp-header", "tp-h2", "tp-h3", "tp-h4", "tp-h7"], }, { name: "fs", diff --git a/src/constants/enums.tsx b/src/constants/enums.tsx deleted file mode 100644 index 524ac52..0000000 --- a/src/constants/enums.tsx +++ /dev/null @@ -1,42 +0,0 @@ -export const TYPO_KIND: string[] = [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "h7", - "header", - "logo", - "nav", - "info", - "body", - "body1", - "body2", - "body3", - "code", - "code1", - "table", - "form", -]; - -export const COLORS: string[] = [ - "white", - "black", - "translucid", - "base0", - "base1", - "base2", - "main0", - "main1", - "info", - "success", - "warning", - "error", - "disabled", - "disabled2", - "background", - "contentBackground", - "foreground", - "text", -]; diff --git a/src/hooks/calculateCssEditableProps.tsx b/src/hooks/calculateCssEditableProps.tsx new file mode 100644 index 0000000..cfbbeb3 --- /dev/null +++ b/src/hooks/calculateCssEditableProps.tsx @@ -0,0 +1,89 @@ +import { DefaultTheme, css } from "styled-components"; +import tw from "twin.macro"; +import { Breakpoint, CssEditableProps } from "@/types/CssEditableProps"; +import { useResponsiveBreakpoint } from "@aleph-front/core"; + +const calculateDisplayCssProps = (direction: string) => { + switch (direction) { + case "row": + return tw`flex flex-row`; + case "column": + return tw`flex flex-col`; + case "inline": + return tw`inline`; + default: + return ""; + } +}; + +const calculateAlignItemsCssProps = (alignItems: string) => { + switch (alignItems) { + case "start": + return tw`flex items-start justify-start`; + case "end": + return tw`flex items-end justify-end`; + case "center": + return tw`flex items-center justify-center`; + default: + return ""; + } +}; + +const calculateRemBreakpoints = (theme: any, breakpoints: Breakpoint[]) => { + if (!breakpoints) return; + + return breakpoints.map(({ breakpoint, style, value }: Breakpoint) => { + if (breakpoint) { + return css` + @media (min-width: ${theme.breakpoint[breakpoint]}rem) { + ${style}: ${value}; + } + `; + } else { + return css` + ${style}: ${value}; + `; + } + }); +}; + +export const calculateCssEditableProps = ( + theme: DefaultTheme, + { + margin, + marginTop, + marginBottom, + marginRight, + marginLeft, + padding, + paddingTop, + paddingBottom, + paddingRight, + paddingLeft, + gap, + opacity, + direction, + alignItems, + wrap, + remStyleBreakpoints, + }: CssEditableProps +) => { + return css` + margin: ${margin}; + margin-top: ${marginTop}; + margin-bottom: ${marginBottom}; + margin-right: ${marginRight}; + margin-left: ${marginLeft}; + padding: ${padding}; + padding-top: ${paddingTop}; + padding-bottom: ${paddingBottom}; + padding-right: ${paddingRight}; + padding-left: ${paddingLeft}; + gap: ${gap}; + opacity: ${opacity}; + flex-wrap: ${wrap}; + ${calculateDisplayCssProps(direction)} + ${calculateAlignItemsCssProps(alignItems)}; + ${calculateRemBreakpoints(theme, remStyleBreakpoints)} + `; +}; diff --git a/src/pages/_twentySixPage.tsx b/src/pages/_twentySixPage.tsx deleted file mode 100644 index 52c8c80..0000000 --- a/src/pages/_twentySixPage.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useEffect, useState } from "react"; -import DefaultErrorPage from "next/error"; -import Head from "next/head"; -import { BuilderContent } from "@builder.io/sdk"; -import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react"; -import "../builder-registry"; -import { useRouter } from "next/router"; - -export default function DynamicPage({ page }: { page: BuilderContent | null }) { - const router = useRouter(); - const isPreviewing = useIsPreviewing(); - - const [content, setContent] = useState(page); - const [notFound, setNotFound] = useState(!page); - - useEffect(() => { - async function fetchContent() { - const urlPath = router.asPath || "/"; - console.log("PAGE", urlPath); - - try { - console.log("LOAD", urlPath); - - const fetchedContent = await builder - .get("page", { userAttributes: { urlPath } }) - .toPromise(); - - if (fetchedContent) { - setContent(fetchedContent); - } else { - setNotFound(true); - } - } catch (e) { - console.log("something went wrong while fetching Builder Content: ", e); - setNotFound(true); - } - } - - fetchContent(); - }, [router.asPath]); // Depend on router.asPath to refetch content on route changes - - // If the page content is not available - // and not in preview mode, show a 404 error page - if (notFound && !isPreviewing) { - return ; - } - - // If the page content is available, render - // the BuilderComponent with the page content - return ( - <> - - {content?.data?.title} - - {/* Render the Builder page */} - - - ); -} diff --git a/src/types/CssEditableProps.tsx b/src/types/CssEditableProps.tsx index c6a0712..5b2f858 100644 --- a/src/types/CssEditableProps.tsx +++ b/src/types/CssEditableProps.tsx @@ -1,4 +1,11 @@ +export type Breakpoint = { + breakpoint: string; + style: string; + value: string; +}; + export type CssEditableProps = { + remStyleBreakpoints: Breakpoint[]; margin: string; marginTop: string; marginBottom: string; @@ -9,4 +16,9 @@ export type CssEditableProps = { paddingBottom: string; paddingRight: string; paddingLeft: string; + direction: string; + alignItems: string; + wrap: string; + gap: string; + opacity: string; };