refactor: use storybook v7 (#951)

apps/desktop/package.json

@@ -16,7 +16,7 @@
     "build:app": "tauri build"
   },
   "dependencies": {
-    "@blocksuite/store": "^0.3.1",
+    "@blocksuite/store": "0.4.0-20230212194855-047e1b9",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@tauri-apps/api": "^1.2.0",

apps/web/next.config.js

@@ -48,7 +48,7 @@ const nextConfig = {
     COMMIT_HASH: getCommitHash(),
     EDITOR_VERSION,
   },
-  transpilePackages: ['@affine/component'],
+  transpilePackages: ['@affine/component', '@affine/i18n'],
   webpack: config => {
     config.experiments = { ...config.experiments, topLevelAwait: true };
     config.resolve.alias['yjs'] = require.resolve('yjs');

apps/web/package.json

@@ -12,10 +12,10 @@
     "@affine/component": "workspace:*",
     "@affine/datacenter": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@blocksuite/blocks": "0.4.0-20230210031655-264744e",
+    "@blocksuite/blocks": "0.4.0-20230212194855-047e1b9",
-    "@blocksuite/editor": "0.4.0-20230210031655-264744e",
+    "@blocksuite/editor": "0.4.0-20230212194855-047e1b9",
     "@blocksuite/icons": "^2.0.14",
-    "@blocksuite/store": "0.4.0-20230210031655-264744e",
+    "@blocksuite/store": "0.4.0-20230212194855-047e1b9",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",

apps/web/tsconfig.json

@@ -19,7 +19,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "@affine/component": ["../../packages/component/src/index"]
+      "@affine/component": ["../../packages/component/src/index"],
+      "@affine/i18n": ["../../packages/i18n/src/index"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

packages/component/.storybook/main.js

@@ -1,44 +0,0 @@
-const path = require('node:path');
-
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  staticDirs: ['../../../apps/web/public'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
-  webpackFinal: config => {
-    const transpile = config.module.rules.find(x =>
-      x.test.toString().includes('tsx')
-    ).use;
-    transpile.push({
-      loader: require.resolve('swc-loader'),
-      options: {
-        parseMap: true,
-        jsc: {
-          parser: {
-            syntax: 'typescript',
-            dynamicImport: true,
-            tsx: true,
-          },
-          target: 'es2022',
-          transform: {
-            react: {
-              runtime: 'automatic',
-            },
-          },
-        },
-      },
-    });
-
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@': path.resolve(__dirname, '..', 'src'),
-      '@affine/i18n': path.resolve(__dirname, '..', '..', 'i18n', 'src'),
-    };
-    return config;
-  },
-  reactOptions: {
-    fastRefresh: true,
-  },
-};

packages/component/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../../../apps/web/public'],
+  addons: ['@storybook/addon-links'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: '.storybook/vite.config.ts',
+      },
+    },
+  },
+} as StorybookConfig;

packages/component/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { getLightTheme, ThemeProvider } from '../src';
 
 export const parameters = {
@@ -13,7 +14,7 @@ export const parameters = {
 const lightTheme = getLightTheme('page');
 
 export const decorators = [
-  Story => {
+  (Story: React.ComponentType) => {
     return (
       <ThemeProvider theme={lightTheme}>
         <Story />

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

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import path from 'node:path';
+import { fileURLToPath } from 'url';
+
+const config: Pick<StorybookConfig, 'viteFinal'> = {
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': path.resolve(fileURLToPath(new URL('../src', import.meta.url))),
+          '@affine/i18n': path.resolve(
+            fileURLToPath(new URL('../../i18n/src', import.meta.url))
+          ),
+        },
+      },
+    });
+  },
+};
+
+export default config;

packages/component/package.json

@@ -3,13 +3,16 @@
   "private": true,
   "version": "0.3.1",
   "scripts": {
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@affine/i18n": "workspace:*",
-    "@blocksuite/editor": "0.4.0-20230209191848-0a912e3",
+    "@blocksuite/blocks": "0.4.0-20230212194855-047e1b9",
+    "@blocksuite/editor": "0.4.0-20230212194855-047e1b9",
     "@blocksuite/icons": "^2.0.2",
+    "@blocksuite/react": "0.4.0-20230212194855-047e1b9",
+    "@blocksuite/store": "0.4.0-20230212194855-047e1b9",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/base": "=5.0.0-alpha.117",
@@ -20,17 +23,20 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "^7.0.0-beta.46",
-    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-essentials": "^7.0.0-beta.46",
-    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-links": "^7.0.0-beta.46",
-    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/builder-vite": "^7.0.0-beta.46",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^7.0.0-beta.46",
-    "@storybook/react": "^6.5.16",
+    "@storybook/react-vite": "7.0.0-beta.46",
     "@types/react": "^18.0.27",
     "@types/react-dom": "18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "storybook": "^7.0.0-beta.46",
     "swc": "^1.0.11",
     "swc-loader": "^0.2.3",
     "typescript": "^4.9.5",
+    "vite": "^4.0.2",
     "webpack": "^5.75.0"
   }
 }

packages/component/src/components/BlockSuiteEditor.tsx

@@ -0,0 +1,6 @@
+import { Editor, EditorProps } from '@blocksuite/react/editor';
+
+export type BlockSuiteEditorProps = EditorProps;
+export const BlockSuiteEditor = (props: BlockSuiteEditorProps) => {
+  return <Editor {...props} />;
+};

packages/component/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/BlockSuiteEditor';
 export * from './ui/breadcrumbs';
 export * from './ui/button';
 export * from './ui/confirm';

packages/component/src/stories/BlockSuiteEditor.stories.tsx

@@ -0,0 +1,66 @@
+/* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import React, { Suspense } from 'react';
+import { Meta, Story } from '@storybook/react';
+import { builtInSchemas } from '@blocksuite/blocks/models';
+import { BlockSuiteEditor, BlockSuiteEditorProps } from '..';
+import { Page, Workspace } from '@blocksuite/store';
+
+const worksapce = new Workspace({
+  room: 'test',
+  providers: [],
+  isSSR: typeof window === 'undefined',
+}).register(builtInSchemas);
+
+export default {
+  title: 'BlockSuite/Editor',
+  component: BlockSuiteEditor,
+} as Meta<BlockSuiteEditorProps>;
+
+const Template: Story<BlockSuiteEditorProps> = args => (
+  <Suspense fallback="loading page">
+    <BlockSuiteEditor {...args} />
+  </Suspense>
+);
+
+const presetMarkdown = `This playground is designed to:
+* 📝 Test basic editing experience.
+* ⚙️ Serve as E2E test entry.
+* 🔗 Demonstrate how BlockSuite reconciles real-time collaboration with [local-first](https://martin.kleppmann.com/papers/local-first.pdf) data ownership.
+## Controlling Playground Data Source
+You might initially enter this page with the \`?init\` URL param. This is the default (opt-in) setup that automatically loads this built-in article. Meanwhile, you'll connect to a random single-user room via a WebRTC provider by default. This is the "single-user mode" for local testing.
+To test real-time collaboration, you can specify the room to join by adding the \`?room=foo\` config - Try opening this page with \`?room=foo\` in two different tabs and see what happens!
+> Note that the second and subsequent users should not open the page with the \`?init\` param in this case. Also, due to the P2P nature of WebRTC, as long as there is at least one user connected to the room, the content inside the room will **always** exist.
+If you are the only user in the room, your content will be lost after refresh. This is great for local debugging. But if you want local persistence, you can open this page with the \`?providers=indexeddb&room=foo\` config, then click the init button in the bottom-left corner to initialize this default content.
+As a pro tip, you can combine multiple providers! For example, feel free to open this page with \`?providers=indexeddb,webrtc&room=hello\` params, and see if everything works as expected. Have fun!
+For any feedback, please visit [BlockSuite issues](https://github.com/toeverything/blocksuite/issues) 📍`;
+
+const pagePromise = new Promise<Page>(resolve => {
+  worksapce.signals.pageAdded.once(pageId => {
+    const page = worksapce.getPage(pageId) as Page;
+    pageOrPagePromise = page;
+    resolve(page);
+  });
+  worksapce.createPage('0');
+});
+let pageOrPagePromise: Promise<Page> | Page = pagePromise;
+
+export const Primary = Template.bind(undefined);
+Primary.args = {
+  page: () => pageOrPagePromise,
+  onInit: async (page, editor) => {
+    const pageBlockId = page.addBlockByFlavour('affine:page', {
+      title: 'Welcome to BlockSuite playground',
+    });
+    page.addBlockByFlavour('affine:surface', {}, null);
+    const frameId = page.addBlockByFlavour('affine:frame', {}, pageBlockId);
+    await editor.clipboard.importMarkdown(presetMarkdown, frameId);
+  },
+};
+
+Primary.parameters = {
+  docs: {
+    source: {
+      code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+    },
+  },
+};

packages/component/tsconfig.json

@@ -15,7 +15,11 @@
     "jsx": "preserve",
     "incremental": true,
     "experimentalDecorators": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@affine/i18n": ["../i18n/src/index"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

packages/data-center/package.json

@@ -27,8 +27,8 @@
     "yjs": "^13.5.45"
   },
   "dependencies": {
-    "@blocksuite/blocks": "0.4.0-20230210031655-264744e",
+    "@blocksuite/blocks": "0.4.0-20230212194855-047e1b9",
-    "@blocksuite/store": "0.4.0-20230210031655-264744e",
+    "@blocksuite/store": "0.4.0-20230212194855-047e1b9",
     "@tauri-apps/api": "^1.2.0",
     "debug": "^4.3.4",
     "encoding": "^0.1.13",

packages/i18n/package.json

@@ -2,11 +2,17 @@
   "name": "@affine/i18n",
   "version": "0.1.0",
   "description": "",
-  "main": "dist/src/index.js",
   "type": "module",
-  "types": "dist/src/index.d.ts",
+  "main": "src/index.ts",
   "exports": {
-    ".": "./dist/src/index.js"
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "main": "dist/src/index.js",
+    "types": "dist/src/index.d.ts",
+    "exports": {
+      ".": "./dist/src/index.js"
+    }
   },
   "scripts": {
     "build": "tsc --project ./tsconfig.json",