Merge pull request #113 from streamich/upgrades

Upgrades

Author: streamich

.eslintrc.cjs

@@ -21,7 +21,7 @@ jobs:
           cache: yarn
       - run: yarn
       - run: yarn lint
-      - run: yarn prettier:check
+      - run: yarn format
       - run: yarn test
       - run: yarn build
       - run: yarn storybook:build --quiet

.github/workflows/checks.yml

@@ -24,7 +24,7 @@ jobs:
           cache: yarn
       - run: yarn
       - run: yarn lint
-      - run: yarn prettier:check
+      - run: yarn format
       - run: yarn test
       - run: yarn build
       - name: Semantic Release

.github/workflows/release.yml

@@ -2,18 +2,25 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook'
   ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };
 export default config;

.storybook/main.ts

@@ -2,7 +2,6 @@ import {Preview} from '@storybook/react';
 
 const preview: Preview = {
   parameters: {
-    actions: {argTypesRegex: '^on[A-Z].*'},
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/preview.tsx

@@ -0,0 +1,53 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"formatter": {
+		"indentStyle": "space",
+		"lineWidth": 120
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"trailingCommas": "all",
+			"bracketSpacing": false
+		}
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"noNonNullAssertion": "off",
+				"useNodejsImportProtocol": "off",
+				"useTemplate": "off",
+				"noInferrableTypes": "off",
+				"noUselessElse": "off",
+				"noParameterAssign": "off",
+				"noCommaOperator": "off",
+				"useSingleVarDeclarator": "off",
+				"useLiteralEnumMembers": "off"
+			},
+			"suspicious": {
+				"noExplicitAny": "off",
+				"useIsArray": "off",
+				"noAssignInExpressions": "off",
+				"noConfusingLabels": "off",
+				"noConfusingVoidType": "off",
+				"noConstEnum": "off"
+			},
+			"complexity": {
+				"noStaticOnlyClass": "off",
+				"useOptionalChain": "off",
+				"noUselessLabel": "off"
+			},
+			"a11y": {
+				"noSvgWithoutTitle": "off"
+			},
+			"performance": {
+				"noDelete": "off"
+			}
+		}
+	}
+}

biome.json

@@ -16,12 +16,11 @@
     "lib/"
   ],
   "scripts": {
-    "prettier": "prettier --ignore-path .gitignore --write 'src/**/*.{ts,tsx,js,jsx}'",
-    "prettier:check": "prettier --ignore-path .gitignore --list-different 'src/**/*.{ts,tsx,js,jsx}'",
-    "lint": "yarn eslint",
-    "lint:fix": "yarn eslint --fix",
-    "eslint": "eslint src",
-    "clean": "rimraf dist lib es6 es2019 es2020 esm typedocs storybook-static",
+    "format": "biome format ./src",
+    "format:fix": "biome format --write ./src",
+    "lint": "biome lint ./src",
+    "lint:fix": "biome lint --write ./src",
+    "clean": "npx [email protected] dist lib es6 es2019 es2020 esm typedocs storybook-static",
     "build": "tsc --project tsconfig.build.json",
     "jest": "jest",
     "test": "yarn jest --maxWorkers 7",
@@ -50,43 +49,40 @@
     "crdt"
   ],
   "dependencies": {
-    "collaborative-editor": "^2.8.0",
-    "react-use": "^17.5.1"
+    "collaborative-editor": "^2.9.0",
+    "json-joy": "^17.42.0",
+    "react-use": "^17.6.0"
   },
   "peerDependencies": {
     "@monaco-editor/react": "*",
-    "json-joy": "*",
     "monaco-editor": "*",
     "tslib": "2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@biomejs/biome": "^1.9.4",
+    "@chromatic-com/storybook": "^3",
     "@monaco-editor/react": "^4.6.0",
-    "@storybook/addon-essentials": "^7.6.2",
-    "@storybook/addon-interactions": "^7.6.2",
-    "@storybook/addon-links": "^7.6.2",
+    "@storybook/addon-essentials": "^8.6.13",
+    "@storybook/addon-interactions": "^8.6.13",
+    "@storybook/addon-links": "^8.6.13",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/addons": "^7.6.2",
-    "@storybook/blocks": "^7.6.2",
-    "@storybook/react": "^7.6.2",
-    "@storybook/react-webpack5": "^7.6.2",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/blocks": "^8.6.13",
+    "@storybook/react": "^8.6.13",
+    "@storybook/react-webpack5": "^8.6.13",
+    "@storybook/test": "^8.6.13",
     "@types/jest": "^29.5.10",
     "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "eslint": "^8.54.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
     "json-joy": "^17.2.0",
     "monaco-editor": "^0.52.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rimraf": "^6.0.1",
-    "storybook": "^7.6.2",
+    "storybook": "^8.6.13",
     "ts-jest": "^29.1.1",
     "tslib": "^2.7.0",
     "typescript": "^5.6.3"
@@ -117,22 +113,6 @@
       "^(\\.{1,2}/.*)\\.js$": "$1"
     }
   },
-  "prettier": {
-    "arrowParens": "always",
-    "printWidth": 120,
-    "tabWidth": 2,
-    "useTabs": false,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "all",
-    "bracketSpacing": false
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "config": {
     "config": {
       "commitizen": {

package.json

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {bind} from '.';
-import {Editor, EditorProps} from '@monaco-editor/react';
+import {Editor, type EditorProps} from '@monaco-editor/react';
 import type {CollaborativeStr} from 'collaborative-editor';
 
 export interface CollaborativeMonacoProps extends EditorProps {
@@ -16,6 +16,7 @@ export const CollaborativeMonaco: React.FC<CollaborativeMonacoProps> = ({str, ..
   }, []);
 
   const handleMount = (editor: any, monaco: any) => {
+    unbind.current?.();
     unbind.current = bind(str, editor, true);
     rest.onMount?.(editor, monaco);
   };

src/CollaborativeMonaco.tsx

@@ -27,7 +27,7 @@ const Editor: React.FC<EditorProps> = ({
   const [model, clone] = React.useMemo(() => {
     const model = Model.create(s.str(src));
     return [model, model.clone()];
-  }, []);
+  }, [src]);
   React.useSyncExternalStore(model.api.subscribe, () => model.tick);
 
   const insert = (text: string, position?: number) => {
@@ -55,10 +55,13 @@ const Editor: React.FC<EditorProps> = ({
         }}
       />
       <div>
-        <button onClick={() => insert('!')}>Append "!" to editor</button>
+        <button type={'button'} onClick={() => insert('!')}>
+          Append "!" to editor
+        </button>
       </div>
       <div>
         <button
+          type={'button'}
           onClick={() => {
             setTimeout(() => {
               insert('?');
@@ -70,6 +73,7 @@ const Editor: React.FC<EditorProps> = ({
       </div>
       <div>
         <button
+          type={'button'}
           onClick={() => {
             setTimeout(() => {
               const str = model.s.toApi();
@@ -82,6 +86,7 @@ const Editor: React.FC<EditorProps> = ({
       </div>
       <div>
         <button
+          type={'button'}
           onClick={() => {
             setTimeout(() => {
               insert('1. ', 0);
@@ -93,6 +98,7 @@ const Editor: React.FC<EditorProps> = ({
       </div>
       <div>
         <button
+          type={'button'}
           onClick={() => {
             setTimeout(() => {
               const str = model.s.toApi();
@@ -105,6 +111,7 @@ const Editor: React.FC<EditorProps> = ({
       </div>
       <div>
         <button
+          type={'button'}
           onClick={() => {
             setTimeout(() => {
               model.reset(clone);