Upgrade to sigma v3

project/.eslintrc → .eslintrc

@@ -7,5 +7,10 @@
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended"
-  ]
+  ],
+  "ignorePatterns":["*.d.ts"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "react/react-in-jsx-scope": "off"
+  }
 }

.github/workflows/test.yml

@@ -3,37 +3,48 @@ name: Test
 on:
   push:
     paths:
-      - "project/**"
+      - "packages/**"
       - ".github/workflows/test.yml"
   pull_request:
     paths:
-      - "project/**"
+      - "packages/**"
       - ".github/workflows/test.yml"
 
 jobs:
   test:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./project
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Cache node_modules
-        uses: actions/cache@v3
+      - uses: actions/setup-node@v4
         with:
-          path: "project/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('project/package-lock.json') }}
+          node-version: 20
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+      - name: Cache node_modules
+        uses: actions/cache@v4
         with:
-          node-version: 16
+          path: "node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('package-lock.json') }}
 
       - name: Install
         run: npm install
 
+      - name: Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['node_modules/playwright'].version)")" >> $GITHUB_ENV
+
+      - name: Cache Playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: "~/.cache/ms-playwright"
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
       - name: Build
         run: npm run build
 
@@ -44,10 +55,10 @@ jobs:
 
       - name: Uploading screenshots on failure
         if: steps.test.outcome == 'failure'
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: failure-screenshots
-          path: project/packages/examples/test/e2e/screenshots/
+          path: packages/storybook/test-results
 
       - name: Exit signal
         if: steps.test.outcome == 'failure'

.github/workflows/website.yml

@@ -10,32 +10,22 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: "**/node_modules"
           key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
 
-      - name: Project - Install
-        working-directory: project
+      - name: Install
         run: npm install
 
-      - name: Project - Compile
-        working-directory: project
-        run: npm run compile
-
-      - name: Website - Install
-        working-directory: website
-        run: npm install
-
-      - name: Website - Build
-        working-directory: website
-        run: npm run build
+      - name: Website
+        run: npm run website
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4.2.5
         with:
           branch: gh-pages # The branch the action should deploy to.
-          folder: website/build # The folder the action should deploy.
+          folder: packages/website/build # The folder the action should deploy.

.gitignore

@@ -1,10 +1,11 @@
 node_modules/
 lib/
 build/
+dist/
 *.current.png
 *.diff.png
 tsconfig.tsbuildinfo
-website/docs/api
+packages/website/docs/api
 .docusaurus
 .rollup.cache
 storybook-static

project/.npmignore → .npmignore

@@ -8,6 +8,7 @@ node_modules
 docs
 examples
 demo
+dist
 test
 .editorconfig
 .eslintignore

CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## Version 4.0.0
+
+### Features
+
+- Upgrade to sigma v3
+- Upgrade all project dependencies
+- Refacto project structure
+- Replace `example` project by a storybook
+- Replace E2E framework by playwright, and run it on the storybook
+- Using stories in website example 
+- Fully graph typed API (see [#58](https://github.com/sim51/react-sigma/issues/58)). Component & hooks take generic types for node, edge & graph attributs. Exemple for the load graph hook :
+```tsx
+const loadGraph = useLoadGraph<{label:string, x:number, y:number}, {label:string, size:number}>();
+```
+
+### Breaking changes
+
+- React-sigma doesn't depends anymore to lodash. It was use to make a deep equal on the settings provided to the `SigmaContainer`. Now you have to handle that :
+
+```tsx
+// Sigma settings are outside the react lifecycle to avoid the change of its ref at every render
+// which triggers a full render of sigma. An other way is to use the `useMemo` hook inside the component.
+const sigmaSettings = {
+  allowInvalidContainer: true,
+};
+
+export const Example: FC = () => {
+  return (
+    <SigmaContainer settings={sigmaSettings}>
+      <SampleGraph />
+    </SigmaContainer>
+  );
+};
+```
+
+- The sigma setting `allowInvalidContainer` is no more set per default. You have to pass it to the container (check above). 
+
+- When you register events on edges, we don't set the correspondig settings anymore, like `enableEdgeClickEvents` (see [#49](https://github.com/sim51/react-sigma/issues/49)).
+
 ## Version 3.4.2
 
 ### Fixes