quickblox-react-ui-kit 0.5.0-beta.1 → 0.5.0-beta.2

package/src/Presentation/ui-components/Button/Button.scss

@@ -15,9 +15,8 @@
   order: 1;
   flex-grow: 0;
 
-  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.4px;
@@ -28,7 +27,7 @@
   @include applyBorderBox;
 
   &--default {
-    color: var(--secondary-background);
+    color: var(--system);
     background-color: var(--main-elements);
 
     &:hover {
@@ -53,8 +52,8 @@
 
   &--outlined {
     background-color: inherit;
-    border: 1px solid var(--main-elements);
-    color: var(--main-elements);
+    border: 1px solid var(--main-text);
+    color: var(--main-text);
 
     &:hover {
       background-color: var(--outgoing-background);

package/src/Presentation/ui-components/CheckBox/CheckBox.scss

@@ -1,4 +1,4 @@
-.checkbox {
+.checkbox, .checkbox-field {
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -8,3 +8,31 @@
   width: 18px;
   height: 18px;
 }
+
+.checkbox-field > input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.checkbox-field .icon-checkmark {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  fill: var(--main-elements);
+
+}
+
+.checkbox-field .icon-check {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  fill: var(--secondary-elements);
+}
+
+.checkbox-field.disabled .icon-check{
+  fill: var(--disabled-elements);
+  cursor: not-allowed;
+}
+
+

package/src/Presentation/ui-components/CheckBox/CheckBox.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import './CheckBox.scss';
+import cn from 'classnames';
+import { CheckOffSvg, CheckOnSvg } from '../../icons';
 
 interface CheckBoxProps {
   disabled: boolean;
@@ -13,12 +15,11 @@ export default function CheckBox({
   onChange,
 }: CheckBoxProps) {
   return (
-    <input
-      className="checkbox"
-      type="checkbox"
-      checked={checked}
-      disabled={disabled}
-      onChange={() => onChange?.(!checked)}
-    />
+    <label className={cn('checkbox-field', {
+      'disabled': disabled
+    })}>
+      {checked ? <CheckOnSvg className="icon-checkmark" /> : <CheckOffSvg className="icon-check" />}
+      <input type="checkbox" onChange={() => onChange?.(!checked)} disabled={disabled}  />
+    </label>
   );
 }

package/src/Presentation/ui-components/DialogWindow/DialogWindow.scss

@@ -7,9 +7,9 @@
   height: 100%;
   z-index: 100;
   position: fixed;
-  background-color: rgba(19, 29, 40, 0.8);
+  background-color: var(--color-background-modal);
 
-  @include applyBorderBox; // Теперь после всех CSS-свойств
+  @include applyBorderBox;
 
   &--disable {
     position: absolute;
@@ -44,12 +44,16 @@
   &__header {
     margin-bottom: 28px;
     padding: 0px !important;
+
+    svg {
+      fill: var(--main-text);
+    }
   }
 
   &__close {
     width: 24px;
     height: 24px;
-    fill: var(--secondary-elements);
+    fill: var(--main-text);
     cursor: pointer;
   }
 }

package/src/Presentation/ui-components/DialogWindow/DialogWindow.stories.tsx

@@ -62,6 +62,14 @@ const meta: Meta<typeof DialogWindow> = {
       },
       description: 'closes the modal window',
     },
+    disableActions: {
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+        type: { summary: 'boolean' },
+      },
+    }
   },
 };
 

package/src/Presentation/ui-components/Header/Header.scss

@@ -18,11 +18,13 @@
     svg {
       width: 24px;
       height: 24px;
+      fill: var(--main-elements);
     }
   }
 
   &__back {
-    color: var(--main-elements);
+    color: var(--main-text);
+    fill: var(--main-text);
   }
 
   &__body {

package/src/Presentation/ui-components/Message/Bubble/TextBubble/TextBubble.scss

@@ -3,7 +3,7 @@
   max-width: calc(var(--max-width-message-bubble) - 20px);
   padding: 0 12px 0 12px;
 
-  color: var(--main-tex, #0b1b0f);
+  color: var(--main-text, #0b1b0f);
   text-align: left;
   font: var(--body-body-medium, 400 14px/20px "Roboto-Regular", sans-serif);
 }
@@ -12,6 +12,7 @@
 
   &__incoming {
     background: var(--incoming-background, #e4e6e8);
+    color: var(--main-text);
     border-radius: 22px 22px 22px 0;
     padding: 8px 0 8px 0;
     display: flex;
@@ -26,6 +27,7 @@
 
   &__outgoing {
     background: var(--outgoing-background, #E7EFFF);
+    color: var(--main-text);
     border-radius: 22px 22px 0px 22px;
     padding: 8px 12px 8px 12px;
     display: flex;

package/src/Presentation/ui-components/Message/Message.scss

@@ -48,7 +48,6 @@
   }
 
   &__outgoing {
-    background: var(--main-background, #ffffff);
     padding: 0px 8px 8px 16px;
     display: flex;
     flex-direction: row;

package/src/Presentation/ui-components/MessageInput/MessageInput.stories.tsx

@@ -104,7 +104,7 @@ export const MessageInputDefault: StoryObj<typeof MessageInput> = {
   name: 'MessageInput Default',
   args: {
     value: '',
-    enableVoice: false,
+    enableVoice: true,
     disableAttachment: false,
     loading: false,
   },
@@ -115,6 +115,8 @@ export const MessageInputWithVoiceMessage: StoryObj<typeof MessageInput> = {
   args: {
     ...MessageInputDefault.args,
     enableVoice: true,
+    onVoice: () => {
+    }
   },
 };
 
@@ -141,5 +143,3 @@ export const MessageInputLoadingState: StoryObj<typeof MessageInput> = {
     loading: true,
   },
 };
-
-// Дополните примеры в соответствии с вашими требованиями

package/src/Presentation/ui-components/PreviewFileMessage/PreviewFileMessage.stories.ts

@@ -72,8 +72,8 @@ export const PreviewFileMessageVideo: StoryDefault = {
 export const PreviewFileMessageImage: StoryDefault = {
   name: 'PreviewFileMessage Image',
   args: {
-    // src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
-    src: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/custom-white-label-solution.jpg',
+    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    // src: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/custom-white-label-solution.jpg',
     name: 'screenshot.jpg',
   },
 };

package/src/Presentation/ui-components/SettingsItem/SettingsItem.scss

@@ -1,7 +1,6 @@
 @use '../../themes/styles/mixins' as *;
 
 .settings-item {
-  background-color: var(--color-background);
 
   &__body {
     display: flex;
@@ -71,5 +70,5 @@
     }
   }
 
-  @include applyBorderBox; // Теперь после всех CSS-свойств
+  @include applyBorderBox;
 }

package/src/Presentation/ui-components/SettingsItem/SettingsItem.stories.tsx

@@ -108,13 +108,13 @@ export const SettingsItemNotification: StoryDefault = {
         }}
       />
     ),
-    rightSection: (
-      <CloseSvg
-        style={{
-          cursor: 'pointer',
-        }}
-      />
-    ),
+    // rightSection: (
+    //   <CloseSvg
+    //     style={{
+    //       cursor: 'pointer',
+    //     }}
+    //   />
+    // ),
   },
 };
 

package/src/Presentation/ui-components/TextField/TextField.scss

@@ -4,7 +4,6 @@
   @include applyBorderBox;
 
   &__label {
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
@@ -12,7 +11,6 @@
   }
 
   &__wrapper {
-    background-color: var(--color-background);
 
     display: flex;
     align-items: center;
@@ -36,11 +34,12 @@
     border: none;
     outline: none;
 
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.15px;
+    background: var(--main-background);
+    color: var(--color-font);
 
     &:disabled {
       background-color: transparent;

package/src/Presentation/ui-components/UserListItem/UserListItem.scss

@@ -6,7 +6,8 @@
   height: 56px;
   padding: 8px 19px 8px 16px;
   gap: 16px;
-  background-color: var(--color-background);
+  border-bottom: 1px solid var(--divider);
+
 
   &--disabled {
     cursor: not-allowed;
@@ -22,8 +23,6 @@
 
   &__name {
     margin-left: 16px;
-
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;

package/src/Presentation/ui-components/UserListItem/UserListItem.stories.tsx

@@ -47,7 +47,7 @@ const meta = {
       table: {
         type: { summary: 'boolean' },
         defaultValue: {
-          summary: 'false',
+          summary: 'true',
         },
       },
       description: 'Checkbox',
@@ -117,11 +117,24 @@ function UserListExample() {
   );
 }
 
+function UserListItemExample() {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <UserListItem
+      userName="User name"
+      checked={checked}
+      onChange={(value:boolean) => {
+        setChecked(value);
+      }}
+    />
+  )
+
+}
+
 export const UserListItemDefault: StoryDefault = {
   name: 'UserListItem Default',
-  args: {
-    userName: 'User name',
-  },
+  render: () => <UserListItemExample />
 };
 
 export const UserList: StoryDefault = {

package/storybook-static/167.88fc69a9.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[167],{"./node_modules/@storybook/addon-docs/dist/DocsRenderer-CFRXHY34.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{DocsRenderer:()=>DocsRenderer});var react=__webpack_require__("./node_modules/react/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),react_18=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-18.mjs"),defaultComponents={code:dist.XA,a:dist.zE,...dist.Sw},ErrorBoundary=class extends react.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react.createElement(react.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=dist.kQ;return new Promise(((resolve,reject)=>{__webpack_require__.e(294).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then((({MDXProvider})=>(0,react_18.renderElement)(react.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react.createElement(MDXProvider,{components},react.createElement(TDocs,{context,docsParameter}))),element))).then((()=>resolve()))}))},this.unmount=element=>{(0,react_18.unmountElement)(element)}}};__webpack_require__("./node_modules/@storybook/addon-docs/dist/chunk-H6MOWX77.mjs")},"./node_modules/@storybook/blocks/dist sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/blocks/dist sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/components sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/components sync recursive",module.exports=webpackEmptyContext},"./node_modules/@storybook/core/dist/theming sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/@storybook/core/dist/theming sync recursive",module.exports=webpackEmptyContext}}]);

package/storybook-static/294.b81cdbca.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[294],{"./node_modules/@mdx-js/react/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MDXProvider:()=>_lib_index_js__WEBPACK_IMPORTED_MODULE_0__.x,useMDXComponents:()=>_lib_index_js__WEBPACK_IMPORTED_MODULE_0__.R});var _lib_index_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js")},"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{R:()=>useMDXComponents,x:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const emptyComponents={},MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext(emptyComponents);function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((function(){return"function"==typeof components?components(contextComponents):{...contextComponents,...components}}),[contextComponents,components])}function MDXProvider(properties){let allComponents;return allComponents=properties.disableParentContext?"function"==typeof properties.components?properties.components(emptyComponents):properties.components||emptyComponents:useMDXComponents(properties.components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},properties.children)}}}]);