From 14e225e26f32fc8f81f78ed47601e5fa4714a32d Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 26 Jul 2019 22:43:42 +0000 Subject: [PATCH] [CORL-435] Stable CSS Classes (#2414) * feat: fixed import issue with react * feat: initial impl * fix: review --- package-lock.json | 2 +- .../components/ModerateCard/Timestamp.tsx | 3 +- .../components/ModerateCard/Username.tsx | 3 +- .../admin/routes/Invite/SetUsernameField.tsx | 3 +- .../Login/AccountCompletionContainer.tsx | 3 +- .../client/admin/routes/Login/EmailField.tsx | 8 +- .../AddEmailAddress/ConfirmEmailField.tsx | 8 +- .../views/AddEmailAddress/EmailField.tsx | 8 +- .../UnorderedList/ListItem.tsx | 3 +- .../UnorderedList/UnorderedList.tsx | 3 +- .../views/CreatePassword/SetPasswordField.tsx | 8 +- .../views/CreateUsername/UsernameField.tsx | 8 +- .../views/SignIn/HorizontalSeparator.tsx | 3 +- .../routes/Login/views/SignIn/OrSeparator.tsx | 3 +- .../__snapshots__/community.spec.tsx.snap | 20 ++-- .../decisionHistory.spec.tsx.snap | 10 +- .../__snapshots__/regularQueue.spec.tsx.snap | 14 +-- .../__snapshots__/rejectedQueue.spec.tsx.snap | 8 +- .../__snapshots__/singleComment.spec.tsx.snap | 6 +- .../__snapshots__/stories.spec.tsx.snap | 12 +- .../AccountCompletionContainer.tsx | 3 +- src/core/client/auth/App/AppContainer.tsx | 3 +- .../auth/components/ConfirmEmailField.tsx | 8 +- .../auth/components/ConfirmPasswordField.tsx | 3 +- .../client/auth/components/EmailField.tsx | 8 +- .../client/auth/components/Header/Bar.tsx | 3 +- .../client/auth/components/Header/SubBar.tsx | 3 +- .../auth/components/Header/Subtitle.tsx | 3 +- .../client/auth/components/Header/Title.tsx | 3 +- .../auth/components/HorizontalSeparator.tsx | 3 +- .../client/auth/components/OrSeparator.tsx | 3 +- .../auth/components/SetPasswordField.tsx | 8 +- .../client/auth/components/UsernameField.tsx | 8 +- src/core/client/auth/index.tsx | 3 +- .../UnorderedList/ListItem.tsx | 3 +- .../UnorderedList/UnorderedList.tsx | 3 +- .../auth/views/SignUp/SignUpWithEmail.tsx | 3 +- .../framework/components/FacebookButton.tsx | 3 +- .../framework/components/GoogleButton.tsx | 3 +- .../framework/components/OIDCButton.tsx | 3 +- .../framework/helpers/createContextHOC.tsx | 2 +- .../framework/lib/i18n/withGetMessage.tsx | 2 +- .../lib/intersection/IntersectionContext.tsx | 2 +- .../framework/lib/intersection/withInView.tsx | 2 +- .../lib/relay/createFetchContainer.tsx | 2 +- .../lib/relay/createMutationContainer.tsx | 2 +- .../lib/relay/withLocalStateContainer.tsx | 2 +- .../framework/lib/router/withRouteConfig.ts | 2 +- src/core/client/install/index.tsx | 3 +- src/core/client/stream/App/App.tsx | 3 +- src/core/client/stream/App/TabBar.tsx | 17 ++- .../client/stream/App/TabBarContainer.tsx | 3 +- src/core/client/stream/classes.ts | 105 ++++++++++++++++++ .../common/NamedComponent/NamedComponent.tsx | 13 +++ .../stream/common/Timestamp/Timestamp.tsx | 6 +- .../__snapshots__/Timestamp.spec.tsx.snap | 2 +- .../common/UserBox/UserBoxContainer.tsx | 3 +- src/core/client/stream/index.tsx | 3 +- .../Comments/Comment/CommentContainer.tsx | 12 +- .../ReplyCommentForm/ReplyCommentForm.tsx | 7 +- .../tabs/Comments/Comment/TopBarLeft.tsx | 3 +- .../Comments/Comment/UserTagsContainer.tsx | 3 +- .../Comments/Comment/Username/Username.tsx | 11 +- .../CommentContainer.spec.tsx.snap | 7 ++ .../stream/tabs/Comments/CommentsPane.tsx | 3 +- .../PermalinkView/PermalinkViewQuery.tsx | 3 +- .../PermalinkView/Timeline/Circle.tsx | 3 +- .../Comments/PermalinkView/Timeline/Line.tsx | 3 +- .../tabs/Comments/ReplyList/ReplyList.tsx | 3 +- .../PostCommentForm/PostCommentForm.tsx | 4 + .../PostCommentForm/PostCommentFormFake.tsx | 6 +- .../PostCommentFormFake.spec.tsx.snap | 6 +- .../Profile/CommentHistory/CommentHistory.tsx | 6 +- .../Profile/CommentHistory/HistoryComment.tsx | 3 +- .../renderFeaturedStream.spec.tsx.snap | 19 ++-- .../__snapshots__/permalinkView.spec.tsx.snap | 25 +++-- ...permalinkViewLoadMoreParents.spec.tsx.snap | 30 ++--- .../__snapshots__/editComment.spec.tsx.snap | 36 +++--- .../__snapshots__/loadMore.spec.tsx.snap | 10 +- .../__snapshots__/postComment.spec.tsx.snap | 5 +- .../postLocalReply.spec.tsx.snap | 47 +++++--- .../__snapshots__/postReply.spec.tsx.snap | 17 ++- .../renderCommunityGuidelines.spec.tsx.snap | 17 ++- .../renderMessageBox.spec.tsx.snap | 12 +- .../__snapshots__/renderReplies.spec.tsx.snap | 20 ++-- .../__snapshots__/renderStream.spec.tsx.snap | 23 ++-- .../__snapshots__/reportComment.spec.tsx.snap | 2 +- .../showAllReplies.spec.tsx.snap | 5 +- .../showConversation.spec.tsx.snap | 5 +- .../__snapshots__/sortStream.spec.tsx.snap | 10 +- .../renderConfigure.spec.tsx.snap | 2 +- .../__snapshots__/myComments.spec.tsx.snap | 4 +- .../client/ui/components/Button/Button.tsx | 46 ++++---- src/core/client/ui/components/Delay/Delay.tsx | 3 +- .../client/ui/components/Marker/Count.tsx | 3 +- .../client/ui/components/Marker/Marker.tsx | 3 +- .../components/RelativeTime/RelativeTime.tsx | 2 +- .../ui/components/SelectField/OptGroup.tsx | 3 +- .../ui/components/SelectField/Option.tsx | 3 +- src/core/client/ui/components/Tag/Tag.tsx | 3 +- src/core/client/ui/hocs/withKeyboardFocus.tsx | 2 +- src/core/client/ui/hocs/withMouseHover.tsx | 2 +- 102 files changed, 504 insertions(+), 328 deletions(-) create mode 100644 src/core/client/stream/classes.ts create mode 100644 src/core/client/stream/common/NamedComponent/NamedComponent.tsx diff --git a/package-lock.json b/package-lock.json index b775a8cbd..cf8434155 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23643,7 +23643,7 @@ "dependencies": { "async": { "version": "1.5.2", - "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true } diff --git a/src/core/client/admin/components/ModerateCard/Timestamp.tsx b/src/core/client/admin/components/ModerateCard/Timestamp.tsx index 54f8c5461..0f699ed63 100644 --- a/src/core/client/admin/components/ModerateCard/Timestamp.tsx +++ b/src/core/client/admin/components/ModerateCard/Timestamp.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import { RelativeTime } from "coral-ui/components"; diff --git a/src/core/client/admin/components/ModerateCard/Username.tsx b/src/core/client/admin/components/ModerateCard/Username.tsx index b29792346..7a9f336cb 100644 --- a/src/core/client/admin/components/ModerateCard/Username.tsx +++ b/src/core/client/admin/components/ModerateCard/Username.tsx @@ -1,6 +1,5 @@ import cn from "classnames"; -import React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import { Typography } from "coral-ui/components"; diff --git a/src/core/client/admin/routes/Invite/SetUsernameField.tsx b/src/core/client/admin/routes/Invite/SetUsernameField.tsx index 6354ba445..b54575126 100644 --- a/src/core/client/admin/routes/Invite/SetUsernameField.tsx +++ b/src/core/client/admin/routes/Invite/SetUsernameField.tsx @@ -11,8 +11,7 @@ import { ValidationMessage, } from "coral-ui/components"; import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import { Field } from "react-final-form"; interface Props { diff --git a/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx b/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx index 85c42c04d..e8fb4a75b 100644 --- a/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx +++ b/src/core/client/admin/routes/Login/AccountCompletionContainer.tsx @@ -1,6 +1,5 @@ import { RouterState, withRouter } from "found"; -import * as React from "react"; -import { Component } from "react"; +import React, { Component } from "react"; import { AccountCompletionContainer_auth as AuthData } from "coral-admin/__generated__/AccountCompletionContainer_auth.graphql"; import { AccountCompletionContainer_viewer as UserData } from "coral-admin/__generated__/AccountCompletionContainer_viewer.graphql"; diff --git a/src/core/client/admin/routes/Login/EmailField.tsx b/src/core/client/admin/routes/Login/EmailField.tsx index c4c6fc456..439fb2961 100644 --- a/src/core/client/admin/routes/Login/EmailField.tsx +++ b/src/core/client/admin/routes/Login/EmailField.tsx @@ -1,3 +1,7 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent } from "react"; +import { Field } from "react-final-form"; + import { composeValidators, required, @@ -9,10 +13,6 @@ import { TextField, ValidationMessage, } from "coral-ui/components"; -import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { FunctionComponent } from "react"; -import { Field } from "react-final-form"; interface Props { disabled: boolean; diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx index 4d2117959..5cfa422ad 100644 --- a/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx +++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx @@ -1,3 +1,7 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent } from "react"; +import { Field } from "react-final-form"; + import { composeValidators, required, @@ -9,10 +13,6 @@ import { TextField, ValidationMessage, } from "coral-ui/components"; -import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { FunctionComponent } from "react"; -import { Field } from "react-final-form"; interface Props { disabled: boolean; diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx index f15c0c32e..5bca52d4f 100644 --- a/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx +++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx @@ -1,3 +1,7 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent } from "react"; +import { Field } from "react-final-form"; + import { composeValidators, required, @@ -9,10 +13,6 @@ import { TextField, ValidationMessage, } from "coral-ui/components"; -import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { FunctionComponent } from "react"; -import { Field } from "react-final-form"; interface Props { disabled: boolean; diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx index 6dd562b4d..2132d8ee5 100644 --- a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx +++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import { Icon } from "coral-ui/components"; diff --git a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx index 922905ba7..7fcf4bc5f 100644 --- a/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx +++ b/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import styles from "./UnorderedList.css"; diff --git a/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx b/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx index bee4d82bc..bd7997407 100644 --- a/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx +++ b/src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx @@ -1,3 +1,7 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent } from "react"; +import { Field } from "react-final-form"; + import { PasswordField } from "coral-framework/components"; import { composeValidators, @@ -10,10 +14,6 @@ import { InputLabel, ValidationMessage, } from "coral-ui/components"; -import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { FunctionComponent } from "react"; -import { Field } from "react-final-form"; interface Props { disabled: boolean; diff --git a/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx b/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx index 6df6ea83a..400c3230e 100644 --- a/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx +++ b/src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx @@ -1,3 +1,7 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent } from "react"; +import { Field } from "react-final-form"; + import { composeValidators, required, @@ -10,10 +14,6 @@ import { TextField, ValidationMessage, } from "coral-ui/components"; -import { Localized } from "fluent-react/compat"; -import * as React from "react"; -import { FunctionComponent } from "react"; -import { Field } from "react-final-form"; interface Props { disabled: boolean; diff --git a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx index 9ed69766e..e1b3dcb69 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx +++ b/src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import { Flex } from "coral-ui/components"; diff --git a/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx b/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx index 98cd8f2bd..b8fa98ed4 100644 --- a/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx +++ b/src/core/client/admin/routes/Login/views/SignIn/OrSeparator.tsx @@ -1,6 +1,5 @@ import { Localized } from "fluent-react/compat"; -import React from "react"; -import { FunctionComponent } from "react"; +import React, { FunctionComponent } from "react"; import HorizontalSeparator from "./HorizontalSeparator"; diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap index 2cefab975..2e5cb05d2 100644 --- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap +++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap @@ -159,7 +159,7 @@ exports[`renders community 1`] = ` >