feat: new import page component (#3277)

apps/storybook/src/stories/card.stories.tsx

@@ -1,9 +1,14 @@
-import { toast } from '@affine/component';
+import { toast, Tooltip } from '@affine/component';
 import { BlockCard } from '@affine/component/card/block-card';
 import { WorkspaceCard } from '@affine/component/card/workspace-card';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
-import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import {
+  EdgelessIcon,
+  ExportToHtmlIcon,
+  HelpIcon,
+  PageIcon,
+} from '@blocksuite/icons';
 
 export default {
   title: 'AFFiNE/Card',
@@ -48,6 +53,17 @@ export const AffineBlockCard = () => {
         right={<EdgelessIcon width={20} height={20} />}
         onClick={() => toast('clicked edgeless')}
       />
+      <BlockCard
+        left={<ExportToHtmlIcon width={20} height={20} />}
+        title="HTML"
+        disabled
+        right={
+          <Tooltip content={'Learn how to Import pages into AFFiNE.'}>
+            <HelpIcon />
+          </Tooltip>
+        }
+        onClick={() => toast('click HTML')}
+      />
     </div>
   );
 };

apps/storybook/src/stories/import-page.stories.tsx

@@ -0,0 +1,19 @@
+/* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import { toast } from '@affine/component';
+import { ImportPage } from '@affine/component/import-page';
+import type { StoryFn } from '@storybook/react';
+
+export default {
+  title: 'AFFiNE/ImportPage',
+  component: ImportPage,
+};
+
+const Template: StoryFn<typeof ImportPage> = args => <ImportPage {...args} />;
+
+export const Basic = Template.bind(undefined);
+Basic.args = {
+  importHtml: () => toast('Click importHtml'),
+  importMarkdown: () => toast('Click importMarkdown'),
+  importNotion: () => toast('Click importNotion'),
+  onClose: () => toast('Click onClose'),
+};