@bikdotai/bik-component-library 0.0.263 → 0.0.264-beta.1

package/dist/cjs/components/add-variableV2/AddVariableV2.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export interface VariableListInterfaceV2 {
+    payloadVariables: PayloadVariables;
+}
+export interface PayloadVariables {
+    displayName: string;
+    description: string;
+    orderId: number;
+    variables?: any;
+}
+export interface Variable {
+    description?: string;
+    displayName: string;
+    actualValue: string;
+    variableType: string;
+    isAvailable: boolean;
+    isSubHeader?: boolean;
+    variables?: {
+        [key: string]: Variable;
+    };
+}
+export interface AddVariableProps {
+    data: VariableListInterfaceV2[];
+    showVariable: any;
+    setShowVariable: any;
+    variableValue?: any;
+    setVariableValue?: any;
+    placeholder: string;
+    customTrigger?: any;
+    isSearchRequired?: boolean;
+    leftPosition?: number;
+    pickerSize?: string;
+}
+type Props = AddVariableProps;
+export interface VariableBoxProps {
+    item: Variable;
+    raw?: string;
+    parentKey?: string;
+}
+declare const AddVariableV2: React.FC<Props>;
+export default AddVariableV2;

package/dist/cjs/components/add-variableV2/AddVariableV2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),e=require("react"),s=require("./AddVariableV2.styled.js"),i=require("./backIcon.js"),l=require("./closeIcon.js"),r=require("./plusIcon.js"),t=require("./rightFilled.js"),d=require("./undoIcon.js"),n=require("../button/Button.js"),c=require("../icon-button/IconButton.js"),o=require("../searchBar/searchBar.js"),b=require("../TypographyStyle.js");exports.default=j=>{const{data:p}=j,[u,g]=e.useState({}),[v,m]=e.useState(),[y,h]=e.useState(""),[x,V]=e.useState("");e.useEffect((()=>{const a={};p.forEach((e=>{a[e.payloadVariables.displayName]=[]})),m(a)}),[p]);const O=(a,e)=>{const s=p.find((a=>a.payloadVariables.displayName===e));if(s){let i=s.payloadVariables;a.forEach(((a,e)=>{i=i.variables[a]})),g((a=>Object.assign(Object.assign({},a),{[e]:i})))}},N=e=>a.jsx(n.Button,{disabled:!e.item.isAvailable,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:r.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(t.RightFilled,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),_=(e,s)=>a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{const a=[...v[y],s];O(a,y),m((e=>Object.assign(Object.assign({},e),{[y]:a})))}:()=>{j.customTrigger?(j.customTrigger(e),j.setShowVariable(!1)):j.setVariableValue(e.actualValue)}},{children:a.jsx(N,{item:e})}));return a.jsx(s.AddVariableStyled,Object.assign({id:"varList",onClick:a=>{a.stopPropagation()},pickerSize:j.pickerSize||"large"},{children:j.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a.jsx("div",Object.assign({className:"close__icon",style:{cursor:"pointer"},onClick:()=>{j.setShowVariable(!1)}},{children:a.jsx(l.default,{})}))]})),a.jsx("div",Object.assign({className:"search__bar"},{children:a.jsx(o.SearchBar,{width:"100%",isEnabled:!0,onChange:a=>{V(a)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),y&&v[y].length>0&&a.jsxs("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(c.IconButton,{Icon:i.default,style:{color:"#919191",display:"flex"},onClick:()=>{const a=v[y].slice(0,-1);O(a,y),m((e=>Object.assign(Object.assign({},e),{[y]:a}))),a.length||h("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(b.TitleSmall,{children:u[y].displayName}),u[y].description&&a.jsx(b.BodyCaption,{children:u[y].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(c.IconButton,{Icon:d.default,style:{display:"flex"},onClick:()=>{O([],y),m((a=>Object.assign(Object.assign({},a),{[y]:[]}))),h("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),a.jsx("div",Object.assign({className:"wrapper"},{children:a.jsx("div",Object.assign({className:"list__map"},{children:a.jsxs("div",Object.assign({className:"items"},{children:[!y&&j.data.map(((e,s)=>{var i,l,r,t;let d=[];return x&&(d=Object.keys(e.payloadVariables.variables).filter((a=>{var s;return null===(s=e.payloadVariables.variables[a].displayName)||void 0===s?void 0:s.includes(x)}))),a.jsxs(a.Fragment,{children:[x?d.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null===(i=null==e?void 0:e.payloadVariables)||void 0===i?void 0:i.displayName})),a.jsx(b.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(l=null==e?void 0:e.payloadVariables)||void 0===l?void 0:l.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null===(r=null==e?void 0:e.payloadVariables)||void 0===r?void 0:r.displayName})),a.jsx(b.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(t=null==e?void 0:e.payloadVariables)||void 0===t?void 0:t.description}))]})),Object.keys(e.payloadVariables.variables).map((s=>{var i;return x?(null===(i=e.payloadVariables.variables[s].displayName)||void 0===i?void 0:i.includes(x))?a.jsx("div",Object.assign({onClick:e.payloadVariables.variables[s].isSubHeader?()=>{const a=[...v[e.payloadVariables.displayName],s];O(a,e.payloadVariables.displayName),m((s=>Object.assign(Object.assign({},s),{[e.payloadVariables.displayName]:a}))),h(e.payloadVariables.displayName)}:()=>{j.customTrigger?(j.customTrigger(e.payloadVariables.variables[s]),j.setShowVariable(!1)):j.setVariableValue(e.payloadVariables.variables[s].actualValue)}},{children:a.jsx(N,{item:e.payloadVariables.variables[s]})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.payloadVariables.variables[s].isSubHeader?()=>{const a=[...v[e.payloadVariables.displayName],s];O(a,e.payloadVariables.displayName),m((s=>Object.assign(Object.assign({},s),{[e.payloadVariables.displayName]:a}))),h(e.payloadVariables.displayName)}:()=>{j.customTrigger?(j.customTrigger(e.payloadVariables.variables[s]),j.setShowVariable(!1)):j.setVariableValue(e.payloadVariables.variables[s].actualValue)}},{children:a.jsx(N,{item:e.payloadVariables.variables[s]})}))}))]})})),y&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(u[y].variables).map(((e,s)=>{var i;return x?(null===(i=u[y].variables[e].displayName)||void 0===i?void 0:i.includes(x))?_(u[y].variables[e],e):a.jsx(a.Fragment,{}):_(u[y].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))}))};

package/dist/cjs/components/add-variableV2/AddVariableV2.styled.d.ts

@@ -0,0 +1,6 @@
+export declare const AddVariableStyled: import("styled-components").StyledComponent<"div", any, {
+    pickerSize: string;
+}, never>;
+export declare const VariableBoxStyled: import("styled-components").StyledComponent<"div", any, {
+    isAvailable?: boolean | undefined;
+}, never>;

package/dist/cjs/components/add-variableV2/AddVariableV2.styled.js

@@ -0,0 +1,161 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var o=e(require("styled-components"));const t=o.default.div`
+	position: fixed;
+	z-index: 10;
+	*::-webkit-scrollbar {
+		display: none;
+	}
+	* {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+	.popup {
+		background: white;
+		width: 566px;
+		height: 100vh;
+		border-radius: 8px;
+		overflow-y: scroll;
+		.sticky__bar {
+			z-index: 10;
+			position: sticky;
+			top: 0;
+			background: white;
+
+			.header__bar {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 24px 24px 16px 24px;
+				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
+				.add__variable {
+					font-family: 'Inter';
+					font-style: normal;
+					font-weight: 600;
+					font-size: 20px;
+					line-height: 24px;
+
+					color: #212121;
+				}
+			}
+
+			.search__bar {
+				padding: 24px 24px 8px 24px;
+			}
+			.nav__bar {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
+				background: var(--surface-color-surface-hovered, #f0f0f0);
+				padding: 10px 24px;
+
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+
+				line-height: 20px;
+
+				.left__nav {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					color: var(--content-color-content-primary, #212121);
+					cursor: pointer;
+				}
+				.right__nav {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					font-weight: 400;
+					color: var(--content-color-content-secondary, #616161);
+					cursor: pointer;
+				}
+			}
+		}
+		hr {
+			margin: 0;
+			border: 0.2px solid #e0e0e0;
+		}
+		.wrapper {
+			padding: 4px 24px 16px 24px;
+			.search__bar {
+				padding-bottom: 16px;
+				input {
+					width: 100%;
+					padding: 6px 8px;
+					border: 1px solid #e0e0e0;
+					border-radius: 4px;
+					background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F5bc8962e-af88-4692-80f1-631ac4a5c6c7?alt=media&token=7931b07d-cb55-43aa-be75-9ddac4b8ddad');
+					background-repeat: no-repeat;
+					background-position: 95% 50%;
+					background-size: 20px 20px;
+				}
+			}
+			.heading__font {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 600;
+				font-size: 16px;
+				line-height: 24px;
+				padding: 12px 0 0 0;
+				color: #212121;
+			}
+			.sub_heading__font {
+				font-family: 'Inter';
+				font-style: normal;
+				font-size: 12px;
+				line-height: 24px;
+				color: #212121;
+			}
+
+			.items {
+				display: flex;
+				flex-wrap: wrap;
+				grid-gap: 8px;
+				.block {
+					display: block;
+					min-width: 100%;
+					flex-wrap: nowrap;
+					width: 430px;
+				}
+			}
+		}
+		position: relative;
+
+		.bottom__padding {
+			background: white;
+			min-height: 30px;
+			width: 100%;
+			position: sticky;
+			z-index: 10;
+			bottom: 0px;
+		}
+	}
+`;o.default.div`
+	.box {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: 6px 12px 6px 8px;
+		gap: 8px;
+		width: auto;
+		height: 32px;
+
+		background: ${e=>(null==e?void 0:e.isAvailable)?"#f0f0f0":"#fafafa"};
+
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		.icon {
+			color: ${e=>(null==e?void 0:e.isAvailable)?"#212121":"#bdbdbd"};
+			display: flex;
+			align-items: center;
+		}
+		.variable__name {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 14px;
+			line-height: 20px;
+			color: ${e=>(null==e?void 0:e.isAvailable)?"#212121":"#bdbdbd"};
+		}
+	}
+`,exports.AddVariableStyled=t;

package/dist/cjs/components/add-variableV2/AddVariableV2SideModal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { VariableListInterfaceV2 } from "./AddVariableV2";
+export interface VariableV2SideModalProps {
+    data: VariableListInterfaceV2[];
+    showVariable: any;
+    setShowVariable: any;
+    variableValue?: any;
+    setVariableValue?: any;
+    placeholder: string;
+    customTrigger?: any;
+    isSearchRequired?: boolean;
+    leftPosition?: number;
+    pickerSize?: string;
+}
+export declare const AddVariableV2SideModal: React.FC<VariableV2SideModalProps>;

package/dist/cjs/components/add-variableV2/AddVariableV2SideModal.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react-dom"),r=require("./AddVariableV2.js"),d=require("../side-modal/SideModal.style.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.AddVariableV2SideModal=a=>i.default.createPortal(e.jsx(d.SideModalStyle,{children:e.jsx(d.SideModalContainer,{children:e.jsx(r.default,{data:a.data,showVariable:a.showVariable,setShowVariable:a.setShowVariable,placeholder:"Add a variable",customTrigger:a.customTrigger})})}),document.body);