chore: add chromatic ci

.github/workflows/chromatic.yaml

@@ -0,0 +1,30 @@
+# .github/workflows/chromatic.yml
+
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 8
+      - name: Install dependencies
+        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+        run: pnpm install && cd examples/stories && pnpm install
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: examples/stories

examples/stories/src/stories/Editor.stories.tsx

@@ -1,17 +1,16 @@
+import type { Meta } from "@storybook/react";
 
-import type { Meta } from '@storybook/react';
-
-import { Editor } from './Editor';
-import { Loro } from 'loro-crdt';
-import { useEffect, useRef } from 'react';
-import { CursorAwareness } from 'loro-prosemirror';
+import { Editor } from "./Editor";
+import { Loro } from "loro-crdt";
+import { useEffect, useRef } from "react";
+import { CursorAwareness } from "loro-prosemirror";
 
 const meta = {
-  title: 'Editor/Basic',
+  title: "Editor/Basic",
   component: Editor,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } satisfies Meta<typeof Editor>;
 
@@ -21,21 +20,22 @@ export const Basic = () => {
   const loroARef = useRef<Loro>(createLoro());
   const idA = loroARef.current.peerIdStr;
   const awarenessA = useRef<CursorAwareness>(new CursorAwareness(idA));
-  return <div>
-    <Editor loro={loroARef.current} awareness={awarenessA.current} />
-  </div>
-
+  return (
+    <div>
+      <Editor loro={loroARef.current} awareness={awarenessA.current} />
+    </div>
+  );
 };
 
 function createLoro() {
   const doc = new Loro();
   doc.configTextStyle({
-    "em": { expand: "after" },
-    "strong": { expand: "after" },
-    "code": { expand: "none" },
-    "link": { expand: "none" },
-  })
-  return doc
+    em: { expand: "after" },
+    strong: { expand: "after" },
+    code: { expand: "none" },
+    link: { expand: "none" },
+  });
+  return doc;
 }
 
 export const Sync = () => {
@@ -46,32 +46,38 @@ export const Sync = () => {
   const idB = loroBRef.current.peerIdStr;
   const awarenessB = useRef<CursorAwareness>(new CursorAwareness(idB));
   useEffect(() => {
-    loroARef.current.subscribe(event => {
+    loroARef.current.subscribe((event) => {
       if (event.by === "local") {
-        loroBRef.current.import(loroARef.current.exportFrom(loroBRef.current.oplogVersion()))
+        loroBRef.current.import(
+          loroARef.current.exportFrom(loroBRef.current.oplogVersion()),
+        );
       }
     });
-    loroBRef.current.subscribe(event => {
+    loroBRef.current.subscribe((event) => {
       if (event.by === "local") {
-        loroARef.current.import(loroBRef.current.exportFrom(loroARef.current.oplogVersion()))
+        loroARef.current.import(
+          loroBRef.current.exportFrom(loroARef.current.oplogVersion()),
+        );
       }
-    })
+    });
     awarenessA.current.addListener((_state, origin) => {
       if (origin === "local") {
         awarenessB.current.apply(awarenessA.current.encode([idA]));
       }
-    })
+    });
     awarenessB.current.addListener((_state, origin) => {
       if (origin === "local") {
         awarenessA.current.apply(awarenessB.current.encode([idB]));
       }
-    })
+    });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
-  return <div>
-    <Editor loro={loroARef.current} awareness={awarenessA.current} />
-    <Editor loro={loroBRef.current} awareness={awarenessB.current} />
-  </div>
+  return (
+    <div>
+      <Editor loro={loroARef.current} awareness={awarenessA.current} />
+      <Editor loro={loroBRef.current} awareness={awarenessB.current} />
+    </div>
+  );
 };