@bikdotai/bik-component-library 0.0.22 → 0.0.23-4.beta-1

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { CompressImageOptions } from "../../image-compress";
+import { BikImageCropperProps } from "..";
+/**
+ * Todos
+ * 	- Add option to pass https url in the src / edit an image
+ */
+export interface BikImagePipelineProps {
+    fileTitle?: string;
+    cropOptions?: Partial<BikImageCropperProps>;
+    compressionOptions?: CompressImageOptions;
+    currentImage: {
+        src?: string;
+    };
+    options: {
+        upload: boolean;
+        crop?: boolean;
+        compress?: boolean;
+        uploadToFirestorage?: boolean;
+    };
+    onCancel: () => void;
+    onFinish: (base64String: string, file?: File, url?: string) => void;
+    fileUploadOptions?: {
+        path: string;
+        uploadProgress: number;
+        uploadFile: (file: File, path: string) => Promise<string>;
+        error?: string;
+        success?: boolean;
+    };
+}
+export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, }: BikImagePipelineProps) => JSX.Element;

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),s=require("../../image-compress/ImageCompress.js"),r=require("../../states/StateComponent.js"),t=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=i=>{let{cropOptions:n,fileTitle:l,compressionOptions:p,currentImage:c,options:u,onFinish:d,onCancel:m,fileUploadOptions:g}=i;const h=o.useRef(null),[j,C]=o.useState(),[f,x]=o.useState(c),[I,S]=o.useState(!1);o.useEffect((()=>{u.upload?(C("upload"),setTimeout((()=>{y()}),500)):u.crop?C("crop"):u.compress?C("compress"):u.uploadToFirestorage?C("cloud-upload"):S(!0)}),[u.upload,u.crop,u.compress,u.uploadToFirestorage]);const v=o.useCallback(((e,o)=>{if(!u.uploadToFirestorage)return d(e,o),void S(!0);C("cloud-upload"),g&&g.uploadFile(o,g.path).then((s=>{d(e,o,s),S(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),F=e=>{e||m();const o=s.ImageService.base64ToImage(e);u.compress?(C("compress"),s.ImageService.compressImage(o,p).then((e=>{if(!e)return S(!0),void m();v(e.base64,e.compressedFile)}))):v(e,o)},y=()=>{h.current.click()};return I?e.jsx(e.Fragment,{}):"cloud-upload"===j?!g||g.success?e.jsx(e.Fragment,{}):g.error?e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:r.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{S(!0),m()}})}):e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:r.StateInterface.LOADING,heading:`Uploading your ${l||"photo"}`,subline:`Please wait while we upload your ${l||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxs(e.Fragment,{children:[u.upload&&e.jsx("input",{ref:h,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],s=new FileReader;s.onload=()=>{var e;x({src:s.result}),e=s.result,u.crop?C("crop"):F(e)},o&&s.readAsDataURL(o)}}),"crop"===j&&e.jsx(a.BikImageCropper,{src:f.src,onCropComplete:e=>{x({src:e}),F(e)},aspectRatio:n.aspectRatio,onCancel:m})]})};

package/dist/cjs/components/image-cropper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BikImageCropper';
+export * from './BikImagePipeline/BikImagePipeline';

package/dist/cjs/components/image-cropper/useMockFileUpload.d.ts

@@ -0,0 +1,8 @@
+interface FileUploadOptions {
+    uploadProgress: number;
+    uploadFile: (file: File, path: string) => Promise<string>;
+    error?: string;
+    success?: boolean;
+}
+declare const useMockFileUpload: () => FileUploadOptions;
+export default useMockFileUpload;

package/dist/cjs/components/input/ChipInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const extractSingleValueIfAny: (nativeID: string) => string;
+export declare const getInputNode: (nativeID: string) => HTMLInputElement;
+export interface ChipInputProps {
+    onChipsChange: (chips: (string | number)[]) => void;
+    placeholder: string;
+    label?: string;
+    labelColor?: string;
+    hintText?: string;
+    hintTextColor?: string;
+    chipTheme?: () => void;
+    chips: string[];
+    error?: string;
+    inputHeight?: number;
+    createChipKeys?: (string | number)[];
+    chipsContainerCustomStyle?: React.CSSProperties;
+    nativeID?: string;
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

package/dist/cjs/components/input/ChipInput.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-chips"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./ChipInput.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(r);exports.default=r=>{let{onChipsChange:c,placeholder:s,chips:a,label:u,labelColor:d,hintText:h,hintTextColor:p,error:y,inputHeight:C,createChipKeys:O,chipsContainerCustomStyle:j,nativeID:v}=r;const[f,g]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${v} input`))||void 0===e||e.addEventListener("focus",(()=>{g(!0)})),null===(t=document.querySelector(`#${v} input`))||void 0===t||t.addEventListener("blur",(()=>{g(!1)}))}),[]),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:v},{children:[u&&e.jsx(i.BodySecondary,Object.assign({style:{color:f?n.COLORS.content.brand:y?n.COLORS.content.negative:d||n.COLORS.content.primary}},{children:u})),e.jsx(l.default,{value:a,theme:o.theme(!!y,C,j,f),chipTheme:o.chipTheme,placeholder:0===a.length&&!!s&&!f&&s,onChange:e=>{c(e)},createChipKeys:O||","}),(!!h||!!y)&&e.jsx(i.BodyCaption,Object.assign({style:{color:y?n.COLORS.content.negative:p||n.COLORS.content.secondary}},{children:y||h}))]}))};

package/dist/cjs/components/input/ChipInput.styled.d.ts

@@ -0,0 +1,66 @@
+export declare const chipTheme: {
+    chip: {
+        padding: string;
+        background: string;
+        border: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        borderRadius: number;
+        alignItems: string;
+        alignContent: string;
+        justifyContent: string;
+        cursor: string;
+        margin: string;
+        fontFamily: string;
+    };
+    chipRemove: {
+        fontSize: number;
+        fontFamily: string;
+        cursor: string;
+        fontWeight: string;
+        color: string;
+        marginLeft: number;
+        ':hover': {
+            color: string;
+        };
+    };
+};
+export declare const theme: (error?: boolean, height?: number, chipsContainerCustomStyle?: Object, focused?: boolean) => {
+    chipsContainer: {
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        display: string;
+        position: string;
+        border: string;
+        backgroundColor: string;
+        alignItems: string;
+        flexWrap: string;
+        padding: string;
+        borderRadius: number;
+        ':hover': {
+            border: string;
+        };
+    };
+    container: {
+        flex: number;
+    };
+    containerOpen: {};
+    input: {
+        border: string;
+        outline: string;
+        boxSizing: string;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: number;
+        height: number;
+        width: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

package/dist/cjs/components/input/ChipInput.styled.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");const r={chip:{padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.COLORS.content.secondary,marginLeft:6,":hover":{color:e.COLORS.content.secondary}}};exports.chipTheme=r,exports.theme=(r,o,n,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.COLORS.stroke.brand}`}},null!=n?n:{}),container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});

package/dist/cjs/components/input/Input-helper.d.ts

@@ -0,0 +1,6 @@
+import { InputTypeI } from "./Input";
+export declare const isFunction: (fn: any) => boolean;
+export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {
+    min?: number;
+    max?: number;
+}) => [boolean, string];

package/dist/cjs/components/input/Input-helper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("phone");exports.isFunction=e=>e&&"function"==typeof e,exports.validateInput=function(n,r){let t,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(r),u=a?n?Number(n):null:n;if(null==u||""===u)return[!0,""];if(a&&String(u).length&&(i.min&&u<i.min||i.max&&u>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,u.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,u.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return u>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(u).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(u));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==u?void 0:u.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};

package/dist/cjs/components/input/Input.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
-export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber';
 export interface InputProps {
+    noErrorHint?: boolean;
     placeholder?: string;
     variant?: InputVariant;
     width?: string;
@@ -26,7 +27,7 @@ export interface InputProps {
         validate:  function takes the input and returns boolean + string (error message in case of invalid input)
      **/
     validate?: (input?: string | number) => [boolean, string];
-    onChangeText: (input: string) => void;
+    onChangeText: (input: string, event?: Event) => void;
     button?: {
         text: string;
         onClick?: () => void;
@@ -34,7 +35,21 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
-    onBlur?: () => void;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
     onFocus?: () => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const Input: {
+    (props: InputProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=t.forwardRef(((o,u)=>{var c,d,x;const{placeholder:v,leftIcon:h,rightIcon:j,labelText:p,maxCharLimit:f,isRequired:g,hintText:y,type:I,state:b,validate:C,variant:S,button:m,suffixText:O,prefixText:w,onChangeText:q,value:T}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==h?void 0:h.icon,B=null==j?void 0:j.icon,[E,H]=t.useState(""),[F,L]=t.useState(!1),[M,R]=t.useState(!1),[D,P]=t.useState(),z="small"===S?"18px":"22px",A=t.useContext(l.InputStyleContext);t.useEffect((()=>{P(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{L(!1),("invalid"===o.state||D)&&L(!0)}),[o.state,D]),t.useEffect((()=>{L(!!D)}),[D]),t.useEffect((()=>{if(q(E),!C||!a(C))return;const[e,t]=C(E);L(!e),P(t)}),[E]);const K=function(e){if(a(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},W=e=>{![8].includes(e.which)&&f>0&&e.target.value.length===f&&e.preventDefault()},_=e=>{H(e.target.value)},N=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{style:null!==(t=null==A?void 0:A.input)&&void 0!==t?t:{},ref:u,type:I,value:T,onFocus:()=>(R(!0),void K(o.onFocus)),onBlur:()=>(R(!1),void K(o.onBlur)),placeholder:v||"Enter here",onChange:_,onKeyDown:e=>W(e)}),"multiline"===I&&e.jsx("textarea",{value:T,ref:u,onFocus:()=>R(!0),onBlur:()=>R(!1),placeholder:v||"Enter here",onChange:_,onKeyDown:e=>W(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:b,type:I,style:null!==(c=null==A?void 0:A.RootContainer)&&void 0!==c?c:{}},{children:[(!!y||!!D)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!D},{children:[!!D&&e.jsx(r.default,{}),D||y]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:b,width:o.width,isActive:"active"===b||M,isInvalid:F,style:null!==(d=null==A?void 0:A.InputWrapper)&&void 0!==d?d:{}},{children:[!!k&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:z,onClick:()=>K(null==h?void 0:h.callback),isLeft:!0,style:null!==(x=null==A?void 0:A.IconHolder)&&void 0!==x?x:{}},{children:e.jsx(k,{})})),!!w&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:w})),"default"===S&&e.jsx(s.InputContainer,{children:N()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:N()}),!!B&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:z,onClick:()=>K(null==h?void 0:h.callback),isLeft:!1},{children:e.jsx(B,{})})),!!O&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:O})),m&&m.text&&e.jsx(n.Button,{buttonText:m.text,onClick:()=>K(null==m?void 0:m.onClick)})]})),(!!p||!!f)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:F},{children:[e.jsxs(i.BodySecondary,{children:[p,g?e.jsx("span",{children:"*"}):""]}),f>0&&e.jsxs(s.MaxCharStyle,{children:[E.length,"/",f]})]}))]}))}));o.displayName="Input",exports.Input=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),o=require("./Input.styled.js");const a=a=>{var u,c,d,v,h;const{placeholder:x,leftIcon:p,rightIcon:f,labelText:j,maxCharLimit:g,isRequired:y,hintText:I,type:b,state:C,validate:m,variant:S,button:w,suffixText:E,prefixText:O,onChangeText:q,value:F,noErrorHint:k,reset:H,rangeValidation:T,noKeyDownChange:B,version:M}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},a),A=null==p?void 0:p.icon,L=null==f?void 0:f.icon,[R,z]=t.useState(!1),[D,K]=t.useState(!1),[P,W]=t.useState(),_="small"===S?"18px":"22px",N=t.useContext(l.InputStyleContext),[V,G]=t.useState(),J=t.useRef();t.useEffect((()=>{G(F)}),[F]),t.useEffect((()=>{var e;J.current&&(null===(e=a.onReferenceInit)||void 0===e||e.call(a,J.current))}),[J]),t.useEffect((()=>{H&&G("")}),[H]),t.useEffect((()=>{var e;K(!!a.isActive),a.isActive&&(null===(e=J.current)||void 0===e||e.focus())}),[a.isActive]),t.useEffect((()=>{W(a.errorMessage)}),[a.errorMessage]),t.useEffect((()=>{var e;z(!1),("invalid"===a.state||P)&&z(!0),"active"===a.state&&(null===(e=J.current)||void 0===e||e.focus())}),[a.state,P]),t.useEffect((()=>{z(!!P)}),[P]);const Q=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},U=e=>{const t=g||("zip"===b?6:60);B||q(F||"",e),![8].includes(e.which)&&t>0&&e.target.value.length===t&&e.preventDefault()},X=e=>{const t=e.target.value;q(t,e),G(t);const n=m||i.validateInput;if(!n||!i.isFunction(n))return;const[r,s]=n(t,b,T);z(!r),W(a.errorMessage?a.errorMessage:s)},Y=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==b&&e.jsx("input",{id:a.id,style:null!==(t=null==N?void 0:N.input)&&void 0!==t?t:{},ref:J,type:["phonenumber","zip","number"].includes(b)?"number":b,value:V,onFocus:()=>(a.skipFocus||K(!0),void Q(a.onFocus)),onBlur:e=>(e=>{var t;K(!1),Q(null===(t=a.onBlur)||void 0===t?void 0:t.call(a,e))})(e),placeholder:x||"Enter here",onChange:X,onKeyDown:e=>U(e)}),"multiline"===b&&e.jsx("textarea",{value:V,ref:J,onFocus:()=>K(!0),onBlur:()=>K(!1),placeholder:x||"Enter here",onChange:X,onKeyDown:e=>U(e),maxLength:g>0?g:void 0})]})};return e.jsxs(o.RootContainer,Object.assign({width:a.width,height:a.height,state:C,type:b,style:null!==(u=null==N?void 0:N.RootContainer)&&void 0!==u?u:{}},{children:[!k&&(!!I||!!P)&&e.jsxs(o.InputFooter,Object.assign({invalid:!!P},{children:[!!P&&e.jsx(s.default,{width:16,height:16}),P||I]})),e.jsxs(o.InputWrapper,Object.assign({variant:S,state:C,width:a.width,isActive:"active"===C||D,isInvalid:R,style:null!==(c=null==N?void 0:N.InputWrapper)&&void 0!==c?c:{},version:M},{children:[!!A&&e.jsx(o.IconHolder,Object.assign({variant:S,iconSize:_,onClick:()=>Q(null==p?void 0:p.callback),isLeft:!0,style:null!==(d=null==N?void 0:N.IconHolder)&&void 0!==d?d:{}},{children:e.jsx(A,{})})),!!O&&e.jsx(o.PrefixHolder,Object.assign({variant:S},{children:O})),"default"===S&&e.jsx(o.InputContainer,{children:Y()}),"small"===S&&e.jsx(o.InputContainerSmall,{children:Y()}),!!L&&e.jsx(o.IconHolder,Object.assign({variant:S,iconSize:_,onClick:()=>Q(null==f?void 0:f.callback),isLeft:!1},{children:e.jsx(L,{})})),!!E&&e.jsx(o.SuffixHolder,Object.assign({variant:S},{children:E})),w&&w.text&&e.jsx(n.Button,{buttonText:w.text,onClick:()=>Q(null==w?void 0:w.onClick)})]})),(!!j||!!g)&&e.jsxs(o.InputHeader,Object.assign({invalid:R},{children:[e.jsxs(r.BodySecondary,{children:[j,y?e.jsx("span",{children:"*"}):""]}),g>0&&e.jsxs(o.MaxCharStyle,{children:[null!==(h=null===(v=a.value)||void 0===v?void 0:v.length)&&void 0!==h?h:0,"/",g]})]}))]}))};a.displayName="Input",exports.Input=a;

package/dist/cjs/components/input/Input.styled.d.ts

@@ -10,6 +10,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
+    version?: "1.0" | "2.0" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;