diff --git a/e2e/.storybook/style.css b/e2e/.storybook/style.css deleted file mode 100644 index 90b0360da015..000000000000 --- a/e2e/.storybook/style.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - padding: 0; -} diff --git a/e2e/package.json b/e2e/package.json index 6defd9af4c81..03803b3b666c 100644 --- a/e2e/package.json +++ b/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", diff --git a/e2e/stories/plugins/emoji.stories.ts b/e2e/stories/plugins/emoji.stories.ts deleted file mode 100644 index 680a6caf364a..000000000000 --- a/e2e/stories/plugins/emoji.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/html' -import { emoji } from '@milkdown/plugin-emoji' -import type { CommonArgs } from '../utils/shadow' -import { setupMilkdown } from '../utils/shadow' - -const meta: Meta = { - title: 'Plugins/Emoji', -} - -export default meta - -type Story = StoryObj - -const defaultValue = ` -Raw: 🫥 - -Shortcut: :+1: -` - -export const Default: Story = { - render: (args) => { - return setupMilkdown([], args, (editor) => { - editor.use(emoji) - }) - }, - args: { - defaultValue, - }, -} diff --git a/package.json b/package.json index 04f05963dde3..e8bd2d2192f2 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c34b8acab0ec..de1ba3f7c173 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1186,6 +1186,51 @@ importers: specifier: workspace:* version: link:../transformer + storybook: + dependencies: + '@codemirror/commands': + specifier: ^6.3.3 + version: 6.3.3 + '@codemirror/language-data': + specifier: ^6.4.1 + version: 6.4.1(@codemirror/state@6.4.1)(@codemirror/view@6.26.0)(@lezer/common@1.2.1) + '@codemirror/state': + specifier: ^6.4.1 + version: 6.4.1 + '@codemirror/theme-one-dark': + specifier: ^6.1.2 + version: 6.1.2 + '@codemirror/view': + specifier: ^6.26.0 + version: 6.26.0 + '@milkdown/crepe': + specifier: workspace:* + version: link:../packages/crepe + '@milkdown/kit': + specifier: workspace:* + version: link:../packages/kit + '@milkdown/theme-nord': + specifier: workspace:* + version: link:../packages/plugins/theme-nord + '@uiw/codemirror-theme-basic': + specifier: ^4.22.1 + version: 4.22.1(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0) + '@uiw/codemirror-theme-nord': + specifier: ^4.22.1 + version: 4.22.1(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0) + atomico: + specifier: ^1.75.1 + version: 1.75.1 + codemirror: + specifier: ^6.0.1 + version: 6.0.1(@lezer/common@1.2.1) + katex: + specifier: ^0.16.0 + version: 0.16.10 + tslib: + specifier: ^2.5.0 + version: 2.6.3 + packages: '@aashutoshrathi/word-wrap@1.2.6': @@ -12601,7 +12646,7 @@ snapshots: nx: 19.5.6(@swc-node/register@1.10.9(@swc/core@1.7.5(@swc/helpers@0.5.12))(@swc/types@0.1.12)(typescript@5.4.4))(@swc/core@1.7.5(@swc/helpers@0.5.12)) semver: 7.6.0 tmp: 0.2.1 - tslib: 2.6.2 + tslib: 2.6.3 yargs-parser: 21.1.1 '@nx/eslint@19.5.6(@babel/traverse@7.24.6)(@swc-node/register@1.10.9(@swc/core@1.7.5(@swc/helpers@0.5.12))(@swc/types@0.1.12)(typescript@5.4.4))(@swc/core@1.7.5(@swc/helpers@0.5.12))(@types/node@20.10.5)(@zkochan/js-yaml@0.0.7)(eslint@9.2.0)(nx@19.5.6(@swc-node/register@1.10.9(@swc/core@1.7.5(@swc/helpers@0.5.12))(@swc/types@0.1.12)(typescript@5.4.4))(@swc/core@1.7.5(@swc/helpers@0.5.12)))': @@ -12611,7 +12656,7 @@ snapshots: '@nx/linter': 19.5.6(@babel/traverse@7.24.6)(@swc-node/register@1.10.9(@swc/core@1.7.5(@swc/helpers@0.5.12))(@swc/types@0.1.12)(typescript@5.4.4))(@swc/core@1.7.5(@swc/helpers@0.5.12))(@types/node@20.10.5)(@zkochan/js-yaml@0.0.7)(eslint@9.2.0)(nx@19.5.6(@swc-node/register@1.10.9(@swc/core@1.7.5(@swc/helpers@0.5.12))(@swc/types@0.1.12)(typescript@5.4.4))(@swc/core@1.7.5(@swc/helpers@0.5.12))) eslint: 9.2.0 semver: 7.6.0 - tslib: 2.6.2 + tslib: 2.6.3 typescript: 5.4.4 optionalDependencies: '@zkochan/js-yaml': 0.0.7 @@ -12656,7 +12701,7 @@ snapshots: source-map-support: 0.5.19 ts-node: 10.9.1(@swc/core@1.7.5(@swc/helpers@0.5.12))(@types/node@20.10.5)(typescript@5.4.4) tsconfig-paths: 4.2.0 - tslib: 2.6.2 + tslib: 2.6.3 transitivePeerDependencies: - '@babel/traverse' - '@swc-node/register' diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 3f76c71ec675..f2469e97567d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -3,3 +3,4 @@ packages: - 'packages/plugins/*' - 'packages/integrations/*' - e2e + - storybook diff --git a/e2e/.storybook/main.ts b/storybook/.storybook/main.ts similarity index 100% rename from e2e/.storybook/main.ts rename to storybook/.storybook/main.ts diff --git a/e2e/.storybook/preview-head.html b/storybook/.storybook/preview-head.html similarity index 100% rename from e2e/.storybook/preview-head.html rename to storybook/.storybook/preview-head.html diff --git a/e2e/.storybook/preview.ts b/storybook/.storybook/preview.ts similarity index 92% rename from e2e/.storybook/preview.ts rename to storybook/.storybook/preview.ts index e79d7a753c8c..459ea1c2c25d 100644 --- a/e2e/.storybook/preview.ts +++ b/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: { diff --git a/storybook/.storybook/style.css b/storybook/.storybook/style.css new file mode 100644 index 000000000000..9321bf0b864d --- /dev/null +++ b/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; +} diff --git a/storybook/package.json b/storybook/package.json new file mode 100644 index 000000000000..705970526cf5 --- /dev/null +++ b/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" + ] + } + } + } +} diff --git a/storybook/postcss.config.cjs b/storybook/postcss.config.cjs new file mode 100644 index 000000000000..12f2acc5b9f3 --- /dev/null +++ b/storybook/postcss.config.cjs @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + 'tailwindcss/nesting': {}, + 'tailwindcss': {}, + 'autoprefixer': {}, + }, +} diff --git a/storybook/public/milkdown-logo.png b/storybook/public/milkdown-logo.png new file mode 100644 index 000000000000..8e00ed6c704d Binary files /dev/null and b/storybook/public/milkdown-logo.png differ diff --git a/storybook/public/typescript-label.svg b/storybook/public/typescript-label.svg new file mode 100644 index 000000000000..1059eef464ef --- /dev/null +++ b/storybook/public/typescript-label.svg @@ -0,0 +1,20 @@ + + TypeScript + + + + + + + + + + + + + \ No newline at end of file diff --git a/storybook/shim.d.ts b/storybook/shim.d.ts new file mode 100644 index 000000000000..11f02fe2a006 --- /dev/null +++ b/storybook/shim.d.ts @@ -0,0 +1 @@ +/// diff --git a/e2e/stories/components/code-block.css b/storybook/stories/components/code-block.css similarity index 100% rename from e2e/stories/components/code-block.css rename to storybook/stories/components/code-block.css diff --git a/e2e/stories/components/code-block.stories.ts b/storybook/stories/components/code-block.stories.ts similarity index 94% rename from e2e/stories/components/code-block.stories.ts rename to storybook/stories/components/code-block.stories.ts index fd527fd9c29a..a0738674d1e3 100644 --- a/e2e/stories/components/code-block.stories.ts +++ b/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' diff --git a/e2e/stories/components/image-block.css b/storybook/stories/components/image-block.css similarity index 100% rename from e2e/stories/components/image-block.css rename to storybook/stories/components/image-block.css diff --git a/e2e/stories/components/image-block.stories.ts b/storybook/stories/components/image-block.stories.ts similarity index 90% rename from e2e/stories/components/image-block.stories.ts rename to storybook/stories/components/image-block.stories.ts index 2652d4195c54..183c4304bddc 100644 --- a/e2e/stories/components/image-block.stories.ts +++ b/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' diff --git a/e2e/stories/components/inline-image-block.css b/storybook/stories/components/inline-image-block.css similarity index 100% rename from e2e/stories/components/inline-image-block.css rename to storybook/stories/components/inline-image-block.css diff --git a/e2e/stories/components/inline-image-block.stories.ts b/storybook/stories/components/inline-image-block.stories.ts similarity index 90% rename from e2e/stories/components/inline-image-block.stories.ts rename to storybook/stories/components/inline-image-block.stories.ts index d40288c05682..56d6e74b6d1c 100644 --- a/e2e/stories/components/inline-image-block.stories.ts +++ b/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' diff --git a/e2e/stories/components/link-tooltip.css b/storybook/stories/components/link-tooltip.css similarity index 100% rename from e2e/stories/components/link-tooltip.css rename to storybook/stories/components/link-tooltip.css diff --git a/e2e/stories/components/link-tooltip.stories.ts b/storybook/stories/components/link-tooltip.stories.ts similarity index 85% rename from e2e/stories/components/link-tooltip.stories.ts rename to storybook/stories/components/link-tooltip.stories.ts index 574c1d57fe72..00bcb4df2361 100644 --- a/e2e/stories/components/link-tooltip.stories.ts +++ b/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' diff --git a/e2e/stories/components/list-item-block.css b/storybook/stories/components/list-item-block.css similarity index 100% rename from e2e/stories/components/list-item-block.css rename to storybook/stories/components/list-item-block.css diff --git a/e2e/stories/components/list-item-block.stories.ts b/storybook/stories/components/list-item-block.stories.ts similarity index 89% rename from e2e/stories/components/list-item-block.stories.ts rename to storybook/stories/components/list-item-block.stories.ts index 8258c15031a4..996a162ec35b 100644 --- a/e2e/stories/components/list-item-block.stories.ts +++ b/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' diff --git a/e2e/stories/components/table-block.css b/storybook/stories/components/table-block.css similarity index 100% rename from e2e/stories/components/table-block.css rename to storybook/stories/components/table-block.css diff --git a/e2e/stories/components/table-block.stories.ts b/storybook/stories/components/table-block.stories.ts similarity index 71% rename from e2e/stories/components/table-block.stories.ts rename to storybook/stories/components/table-block.stories.ts index cf941b4b21cc..e2aca2ae8edd 100644 --- a/e2e/stories/components/table-block.stories.ts +++ b/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' diff --git a/e2e/stories/crepe/crepe-dark.stories.ts b/storybook/stories/crepe/crepe-dark.stories.ts similarity index 100% rename from e2e/stories/crepe/crepe-dark.stories.ts rename to storybook/stories/crepe/crepe-dark.stories.ts diff --git a/e2e/stories/crepe/crepe.stories.ts b/storybook/stories/crepe/crepe.stories.ts similarity index 100% rename from e2e/stories/crepe/crepe.stories.ts rename to storybook/stories/crepe/crepe.stories.ts diff --git a/e2e/stories/crepe/nord-dark.stories.ts b/storybook/stories/crepe/nord-dark.stories.ts similarity index 100% rename from e2e/stories/crepe/nord-dark.stories.ts rename to storybook/stories/crepe/nord-dark.stories.ts diff --git a/e2e/stories/crepe/nord.stories.ts b/storybook/stories/crepe/nord.stories.ts similarity index 100% rename from e2e/stories/crepe/nord.stories.ts rename to storybook/stories/crepe/nord.stories.ts diff --git a/e2e/stories/crepe/setup.ts b/storybook/stories/crepe/setup.ts similarity index 100% rename from e2e/stories/crepe/setup.ts rename to storybook/stories/crepe/setup.ts diff --git a/e2e/stories/plugins/listener.css b/storybook/stories/plugins/listener.css similarity index 100% rename from e2e/stories/plugins/listener.css rename to storybook/stories/plugins/listener.css diff --git a/e2e/stories/plugins/listener.stories.ts b/storybook/stories/plugins/listener.stories.ts similarity index 92% rename from e2e/stories/plugins/listener.stories.ts rename to storybook/stories/plugins/listener.stories.ts index 6a47f177fe84..4ba8a3c91727 100644 --- a/e2e/stories/plugins/listener.stories.ts +++ b/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' diff --git a/e2e/stories/utils/shadow.ts b/storybook/stories/utils/shadow.ts similarity index 88% rename from e2e/stories/utils/shadow.ts rename to storybook/stories/utils/shadow.ts index 7ea8af96997a..e925c97c3fe5 100644 --- a/e2e/stories/utils/shadow.ts +++ b/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[]) { diff --git a/e2e/stories/utils/style.css b/storybook/stories/utils/style.css similarity index 100% rename from e2e/stories/utils/style.css rename to storybook/stories/utils/style.css diff --git a/storybook/tailwind.config.cjs b/storybook/tailwind.config.cjs new file mode 100644 index 000000000000..fd0dbc57f927 --- /dev/null +++ b/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'), + ], +} diff --git a/storybook/tsconfig.json b/storybook/tsconfig.json new file mode 100644 index 000000000000..5a07934055f7 --- /dev/null +++ b/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" + } + } +} diff --git a/storybook/vite.config.mts b/storybook/vite.config.mts new file mode 100644 index 000000000000..3b9cb39832fb --- /dev/null +++ b/storybook/vite.config.mts @@ -0,0 +1,14 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + root: 'src', + build: { + outDir: '../lib', + emptyOutDir: true, + }, + server: { + fs: { + strict: false, + }, + }, +})