Merge pull request #8 from yWorks/dev

2.0.0 - yFiles for HTML 3.0

Author: anneeberle

README.md

@@ -31,12 +31,12 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
    In addition to yFiles, the Supply Chain component requires React to be installed in your project.
    If you want to start your project from scratch, we recommend using vite:
    ```
-   npm create vite@latest my-supply-chain-app -- --template react-ts
+   npm create vite@6.1.1 my-supply-chain-app -- --template react-ts
    ```
 
    Add the yFiles dependency:
    ```
-   npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
+   npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
    ```
 
    <details>
@@ -48,7 +48,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
+        "yfiles": "./lib/yfiles-30.0.0+dev.tgz"
      }
    ```
    </details>

docs/introduction/GettingStarted.mdx

@@ -4,8 +4,11 @@ section: 1
 tags: []
 ---
 import TypeLink from '../../components/TypeLink.astro'
+import Video from '../../components/Video.astro'
+import videoImage from './yt-react-components_supply-chain.png'
 
 # Getting Started
+<Video image={videoImage} url="https://youtu.be/NHF03g1tDWE"/>
 
 ## Prerequisites
 
@@ -23,12 +26,12 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
    In addition to yFiles, the Supply Chain component requires React to be installed in your project.
    If you want to start your project from scratch, we recommend using vite:
    ```
-   npm create vite@latest my-supply-chain-app -- --template react-ts
+   npm create vite@6.1.1 my-supply-chain-app -- --template react-ts
    ```
 
    Add the yFiles dependency:
    ```
-   npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
+   npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
    ```
 
    <details>
@@ -40,7 +43,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
+        "yfiles": "./lib/yfiles-30.0.0+dev.tgz"
      }
    ```
    </details>

docs/introduction/yt-react-components_supply-chain.png

@@ -1,7 +1,7 @@
 {
   "name": "@yworks/react-yfiles-supply-chain-examples",
   "private": true,
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/package.json

@@ -8,6 +8,7 @@ import ConnectionStyling from '../examples/connection-styling'
 import GraphSearch from '../examples/search'
 import SupplyChainProvider from '../examples/supply-chain-provider'
 import Export from '../examples/export'
+import SwitchData from '../examples/switch-data'
 
 export interface IRoute {
   title: string
@@ -76,6 +77,12 @@ const routes: IRoute[] = [
     description: 'An example demonstrating the export to an image and printing.',
     path: 'graph-export',
     component: Export
+  },
+  {
+    title: 'Switch Data',
+    description: 'Switching to different input data with partially shared ids',
+    path: 'switch-data',
+    component: SwitchData
   }
 ]
 

examples/src/App/routes.ts

@@ -37,13 +37,19 @@ function RenderItem(props: RenderGroupProps<UserSupplyChainItem>) {
       }}
     >
       {isFolderNode && (
-        <button onClick={() => supplyChainContext.toggleExpansionState(dataItem)}>
+        <button
+          onClick={() => supplyChainContext.toggleExpansionState(dataItem)}
+          onPointerDown={event => event.preventDefault()}
+        >
           Expand {dataItem.name}
         </button>
       )}
       {!isFolderNode && (
         <div style={{ display: 'flex', justifyItems: 'flex-start', alignItems: 'center' }}>
-          <button onClick={() => supplyChainContext.toggleExpansionState(dataItem)}>
+          <button
+            onClick={() => supplyChainContext.toggleExpansionState(dataItem)}
+            onPointerDown={event => event.preventDefault()}
+          >
             Collapse {dataItem.name}
           </button>
         </div>

examples/src/examples/custom-folder-style/index.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react'
+
+import { SupplyChain, Overview } from '@yworks/react-yfiles-supply-chain'
+import '@yworks/react-yfiles-supply-chain/dist/index.css'
+
+import reactSample1 from './inputData/sample-simple1.json'
+import reactSample2 from './inputData/sample-simple2.json'
+
+const SwitchData = () => {
+  const [inputData, setInputData] = useState(reactSample2)
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '1000px',
+        height: '800px',
+        marginTop: '50px'
+      }}
+    >
+      <div style={{ textAlign: 'center', padding: 10 }}>
+        <button
+          onClick={() => setInputData(inputData === reactSample1 ? reactSample2 : reactSample1)}
+        >
+          Switch Data
+        </button>
+      </div>
+
+      <SupplyChain style={{ width: '100%' }} data={inputData}>
+        <Overview />
+      </SupplyChain>
+    </div>
+  )
+}
+
+export default SwitchData

examples/src/examples/switch-data/index.tsx

@@ -0,0 +1,7 @@
+{
+  "items": [
+    { "name": "Parent1", "id": 10 },
+    { "name": "Natural Resource", "id": 0, "parentId": 10 }
+  ],
+  "connections": []
+}

examples/src/examples/switch-data/inputData/sample-simple1.json

@@ -0,0 +1,6 @@
+{
+  "items": [
+    { "name": "More Natural Resource", "id": 0 }
+  ],
+  "connections": []
+}

examples/src/examples/switch-data/inputData/sample-simple2.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/react-yfiles-supply-chain",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "yfileshtml@yworks.com"
@@ -45,7 +45,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "yfiles": "^26.0.0"
+    "@yfiles/yfiles": ">=30"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.39.1",
@@ -55,7 +55,7 @@
     "typescript": "^5.3.2"
   },
   "dependencies": {
-    "@yworks/react-yfiles-core": "^2.0.0"
+    "@yworks/react-yfiles-core": "^3.0.0"
   },
   "files": [
     "LICENSE",