quickblox-react-ui-kit 0.4.8 → 0.4.9-alpha.1

package/storybook-static/Presentation-ui-components-SettingsItem-SettingsItem-stories.5a74dd52.iframe.bundle.js

@@ -0,0 +1,69 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[853],{"./src/Presentation/ui-components/SettingsItem/SettingsItem.stories.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{SettingsItemDefault:()=>SettingsItemDefault,SettingsItemMembers:()=>SettingsItemMembers,SettingsItemNotification:()=>SettingsItemNotification,__namedExportsOrder:()=>__namedExportsOrder,default:()=>SettingsItem_stories});var react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function SettingsItem_SettingsItem(_ref){let{icon,title,rightSection,children,className,onClick}=_ref,[isShow,setIsShow]=(0,react.useState)(!1);return(0,jsx_runtime.jsxs)("div",{onClick:onClick,className:classnames_default()("settings-item",className),children:[(0,jsx_runtime.jsxs)("div",{className:"settings-item__body",children:[(0,jsx_runtime.jsxs)("div",{className:"settings-item__left-section",children:[(0,jsx_runtime.jsx)("span",{className:"settings-item__icon",children:icon}),(0,jsx_runtime.jsx)("span",{className:"settings-item__title",children:title})]}),(0,jsx_runtime.jsxs)("div",{className:"settings-item__right-section",children:[rightSection,children&&(0,jsx_runtime.jsx)(icons.Lf,{className:classnames_default()("settings-item__arrow",{"settings-item__arrow--opened":isShow}),onClick:()=>setIsShow(!isShow)})]})]}),children&&(0,jsx_runtime.jsx)("div",{className:classnames_default()("settings-item__children",{"settings-item__children--opened":isShow}),children:children})]})}try{SettingsItem_SettingsItem.displayName="SettingsItem",SettingsItem_SettingsItem.__docgenInfo={description:"",displayName:"SettingsItem",props:{icon:{defaultValue:null,description:"",name:"icon",required:!0,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}},rightSection:{defaultValue:null,description:"",name:"rightSection",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"VoidFunction"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/SettingsItem/SettingsItem.tsx#SettingsItem"]={docgenInfo:SettingsItem_SettingsItem.__docgenInfo,name:"SettingsItem",path:"src/Presentation/ui-components/SettingsItem/SettingsItem.tsx#SettingsItem"})}catch(__react_docgen_typescript_loader_error){}var Badge=__webpack_require__("./src/Presentation/ui-components/Badge/Badge.tsx"),Avatar=__webpack_require__("./src/Presentation/ui-components/Avatar/Avatar.tsx");let SettingsItem_stories={title:"@quickblox-react-ui-kit/Presentation/ui-components/SettingsItem",component:SettingsItem_SettingsItem,tags:["autodocs"],parameters:{layout:"centered"},argTypes:{title:{table:{defaultValue:{summary:""},type:{summary:"string"}},description:"Name Setting item "},className:{table:{defaultValue:{summary:""},type:{summary:"string"}},description:"Additional classes"},icon:{control:!1,table:{defaultValue:{summary:"svg | ReactElement"},type:{summary:"svg | ReactElement"}},description:"Format plug svg or React element "},rightSection:{control:!1,table:{defaultValue:{summary:"ReactElement | ReactElement[]"},type:{summary:"ReactElement | ReactElement[]"}},description:"Elements for the right section"},onClick:{control:!1,table:{defaultValue:{summary:"VoidFunction"},type:{summary:"VoidFunction"}},description:"function onClick for icon"},children:{control:!1,table:{defaultValue:{summary:"ReactElement | ReactElement[]"},type:{summary:"ReactElement | ReactElement[]"}},description:"Elements that will be contained in the additional section"}}},SettingsItemDefault={name:"SettingsItem Default",args:{title:"Search in dialog",icon:(0,jsx_runtime.jsx)(icons.p8,{style:{fill:"#3978FC"}})}},SettingsItemNotification={name:"SettingsItem Notification",args:{title:"Notification",icon:(0,jsx_runtime.jsx)(icons.BD,{style:{fill:"#3978FC"}}),rightSection:(0,jsx_runtime.jsx)(icons.X6,{style:{cursor:"pointer"}})}},SettingsItemMembers={name:"SettingsItem Members",args:{title:"Notification",icon:(0,jsx_runtime.jsx)(icons.C_,{style:{fill:"#3978FC"}}),rightSection:(0,jsx_runtime.jsx)(Badge.A,{count:10,limit:99,mute:!0}),children:(0,jsx_runtime.jsxs)("ul",{style:{listStyle:"none",overflow:"hidden",margin:"0",padding:"0"},children:[(0,jsx_runtime.jsxs)("li",{style:{display:"flex",alignItems:"center",padding:"8px 16px",gap:"16px"},children:[(0,jsx_runtime.jsx)(Avatar.A,{size:"sm"})," Name"]}),(0,jsx_runtime.jsxs)("li",{style:{display:"flex",alignItems:"center",padding:"8px 16px",gap:"16px"},children:[(0,jsx_runtime.jsx)(Avatar.A,{size:"sm"})," Name"]}),(0,jsx_runtime.jsxs)("li",{style:{display:"flex",alignItems:"center",padding:"8px 16px",gap:"16px"},children:[(0,jsx_runtime.jsx)(Avatar.A,{size:"sm"})," Name"]}),(0,jsx_runtime.jsxs)("li",{style:{display:"flex",alignItems:"center",padding:"8px 16px",gap:"16px"},children:[(0,jsx_runtime.jsx)(Avatar.A,{size:"sm"})," Name"]})]})}};SettingsItemDefault.parameters={...SettingsItemDefault.parameters,docs:{...SettingsItemDefault.parameters?.docs,source:{originalSource:`{
+  name: 'SettingsItem Default',
+  args: {
+    title: 'Search in dialog',
+    icon: <SearchSvg style={{
+      fill: '#3978FC'
+    }} />
+  }
+}`,...SettingsItemDefault.parameters?.docs?.source}}},SettingsItemNotification.parameters={...SettingsItemNotification.parameters,docs:{...SettingsItemNotification.parameters?.docs,source:{originalSource:`{
+  name: 'SettingsItem Notification',
+  args: {
+    title: 'Notification',
+    icon: <NotificationsSvg style={{
+      fill: '#3978FC'
+    }} />,
+    rightSection: <CloseSvg style={{
+      cursor: 'pointer'
+    }} />
+  }
+}`,...SettingsItemNotification.parameters?.docs?.source}}},SettingsItemMembers.parameters={...SettingsItemMembers.parameters,docs:{...SettingsItemMembers.parameters?.docs,source:{originalSource:`{
+  name: 'SettingsItem Members',
+  args: {
+    title: 'Notification',
+    icon: <GroupChatSvg style={{
+      fill: '#3978FC'
+    }} />,
+    rightSection: <Badge count={10} limit={99} mute />,
+    children: <ul style={{
+      listStyle: 'none',
+      overflow: 'hidden',
+      margin: '0',
+      padding: '0'
+    }}>
+        <li style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 16px',
+        gap: '16px'
+      }}>
+          <Avatar size="sm" /> Name
+        </li>
+        <li style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 16px',
+        gap: '16px'
+      }}>
+          <Avatar size="sm" /> Name
+        </li>
+        <li style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 16px',
+        gap: '16px'
+      }}>
+          <Avatar size="sm" /> Name
+        </li>
+        <li style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 16px',
+        gap: '16px'
+      }}>
+          <Avatar size="sm" /> Name
+        </li>
+      </ul>
+  }
+}`,...SettingsItemMembers.parameters?.docs?.source}}};let __namedExportsOrder=["SettingsItemDefault","SettingsItemNotification","SettingsItemMembers"]},"./node_modules/classnames/index.js"(module,exports){var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=(function(){return classNames}).apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./src/Presentation/ui-components/Avatar/Avatar.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>Avatar_Avatar}),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function Avatar_Avatar(_ref){let{icon=(0,jsx_runtime.jsx)(icons.Uh,{}),size="md",className,src}=_ref;return src?(0,jsx_runtime.jsx)("div",{className:classnames_default()("qb-avatar","qb-avatar--".concat(size),className),children:(0,jsx_runtime.jsx)("img",{src:src,className:"qb-avatar__image",alt:"Avatar"})}):(0,jsx_runtime.jsx)("div",{className:classnames_default()("qb-avatar","qb-avatar--".concat(size),className),children:icon})}try{Avatar_Avatar.displayName="Avatar",Avatar_Avatar.__docgenInfo={description:"",displayName:"Avatar",props:{size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'}]}},icon:{defaultValue:{value:"<UserSvg />"},description:"",name:"icon",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Avatar/Avatar.tsx#Avatar"]={docgenInfo:Avatar_Avatar.__docgenInfo,name:"Avatar",path:"src/Presentation/ui-components/Avatar/Avatar.tsx#Avatar"})}catch(__react_docgen_typescript_loader_error){}},"./src/Presentation/ui-components/Badge/Badge.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>Badge_Badge}),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function Badge_Badge(_ref){let{count,limit,mute=!1,classNames}=_ref;return(0,jsx_runtime.jsx)("div",{className:classnames_default()("qb-badge",{"qb-badge--mute":mute},classNames),children:limit&&count>limit?"".concat(limit,"+"):count})}try{Badge_Badge.displayName="Badge",Badge_Badge.__docgenInfo={description:"",displayName:"Badge",props:{count:{defaultValue:null,description:"",name:"count",required:!0,type:{name:"number"}},limit:{defaultValue:null,description:"",name:"limit",required:!1,type:{name:"number"}},mute:{defaultValue:{value:"false"},description:"",name:"mute",required:!1,type:{name:"boolean"}},classNames:{defaultValue:null,description:"",name:"classNames",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Badge/Badge.tsx#Badge"]={docgenInfo:Badge_Badge.__docgenInfo,name:"Badge",path:"src/Presentation/ui-components/Badge/Badge.tsx#Badge"})}catch(__react_docgen_typescript_loader_error){}},"./node_modules/react/cjs/react-jsx-runtime.production.min.js"(__unused_webpack_module,exports,__webpack_require__){"use strict";var f=__webpack_require__("./node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js"(module,__unused_webpack_exports,__webpack_require__){"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
+//# sourceMappingURL=Presentation-ui-components-SettingsItem-SettingsItem-stories.5a74dd52.iframe.bundle.js.map

package/storybook-static/Presentation-ui-components-SettingsItem-SettingsItem-stories.5a74dd52.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Presentation-ui-components-SettingsItem-SettingsItem-stories.5a74dd52.iframe.bundle.js","mappings":";AAuLA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://quickblox-react-ui-kit/"],"names":[],"sourceRoot":""}

package/storybook-static/Presentation-ui-components-TextField-TextField-stories.9c399477.iframe.bundle.js

@@ -0,0 +1,18 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[555],{"./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";function _typeof(o){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o})(o)}function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function toPropertyKey(t){var i=toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(e,r,t){return(r=toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread2(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}__webpack_require__.d(__webpack_exports__,{A:()=>_objectSpread2})},"./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";function _objectWithoutPropertiesLoose(r,e){if(null==r)return{};var t={};for(var n in r)if(({}).hasOwnProperty.call(r,n)){if(-1!==e.indexOf(n))continue;t[n]=r[n]}return t}function _objectWithoutProperties(e,t){if(null==e)return{};var o,r,i=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],-1===t.indexOf(o)&&({}).propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}__webpack_require__.d(__webpack_exports__,{A:()=>_objectWithoutProperties})},"./src/Presentation/ui-components/TextField/TextField.stories.ts"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{TextFieldDefault:()=>TextFieldDefault,TextFieldDisabled:()=>TextFieldDisabled,TextFieldReset:()=>TextFieldReset,__namedExportsOrder:()=>__namedExportsOrder,default:()=>TextField_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),Loader=__webpack_require__("./src/Presentation/ui-components/Loader/Loader.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");let _excluded=["label","icon","loading","disabled","className","id","value","onChange"],TextField_TextField=(0,react.forwardRef)((_ref,ref)=>{let{label,icon,loading=!1,disabled=!1,className,id,value,onChange}=_ref,inputProps=(0,objectWithoutProperties.A)(_ref,_excluded),defaultId=(0,react.useId)();return(0,jsx_runtime.jsxs)("div",{className:classnames_default()("qb-text-field",{"qb-text-field--disabled":disabled},className),children:[label&&(0,jsx_runtime.jsx)("label",{htmlFor:id||defaultId,className:"qb-text-field__label",children:label}),(0,jsx_runtime.jsxs)("div",{className:"qb-text-field__wrapper",children:[icon&&(0,jsx_runtime.jsx)("span",{className:"qb-text-field__icon",children:icon}),(0,jsx_runtime.jsx)("input",(0,objectSpread2.A)((0,objectSpread2.A)({},inputProps),{},{ref:ref,disabled:loading||disabled,className:"qb-text-field__input",id:id||defaultId,value:value,onChange:e=>onChange(e.currentTarget.value)})),!loading&&value&&(0,jsx_runtime.jsx)(icons.$j,{className:"qb-text-field__reset",onClick:()=>onChange("")}),loading&&!disabled&&(0,jsx_runtime.jsx)(Loader.A,{size:"sm",className:"qb-text-field__loader"})]})]})});try{TextField_TextField.displayName="TextField",TextField_TextField.__docgenInfo={description:"",displayName:"TextField",props:{onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(value: string) => void"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"string"}},loading:{defaultValue:{value:"false"},description:"",name:"loading",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/TextField/TextField.tsx#TextField"]={docgenInfo:TextField_TextField.__docgenInfo,name:"TextField",path:"src/Presentation/ui-components/TextField/TextField.tsx#TextField"})}catch(__react_docgen_typescript_loader_error){}let TextField_stories={title:"@quickblox-react-ui-kit/Presentation/ui-components/TextField",component:TextField_TextField,tags:["autodocs"],parameters:{layout:"centered"},args:{label:"",disabled:!1,loading:!1,className:""},argTypes:{value:{table:{type:{summary:"function"}},description:"Value change function"},onChange:{table:{defaultValue:{summary:"''"},type:{summary:"string"}},description:"Text field label"},id:{table:{defaultValue:{summary:"''"},type:{summary:"string"}},description:"Custom id for text field"},label:{table:{defaultValue:{summary:"''"},type:{summary:"string"}},description:"Text field label"},icon:{control:!1,table:{type:{summary:"svg"}},description:"Format plug svg"},loading:{table:{defaultValue:{summary:!1}},description:"Displays the load"},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"Active"},className:{table:{type:{summary:"string"}},description:"Additional classes"}}},TextFieldDefault={name:"TextField Default"},TextFieldDisabled={name:"TextField Disabled",args:{disabled:!0,label:"Text Label",placeholder:"Placeholder"}},TextFieldReset={name:"TextField Reset",args:{label:"Text Label",placeholder:"Placeholder",value:"Text"}};TextFieldDefault.parameters={...TextFieldDefault.parameters,docs:{...TextFieldDefault.parameters?.docs,source:{originalSource:`{
+  name: 'TextField Default'
+}`,...TextFieldDefault.parameters?.docs?.source}}},TextFieldDisabled.parameters={...TextFieldDisabled.parameters,docs:{...TextFieldDisabled.parameters?.docs,source:{originalSource:`{
+  name: 'TextField Disabled',
+  args: {
+    disabled: true,
+    label: 'Text Label',
+    placeholder: 'Placeholder'
+  }
+}`,...TextFieldDisabled.parameters?.docs?.source}}},TextFieldReset.parameters={...TextFieldReset.parameters,docs:{...TextFieldReset.parameters?.docs,source:{originalSource:`{
+  name: 'TextField Reset',
+  args: {
+    label: 'Text Label',
+    placeholder: 'Placeholder',
+    value: 'Text'
+  }
+}`,...TextFieldReset.parameters?.docs?.source}}};let __namedExportsOrder=["TextFieldDefault","TextFieldDisabled","TextFieldReset"]},"./node_modules/classnames/index.js"(module,exports){var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=(function(){return classNames}).apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./src/Presentation/ui-components/Loader/Loader.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>Loader_Loader}),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function Loader_Loader(_ref){let{className,size="md"}=_ref;return(0,jsx_runtime.jsx)(icons.iO,{className:classnames_default()("qb-loader",size&&"qb-loader--".concat(size),className)})}try{Loader_Loader.displayName="Loader",Loader_Loader.__docgenInfo={description:"",displayName:"Loader",props:{size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'},{value:'"lg"'}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Loader/Loader.tsx#Loader"]={docgenInfo:Loader_Loader.__docgenInfo,name:"Loader",path:"src/Presentation/ui-components/Loader/Loader.tsx#Loader"})}catch(__react_docgen_typescript_loader_error){}},"./node_modules/react/cjs/react-jsx-runtime.production.min.js"(__unused_webpack_module,exports,__webpack_require__){"use strict";var f=__webpack_require__("./node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js"(module,__unused_webpack_exports,__webpack_require__){"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
+//# sourceMappingURL=Presentation-ui-components-TextField-TextField-stories.9c399477.iframe.bundle.js.map

package/storybook-static/Presentation-ui-components-TextField-TextField-stories.9c399477.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Presentation-ui-components-TextField-TextField-stories.9c399477.iframe.bundle.js","mappings":";AAuHA;AAAA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://quickblox-react-ui-kit/"],"names":[],"sourceRoot":""}

package/storybook-static/Presentation-ui-components-Toast-Toast-stories.f549fece.iframe.bundle.js

@@ -0,0 +1,4 @@
+"use strict";(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[47],{"./src/Presentation/ui-components/Toast/Toast.stories.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ToastDefault:()=>ToastDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Toast_stories});var react_toastify_esm=__webpack_require__("./node_modules/react-toastify/dist/react-toastify.esm.mjs"),react=__webpack_require__("./node_modules/react/index.js");__webpack_require__("./node_modules/react-toastify/dist/ReactToastify.css");var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");let ToastContext=(0,react.createContext)(void 0);function ToastProvider(_ref){let{children}=_ref;return(0,jsx_runtime.jsxs)(ToastContext.Provider,{value:void 0,children:[(0,jsx_runtime.jsx)(react_toastify_esm.N9,{className:"qb-container",position:"top-center",autoClose:3e3,bodyClassName:"qb-toast__body",toastClassName:"qb-toast",pauseOnHover:!1,closeButton:!1,hideProgressBar:!0}),children]})}try{ToastProvider.displayName="ToastProvider",ToastProvider.__docgenInfo={description:"",displayName:"ToastProvider",props:{}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Toast/ToastProvider.tsx#ToastProvider"]={docgenInfo:ToastProvider.__docgenInfo,name:"ToastProvider",path:"src/Presentation/ui-components/Toast/ToastProvider.tsx#ToastProvider"})}catch(__react_docgen_typescript_loader_error){}var Button=__webpack_require__("./src/Presentation/ui-components/Button/Button.tsx");let Toast_stories={title:"@quickblox-react-ui-kit/Presentation/ui-components/Toast",component:ToastProvider,tags:["autodocs"],parameters:{layout:"centered"},args:{children:void 0},argTypes:{children:{table:{defaultValue:{summary:"ReactNode"},type:{summary:"ReactNode"}},description:"Children"}}};function ToastExample(){return(0,jsx_runtime.jsx)(ToastProvider,{children:(0,jsx_runtime.jsx)(Button.A,{onClick:()=>{(0,react_toastify_esm.oR)("Toast message",{position:"top-center",autoClose:5e3})},children:"Children"})})}let ToastDefault={render:()=>(0,jsx_runtime.jsx)(ToastExample,{})};ToastDefault.parameters={...ToastDefault.parameters,docs:{...ToastDefault.parameters?.docs,source:{originalSource:`{
+  render: () => <ToastExample />
+}`,...ToastDefault.parameters?.docs?.source}}};let __namedExportsOrder=["ToastDefault"]},"./src/Presentation/ui-components/Button/Button.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{A:()=>Button_Button});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),Loader=__webpack_require__("./src/Presentation/ui-components/Loader/Loader.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");let _excluded=["variant","className","disabled","loading","children"];function Button_Button(_ref){let{variant="default",className,disabled=!1,loading=!1,children}=_ref,rest=(0,objectWithoutProperties.A)(_ref,_excluded);return(0,jsx_runtime.jsx)("button",(0,objectSpread2.A)((0,objectSpread2.A)({className:classnames_default()("qb-button","qb-button--".concat(variant),{"qb-button--disabled":disabled},className),disabled:disabled||loading},rest),{},{children:loading&&!disabled?(0,jsx_runtime.jsx)(Loader.A,{className:classnames_default()("qb-button__loader","qb-button__loader--".concat(variant))}):children}))}try{Button_Button.displayName="Button",Button_Button.__docgenInfo={description:"",displayName:"Button",props:{variant:{defaultValue:{value:"default"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"text"'},{value:'"default"'},{value:'"outlined"'},{value:'"danger"'}]}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},loading:{defaultValue:{value:"false"},description:"",name:"loading",required:!1,type:{name:"boolean"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Button/Button.tsx#Button"]={docgenInfo:Button_Button.__docgenInfo,name:"Button",path:"src/Presentation/ui-components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/Presentation/ui-components/Loader/Loader.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{A:()=>Loader_Loader}),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function Loader_Loader(_ref){let{className,size="md"}=_ref;return(0,jsx_runtime.jsx)(icons.iO,{className:classnames_default()("qb-loader",size&&"qb-loader--".concat(size),className)})}try{Loader_Loader.displayName="Loader",Loader_Loader.__docgenInfo={description:"",displayName:"Loader",props:{size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'},{value:'"lg"'}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Loader/Loader.tsx#Loader"]={docgenInfo:Loader_Loader.__docgenInfo,name:"Loader",path:"src/Presentation/ui-components/Loader/Loader.tsx#Loader"})}catch(__react_docgen_typescript_loader_error){}}}]);
+//# sourceMappingURL=Presentation-ui-components-Toast-Toast-stories.f549fece.iframe.bundle.js.map

package/storybook-static/Presentation-ui-components-Toast-Toast-stories.f549fece.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Presentation-ui-components-Toast-Toast-stories.f549fece.iframe.bundle.js","mappings":";AAmDA;AAAA","sources":["webpack://quickblox-react-ui-kit/"],"names":[],"sourceRoot":""}

package/storybook-static/Presentation-ui-components-UserListItem-UserListItem-stories.a7e81376.iframe.bundle.js

@@ -0,0 +1,10 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[585],{"./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";function _typeof(o){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o})(o)}function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function toPropertyKey(t){var i=toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(e,r,t){return(r=toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread2(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}__webpack_require__.d(__webpack_exports__,{A:()=>_objectSpread2})},"./src/Presentation/ui-components/UserListItem/UserListItem.stories.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{UserList:()=>UserList,UserListItemDefault:()=>UserListItemDefault,__namedExportsOrder:()=>__namedExportsOrder,default:()=>UserListItem_stories});var objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("./node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),Avatar=__webpack_require__("./src/Presentation/ui-components/Avatar/Avatar.tsx"),CheckBox=__webpack_require__("./src/Presentation/ui-components/CheckBox/CheckBox.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function UserListItem_UserListItem_UserListItem(_ref){let{avatarUrl,userName,checked=!1,disabled=!1,onChange,className}=_ref;return(0,jsx_runtime.jsxs)("div",{className:classnames_default()("user-list-item",{"user-list-item--disabled":disabled},className),children:[(0,jsx_runtime.jsxs)("div",{className:"user-list-item__avatar",children:[(0,jsx_runtime.jsx)(Avatar.A,{src:avatarUrl}),(0,jsx_runtime.jsx)("span",{className:"user-list-item__name",children:userName})]}),onChange&&(0,jsx_runtime.jsx)(CheckBox.A,{onChange:onChange,disabled:disabled,checked:checked})]})}try{UserListItem_UserListItem_UserListItem.displayName="UserListItem",UserListItem_UserListItem_UserListItem.__docgenInfo={description:"",displayName:"UserListItem",props:{userName:{defaultValue:null,description:"",name:"userName",required:!0,type:{name:"string"}},avatarUrl:{defaultValue:null,description:"",name:"avatarUrl",required:!1,type:{name:"string"}},checked:{defaultValue:{value:"false"},description:"",name:"checked",required:!1,type:{name:"boolean"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((checked: boolean) => void)"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/UserListItem/UserListItem.tsx#UserListItem"]={docgenInfo:UserListItem_UserListItem_UserListItem.__docgenInfo,name:"UserListItem",path:"src/Presentation/ui-components/UserListItem/UserListItem.tsx#UserListItem"})}catch(__react_docgen_typescript_loader_error){}var icons=__webpack_require__("./src/Presentation/icons/index.ts");function LoaderComponent_LoaderComponent(){let theme=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,loaderStyles=theme?{animation:"spin 1s linear infinite",svg:{path:{fill:null!=theme&&theme.color?null==theme?void 0:theme.color:""}},minWidth:null==theme?void 0:theme.width,minHeight:null==theme?void 0:theme.height,Loader:{fill:null!=theme&&theme.color?null==theme?void 0:theme.color:""},fill:null!=theme&&theme.color?null==theme?void 0:theme.color:""}:{},loaderClasses=[theme&&Object.keys(theme).length>0?"":"qb-loader"].join(" ");return(0,jsx_runtime.jsx)("div",{style:loaderStyles,className:loaderClasses,children:(0,jsx_runtime.jsx)(icons.iO,{className:"qb-loader"})})}try{LoaderComponent_LoaderComponent.displayName="LoaderComponent",LoaderComponent_LoaderComponent.__docgenInfo={description:"",displayName:"LoaderComponent",props:{color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"string"}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:"string"}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:"string"}},applyZoom:{defaultValue:null,description:"",name:"applyZoom",required:!1,type:{name:"boolean"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.tsx#LoaderComponent"]={docgenInfo:LoaderComponent_LoaderComponent.__docgenInfo,name:"LoaderComponent",path:"src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.tsx#LoaderComponent"})}catch(__react_docgen_typescript_loader_error){}function ScrollableContainer_ScrollableContainer(props){let{className,rootStyles,mainContainerStyles,data,ListEmptyComponent,onEndReached,onEndReachedThreshold,refreshing,autoScrollToBottom,renderItem}=props,container=(0,react.useRef)(null),messageEndRef=(0,react.useRef)(null),scrollToBottom=()=>{var _messageEndRef$curren;console.log("call scrollToBottom start"),autoScrollToBottom&&(null==(_messageEndRef$curren=messageEndRef.current)||_messageEndRef$curren.scrollIntoView({behavior:"smooth"}))};return(0,react.useEffect)(()=>{console.log("useEffect []"),autoScrollToBottom&&scrollToBottom()},[]),(0,react.useEffect)(()=>{console.log("useEffect messages"),autoScrollToBottom&&scrollToBottom()},[data.length]),console.log("çount items to scroll:",data.length),console.log("data to scrolling: ",JSON.stringify(data)),(0,jsx_runtime.jsxs)("div",{style:rootStyles,className:classnames_default()("list",className),children:[refreshing&&(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(LoaderComponent_LoaderComponent,{width:"44",height:"44",color:"var(--color-background-info)"})}),data&&data.length?(0,jsx_runtime.jsxs)("div",{style:mainContainerStyles,className:"list-content",onScroll:()=>{if(console.log("call scrollHandler"),container.current){let{scrollHeight,clientHeight,scrollTop}=container.current,scrollOffset=(scrollTop+clientHeight)/scrollHeight,endReached=!1;"number"==typeof onEndReachedThreshold?scrollOffset>=onEndReachedThreshold&&(endReached=!0):scrollOffset>=.99&&(endReached=!0),endReached&&onEndReached&&onEndReached()}},ref:container,children:[data.map((it,index)=>renderItem(it,index)),(0,jsx_runtime.jsx)("div",{style:{float:"left",clear:"both"},ref:messageEndRef})]}):!refreshing&&ListEmptyComponent&&(0,jsx_runtime.jsx)(ListEmptyComponent,{})]})}try{ScrollableContainer_ScrollableContainer.displayName="ScrollableContainer",ScrollableContainer_ScrollableContainer.__docgenInfo={description:"",displayName:"ScrollableContainer",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},rootStyles:{defaultValue:null,description:"",name:"rootStyles",required:!1,type:{name:"CSSProperties"}},mainContainerStyles:{defaultValue:null,description:"",name:"mainContainerStyles",required:!1,type:{name:"CSSProperties"}},data:{defaultValue:null,description:"",name:"data",required:!0,type:{name:"T[]"}},ListEmptyComponent:{defaultValue:null,description:"",name:"ListEmptyComponent",required:!1,type:{name:"ComponentClass<{}, any> | FunctionComponent<{}>"}},onEndReached:{defaultValue:null,description:"",name:"onEndReached",required:!1,type:{name:"VoidFunction"}},onEndReachedThreshold:{defaultValue:null,description:"",name:"onEndReachedThreshold",required:!1,type:{name:"number"}},refreshing:{defaultValue:null,description:"",name:"refreshing",required:!1,type:{name:"boolean"}},autoScrollToBottom:{defaultValue:null,description:"",name:"autoScrollToBottom",required:!1,type:{name:"boolean"}},renderItem:{defaultValue:null,description:"",name:"renderItem",required:!0,type:{name:"(item: T, index: number) => ReactElement<any, string | JSXElementConstructor<any>> | null"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.tsx#ScrollableContainer"]={docgenInfo:ScrollableContainer_ScrollableContainer.__docgenInfo,name:"ScrollableContainer",path:"src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.tsx#ScrollableContainer"})}catch(__react_docgen_typescript_loader_error){}let UserListItem_stories={title:"@quickblox-react-ui-kit/Presentation/ui-components/UserListItem",component:UserListItem_UserListItem_UserListItem,tags:["autodocs"],parameters:{layout:"centered"},args:{className:"",disabled:!1,checked:!1,userName:"",avatarUrl:""},argTypes:{avatarUrl:{table:{type:{summary:"url"}},description:"Avatar image source"},userName:{table:{type:{summary:"string"},defaultValue:{summary:""}},description:"User name"},disabled:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"Active"},checked:{table:{type:{summary:"boolean"},defaultValue:{summary:!1}},description:"Checkbox"},onChange:{table:{defaultValue:{summary:"(checked: boolean) => void"},type:{summary:"function"}},description:"Checkbox control"},className:{table:{defaultValue:{summary:"string"},type:{summary:"string"}},description:"Additional classes"}}};function UserListExample(){let[users,setUser]=(0,react.useState)([{name:"User 1",id:0,checked:!0},{name:"User 2",id:1,checked:!1},{name:"User 3",id:2,checked:!1},{name:"User 4",id:3,checked:!0},{name:"User 5",id:4,checked:!0}]);return(0,jsx_runtime.jsx)(ScrollableContainer_ScrollableContainer,{data:users,renderItem:user=>(0,jsx_runtime.jsx)(UserListItem_UserListItem_UserListItem,{userName:user.name,checked:user.checked,onChange:value=>{setUser(prevUsers=>prevUsers.map(prevUser=>prevUser.id===user.id?(0,objectSpread2.A)((0,objectSpread2.A)({},prevUser),{},{checked:value}):prevUser))}}),onEndReachedThreshold:.8,refreshing:!1})}let UserListItemDefault={name:"UserListItem Default",args:{userName:"User name"}},UserList={name:"UserListItem Multiple",render:()=>(0,jsx_runtime.jsx)(UserListExample,{})};UserListItemDefault.parameters={...UserListItemDefault.parameters,docs:{...UserListItemDefault.parameters?.docs,source:{originalSource:`{
+  name: 'UserListItem Default',
+  args: {
+    userName: 'User name'
+  }
+}`,...UserListItemDefault.parameters?.docs?.source}}},UserList.parameters={...UserList.parameters,docs:{...UserList.parameters?.docs,source:{originalSource:`{
+  name: 'UserListItem Multiple',
+  render: () => <UserListExample />
+}`,...UserList.parameters?.docs?.source}}};let __namedExportsOrder=["UserListItemDefault","UserList"];try{UserListItem.displayName="UserListItem",UserListItem.__docgenInfo={description:"",displayName:"UserListItem",props:{userName:{defaultValue:null,description:"",name:"userName",required:!0,type:{name:"string"}},avatarUrl:{defaultValue:null,description:"",name:"avatarUrl",required:!1,type:{name:"string"}},checked:{defaultValue:{value:"false"},description:"",name:"checked",required:!1,type:{name:"boolean"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((checked: boolean) => void)"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/UserListItem/UserListItem.stories.tsx#UserListItem"]={docgenInfo:UserListItem.__docgenInfo,name:"UserListItem",path:"src/Presentation/ui-components/UserListItem/UserListItem.stories.tsx#UserListItem"})}catch(__react_docgen_typescript_loader_error){}},"./node_modules/classnames/index.js"(module,exports){var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=(function(){return classNames}).apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./src/Presentation/ui-components/Avatar/Avatar.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>Avatar_Avatar}),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function Avatar_Avatar(_ref){let{icon=(0,jsx_runtime.jsx)(icons.Uh,{}),size="md",className,src}=_ref;return src?(0,jsx_runtime.jsx)("div",{className:classnames_default()("qb-avatar","qb-avatar--".concat(size),className),children:(0,jsx_runtime.jsx)("img",{src:src,className:"qb-avatar__image",alt:"Avatar"})}):(0,jsx_runtime.jsx)("div",{className:classnames_default()("qb-avatar","qb-avatar--".concat(size),className),children:icon})}try{Avatar_Avatar.displayName="Avatar",Avatar_Avatar.__docgenInfo={description:"",displayName:"Avatar",props:{size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'}]}},icon:{defaultValue:{value:"<UserSvg />"},description:"",name:"icon",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/Avatar/Avatar.tsx#Avatar"]={docgenInfo:Avatar_Avatar.__docgenInfo,name:"Avatar",path:"src/Presentation/ui-components/Avatar/Avatar.tsx#Avatar"})}catch(__react_docgen_typescript_loader_error){}},"./src/Presentation/ui-components/CheckBox/CheckBox.tsx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>CheckBox_CheckBox}),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),icons=__webpack_require__("./src/Presentation/icons/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function CheckBox_CheckBox(_ref){let{disabled,checked,onChange}=_ref;return(0,jsx_runtime.jsxs)("label",{className:classnames_default()("checkbox-field",{disabled}),children:[checked?(0,jsx_runtime.jsx)(icons.uM,{className:"icon-checkmark"}):(0,jsx_runtime.jsx)(icons.av,{className:"icon-check"}),(0,jsx_runtime.jsx)("input",{type:"checkbox",onChange:()=>null==onChange?void 0:onChange(!checked),disabled:disabled})]})}try{CheckBox_CheckBox.displayName="CheckBox",CheckBox_CheckBox.__docgenInfo={description:"",displayName:"CheckBox",props:{disabled:{defaultValue:null,description:"",name:"disabled",required:!0,type:{name:"boolean"}},checked:{defaultValue:null,description:"",name:"checked",required:!0,type:{name:"boolean"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((isSelected: boolean) => void)"}}}},"u">typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/Presentation/ui-components/CheckBox/CheckBox.tsx#CheckBox"]={docgenInfo:CheckBox_CheckBox.__docgenInfo,name:"CheckBox",path:"src/Presentation/ui-components/CheckBox/CheckBox.tsx#CheckBox"})}catch(__react_docgen_typescript_loader_error){}},"./node_modules/react/cjs/react-jsx-runtime.production.min.js"(__unused_webpack_module,exports,__webpack_require__){"use strict";var f=__webpack_require__("./node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js"(module,__unused_webpack_exports,__webpack_require__){"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
+//# sourceMappingURL=Presentation-ui-components-UserListItem-UserListItem-stories.a7e81376.iframe.bundle.js.map

package/storybook-static/Presentation-ui-components-UserListItem-UserListItem-stories.a7e81376.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Presentation-ui-components-UserListItem-UserListItem-stories.a7e81376.iframe.bundle.js","mappings":";AA6IA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA","sources":["webpack://quickblox-react-ui-kit/"],"names":[],"sourceRoot":""}

package/storybook-static/docs-Introduction-mdx.6e03f9b5.iframe.bundle.js

@@ -0,0 +1,334 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[485],{"./node_modules/@mdx-js/react/lib/index.js"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,{RP:()=>useMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");let MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function useMDXComponents(components){let contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo(()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components},[contextComponents,components])}let emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./src/docs/Introduction.mdx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__}),__webpack_require__("./node_modules/react/index.js");var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_Users_artemkoltunov_Desktop_01_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");function _createMdxContent(props){let _components=Object.assign({h1:"h1",a:"a",p:"p",h3:"h3",pre:"pre",code:"code",h4:"h4",blockquote:"blockquote",strong:"strong",ul:"ul",li:"li",ol:"ol"},(0,_Users_artemkoltunov_Desktop_01_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_2__.RP)(),props.components);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_3__.W8,{title:"📕 Documentation/Introduction"}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h1,{id:"introduction",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#importing-dependencies-in-the-project",target:"_blank",rel:"nofollow noopener noreferrer",children:"Introduction"})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"The QuickBlox UIKit for React comprises a collection of pre-assembled UI components that enable effortless creation of an in-app chat equipped with all the necessary messaging functionalities. Our development kit encompasses light and dark themes, colors, and various other features. These components can be personalized to fashion an engaging messaging interface that reflects your brand's distinct identity."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"The QuickBlox UIKit fully supports both private and group dialogs. To initiate the process of sending a message from the ground up using Java or Kotlin, please refer to the instructions provided in the guide below."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"installation",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step2-adding-dependencies-to-a-react-project",target:"_blank",rel:"nofollow noopener noreferrer",children:"Installation"})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"To successfully integrate QuickBlox functionality into your React project, you need to add two main dependencies: quickblox and quickblox-react-ui-kit. By following the documentation, you can easily add these packages to your project."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:`npm install quickblox --save
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:`npm install quickblox-react-ui-kit --save
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h4,{id:"importing-dependencies-in-the-project",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#importing-dependencies-in-the-project",target:"_blank",rel:"nofollow noopener noreferrer",children:"Importing Dependencies in the Project"})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`Open the file where you want to use QuickBlox functionality, such as App.tsx
+Add the following lines at the beginning of the file to import the dependencies:`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.blockquote,{children:[`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.strong,{children:"Note: We are using // @ts-ignor in TypeScript because QuickBlox SDK doesn't share types."})}),`
+`]}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`// @ts-ignore
+import * as QB from 'quickblox/quickblox';
+import 'quickblox-react-ui-kit';
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"adding-qbconfigts-file-to-your-react-application",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step-3-adding-qbconfigts-file-to-your-react-application",target:"_blank",rel:"nofollow noopener noreferrer",children:"Adding QBconfig.ts File to Your React Application"})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`To ensure proper configuration and functionality of the QuickBlox UIKit in your React application, it is essential to add a QBconfig.ts file to the src folder. This file allows you to define the necessary parameters for the QuickBlox UIKit.
+The QBconfig.ts file contains various configuration settings that determine how the QuickBlox UIKit interacts with the QuickBlox JavaScript SDK and the backend services. These settings include:`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`appId: This parameter represents the unique identifier assigned to your QuickBlox application. It helps establish a connection between the frontend and backend components.
+authKey and authSecret: These parameters are used for authentication purposes. They ensure secure communication between your application and the QuickBlox backend.
+accountKey: This parameter identifies your QuickBlox account and provides access to the associated services.
+apiEndpoint and chatEndpoint: These parameters define the API and chat endpoints provided by QuickBlox. They specify the URLs to which the QuickBlox UIKit will send requests for various functionalities.`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`export const QBConfig = {
+  credentials: {
+    appId: YOUR_APP_ID_FROM_ADMIN_PANEL,
+    accountKey: 'YOUR_ACCOUNT_KEY_FROM_ADMIN_PANEL',
+    authKey: 'YOUR_AUTH_KEY_FROM_ADMIN_PANEL',
+    authSecret: 'YOUR_AUTH_SECRET_FROM_ADMIN_PANEL',
+    sessionToken: '',
+  },
+  appConfig: {
+    chatProtocol: {
+      Active: 2,
+    },
+    debug: false,
+    endpoints: {
+      apiEndpoint: 'https://api.quickblox.com',
+      chatEndpoint: 'chat.quickblox.com',
+    },
+    on: {
+      async sessionExpired(handleResponse: any, retry: any) {
+        console.log(\`Test sessionExpired… \${handleResponse} \${retry}\`);
+      },
+    },
+    streamManagement: {
+      Enable: true,
+    },
+  },
+};
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`In this example, make sure to replace the placeholder values (YOUR_APP_ID_FROM_ADMIN_PANEL, YOUR_ACCOUNT_KEY_FROM_ADMIN_PANEL, YOUR_AUTH_KEY_FROM_ADMIN_PANEL, YOUR_AUTH_SECRET_FROM_ADMIN_PANEL) with the actual values obtained from your QuickBlox application.
+By adding the QBconfig.ts file to your React application, you ensure that the QuickBlox UIKit is properly configured and can interact seamlessly with the QuickBlox backend services.`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.blockquote,{children:[`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.strong,{children:"Note: If you initialize your SDK using a session token, you need to not only fill the sessionToken field in QBConfig but also fill other properties in the same way as when using the initWithAppId method. See the link initialize QuickBlox SDK without Authorization Key and Secret."})}),`
+`]}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Now we can add dependecies in our code. (Open your App.tsx and add that lines.)"}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`import * as QB from 'quickblox/quickblox';
+import 'quickblox-react-ui-kit';
+import { QBConfig } from './QBconfig'; // this line is new
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"updating-the-project-structure-according-to-your-needs",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step-4-updating-the-project-structure-according-to-your-needs",target:"_blank",rel:"nofollow noopener noreferrer",children:"Updating the project structure according to your needs"})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`In order to enhance the organization and maintainability of your project, it is recommended to make changes to the structure of the App.tsx in the src folder.
+You need to add a constant called "currentUser" inside the App() function in the App.tsx file, which describes your user registered in the admin panel, and configure the QuickBloxUIKitProvider. Additionally, import the necessary entities from quickblox-react-ui-kit.
+As a result, you should have the code like code below:`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`import React from 'react';
+import type { QBSession, QBUser } from 'quickblox/quickblox';
+import {
+  QuickBloxUIKitProvider,
+  QuickBloxUIKitDesktopLayout,
+} from 'quickblox-react-ui-kit';
+import { QBConfig } from '../../configs/QBconfig';
+import Header from '../../components/Header';
+import SettingModal from '../../components/modals/SettingModal';
+import LogoutModal from '../../components/modals/LogoutModal';
+
+interface AppProps {
+  session: QBSession;
+  logout: VoidFunction;
+}
+
+const App = (props: AppProps) => {
+  const { session, logout } = props;
+  const [user, setUser] = useState<QBUser | null>(null);
+
+  return (
+    <QuickBloxUIKitProvider
+      maxFileSize={100 * 1000000}
+      accountData={{ ...QBConfig.credentials, sessionToken: session.token }}
+      qbConfig={{ ...QBConfig }}
+    >
+      <Header
+        avatarUrl={avatarUrl}
+        options={options}
+        handleChange={handleChange}
+        user={user}
+        regex={regex}
+      />
+      <QuickBloxUIKitDesktopLayout uikitHeightOffset={'40px'} />
+      <SettingModal
+        user={user}
+        avatarUrl={avatarUrl}
+        selectedValue={selectedValue}
+        setSelectedValue={setSelectedValue}
+        regex={regex}
+        setUser={setUser}
+      />
+      <LogoutModal
+        selectedValue={selectedValue}
+        setSelectedValue={setSelectedValue}
+        handleLogout={logout}
+      />
+    </QuickBloxUIKitProvider>
+  );
+};
+
+export default App;
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"QuickBloxUIKitProvider can accept up to three parameters:"}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ul,{children:[`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"maxFileSize - controls the maximum size of uploaded files."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"accountData - information about the application's account data."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"loginData - information about the logged-in user."}),`
+`]}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Let's add the QuickBlox UIKit chat layer - QuickBloxUIKitDesktopLayout - to the markup of the main component of the application."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`If we do not specify a sessionToken in accountData, it means that the login and session start process occurs within our application. In this case, it is necessary to perform the following fifth step in our instruction.
+However, if the session start and application login process is already performed in another application, such as on a server, and we already have a ready sessionToken, then we can skip the next step.`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"configure-quickbloxuikitprovider",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://docs.quickblox.com/docs/react-uikit-send-your-first-message#step-5-configure-quickbloxuikitprovider",target:"_blank",rel:"nofollow noopener noreferrer",children:"Configure QuickBloxUIKitProvider"})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:`To configure QuickBloxUIKitProvider and use QuickBloxUIKit in your application, follow these steps:
+Initialize DataContext:`}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ol,{children:[`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"To work with QuickBlox, it is necessary to initialize the UI Kit react DataContext. It contains important data and settings for using QuickBloxSDK. The DataContext connects various components of the application and provides them access to shared data."}),`
+`]}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`const qbUIKitContext: QBDataContextType = React.useContext(qbDataContext);
+
+const [isUserAuthorized, setUserAuthorized] = React.useState(false);
+const [isSDKInitialized, setSDKInitialized] = React.useState(false);
+
+const prepareSDK = async (): Promise<void> => {
+  // check if we have installed SDK
+  if ((window as any).QB === undefined) {
+    if (QB !== undefined) {
+      (window as any).QB = QB;
+    } else {
+      let QBLib = require('quickblox/quickblox.min');
+      (window as any).QB = QBLib;
+    }
+  }
+
+  const APPLICATION_ID = QBConfig.credentials.appId;
+  const AUTH_KEY = QBConfig.credentials.authKey;
+  const AUTH_SECRET = QBConfig.credentials.authSecret;
+  const ACCOUNT_KEY = QBConfig.credentials.accountKey;
+  const CONFIG = QBConfig.appConfig;
+
+  QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
+};
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.ol,{start:"2",children:[`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.li,{children:"We need to add user authentication, so to do this, we will introduce two states and use the useEffect hook:"}),`
+`]}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`const [authorized, setAuthorized] = React.useState(false);
+const [initedSDK, setInitedSDK] = React.useState(false);
+
+......
+
+ useEffect(() => {
+    if (!isSDKInitialized) {
+      prepareSDK().then(result => {
+
+        QB.createSession(currentUser, async function (errorCreateSession: any, session: any) {
+          if (errorCreateSession) {
+            console.log('Create User Session has error:', JSON.stringify(errorCreateSession));
+          } else {
+            const userId: number = session.user_id;
+            const password: string = session.token;
+            const paramsConnect = { userId, password };
+
+            QB.chat.connect(paramsConnect, async function (errorConnect: any, resultConnect: any) {
+              if (errorConnect) {
+                console.log('Can not connect to chat server: ', errorConnect);
+              } else {
+                const authData: AuthorizationData = {
+                  userId: userId,
+                  password: password,
+                  userName: currentUser.login,
+                  sessionToken: session.token
+                };
+                await qbUIKitContext.authorize(authData);
+                setSDKInitialized(true);
+                setUserAuthorized(true);
+              }
+            });
+          }
+        });
+      }).catch(
+          e => {
+            console.log('init SDK has error: ', e)
+          });
+    }
+  }, []);
+
+  ......
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"After implementing all the steps, your App.tsx file should look like this. You can compare it this your code or copy it instead of."}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:`import React, { useEffect } from 'react';
+
+// @ts-ignore
+import * as QB from 'quickblox/quickblox';
+import {
+  QuickBloxUIKitProvider,
+  qbDataContext,
+  QuickBloxUIKitDesktopLayout,
+  LoginData,
+  AuthorizationData,
+  QBDataContextType,
+} from 'quickblox-react-ui-kit';
+import { QBConfig } from './QBconfig';
+import './App.css';
+
+function App() {
+  const currentUser: LoginData = {
+    login: '',
+    password: '',
+  };
+
+  const qbUIKitContext: QBDataContextType = React.useContext(qbDataContext);
+
+  const [isUserAuthorized, setUserAuthorized] = React.useState(false);
+  const [isSDKInitialized, setSDKInitialized] = React.useState(false);
+
+  const prepareSDK = async (): Promise<void> => {
+    // check if we have installed SDK
+    if ((window as any).QB === undefined) {
+      if (QB !== undefined) {
+        (window as any).QB = QB;
+      } else {
+        let QBLib = require('quickblox/quickblox.min');
+        (window as any).QB = QBLib;
+      }
+    }
+
+    const APPLICATION_ID = QBConfig.credentials.appId;
+    const AUTH_KEY = QBConfig.credentials.authKey;
+    const AUTH_SECRET = QBConfig.credentials.authSecret;
+    const ACCOUNT_KEY = QBConfig.credentials.accountKey;
+    const CONFIG = QBConfig.appConfig;
+
+    QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
+  };
+
+  useEffect(() => {
+    if (!isSDKInitialized) {
+      prepareSDK()
+        .then((result) => {
+          QB.createSession(
+            currentUser,
+            async function (errorCreateSession: any, session: any) {
+              if (errorCreateSession) {
+                console.log(
+                  'Create User Session has error:',
+                  JSON.stringify(errorCreateSession),
+                );
+              } else {
+                const userId: number = session.user_id;
+                const password: string = session.token;
+                const paramsConnect = { userId, password };
+
+                QB.chat.connect(
+                  paramsConnect,
+                  async function (errorConnect: any, resultConnect: any) {
+                    if (errorConnect) {
+                      console.log(
+                        'Can not connect to chat server: ',
+                        errorConnect,
+                      );
+                    } else {
+                      const authData: AuthorizationData = {
+                        userId: userId,
+                        password: password,
+                        userName: currentUser.login,
+                        sessionToken: session.token,
+                      };
+                      await qbUIKitContext.authorize(authData);
+                      setSDKInitialized(true);
+                      setUserAuthorized(true);
+                    }
+                  },
+                );
+              }
+            },
+          );
+        })
+        .catch((e) => {
+          console.log('init SDK has error: ', e);
+        });
+    }
+  }, []);
+
+  return (
+    <div>
+      <QuickBloxUIKitProvider
+        maxFileSize={100 * 1000000}
+        accountData={{ ...QBConfig.credentials }}
+        loginData={{
+          login: currentUser.login,
+          password: currentUser.password,
+        }}
+      >
+        <div className="App">
+          {
+            // React states indicating the ability to render UI
+            isSDKInitialized && isUserAuthorized ? (
+              <QuickBloxUIKitDesktopLayout />
+            ) : (
+              <div>wait while SDK is initializing...</div>
+            )
+          }
+        </div>
+      </QuickBloxUIKitProvider>
+    </div>
+  );
+}
+
+export default App;
+`})}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"You should run the application using the command:"}),`
+`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:`npm start
+`})})]})}let __WEBPACK_DEFAULT_EXPORT__=function MDXContent(props={}){let{wrapper:MDXLayout}=Object.assign({},(0,_Users_artemkoltunov_Desktop_01_react_ui_kit_private_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_2__.RP)(),props.components);return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(MDXLayout,Object.assign({},props,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_createMdxContent,props)})):_createMdxContent(props)}},"./node_modules/memoizerific sync recursive"(module){function webpackEmptyContext(req){var e=Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"./node_modules/react/cjs/react-jsx-runtime.production.min.js"(__unused_webpack_module,exports,__webpack_require__){"use strict";var f=__webpack_require__("./node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js"(module,__unused_webpack_exports,__webpack_require__){"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
+//# sourceMappingURL=docs-Introduction-mdx.6e03f9b5.iframe.bundle.js.map