feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

apps/storybook/.storybook/main.ts

@@ -40,10 +40,16 @@ export default {
         vanillaExtractPlugin(),
         tsconfigPaths({
           root: fileURLToPath(new URL('../../../', import.meta.url)),
+          ignoreConfigErrors: true,
         }),
       ],
       define: {
         'process.env': {},
+        'process.env.COVERAGE': JSON.stringify(!!process.env.COVERAGE),
+        'process.env.SHOULD_REPORT_TRACE': `${Boolean(
+          process.env.SHOULD_REPORT_TRACE
+        )}`,
+        'process.env.TRACE_REPORT_ENDPOINT': `"${process.env.TRACE_REPORT_ENDPOINT}"`,
         runtimeConfig: getRuntimeConfig({
           distribution: 'browser',
           mode: 'development',

apps/storybook/.storybook/preview.tsx

@@ -3,6 +3,10 @@ import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 import '@toeverything/components/style.css';
 import { createI18n } from '@affine/i18n';
+import MockSessionContext, {
+  mockAuthStates,
+  // @ts-ignore
+} from '@tomfreudenberg/next-auth-mock';
 import { ThemeProvider, useTheme } from 'next-themes';
 import { useDarkMode } from 'storybook-dark-mode';
 import { AffineContext } from '@affine/component/context';
@@ -24,6 +28,51 @@ export const parameters = {
   },
 };
 
+const SB_PARAMETER_KEY = 'nextAuthMock';
+export const mockAuthPreviewToolbarItem = ({
+  name = 'mockAuthState',
+  description = 'Set authentication state',
+  defaultValue = null,
+  icon = 'user',
+  items = mockAuthStates,
+} = {}) => {
+  return {
+    mockAuthState: {
+      name,
+      description,
+      defaultValue,
+      toolbar: {
+        icon,
+        items: Object.keys(items).map(e => ({
+          value: e,
+          title: items[e].title,
+        })),
+      },
+    },
+  };
+};
+
+export const withMockAuth: Decorator = (Story, context) => {
+  // Set a session value for mocking
+  const session = (() => {
+    // Allow overwrite of session value by parameter in story
+    const paramValue = context?.parameters[SB_PARAMETER_KEY];
+    if (typeof paramValue?.session === 'string') {
+      return mockAuthStates[paramValue.session]?.session;
+    } else {
+      return paramValue?.session
+        ? paramValue.session
+        : mockAuthStates[context.globals.mockAuthState]?.session;
+    }
+  })();
+
+  return (
+    <MockSessionContext session={session}>
+      <Story {...context} />
+    </MockSessionContext>
+  );
+};
+
 const i18n = createI18n();
 const withI18n: Decorator = (Story, context) => {
   const locale = context.globals.locale;
@@ -91,4 +140,4 @@ const withContextDecorator: Decorator = (Story, context) => {
   );
 };
 
-export const decorators = [withContextDecorator, withI18n];
+export const decorators = [withContextDecorator, withI18n, withMockAuth];

apps/storybook/package.json

@@ -38,6 +38,7 @@
     "@blocksuite/icons": "^2.1.31",
     "@blocksuite/lit": "0.0.0-20230827224823-81f8728e-nightly",
     "@blocksuite/store": "0.0.0-20230827224823-81f8728e-nightly",
+    "@tomfreudenberg/next-auth-mock": "^0.5.6",
     "chromatic": "^6.24.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/storybook/src/stories/share-menu.stories.tsx

@@ -24,6 +24,20 @@ export default {
   },
 } satisfies Meta;
 
+const sharePageMap = new Map<string, boolean>([]);
+// todo: use a real hook
+const useIsSharedPage = (
+  _workspaceId: string,
+  pageId: string
+): [isSharePage: boolean, setIsSharePage: (enable: boolean) => void] => {
+  const [isShared, setIsShared] = useState(sharePageMap.get(pageId) ?? false);
+  const togglePagePublic = (enable: boolean) => {
+    setIsShared(enable);
+    sharePageMap.set(pageId, enable);
+  };
+  return [isShared, togglePagePublic];
+};
+
 async function initPage(page: Page) {
   await page.waitForLoaded();
   // Add page block and surface block at root level
@@ -74,11 +88,10 @@ export const Basic: StoryFn = () => {
   return (
     <ShareMenu
       currentPage={blockSuiteWorkspace.getPage('page0') as Page}
+      useIsSharedPage={useIsSharedPage}
       workspace={localWorkspace}
       onEnableAffineCloud={unimplemented}
-      onOpenWorkspaceSettings={unimplemented}
       togglePagePublic={unimplemented}
-      toggleWorkspacePublish={unimplemented}
     />
   );
 };
@@ -105,11 +118,10 @@ export const AffineBasic: StoryFn = () => {
   return (
     <ShareMenu
       currentPage={blockSuiteWorkspace.getPage('page0') as Page}
+      useIsSharedPage={useIsSharedPage}
       workspace={affineWorkspace}
       onEnableAffineCloud={unimplemented}
-      onOpenWorkspaceSettings={unimplemented}
       togglePagePublic={unimplemented}
-      toggleWorkspacePublish={unimplemented}
     />
   );
 };

apps/storybook/tsconfig.node.json

@@ -10,7 +10,7 @@
     "noEmit": false,
     "outDir": "lib/.storybook"
   },
-  "include": [".storybook/**/*"],
+  "include": [".storybook"],
   "exclude": ["lib"],
   "references": [
     { "path": "../../apps/core" },