List item comments - removed @fluentUi/react package (#983)

* commit chnages new conbtrol listItemComments

* ListItemComments changes Update

* ListItemComments changes Update

* commit changes

* commit chnages on List Item Comments

* commit add docs to ListItemComments

* commit chnages on listItem comments and control test

* Update ListItemComments.md

* commit add strings to ListItemComments

* Update mystrings.d.ts

remove extra empty spaces

* commit changes on strings ListItemComments

* commit chnages ListItemCOmments strings

* Update pt-pt.ts

remove extra space

* Update ru-ru.ts

Add missing strings

* commit changes remove @fluentui/react

Co-authored-by: Joel Rodrigues <[email protected]>

Author: joaojmendes

package-lock.json

@@ -20,7 +20,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fluentui/react": "^8.23.7",
+    "@fluentui/react-hooks": "^8.2.6",
     "@fluentui/react-northstar": "0.51.3",
     "@microsoft/mgt-react": "2.2.0",
     "@microsoft/mgt-spfx": "2.2.0",

package.json

@@ -4,8 +4,8 @@ import { ServiceScope } from "@microsoft/sp-core-library";
 import { AppContext } from "./common";
 import { Theme } from "spfx-uifabric-themes"; // Don't remove this import is need to theme load form global var from window object
 import { CommentsList } from "./components/Comments/CommentsList";
-import { Stack } from "@fluentui/react/lib/Stack";
-import { Text } from "@fluentui/react/lib/Text";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
+import { Text } from "office-ui-fabric-react/lib/Text";
 export interface IListItemCommentsProps {
   webUrl?: string;
   listId: string;

src/controls/listItemComments/ListItemComments.tsx

@@ -1,4 +1,4 @@
-import { Stack } from "@fluentui/react/lib/Stack";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
 import * as React from "react";
 import { useContext, useRef, useState } from "react";
 import { EListItemCommentsStateTypes, ListItemCommentsStateContext  } from "./../ListItemCommentsStateProvider";
@@ -7,8 +7,8 @@ import { MentionsInput, Mention, SuggestionDataItem, MentionItem } from "react-m
 import { useCallback } from "react";
 import { useAddCommentStyles } from "./useAddCommentStyles";
 import { PHOTO_URL } from "../../common/constants";
-import { IconButton } from "@fluentui/react/lib/Button";
-import { Text} from "@fluentui/react/lib/Text";
+import { IconButton } from "office-ui-fabric-react/lib/Button";
+import { Text} from "office-ui-fabric-react/lib/Text";
 import { ECommentAction } from "../../common/ECommentAction";
 import { IAddCommentPayload } from "../../models/IAddCommentPayload";
 import { useMsGraphAPI } from "../..";

src/controls/listItemComments/components/AddComment/AddComment.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IDocumentCardStyles, IStackStyles, IStyle, mergeStyleSets } from "@fluentui/react";
+import { IDocumentCardStyles, IStackStyles, IStyle, mergeStyleSets } from "office-ui-fabric-react";
 import { AppContext } from "../../common";
 
 export const useAddCommentStyles = () => {

src/controls/listItemComments/components/AddComment/useAddCommentStyles.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { ReactNode, useMemo } from "react";
 import format from "date-fns/format";
 import parseISO from "date-fns/parseISO";
-import { ActivityItem, Link, Text } from "@fluentui/react";
-import { Stack } from "@fluentui/react/lib/Stack";
+import { ActivityItem, Link, Text } from "office-ui-fabric-react";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
 import { IComment } from "./IComment";
 import { CommentText } from "./CommentText";
 import { isEmpty } from "lodash";

src/controls/listItemComments/components/Comments/CommentItem.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { useContext, useEffect, useState } from "react";
 import { Mention } from "./IComment";
-import { Text } from "@fluentui/react/lib/Text";
+import { Text } from "office-ui-fabric-react/lib/Text";
 import { LivePersona } from "../../../LivePersona";
 import { AppContext } from "../../common";
 import regexifyString from "regexify-string";
-import { Stack } from "@fluentui/react/lib/Stack";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
 import { isArray, isObject } from "lodash";
 import he from 'he';
 export interface ICommentTextProps {

src/controls/listItemComments/components/Comments/CommentText.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useContext, useEffect, useRef } from "react";
-import { Stack } from "@fluentui/react/lib/Stack";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
 import { useSpAPI } from "../../hooks";
 import { EListItemCommentsStateTypes, ListItemCommentsStateContext } from "../ListItemCommentsStateProvider";
 import { useListItemCommentsStyles } from "./useListItemCommentsStyles";
@@ -9,7 +9,7 @@ import { getScrollPosition } from "../../utils/utils";
 import { IErrorInfo } from "../ErrorInfo/IErrorInfo";
 import { RenderError } from "./RenderError";
 import { RenderSpinner } from "./RenderSpinner";
-import { Text } from "@fluentui/react/lib/Text";
+import { Text } from "office-ui-fabric-react/lib/Text";
 import { AddComment } from "../AddComment/AddComment";
 import { ECommentAction } from "../../common/ECommentAction";
 import { IAddCommentPayload } from "../../models/IAddCommentPayload";

src/controls/listItemComments/components/Comments/CommentsList.tsx

@@ -12,7 +12,7 @@ import { RenderNoComments } from "./RenderNoComments";
 import { RenderSpinner } from "./RenderSpinner";
 import { useListItemCommentsStyles } from "./useListItemCommentsStyles";
 import { useBoolean } from "@fluentui/react-hooks";
-import { List } from "@fluentui/react/lib/List";
+import { List } from "office-ui-fabric-react/lib/List";
 import { ECommentAction } from "../..";
 
 export interface IRenderCommentsProps {}

src/controls/listItemComments/components/Comments/RenderComments.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@fluentui/react/lib/Spinner";
+import { Spinner } from "office-ui-fabric-react/lib/Spinner";
 import { Guid } from "@microsoft/sp-core-library";
 import { DocumentCard, DocumentCardDetails } from "office-ui-fabric-react/lib/DocumentCard";
 import { SpinnerSize } from "office-ui-fabric-react/lib/Spinner";