quickblox-react-ui-kit 0.1.6 → 0.1.7

package/src/Presentation/Views/Dialogs/useDialogsViewModel.ts

@@ -0,0 +1,379 @@
+import { useState } from 'react';
+import { QBDataContextType } from '../../components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import { Pagination } from '../../../Domain/repository/Pagination';
+import { DialogsViewModel } from './DialogViewModel';
+import { PublicDialogEntity } from '../../../Domain/entity/PublicDialogEntity';
+import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { SubscribeToDialogsUpdatesUseCaseWithMock } from '../../../Domain/use_cases/SubscribeToDialogsUpdatesUseCaseWithMock';
+import DialogsRepository from '../../../Data/repository/DialogsRepository';
+import { GetAllDialogsUseCaseWithMock } from '../../../Domain/use_cases/GetAllDialogsUseCaseWithMock';
+import { CreateDialogUseCase } from '../../../Domain/use_cases/CreateDialogUseCase';
+import EventMessagesRepository from '../../../Data/repository/EventMessagesRepository';
+import { stringifyError } from '../../../utils/parse';
+import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
+import { UpdateDialogUseCase } from '../../../Domain/use_cases/UpdateDialogUseCase';
+import {
+  DialogLeaveType,
+  LeaveDialogUseCase,
+} from '../../../Domain/use_cases/LeaveDialogUseCase';
+import { FileEntity } from '../../../Domain/entity/FileEntity';
+import { UploadFileUseCase } from '../../../Domain/use_cases/UploadFileUseCase';
+import { FileRepository } from '../../../Data/repository/FileRepository';
+import { Stubs } from '../../../Data/Stubs';
+import { SubscribeToDialogEventsUseCase } from '../../../Domain/use_cases/SubscribeToDialogEventsUseCase';
+import EventMessageType from '../../../Domain/entity/EventMessageType';
+import { NotificationTypes } from '../../../Domain/entity/NotificationTypes';
+import { GetDialogByIdUseCase } from '../../../Domain/use_cases/GetDialogByIdUseCase';
+import { DialogType } from '../../../Domain/entity/DialogTypes';
+import { RemoveUsersFromTheDialogUseCase } from '../../../Domain/use_cases/RemoveUsersFromTheDialogUseCase';
+import { DialogEventInfo } from '../../../Domain/entity/DialogEventInfo';
+import { RemoteDataSource } from '../../../Data/source/remote/RemoteDataSource';
+
+export default function useDialogsViewModel(
+  currentContext: QBDataContextType,
+  initPagination?: Pagination,
+): DialogsViewModel {
+  console.log('3.1. useDialogsViewModel');
+  const startPagination: Pagination = initPagination || new Pagination();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [pagination, setPagination] = useState<Pagination>(startPagination);
+  const [dialogs, setDialogs] = useState<PublicDialogEntity[]>([]);
+  const [newDialog, setNewDialog] = useState<DialogEntity>();
+
+  //
+  const currentUserId =
+    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
+  // const currentContext = useQbDataContext();
+  const remoteDataSourceMock: RemoteDataSource =
+    currentContext.storage.REMOTE_DATA_SOURCE;
+
+  const eventMessageRepository: EventMessagesRepository =
+    currentContext.storage.EVENT_MESSAGE_REPOSITORY;
+
+  const useCaseSubscribeToDialogsUpdates: SubscribeToDialogsUpdatesUseCaseWithMock =
+    new SubscribeToDialogsUpdatesUseCaseWithMock(
+      new DialogsRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        remoteDataSourceMock,
+      ),
+    );
+
+  const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
+    new SubscribeToDialogEventsUseCase(
+      eventMessageRepository,
+      'DialogsViewModel',
+    );
+
+  const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
+    console.log('call dialogUpdateHandler in useDialogsViewModel');
+    if (dialogInfo.eventMessageType === EventMessageType.SystemMessage) {
+      if (dialogInfo.notificationTypes === NotificationTypes.UPDATE_DIALOG) {
+        if (dialogInfo.messageInfo) {
+          const { dialogId } = dialogInfo.messageInfo;
+
+          const getDialogByIdUseCase: GetDialogByIdUseCase =
+            new GetDialogByIdUseCase(
+              new DialogsRepository(
+                currentContext.storage.LOCAL_DATA_SOURCE,
+                currentContext.storage.REMOTE_DATA_SOURCE,
+              ),
+              dialogId,
+            );
+
+          // eslint-disable-next-line promise/catch-or-return,promise/always-return
+          getDialogByIdUseCase.execute().then((updatedDialog) => {
+            setNewDialog(updatedDialog);
+          });
+        }
+      }
+      //
+      if (
+        dialogInfo.notificationTypes === NotificationTypes.DELETE_LEAVE_DIALOG
+      ) {
+        if (
+          dialogInfo.messageInfo &&
+          dialogInfo.messageInfo.sender_id === currentUserId
+        ) {
+          setNewDialog(undefined);
+        }
+      }
+      //
+    }
+  };
+
+  subscribeToDialogEventsUseCase
+    .execute(dialogUpdateHandler)
+    .catch((reason) => {
+      console.log(stringifyError(reason));
+    });
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async function getDialogs(currentPagination: Pagination) {
+    console.log('getDialogs in useDialogsViewModel');
+    console.log(
+      'EXECUTE USE CASES GET DIALOG WITH PAGINATION: ',
+      JSON.stringify(currentPagination),
+    );
+    setLoading(true);
+    const useCaseGetAllDialogs: GetAllDialogsUseCaseWithMock =
+      new GetAllDialogsUseCaseWithMock(
+        new DialogsRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          remoteDataSourceMock,
+        ),
+        currentPagination,
+      );
+
+    await useCaseGetAllDialogs
+      ?.execute()
+      // eslint-disable-next-line promise/always-return
+      .then((result) => {
+        console.log('EXECUTE COMPLETED: ', JSON.stringify(currentPagination));
+        setDialogs([...(result.ResultData as PublicDialogEntity[])]);
+        setLoading(false);
+        setPagination(result.CurrentPagination);
+      })
+      .catch((e) => {
+        console.log('call catch....', JSON.stringify(e));
+        setError(`${(e as unknown as Error).message}`);
+        setLoading(false);
+      });
+    await useCaseSubscribeToDialogsUpdates?.execute((data) => {
+      try {
+        console.log('3.SUBSCRIBE EXECUTE in useDialogsViewModel:', data);
+        setDialogs([...(data as PublicDialogEntity[])]);
+        setLoading(false);
+        setError('');
+      } catch (e) {
+        console.log('catch error2');
+        setError('ERROR2!!!');
+      }
+    });
+  }
+
+  const release = () => {
+    useCaseSubscribeToDialogsUpdates.release();
+  };
+
+  const setWaitLoadingStatus = (status: boolean): void => {
+    setLoading(status);
+  };
+
+  const createDialog = async (
+    dialogInfo: GroupDialogEntity,
+  ): Promise<DialogEntity> => {
+    console.log(
+      'call createDialog in use case with params: ',
+      JSON.stringify(dialogInfo),
+    );
+
+    const createDialogUseCase: CreateDialogUseCase = new CreateDialogUseCase(
+      eventMessageRepository,
+      new DialogsRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        remoteDataSourceMock,
+      ),
+      dialogInfo,
+    );
+    const resultDialog: DialogEntity = await createDialogUseCase
+      .execute()
+      .catch((e) => {
+        console.log('EXCEPTION IN CREATE NEW DIALOG: ', stringifyError(e));
+        setNewDialog(undefined);
+
+        throw new Error(stringifyError(e));
+      });
+
+    if (resultDialog) {
+      setNewDialog(resultDialog);
+
+      return Promise.resolve(resultDialog);
+    }
+
+    return Promise.reject(resultDialog);
+  };
+
+  const updateDialog = async (
+    // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
+    dialog: GroupDialogEntity,
+  ): Promise<DialogEntity> => {
+    const updateDialogUseCase: UpdateDialogUseCase = new UpdateDialogUseCase(
+      eventMessageRepository,
+      new DialogsRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        remoteDataSourceMock,
+      ),
+      dialog,
+    );
+
+    const resultDialog: DialogEntity = await updateDialogUseCase
+      .execute()
+      .catch((e) => {
+        console.log('Error updateDialogUseCase: ', stringifyError(e));
+        throw new Error(stringifyError(e));
+      });
+
+    const { participantIds } = dialog;
+
+    dialog.newParticipantIds?.forEach((item) => {
+      if (!participantIds.includes(item)) {
+        participantIds.push(item);
+      }
+    });
+
+    const dialogForUpdate: GroupDialogEntity = {
+      ...dialog,
+      participantIds,
+    };
+
+    setNewDialog(dialogForUpdate as DialogEntity);
+
+    return Promise.resolve(resultDialog);
+  };
+
+  const deleteDialog = async (
+    // eslint-disable-next-line @typescript-eslint/no-shadow,@typescript-eslint/no-unused-vars
+    dialogToDelete: GroupDialogEntity,
+  ): Promise<boolean> => {
+    let leaveResult = false;
+
+    if (dialogToDelete.type === DialogType.private) {
+      const leaveDialogUseCase: LeaveDialogUseCase = new LeaveDialogUseCase(
+        eventMessageRepository,
+        new DialogsRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          remoteDataSourceMock,
+        ),
+        dialogToDelete,
+        DialogLeaveType.delete,
+      );
+
+      leaveResult = await leaveDialogUseCase.execute().catch((e) => {
+        console.log('Error leaveDialogUseCase: ', stringifyError(e));
+        throw new Error(stringifyError(e));
+      });
+    } else {
+      const usersForDeleteFromDialog: Array<number> = new Array<number>();
+
+      const userToDeleteId: number =
+        remoteDataSourceMock?.authInformation?.userId || 0;
+
+      usersForDeleteFromDialog.push(userToDeleteId);
+      const deleteUsersFromDialog: RemoveUsersFromTheDialogUseCase =
+        new RemoveUsersFromTheDialogUseCase(
+          eventMessageRepository,
+          new DialogsRepository(
+            currentContext.storage.LOCAL_DATA_SOURCE,
+            remoteDataSourceMock,
+          ),
+          dialogToDelete,
+          usersForDeleteFromDialog,
+        );
+
+      leaveResult = await deleteUsersFromDialog.execute().catch((e) => {
+        console.log(
+          'Error delete users from RemoveUsersFromDialogUseCase: ',
+          stringifyError(e),
+        );
+        throw new Error(stringifyError(e));
+      });
+    }
+
+    if (leaveResult) {
+      return Promise.resolve(leaveResult);
+    }
+
+    return Promise.reject(leaveResult);
+  };
+
+  const removeMembers = async (dialog: GroupDialogEntity): Promise<boolean> => {
+    let leaveResult = false;
+
+    if (
+      dialog.participantsToRemoveIds &&
+      dialog.participantsToRemoveIds.length > 0
+    ) {
+      const deleteUsersFromDialog: RemoveUsersFromTheDialogUseCase =
+        new RemoveUsersFromTheDialogUseCase(
+          eventMessageRepository,
+          new DialogsRepository(
+            currentContext.storage.LOCAL_DATA_SOURCE,
+            remoteDataSourceMock,
+          ),
+          dialog,
+          dialog.participantsToRemoveIds,
+        );
+
+      leaveResult = await deleteUsersFromDialog.execute().catch((e) => {
+        console.log(
+          'Error delete users from RemoveUsersFromDialogUseCase: ',
+          stringifyError(e),
+        );
+        throw new Error(stringifyError(e));
+      });
+    }
+
+    if (leaveResult) {
+      const dialogForUpdate: GroupDialogEntity = {
+        ...dialog,
+        participantIds: dialog.participantIds.filter(
+          (item) => !dialog.participantsToRemoveIds?.includes(item),
+        ),
+      };
+
+      setNewDialog(dialogForUpdate as DialogEntity);
+
+      return Promise.resolve(leaveResult);
+    }
+
+    return Promise.reject(leaveResult);
+  };
+
+  const uploadFile = async (file: File): Promise<FileEntity> => {
+    const fileEntity: FileEntity = Stubs.createFileEntityWithDefaultValues();
+
+    fileEntity.data = file;
+    fileEntity.uid = '';
+    fileEntity.name = file.name;
+    fileEntity.size = file.size;
+    const uploadFileUseCase: UploadFileUseCase = new UploadFileUseCase(
+      new FileRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        remoteDataSourceMock,
+      ),
+      fileEntity,
+    );
+
+    const resultEnity: FileEntity = await uploadFileUseCase
+      .execute()
+      .catch((e) => {
+        console.log('Error UploadFileUseCase: ', stringifyError(e));
+        throw new Error(stringifyError(e));
+      });
+
+    return Promise.resolve(resultEnity);
+  };
+
+  return {
+    get entity(): DialogEntity {
+      return newDialog as DialogEntity;
+    },
+    set entity(item) {
+      setNewDialog(item);
+    },
+    dialogs,
+    loading,
+    error,
+    pagination,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    getDialogs,
+    release,
+    createDialog,
+    updateDialog,
+    deleteDialog,
+    uploadFile,
+    removeMembers,
+    setWaitLoadingStatus,
+  };
+}

package/src/Presentation/Views/Navigation/More.svg

@@ -0,0 +1,7 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Navigation/More">
+<g id="Vector">
+<path d="M21.9999 14.6667C24.0166 14.6667 25.6666 13.0167 25.6666 11C25.6666 8.98334 24.0166 7.33334 21.9999 7.33334C19.9833 7.33334 18.3333 8.98334 18.3333 11C18.3333 13.0167 19.9833 14.6667 21.9999 14.6667ZM21.9999 18.3333C19.9833 18.3333 18.3333 19.9833 18.3333 22C18.3333 24.0167 19.9833 25.6667 21.9999 25.6667C24.0166 25.6667 25.6666 24.0167 25.6666 22C25.6666 19.9833 24.0166 18.3333 21.9999 18.3333ZM21.9999 29.3333C19.9833 29.3333 18.3333 30.9833 18.3333 33C18.3333 35.0167 19.9833 36.6667 21.9999 36.6667C24.0166 36.6667 25.6666 35.0167 25.6666 33C25.6666 30.9833 24.0166 29.3333 21.9999 29.3333Z" fill="#0B121B"/>
+</g>
+</g>
+</svg>

package/src/Presentation/assets/DarkTheme.ts

@@ -0,0 +1,58 @@
+import UiKitTheme from './UiKitTheme';
+import ThemeScheme from './ThemeScheme';
+
+export default class DarkTheme implements UiKitTheme {
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => ThemeScheme.secondary_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => ThemeScheme.secondary_800;
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => ThemeScheme.secondary_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => ThemeScheme.secondary_400;
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => ThemeScheme.secondary_400;
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => ThemeScheme.error_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => ThemeScheme.highlight;
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => ThemeScheme.secondary_400;
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => ThemeScheme.secondary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => ThemeScheme.primary_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => ThemeScheme.primary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => ThemeScheme.secondary_800;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => ThemeScheme.fontFamily;
+}

package/src/Presentation/assets/DefaultThemes/CustomTheme.ts

@@ -0,0 +1,58 @@
+import DefaultTheme from './DefaultTheme';
+
+export default class CustomTheme extends DefaultTheme {
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => '#E7EFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => '#0B121B';
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => 'Roboto';
+
+  //
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => '#90979F';
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => '#F7F9FF';
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => '#BCC1C5';
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => '#FF3B30';
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => '#90979F';
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => '#FFFDC1';
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => '#E4E6E8';
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => '#202F3E';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => '#3978FC';
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => '#E7EFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => '#202F3E';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => '#636D78';
+}

package/src/Presentation/assets/DefaultThemes/DefaultTheme.ts

@@ -0,0 +1,58 @@
+import UiKitTheme from '../UiKitTheme';
+
+export default class DefaultTheme implements UiKitTheme {
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => 'var(--divider)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => 'var(--main-text)';
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => 'var(--font-family)';
+
+  //
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => 'var(--caption)';
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => 'var(--chat-input)';
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => 'var(--disabled-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => 'var(--dropdown-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => 'var(--error)';
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => 'var(--field-border)';
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => 'var(--hightlight)';
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => 'var(--incoming-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => 'var(--input-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => 'var(--main-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => 'var(--main-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => 'var(--outgoing-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => 'var(--secondary-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => 'var(--secondary-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => 'var(--secondary-text)';
+}

package/src/Presentation/assets/LightTheme.ts

@@ -0,0 +1,58 @@
+import UiKitTheme from './UiKitTheme';
+import ThemeScheme from './ThemeScheme';
+
+export default class LightTheme implements UiKitTheme {
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => ThemeScheme.primary_a_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => ThemeScheme.secondary_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => ThemeScheme.primary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => ThemeScheme.error_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => ThemeScheme.highlight;
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => ThemeScheme.secondary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => ThemeScheme.secondary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => ThemeScheme.primary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => ThemeScheme.secondary_900;
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => ThemeScheme.primary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => ThemeScheme.primary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => ThemeScheme.secondary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => ThemeScheme.secondary_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => ThemeScheme.fontFamily;
+}