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

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

@@ -60,10 +60,10 @@ const meta: Meta<typeof Placeholder> = {
     },
     text: {
       defaultValue: {
-        summary: '',
+        summary: [''],
       },
       table: {
-        type: { summary: 'string' },
+        type: { summary: 'array' },
       },
       description: 'Placeholder text',
     },
@@ -81,14 +81,14 @@ type StoryDefault = StoryObj<typeof meta>;
 
 export const PlaceholderDefault: StoryDefault = {
   args: {
-    text: 'The are no massage',
+    text: ['The are no massage'],
     icon: <PublicChannelSvg />,
   },
 };
 
 export const PlaceholderError: StoryDefault = {
   args: {
-    text: 'Something wrong',
+    text: ['Something wrong'],
     icon: <ErrorSvg />,
     onRetry: () => undefined,
   },

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

@@ -5,8 +5,8 @@ import { RefreshSvg } from '../../icons';
 import './Placeholder.scss';
 
 interface PlaceholderProps {
-  icon: ReactElement;
-  text: string;
+  icon?: ReactElement;
+  text: string | string[];
   onRetry?: VoidFunction;
   className?: string;
 }
@@ -17,10 +17,16 @@ export default function Placeholder({
   onRetry,
   className,
 }: PlaceholderProps) {
+  const renderText = (content: string, index?: number) => (
+    <span key={index} className="placeholder__text">
+      {content}
+    </span>
+  );
+
   return (
     <div className={cn('placeholder', className)}>
-      <div className="placeholder__icon">{icon}</div>
-      <span className="placeholder__text">{text}</span>
+      {icon && <div className="placeholder__icon">{icon}</div>}
+      {Array.isArray(text) ? text.map(renderText) : renderText(text)}
       {onRetry && (
         <div className="placeholder__retry">
           <RefreshSvg className="placeholder__retry-icon" onClick={onRetry} />

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

@@ -32,6 +32,7 @@
   }
 
   &__input {
+    width: 100%;
     border: none;
     outline: none;
 

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

@@ -1,13 +1,12 @@
 .toast {
   min-height: 24px;
   padding: 4px 12px;
-  opacity: 60%;
+  opacity: 60% !important;
   border-radius: 4px;
   background-color: var(--toast-color);
 
   &__body {
-    padding: none;
-
+    padding: 0;
     font-family: 'Roboto';
     font-weight: 500;
     font-size: 12px;

package/src/Presentation/ui-components/Toast/ToastProvider.tsx

@@ -16,7 +16,6 @@ export default function ToastProvider({ children }: ToastProps) {
       <ToastContainer
         position="top-center"
         autoClose={3000}
-        className="toast-wrapper"
         bodyClassName="toast__body"
         toastClassName="toast"
         pauseOnHover={false}

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

@@ -0,0 +1,33 @@
+.user-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 56px;
+  padding: 8px 19px 8px 16px;
+  gap: 16px;
+  background-color: var(--color-background);
+
+  &--disabled {
+    cursor: not-allowed;
+    color: var(--disabled-elements);
+    fill: var(--disabled-elements);
+  }
+
+  &__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__name {
+    margin-left: 16px;
+
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    color: var(--main-text);
+  }
+}

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

@@ -0,0 +1,128 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import UserListItem from './UserListItem';
+import ScrollableContainer from '../../components/containers/ScrollableContainer/ScrollableContainer';
+
+const meta = {
+  title: 'User List Item',
+  component: UserListItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    className: '',
+    disabled: false,
+    checked: false,
+    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: false,
+        },
+      },
+      description: 'Active',
+    },
+    checked: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: {
+          summary: false,
+        },
+      },
+      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',
+    },
+  },
+} satisfies Meta<typeof UserListItem>;
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+function UserListExample() {
+  const [users, setUser] = useState([
+    { name: 'User 1', id: 0, checked: true },
+    { name: 'User 2', id: 1, checked: false },
+    { name: 'User 3', id: 2, checked: false },
+    { name: 'User 4', id: 3, checked: true },
+    { name: 'User 5', id: 4, checked: true },
+  ]);
+
+  const handleRenderUserListItem = (user: {
+    name: string;
+    id: number;
+    checked: boolean;
+  }) => {
+    return (
+      <UserListItem
+        userName={user.name}
+        checked={user.checked}
+        onChange={(value: boolean) => {
+          setUser((prevUsers) =>
+            prevUsers.map((prevUser) =>
+              prevUser.id === user.id
+                ? { ...prevUser, checked: value }
+                : prevUser,
+            ),
+          );
+        }}
+      />
+    );
+  };
+
+  return (
+    <ScrollableContainer
+      data={users}
+      renderItem={handleRenderUserListItem}
+      onEndReachedThreshold={0.8}
+      refreshing={false}
+    />
+  );
+}
+
+export const UserListItemDefault: StoryDefault = {
+  args: {
+    userName: 'User name',
+  },
+};
+
+export const UserList: StoryDefault = {
+  render: () => <UserListExample />,
+};

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

@@ -0,0 +1,43 @@
+import cn from 'classnames';
+
+import Avatar from '../Avatar/Avatar';
+import CheckBox from '../CheckBox/CheckBox';
+import './UserListItem.scss';
+
+export interface UserListItemProps {
+  userName: string;
+  avatarUrl?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+}
+
+export default function UserListItem({
+  avatarUrl,
+  userName,
+  checked = false,
+  disabled = false,
+  onChange,
+  className,
+}: UserListItemProps) {
+  return (
+    <div
+      className={cn(
+        'user-list-item',
+        {
+          'user-list-item--disabled': disabled,
+        },
+        className,
+      )}
+    >
+      <div className="user-list-item__avatar">
+        <Avatar src={avatarUrl} />
+        <span className="user-list-item__name">{userName}</span>
+      </div>
+      {onChange && (
+        <CheckBox onChange={onChange} disabled={disabled} checked={checked} />
+      )}
+    </div>
+  );
+}

package/src/Presentation/ui-components/index.ts

@@ -1,13 +1,19 @@
 export { default as Avatar } from './Avatar/Avatar';
 export { default as Badge } from './Badge/Badge';
 export { default as Button } from './Button/Button';
+export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as DialogBanner } from './DialogBanner/DialogBanner';
 export { default as DialogItemPreview } from './DialogItemPreview/DialogItemPreview';
+export { default as DialogWindow } from './DialogWindow/DialogWindow';
 export { default as Dropdown } from './Dropdown/Dropdown';
 export { default as Header } from './Header/Header';
 export { default as Loader } from './Loader/Loader';
+export { default as Message } from './Message/Message';
+export { default as MessageInput } from './MessageInput/MessageInput';
 export { default as MessageSeparator } from './MessageSeparator/MessageSeparator';
 export { default as Placeholder } from './Placeholder/Placeholder';
 export { default as PreviewFileMessage } from './PreviewFileMessage/PreviewFileMessage';
 export { default as SettingsItem } from './SettingsItem/SettingsItem';
 export { default as TextField } from './TextField/TextField';
+export { default as ToastProvider } from './Toast/ToastProvider';
+export { default as UserListItem } from './UserListItem/UserListItem';

package/src/QBconfig.ts

@@ -1,9 +1,9 @@
 export const QBConfig = {
   credentials: {
-    appId: 75949,
-    accountKey: 'uK_8uinNyz8-npTNB6tx',
-    authKey: 'DdS7zxMEm5Q7DaS',
-    authSecret: 'g88RhdOjnDOqFkv',
+    appId: -1,
+    accountKey: '',
+    authKey: '',
+    authSecret: '',
     sessionToken: '',
   },
   configAIApi: {

package/src/hooks/useModal.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleModal = () => {
+    setIsOpen((state) => !state);
+  };
+
+  return { isOpen, toggleModal };
+};
+
+export default useModal;

package/storybook-static/312.0aa0e670.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[312],{"./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}}]);

package/storybook-static/341.bea6d0bd.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[341],{"./node_modules/@mdx-js/react/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MDXContext:()=>MDXContext,MDXProvider:()=>MDXProvider,useMDXComponents:()=>useMDXComponents,withMDXComponents:()=>withMDXComponents});var react=__webpack_require__("./node_modules/react/index.js");let MDXContext=react.createContext({});function withMDXComponents(Component){return boundMDXComponent;function boundMDXComponent(props){let allComponents=useMDXComponents(props.components);return react.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){let contextComponents=react.useContext(MDXContext);return react.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.createElement(MDXContext.Provider,{value:allComponents},children)}}}]);