lm-web-controls 1.0.18 → 1.0.20

package/dist/blocks/instaFeed/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{__assign as e}from"../../_virtual/_tslib.js";import t,{useState as i,useEffect as s}from"react";import o from"react-slick";import"slick-carousel/slick/slick.css";import"slick-carousel/slick/slick-theme.css";function n(n){var l=n.apiKey,r=n.className,c=i(null),a=c[0],m=c[1],d=i("Loading feeds..."),p=d[0],u=d[1];return s((function(){var e="https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,timestamp&access_token=".concat(l),t=fetch(e).then((function(e){return e.json()}));console.log(t),t.then((function(e){m(e.data)})).catch((function(e){u("Something went wrong!"),console.error(e)}))}),[]),t.createElement(t.Fragment,null,a?t.createElement(o,e({},{dots:!0,infinite:!0,autoplay:!0,speed:2e3,slidesToShow:6,slidesToScroll:1,responsive:[{breakpoint:1024,settings:{slidesToShow:3,slidesToScroll:3,infinite:!0,dots:!0}},{breakpoint:600,settings:{slidesToShow:2,slidesToScroll:2,infinite:!0,dots:!0}},{breakpoint:480,settings:{slidesToShow:2,slidesToScroll:2,infinite:!0,dots:!0}}]},{className:r}),null==a?void 0:a.map((function(e,i){return t.createElement("div",{key:crypto.randomUUID()},t.createElement("img",{src:e.media_url,alt:"image-".concat(i)}))}))):t.createElement("h3",{className:"text-center"},p))}export{n as InstaFeed};
+import{__assign as e}from"../../_virtual/_tslib.js";import t,{useState as i,useEffect as s}from"react";import o from"react-slick";import"slick-carousel/slick/slick.css";import"slick-carousel/slick/slick-theme.css";function n(n){var l=n.apiKey,c=n.className,r=i(null),a=r[0],m=r[1],d=i("Loading feeds..."),p=d[0],u=d[1];return s((function(){var e="https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,timestamp&access_token=".concat(l),t=fetch(e).then((function(e){return e.json()}));console.log(t),t.then((function(e){m(e.data)})).catch((function(e){u("Something went wrong!"),console.error(e)}))}),[]),t.createElement(t.Fragment,null,a?t.createElement(o,e({},{dots:!0,infinite:!0,autoplay:!0,speed:2e3,slidesToShow:6,slidesToScroll:1,responsive:[{breakpoint:1024,settings:{slidesToShow:3,slidesToScroll:3,infinite:!0,dots:!0}},{breakpoint:600,settings:{slidesToShow:2,slidesToScroll:2,infinite:!0,dots:!0}},{breakpoint:480,settings:{slidesToShow:2,slidesToScroll:2,infinite:!0,dots:!0}}]},{className:"".concat(c," lm-slider")}),null==a?void 0:a.map((function(e,i){return t.createElement("div",{key:crypto.randomUUID()},t.createElement("img",{src:e.media_url,alt:"image-".concat(i)}))}))):t.createElement("h3",{className:"text-center"},p))}export{n as InstaFeed};

package/dist/blocks/map/index.js

@@ -0,0 +1 @@
+import r from"react";function e(e){var i=e.id,t=e.address,d=e.height,a=e.width;return r.createElement("iframe",{id:i,width:a,height:d,loading:"lazy",referrerPolicy:"no-referrer-when-downgrade",src:t})}export{e as Map};

package/dist/index.css

@@ -0,0 +1 @@
+.lm-slider{background:red;height:100vh}

package/dist/index.js

@@ -1 +1 @@
-export{Copyright}from"./blocks/copyright/index.js";export{Email}from"./blocks/email/index.js";export{InstaFeed}from"./blocks/instaFeed/index.js";export{Phone}from"./blocks/phone/index.js";
+export{Copyright}from"./blocks/copyright/index.js";export{Email}from"./blocks/email/index.js";export{InstaFeed}from"./blocks/instaFeed/index.js";export{Map}from"./blocks/map/index.js";export{Phone}from"./blocks/phone/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lm-web-controls",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "leadmetrics-lm-web-controls",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -24,8 +24,10 @@
     "@rollup/plugin-alias": "5.1.0",
     "@types/react": "18.2.65",
     "babel-loader": "9.1.3",
+    "postcss": "^8.4.35",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "typescript": "5.4.2"
   },

package/rollup.config.mjs

@@ -4,6 +4,7 @@ import external from "rollup-plugin-peer-deps-external";
 import { terser } from "rollup-plugin-terser";
 import typescript from "rollup-plugin-typescript2";
 import preserveDirectives from "rollup-plugin-preserve-directives";
+import postcss from "rollup-plugin-postcss";
 
 export default [
   {
@@ -35,6 +36,10 @@ export default [
       terser(),
       typescript({ useTsconfigDeclarationDir: true }),
       preserveDirectives(),
+      postcss({
+        extract: true,
+        minimize: true,
+      }),
     ],
   },
 ];

package/src/blocks/copyright/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type CopyrightProps = {
   name: string;
-  className: string;
+  className?: string;
 };
 
 export function Copyright({ name, className }: CopyrightProps) {

package/src/blocks/email/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type EmailProps = {
   value: string;
-  className: string;
+  className?: string;
 };
 
 export function Email({ value, className }: EmailProps) {

package/src/blocks/instaFeed/index.tsx

@@ -7,7 +7,12 @@ import { useEffect, useState } from "react";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-type InstaFeedProps = { apiKey: string; className: string };
+import "../../styles/style.css";
+
+type InstaFeedProps = {
+  apiKey: string;
+  className?: string;
+};
 
 type InstagramPost = {
   id: string;
@@ -78,7 +83,7 @@ export function InstaFeed({ apiKey, className }: InstaFeedProps) {
   return (
     <>
       {igFeeds ? (
-        <Slider {...settings} className={className}>
+        <Slider {...settings} className={`${className} lm-slider`}>
           {igFeeds?.map((item, i) => {
             return (
               <div key={crypto.randomUUID()}>

package/src/blocks/map/index.tsx

@@ -3,12 +3,11 @@ import React from "react";
 type MapProps = {
   id?: string;
   address: string;
-  height: string | number;
-  width: string | number;
-  key: string;
+  height?: string | number;
+  width?: string | number;
 };
 
-export function Map({ id, address, height, width, key }: MapProps) {
+export function Map({ id, address, height, width }: MapProps) {
   return (
     <iframe
       id={id}
@@ -16,7 +15,7 @@ export function Map({ id, address, height, width, key }: MapProps) {
       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`}
+      src={address}
     ></iframe>
   );
 }

package/src/blocks/phone/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 type PhoneProps = {
   value: string;
-  country: string;
-  className: string;
+  country?: string;
+  className?: string;
 };
 
 export function Phone({ value, country, className }: PhoneProps) {

package/src/index.ts

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

package/src/styles/style.css

@@ -0,0 +1,4 @@
+.lm-slider {
+  height: 100vh;
+  background: red;
+}

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

@@ -3,25 +3,35 @@ import React, { Component, ChangeEvent } from "react";
 declare module "lm-web-controls" {
   type EmailProps = {
     value: string;
-    className: string;
+    className?: string;
   };
-  export const Email: React.FC<EmailProps>;
 
   type CopyrightProps = {
     name: string;
-    className: string;
+    className?: string;
   };
-  export const Copyright: React.FC<CopyrightProps>;
 
   type PhoneProps = {
     value: string;
-    country: string;
-    className: string;
+    country?: string;
+    className?: string;
   };
-  export const Phone: React.FC<PhoneProps>;
 
-  //email
+  type MapProps = {
+    id?: string;
+    address: string;
+    height?: string | number;
+    width?: string | number;
+  };
 
-  type InstaFeedProps = { apiKey: string; className: string };
+  type InstaFeedProps = {
+    apiKey: string;
+    className?: string;
+  };
+
+  export const Email: React.FC<EmailProps>;
+  export const Copyright: React.FC<CopyrightProps>;
+  export const Phone: React.FC<PhoneProps>;
+  export const Map: React.FC<MapProps>;
   export const InstaFeed: React.FC<InstaFeedProps>;
 }