Merge pull request #6 from yWorks/dev

Dev
yWorks · May 15, 2024 · 40c76a9 · 40c76a9
2 parents 71e4f46 + e074776
commit 40c76a9
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -15,71 +15,107 @@ user experience and facilitates an intuitive exploration of complex manufacturin
 
 ## Getting Started
 
-1. **Installation:**
-   Install the component via npm by running the following command in your project directory:
-   ```bash
-   npm install @yworks/react-yfiles-supply-chain
+### Prerequisites
+
+To use the Supply Chain component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
+You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
+See [Licensing](https://docs.yworks.com/react-yfiles-supply-chain/introduction/licensing) for more information on this topic.
+
+You can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite).
+
+
+### Project Setup
+
+1. **Installation**
+
+   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
    ```
 
-   The supply chain module has certain peer dependencies that must be installed within your project. Since it is a React
-   module, `react` and `react-dom` dependencies are needed.
+   Add the yFiles dependency:
+   ```
+   npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
+   ```
+
+   <details>
 
-   Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not
-   available on the public npm registry. Instructions on how to work with the yFiles npm module in
-   our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module).
+   <summary>Sample <code>package.json</code> dependencies</summary>
+   The resulting package.json dependencies should resemble the following:
 
-   Ensure that the dependencies in the `package.json` file resemble the following:
    ```json
-   {
-     ...
-     "dependencies": {
-       "@yworks/react-yfiles-supply-chain": "^1.0.0",
-       "react": "^18.2.0",
-       "react-dom": "^18.2.0",
-       "yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
-       ...
+      "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
      }
-   }
    ```
+   </details>
+
+   Now, the component itself can be installed:
+   ```bash
+   npm install @yworks/react-yfiles-supply-chain
+   ```
+
+2. **License**
+
+   Be sure to invoke the `registerLicense` function before using the Supply Chain React component.
+   When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
+   For licensed users, the license data is provided separately.
+
+   <details>
 
-2. **License:**
-   Before using the component, a valid [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) version is
-   required. You can evaluate yFiles for 60 days free of charge
-   on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
-   Be sure to invoke the `registerLicense` function to furnish the license file before utilizing the supply chain
-   component.
+   <summary>License registration</summary>
 
-3. **Usage:**
-   Utilize the component in your application.
-   Make sure to import the CSS stylesheet 'index.css' as the component requires it for correct functionality.
+   Import or paste your license data and register the license, e.g. in `App.tsx`:
+
+   ```js
+   import yFilesLicense from './license.json'
+
+   registerLicense(yFilesLicense)
+   ```
+   </details>
+
+3. **Stylesheet**
+
+   Make sure to import the CSS stylesheet as well:
+
+   ```js
+   import '@yworks/react-yfiles-supply-chain/dist/index.css'
+   ```
+
+4. **Usage**
+
+   You are now all set to utilize the Supply Chain component with your data!
+   See a basic example `App.tsx` below:
 
    ```tsx
    import {
      registerLicense,
      SupplyChain,
-     SupplyChainData,
-     UserSupplyChainItem,
-     UserSupplyChainConnection
-   } from '@yworks/react-yfiles-supply-chain'
-   import '@yworks/react-yfiles-supply-chain/dist/index.css' 
-   import yFilesLicense from './license.json'
+   } from '@yworks/react-yfiles-supply-chain'             
 
-   function App() {
-     registerLicense(yFilesLicense)
-      
-     const data = {
-       items: [
-         { name: 'Copper-Ore', id: 1, parentId: 3 },
-         { name: 'Copper-Plate', id: 2, parentId: 4 },
-         { name: 'Resource', id: 3 },
-         { name: 'Material', id: 4 }
-       ],
-       connections: [{ sourceId: 1, targetId: 2 }]
-     } satisfies SupplyChainData<UserSupplyChainItem, UserSupplyChainConnection>
-     
-     return  <SupplyChain data={data}></SupplyChain>
+   import '@yworks/react-yfiles-supply-chain/dist/index.css'   
+
+   import yFilesLicense from './license.json'
+
+   registerLicense(yFilesLicense)
+
+   const data = {
+     items: [
+       { name: 'Copper-Ore', id: 1, parentId: 3 },
+       { name: 'Copper-Plate', id: 2, parentId: 4 },
+       { name: 'Resource', id: 3 },
+       { name: 'Material', id: 4 }
+     ],
+     connections: [{ sourceId: 1, targetId: 2 }]
    }
 
+   function App() {
+     return <SupplyChain data={data}></SupplyChain>
+   }
+
    export default App
    ```
 
@@ -180,5 +216,8 @@ diagramming SDK. For
 further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please
 visit [yWorks.com](https://www.yworks.com).
 
+If you are exploring a different use case and require another React component,
+please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
+
 For support or feedback, please reach out to [our support team](https://www.yworks.com/contact) or open
 an [issue on GitHub](https://github.com/yWorks/react-yfiles-supply-chain/issues). Happy diagramming!
diff --git a/docs/config.json b/docs/config.json
@@ -1,3 +1,4 @@
 {
-  "mainComponents": ["SupplyChain", "SupplyChainProvider"]
+  "mainComponents": ["SupplyChain", "SupplyChainProvider"],
+  "componentPropsDocText": "data={data}"
 }
diff --git a/docs/introduction/GettingStarted.mdx b/docs/introduction/GettingStarted.mdx
@@ -9,65 +9,103 @@ import TypeLink from '../../components/TypeLink.astro'
 
 ## Prerequisites
 
-For using the component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required. You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). See [Licensing](licensing) for more information on this topic.
+To use the Supply Chain component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
+You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
+See [Licensing](https://docs.yworks.com/react-yfiles-supply-chain/introduction/licensing) for more information on this topic.
 
-## Project setup
+You can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite).
 
-1. **Installation:**
-   Install the component via npm by running the following command in your project directory:
-   ```bash
-   npm install @yworks/react-yfiles-supply-chain
+
+## Project Setup
+
+1. **Installation**
+
+   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
+   ```
+
+   Add the yFiles dependency:
+   ```
+   npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
    ```
 
-   The supply-chain module has some peer dependencies that must be installed somewhere in your project. Since it is a React module, `react` and `react-dom` dependencies are needed.
+   <details>
 
-   Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not published to the public npm registry. You can learn  how to work with the yFiles npm module in our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module).
+   <summary>Sample <code>package.json</code> dependencies</summary>
+   The resulting package.json dependencies should resemble the following:
 
-   Ensure that the dependencies in the `package.json` file resemble the following:
    ```json
-   {
-     ...
-     "dependencies": {
-       "@yworks/react-yfiles-supply-chain": "^1.0.0",
-       "react": "^18.2.0",
-       "react-dom": "^18.2.0",
-       "yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
-       ...
+      "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
      }
-   }
    ```
+   </details>
+
+   Now, the component itself can be installed:
+   ```bash
+   npm install @yworks/react-yfiles-supply-chain
+   ```
+
+2. **License**
+
+   Be sure to invoke <TypeLink type="registerLicense" /> before using the Supply Chain React component.
+   When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
+   For licensed users, the license data is provided separately.
+
+   <details>
+
+   <summary>License registration</summary>
+
+   Import or paste your license data and register the license, e.g. in `App.tsx`:
+
+   ```js
+   import yFilesLicense from './license.json'
+
+   registerLicense(yFilesLicense)
+   ```
+   </details>
+
+3. **Stylesheet**
 
-2. **License:**
-   Be sure to invoke the <TypeLink type="registerLicense" /> function to activate the license for the application before using the company-ownership component.
+   Make sure to import the CSS stylesheet as well:
 
-3. **Usage:**
-   Utilize the component in your application. Make sure to import the CSS stylesheet.
+   ```js
+   import '@yworks/react-yfiles-supply-chain/dist/index.css'
+   ```
+
+4. **Usage**
+
+   You are now all set to utilize the Supply Chain component with your data!
+   See a basic example `App.tsx` below:
 
    ```tsx
    import {
-     UserSupplyChainItem,
-     UserSupplyChainConnection,
      registerLicense,
      SupplyChain,
-     SupplyChainData
    } from '@yworks/react-yfiles-supply-chain'
+
    import '@yworks/react-yfiles-supply-chain/dist/index.css'
+
    import yFilesLicense from './license.json'
 
+   registerLicense(yFilesLicense)
+
+   const data = {
+     items: [
+       { name: 'Copper-Ore', id: 1, parentId: 3 },
+       { name: 'Copper-Plate', id: 2, parentId: 4 },
+       { name: 'Resource', id: 3 },
+       { name: 'Material', id: 4 }
+     ],
+     connections: [{ sourceId: 1, targetId: 2 }]
+   }
+
    function App() {
-    registerLicense(yFilesLicense)
-
-    const data = {
-      items: [
-        { name: 'Copper-Ore', id: 1, parentId: 3 },
-        { name: 'Copper-Plate', id: 2, parentId: 4 },
-        { name: 'Resource', id: 3 },
-        { name: 'Material', id: 4 }
-      ],
-      connections: [{ sourceId: 1, targetId: 2 }]
-    } satisfies SupplyChainData<UserSupplyChainItem, UserSupplyChainConnection>
-    
-    return  <SupplyChain data={data}></SupplyChain>
+     return <SupplyChain data={data}></SupplyChain>
    }
 
    export default App
@@ -79,5 +117,8 @@ For using the component, [yFiles for HTML](https://www.yworks.com/products/yfile
 
 Explore the possibilities of visualizing supply chain diagrams with the yFiles Supply Chain Component. For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).
 
+If you are exploring a different use case and require another React component,
+please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
+
 For support or feedback, please reach out to [our support team](https://website.yworks.home/contact) or open an issue on GitHub. Happy diagramming!
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yworks/react-yfiles-supply-chain",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "[email protected]"
@@ -45,7 +45,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "yfiles": "^26.0.3"
+    "yfiles": "^26.0.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.39.1",
@@ -55,7 +55,7 @@
     "typescript": "^5.3.2"
   },
   "dependencies": {
-    "@yworks/react-yfiles-core": "^1.1.0"
+    "@yworks/react-yfiles-core": "^2.0.0"
   },
   "files": [
     "LICENSE",