moduralize imports for reactstrap

apps/app/next.config.js

@@ -33,6 +33,7 @@ const getTranspilePackages = () => {
     'longest-streak',
     'micromark',
     'property-information',
+    'reactstrap',
     'space-separated-tokens',
     'stringify-entities',
     'trim-lines',

apps/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import { toastSuccess, toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import { toastSuccess, toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -3,7 +3,8 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 import { PrismAsyncLight } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import { toastSuccess, toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -3,7 +3,8 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 import { PrismAsyncLight } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import { toastSuccess, toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import { useSWRxSidebarConfig } from '~/stores/ui';

apps/app/src/components/Admin/Customize/CustomizeTitle.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Customize/PagingSizeUncontrolledDropdown.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import {
-  UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
+import UncontrolledDropdown from 'reactstrap/es/UncontrolledDropdown';
 
 
 const PagingSizeUncontrolledDropdown = (props) => {

apps/app/src/components/Admin/MarkdownSetting/IndentForm.tsx

@@ -2,9 +2,10 @@
 import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import {
-  UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
+import UncontrolledDropdown from 'reactstrap/es/UncontrolledDropdown';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import { toastSuccess, toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { Card, CardBody } from 'reactstrap';
+import Card from 'reactstrap/es/Card';
+import CardBody from 'reactstrap/es/CardBody';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import { toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -5,9 +5,8 @@ import React, {
 import { SlackbotType } from '@growi/slack';
 import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
-import {
-  TabContent, TabPane,
-} from 'reactstrap';
+import TabContent from 'reactstrap/es/TabContent';
+import TabPane from 'reactstrap/es/TabPane';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
 import { toastError } from '~/client/util/toastr';

apps/app/src/components/Admin/Security/SecurityManagementContents.jsx

@@ -2,7 +2,8 @@ import React, { useMemo, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
-import { TabContent, TabPane } from 'reactstrap';
+import TabContent from 'reactstrap/es/TabContent';
+import TabPane from 'reactstrap/es/TabPane';
 
 import CustomNav from '../../CustomNavigation/CustomNav';
 

apps/app/src/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.jsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
-import {
-  Button, Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
+import Button from 'reactstrap/es/Button';
+import Modal from 'reactstrap/es/Modal';
+import ModalBody from 'reactstrap/es/ModalBody';
+import ModalFooter from 'reactstrap/es/ModalFooter';
+import ModalHeader from 'reactstrap/es/ModalHeader';
 
 const DeleteSlackBotSettingsModal = React.memo((props) => {
   const { t } = useTranslation();

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

@@ -2,9 +2,9 @@ import React, { useState, useCallback } from 'react';
 
 import { IUserHasId, USER_STATUS } from '@growi/core';
 import { useTranslation } from 'next-i18next';
-import {
-  UncontrolledDropdown, DropdownToggle, DropdownMenu,
-} from 'reactstrap';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
+import UncontrolledDropdown from 'reactstrap/es/UncontrolledDropdown';
 
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import {
-  Dropdown, DropdownMenu, DropdownToggle, DropdownItem,
-} from 'reactstrap';
+import Dropdown from 'reactstrap/es/Dropdown';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
 
 import { NotAvailableForGuest } from '~/components/NotAvailableForGuest';
 import {

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

@@ -3,9 +3,9 @@ import React, {
 } from 'react';
 
 import { Breakpoint } from '@growi/ui/dist/interfaces/breakpoints';
-import {
-  Nav, NavItem, NavLink,
-} from 'reactstrap';
+import Nav from 'reactstrap/es/Nav';
+import NavItem from 'reactstrap/es/NavItem';
+import NavLink from 'reactstrap/es/NavLink';
 
 import { ICustomNavTabMappings } from '~/interfaces/ui';
 

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

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {
-  TabContent, TabPane,
-} from 'reactstrap';
+import TabContent from 'reactstrap/es/TabContent';
+import TabPane from 'reactstrap/es/TabPane';
 
 import type { ICustomNavTabMappings } from '~/interfaces/ui';
 

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

@@ -2,9 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import { useRipple } from 'react-use-ripple';
-import {
-  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
+import Dropdown from 'reactstrap/es/Dropdown';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
 
 
 import { apiv3Post } from '~/client/util/apiv3-client';

apps/app/src/components/Page/CopyDropdown.jsx

@@ -6,10 +6,11 @@ import { pagePathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import {
-  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
-  Tooltip,
-} from 'reactstrap';
+import Dropdown from 'reactstrap/es/Dropdown';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
+import Tooltip from 'reactstrap/es/Tooltip';
 
 import styles from './CopyDropdown.module.scss';
 

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

@@ -4,9 +4,9 @@ import React, {
 
 import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
 import dynamic from 'next/dynamic';
-import {
-  Button, TabContent, TabPane,
-} from 'reactstrap';
+import Button from 'reactstrap/es/Button';
+import TabContent from 'reactstrap/es/TabContent';
+import TabPane from 'reactstrap/es/TabPane';
 import * as toastr from 'toastr';
 
 import { apiPostForm } from '~/client/util/apiv1-client';

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

@@ -6,9 +6,10 @@ import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
 import CodeMirror from 'codemirror/lib/codemirror';
 import { format, parseISO } from 'date-fns';
 import { useTranslation } from 'next-i18next';
-import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
+import Modal from 'reactstrap/es/Modal';
+import ModalBody from 'reactstrap/es/ModalBody';
+import ModalFooter from 'reactstrap/es/ModalFooter';
+import ModalHeader from 'reactstrap/es/ModalHeader';
 
 import { useSaveOrUpdate } from '~/client/services/page-operation';
 import { toastError, toastSuccess } from '~/client/util/toastr';

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react';
 
 import dynamic from 'next/dynamic';
-import { Collapse, Button } from 'reactstrap';
-
+import Button from 'reactstrap/es/Button';
+import Collapse from 'reactstrap/es/Collapse';
 
 import { SavePageControlsProps } from '~/components/SavePageControls';
 import { useIsSlackConfigured } from '~/stores/context';

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

@@ -3,10 +3,11 @@ import React, { useState, useEffect } from 'react';
 import { HotTable } from '@handsontable/react';
 import Handsontable from 'handsontable';
 import { useTranslation } from 'next-i18next';
-import {
-  Collapse,
-  Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
+import Collapse from 'reactstrap/es/Collapse';
+import Modal from 'reactstrap/es/Modal';
+import ModalBody from 'reactstrap/es/ModalBody';
+import ModalFooter from 'reactstrap/es/ModalFooter';
+import ModalHeader from 'reactstrap/es/ModalHeader';
 import { debounce } from 'throttle-debounce';
 
 import MarkdownTable from '~/client/models/MarkdownTable';

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

@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import {
-  Button,
-  Collapse,
-} from 'reactstrap';
+import Button from 'reactstrap/es/Button';
+import Collapse from 'reactstrap/es/Collapse';
 
 import MarkdownTable from '~/client/models/MarkdownTable';
 

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

@@ -3,9 +3,10 @@ import React, {
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import {
-  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
+import Dropdown from 'reactstrap/es/Dropdown';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
 
 import { useIsIndentSizeForced } from '~/stores/context';
 import { useEditorSettings, useCurrentIndentSize } from '~/stores/editor';

apps/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -3,9 +3,10 @@ import React, { useState } from 'react';
 import { IRevisionHasPageId, pagePathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import {
-  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
+import Dropdown from 'reactstrap/es/Dropdown';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
 
 import { RevisionDiff } from '../PageHistory/RevisionDiff';
 

apps/app/src/components/SavePageControls.tsx

@@ -4,10 +4,11 @@ import EventEmitter from 'events';
 
 import { pagePathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
-import {
-  UncontrolledButtonDropdown, Button,
-  DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
+import Button from 'reactstrap/es/Button';
+import DropdownItem from 'reactstrap/es/DropdownItem';
+import DropdownMenu from 'reactstrap/es/DropdownMenu';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
+import UncontrolledButtonDropdown from 'reactstrap/es/UncontrolledButtonDropdown';
 
 import { IPageGrantData } from '~/interfaces/page';
 import {

apps/app/src/components/Sidebar/PageTree/Item.tsx

@@ -5,12 +5,13 @@ import React, {
 import nodePath from 'path';
 
 import {
-  pathUtils, pagePathUtils, Nullable, DevidedPagePath,
+  pathUtils, pagePathUtils, Nullable,
 } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import { useDrag, useDrop } from 'react-dnd';
-import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
+import DropdownToggle from 'reactstrap/es/DropdownToggle';
+import UncontrolledTooltip from 'reactstrap/es/UncontrolledTooltip';
 
 import { bookmark, unbookmark, resumeRenameOperation } from '~/client/services/page-operation';
 import { apiv3Put, apiv3Post } from '~/client/util/apiv3-client';

apps/app/src/components/SlackNotification.tsx

@@ -2,7 +2,9 @@
 import React, { FC } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { PopoverBody, PopoverHeader, UncontrolledPopover } from 'reactstrap';
+import PopoverBody from 'reactstrap/es/PopoverBody';
+import PopoverHeader from 'reactstrap/es/PopoverHeader';
+import UncontrolledPopover from 'reactstrap/es/UncontrolledPopover';
 
 import styles from './SlackNotification.module.scss';
 

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

@@ -2,7 +2,9 @@ import React, { FC, useState } from 'react';
 
 import { FootstampIcon } from '@growi/ui/dist/components/FootstampIcon';
 import { useTranslation } from 'next-i18next';
-import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
+import Popover from 'reactstrap/es/Popover';
+import PopoverBody from 'reactstrap/es/PopoverBody';
+import UncontrolledTooltip from 'reactstrap/es/UncontrolledTooltip';
 
 import { IUser } from '~/interfaces/user';