apply rollup-plugin-node-externals to @growi/ui

apps/app/src/components/Admin/AuditLog/ActivityTable.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState, useCallback } from 'react';
 
 import { pagePathUtils } from '@growi/core/dist/utils';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useTranslation } from 'react-i18next';

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import dateFnsFormat from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 

apps/app/src/components/Admin/Users/UserTable.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import type { IUserHasId } from '@growi/core/dist/interfaces';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import dateFnsFormat from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 

apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -2,7 +2,7 @@ import React, {
   useEffect, useState, useRef, useMemo, useCallback,
 } from 'react';
 
-import { Breakpoint } from '@growi/ui/dist/interfaces/breakpoints';
+import { Breakpoint } from '@growi/ui/dist/interfaces';
 import {
   Nav, NavItem, NavLink,
 } from 'reactstrap';

apps/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 
 import type { HasObjectId } from '@growi/core/dist/interfaces';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { DropdownItem } from 'reactstrap';
 
 import { IInAppNotificationOpenable } from '~/client/interfaces/in-app-notification-openable';

apps/app/src/components/InAppNotification/PageNotification/PageModelNotification.tsx

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 
 import type { HasObjectId } from '@growi/core/dist/interfaces';
-import { PagePathLabel } from '@growi/ui/dist/components/PagePath/PagePathLabel';
+import { PagePathLabel } from '@growi/ui/dist/components/PagePath';
 import { useRouter } from 'next/router';
 
 import type { IInAppNotificationOpenable } from '~/client/interfaces/in-app-notification-openable';

apps/app/src/components/Navbar/AuthorInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { IUser } from '@growi/core/dist/interfaces';
 import { pagePathUtils } from '@growi/core/dist/utils';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns';
 import Link from 'next/link';
 

apps/app/src/components/Navbar/PersonalDropdown.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';

apps/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';

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

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 
 import type { IUser } from '@growi/core/dist/interfaces';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { IAttachmentHasId } from '@growi/core/dist/interfaces';
-import { Attachment } from '@growi/ui/dist/components/Attachment';
+import { Attachment } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 
 type Props = {

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import type { IUser } from '@growi/core/dist/interfaces';
 import * as pathUtils from '@growi/core/dist/utils/path-utils';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { format, parseISO } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';

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

@@ -2,7 +2,7 @@ import React, {
   useCallback, useState, useRef, useEffect,
 } from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import dynamic from 'next/dynamic';
 import {
   Button, TabContent, TabPane,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,

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

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 
 import type { IRevisionOnConflict } from '@growi/core/dist/interfaces';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import CodeMirror from 'codemirror/lib/codemirror';
 import { format, parseISO } from 'date-fns';
 import { useTranslation } from 'next-i18next';

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { IRevisionHasId } from '@growi/core/dist/interfaces';
 import { returnPathForURL } from '@growi/core/dist/utils/path-utils';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import urljoin from 'url-join';

apps/app/src/components/PageList/PageListItemL.tsx

@@ -9,8 +9,8 @@ import type {
   IPageInfoAll, IPageWithMeta, IPageInfoForListing,
 } from '@growi/core/dist/interfaces';
 import { isIPageInfoForListing, isIPageInfoForEntity } from '@growi/core/dist/interfaces';
-import { PageListMeta } from '@growi/ui/dist/components/PagePath/PageListMeta';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
+import { PageListMeta } from '@growi/ui/dist/components/PagePath';
 import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';

apps/app/src/components/PageList/PageListItemS.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import type { IPageHasId } from '@growi/core/dist/interfaces';
-import { PageListMeta } from '@growi/ui/dist/components/PagePath/PageListMeta';
-import { PagePathLabel } from '@growi/ui/dist/components/PagePath/PagePathLabel';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
+import { PageListMeta, PagePathLabel } from '@growi/ui/dist/components/PagePath';
 import Link from 'next/link';
 
 

apps/app/src/components/ReactMarkdownComponents/RichAttachment.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import prettyBytes from 'pretty-bytes';
 

apps/app/src/components/SearchTypeahead.tsx

@@ -3,9 +3,8 @@ import React, {
   KeyboardEvent, useCallback, useRef, useState, MouseEvent, useEffect,
 } from 'react';
 
-import { PageListMeta } from '@growi/ui/dist/components/PagePath/PageListMeta';
-import { PagePathLabel } from '@growi/ui/dist/components/PagePath/PagePathLabel';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
+import { PageListMeta, PagePathLabel } from '@growi/ui/dist/components/PagePath';
 import { AsyncTypeahead, Menu, MenuItem } from 'react-bootstrap-typeahead';
 
 import { IFocusable } from '~/client/interfaces/focusable';

apps/app/src/components/Sidebar/RecentChanges.tsx

@@ -4,8 +4,7 @@ import React, {
 
 import { DevidedPagePath, isPopulated } from '@growi/core';
 import type { IPageHasId } from '@growi/core/dist/interfaces';
-import { FootstampIcon } from '@growi/ui/dist/components/FootstampIcon';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture, FootstampIcon } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 

apps/app/src/components/User/SeenUserInfo.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 
 import type { IUser } from '@growi/core/dist/interfaces';
-import { FootstampIcon } from '@growi/ui/dist/components/FootstampIcon';
+import { FootstampIcon } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 

apps/app/src/components/User/UserInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { IUserHasId } from '@growi/core/dist/interfaces';
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
+import { UserPicture } from '@growi/ui/dist/components';
 
 import styles from './UserInfo.module.scss';
 

apps/app/src/components/User/UserPictureList.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import { UserPicture } from '@growi/ui/dist/components';
 import PropTypes from 'prop-types';
 
-import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
 
 export default class UserPictureList extends React.Component {
 

apps/app/src/stores/ui.tsx

@@ -5,7 +5,7 @@ import {
 } from '@growi/core';
 import type { Nullable } from '@growi/core/dist/interfaces';
 import type { SWRResponseWithUtils } from '@growi/core/dist/utils';
-import { Breakpoint } from '@growi/ui/dist/interfaces/breakpoints';
+import { Breakpoint } from '@growi/ui/dist/interfaces';
 import { addBreakpointListener, cleanupBreakpointListener } from '@growi/ui/dist/utils';
 import type { HtmlElementNode } from 'rehype-toc';
 import type SimpleBar from 'simplebar-react';

packages/remark-attachment-refs/src/client/components/AttachmentList.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
-import { IAttachmentHasId } from '@growi/core';
-import { Attachment } from '@growi/ui/dist/components/Attachment';
+import type { IAttachmentHasId } from '@growi/core/dist/interfaces';
+import { Attachment } from '@growi/ui/dist/components';
 
 import { ExtractedAttachments } from './ExtractedAttachments';
 import { RefsContext } from './util/refs-context';

packages/remark-lsx/src/client/components/LsxPageList/LsxPage.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { pathUtils } from '@growi/core';
-import { PageListMeta } from '@growi/ui/dist/components/PagePath/PageListMeta';
-import { PagePathLabel } from '@growi/ui/dist/components/PagePath/PagePathLabel';
+import { PageListMeta, PagePathLabel } from '@growi/ui/dist/components/PagePath';
 import Link from 'next/link';
 
 import type { PageNode } from '../../../interfaces/page-node';

packages/ui/package.json

@@ -24,6 +24,11 @@
     "@growi/core": "link:../core"
   },
   "devDependencies": {
-    "react": "^18.2.0"
+    "reactstrap": "8.10.1"
+  },
+  "peerDependencies": {
+    "next": "^13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

packages/ui/src/components/Attachment.tsx

@@ -1,6 +1,6 @@
-import { IAttachmentHasId } from '@growi/core';
+import type { IAttachmentHasId } from '@growi/core/dist/interfaces';
 
-import { UserPicture } from './User/UserPicture';
+import { UserPicture } from './UserPicture';
 
 type AttachmentProps = {
   attachment: IAttachmentHasId,

packages/ui/src/components/FootstampIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const FootstampIcon = (): JSX.Element => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

packages/ui/src/components/PagePath/PageListMeta.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
 
 import assert from 'assert';
 
-import { templateChecker, pagePathUtils, IPageHasId } from '@growi/core';
+import type { IPageHasId } from '@growi/core/dist/interfaces';
+import { templateChecker, pagePathUtils } from '@growi/core/dist/utils';
 
 import { FootstampIcon } from '../FootstampIcon';
 

packages/ui/src/components/PagePath/PagePathLabel.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
-import { DevidedPagePath } from '@growi/core';
+import { DevidedPagePath } from '@growi/core/dist/models';
 
 
 type TextElemProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   isHTML?: boolean,
 }
 

packages/ui/src/components/PagePath/index.ts

@@ -0,0 +1,2 @@
+export * from './PageListMeta';
+export * from './PagePathLabel';

packages/ui/src/components/User/UserPicture.tsx → packages/ui/src/components/UserPicture.tsx

@@ -1,5 +1,6 @@
-import React, {
-  forwardRef, useCallback, useRef,
+import {
+  type ReactNode,
+  memo, forwardRef, useCallback, useRef,
 } from 'react';
 
 import type { Ref, IUser } from '@growi/core/dist/interfaces';
@@ -18,7 +19,7 @@ const DEFAULT_IMAGE = '/images/icons/user.svg';
 type UserPictureRootProps = {
   user: Partial<IUser>,
   className?: string,
-  children?: React.ReactNode,
+  children?: ReactNode,
 }
 
 const UserPictureRootWithoutLink = forwardRef<HTMLSpanElement, UserPictureRootProps>((props, ref) => {
@@ -77,7 +78,7 @@ type Props = {
   noTooltip?: boolean,
 };
 
-export const UserPicture = React.memo((props: Props): JSX.Element => {
+export const UserPicture = memo((props: Props): JSX.Element => {
 
   const {
     user, size, noLink, noTooltip,

packages/ui/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Attachment';
+export * from './FootstampIcon';
+export * from './UserPicture';

packages/ui/src/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './breakpoints';
+export * from './popper-data';

packages/ui/vite.config.ts

@@ -2,6 +2,7 @@ import path from 'path';
 
 import react from '@vitejs/plugin-react';
 import glob from 'glob';
+import { nodeExternals } from 'rollup-plugin-node-externals';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
@@ -9,13 +10,24 @@ import dts from 'vite-plugin-dts';
 export default defineConfig({
   plugins: [
     react(),
-    dts({ copyDtsFiles: true }),
+    dts({
+      copyDtsFiles: true,
+    }),
+    {
+      ...nodeExternals({
+        devDeps: true,
+        builtinsPrefix: 'ignore',
+      }),
+      enforce: 'pre',
+    },
   ],
   build: {
     outDir: 'dist',
     sourcemap: true,
     lib: {
-      entry: glob.sync(path.resolve(__dirname, 'src/**/*.{ts,tsx}')),
+      entry: glob.sync(path.resolve(__dirname, 'src/**/*.{ts,tsx}'), {
+        ignore: '**/*.spec.ts',
+      }),
       name: 'ui-libs',
       formats: ['es'],
     },
@@ -24,13 +36,6 @@ export default defineConfig({
         preserveModules: true,
         preserveModulesRoot: 'src',
       },
-      external: [
-        'react', 'react-dom',
-        'assert',
-        'reactstrap',
-        /^next\/.*/,
-        /^@growi\/.*/,
-      ],
     },
   },
 });