refactor(web): move contact modal to component (#1718)

apps/web/src/components/pure/help-island/index.tsx

@@ -1,10 +1,9 @@
-import { Tooltip } from '@affine/component';
-import { MuiFade } from '@affine/component';
+import { MuiFade, Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
+import dynamic from 'next/dynamic';
 import { useState } from 'react';
 
-import ContactModal from '../contact-modal';
 import { ShortcutsModal } from '../shortcuts-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
 import {
@@ -13,6 +12,17 @@ import {
   StyledIsland,
   StyledTriggerWrapper,
 } from './style';
+
+const ContactModal = dynamic(
+  () =>
+    import('@affine/component/contact-modal').then(({ ContactModal }) => ({
+      default: ContactModal,
+    })),
+  {
+    ssr: true,
+  }
+);
+
 export type IslandItemNames = 'contact' | 'shortcuts';
 export const HelpIsland = ({
   showList = ['contact', 'shortcuts'],
@@ -93,7 +103,11 @@ export const HelpIsland = ({
           </StyledTriggerWrapper>
         </MuiFade>
       </StyledIsland>
-      <ContactModal open={open} onClose={() => setOpen(false)} />
+      <ContactModal
+        open={open}
+        onClose={() => setOpen(false)}
+        logoSrc="/imgs/affine-text-logo.png"
+      />
       <ShortcutsModal
         open={openShortCut}
         onClose={() => setOpenShortCut(false)}

packages/component/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@blocksuite/editor/themes/affine.css';
 
-import { getDarkTheme, getLightTheme, ThemeProvider } from '../src';
+import { getDarkTheme, getLightTheme, ThemeProvider } from '@affine/component';
 import { useDarkMode } from 'storybook-dark-mode-v7';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/component/.storybook/vite.config.ts

@@ -18,6 +18,9 @@ const config: Pick<StorybookConfig, 'viteFinal'> = {
       resolve: {
         alias: {
           '@': resolve(fileURLToPath(new URL('../src', import.meta.url))),
+          '@affine/component': resolve(
+            fileURLToPath(new URL('../src/index.ts', import.meta.url))
+          ),
           '@affine/i18n': resolve(
             fileURLToPath(new URL('../../i18n/src', import.meta.url))
           ),

packages/component/package.json

@@ -10,7 +10,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./block-suite-editor": "./src/components/block-suite-editor/index.tsx"
+    "./*": "./src/components/*/index.tsx"
   },
   "dependencies": {
     "@affine/debug": "workspace:*",

packages/component/src/components/contact-modal/index.tsx

@@ -6,7 +6,6 @@ import {
 } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 
-import logo from './affine-text-logo.png';
 import {
   DiscordIcon,
   DocIcon,
@@ -54,15 +53,17 @@ const linkList = [
   },
 ];
 
-type TransitionsModalProps = {
+export type ContactModalProps = {
   open: boolean;
   onClose: () => void;
+  logoSrc: string;
 };
 
 export const ContactModal = ({
   open,
   onClose,
-}: TransitionsModalProps): JSX.Element => {
+  logoSrc,
+}: ContactModalProps): JSX.Element => {
   const { t } = useTranslation();
   const topLinkList = [
     {
@@ -84,7 +85,7 @@ export const ContactModal = ({
     <Modal open={open} onClose={onClose} data-testid="contact-us-modal-content">
       <ModalWrapper width={720} height={436} style={{ letterSpacing: '1px' }}>
         <StyledModalHeader>
-          <StyledLogo src={logo.src} alt="" />
+          <StyledLogo src={logoSrc} alt="" />
 
           <ModalCloseButton
             onClick={() => {
@@ -124,10 +125,14 @@ export const ContactModal = ({
         <StyledModalFooter>
           <p>Copyright &copy; {year} Toeverything</p>
           <StyledPrivacyContainer>
-            <a href="https://affine.pro/terms" target="_blank">
+            <a href="https://affine.pro/terms" target="_blank" rel="noreferrer">
               Terms
             </a>
-            <a href="https://affine.pro/privacy" target="_blank">
+            <a
+              href="https://affine.pro/privacy"
+              target="_blank"
+              rel="noreferrer"
+            >
               Privacy
             </a>
           </StyledPrivacyContainer>
@@ -136,5 +141,3 @@ export const ContactModal = ({
     </Modal>
   );
 };
-
-export default ContactModal;

packages/component/src/stories/ContactModal.stories.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@affine/component';
+import type { StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+import type { ContactModalProps } from '../components/contact-modal';
+import { ContactModal } from '../components/contact-modal';
+
+export default {
+  title: 'AFFiNE/ContactModal',
+  component: ContactModal,
+};
+
+export const Basic: StoryFn<ContactModalProps> = args => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open
+      </Button>
+      <ContactModal
+        {...args}
+        open={open}
+        onClose={() => {
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+};
+Basic.args = {
+  logoSrc: '/imgs/affine-text-logo.png',
+};

packages/component/tsconfig.json

@@ -1,4 +1,9 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["./src", "./.storybook/*.ts"]
+  "include": ["./src", "./.storybook/*.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

packages/component/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [".storybook/**/*"]
+}

tsconfig.json

@@ -18,9 +18,7 @@
     "baseUrl": ".",
     "paths": {
       "@affine/component": ["./packages/component/src/index"],
-      "@affine/component/block-suite-editor": [
-        "./packages/component/src/components/block-suite-editor/index"
-      ],
+      "@affine/component/*": ["./packages/component/src/components/*/index"],
       "@affine/templates/*": ["./packages/templates/src/*"],
       "@affine/i18n": ["./packages/i18n/src"],
       "@affine/debug": ["./packages/debug"],