@bikdotai/bik-component-library 0.0.46 → 0.0.48-editor.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/cjs/assets/icons/bold.svg.js +1 -0
  2. package/dist/cjs/assets/icons/errorIcon.svg.js +1 -0
  3. package/dist/cjs/assets/icons/italic.svg.js +1 -0
  4. package/dist/cjs/assets/icons/strikeThrough.svg.js +1 -0
  5. package/dist/cjs/assets/icons/successIcon.svg.js +1 -0
  6. package/dist/cjs/assets/icons/warningIcon.svg.js +1 -0
  7. package/dist/cjs/components/CustomEditor/CustomEditor.d.ts +24 -0
  8. package/dist/cjs/components/CustomEditor/CustomEditor.js +1 -0
  9. package/dist/cjs/components/CustomEditor/CustomEditor.styled.d.ts +15 -0
  10. package/dist/cjs/components/CustomEditor/CustomEditor.styled.js +1 -0
  11. package/dist/cjs/components/CustomEditor/CustomEditorHeader.d.ts +11 -0
  12. package/dist/cjs/components/CustomEditor/CustomEditorHeader.js +1 -0
  13. package/dist/cjs/components/CustomEditor/VariableEditor/VariableEditor.d.ts +7 -0
  14. package/dist/cjs/components/CustomEditor/index.d.ts +3 -0
  15. package/dist/cjs/components/modals/styledModal.js +1 -1
  16. package/dist/cjs/components/searchBar/searchBar.d.ts +0 -1
  17. package/dist/cjs/components/states/StateComponent.js +1 -0
  18. package/dist/cjs/components/states/StateComponent.styled.js +26 -0
  19. package/dist/cjs/components/states-modal/StateModalComponent.js +1 -0
  20. package/dist/cjs/components/stepper/WorkingStepper.d.ts +0 -1
  21. package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js +4 -4
  22. package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
  23. package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js +2 -2
  24. package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.d.ts +3 -0
  25. package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js +18 -0
  26. package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.d.ts +10 -0
  27. package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js +12 -0
  28. package/dist/cjs/components/template-preview/helpers/VariableEditorHelper.d.ts +7 -0
  29. package/dist/cjs/components/template-preview/helpers/VariableEditorHelper.js +1 -0
  30. package/dist/cjs/components/template-preview/index.d.ts +2 -0
  31. package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +4 -0
  32. package/dist/cjs/helpers/BaseWhatsappContentLang.helper.d.ts +34 -0
  33. package/dist/cjs/helpers/BaseWhatsappContentLang.helper.js +1 -0
  34. package/dist/cjs/helpers/index.d.ts +1 -0
  35. package/dist/cjs/index.d.ts +4 -0
  36. package/dist/cjs/index.js +1 -1
  37. package/dist/cjs/utils/isAlphanumeric.d.ts +1 -0
  38. package/dist/cjs/utils/isAlphanumeric.js +1 -0
  39. package/dist/esm/assets/icons/bold.svg.js +1 -0
  40. package/dist/esm/assets/icons/errorIcon.svg.js +1 -0
  41. package/dist/esm/assets/icons/italic.svg.js +1 -0
  42. package/dist/esm/assets/icons/strikeThrough.svg.js +1 -0
  43. package/dist/esm/assets/icons/successIcon.svg.js +1 -0
  44. package/dist/esm/assets/icons/warningIcon.svg.js +1 -0
  45. package/dist/esm/components/CustomEditor/CustomEditor.d.ts +24 -0
  46. package/dist/esm/components/CustomEditor/CustomEditor.js +1 -0
  47. package/dist/esm/components/CustomEditor/CustomEditor.styled.d.ts +15 -0
  48. package/dist/esm/components/CustomEditor/CustomEditor.styled.js +1 -0
  49. package/dist/esm/components/CustomEditor/CustomEditorHeader.d.ts +11 -0
  50. package/dist/esm/components/CustomEditor/CustomEditorHeader.js +1 -0
  51. package/dist/esm/components/CustomEditor/VariableEditor/VariableEditor.d.ts +7 -0
  52. package/dist/esm/components/CustomEditor/index.d.ts +3 -0
  53. package/dist/esm/components/modals/styledModal.js +1 -1
  54. package/dist/esm/components/searchBar/searchBar.d.ts +0 -1
  55. package/dist/esm/components/states/StateComponent.js +1 -0
  56. package/dist/esm/components/states/StateComponent.styled.js +26 -0
  57. package/dist/esm/components/states-modal/StateModalComponent.js +1 -0
  58. package/dist/esm/components/stepper/WorkingStepper.d.ts +0 -1
  59. package/dist/esm/components/template-context-mapper/modalElements/DesktopPreview.js +5 -5
  60. package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
  61. package/dist/esm/components/template-preview/WhatsApp/ChatUI.js +1 -1
  62. package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.d.ts +3 -0
  63. package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js +18 -0
  64. package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.d.ts +10 -0
  65. package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js +12 -0
  66. package/dist/esm/components/template-preview/helpers/VariableEditorHelper.d.ts +7 -0
  67. package/dist/esm/components/template-preview/helpers/VariableEditorHelper.js +1 -0
  68. package/dist/esm/components/template-preview/index.d.ts +2 -0
  69. package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +4 -0
  70. package/dist/esm/helpers/BaseWhatsappContentLang.helper.d.ts +34 -0
  71. package/dist/esm/helpers/BaseWhatsappContentLang.helper.js +1 -0
  72. package/dist/esm/helpers/index.d.ts +1 -0
  73. package/dist/esm/index.d.ts +4 -0
  74. package/dist/esm/index.js +1 -1
  75. package/dist/esm/utils/isAlphanumeric.d.ts +1 -0
  76. package/dist/esm/utils/isAlphanumeric.js +1 -0
  77. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as o}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import{COLORS as p}from"../../../constants/Theme.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";const s=i.div`
2
- background: ${p.surface.standard};
3
- border: 1px solid ${p.stroke.primary};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as o}from"../../spinner/Spinner.js";import{TemplatePreview as p}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}from"../../../constants/Theme.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";const s=i.div`
2
+ background: ${a.surface.standard};
3
+ border: 1px solid ${a.stroke.primary};
4
4
  border-radius: 8px;
5
5
  overflow-y: auto;
6
6
  /* max-height: 420px; */
@@ -11,10 +11,10 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
11
11
  display: flex;
12
12
  gap: 4px;
13
13
  border-bottom-width: 1px;
14
- border-bottom-color: ${p.stroke.primary};
14
+ border-bottom-color: ${a.stroke.primary};
15
15
  `,l=i.div`
16
16
  width: 6px;
17
17
  height: 6px;
18
18
  background: #d9d9d9;
19
19
  border-radius: 3px;
20
- `,n=r.forwardRef(((r,i)=>{let{display_content:p}=r;return e(s,Object.assign({ref:i},{children:[e(m,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:p?t(a,{channel:d.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:p,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(o,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
20
+ `,n=r.forwardRef(((r,i)=>{let{display_content:a}=r;return e(s,Object.assign({ref:i},{children:[e(m,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:a?t(p,{channel:d.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:a,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(o,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
@@ -1,4 +1,4 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../../constants/Theme.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const p=a.div`
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const p=a.div`
2
2
  position: relative;
3
3
  height: 100%;
4
4
  border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
6
6
  background-color: white;
7
7
  margin: auto;
8
8
  overflow-y: auto;
9
- `,l=a.div`
9
+ `,s=a.div`
10
10
  position: absolute;
11
11
  flex: 1;
12
12
  background-color: white;
@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
17
17
  height: calc(100% - 17px);
18
18
  border-radius: 16px;
19
19
  overflow-y: auto;
20
- `,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:n,template:m}=i;return e("div",{children:t(p,Object.assign({channel:n},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n===r.WHATSAPP?236:213,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:m,channel:n,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
20
+ `,l=i.forwardRef(((i,a)=>{let{display_content:l,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:213,height:443}}),e(s,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:l},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:l,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));l.displayName="MobilePreview";export{l as default};
@@ -4,4 +4,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"..
4
4
  height: 8px;
5
5
  left: -8px;
6
6
  top: -9px;
7
- `,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:R,size:W}=n,H=new c,_=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,{children:[t(w,{children:t(r,{color:"white",height:8,width:8})}),N===f.TEXT?t(b,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?R:{}}):t(o,{}),!!u&&t(o,{children:"html"===B?t("div",{className:"richTextEditor",style:_,dangerouslySetInnerHTML:{__html:H.convertToHTML(u)}}):t(p,{children:u})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,o)=>t(T,{text:e.text},o)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,o)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},o)))}):t(o,{})]})};export{u as default};
7
+ `,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:R,size:W,children:H}=n,_=new c,O=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,{children:[t(w,{children:t(r,{color:"white",height:8,width:8})}),N===f.TEXT?t(b,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?R:{}}):t(o,{}),!!u&&t(o,{children:t(o,H?{children:H}:{children:"html"===B?t("div",{className:"richTextEditor",style:O,dangerouslySetInnerHTML:{__html:_.convertToHTML(u)}}):t(p,{children:u})})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,o)=>t(T,{text:e.text},o)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,o)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},o)))}):t(o,{})]})};export{u as default};
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
3
+ export declare const ChatUIV2: (props: WhatsappLikePreviewTypes) => JSX.Element;
@@ -0,0 +1,18 @@
1
+ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import n from"styled-components";import{Tooltip as a}from"../../tooltips/Tooltip.js";import{Caption as l,BodySecondary as p}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{VariableEditorHelper as d}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as h,ACTIONS_TYPES as c}from"../models/TemplateMeta.js";import{ChatBtn as f}from"./ChatBtn.js";import{Container as x,FooterWrapper as y,TimeStamp as g}from"./ChatUI.style.js";import{MediaCard as T}from"./MediaCard.js";const j=n.div`
2
+ position: absolute;
3
+ width: 8px;
4
+ height: 8px;
5
+ left: -8px;
6
+ top: -9px;
7
+ `,b=n.div`
8
+ font-family: 'Inter';
9
+ font-style: normal;
10
+ font-weight: 400;
11
+ font-size: 14px;
12
+ line-height: 20px;
13
+ padding: 0px 12px;
14
+ color: ${m.content.primary};
15
+ `,v=n(b)`
16
+ font-weight: 600;
17
+ margin-bottom: 8px;
18
+ `,u=new d,w=n=>{const{bodyText:m,footerText:d,headerMediaType:w,headerText:I,headerAssetLink:L,headerAssetName:N,quickReplybtn:A,ctaBtn:C,actionTypes:M,extras:_,showHeader:E,imagePreviewStyles:S,size:H,bodyVariableList:R,headerVariableList:k}=n;return e(x,{children:[t(j,{children:t(r,{color:"white",height:8,width:8})}),w===h.TEXT?t(v,{dangerouslySetInnerHTML:{__html:u.format(I,k)}}):w!==h.NONE?t(T,{headerAssetLink:L,headerAssetName:N,mediaType:w,imagePreviewStyles:w===h.IMAGE?S:{}}):t(o,{}),!!m&&t(o,{children:t(b,{dangerouslySetInnerHTML:{__html:u.format(m,R)}})}),e(y,{children:[t(a,Object.assign({body:null!=d?d:"",placement:"top"},{children:t(g,Object.assign({style:{flex:1}},{children:d}))})),t(g,{children:"16:48"})]}),M===c.QUICK_REPLY?t("div",{children:null==A?void 0:A.map(((e,o)=>t(f,{text:e.text},o)))}):M===c.CTA_BTN?t("div",{children:null==C?void 0:C.map(((e,o)=>t(f,{textTypography:E?l:p,extraContent:_?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:H},o)))}):t(o,{})]})};export{w as ChatUIV2};
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
3
+ type ownProps = WhatsappLikePreviewTypes & {
4
+ variablesList: {
5
+ placeholder: string;
6
+ value: string;
7
+ }[];
8
+ };
9
+ export declare const WhatsappLikePreviewV2: React.FC<ownProps>;
10
+ export {};
@@ -0,0 +1,12 @@
1
+ import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import{ChatUIV2 as d}from"./ChatUiV2.js";const p=t.div`
2
+ background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
3
+ border: ${e=>e.showHeader?0:1}px solid
4
+ ${a.stroke.primary};
5
+ border-radius: 4px;
6
+ background-repeat: no-repeat;
7
+ background-position: center;
8
+ background-size: cover;
9
+ position: relative;
10
+ `,m=t(i)`
11
+ color: ${a.content.primary};
12
+ `,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(p,Object.assign({style:t.containerStyle,showHeader:t.showHeader},{children:[t.showHeader&&e(n,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(d,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{c as WhatsappLikePreviewV2};
@@ -0,0 +1,7 @@
1
+ export type variableType = {
2
+ placeholder: string;
3
+ value: string;
4
+ };
5
+ export declare class VariableEditorHelper {
6
+ format(text?: string, variableList?: variableType[]): string;
7
+ }
@@ -0,0 +1 @@
1
+ import{BaseWhatsappContentLangHelper as e}from"../../../helpers/BaseWhatsappContentLang.helper.js";import{variablePattern as n}from"../constants/regexPatterns.js";const r=new e;class t{format(e,t){var l;if(!e)return"";const o=new RegExp(n,"g"),a=e.match(o),s=null!==(l=null==t?void 0:t.map((e=>{let{placeholder:n}=e;return n})))&&void 0!==l?l:[],p=e.split(n).map(((e,n)=>{var r;const l=null==a?void 0:a[n];if(l){const n=l.replace("{{","").replace("}}",""),o=s.findIndex((e=>e===n));return o>-1?e+"```"+(null===(r=null==t?void 0:t[o])||void 0===r?void 0:r.value)+"```":e+l}return e})).join("");return r.getHTML(p)}}export{t as VariableEditorHelper};
@@ -2,5 +2,7 @@ import * as regexPatterns from './constants/regexPatterns';
2
2
  export { regexPatterns };
3
3
  export * from './TemplatePreview';
4
4
  export * from './WhatsApp/WhatsAppLikePreview';
5
+ export * from './WhatsApp/WhatsAppLikePreviewV2';
5
6
  export * from './helpers/SmsTemplateHelper';
6
7
  export * from './helpers/WhatsAppFormatToHTML';
8
+ export * from './helpers/VariableEditorHelper';
@@ -1,4 +1,5 @@
1
1
  import React, { ReactElement } from 'react';
2
+ import { variableType } from '../helpers/VariableEditorHelper';
2
3
  import { CHANNEL_TYPE } from './Channels';
3
4
  import { ACTIONS_TYPES, ButtonPlaceHolderOptions, CUSTOM_VARIABLE, HEADER_TYPES, QUICK_REPLY_BUTTON, TEMPLATE_STATUS } from './TemplateMeta';
4
5
  export type WhatsAppTemplate = {
@@ -168,6 +169,9 @@ export type WhatsappLikePreviewTypes = {
168
169
  imagePreviewStyles?: React.CSSProperties;
169
170
  size?: 'small' | 'large';
170
171
  zeroStateComponent: ReactElement<any, any>;
172
+ children?: React.ReactNode;
173
+ bodyVariableList?: variableType[];
174
+ headerVariableList?: variableType[];
171
175
  };
172
176
  export type WhatsappMeta = {
173
177
  containerStyle?: React.CSSProperties | undefined;
@@ -0,0 +1,34 @@
1
+ export declare class BaseWhatsappContentLangHelper {
2
+ getHTML(text: string): string;
3
+ /**
4
+ *
5
+ * how it works ?
6
+ *
7
+ * iterates through each chars, if the char matches the wildcard (eg * or _ or etc),
8
+ * if there is any alphanumeric char in previous, do nothing
9
+ * if there are no char next to it, do nothing
10
+ * if there is already an opening wildcard (odd number length for indices arr), and alphanumeric char next to it, do nothing,
11
+ * for odd number indices arr length, it means current wildcard is for closing, then check if previous
12
+ * char is there or not, if not , do nothing
13
+ * else push it to indices arr
14
+ *
15
+ * @param format
16
+ * @param wildcard
17
+ * @param opTag
18
+ * @param clTag
19
+ * @returns
20
+ */
21
+ private whatsappStyles;
22
+ /**
23
+ * how it works ?
24
+ * same as whatsappStyles, just that there is a offset of 3 char for every checks
25
+ *
26
+ * @param format
27
+ * @param opTag
28
+ * @param clTag
29
+ * @returns
30
+ */
31
+ private whatsappStylesMonospace;
32
+ private whatsappLinkStyle;
33
+ wrappWildcard(startIndex: number, endIndex: number, wildcard: string, str: string): string;
34
+ }
@@ -0,0 +1 @@
1
+ import{isAplhanumeric as t}from"../utils/isAlphanumeric.js";class e{getHTML(t){let e=t;return e=this.whatsappStyles(e,"_","<i>","</i>"),e=this.whatsappStyles(e,"*","<b>","</b>"),e=this.whatsappStyles(e,"~","<s>","</s>"),e=this.whatsappStylesMonospace(e,"<code>","</code>"),e&&(e=e.replace(/\n/gi,"<br>")),e=this.whatsappLinkStyle(e),e}whatsappStyles(e,s,p,a){const h=[];if(e)for(let p=0;p<e.length;p++)e[p]===s?h.length%2?" "!==e[p-1]&&((void 0===e[p+1]||!t(e[p+1]))&&h.push(p)):void 0!==e[p+1]&&(" "!==e[p+1]&&((void 0===e[p-1]||!t(e[p-1]))&&h.push(p))):10===e.charCodeAt(p)&&h.length%2&&h.pop();h.length%2&&h.pop();let l=0;return h.forEach((function(t,s){const h=s%2?a:p;t+=l,e=e.substr(0,t)+h+e.substr(t+1),l+=h.length-1})),e}whatsappStylesMonospace(e,s,p){const a=[];if(e)for(let s=0;s<e.length;s++)"`"===e[s]&&"`"===e[s+1]&&"`"===e[s+2]?a.length%2?" "===e[s-3]||(void 0===e[s+3]?a.push(s):t(e[s+3])?a.length%2==1&&a.pop():a.push(s)):void 0===e[s+3]||" "===e[s+3]||(void 0===e[s-1]||" "===e[s-1]?a.push(s):t(e[s-1])?a.length%2==1&&a.pop():a.push(s)):10===e.charCodeAt(s)&&a.length%2&&a.pop();a.length%2&&a.pop();let h=0;return a.forEach((function(t,a){const l=a%2?p:s;t+=h,e=e.substr(0,t)+l+e.substr(t+3),h+=l.length-3})),e}whatsappLinkStyle(t){const e=t;return new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)?`<a href="${e}" target="_blank" rel="noreferrer">${e}</a>`:e}wrappWildcard(t,e,s,p){return t<0||t>e?p:p.slice(0,t)+s+p.slice(t,e)+s+p.slice(e)}}export{e as BaseWhatsappContentLangHelper};
@@ -0,0 +1 @@
1
+ export * from './BaseWhatsappContentLang.helper';
@@ -36,3 +36,7 @@ export * from './components/plans';
36
36
  export * from './components/tabs';
37
37
  export * from './components/shimmer';
38
38
  export * from './components/TablePagination/';
39
+ export * from './components/states-modal';
40
+ export * from './components/states';
41
+ export * from './components/CustomEditor';
42
+ export * from './helpers';
package/dist/esm/index.js CHANGED
@@ -1 +1 @@
1
- import*as o from"./components/template-preview/constants/regexPatterns.js";export{o as regexPatterns};export{default as StringUtils}from"./utils/StringUtils.js";export{BASE_COLORS,COLORS,DEFAULT_THEME,FONTS}from"./constants/Theme.js";export{CheckBox}from"./components/checkBox/CheckBox.js";export{ListItem}from"./components/list-item/ListItem.js";export{Pagination}from"./components/pagination/Pagination.js";export{RadioButton}from"./components/radioButton/RadioButton.js";export{Toaster}from"./components/toaster/Toaster.js";export{Tooltip}from"./components/tooltips/Tooltip.js";export{Spinner}from"./components/spinner/Spinner.js";export{Stepper}from"./components/stepper/Stepper.js";export{Tag}from"./components/tag/Tag.js";export{IconButton}from"./components/icon-button/IconButton.js";export{TemplatePreview}from"./components/template-preview/TemplatePreview.js";export{WhatsappLikePreview}from"./components/template-preview/WhatsApp/WhatsAppLikePreview.js";export{renderVariableUIForPreview}from"./components/template-preview/helpers/SmsTemplateHelper.js";export{WhatsAppFormatToHTML}from"./components/template-preview/helpers/WhatsAppFormatToHTML.js";export{TemplateContextMapper}from"./components/template-context-mapper/TemplateContextMapper.js";export{getAllDataFromTemplateComponent}from"./components/template-context-mapper/utils/getDataFromTemplateComponent.js";export{validateIsUrl}from"./components/template-context-mapper/utils/validateIsUrl.js";export{FABMenu}from"./components/fab-menu/FABMenu.js";export{FloatingActionButton}from"./components/floating-action-button/FloatingActionButton.js";export{DROP_POSITION,DropdownToggleContainer,FAB_POSITION,FloatingActionButtonContainer,FloatingActionButtonOuterContainer,MENU_ALIGNMENT,StyledDropdown,TooltipStyled}from"./components/floating-action-button/FloatingActionButton.styles.js";export{ImageService}from"./components/image-compress/ImageCompress.js";export{BodyCaption,BodyLarge,BodyPrimary,BodyPrimaryLink,BodyRegular,BodySecondary,BodySecondaryLink,BodyTiny,ButtonLarge,ButtonRegular,Caption,Display,SubHeading,TitleLarge,TitleMedium,TitleRegular,TitleSmall}from"./components/TypographyStyle.js";export{Button}from"./components/button/Button.js";export{ProgressBarComponent,ProgressCompletedBar}from"./components/progress-bar/ProgressBarComponent.js";export{QueryBuilder}from"./components/QueryBuilder/QueryBuilder.js";export{BaseQueryBuilderNode}from"./components/QueryBuilder/components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";export{PropertyNode,PropertyNodeHeadless}from"./components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode.js";export{queryBuilderSlice}from"./components/QueryBuilder/redux/queryBuilder.reducer.js";export{queryBuilderCacheSlice}from"./components/QueryBuilder/redux/queryBuilderCache.reducer.js";export{BOOLEAN_OPERATORS,DATE_OPERATORS,EVENT_VALUES,FREQUENCY_OPERATORS,IG_OPERATORS,INTEGER_OPERATORS,STRING_OPERATORS}from"./components/QueryBuilder/types/QueryBuilderOperator.type.js";export{StyledModal}from"./components/modals/styledModal.js";export{Dropdown}from"./components/dropdown/Dropdown.js";export{DropdownPopover}from"./components/dropdown/DropdownPopover/index.js";export{OpenedDropdown}from"./components/dropdown/OpenedDropdown/components/OpennedDropdown.js";export{AnalyticsCard}from"./components/analytics-card/AnalyticsCard.js";export{AnalyticsContainer,CardDataContainer}from"./components/analytics-card/AnalyticsCard.styled.js";export{Input}from"./components/input/Input.js";export{AnalyticsChip}from"./components/analytics-chips-and-dropdowns/AnalyticsChip.js";export{AnalyticsDropdown,EachItem}from"./components/analytics-chips-and-dropdowns/AnalyticsDropdown.js";export{AnalyticsMultiChip}from"./components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js";export{AVATAR_SIZE_VS_ICON_SIZE_MAP,Avatar,BACKGROUND_VS_TEXT_COLOR_MAP}from"./components/avatar/Avatar.js";export{RATIO,Thumbnail}from"./components/thumbnail/Thumbnail.js";export{Curtain}from"./components/curtain/Curtain.js";export{DatePicker}from"./components/datePicker/DatePicker.js";export{Loader,Switch,SwitchContainer,Thumb}from"./components/switch/Switch.js";export{SubscriptionPlan}from"./components/plans/SubscriptionPlan.js";export{SubscriptionPlanSelector}from"./components/plans/SubscriptionPlanSelector.js";export{TabItemComponent}from"./components/tabs/Tabs.js";export{BikShimmer}from"./components/shimmer/ShimmerComponent/BikShimmer.js";export{TablePagination}from"./components/TablePagination/TablePagination.js";
1
+ import*as o from"./components/template-preview/constants/regexPatterns.js";export{o as regexPatterns};export{default as StringUtils}from"./utils/StringUtils.js";export{BASE_COLORS,COLORS,DEFAULT_THEME,FONTS}from"./constants/Theme.js";export{CheckBox}from"./components/checkBox/CheckBox.js";export{ListItem}from"./components/list-item/ListItem.js";export{Pagination}from"./components/pagination/Pagination.js";export{RadioButton}from"./components/radioButton/RadioButton.js";export{Toaster}from"./components/toaster/Toaster.js";export{Tooltip}from"./components/tooltips/Tooltip.js";export{Spinner}from"./components/spinner/Spinner.js";export{Stepper}from"./components/stepper/Stepper.js";export{Tag}from"./components/tag/Tag.js";export{IconButton}from"./components/icon-button/IconButton.js";export{TemplatePreview}from"./components/template-preview/TemplatePreview.js";export{WhatsappLikePreview}from"./components/template-preview/WhatsApp/WhatsAppLikePreview.js";export{WhatsappLikePreviewV2}from"./components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js";export{renderVariableUIForPreview}from"./components/template-preview/helpers/SmsTemplateHelper.js";export{WhatsAppFormatToHTML}from"./components/template-preview/helpers/WhatsAppFormatToHTML.js";export{VariableEditorHelper}from"./components/template-preview/helpers/VariableEditorHelper.js";export{TemplateContextMapper}from"./components/template-context-mapper/TemplateContextMapper.js";export{getAllDataFromTemplateComponent}from"./components/template-context-mapper/utils/getDataFromTemplateComponent.js";export{validateIsUrl}from"./components/template-context-mapper/utils/validateIsUrl.js";export{FABMenu}from"./components/fab-menu/FABMenu.js";export{FloatingActionButton}from"./components/floating-action-button/FloatingActionButton.js";export{DROP_POSITION,DropdownToggleContainer,FAB_POSITION,FloatingActionButtonContainer,FloatingActionButtonOuterContainer,MENU_ALIGNMENT,StyledDropdown,TooltipStyled}from"./components/floating-action-button/FloatingActionButton.styles.js";export{ImageService}from"./components/image-compress/ImageCompress.js";export{BodyCaption,BodyLarge,BodyPrimary,BodyPrimaryLink,BodyRegular,BodySecondary,BodySecondaryLink,BodyTiny,ButtonLarge,ButtonRegular,Caption,Display,SubHeading,TitleLarge,TitleMedium,TitleRegular,TitleSmall}from"./components/TypographyStyle.js";export{Button}from"./components/button/Button.js";export{ProgressBarComponent,ProgressCompletedBar}from"./components/progress-bar/ProgressBarComponent.js";export{QueryBuilder}from"./components/QueryBuilder/QueryBuilder.js";export{BaseQueryBuilderNode}from"./components/QueryBuilder/components/QueryBuilderNode/Base/BaseQueryBuilderNode.js";export{PropertyNode,PropertyNodeHeadless}from"./components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode.js";export{queryBuilderSlice}from"./components/QueryBuilder/redux/queryBuilder.reducer.js";export{queryBuilderCacheSlice}from"./components/QueryBuilder/redux/queryBuilderCache.reducer.js";export{BOOLEAN_OPERATORS,DATE_OPERATORS,EVENT_VALUES,FREQUENCY_OPERATORS,IG_OPERATORS,INTEGER_OPERATORS,STRING_OPERATORS}from"./components/QueryBuilder/types/QueryBuilderOperator.type.js";export{StyledModal}from"./components/modals/styledModal.js";export{Dropdown}from"./components/dropdown/Dropdown.js";export{DropdownPopover}from"./components/dropdown/DropdownPopover/index.js";export{OpenedDropdown}from"./components/dropdown/OpenedDropdown/components/OpennedDropdown.js";export{AnalyticsCard}from"./components/analytics-card/AnalyticsCard.js";export{AnalyticsContainer,CardDataContainer}from"./components/analytics-card/AnalyticsCard.styled.js";export{Input}from"./components/input/Input.js";export{AnalyticsChip}from"./components/analytics-chips-and-dropdowns/AnalyticsChip.js";export{AnalyticsDropdown,EachItem}from"./components/analytics-chips-and-dropdowns/AnalyticsDropdown.js";export{AnalyticsMultiChip}from"./components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js";export{AVATAR_SIZE_VS_ICON_SIZE_MAP,Avatar,BACKGROUND_VS_TEXT_COLOR_MAP}from"./components/avatar/Avatar.js";export{RATIO,Thumbnail}from"./components/thumbnail/Thumbnail.js";export{Curtain}from"./components/curtain/Curtain.js";export{DatePicker}from"./components/datePicker/DatePicker.js";export{Loader,Switch,SwitchContainer,Thumb}from"./components/switch/Switch.js";export{SubscriptionPlan}from"./components/plans/SubscriptionPlan.js";export{SubscriptionPlanSelector}from"./components/plans/SubscriptionPlanSelector.js";export{TabItemComponent}from"./components/tabs/Tabs.js";export{BikShimmer}from"./components/shimmer/ShimmerComponent/BikShimmer.js";export{TablePagination}from"./components/TablePagination/TablePagination.js";export{StateModalComponent}from"./components/states-modal/StateModalComponent.js";export{ButtonActions,ButtonTypes,StateComponent,StateInterface}from"./components/states/StateComponent.js";export{CustomEditor}from"./components/CustomEditor/CustomEditor.js";import"react/jsx-runtime";import"react";export{CustomEditorHeader,EditorActionTypes}from"./components/CustomEditor/CustomEditorHeader.js";export{BaseWhatsappContentLangHelper}from"./helpers/BaseWhatsappContentLang.helper.js";
@@ -0,0 +1 @@
1
+ export declare function isAplhanumeric(c: string): boolean;
@@ -0,0 +1 @@
1
+ function t(t){const n=t.charCodeAt(0);return n>=65&&n<=90||n>=97&&n<=122||n>=48&&n<=57}export{t as isAplhanumeric};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.46",
3
+ "version": "0.0.48-editor.1",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",