feat: extract modal component

Innei · Innei · commit 9d19bf7d8f69 · 2023-01-03T17:39:44.000+08:00
Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/packages/kami-design/components/Modal/Modal.tsx b/packages/kami-design/components/Modal/Modal.tsx
@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import { observer } from 'mobx-react-lite'
-import {
+import React, {
   forwardRef,
   useCallback,
   useImperativeHandle,
diff --git a/packages/kami-design/components/Modal/index.ts b/packages/kami-design/components/Modal/index.ts
diff --git a/packages/kami-design/components/Modal/modal.module.css b/packages/kami-design/components/Modal/modal.module.css
diff --git a/packages/kami-design/components/Modal/scale-transition.tsx b/packages/kami-design/components/Modal/scale-transition.tsx
diff --git a/packages/kami-design/components/Modal/stack-context.tsx b/packages/kami-design/components/Modal/stack-context.tsx
diff --git a/packages/kami-design/components/Overlay/index.module.css b/packages/kami-design/components/Overlay/index.module.css
diff --git a/packages/kami-design/components/Overlay/index.tsx b/packages/kami-design/components/Overlay/index.tsx
@@ -2,7 +2,7 @@ import { clsx } from 'clsx'
 import isUndefined from 'lodash-es/isUndefined'
 import merge from 'lodash-es/merge'
 import type { CSSProperties, FC, ReactNode } from 'react'
-import { memo, useEffect, useState } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 
 import { RootPortal } from '@mx-space/kami-design/components/Portal'
 
diff --git a/packages/kami-design/components/Transition/base.tsx b/packages/kami-design/components/Transition/base.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type { ElementType, FC } from 'react'
+import React from 'react'
 import { Transition } from 'react-transition-group'
 import type { TransitionProps } from 'react-transition-group/Transition'
 
diff --git a/packages/kami-design/components/Transition/bottom-up.tsx b/packages/kami-design/components/Transition/bottom-up.tsx
diff --git a/packages/kami-design/components/Transition/fade-in-out.tsx b/packages/kami-design/components/Transition/fade-in-out.tsx
diff --git a/packages/kami-design/components/Transition/left-right.tsx b/packages/kami-design/components/Transition/left-right.tsx
diff --git a/packages/kami-design/components/Transition/right-left.tsx b/packages/kami-design/components/Transition/right-left.tsx
diff --git a/packages/kami-design/components/Transition/scale.tsx b/packages/kami-design/components/Transition/scale.tsx
diff --git a/src/components/in-page/Friend/section.tsx b/src/components/in-page/Friend/section.tsx
@@ -4,8 +4,7 @@ import { TransitionGroup } from 'react-transition-group'
 
 import type { LinkModel } from '@mx-space/api-client'
 import { Avatar } from '@mx-space/kami-design/components/Avatar'
-
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import styles from './section.module.css'
 
diff --git a/src/components/in-page/Home/intro.tsx b/src/components/in-page/Home/intro.tsx
@@ -5,9 +5,9 @@ import { TransitionGroup } from 'react-transition-group'
 import { TextFade } from '@mx-space/kami-design/components/Animate/text-anim'
 import { Avatar } from '@mx-space/kami-design/components/Avatar'
 import { FloatPopover } from '@mx-space/kami-design/components/FloatPopover'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { FontIcon } from '~/components/universal/FontIcon'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { useThemeConfig } from '~/hooks/use-initial-data'
 import { useIndexViewContext } from '~/pages'
 import { useStore } from '~/store'
diff --git a/src/components/in-page/Home/section.tsx b/src/components/in-page/Home/section.tsx
@@ -12,10 +12,10 @@ import {
   PhUsersDuotone,
 } from '@mx-space/kami-design/components/Icons/for-home'
 import { IcTwotoneSignpost } from '@mx-space/kami-design/components/Icons/menu-icon'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { LikeButton } from '~/components/universal/LikeButton'
 import { NoticePanel } from '~/components/universal/Notice'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { useRandomImage } from '~/hooks/use-kami'
 import { apiClient } from '~/utils/client'
 import { stopEventDefault } from '~/utils/dom'
diff --git a/src/components/in-page/Note/NoteTimelineList/index.tsx b/src/components/in-page/Note/NoteTimelineList/index.tsx
@@ -14,9 +14,9 @@ import type { NoteModel } from '@mx-space/api-client'
 import { Divider } from '@mx-space/kami-design/components/Divider'
 import { FloatPopover } from '@mx-space/kami-design/components/FloatPopover'
 import { MaterialSymbolsArrowCircleRightOutlineRounded } from '@mx-space/kami-design/components/Icons/for-note'
+import { LeftRightTransitionView } from '@mx-space/kami-design/components/Transition/left-right'
 
 import { ImpressionView } from '~/components/biz/ImpressionView'
-import { LeftRightTransitionView } from '~/components/universal/Transition/left-right'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useStore } from '~/store'
diff --git a/src/components/in-page/SpecialButton/float-post-tag.tsx b/src/components/in-page/SpecialButton/float-post-tag.tsx
@@ -7,11 +7,11 @@ import { apiClient } from 'utils/client'
 
 import type { PostModel, TagModel } from '@mx-space/api-client'
 import { JamTags } from '@mx-space/kami-design/components/Icons/layout'
+import { Overlay } from '@mx-space/kami-design/components/Overlay'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
+import { RightLeftTransitionView } from '@mx-space/kami-design/components/Transition/right-left'
 
-import { Overlay } from '~/components/universal/Overlay'
 import { BigTag } from '~/components/universal/Tag'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
-import { RightLeftTransitionView } from '~/components/universal/Transition/right-left'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { store } from '~/store'
diff --git a/src/components/in-page/WarningOverlay/ban-copy.tsx b/src/components/in-page/WarningOverlay/ban-copy.tsx
@@ -4,7 +4,8 @@ import { useRouter } from 'next/router'
 import type { FC } from 'react'
 import { useEffect, useRef, useState } from 'react'
 
-import { Overlay } from '~/components/universal/Overlay'
+import { Overlay } from '@mx-space/kami-design/components/Overlay'
+
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useStore } from '~/store'
diff --git a/src/components/layouts/AppLayout.tsx b/src/components/layouts/AppLayout.tsx
@@ -4,11 +4,11 @@ import type { FC } from 'react'
 import { useEffect, useInsertionEffect } from 'react'
 
 import type { AggregateRoot } from '@mx-space/api-client'
+import { ModalStackProvider } from '@mx-space/kami-design/components/Modal/stack-context'
 
 import { MetaFooter } from '~/components/biz/Meta/footer'
 import { DynamicHeadMeta } from '~/components/biz/Meta/head'
 import Loader from '~/components/universal/Loader'
-import { ModalStackProvider } from '~/components/universal/Modal/stack-context'
 import { useRootTrackerListener } from '~/hooks/use-analyze'
 import { useCheckLogged } from '~/hooks/use-check-logged'
 import { useCheckOldBrowser } from '~/hooks/use-check-old-browser'
diff --git a/src/components/layouts/ArticleLayout/index.tsx b/src/components/layouts/ArticleLayout/index.tsx
@@ -2,7 +2,7 @@ import { clsx } from 'clsx'
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { forwardRef, memo, useMemo } from 'react'
 
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { ArticleLayoutContextProvider } from './hooks'
 import styles from './index.module.css'
diff --git a/src/components/layouts/BasicLayout/Footer/actions.tsx b/src/components/layouts/BasicLayout/Footer/actions.tsx
@@ -11,8 +11,8 @@ import {
   FaSolidHeadphonesAlt,
 } from '@mx-space/kami-design/components/Icons/for-footer'
 import { RootPortal } from '@mx-space/kami-design/components/Portal'
+import { ScaleTransitionView } from '@mx-space/kami-design/components/Transition/scale'
 
-import { ScaleTransitionView } from '~/components/universal/Transition/scale'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useStore } from '~/store'
diff --git a/src/components/layouts/BasicLayout/Header/HeaderDrawer.tsx b/src/components/layouts/BasicLayout/Header/HeaderDrawer.tsx
@@ -4,9 +4,9 @@ import type { FC } from 'react'
 import React, { Fragment, memo, useEffect } from 'react'
 
 import { CloseIcon } from '@mx-space/kami-design/components/Icons/layout'
+import { Overlay } from '@mx-space/kami-design/components/Overlay'
 import { RootPortal } from '@mx-space/kami-design/components/Portal'
 
-import { Overlay } from '~/components/universal/Overlay'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { NoSSRWrapper } from '~/utils/no-ssr'
diff --git a/src/components/layouts/DebugLayout.tsx b/src/components/layouts/DebugLayout.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import { useEffect } from 'react'
 
-import { store } from '~/store'
+import { ModalStackProvider } from '@mx-space/kami-design/components/Modal'
 
-import { ModalStackProvider } from '../universal/Modal/stack-context'
+import { store } from '~/store'
 
 export const DebugLayout: FC = (props) => {
   useEffect(() => {
diff --git a/src/components/layouts/NoteLayout.tsx b/src/components/layouts/NoteLayout.tsx
@@ -13,8 +13,8 @@ import {
   FluentEyeHide20Regular,
   RegularBookmark,
 } from '@mx-space/kami-design/components/Icons/layout'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { useStore } from '~/store'
 import { apiClient } from '~/utils/client'
 import { resolveUrl } from '~/utils/utils'
diff --git a/src/components/universal/IconTransition/index.tsx b/src/components/universal/IconTransition/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { SwitchTransition } from 'react-transition-group'
 
-import { FadeInOutTransitionView } from '../Transition/fade-in-out'
+import { FadeInOutTransitionView } from '@mx-space/kami-design/components/Transition/fade-in-out'
 
 interface IconTransitionProps {
   solidIcon: JSX.Element
diff --git a/src/components/universal/Markdown/MarkdownToc.tsx b/src/components/universal/Markdown/MarkdownToc.tsx
@@ -5,12 +5,11 @@ import { useEffect } from 'react'
 
 import { FloatPopover } from '@mx-space/kami-design/components/FloatPopover'
 import { FluentList16Filled } from '@mx-space/kami-design/components/Icons/shared'
+import { useModalStack } from '@mx-space/kami-design/components/Modal'
 
 import type { TocProps } from '~/components/widgets/Toc'
 import { useStore } from '~/store'
 
-import { useModalStack } from '../Modal/stack-context'
-
 const Toc = dynamic(
   () => import('~/components/widgets/Toc').then((m) => m.Toc),
   {
diff --git a/src/components/universal/Notice/index.tsx b/src/components/universal/Notice/index.tsx
@@ -2,10 +2,10 @@ import type { FC } from 'react'
 import { useCallback, useEffect, useRef } from 'react'
 
 import { RootPortal } from '@mx-space/kami-design/components/Portal'
+import { FadeInOutTransitionView } from '@mx-space/kami-design/components/Transition/fade-in-out'
 
 import { useIsClient } from '~/hooks/use-is-client'
 
-import { FadeInOutTransitionView } from '../Transition/fade-in-out'
 import styles from './index.module.css'
 
 interface NoticePanelProps {
diff --git a/src/components/widgets/Comment/comments.tsx b/src/components/widgets/Comment/comments.tsx
@@ -18,12 +18,12 @@ import {
   PhPushPin,
   PhPushPinFill,
 } from '@mx-space/kami-design/components/Icons/for-post'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { ImpressionView } from '~/components/biz/ImpressionView'
 import { IconTransition } from '~/components/universal/IconTransition'
 import { ImageTagPreview } from '~/components/universal/ImageTagPreview'
 import { Markdown } from '~/components/universal/Markdown'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { socketClient } from '~/socket'
 import type { Id } from '~/store/helper/structure'
 import { apiClient } from '~/utils/client'
diff --git a/src/components/widgets/Player/lyrics.tsx b/src/components/widgets/Player/lyrics.tsx
@@ -5,9 +5,9 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { getTransitionSizes } from '@formkit/auto-animate'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { withDesktopOnly } from '~/components/biz/view-only/desktop'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { store } from '~/store'
 
 import type { LyricsContent } from './lyrics-manager'
diff --git a/src/components/widgets/Search/index.tsx b/src/components/widgets/Search/index.tsx
@@ -9,9 +9,9 @@ import useSWR from 'swr'
 
 import { EmptyIcon } from '@mx-space/kami-design/components/Icons/for-comment'
 import { IonSearch } from '@mx-space/kami-design/components/Icons/layout'
+import type { OverlayProps } from '@mx-space/kami-design/components/Overlay'
+import { Overlay } from '@mx-space/kami-design/components/Overlay'
 
-import type { OverlayProps } from '~/components/universal/Overlay'
-import { Overlay } from '~/components/universal/Overlay'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import useDebounceValue from '~/hooks/use-debounce-value'
diff --git a/src/components/widgets/Toc/index.tsx b/src/components/widgets/Toc/index.tsx
@@ -4,7 +4,8 @@ import type { FC } from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { TransitionGroup } from 'react-transition-group'
 
-import { RightLeftTransitionView } from '~/components/universal/Transition/right-left'
+import { RightLeftTransitionView } from '@mx-space/kami-design/components/Transition/right-left'
+
 import { CustomEventTypes } from '~/types/events'
 import { eventBus } from '~/utils/event-emitter'
 
diff --git a/src/pages/categories/[slug].tsx b/src/pages/categories/[slug].tsx
@@ -7,10 +7,10 @@ import type {
   CategoryModel,
   CategoryWithChildrenModel,
 } from '@mx-space/api-client'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { wrapperNextPage } from '~/components/app/WrapperNextPage'
 import { TimelineListWrapper } from '~/components/biz/TimelineListWrapper'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { apiClient } from '~/utils/client'
 
 import { SEO } from '../../components/biz/Seo'
diff --git a/src/pages/notes/topics/[topicSlug].tsx b/src/pages/notes/topics/[topicSlug].tsx
@@ -6,14 +6,14 @@ import { TransitionGroup } from 'react-transition-group'
 import type { NoteModel, Pager } from '@mx-space/api-client'
 import type { TopicModel } from '@mx-space/api-client/types/models/topic'
 import { Divider } from '@mx-space/kami-design/components/Divider'
+import { RightLeftTransitionView } from '@mx-space/kami-design/components/Transition/right-left'
 
 import { wrapperNextPage } from '~/components/app/WrapperNextPage'
 import { SEO } from '~/components/biz/Seo'
 import { TimelineListWrapper } from '~/components/biz/TimelineListWrapper'
 import { NoteTopicMarkdownRender } from '~/components/in-page/Note/NoteTopic/markdown-render'
 import { ArticleLayout } from '~/components/layouts/ArticleLayout'
 import { Pagination } from '~/components/universal/Pagination'
-import { RightLeftTransitionView } from '~/components/universal/Transition/right-left'
 import { apiClient } from '~/utils/client'
 
 const TopicDetailPage: NextPage<TopicModel> = (props) => {
diff --git a/src/pages/notes/topics/index.tsx b/src/pages/notes/topics/index.tsx
@@ -4,10 +4,10 @@ import { useEffect, useState } from 'react'
 import { TransitionGroup } from 'react-transition-group'
 
 import type { TopicModel } from '@mx-space/api-client/types/models/topic'
+import { RightLeftTransitionView } from '@mx-space/kami-design/components/Transition/right-left'
 
 import { SEO } from '~/components/biz/Seo'
 import { ArticleLayout } from '~/components/layouts/ArticleLayout'
-import { RightLeftTransitionView } from '~/components/universal/Transition/right-left'
 import { apiClient } from '~/utils/client'
 
 // TODO
diff --git a/src/pages/posts/index.tsx b/src/pages/posts/index.tsx
@@ -6,11 +6,11 @@ import { TransitionGroup } from 'react-transition-group'
 import type { Pager, PaginateResult, PostModel } from '@mx-space/api-client'
 import { EmptyIcon } from '@mx-space/kami-design/components/Icons/for-comment'
 import { Loading } from '@mx-space/kami-design/components/Loading'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { PostBlock } from '~/components/in-page/PostBlock'
 import { TagFAB } from '~/components/in-page/SpecialButton/float-post-tag'
 import { ArticleLayout } from '~/components/layouts/ArticleLayout'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { SearchFAB } from '~/components/widgets/Search'
 import { apiClient } from '~/utils/client'
 import { springScrollToTop } from '~/utils/spring'
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
@@ -3,9 +3,9 @@ import useSWR from 'swr'
 
 import { CodiconGithubInverted } from '@mx-space/kami-design/components/Icons/menu-icon'
 import { Loading } from '@mx-space/kami-design/components/Loading'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
 
 import { ProjectList } from '~/components/in-page/Project/list'
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/use-analyze'
 import { useStore } from '~/store'
diff --git a/src/pages/recently/index.tsx b/src/pages/recently/index.tsx
@@ -25,12 +25,12 @@ import {
   JamTrash,
 } from '@mx-space/kami-design/components/Icons/for-recently'
 import { Loading } from '@mx-space/kami-design/components/Loading'
+import { useModalStack } from '@mx-space/kami-design/components/Modal/stack-context'
 
 import { Seo } from '~/components/biz/Seo'
 import { RefPreview } from '~/components/in-page/Recently/RefPreview'
 import { RecentlySendBox } from '~/components/in-page/Recently/SendBox'
 import { Markdown } from '~/components/universal/Markdown'
-import { useModalStack } from '~/components/universal/Modal/stack-context'
 import { RelativeTime } from '~/components/universal/RelativeTime'
 import { CommentLazy } from '~/components/widgets/Comment'
 import { useStore } from '~/store'
diff --git a/src/pages/says/index.tsx b/src/pages/says/index.tsx
@@ -6,7 +6,8 @@ import { useEffect, useMemo, useRef } from 'react'
 import Masonry from 'react-masonry-css'
 import { TransitionGroup } from 'react-transition-group'
 
-import { BottomUpTransitionView } from '~/components/universal/Transition/bottom-up'
+import { BottomUpTransitionView } from '@mx-space/kami-design/components/Transition/bottom-up'
+
 import { relativeTimeFromNow } from '~/utils/time'
 
 import { SEO } from '../../components/biz/Seo'
