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

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

@@ -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 @@
+export const QBConfig = {
+  credentials: {
+    appId: -1,
+    accountKey: '',
+    authKey: '',
+    authSecret: '',
+    sessionToken: '',
+  },
+  configAIApi: {
+    AIAnswerAssistWidgetConfig: {
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
+      apiKey: '',
+      maxTokens: 3584,
+      useDefault: true,
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'https://api.openai.com/',
+        port: '',
+      },
+    },
+    AITranslateWidgetConfig: {
+      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: '',
+      },
+      // proxyConfig: {
+      //   api: 'v1/chat/completions',
+      //   servername: 'http://localhost',
+      //   port: '3012',
+      // },
+    },
+    AIRephraseWidgetConfig: {
+      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: 10 * 1024 * 1024,
+    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;

package/src/index-ui.ts

@@ -0,0 +1,87 @@
+import './index.scss';
+import MainButton, {
+  TypeButton,
+} from './Presentation/components/UI/Buttons/MainButton/MainButton';
+import QuickBloxUIKitProvider, {
+  qbDataContext,
+  QBDataContextType,
+} from './Presentation/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import { LocalDataSource } from './Data/source/local/LocalDataSource';
+import useQBConnection from './Presentation/providers/QuickBloxUIKitProvider/useQBConnection';
+import useQbInitializedDataContext from './Presentation/providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+import useEventMessagesRepository from './Presentation/providers/QuickBloxUIKitProvider/useEventMessagesRepository';
+import { DialogListViewModel } from './Presentation/Views/DialogList/DialogListViewModel';
+import useDialogListViewModel from './Presentation/Views/DialogList/useDialogListViewModel';
+import { SubscribeToDialogEventsUseCase } from './Domain/use_cases/SubscribeToDialogEventsUseCase';
+import { Pagination } from './Domain/repository/Pagination';
+import { DialogEventInfo } from './Domain/entity/DialogEventInfo';
+import EventMessageType from './Domain/entity/EventMessageType';
+import { NotificationTypes } from './Domain/entity/NotificationTypes';
+import { stringifyError } from './utils/parse';
+import DesktopLayout from './Presentation/layouts/Desktop/DesktopLayout';
+import DialogList from './Presentation/Views/DialogList/DialogList';
+import Dialog from './Presentation/Views/Dialog/Dialog';
+import DialogInfo from './Presentation/Views/DialogInfo/DialogInfo';
+import { DialogEntity } from './Domain/entity/DialogEntity';
+import BaseViewModel, {
+  FunctionTypeViewModelToVoid,
+} from './CommonTypes/BaseViewModel';
+import {
+  LoginData,
+  AuthorizationData,
+  RemoteDataSource,
+} from './Data/source/remote/RemoteDataSource';
+import QuickBloxUIKitDesktopLayout from './Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout';
+import DefaultTheme from './Presentation/themes/DefaultThemes/DefaultTheme';
+import UiKitTheme from './Presentation/themes/UiKitTheme';
+import useQbUIKitDataContext from './Presentation/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
+import { AIMessageWidget } from './Presentation/Views/Dialog/AIWidgets/AIMessageWidget';
+import { AISource, IChatMessage } from './Data/source/AISource';
+import AIWidgetIcon from './Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './Presentation/Views/Dialog/AIWidgets/ErrorMessageIcon';
+import PreviewDialogViewModel from './Presentation/Views/PreviewDialog/PreviewDialogViewModel';
+import { AvatarContentIncomingUserProps } from './Presentation/Views/Dialog/Message/IncomingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser';
+
+import { GetUserNameFct } from './Presentation/Views/Dialog/Message/IncomingMessage/IncomingMessage';
+
+export {
+  MainButton,
+  TypeButton,
+  type LoginData,
+  type AuthorizationData,
+  QuickBloxUIKitProvider,
+  qbDataContext,
+  type QBDataContextType,
+  RemoteDataSource,
+  LocalDataSource,
+  useQBConnection,
+  useQbInitializedDataContext,
+  useQbUIKitDataContext,
+  useEventMessagesRepository,
+  type DialogListViewModel,
+  useDialogListViewModel,
+  SubscribeToDialogEventsUseCase,
+  Pagination,
+  type DialogEventInfo,
+  EventMessageType,
+  NotificationTypes,
+  stringifyError,
+  DesktopLayout,
+  DialogList,
+  Dialog,
+  DialogInfo,
+  type DialogEntity,
+  BaseViewModel,
+  QuickBloxUIKitDesktopLayout,
+  DefaultTheme,
+  type UiKitTheme,
+  type AIMessageWidget,
+  AISource,
+  type IChatMessage,
+  AIWidgetIcon,
+  ErrorMessageIcon,
+  PreviewDialogViewModel,
+  type FunctionTypeViewModelToVoid,
+  type AvatarContentIncomingUserProps,
+  type GetUserNameFct,
+};

package/src/index.scss

@@ -0,0 +1,27 @@
+@import 'Presentation/themes/styles/fonts';
+@import 'Presentation/themes/styles/theme_colors_scheme';
+@import 'Presentation/themes/styles/variables';
+@import 'Presentation/themes/styles/mixins';
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Roboto';
+  color: var(--main-text);
+  background-color: var(--main-background);
+  overflow: hidden !important;
+  scrollbar-width: none !important;
+}
+
+/* Media-query for mobile devices */
+@media only screen and (max-width: #{$qb-max-width-screen}) {
+  :root {
+    --max-width-message-view-container: #{$qb-max-width-message-view-container-mobile};
+    --max-width-message-bubble: #{$qb-max-width-message-bubble-mobile};
+    --max-width-image-message: #{$qb-max-width-image-message-mobile};
+    --max-width-audio-message: #{$qb-max-width-audio-message-mobile};
+    --max-width-dialog-list: #{$qb-max-width-dialog-list-mobile};
+  }
+}

package/src/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+// import 'bootstrap/dist/css/bootstrap.css';
+// import 'bootstrap/dist/css/bootstrap.css';
+import './index.scss';
+import App from './App';
+// import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();

package/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/src/package_artan_react_ui.json

@@ -0,0 +1,91 @@
+{
+  "name": "artan-react-ui-sample",
+  "version": "0.0.55",
+  "main": "dist/index-ui.js",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "^16.18.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "classnames": "^2.3.2",
+    "qb-ai-answer-assistant": "^0.1.0",
+    "qb-ai-core": "^0.1.0",
+    "qb-ai-rephrase": "^0.1.0",
+    "qb-ai-translate": "^0.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
+    "react-scripts": "5.0.1",
+    "rxjs": "^7.8.0",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
+    "classnames": "^2.3.2",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-no-loops": "^0.3.0",
+    "eslint-plugin-optimize-regex": "^1.2.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "5.0.1",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "ts-loader": "^9.4.2",
+    "typedoc": "^0.23.22",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "build:lib": "webpack",
+    "test": "react-scripts test",
+    "lint": "eslint ./src",
+    "eject": "react-scripts eject"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": "eslint"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}