@blinkpage/composer-tools 1.0.0

package/editor-components/list/list2/list2.tsx

@@ -0,0 +1,416 @@
+import * as React from "react";
+import { BaseList } from "../../EditorComponent";
+import styles from "./list2.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";
+
+type CardItem = {
+  page: string;
+  image: string;
+  count: number;
+  count_text: React.JSX.Element;
+  card_text: React.JSX.Element;
+};
+
+class List2 extends BaseList {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle", 
+      value: "Explore",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "Most Popular Cities/Towns",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "description",
+      displayer: "Description",
+      value:
+        "Discover best things to do restaurants, shopping, hotels, cafes and places around the world by categories.",
+    });
+
+    this.addProp({
+      type: "number",
+      key: "itemCount",
+      displayer: "Item Count in a Row",
+      value: 3,
+    });
+    this.addProp({
+      type: "number",
+      key: "imageCountInitial",
+      displayer: "Image Count Initial",
+      value: 3
+    })
+    this.addProp({
+      type: "number",
+      key: "imageCount",
+      displayer: "More Image Count",
+      value: 3
+    })
+    this.addProp({
+      type: "array",
+      key: "cards",
+      displayer: "Cards",
+      value: [
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "page",
+              key: "page",
+              displayer: "Navigate",
+              value: "",
+            },
+            {
+              type: "image",
+              key: "image",
+              displayer: "Image of Card",
+              value:
+                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66617ba6bd2970002c62414e?alt=media&timestamp=1719483639150",
+            },
+            {
+              type: "number",
+              key: "count",
+              displayer: "Count",
+              value: 18,
+            },
+            {
+              type: "string",
+              key: "count_text",
+              displayer: "Count Text",
+              value: "Listings",
+            },
+            {
+              type: "string",
+              key: "card_text",
+              displayer: "Card Text",
+              value: "Nightlife",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "page",
+              key: "page",
+              displayer: "Navigate",
+              value: "",
+            },
+            {
+              type: "image",
+              key: "image",
+              displayer: "Image of Card",
+              value:
+                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66617ba6bd2970002c62414f?alt=media&timestamp=1719483639150",
+            },
+            {
+              type: "number",
+              key: "count",
+              displayer: "Count",
+              value: 24,
+            },
+            {
+              type: "string",
+              key: "count_text",
+              displayer: "Count Text",
+              value: "Listings",
+            },
+            {
+              type: "string",
+              key: "card_text",
+              displayer: "Card Text",
+              value: "Shops",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "page",
+              key: "page",
+              displayer: "Navigate",
+              value: "",
+            },
+            {
+              type: "image",
+              key: "image",
+              displayer: "Image of Card",
+              value:
+                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66617ba6bd2970002c62414d?alt=media&timestamp=1719483639150",
+            },
+            {
+              type: "number",
+              key: "count",
+              displayer: "Count",
+              value: 19,
+            },
+            {
+              type: "string",
+              key: "count_text",
+              displayer: "Count Text",
+              value: "Listings",
+            },
+            {
+              type: "string",
+              key: "card_text",
+              displayer: "Card Text",
+              value: "Restaurant",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "page",
+              key: "page",
+              displayer: "Navigate",
+              value: "",
+            },
+            {
+              type: "image",
+              key: "image",
+              displayer: "Image of Card",
+              value:
+                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66617ba6bd2970002c62414b?alt=media&timestamp=1719483639150",
+            },
+            {
+              type: "number",
+              key: "count",
+              displayer: "Count",
+              value: 35,
+            },
+            {
+              type: "string",
+              key: "count_text",
+              displayer: "Count Text",
+              value: "Listings",
+            },
+            {
+              type: "string",
+              key: "card_text",
+              displayer: "Card Text",
+              value: "Outdoor Activities",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "page",
+              key: "page",
+              displayer: "Navigate",
+              value: "",
+            },
+            {
+              type: "image",
+              key: "image",
+              displayer: "Image of Card",
+              value:
+                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66617b82bd2970002c62410f?alt=media&timestamp=1719483639150",
+            },
+            {
+              type: "number",
+              key: "count",
+              displayer: "Count",
+              value: 9,
+            },
+            {
+              type: "string",
+              key: "count_text",
+              displayer: "Count Text",
+              value: "Listings",
+            },
+            {
+              type: "string",
+              key: "card_text",
+              displayer: "Card Text",
+              value: "Hotels",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "card",
+          displayer: "Card",
+          value: [
+            {
+              type: "page",
+              key: "page",
+              displayer: "Navigate",
+              value: "",
+            },
+            {
+              type: "image",
+              key: "image",
+              displayer: "Image of Card",
+              value:
+                "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66617ba6bd2970002c62414c?alt=media&timestamp=1719483639150",
+            },
+            {
+              type: "number",
+              key: "count",
+              displayer: "Count",
+              value: 32,
+            },
+            {
+              type: "string",
+              key: "count_text",
+              displayer: "Count Text",
+              value: "Listings",
+            },
+            {
+              type: "string",
+              key: "card_text",
+              displayer: "Card Text",
+              value: "New York",
+            },
+          ],
+        },
+      ],
+    });
+    this.addProp(INPUTS.BUTTON("button", "Button", "View More Categories", "", null, null, "Primary"));
+    this.addProp({
+      type: "multiSelect",
+      key: "hoverAnimation",
+      displayer: "Hover Animation Style",
+      value: ["animate1"],
+      additionalParams: {
+        selectItems: ["animate1", "animate2", "animate3", "animate4", "animate5"]
+      }
+    });
+    this.setComponentState("moreImages", 0);
+    ;
+  }
+
+  static getName(): string {
+    return "List 2";
+  }
+  handleButtonClick = () => {
+    this.setComponentState("moreImages", this.getComponentState("moreImages") + this.getPropValue("imageCount"))
+  };
+
+  render() {
+    if (this.getComponentState("imageCount") != this.getPropValue("imageCountInitial") + this.getComponentState("moreImages"))
+      this.setComponentState("imageCount", this.getPropValue("imageCountInitial") + this.getComponentState("moreImages"));
+
+    const cards = this.castToObject<CardItem[]>("cards");
+    const buttonType: INPUTS.CastedButton = this.castToObject<INPUTS.CastedButton>("button");
+    const title = this.getPropValue("title");
+    const subtitle = this.getPropValue("subtitle");
+    const description = this.getPropValue("description");
+
+    return (
+      <Base.Container className={this.decorateCSS("container")} data-animation={this.getPropValue("hoverAnimation").join(" ")}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          <div className={this.decorateCSS("wrapper")}>
+            {(this.castToString(subtitle) || this.castToString(title) || this.castToString(description)) && (
+              <Base.VerticalContent className={this.decorateCSS("up-container")}>
+                {this.castToString(subtitle) && (
+                  <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>
+                    {subtitle}
+                  </Base.SectionSubTitle>
+                )}
+                {this.castToString(title) && (
+                  <Base.SectionTitle className={this.decorateCSS("title")}>
+                    {title}
+                  </Base.SectionTitle>
+                )}
+                {this.castToString(description) && (
+                  <Base.SectionDescription className={this.decorateCSS("description")} >
+                    {description}
+                  </Base.SectionDescription>
+                )}
+              </Base.VerticalContent>
+            )}
+            {(cards.length > 0) && (
+              <Base.ListGrid
+                className={this.decorateCSS("cards-box")}
+                gridCount={{
+                  pc: this.getPropValue("itemCount"),
+                  tablet: 2,
+                  phone: 1,
+                }}
+              >
+                {cards.slice(0, this.getComponentState("imageCount")).map((item: CardItem, index: number) => (
+                  <ComposerLink key={index} path={item.page}>
+                    <div
+                      className={this.decorateCSS("card")}
+                      data-animation={this.getPropValue("hoverAnimation").join(" ")}
+                    >
+                      {item.image && (
+                        <img className={this.decorateCSS("card-image")} src={item.image} alt={item.image} />
+                      )}
+                      <div className={this.decorateCSS("overlay")}></div>
+                      <div className={this.decorateCSS("overlay2")}></div>
+                      <div className={this.decorateCSS("card-content")}>
+                        <div className={this.decorateCSS("stick")}></div>
+                        {(this.castToString(item.card_text) || item.count || this.castToString(item.count_text)) && (
+                          <div className={this.decorateCSS("labels")}>
+                            {this.castToString(item.card_text) && (
+                              <Base.H4 className={this.decorateCSS("first")}>
+                                {item.card_text}
+                              </Base.H4>
+                            )}
+                            {(item.count || this.castToString(item.count_text)) && (
+                              <div className={this.decorateCSS("second")}>
+                                {item.count && (
+                                  <Base.H5 className={this.decorateCSS("second-text")}>
+                                    {item.count}
+                                  </Base.H5>
+                                )}
+                                {this.castToString(item.count_text) && (
+                                  <Base.P className={this.decorateCSS("second-count")}>
+                                    {item.count_text}
+                                  </Base.P>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </ComposerLink>
+                ))}
+              </Base.ListGrid>
+            )}
+            {((this.getComponentState("imageCount") < cards.length) && this.castToString(buttonType.text)) && (
+              <ComposerLink path={buttonType.url}>
+                <div className={this.decorateCSS("button-wrapper")}>
+                  <Base.Button buttonType={buttonType.type} className={this.decorateCSS("button")} onClick={this.handleButtonClick} >
+                    {buttonType.text}
+                  </Base.Button>
+                </div>
+              </ComposerLink>
+            )}
+          </div>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default List2;

package/editor-components/list/list3/list3.module.scss

@@ -0,0 +1,239 @@
+.container {
+  .max-content {
+    .row {
+      gap: 0;
+      .first {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: var(--composer-gap-xl);
+        border: var(--composer-border-width-xs) solid rgba(var(--composer-font-color-primary-rgb), 0.2);
+
+        .first-inner {
+          .subtitle {
+            content: "";
+          }
+          
+          .title {
+            content: "";
+          }
+
+          .description {
+            content: "";
+          }
+        }
+        &[data-animation~="animate5"]:hover {
+          .button{
+            .button-text {
+              transform: translateX(-5px);
+            }
+  
+            .button-icon {
+              opacity: 1;
+              right: calc(-1 * var(--composer-gap-sm));
+            }
+          }
+
+        }
+
+        .button {
+          content: "";
+          position: relative;
+          transition: all var(--composer-transition-duration-slow) ease;
+
+          .button-text {
+            transition: transform var(--composer-transition-duration-slow) ease;
+          }
+          .button-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            right: 0;
+            opacity: 0;
+            transform: translateX(calc(-1 * var(--composer-gap-md)));
+            transition: all var(--composer-transition-duration-slow) ease, right var(--composer-transition-duration-slow) ease, opacity var(--composer-transition-duration-slow) ease;
+          }
+        }
+      }
+
+      .card {
+        padding: calc(var(--composer-gap-xl) * 2) var(--composer-gap-xl);
+        position: relative;
+        overflow: hidden;
+        transition: all var(--composer-transition-duration-normal) ease;
+        border: var(--composer-border-width-xs) solid rgba(var(--composer-font-color-primary-rgb), 0.2);
+
+        &[data-animation~="animate1"]:hover {
+          background-color: var(--composer-primary-color);
+          color: var(--composer-font-color-secondary);
+          transform: scaleY(1.1);
+
+          .itemTitle {
+            color: var(--composer-font-color-secondary);
+          }
+          .cardItem {
+            .itemText {
+              color: var(--composer-font-color-secondary);
+            }
+
+            .spanItem {
+              background-color: var(--composer-font-color-secondary);
+            }
+          }
+          .index {
+            color: var(--composer-font-color-secondary);
+          }
+        }
+
+        &[data-animation~="animate2"] {
+          transition: all var(--composer-transition-duration-normal) var(--composer-transition-easing);
+
+          .card-content {
+            position: relative;
+            z-index: 2;
+            transition: transform var(--composer-transition-duration-normal) ease;
+          }
+
+          .index {
+            transition: all var(--composer-transition-duration-normal) ease;
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--composer-primary-color);
+            transform: scaleX(0);
+            transform-origin: right;
+            transition: transform var(--composer-transition-duration-normal) ease;
+            z-index: 1;
+          }
+
+          &:hover {
+            &::before {
+              transform: scaleX(1);
+              transform-origin: left;
+            }
+
+            .card-content {
+              transform: translateX(var(--composer-gap-sm));
+
+              .itemTitle,
+              .itemText {
+                color: var(--composer-font-color-secondary);
+              }
+
+              .spanItem {
+                background-color: var(--composer-font-color-secondary);
+              }
+            }
+
+            .index {
+              color: var(--composer-font-color-primary);
+              z-index: 2;
+              -webkit-text-stroke-color: var(--composer-font-color-secondary);
+              transform: scale(1.1) translateX(var(--composer-gap-md));
+            }
+          }
+        }
+
+        &[data-animation~="animate3"] {
+          .itemText {
+            &::before {
+              position: absolute;
+              content: "";
+              background-color: var(--composer-font-color-primary);
+              border-radius: var(--composer-border-radius-full);
+              width: var(--composer-gap-xs);
+              height: var(--composer-gap-xs);
+              left: -10%;
+              bottom: 50%;
+              animation: pulse-animation 2s infinite;
+              transition: animation 2s ease-in-out;
+            }
+          }
+        }
+
+        &[data-animation~="animate4"]:hover {
+          .spanItem {
+            &::before {
+              content: "";
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              background-color: var(--composer-font-color-primary);
+              animation: animate 1s linear 1;
+              transition: animation 1.5s ease-in-out;
+            }
+          }
+        }
+
+        .card-content {
+          display: flex;
+          flex-direction: column;
+          gap: var(--composer-gap-md);
+
+          .itemTitle {
+            color: var(--composer-font-color-primary);
+            margin: 0;
+          }
+          .cardItem {
+            display: flex;
+            flex-direction: column;
+            gap: var(--composer-gap-md);
+            margin: 0;
+            .itemText {
+              position: relative;
+              color: var(--composer-tertiary-color);
+            }
+
+            .spanItem {
+              display: block;
+              height: var(--composer-border-width-xs);
+              width: 100%;
+              background-color: rgba(
+                var(--composer-font-color-primary-rgb),
+                0.2
+              );
+              margin: 0;
+              position: relative;
+              transform: scaleX(1);
+              transform-origin: center;
+              transition: transform var(--composer-transition-duration-normal) ease-out;
+            }
+          }
+        }
+        .index {
+          position: absolute;
+          -webkit-text-stroke-width: var(--composer-border-width-xs);
+          color: var(--composer-primary-color);
+          -webkit-text-fill-color: transparent;
+          bottom: calc(var(--composer-gap-xl) * (-1));
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulse-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--composer-font-color-primary-rgb), 0.5);
+  }
+  100% {
+    box-shadow: 0 0 0 7px rgba(var(--composer-font-color-primary-rgb), 0);
+  }
+}
+
+@keyframes animate {
+  0%,
+  20% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}