@blinkpage/composer-tools 1.0.0

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

@@ -0,0 +1,263 @@
+import { BaseList } from "../../EditorComponent";
+import React from "react";
+import styles from "./list6.module.scss";
+
+import { Base } from "../../../composer-base-components/base/base";
+
+type listItem = {
+  itemIndex: React.JSX.Element;
+  itemTitle: React.JSX.Element;
+  itemIcon: string;
+  itemText: React.JSX.Element;
+};
+
+class List6 extends BaseList {
+  static getName(): string {
+    return "List 6";
+  }
+
+  constructor(props?: any) {
+    super(props, styles);
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "Our Process",
+    });
+    this.addProp({
+      type: "string",
+      key: "description",
+      displayer: "Description",
+      value:
+        "It's so challenging to find a good team to do great things. But we can provide you the best one.",
+    });
+    this.addProp({
+      type: "boolean",
+      key: "descriptionAnimation",
+      displayer: "Description Animation",
+      value: true,
+    });
+    this.addProp({
+      type: "boolean",
+      key: "lineActive",
+      displayer: "Line Active",
+      value: true,
+    });
+    this.addProp({
+      type: "multiSelect",
+      key: "hoverAnimation",
+      displayer: "Hover Animation Style",
+      value: ["animate1"],
+      additionalParams: {
+        selectItems: ["animate1", "animate2", "animate3", "animate4"]
+      }
+    });
+
+    this.addProp({
+      type: "array",
+      key: "listItems",
+      displayer: "List Items",
+      value: [
+        {
+          type: "object",
+          key: "listItem",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "itemIndex",
+              displayer: "Item Index",
+              value: "01",
+            },
+            {
+              type: "string",
+              key: "itemTitle",
+              displayer: "Item Title",
+              value: "Design",
+            },
+            {
+              type: "icon",
+              key: "itemIcon",
+              displayer: "Item Icon",
+              value: "LuPenTool",
+            },
+            {
+              type: "string",
+              key: "itemText",
+              displayer: "Item Text",
+              value:
+                "We strive to develop real-world web solutions that are ideal for small to large projects with project requirements.",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "listItem",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "itemIndex",
+              displayer: "Item Index",
+              value: "02",
+            },
+            {
+              type: "string",
+              key: "itemTitle",
+              displayer: "Item Title",
+              value: "Development",
+            },
+            {
+              type: "icon",
+              key: "itemIcon",
+              displayer: "Item Icon",
+              value: "BiCodeBlock",
+            },
+            {
+              type: "string",
+              key: "itemText",
+              displayer: "Item Text",
+              value:
+                "We strive to develop real-world web solutions that are ideal for small to large projects with project requirements.",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "listItem",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "itemIndex",
+              displayer: "Item Index",
+              value: "03",
+            },
+            {
+              type: "string",
+              key: "itemTitle",
+              displayer: "Item Title",
+              value: "Marketing",
+            },
+            {
+              type: "icon",
+              key: "itemIcon",
+              displayer: "Item Icon",
+              value: "GoGoal",
+            },
+            {
+              type: "string",
+              key: "itemText",
+              displayer: "Item Text",
+              value:
+                "We strive to develop real-world web solutions that are ideal for small to large projects with project requirements.",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "listItem",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "itemIndex",
+              displayer: "Item Index",
+              value: "04",
+            },
+            {
+              type: "string",
+              key: "itemTitle",
+              displayer: "Item Title",
+              value: "Content writing",
+            },
+            {
+              type: "icon",
+              key: "itemIcon",
+              displayer: "Item Icon",
+              value: "BiBookContent",
+            },
+            {
+              type: "string",
+              key: "itemText",
+              displayer: "Item Text",
+              value:
+                "We strive to develop real-world web solutions that are ideal for small to large projects with project requirements.",
+            },
+          ],
+        },
+      ],
+    });
+  }
+
+  render() {
+    const listItems = this.castToObject<listItem[]>("listItems");
+    const description = this.getPropValue("description");
+    const subtitle = this.getPropValue("subtitle");
+
+    return (
+      <Base.Container className={this.decorateCSS("container")}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          {(this.castToString(subtitle) || this.castToString(description)) && (
+            <Base.VerticalContent className={this.decorateCSS("header-section")}>
+              {this.castToString(subtitle) && (
+                <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>
+                  {subtitle}
+                </Base.SectionSubTitle>
+              )}
+              {this.castToString(description) && (
+                <Base.SectionTitle
+                  className={`${this.decorateCSS("sectionTitle")} ${this.getPropValue("descriptionAnimation") && this.decorateCSS("animation")}`}
+                >
+                  {description}
+                </Base.SectionTitle>
+              )}
+            </Base.VerticalContent>
+          )}
+          <div className={this.decorateCSS("list-item")}>
+            {listItems.map((listItem: listItem, index: number) => (
+              <div
+                className={`${this.decorateCSS("item-container")} ${this.getPropValue("lineActive") && this.decorateCSS("line")}`}
+                data-animation={this.getPropValue("hoverAnimation").join(" ")}
+              >
+                {this.castToString(listItem.itemIndex) && (
+                  <Base.H3 className={this.decorateCSS("index")}>
+                    {listItem.itemIndex}
+                  </Base.H3>
+                )}
+                <div className={this.decorateCSS("cards")}>
+                  {(listItem.itemIcon ||
+                    this.castToString(listItem.itemTitle)) && (
+                      <div className={this.decorateCSS("icon-title-container")}>
+                        {listItem.itemIcon && (
+                          <Base.Icon
+                            name={listItem.itemIcon}
+                            propsIcon={{
+                              className: this.decorateCSS("icon")
+                            }}
+                          />
+                        )}
+                        {this.castToString(listItem.itemTitle) && (
+                          <Base.H4 className={this.decorateCSS("title")}>
+                            {listItem.itemTitle}
+                          </Base.H4>
+                        )}
+                      </div>
+                    )}
+
+                  {this.castToString(listItem.itemText) && (
+                    <Base.P className={this.decorateCSS("description")}>
+                      {listItem.itemText}
+                    </Base.P>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default List6;

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

@@ -0,0 +1,127 @@
+.container {
+  .max-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--composer-gap-lg);
+    
+    .card-titles {
+      .subtitle {
+        content: "";
+      }
+    }
+    
+    .card {
+      .all-card {
+        height: 100%;
+        .item-content {
+          height: 100%;
+          border: var(--composer-border-width-xs) solid var(--composer-primary-color);
+          border-radius: var(--composer-border-radius-md);
+          padding: var(--composer-gap-lg);
+          display: flex;
+          flex-direction: column;
+          gap: var(--composer-gap-md);
+          transition: all var(--composer-transition-duration-normal) ease;
+          position: relative;
+
+          &[data-animation="animate1"]:hover {
+            border-color: transparent;
+
+            &::before,
+            &::after {
+              content: "";
+              position: absolute;
+              inset: calc(-1 * var(--composer-border-width-sm));
+              border-radius: var(--composer-border-radius-md);
+              padding: var(--composer-border-width-sm);
+              background: linear-gradient(
+                45deg,
+                transparent 0%,
+                transparent 40%,
+                var(--composer-primary-color) 45%,
+                var(--composer-primary-color) 55%,
+                transparent 60%,
+                transparent 100%
+              );
+              background-size: 300% 300%;
+              animation: rotatingBorder 2s linear 1 forwards;
+              -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box,
+                linear-gradient(var(--color-white) 0 0);
+              -webkit-mask-composite: xor;
+              mask-composite: exclude;
+            }
+          }
+
+          &[data-animation="animate2"]:hover {
+            box-shadow: var(--composer-box-shadow-lg);
+          }
+
+          &[data-animation="animate3"]:hover {
+            border-color: transparent;
+
+            &::before {
+              content: "";
+              position: absolute;
+              inset: calc(-1 * var(--composer-border-width-sm));
+              border-radius: var(--composer-border-radius-md);
+              padding: var(--composer-border-width-sm);
+              background: conic-gradient(
+                from var(--angle),
+                rgba(var(--composer-primary-color-rgb), 1) 0deg 90deg,
+                rgba(var(--composer-primary-color-rgb), 0.3) 90deg 180deg,
+                rgba(var(--composer-primary-color-rgb), 1) 180deg 270deg,
+                rgba(var(--composer-primary-color-rgb), 0.3) 270deg 360deg
+              );
+              animation: rotate 3s linear infinite;
+              -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box,
+                linear-gradient(var(--color-white) 0 0);
+              -webkit-mask-composite: xor;
+              mask-composite: exclude;
+            }
+          }
+
+          &[data-animation="animate4"]:hover {
+            .index {
+              transform: rotate(360deg);
+              transition: transform var(--composer-transition-duration-normal);
+            }
+          }
+
+          .index {
+            color: var(--composer-primary-color);
+            margin: 0;
+          }
+          .title {
+            color: var(--composer-font-color-primary);
+            margin: 0;
+          }
+          .description {
+            color: var(--composer-font-color-primary);
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes rotatingBorder {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 0%;
+  }
+}
+
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate {
+  to {
+    --angle: 360deg;
+  }
+}

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

@@ -0,0 +1,178 @@
+import { BaseList } from "../../EditorComponent";
+import React from "react";
+import styles from "./list7.module.scss";
+import { Base } from "../../../composer-base-components/base/base";
+
+type listItem = {
+  text: React.JSX.Element;
+  title: React.JSX.Element;
+}
+
+class List7 extends BaseList {
+  static getName(): string {
+    return "List 7";
+  }
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "string",
+      key: "subtitle",
+      displayer: "Subtitle",
+      value: "Features",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "Our Services",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "list-items",
+      displayer: "List Items",
+      value: [
+        {
+          type: "object",
+          key: "list-item",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value:
+                "Contagious Energy",
+            },
+            {
+              type: "string",
+              key: "text",
+              displayer: "Text",
+              value:
+                "Lorem ipsum dolor sit amet, consectetur adipiscing 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.",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "list-item",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value:
+                "Contagious Energy",
+            },
+            {
+              type: "string",
+              key: "text",
+              displayer: "Text",
+              value:
+                "Lorem ipsum dolor sit amet, consectetur adipiscing 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.",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "list-item",
+          displayer: "List Item",
+          value: [
+            {
+              type: "string",
+              key: "title",
+              displayer: "Title",
+              value:
+                "Contagious Energy",
+            },
+            {
+              type: "string",
+              key: "text",
+              displayer: "Text",
+              value:
+                "Lorem ipsum dolor sit amet, consectetur adipiscing 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.",
+            },
+          ],
+        },
+      ],
+    });
+    this.addProp({
+      type: "number",
+      key: "itemCount",
+      displayer: "Item Count in a Row",
+      value: 3,
+      max: 4,
+    });
+    this.addProp({
+      type: "boolean",
+      key: "showIndex",
+      displayer: "Show Index",
+      value: true,
+    });
+    this.addProp({
+      type: "multiSelect",
+      key: "hoverAnimation",
+      displayer: "Hover Animation Style",
+      value: ["animate1"],
+      additionalParams: {
+        selectItems: ["animate1", "animate2", "animate3", "animate4"]
+      }
+    });
+  }
+  render() {
+    const ListItems = this.castToObject<listItem[]>("list-items");
+    const title = this.getPropValue("title");
+    const subtitle = this.getPropValue("subtitle");
+
+    return (
+      <Base.Container className={this.decorateCSS("container")}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          <Base.VerticalContent className={this.decorateCSS("card-titles")}>
+            {this.castToString(subtitle) && (
+              <Base.SectionSubTitle className={this.decorateCSS("subtitle")}>
+                {subtitle}
+              </Base.SectionSubTitle>
+            )}
+            {this.castToString(title) && (
+              <Base.SectionTitle className={this.decorateCSS("title")}>
+                {title}
+              </Base.SectionTitle>
+            )}
+          </Base.VerticalContent>
+          {(ListItems.length > 0) && (
+            <Base.ListGrid className={this.decorateCSS("card")} gridCount={{ pc: this.getPropValue("itemCount") }} >
+              {ListItems.map((item: any, index: number) => (
+                <div
+                  key={index}
+                  className={this.decorateCSS("all-card")}
+                >
+                  {(this.getPropValue("showIndex") || this.castToString(item.title) || this.castToString(item.text)) && (
+                    <Base.VerticalContent
+                      className={this.decorateCSS("item-content")}
+                      data-animation={this.getPropValue("hoverAnimation")}
+                    >
+                      {this.getPropValue("showIndex") && (
+                        <Base.H1 className={this.decorateCSS("index")}>{index < 9 ? `0${index + 1}` : index + 1}</Base.H1>
+                      )}
+                      {this.castToString(item.title) && (
+                        <Base.H3 className={this.decorateCSS("title")}>{item.title}</Base.H3>
+                      )}
+                      {this.castToString(item.text) && (
+                        <Base.P className={this.decorateCSS("description")}>{item.text}</Base.P>
+                      )}
+                    </Base.VerticalContent>
+                  )}
+                </div>
+              ))}
+            </Base.ListGrid>
+          )}
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default List7;