Merge pull request #6416 from weseek/support/scss-module-import

support: Scss module import for PageComments

packages/app/src/components/PageComment.module.scss

@@ -0,0 +1,13 @@
+.page-comment-styles :global {
+  .page-comments {
+    h4 {
+      margin-bottom: 1em;
+    }
+  }
+
+  // reply button
+  .btn-comment-reply {
+    margin-top: 0.5em;
+    border: none;
+  }
+}

packages/app/src/components/PageComment.tsx

@@ -20,6 +20,8 @@ import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRender
 import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
 
+import styles from './PageComment.module.scss';
+
 type Props = {
   pageId?: Nullable<string>
   isReadOnly: boolean,
@@ -157,7 +159,7 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
 
   return (
     <>
-      <div className="page-comments-row comment-list">
+      <div className={`${styles['page-comment-styles']} page-comments-row comment-list`}>
         <div className="container-lg">
           <div className="page-comments">
             <h2 className={commentTitleClasses}><i className="icon-fw icon-bubbles"></i>Comments</h2>

packages/app/src/components/PageComment/Comment.module.scss

@@ -0,0 +1,87 @@
+@use '../../styles/bootstrap/init' as bs;
+@use './_comment-inheritance';
+
+.comment-styles :global {
+  .page-comment-writer {
+    @include bs.media-breakpoint-down(xs) {
+      height: 3.5em;
+    }
+  }
+
+  .page-comment {
+    position: relative;
+    padding-top: 70px;
+    margin-top: -70px;
+    pointer-events: none;
+
+    // user name
+    .page-comment-creator {
+      margin-top: -0.5em;
+      margin-bottom: 0.5em;
+      font-weight: bold;
+    }
+
+    // user icon
+    .picture {
+      @extend %picture;
+    }
+
+    // comment section
+    .page-comment-main {
+      @extend %comment-section;
+      @include bs.media-breakpoint-up(sm) {
+        margin-left: 4.5em;
+      }
+      @include bs.media-breakpoint-down(xs) {
+        &:before {
+          content: none;
+        }
+      }
+
+      pointer-events: auto;
+
+      // delete button
+      .page-comment-control {
+        position: absolute;
+        top: 0;
+        right: 0;
+        visibility: hidden;
+      }
+
+      &:hover > .page-comment-control {
+        visibility: visible;
+      }
+    }
+
+    // comment body
+    .page-comment-body {
+      margin-bottom: 0.5em;
+      word-wrap: break-word;
+    }
+
+    // older comments
+    &.page-comment-older {
+    }
+    // newer comments
+    &.page-comment-newer {
+      opacity: 0.7;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .page-comment-meta {
+      display: flex;
+      justify-content: flex-end;
+
+      font-size: 0.9em;
+      color: bs.$gray-400;
+    }
+
+    .page-comment-revision svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}

packages/app/src/components/PageComment/Comment.tsx

@@ -17,6 +17,8 @@ import Username from '../User/Username';
 import { CommentControl } from './CommentControl';
 import { CommentEditor } from './CommentEditor';
 
+import styles from './Comment.module.scss';
+
 type CommentProps = {
   comment: ICommentHasId,
   isReadOnly: boolean,
@@ -116,7 +118,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
     : null;
 
   return (
-    <>
+    <div className={`${styles['comment-styles']}`}>
       {(isReEdit && !isReadOnly) ? (
         <CommentEditor
           rendererOptions={rendererOptions}
@@ -168,6 +170,6 @@ export const Comment = (props: CommentProps): JSX.Element => {
         </div>
       )
       }
-    </>
+    </div>
   );
 };

packages/app/src/components/PageComment/CommentControl.tsx

@@ -9,6 +9,7 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
   const { onClickEditBtn, onClickDeleteBtn } = props;
 
   return (
+    // The page-comment-control class is imported from Comment.module.scss
     <div className="page-comment-control">
       <button type="button" className="btn btn-link p-2" onClick={onClickEditBtn}>
         <i className="ti ti-pencil"></i>

packages/app/src/components/PageComment/CommentEditor.module.scss

@@ -0,0 +1,32 @@
+@use '~/styles/bootstrap/init' as bs;
+@use './_comment-inheritance';
+
+// display cheatsheet for comment form only
+.comment-editor-styles :global {
+  .comment-form {
+    position: relative;
+    margin-top: 1em;
+
+    // user icon
+    .picture {
+      @extend %picture;
+    }
+
+    // seciton
+    .comment-form-main {
+      @extend %comment-section;
+      margin-left: 4.5em;
+      @include bs.media-breakpoint-down(xs) {
+        margin-left: 3.5em;
+      }
+    }
+
+    // textarea
+    .comment-write {
+      margin-bottom: 0.5em;
+    }
+    .comment-form-preview {
+      padding-top: 0.5em;
+    }
+  }
+}

packages/app/src/components/PageComment/CommentEditor.tsx

@@ -19,13 +19,15 @@ import {
 import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
 import { useIsMobile } from '~/stores/ui';
 
-
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
 import NotAvailableForGuest from '../NotAvailableForGuest';
 import { SlackNotification } from '../SlackNotification';
 
 import { CommentPreview } from './CommentPreview';
 
+import styles from './CommentEditor.module.scss';
+
+
 const navTabMapping = {
   comment_editor: {
     Icon: () => <i className="icon-settings" />,
@@ -328,7 +330,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
   };
 
   return (
-    <div className="form page-comment-form">
+    <div className={`${styles['comment-editor-styles']} form page-comment-form`}>
       <div className="comment-form">
         <div className="comment-form-user">
           <UserPicture user={currentUser} noLink noTooltip />

packages/app/src/components/PageComment/DeleteCommentModal.module.scss

@@ -0,0 +1,10 @@
+// modal
+.page-comment-delete-modal :global {
+  .modal-content .modal-body {
+    .comment-body {
+      max-height: 13em;
+      // scrollable
+      overflow-y: auto;
+    }
+  }
+}

packages/app/src/components/PageComment/DeleteCommentModal.tsx

@@ -9,6 +9,8 @@ import {
 import { ICommentHasId } from '../../interfaces/comment';
 import Username from '../User/Username';
 
+import styles from './DeleteCommentModal.module.scss';
+
 
 type DeleteCommentModalProps = {
   isShown: boolean,
@@ -39,7 +41,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
   const commentBodyElement = <span style={{ whiteSpace: 'pre-wrap' }}>{commentBody}</span>;
 
   return (
-    <Modal isOpen={isShown} toggle={cancel} className="page-comment-delete-modal">
+    <Modal isOpen={isShown} toggle={cancel} className={`${styles['page-comment-delete-modal']}`}>
       <ModalHeader tag="h4" toggle={cancel} className="bg-danger text-light">
         <span>
           <i className="icon-fw icon-fire"></i>

packages/app/src/components/PageComment/ReplyComments.module.scss

@@ -0,0 +1,11 @@
+/*
+* reply
+*/
+.page-comment-reply :global {
+  margin-top: 1em;
+}
+
+// remove margin after hidden replies
+.page-comments-hidden-replies + .page-comment-reply :global {
+  margin-top: 0;
+}

packages/app/src/components/PageComment/ReplyComments.tsx

@@ -10,6 +10,8 @@ import { useIsAllReplyShown } from '../../stores/context';
 
 import { Comment } from './Comment';
 
+import styles from './ReplyComments.module.scss';
+
 type ReplycommentsProps = {
   isReadOnly: boolean,
   replyList: ICommentHasIdList,
@@ -34,7 +36,7 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
 
   const renderReply = (reply: ICommentHasId) => {
     return (
-      <div key={reply._id} className="page-comment-reply ml-4 ml-sm-5 mr-3">
+      <div key={reply._id} className={`${styles['page-comment-reply']} ml-4 ml-sm-5 mr-3`}>
         <Comment
           rendererOptions={rendererOptions}
           deleteBtnClicked={deleteBtnClicked}
@@ -77,7 +79,7 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
   return (
     <>
       {areThereHiddenReplies && (
-        <div className="page-comments-hidden-replies">
+        <div className={`${styles['page-comments-hidden-replies']}`}>
           <Collapse isOpen={isOlderRepliesShown}>
             <div>{hiddenElements}</div>
           </Collapse>

packages/app/src/components/PageComment/_comment-inheritance.scss

@@ -0,0 +1,34 @@
+@use '../../styles/bootstrap/init' as bs;
+
+%comment-section {
+  position: relative;
+  padding: 1em;
+
+  // speech balloon
+  &:before {
+    position: absolute;
+    top: 1.5em;
+    left: -1em;
+    display: block;
+    width: 0;
+    content: '';
+    border: 1em solid transparent;
+    border-left-width: 0;
+
+    @include bs.media-breakpoint-down(xs) {
+      top: 1em;
+    }
+  }
+}
+
+%picture {
+  float: left;
+  width: 3em;
+  height: 3em;
+  margin-top: 0.8em;
+
+  @include bs.media-breakpoint-down(xs) {
+    width: 2em;
+    height: 2em;
+  }
+}

packages/app/src/components/PageContentFooter.module.scss

@@ -1,3 +1,11 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.page-content-footer :global {
+  border-top: solid 1px transparent;
+  .page-meta {
+    font-size: 0.95em;
+  }
+}
 // TODO: Should Soft Coding see: https://github.com/weseek/growi/pull/6404
 .page-content-footer-skelton :global {
   width: 300px;

packages/app/src/components/PageContentFooter.tsx

@@ -20,7 +20,8 @@ export const PageContentFooter = memo((): JSX.Element => {
   }
 
   return (
-    <div className="page-content-footer py-4 d-edit-none d-print-none">
+    // TODO: page-content-footer, scss module import and global import.
+    <div className={`${styles['page-content-footer']} page-content-footer py-4 d-edit-none d-print-none}`}>
       <div className="grw-container-convertible">
         <div className="page-meta">
           <AuthorInfo user={page.creator} date={page.createdAt} mode="create" locate="footer" />

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -81,7 +81,8 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   const SubNavButtons = dynamic<SubNavButtonsProps>(() => import('../Navbar/SubNavButtons').then(mod => mod.SubNavButtons), { ssr: false });
   const RevisionLoader = dynamic(() => import('../Page/RevisionLoader'), { ssr: false });
   const PageComment = dynamic(() => import('../PageComment').then(mod => mod.PageComment), { ssr: false });
-  const PageContentFooter = dynamic(() => import('../PageContentFooter'), { ssr: false });
+  // TODO: Commentout for eslint error
+  // const PageContentFooter = dynamic(() => import('../PageContentFooter'), { ssr: false });
 
   const scrollElementRef = useRef(null);
 
@@ -217,12 +218,13 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
           highlightKeywords={highlightKeywords}
         />
         <PageComment pageId={page._id} highlightKeywords={highlightKeywords} isReadOnly hideIfEmpty />
-        <PageContentFooter
+        {/* TODO: Commentout for eslint error */}
+        {/* <PageContentFooter
           // createdAt={new Date(pageWithMeta.data.createdAt)}
           // updatedAt={new Date(pageWithMeta.data.updatedAt)}
           // creator={pageWithMeta.data.creator}
           // revisionAuthor={pageWithMeta.data.lastUpdateUser}
-        />
+        /> */}
       </div>
     </div>
   );

packages/app/src/styles/_comment.scss

@@ -9,57 +9,19 @@
   }
 }
 
+
 .page-comments {
+  // TODO: Never use .page-comments-list-toggle-older class.
   .page-comments-list-toggle-older {
     display: inline-block;
     font-size: 0.9em;
   }
+  // TODO: "pointer-events: none;" moved to "Comment.module.scss" now.
+  // .page-comment was defined in _comment.scss and _comment_growi.scss
+  // Required if .page-comment is not under .growi but under .page-comments, or under .growi but not under .page-comments
   .page-comment {
     padding-top: 50px;
     margin-top: -50px;
     pointer-events: none;
   }
-
-  .page-comment {
-    // older comments
-    &.page-comment-older {
-    }
-    // newer comments
-    &.page-comment-newer {
-      opacity: 0.7;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .page-comment-meta {
-      display: flex;
-      justify-content: flex-end;
-
-      font-size: 0.9em;
-      color: $gray-400;
-    }
-
-    .page-comment-revision svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .page-comment-main {
-    pointer-events: auto;
-
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      visibility: hidden;
-    }
-
-    &:hover > .page-comment-control {
-      visibility: visible;
-    }
-  }
 }

packages/app/src/styles/_comment_growi.scss

@@ -1,129 +1,13 @@
 .growi {
-  %comment-section {
-    position: relative;
-    padding: 1em;
-
-    // speech balloon
-    &:before {
-      position: absolute;
-      top: 1.5em;
-      left: -1em;
-      display: block;
-      width: 0;
-      content: '';
-      border: 1em solid transparent;
-      border-left-width: 0;
-
-      @include media-breakpoint-down(xs) {
-        top: 1em;
-      }
-    }
-  }
-
-  %picture {
-    float: left;
-    width: 3em;
-    height: 3em;
-    margin-top: 0.8em;
-
-    @include media-breakpoint-down(xs) {
-      width: 2em;
-      height: 2em;
-    }
-  }
-
-  .page-comments {
-    h4 {
-      margin-bottom: 1em;
-    }
-  }
-
-  .page-comment-writer {
-    @include media-breakpoint-down(xs) {
-      height: 3.5em;
-    }
-  }
-
-  .page-comment {
-    position: relative;
-    padding-top: 70px;
-    margin-top: -70px;
-
-    // ユーザー名
-    .page-comment-creator {
-      margin-top: -0.5em;
-      margin-bottom: 0.5em;
-      font-weight: bold;
-    }
-
-    // ユーザーアイコン
-    .picture {
-      @extend %picture;
-    }
-
-    // コメントセクション
-    .page-comment-main {
-      @extend %comment-section;
-      @include media-breakpoint-up(sm) {
-        margin-left: 4.5em;
-      }
-      @include media-breakpoint-down(xs) {
-        &:before {
-          content: none;
-        }
-      }
-    }
-
-    // コメント本文
-    .page-comment-body {
-      margin-bottom: 0.5em;
-      word-wrap: break-word;
-    }
-  }
-
-  /*
-   * reply
-   */
-  .page-comment-reply {
-    margin-top: 1em;
-  }
-  // remove margin after hidden replies
-  .page-comments-hidden-replies + .page-comment-reply {
-    margin-top: 0;
-  }
-  // reply button
-  .btn.btn-comment-reply {
-    margin-top: 0.5em;
-    border: none;
-  }
-
   // display cheatsheet for comment form only
   .comment-form {
+    // TODO: Never use .editor-cheatsheet class.
     .editor-cheatsheet {
       display: none;
     }
 
-    position: relative;
-    margin-top: 1em;
-
-    // user icon
-    .picture {
-      @extend %picture;
-    }
-
-    // seciton
-    .comment-form-main {
-      @extend %comment-section;
-      margin-left: 4.5em;
-      @include media-breakpoint-down(xs) {
-        margin-left: 3.5em;
-      }
-    }
-
     // textarea
-    .comment-write {
-      margin-bottom: 0.5em;
-    }
+    // TODO: Never use .comment-form-comment class.
     .comment-form-comment {
       height: 80px;
       &:focus,
@@ -132,8 +16,5 @@
         transition: height 0.2s ease-out;
       }
     }
-    .comment-form-preview {
-      padding-top: 0.5em;
-    }
   }
 }

packages/app/src/styles/_page-content-footer.scss

@@ -1,6 +0,0 @@
-.page-content-footer {
-  border-top: solid 1px transparent;
-  .page-meta {
-    font-size: 0.95em;
-  }
-}