quickblox-react-ui-kit 0.4.2-beta.2 → 0.4.2-beta.4

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import TextField from './TextField';
+
+const meta: Meta<typeof TextField> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/TextField',
+  component: TextField,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    label: '',
+    disabled: false,
+    loading: false,
+    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: false,
+      table: {
+        type: { summary: 'svg' },
+      },
+      description: 'Format plug svg',
+    },
+    loading: {
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+      description: 'Displays the load',
+    },
+    disabled: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: {
+          summary: false,
+        },
+      },
+      description: 'Active',
+    },
+    className: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const TextFieldDefault: StoryDefault = {
+  name: 'TextField Default',
+};
+
+export const TextFieldDisabled: StoryDefault = {
+  name: 'TextField Disabled',
+  args: {
+    disabled: true,
+    label: 'Text Label',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const TextFieldReset: StoryDefault = {
+  name: 'TextField Reset',
+  args: {
+    label: 'Text Label',
+    placeholder: 'Placeholder',
+    value: 'Text',
+  },
+};

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

@@ -0,0 +1,88 @@
+import {
+  DetailedHTMLProps,
+  ForwardedRef,
+  InputHTMLAttributes,
+  ReactElement,
+  forwardRef,
+  useId,
+} from 'react';
+import cn from 'classnames';
+
+import { RemoveSvg } from '../../icons';
+import Loader from '../Loader/Loader';
+import './TextField.scss';
+
+type HTMLInputProps = DetailedHTMLProps<
+  InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+interface TextFieldProps extends Omit<HTMLInputProps, 'onChange'> {
+  label?: string;
+  icon?: ReactElement;
+  loading?: boolean;
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const TextField = forwardRef(
+  (
+    {
+      label,
+      icon,
+      loading = false,
+      disabled = false,
+      className,
+      id,
+      value,
+      onChange,
+      ...inputProps
+    }: TextFieldProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const defaultId = useId();
+
+    return (
+      <div
+        className={cn(
+          'text-field',
+          {
+            'text-field--disabled': disabled,
+          },
+          className,
+        )}
+      >
+        {label && (
+          <label htmlFor={id || defaultId} className="text-field__label">
+            {label}
+          </label>
+        )}
+
+        <div className="text-field__wrapper">
+          {icon && <span className="text-field__icon">{icon}</span>}
+          <input
+            {...inputProps}
+            ref={ref}
+            disabled={loading || disabled}
+            className="text-field__input"
+            id={id || defaultId}
+            value={value}
+            onChange={(e) => onChange(e.currentTarget.value)}
+          />
+          {!loading && value && (
+            <RemoveSvg
+              className="text-field__reset"
+              onClick={() => onChange('')}
+            />
+          )}
+          {loading && !disabled && (
+            <Loader size="sm" className="text-field__loader" />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default TextField;

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

@@ -0,0 +1,22 @@
+.container {
+  width: 25%;
+}
+
+.toast {
+  min-height: 24px;
+  padding: 4px 12px;
+  opacity: 60% !important;
+  border-radius: 4px;
+  background-color: var(--toast-color);
+
+  &__body {
+    padding: 0;
+    font-family: 'Roboto';
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: var(--main-background);
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { toast } from 'react-toastify';
+
+import ToastProvider from './ToastProvider';
+import Button from '../Button/Button';
+
+const meta: Meta<typeof ToastProvider> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Toast',
+  component: ToastProvider,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: undefined,
+  },
+  argTypes: {
+    children: {
+      table: {
+        defaultValue: {
+          summary: 'ReactNode',
+        },
+        type: { summary: 'ReactNode' },
+      },
+      description: 'Children',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+function ToastExample() {
+  const handleOnClick = () => {
+    toast('Toast message', {
+      position: 'top-center',
+      autoClose: 5000,
+    });
+  };
+
+  return (
+    <ToastProvider>
+      <Button onClick={handleOnClick}>Children</Button>
+    </ToastProvider>
+  );
+}
+
+export const ToastDefault: StoryDefault = {
+  render: () => <ToastExample />,
+};

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

@@ -0,0 +1,29 @@
+import { ReactNode, createContext } from 'react';
+import { ToastContainer } from 'react-toastify';
+
+import 'react-toastify/dist/ReactToastify.css';
+import './Toast.scss';
+
+const ToastContext = createContext(undefined);
+
+interface ToastProps {
+  children: ReactNode;
+}
+
+export default function ToastProvider({ children }: ToastProps) {
+  return (
+    <ToastContext.Provider value={undefined}>
+      <ToastContainer
+        className="container"
+        position="top-center"
+        autoClose={3000}
+        bodyClassName="toast__body"
+        toastClassName="toast"
+        pauseOnHover={false}
+        closeButton={false}
+        hideProgressBar
+      />
+      {children}
+    </ToastContext.Provider>
+  );
+}

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,130 @@
+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: '@quickblox-react-ui-kit/Presentation/ui-components/UserListItem',
+  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 = {
+  name: 'UserListItem Default',
+  args: {
+    userName: 'User name',
+  },
+};
+
+export const UserList: StoryDefault = {
+  name: 'UserListItem Multiple',
+  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

@@ -0,0 +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

@@ -0,0 +1,151 @@
+import { QBUIKitConfig } from './CommonTypes/CommonTypes';
+
+export const QBConfig: QBUIKitConfig = {
+  credentials: {
+    appId: -1,
+    accountKey: '',
+    authKey: '',
+    authSecret: '',
+    sessionToken: '',
+  },
+  configAIApi: {
+    AIAnswerAssistWidgetConfig: {
+      smartChatAssistantId: '',
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
+      apiKey: '',
+      maxTokens: 3584,
+      useDefault: true,
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'https://api.openai.com/',
+        port: '',
+      },
+    },
+    AITranslateWidgetConfig: {
+      smartChatAssistantId: '',
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
+      apiKey: '',
+      maxTokens: 3584,
+      useDefault: true,
+      defaultLanguage: '',
+      languages: [
+        'English',
+        'Spanish',
+        'French',
+        'Portuguese',
+        'German',
+        'Ukrainian',
+      ],
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'https://api.openai.com/',
+        port: '',
+      },
+    },
+    AIRephraseWidgetConfig: {
+      smartChatAssistantId: '',
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
+      apiKey: '',
+      maxTokens: 3584,
+      useDefault: true,
+      defaultTone: 'Professional',
+      Tones: [
+        {
+          name: 'Professional Tone',
+          description:
+            'This would edit messages to sound more formal, using technical vocabulary, clear sentence structures, and maintaining a respectful tone. It would avoid colloquial language and ensure appropriate salutations and sign-offs',
+          iconEmoji: '👔',
+        },
+        {
+          name: 'Friendly Tone',
+          description:
+            'This would adjust messages to reflect a casual, friendly tone. It would incorporate casual language, use emoticons, exclamation points, and other informalities to make the message seem more friendly and approachable.',
+          iconEmoji: '🤝',
+        },
+        {
+          name: 'Encouraging Tone',
+          description:
+            'This tone would be useful for motivation and encouragement. It would include positive words, affirmations, and express support and belief in the recipient.',
+          iconEmoji: '💪',
+        },
+        {
+          name: 'Empathetic Tone',
+          description:
+            'This tone would be utilized to display understanding and empathy. It would involve softer language, acknowledging feelings, and demonstrating compassion and support.',
+          iconEmoji: '🤲',
+        },
+        {
+          name: 'Neutral Tone',
+          description:
+            'For times when you want to maintain an even, unbiased, and objective tone. It would avoid extreme language and emotive words, opting for clear, straightforward communication.',
+          iconEmoji: '😐',
+        },
+        {
+          name: 'Assertive Tone',
+          description:
+            'This tone is beneficial for making clear points, standing ground, or in negotiations. It uses direct language, is confident, and does not mince words.',
+          iconEmoji: '🔨',
+        },
+        {
+          name: 'Instructive Tone',
+          description:
+            'This tone would be useful for tutorials, guides, or other teaching and training materials. It is clear, concise, and walks the reader through steps or processes in a logical manner.',
+          iconEmoji: '📖',
+        },
+        {
+          name: 'Persuasive Tone',
+          description:
+            'This tone can be used when trying to convince someone or argue a point. It uses persuasive language, powerful words, and logical reasoning.',
+          iconEmoji: '☝️',
+        },
+        {
+          name: 'Sarcastic/Ironic Tone',
+          description:
+            'This tone can make the communication more humorous or show an ironic stance. It is harder to implement as it requires the AI to understand nuanced language and may not always be taken as intended by the reader.',
+          iconEmoji: '😏',
+        },
+        {
+          name: 'Poetic Tone',
+          description:
+            'This would add an artistic touch to messages, using figurative language, rhymes, and rhythm to create a more expressive text.',
+          iconEmoji: '🎭',
+        },
+      ],
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'https://api.openai.com/',
+        port: '',
+      },
+    },
+  },
+  appConfig: {
+    maxFileSize: 10485760,
+    sessionTimeOut: 122,
+    chatProtocol: {
+      active: 2,
+    },
+    debug: true,
+    enableForwarding: true,
+    enableReplying: true,
+    regexUserName: '',
+    endpoints: {
+      api: 'api.quickblox.com',
+      chat: 'chat.quickblox.com',
+    },
+    // on: {
+    //   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
+    //   async sessionExpired(handleResponse: any, retry: any) {
+    //     console.log(
+    //       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    //       `QBconfig sessionExpired handle: ${handleResponse} ${retry}`,
+    //     );
+    //   },
+    // },
+    streamManagement: {
+      enable: true,
+    },
+  },
+};

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;