WIP: universalize components

apps/app/src/components/PageAlert/PageStaleAlert.tsx → apps/app/src/components-universal/PageView/PageAlerts/PageStaleAlert.tsx

@@ -2,8 +2,8 @@ import { isIPageInfoForEntity } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 
 
-import { useIsEnabledStaleNotification } from '../../stores/context';
-import { useSWRxCurrentPage, useSWRxPageInfo } from '../../stores/page';
+import { useIsEnabledStaleNotification } from '~/stores/context';
+import { useSWRxCurrentPage, useSWRxPageInfo } from '~/stores/page';
 
 export const PageStaleAlert = ():JSX.Element => {
   const { t } = useTranslation();

apps/app/src/components/PageAlert/WipPageAlert.tsx → apps/app/src/components-universal/PageView/PageAlerts/WipPageAlert.tsx

@@ -2,12 +2,11 @@ import React, { useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
+import { publish } from '~/client/services/page-operation';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useSWRMUTxCurrentPage, useSWRxCurrentPage } from '~/stores/page';
 import { mutatePageTree } from '~/stores/page-listing';
 
-import { publish } from '../../client/services/page-operation';
-
 
 export const WipPageAlert = (): JSX.Element => {
   const { t } = useTranslation();

apps/app/src/components-universal/PageView/PageAlerts/index.ts

@@ -0,0 +1 @@
+export * from './PageAlerts';

apps/app/src/components/PageContentFooter.tsx → apps/app/src/components-universal/PageView/PageContentFooter.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import type { IPage, IPagePopulatedToShowRevision } from '@growi/core';
 import dynamic from 'next/dynamic';
 
 import styles from './PageContentFooter.module.scss';
 
-const AuthorInfo = dynamic(() => import('./AuthorInfo').then(mod => mod.AuthorInfo), { ssr: false });
+const AuthorInfo = dynamic(() => import('~/components/AuthorInfo').then(mod => mod.AuthorInfo), { ssr: false });
 
 export type PageContentFooterProps = {
   page: IPage | IPagePopulatedToShowRevision,

apps/app/src/components/Page/PageView.tsx → apps/app/src/components-universal/PageView/PageView.tsx

@@ -18,26 +18,27 @@ import { useSWRxCurrentPage, useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import { useIsMobile } from '~/stores/ui';
 
-import { PageViewLayout } from '../Common/PageViewLayout';
-import { PageAlerts } from '../PageAlert/PageAlerts';
-import { PageContentFooter } from '../PageContentFooter';
 import { UserInfo } from '../User/UserInfo';
 
+import { PageAlerts } from './PageAlerts/PageAlerts';
+import { PageContentFooter } from './PageContentFooter';
+import { PageViewLayout } from './PageViewLayout';
 import RevisionRenderer from './RevisionRenderer';
 
+
 import styles from './PageView.module.scss';
 
 
-const NotCreatablePage = dynamic(() => import('../NotCreatablePage').then(mod => mod.NotCreatablePage), { ssr: false });
-const ForbiddenPage = dynamic(() => import('../ForbiddenPage'), { ssr: false });
-const NotFoundPage = dynamic(() => import('../NotFoundPage'), { ssr: false });
-const PageSideContents = dynamic(() => import('../PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
-const PageContentsUtilities = dynamic(() => import('./PageContentsUtilities').then(mod => mod.PageContentsUtilities), { ssr: false });
-const Comments = dynamic(() => import('../Comments').then(mod => mod.Comments), { ssr: false });
-const UsersHomepageFooter = dynamic(() => import('../UsersHomepageFooter')
+const NotCreatablePage = dynamic(() => import('../../components/NotCreatablePage').then(mod => mod.NotCreatablePage), { ssr: false });
+const ForbiddenPage = dynamic(() => import('../../components/ForbiddenPage'), { ssr: false });
+const NotFoundPage = dynamic(() => import('../../components/NotFoundPage'), { ssr: false });
+const PageSideContents = dynamic(() => import('../../components/PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
+const PageContentsUtilities = dynamic(() => import('../../components/Page/PageContentsUtilities').then(mod => mod.PageContentsUtilities), { ssr: false });
+const Comments = dynamic(() => import('../../components/Comments').then(mod => mod.Comments), { ssr: false });
+const UsersHomepageFooter = dynamic(() => import('../../components/UsersHomepageFooter')
   .then(mod => mod.UsersHomepageFooter), { ssr: false });
-const IdenticalPathPage = dynamic(() => import('../IdenticalPathPage').then(mod => mod.IdenticalPathPage), { ssr: false });
-const SlideRenderer = dynamic(() => import('./SlideRenderer').then(mod => mod.SlideRenderer), { ssr: false });
+const IdenticalPathPage = dynamic(() => import('../../components/IdenticalPathPage').then(mod => mod.IdenticalPathPage), { ssr: false });
+const SlideRenderer = dynamic(() => import('../../components/Page/SlideRenderer').then(mod => mod.SlideRenderer), { ssr: false });
 
 
 type Props = {

apps/app/src/components-universal/PageView/index.ts

@@ -0,0 +1 @@
+// Do not re-export in this directory for performance reasons

apps/app/src/components/ShareLinkPageView.tsx → apps/app/src/components-universal/ShareLinkPageView/ShareLinkPageView.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
@@ -13,18 +13,19 @@ import { useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
 
-import { PageViewLayout } from './Common/PageViewLayout';
-import RevisionRenderer from './Page/RevisionRenderer';
-import ShareLinkAlert from './Page/ShareLinkAlert';
-import { PageContentFooter } from './PageContentFooter';
+import { PageContentFooter } from '../PageView/PageContentFooter';
+import { PageViewLayout } from '../PageView/PageViewLayout';
+import RevisionRenderer from '../PageView/RevisionRenderer';
+
+import ShareLinkAlert from './ShareLinkAlert';
 
 
 const logger = loggerFactory('growi:Page');
 
 
-const PageSideContents = dynamic(() => import('./PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
-const ForbiddenPage = dynamic(() => import('./ForbiddenPage'), { ssr: false });
-const SlideRenderer = dynamic(() => import('./Page/SlideRenderer').then(mod => mod.SlideRenderer), { ssr: false });
+const PageSideContents = dynamic(() => import('../../components/PageSideContents').then(mod => mod.PageSideContents), { ssr: false });
+const ForbiddenPage = dynamic(() => import('../../components/ForbiddenPage'), { ssr: false });
+const SlideRenderer = dynamic(() => import('../../components/Page/SlideRenderer').then(mod => mod.SlideRenderer), { ssr: false });
 
 type Props = {
   pagePath: string,

apps/app/src/components-universal/ShareLinkPageView/index.ts

@@ -0,0 +1 @@
+export * from './ShareLinkPageView'

apps/app/src/components/Page/RevisionLoader.tsx

@@ -9,7 +9,7 @@ import { useSWRxPageRevision } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
 
-import RevisionRenderer from './RevisionRenderer';
+import RevisionRenderer from '../../components-universal/PageView/RevisionRenderer';
 
 export const ROOT_ELEM_ID = 'revision-loader' as const;
 

apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -2,7 +2,6 @@ import React, {
   useCallback, useMemo, useState,
 } from 'react';
 
-import type { IUser } from '@growi/core';
 import { UserPicture, LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
@@ -13,7 +12,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useDeleteAttachmentModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
-import { Username } from '../User/Username';
+import { Username } from '../../components-universal/User/Username';
 
 import styles from './DeleteAttachmentModal.module.scss';
 

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

@@ -12,10 +12,10 @@ import urljoin from 'url-join';
 import type { RendererOptions } from '~/interfaces/renderer-options';
 
 
+import RevisionRenderer from '../../components-universal/PageView/RevisionRenderer';
+import { Username } from '../../components-universal/User/Username';
 import type { ICommentHasId } from '../../interfaces/comment';
 import FormattedDistanceDate from '../FormattedDistanceDate';
-import RevisionRenderer from '../Page/RevisionRenderer';
-import { Username } from '../User/Username';
 
 import { CommentControl } from './CommentControl';
 import { CommentEditor } from './CommentEditor';

apps/app/src/components/PageComment/CommentPreview.tsx

@@ -1,6 +1,6 @@
 import { useCommentPreviewOptions } from '~/stores/renderer';
 
-import RevisionRenderer from '../Page/RevisionRenderer';
+import RevisionRenderer from '../../components-universal/PageView/RevisionRenderer';
 
 
 import styles from './CommentPreview.module.scss';

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

@@ -8,8 +8,8 @@ import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
+import { Username } from '../../components-universal/User/Username';
 import type { ICommentHasId } from '../../interfaces/comment';
-import { Username } from '../User/Username';
 
 import styles from './DeleteCommentModal.module.scss';
 

apps/app/src/components/PageEditor/Preview.tsx

@@ -5,7 +5,7 @@ import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
 import type { RendererOptions } from '~/interfaces/renderer-options';
 import { useIsEnabledMarp } from '~/stores/context';
 
-import RevisionRenderer from '../Page/RevisionRenderer';
+import RevisionRenderer from '../../components-universal/PageView/RevisionRenderer';
 import { SlideRenderer } from '../Page/SlideRenderer';
 
 import styles from './Preview.module.scss';

apps/app/src/components/PageHistory/Revision.tsx

@@ -7,8 +7,8 @@ import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import urljoin from 'url-join';
 
-import UserDate from '../User/UserDate';
-import { Username } from '../User/Username';
+import UserDate from '../../components-universal/User/UserDate';
+import { Username } from '../../components-universal/User/Username';
 
 import styles from './Revision.module.scss';
 

apps/app/src/components/PageHistory/RevisionDiff.tsx

@@ -12,7 +12,7 @@ import urljoin from 'url-join';
 
 import { Themes, useNextThemes } from '~/stores-universal/use-next-themes';
 
-import UserDate from '../User/UserDate';
+import UserDate from '../../components-universal/User/UserDate';
 
 import styles from './RevisionDiff.module.scss';
 

apps/app/src/components/PageStatusAlert.tsx

@@ -8,7 +8,7 @@ import { useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useRemoteRevisionId, useRemoteRevisionLastUpdateUser } from '~/stores/remote-latest-page';
 
-import { Username } from './User/Username';
+import { Username } from '../components-universal/User/Username';
 
 import styles from './PageStatusAlert.module.scss';
 

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

@@ -27,7 +27,6 @@ import { mutateSearching } from '~/stores/search';
 
 import type { AdditionalMenuItemsRendererProps, ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 import type { RevisionLoaderProps } from '../Page/RevisionLoader';
-import type { PageContentFooterProps } from '../PageContentFooter';
 
 import styles from './SearchResultContent.module.scss';
 
@@ -38,7 +37,10 @@ const _fluidLayoutClass = styles['fluid-layout'];
 const PageControls = dynamic(() => import('../PageControls').then(mod => mod.PageControls), { ssr: false });
 const RevisionLoader = dynamic<RevisionLoaderProps>(() => import('../Page/RevisionLoader').then(mod => mod.RevisionLoader), { ssr: false });
 const PageComment = dynamic(() => import('../PageComment').then(mod => mod.PageComment), { ssr: false });
-const PageContentFooter = dynamic<PageContentFooterProps>(() => import('../PageContentFooter').then(mod => mod.PageContentFooter), { ssr: false });
+const PageContentFooter = dynamic(
+  () => import('~/components-universal/PageView/PageContentFooter').then(mod => mod.PageContentFooter),
+  { ssr: false },
+);
 
 type AdditionalMenuItemsProps = AdditionalMenuItemsRendererProps & {
   pageId: string,

apps/app/src/components/Sidebar/Custom/CustomSidebarSubstance.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import RevisionRenderer from '~/components/Page/RevisionRenderer';
+import RevisionRenderer from '~/components-universal/PageView/RevisionRenderer';
 import { useSWRxPageByPath } from '~/stores/page';
 import { useCustomSidebarOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';

apps/app/src/pages/[[...path]].page.tsx

@@ -22,7 +22,7 @@ import superjson from 'superjson';
 
 import { BasicLayout } from '~/components-universal/Layout/BasicLayout';
 import { DrawioViewerScript } from '~/components-universal/Script/DrawioViewerScript';
-import { PageView } from '~/components/Page/PageView';
+import { PageView } from '~/components-universal/PageView/PageView';
 import { SupportedAction, type SupportedActionType } from '~/interfaces/activity';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';

apps/app/src/pages/share/[[...path]].page.tsx

@@ -10,8 +10,8 @@ import superjson from 'superjson';
 
 import { ShareLinkLayout } from '~/components-universal/Layout/ShareLinkLayout';
 import { DrawioViewerScript } from '~/components-universal/Script/DrawioViewerScript';
+import { ShareLinkPageView } from '~/components-universal/ShareLinkPageView';
 import GrowiContextualSubNavigationSubstance from '~/components/Navbar/GrowiContextualSubNavigation';
-import { ShareLinkPageView } from '~/components/ShareLinkPageView';
 import type { SupportedActionType } from '~/interfaces/activity';
 import { SupportedAction } from '~/interfaces/activity';
 import type { CrowiRequest } from '~/interfaces/crowi-request';