refactor: seperate storybook (#1455)

e2e/package.json

@@ -14,10 +14,7 @@
     "test": "nx cypress:e2e",
     "test:verbose": "nx open-cypress",
     "start:test": "cross-env CYPRESS_SERVER_PORT=8000 start-test setup tcp:8000 test",
-    "start:test:verbose": "cross-env CYPRESS_SERVER_PORT=8000 start-test setup:verbose tcp:8000 test:verbose",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
-    "storybook:serve": "serve storybook-static"
+    "start:test:verbose": "cross-env CYPRESS_SERVER_PORT=8000 start-test setup:verbose tcp:8000 test:verbose"
   },
   "dependencies": {
     "@codemirror/commands": "^6.3.3",

package.json

@@ -14,12 +14,12 @@
     "test:tsc": "pnpm --filter=@milkdown/* run tsc",
     "test:tsc:cache": "nx run-many --target=tsc --all --parallel",
     "test:lint": "eslint .",
-    "test:e2e": "pnpm --filter=@milkdown/e2e run start:test",
+    "test:e2e": "nx e2e @milkdown/e2e",
     "test:e2e:build": "nx build @milkdown/e2e",
-    "test:e2e:verbose": "pnpm --filter=@milkdown/e2e run start:test:verbose",
+    "test:e2e:verbose": "nx open-cypress @milkdown/e2e",
     "format": "lint-staged",
     "watch": "pnpm --filter=./packages --parallel run start",
-    "start": "pnpm --filter=@milkdown/e2e run storybook",
+    "start": "pnpm --filter=@milkdown/storybook run start",
     "build": "nx run-many --target=build --all --parallel",
     "build:affected": "nx affected --target=build",
     "build:packs": "pnpm --filter=@milkdown/* run build",

pnpm-workspace.yaml

@@ -3,3 +3,4 @@ packages:
   - 'packages/plugins/*'
   - 'packages/integrations/*'
   - e2e
+  - storybook

e2e/.storybook/preview.ts → storybook/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/html'
 
 import './style.css'
+import '@milkdown/theme-nord/style.css'
 
 const preview: Preview = {
   parameters: {

storybook/.storybook/style.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  padding: 0;
+}
+
+.milkdown {
+  @apply bg-slate-50 border rounded;
+}
+
+.milkdown:not(.crepe .milkdown) {
+  @apply px-8 py-4 mx-5;
+}
+
+.editor {
+  @apply mx-auto max-w-full;
+}
+
+input {
+  border: 0;
+  outline: none;
+}
+
+input:focus {
+  border: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+span[data-type='emoji'] {
+  @apply inline-block;
+}
+
+span[data-type='emoji'] .emoji {
+  @apply w-4;
+}

storybook/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@milkdown/storybook",
+  "version": "7.4.0",
+  "private": true,
+  "files": [
+    "style"
+  ],
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build": "storybook build",
+    "serve": "serve storybook-static"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/language-data": "^6.4.1",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.26.0",
+    "@milkdown/crepe": "workspace:*",
+    "@milkdown/kit": "workspace:*",
+    "@milkdown/theme-nord": "workspace:*",
+    "@uiw/codemirror-theme-basic": "^4.22.1",
+    "@uiw/codemirror-theme-nord": "^4.22.1",
+    "atomico": "^1.75.1",
+    "codemirror": "^6.0.1",
+    "katex": "^0.16.0",
+    "tslib": "^2.5.0"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/lib"
+        ],
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  }
+}

storybook/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': {},
+    'tailwindcss': {},
+    'autoprefixer': {},
+  },
+}

storybook/shim.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

e2e/stories/components/code-block.stories.ts → storybook/stories/components/code-block.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { codeBlockComponent, codeBlockConfig } from '@milkdown/components/code-block'
+import { codeBlockComponent, codeBlockConfig } from '@milkdown/kit/component/code-block'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { languages } from '@codemirror/language-data'
 import { basicSetup } from 'codemirror'

e2e/stories/components/image-block.stories.ts → storybook/stories/components/image-block.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { imageBlockComponent } from '@milkdown/components/image-block'
+import { imageBlockComponent } from '@milkdown/kit/component/image-block'
 
 import type { CommonArgs } from '../utils/shadow'
 import { setupMilkdown } from '../utils/shadow'

e2e/stories/components/inline-image-block.stories.ts → storybook/stories/components/inline-image-block.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { imageInlineComponent } from '@milkdown/components/image-inline'
+import { imageInlineComponent } from '@milkdown/kit/component/image-inline'
 
 import type { CommonArgs } from '../utils/shadow'
 import { setupMilkdown } from '../utils/shadow'

e2e/stories/components/link-tooltip.stories.ts → storybook/stories/components/link-tooltip.stories.ts

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { editorViewCtx } from '@milkdown/core'
-import { linkSchema } from '@milkdown/preset-commonmark'
+import { editorViewCtx } from '@milkdown/kit/core'
+import { linkSchema } from '@milkdown/kit/preset/commonmark'
 import {
   configureLinkTooltip,
   linkTooltipAPI,
   linkTooltipPlugin,
   linkTooltipState,
-} from '@milkdown/components/link-tooltip'
-import { TooltipProvider, tooltipFactory } from '@milkdown/plugin-tooltip'
-import type { Ctx } from '@milkdown/ctx'
-import type { EditorView } from '@milkdown/prose/view'
-import type { EditorState } from '@milkdown/prose/state'
+} from '@milkdown/kit/component/link-tooltip'
+import { TooltipProvider, tooltipFactory } from '@milkdown/kit/plugin/tooltip'
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { EditorView } from '@milkdown/kit/prose/view'
+import type { EditorState } from '@milkdown/kit/prose/state'
 
 import type { CommonArgs } from '../utils/shadow'
 import { setupMilkdown } from '../utils/shadow'

e2e/stories/components/list-item-block.stories.ts → storybook/stories/components/list-item-block.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { gfm } from '@milkdown/preset-gfm'
-import { listItemBlockComponent } from '@milkdown/components/list-item-block'
+import { gfm } from '@milkdown/kit/preset/gfm'
+import { listItemBlockComponent } from '@milkdown/kit/component/list-item-block'
 
 import type { CommonArgs } from '../utils/shadow'
 import { setupMilkdown } from '../utils/shadow'

e2e/stories/components/table-block.stories.ts → storybook/stories/components/table-block.stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { gfm } from '@milkdown/preset-gfm'
+import { gfm } from '@milkdown/kit/preset/gfm'
 
-import { tableBlock } from '@milkdown/components/table-block'
-import tableStyle from '@milkdown/prose/tables/style/tables.css?inline'
-import { cursor } from '@milkdown/plugin-cursor'
-import { history } from '@milkdown/plugin-history'
+import { tableBlock } from '@milkdown/kit/component/table-block'
+import tableStyle from '@milkdown/kit/prose/tables/style/tables.css?inline'
+import { cursor } from '@milkdown/kit/plugin/cursor'
+import { history } from '@milkdown/kit/plugin/history'
 import type { CommonArgs } from '../utils/shadow'
 import { setupMilkdown } from '../utils/shadow'
 import style from './table-block.css?inline'

e2e/stories/plugins/listener.stories.ts → storybook/stories/plugins/listener.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { EditorStatus } from '@milkdown/core'
-import { listener, listenerCtx } from '@milkdown/plugin-listener'
+import { EditorStatus } from '@milkdown/kit/core'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
 import { action } from '@storybook/addon-actions'
 
 import type { CommonArgs } from '../utils/shadow'

e2e/stories/utils/shadow.ts → storybook/stories/utils/shadow.ts

@@ -1,9 +1,9 @@
 import nordStyle from '@milkdown/theme-nord/style.css?inline'
-import pmStyle from '@milkdown/prose/view/style/prosemirror.css?inline'
-import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/core'
+import pmStyle from '@milkdown/kit/prose/view/style/prosemirror.css?inline'
+import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/kit/core'
 import { nord } from '@milkdown/theme-nord'
-import { commonmark } from '@milkdown/preset-commonmark'
-import { history } from '@milkdown/plugin-history'
+import { commonmark } from '@milkdown/kit/preset/commonmark'
+import { history } from '@milkdown/kit/plugin/history'
 import commonStyle from './style.css?inline'
 
 export function wrapInShadow(styles: string[]) {

storybook/tailwind.config.cjs

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['**/*.tsx', '**/*.ts', '**/*.html'],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('tailwind-nord'),
+  ],
+}

storybook/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["dom"],
+    "baseUrl": ".",
+    "rootDir": ".",
+    "sourceMap": false
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "es2022",
+      "moduleResolution": "node"
+    }
+  }
+}