feat: new CMD-K (#4408)

apps/storybook/.storybook/main.ts

@@ -36,6 +36,13 @@ export default {
   async viteFinal(config, _options) {
     return mergeConfig(config, {
       assetsInclude: ['**/*.md'],
+      resolve: {
+        alias: {
+          '@toeverything/infra': fileURLToPath(
+            new URL('../../../packages/infra/src', import.meta.url)
+          ),
+        },
+      },
       plugins: [
         vanillaExtractPlugin(),
         tsconfigPaths({

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

@@ -1,10 +1,11 @@
-import { Empty } from '@affine/component';
-import { toast } from '@affine/component';
+import { Empty, toast } from '@affine/component';
 import type { OperationCellProps } from '@affine/component/page-list';
-import { PageListTrashView } from '@affine/component/page-list';
-import { PageList } from '@affine/component/page-list';
-import { NewPageButton } from '@affine/component/page-list';
-import { OperationCell } from '@affine/component/page-list';
+import {
+  NewPageButton,
+  OperationCell,
+  PageList,
+  PageListTrashView,
+} from '@affine/component/page-list';
 import { PageIcon } from '@blocksuite/icons';
 import { expect } from '@storybook/jest';
 import type { Meta, StoryFn } from '@storybook/react';

apps/storybook/src/stories/quick-search/quick-search-main.stories.tsx

@@ -0,0 +1,80 @@
+import { CMDKQuickSearchModal } from '@affine/core/components/pure/cmdk';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { getOrCreateWorkspace } from '@affine/workspace/manager';
+import type { Meta, StoryFn } from '@storybook/react';
+import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
+import {
+  registerAffineCreationCommands,
+  registerAffineLayoutCommands,
+  registerAffineSettingsCommands,
+} from 'apps/core/src/commands';
+import { useStore } from 'jotai';
+import { useEffect, useLayoutEffect } from 'react';
+import { withRouter } from 'storybook-addon-react-router-v6';
+
+export default {
+  title: 'AFFiNE/QuickSearch',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta;
+
+function useRegisterCommands() {
+  const t = useAFFiNEI18N();
+  const store = useStore();
+  useEffect(() => {
+    const unsubs = [
+      registerAffineSettingsCommands({
+        t,
+        store,
+        theme: {
+          setTheme: () => {},
+          theme: 'auto',
+          themes: ['auto', 'dark', 'light'],
+        },
+      }),
+      registerAffineCreationCommands({
+        t,
+        store,
+        pageHelper: {
+          createEdgeless: () => 'noop',
+          createPage: () => 'noop',
+          importFile: () => Promise.resolve(),
+          isPreferredEdgeless: () => false,
+        },
+      }),
+      registerAffineLayoutCommands({ t, store }),
+    ];
+
+    return () => {
+      unsubs.forEach(unsub => unsub());
+    };
+  }, [store, t]);
+}
+
+function usePrepareWorkspace() {
+  const store = useStore();
+  useLayoutEffect(() => {
+    const workspaceId = 'test-workspace';
+    getOrCreateWorkspace(workspaceId, WorkspaceFlavour.LOCAL);
+    store.set(rootWorkspacesMetadataAtom, [
+      {
+        id: workspaceId,
+        flavour: WorkspaceFlavour.LOCAL,
+        version: 4,
+      },
+    ]);
+    store.set(currentWorkspaceIdAtom, workspaceId);
+  }, [store]);
+}
+
+export const CMDKStoryWithCommands: StoryFn = () => {
+  usePrepareWorkspace();
+  useRegisterCommands();
+
+  return <CMDKQuickSearchModal open />;
+};
+
+CMDKStoryWithCommands.decorators = [withRouter];

apps/storybook/src/stories/quick-search/quick-search-modal.stories.tsx

@@ -0,0 +1,37 @@
+import { CMDKContainer, CMDKModal } from '@affine/core/components/pure/cmdk';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Button } from '@toeverything/components/button';
+import { useState } from 'react';
+
+export default {
+  title: 'AFFiNE/QuickSearch',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta;
+
+export const CMDKModalStory: StoryFn = () => {
+  const [open, setOpen] = useState(false);
+  const [counter, setCounter] = useState(0);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <CMDKModal key={counter} open={open} onOpenChange={setOpen}>
+        <Button onClick={() => setCounter(c => c + 1)}>
+          Trigger new modal
+        </Button>
+      </CMDKModal>
+    </>
+  );
+};
+
+export const CMDKPanelStory: StoryFn = () => {
+  const [query, setQuery] = useState('');
+  return (
+    <>
+      <CMDKModal open>
+        <CMDKContainer query={query} onQueryChange={setQuery} />
+      </CMDKModal>
+    </>
+  );
+};