refactors + rem breakpoints

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!);

src/components/Box/cmp.builder.tsx

@@ -1,18 +1,19 @@
 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), {
   ...DEFAULT_PROPS,
   name: "Custom Box",
   canHaveChildren: true,
   inputs: [
-    ...CSS_EDITABLE_INPUTS,
     {
       name: "backgroundColor",
       type: "string",
-      enum: ["bg-base0", "bg-base1"],
+      enum: BACKGROUND_COLORS,
     },
+    ...CSS_EDITABLE_INPUTS,
   ],
 });

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<BoxProps>`
-  ${({
-    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);
   }}
 `;

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<HTMLDivElement> &
+  CssEditableProps & {
+    children: React.ReactNode;
+    backgroundColor: string;
+  };

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",
-    },
   ],
 });

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",

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 = (
     <Col>
-      <div className="bg-base0" tw="p-6">
+      <div className={cardBackgroundColor} tw="p-6">
         {children}
       </div>
     </Col>

src/components/CardWithSideImage/types.ts

@@ -3,5 +3,6 @@ export type CardWithSideImageProps = {
   imageSrc: string;
   imageAlt: string;
   imagePosition: string;
+  cardBackgroundColor: string;
   reverseColumnsWhenStacked: boolean;
 };

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<ContainerProps>`
-  ${({
-    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)}
     `;
   }}
 `;

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,

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, {

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 (
     <StyledHeader>

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",
+    },
+  ],
+});

src/components/Section/cmp.builder.tsx

@@ -1,18 +1,20 @@
 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,
   name: "Core: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,
   ],
 });

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 <div className={calculatedClassName}>{children}</div>;
+  return (
+    <StyledSection className={calculatedClassName} {...props}>
+      {children}
+    </StyledSection>
+  );
 };
 
 export default Section;

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<SectionProps>`
+  ${({ theme, ...cssEditableProps }) => {
+    return calculateCssEditableProps(theme, cssEditableProps);
+  }}
+`;

src/components/Section/types.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from "react";
+import { CssEditableProps } from "@/types/CssEditableProps";
 
-export type SectionProps = HTMLAttributes<HTMLDivElement> & {
+export type SectionProps = CssEditableProps & {
   children: React.ReactNode;
-  effects: string;
+  effects?: string;
 };

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,