@blinkpage/composer-tools 1.0.0

package/editor-components/comparison/comparison1/comparison1.tsx

@@ -0,0 +1,315 @@
+import * as React from "react";
+import { BaseComparison } from "../../EditorComponent";
+import styles from "./comparison1.module.scss";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { Base } from "../../../composer-base-components/base/base";
+import { INPUTS } from "composer-tools/custom-hooks/input-templates";
+interface Card {
+  direction: boolean;
+  subtitle: React.JSX.Element;
+  title: React.JSX.Element;
+  button: INPUTS.CastedButton;
+  leftImage: { type: string; url: string };
+  rightImage: { type: string; url: string };
+  description: React.JSX.Element;
+  leftText: string;
+  rightText: string;
+}
+class Comparison1 extends BaseComparison {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "media",
+      key: "cover-image",
+      displayer: "Background Media",
+      additionalParams: {
+        availableTypes: ["image","video"],
+      },
+      value: {
+        type: "image",
+        url: "https://storage.googleapis.com/download/storage/v1/b/hq-blinkpage-staging-bbc49/o/68ecd3cdffd791002b81d875?alt=media",
+      },
+    });
+
+    this.addProp({
+      type: "boolean",
+      key: "overlay",
+      displayer: "Overlay",
+      value: true,
+    })
+    
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "Compare",
+    })
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "LOREM IPSUM",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "cards",
+      displayer: "Cards",
+      value: [
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "boolean",
+              key: "direction",
+              displayer: "Reverse Direction",
+              value: false,
+            },
+            {
+              type: "string",
+              key: "subtitle",
+              displayer: "Subtitle",
+              value: "Compare",
+            },
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value: "BEDROOM RENOVATION",
+            },
+            {
+              type: "string",
+              key: "description",
+              displayer: "Description",
+              value:
+                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+            },
+            INPUTS.BUTTON("button", "Button", "VIEW DETAILS", "", null, null, "Primary"),
+            {
+              type: "media",
+              key: "leftImage",
+              displayer: "Left Media",
+              additionalParams: {
+                availableTypes: ["image","video"],
+              },
+              value: {
+                type: "image",
+                url: "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/6661b8d0bd2970002c628671?alt=media&timestamp=1719561551671",
+              },
+            },
+            {
+              type: "string",
+              key: "leftText",
+              displayer: "Left Text",
+              value: "Before",
+            },
+            {
+              type: "media",
+              key: "rightImage",
+              displayer: "Right Media",
+              additionalParams: {
+                availableTypes: ["image","video"],
+              },
+              value: {
+                type: "image",
+                url: "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/6661b8d0bd2970002c628670?alt=media&timestamp=1719561551671",
+              },
+            },
+            {
+              type: "string",
+              key: "rightText",
+              displayer: "Right Text",
+              value: "After",
+            },
+          ],
+        },
+      ],
+    });
+    
+    this.setComponentState("foregroundImageRef", React.createRef());
+    this.setComponentState("sliderButtonRef", React.createRef());
+
+    this.addProp({
+      type: "multiSelect",
+      key: "hoverAnimation",
+      displayer: "Hover Animation Style",
+      value: ["animate1"],
+      additionalParams: {
+        selectItems: ["animate1", "animate2"]
+      }
+    });
+  }
+
+  static getName(): string {
+    return "Comparison 1";
+  }
+
+  handleSliderChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const slider = event.target as HTMLInputElement;
+    const foregroundImage = this.getComponentState("foregroundImageRef").current;
+    const sliderButton = this.getComponentState("sliderButtonRef").current;
+    
+    if (foregroundImage && sliderButton) {
+      const sliderValue = Number(slider.value);
+      foregroundImage.style.clipPath = `inset(0% 0% 0% ${sliderValue}%)`;
+      sliderButton.style.left = `${sliderValue}%`;
+    }
+  };
+
+  render() {
+    const coverImage = this.getPropValue("cover-image");
+    const overlay = this.getPropValue("overlay");
+    const title = this.getPropValue("title");
+    const isTitleExist = this.castToString(title);
+    const subtitle = this.getPropValue("subtitle");
+    const isSubtitleExist = this.castToString(subtitle);
+    return (
+      <Base.Container className={this.decorateCSS("container")}>
+        {coverImage && (
+          <div className={this.decorateCSS("background-media")}>
+            <Base.Media value={coverImage} className={this.decorateCSS("background-media-element")} />
+          </div>
+        )}
+        {overlay && coverImage && <div className={this.decorateCSS("overlay")} />}
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          <Base.VerticalContent className={this.decorateCSS("up-page")}>
+            {isSubtitleExist && (
+              <Base.SectionSubTitle className={`${this.decorateCSS("subtitle")} ${coverImage?.url
+                ? this.decorateCSS("with-image")
+                : ""
+              }`}>
+                {subtitle}
+              </Base.SectionSubTitle>
+            )}
+            {isTitleExist && (
+              <Base.SectionTitle
+                className={
+                  `${this.decorateCSS("title")} ${coverImage?.url
+                    ? this.decorateCSS("with-image")
+                    : ""
+                  }`
+                }
+              >
+                {title}
+              </Base.SectionTitle>
+            )}
+          </Base.VerticalContent>
+          {this.castToObject<Card[]>("cards").map(
+            (card: Card, indexCards: number) => {
+              return (
+                <Base.ContainerGrid key={indexCards} className={
+                  `${this.decorateCSS("card")} ${card.direction ? styles["reverse"] : ""
+                  }`
+                }
+                >
+                  {(this.castToString(card.title) ||
+                    this.castToString(card.description) || this.castToString(card.subtitle) || this.castToString(card.button.text)) && (
+                      <Base.VerticalContent
+                        className={this.decorateCSS("left-card")}
+                      >
+                        {this.castToString(card.subtitle) && (
+                          <Base.SectionSubTitle className={this.decorateCSS("card-subtitle")}>
+                            {card.subtitle}
+                          </Base.SectionSubTitle>
+                        )}
+                        {this.castToString(card.title) && (
+                          <Base.SectionTitle className={this.decorateCSS("card-title")}>
+                            {card.title}
+                          </Base.SectionTitle>
+                        )}
+                        {this.castToString(card.description) && (
+                          <Base.SectionDescription className={this.decorateCSS("card-description")}>
+                            {card.description}
+                          </Base.SectionDescription>
+                        )}
+                        {this.castToString(card.button.text) && (
+                          <ComposerLink path={card.button.url}>
+                            <Base.Button buttonType={card.button.type} className={this.decorateCSS("button")}>
+                              <Base.P className={this.decorateCSS("button-text")}>{card.button.text}</Base.P>
+                            </Base.Button>
+                          </ComposerLink>
+                        )}
+                      </Base.VerticalContent>
+                    )}
+
+                  {(card.leftImage?.url || card.rightImage?.url) && (
+                    <div className={this.decorateCSS("right-card")}>
+                      <div
+                        className={`${this.decorateCSS("image-container")} ${card.leftImage?.url && card.rightImage?.url ? styles["active"] : ""}`}
+                        data-animation={this.getPropValue("hoverAnimation").join(" ")}
+                      >
+                        {card.leftImage?.url && (
+                          <Base.Media
+                            value={card.leftImage}
+                            className={this.decorateCSS("left-image")}
+                            style={{
+                              clipPath: card.rightImage?.url ? undefined : 'none'
+                            }}
+                          />
+                        )}
+
+                        {card.rightImage?.url && (
+                          <Base.Media
+                            ref={this.getComponentState("foregroundImageRef")}
+                            value={card.rightImage}
+                            className={this.decorateCSS("right-image")}
+                            style={{
+                              clipPath: card.leftImage?.url ? undefined : 'none'
+                            }}
+                          />
+                        )}
+
+                        {(card.rightImage?.url || card.leftImage?.url) && (
+                          <div className={this.decorateCSS("slider-wrapper")}>
+                            {overlay && <div className={this.decorateCSS("overlay")} />}
+                            {card.rightImage?.url && card.leftImage?.url && (
+                              <input
+                                type="range"
+                                min="0"
+                                max="100"
+                                defaultValue="50"
+                                className={this.decorateCSS("slider")}
+                                id={`slider-${indexCards}`}
+                                onChange={this.handleSliderChange}
+                              />
+                            )}
+                            {card.rightImage?.url && card.leftImage?.url && (
+                              <>
+                                <div className={this.decorateCSS("comparison-text")}>
+                                  {this.castToString(card.leftText) && <Base.P
+                                    className={this.decorateCSS("left-text")}
+                                  >
+                                    {card.leftText}
+                                  </Base.P>}
+                                  {this.castToString(card.rightText) && <Base.P className={this.decorateCSS("right-text")}>
+                                    {card.rightText}
+                                  </Base.P>}
+                                </div>
+                                <div
+                                  ref={this.getComponentState("sliderButtonRef")}
+                                  className={this.decorateCSS("slider-button")}
+                                ></div>
+                              </>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </Base.ContainerGrid>
+              );
+            }
+          )}
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default Comparison1;

package/editor-components/contacts/form1/form1.module.scss

@@ -0,0 +1,77 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+
+.container {
+  .max-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--composer-gap-md);
+
+    .header {
+      .section-title, .section-subtitle, .section-description {
+        content: "";
+      }
+    }
+
+    .cards-container {
+      .card {
+        padding: var(--composer-gap-md);
+        border-radius: var(--composer-border-radius-sm);
+        background-color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+        border: none;
+        gap: var(--composer-gap-xs);
+
+        .title {
+          color: var(--composer-font-color-primary);
+          text-align: center;
+          margin: 0;
+        }
+        .icon-container {
+          width: var(--composer-gap-xl);
+          height: var(--composer-gap-xl);
+          border-radius: 50%;
+          border: 1px solid rgb(var(--composer-font-color-primary-rgb), 0.2);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 0 auto;
+
+          &.filled {
+            border: none;
+            background-color: var(--composer-primary-color);
+
+            .icon {
+              color: var(--composer-font-color-secondary);
+            }
+          }
+
+          .icon {
+            color: var(--composer-primary-color);
+            font-size: 1.5rem;
+            width: fit-content;
+            height: var(--composer-gap-md);
+          }
+        }
+
+        .rows {
+          width: 100%;
+          .row-item {
+            color: var(--composer-font-color-primary);
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    .max-content {
+      .cards-container {
+        .card {
+          gap: var(--composer-gap-sm);
+        }
+      }
+    }
+  }
+}

package/editor-components/contacts/form1/form1.tsx

@@ -0,0 +1,300 @@
+import * as React from "react";
+import { BaseContacts } from "../../EditorComponent";
+import styles from "./form1.module.scss";
+import { Base } from "../../../composer-base-components/base/base";
+
+
+class Form1 extends BaseContacts {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "Contact Us",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "Get connected",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "description",
+      displayer: "Description",
+      value: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, repellendus.",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "cards",
+      displayer: "Cards",
+      value: [
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "media",
+              key: "icon",
+              displayer: "Icon",
+              additionalParams: {
+                availableTypes: ["icon"],
+              },
+              value: {
+                type: "icon",
+                name: "MdMail"
+              },
+            },
+            {
+              type: "boolean",
+              key: "isIconFilled",
+              displayer: "Is Icon Filled?",
+              value: true,
+            },
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value: "Send Email",
+            },
+            {
+              type: "array",
+              key: "rows",
+              displayer: "Rows",
+              value: [
+                {
+                  type: "object",
+                  key: "item",
+                  displayer: "Input",
+                  value: [
+                    {
+                      type: "string",
+                      key: "item",
+                      displayer: "Item",
+                      value: "info@mail.com",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "item",
+                  displayer: "Input",
+                  value: [
+                    {
+                      type: "string",
+                      key: "item",
+                      displayer: "Item",
+                      value: "support@mail.com",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "media",
+              key: "icon",
+              displayer: "Icon",
+              additionalParams: {
+                availableTypes: ["icon"],
+              },
+              value: {
+                type: "icon",
+                name: "FaPhone"
+              },
+            },
+            {
+              type: "boolean",
+              key: "isIconFilled",
+              displayer: "Is Icon Filled?",
+              value: false,
+            },
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value: "Call Us",
+            },
+            {
+              type: "array",
+              key: "rows",
+              displayer: "Rows",
+              value: [
+                {
+                  type: "object",
+                  key: "item",
+                  displayer: "Input",
+                  value: [
+                    {
+                      type: "string",
+                      key: "item",
+                      displayer: "Item",
+                      value: "+1 2222 333 44 55",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "item",
+                  displayer: "Input",
+                  value: [
+                    {
+                      type: "string",
+                      key: "item",
+                      displayer: "Item",
+                      value: "+2 3333 444 55 66",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "media",
+              key: "icon",
+              displayer: "Icon",
+              additionalParams: {
+                availableTypes: ["icon"],
+              },
+              value: {
+                type: "icon",
+                name: "FaLocationDot"
+              },
+            },
+            {
+              type: "boolean",
+              key: "isIconFilled",
+              displayer: "Is Icon Filled?",
+              value: false,
+            },
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value: "Address",
+            },
+            {
+              type: "array",
+              key: "rows",
+              displayer: "Rows",
+              value: [
+                {
+                  type: "object",
+                  key: "item",
+                  displayer: "Input",
+                  value: [
+                    {
+                      type: "string",
+                      key: "item",
+                      displayer: "Item",
+                      value: "380 st. Kilda Road, Acme Corp, 11111",
+                    },
+                  ],
+                },
+                {
+                  type: "object",
+                  key: "item",
+                  displayer: "Input",
+                  value: [
+                    {
+                      type: "string",
+                      key: "item",
+                      displayer: "Item",
+                      value: "Australia",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  }
+
+  static getName(): string {
+    return "Form 1";
+  }
+
+  render() {
+    const title = this.getPropValue("title");
+    const subtitle = this.getPropValue("subtitle");
+    const titleExist = this.castToString(title);
+    const subtitleExist = this.castToString(subtitle);
+
+    const description = this.getPropValue("description");
+    const descriptionExist = this.castToString(description);
+
+    const cards = this.castToObject<any>("cards");
+
+    return (
+      <Base.Container className={this.decorateCSS("container")}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          {(titleExist || subtitleExist || descriptionExist) && (
+            <Base.VerticalContent className={this.decorateCSS("header")}>
+              {subtitleExist && <Base.SectionSubTitle className={this.decorateCSS("section-subtitle")}>{subtitle}</Base.SectionSubTitle>}
+              {titleExist && <Base.SectionTitle className={this.decorateCSS("section-title")}>{title}</Base.SectionTitle>}
+              {descriptionExist && <Base.SectionDescription className={this.decorateCSS("section-description")}>{description}</Base.SectionDescription>}
+            </Base.VerticalContent>
+          )}
+
+          {cards?.length > 0 && (
+            <Base.ListGrid gridCount={{ pc: 3, tablet: 3, phone: 1 }} className={this.decorateCSS("cards-container")}>
+              {cards.map((item: any, index: number) => {
+                const iconExist = !!item.icon;
+                const titleExist = !!this.castToString(item.title);
+
+                if (!iconExist && !titleExist && !item.rows.length) return null;
+
+                return (
+                  <Base.VerticalContent key={index} className={this.decorateCSS("card")}>
+                    {iconExist && (
+                      <div
+                        className={`
+                    ${this.decorateCSS("icon-container")}
+                    ${item.isIconFilled && this.decorateCSS("filled")}
+                  `}
+                      >
+                        <Base.Media
+                          value={item.icon}
+                          className={this.decorateCSS("icon")}
+                        />
+                      </div>
+                    )}
+                    {titleExist && <Base.H3 className={this.decorateCSS("title")}>{item.title}</Base.H3>}
+                    <Base.VerticalContent className={this.decorateCSS("rows")}>
+                      {item.rows.map((row: any, rowIndex: number) => {
+                        const itemExist = this.castToString(row.item);
+                        return itemExist && <Base.P className={this.decorateCSS("row-item")}>{row.item}</Base.P>;
+                      })}
+                    </Base.VerticalContent>
+                  </Base.VerticalContent>
+                );
+              })}
+            </Base.ListGrid>
+          )}
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default Form1;