lm-web-controls 1.0.6 → 1.0.8

package/build.bat

@@ -0,0 +1,10 @@
+@echo off
+
+echo Building modules...
+call npm run build
+
+echo Creating packages.cls..
+call npm pack
+
+echo Publishing to npm...
+call npm publish

package/dist/index.es.js

@@ -1 +1 @@
-import r from"react";var t=function(t){var a=t.value;return r.createElement("a",{href:"mailto:".concat(a),target:"_blank"},a)};export{t as Email};
+import r from"react";import"react-slick";import"slick-carousel/slick/slick.css";import"slick-carousel/slick/slick-theme.css";function e(e){var s=e.value,c=e.className;return r.createElement("a",{href:"mailto:".concat(s),target:"_blank",className:c},s)}"function"==typeof SuppressedError&&SuppressedError;export{e as Email};

package/dist/index.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.Email=function(e){var r=e.value;return t.default.createElement("a",{href:"mailto:".concat(r),target:"_blank"},r)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-slick"),require("slick-carousel/slick/slick.css"),require("slick-carousel/slick/slick-theme.css");var s=r(e);"function"==typeof SuppressedError&&SuppressedError,exports.Email=function(e){var r=e.value,t=e.className;return s.default.createElement("a",{href:"mailto:".concat(r),target:"_blank",className:t},r)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lm-web-controls",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "leadmetrics-lm-web-controls",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -35,13 +35,16 @@
     "@syncfusion/ej2-react-dropdowns": "21.1.41",
     "@syncfusion/ej2-react-grids": "21.1.41",
     "@syncfusion/ej2-react-inputs": "22.1.34",
+    "@types/react-slick": "^0.23.13",
     "acorn": "8.9.0",
     "acorn-walk": "8.2.0",
     "commander": "10.0.1",
+    "react-slick": "^0.30.2",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.34.1",
+    "slick-carousel": "^1.8.1",
     "ts-loader": "9.4.3"
   }
 }

package/src/blocks/copyright/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+type CopyrightProps = {
+  name: string;
+  className: string;
+};
+
+export default function Copyright({ name, className }: CopyrightProps) {
+  return (
+    <span className={className}>
+      Copyright &copy 2024 {name}; Digital Marketing with AI Powered by
+      <a href="https://leadmetrics.ai/" target="_blank">
+        Leadmetrics
+      </a>
+    </span>
+  );
+}

package/src/blocks/email/index.tsx

@@ -2,13 +2,13 @@ import React from "react";
 
 type EmailProps = {
   value: string;
+  className: string;
 };
 
-export const Email = ({ value }: EmailProps) => {
+export function Email({ value, className }: EmailProps) {
   return (
-    <a href={`mailto:${value}`} target="_blank">
+    <a href={`mailto:${value}`} target="_blank" className={className}>
       {value}
     </a>
   );
-};
-export default Email;
+}

package/src/blocks/instaFeed/index.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React from "react";
+import Slider from "react-slick";
+
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { useEffect, useState } from "react";
+
+type InstaFeedProps = { key: string; className: string };
+
+type InstagramPost = {
+  id: string;
+  caption: string;
+  media_type: string;
+  media_url: string;
+  timestamp: string;
+};
+
+type InstagramPostList = InstagramPost[];
+
+export default function InstaFeed({ key, className }: InstaFeedProps) {
+  const [igFeeds, setIgFeeds] = useState<InstagramPostList | null>(null);
+  const [fetchStatus, setFetchStatus] = useState<string>("Loading feeds...");
+
+  const settings = {
+    dots: true,
+    infinite: true,
+    autoplay: true,
+    speed: 2000,
+    slidesToShow: 6,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+        },
+      },
+    ],
+  };
+
+  useEffect(() => {
+    const url = `https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,timestamp&access_token=${key}`;
+    const feed = fetch(url).then((data) => data.json());
+
+    feed
+      .then((a) => {
+        setIgFeeds(a.data as InstagramPostList);
+      })
+      .catch((err) => {
+        setFetchStatus("Something went wrong!");
+        console.error(err);
+      });
+  }, []);
+
+  return (
+    <>
+      {igFeeds ? (
+        <Slider {...settings}>
+          {igFeeds?.map((item, i) => {
+            return (
+              <div key={crypto.randomUUID()} className={className}>
+                <img src={item.media_url} alt={`image-${i}`} />
+              </div>
+            );
+          })}
+        </Slider>
+      ) : (
+        <h3 className="text-center">{fetchStatus}</h3>
+      )}
+    </>
+  );
+}

package/src/blocks/map/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+type MapProps = {
+  id?: string;
+  address: string;
+  height: string | number;
+  width: string | number;
+  key: string;
+};
+
+export default function Map({ id, address, height, width, key }: MapProps) {
+  return (
+    <iframe
+      id={id}
+      width={width}
+      height={height}
+      loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
+      src={`https://www.google.com/maps/embed/v1/place?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&q=place_id:ChIJaZ6ne_U_rjsRFN98AFmq6hg`}
+    ></iframe>
+  );
+}

package/src/blocks/phone/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+type PhoneProps = {
+  value: string;
+  country: string;
+  className: string;
+};
+
+export default function Phone({ value, country, className }: PhoneProps) {
+  return (
+    <a
+      href={`tel:+${country} ${value}`}
+      className={className}
+    >{`${country} ${value}`}</a>
+  );
+}

package/src/index.ts

@@ -1 +1,5 @@
-export * from './blocks/email'
+export * from "./blocks/copyright";
+export * from "./blocks/email";
+export * from "./blocks/instaFeed";
+//export * from "./blocks/map";
+export * from "./blocks/phone";

package/tsconfig.json

@@ -11,11 +11,11 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "types"],
   "exclude": [
     "node_modules",
     "build",
     "src/**/*.stories.tsx",
     "src/**/*.test.tsx"
   ]
-}
+}

package/types/lm-web-controls.d.ts

@@ -3,7 +3,25 @@ import React, { Component, ChangeEvent } from "react";
 declare module "lm-web-controls" {
   type EmailProps = {
     value: string;
+    className: string;
   };
-
   export const Email: React.FC<EmailProps>;
+
+  type CopyrightProps = {
+    name: string;
+    className: string;
+  };
+  export const Copyright: React.FC<CopyrightProps>;
+
+  type PhoneProps = {
+    value: string;
+    country: string;
+    className: string;
+  };
+  export const Phone: React.FC<PhoneProps>;
+
+  //email
+
+  type InstaFeedProps = { key: string; className: string };
+  export const InstaFeed: React.FC<InstaFeedProps>;
 }