Skip to content

Commit 40c76a9

Browse files
jens-yworksjens-yworks
authored
Merge pull request #6 from yWorks/dev
Dev
2 parents 71e4f46 + e074776 commit 40c76a9

File tree

7 files changed

+202
-113
lines changed

7 files changed

+202
-113
lines changed

‎README.md‎

Lines changed: 87 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -15,71 +15,107 @@ user experience and facilitates an intuitive exploration of complex manufacturin
1515

1616
## Getting Started
1717

18-
1. **Installation:**
19-
Install the component via npm by running the following command in your project directory:
20-
```bash
21-
npm install @yworks/react-yfiles-supply-chain
18+
### Prerequisites
19+
20+
To use the Supply Chain component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
21+
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
22+
See [Licensing](https://docs.yworks.com/react-yfiles-supply-chain/introduction/licensing) for more information on this topic.
23+
24+
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).
25+
26+
27+
### Project Setup
28+
29+
1. **Installation**
30+
31+
In addition to yFiles, the Supply Chain component requires React to be installed in your project.
32+
If you want to start your project from scratch, we recommend using vite:
33+
```
34+
npm create vite@latest my-supply-chain-app -- --template react-ts
2235
```
2336

24-
The supply chain module has certain peer dependencies that must be installed within your project. Since it is a React
25-
module, `react` and `react-dom` dependencies are needed.
37+
Add the yFiles dependency:
38+
```
39+
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
40+
```
41+
42+
<details>
2643

27-
Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not
28-
available on the public npm registry. Instructions on how to work with the yFiles npm module in
29-
our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module).
44+
<summary>Sample <code>package.json</code> dependencies</summary>
45+
The resulting package.json dependencies should resemble the following:
3046

31-
Ensure that the dependencies in the `package.json` file resemble the following:
3247
```json
33-
{
34-
...
35-
"dependencies": {
36-
"@yworks/react-yfiles-supply-chain": "^1.0.0",
37-
"react": "^18.2.0",
38-
"react-dom": "^18.2.0",
39-
"yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
40-
...
48+
"dependencies": {
49+
"react": "^18.2.0",
50+
"react-dom": "^18.2.0",
51+
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
4152
}
42-
}
4353
```
54+
</details>
55+
56+
Now, the component itself can be installed:
57+
```bash
58+
npm install @yworks/react-yfiles-supply-chain
59+
```
60+
61+
2. **License**
62+
63+
Be sure to invoke the `registerLicense` function before using the Supply Chain React component.
64+
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
65+
For licensed users, the license data is provided separately.
66+
67+
<details>
4468

45-
2. **License:**
46-
Before using the component, a valid [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) version is
47-
required. You can evaluate yFiles for 60 days free of charge
48-
on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
49-
Be sure to invoke the `registerLicense` function to furnish the license file before utilizing the supply chain
50-
component.
69+
<summary>License registration</summary>
5170

52-
3. **Usage:**
53-
Utilize the component in your application.
54-
Make sure to import the CSS stylesheet 'index.css' as the component requires it for correct functionality.
71+
Import or paste your license data and register the license, e.g. in `App.tsx`:
72+
73+
```js
74+
import yFilesLicense from './license.json'
75+
76+
registerLicense(yFilesLicense)
77+
```
78+
</details>
79+
80+
3. **Stylesheet**
81+
82+
Make sure to import the CSS stylesheet as well:
83+
84+
```js
85+
import '@yworks/react-yfiles-supply-chain/dist/index.css'
86+
```
87+
88+
4. **Usage**
89+
90+
You are now all set to utilize the Supply Chain component with your data!
91+
See a basic example `App.tsx` below:
5592

5693
```tsx
5794
import {
5895
registerLicense,
5996
SupplyChain,
60-
SupplyChainData,
61-
UserSupplyChainItem,
62-
UserSupplyChainConnection
63-
} from '@yworks/react-yfiles-supply-chain'
64-
import '@yworks/react-yfiles-supply-chain/dist/index.css'
65-
import yFilesLicense from './license.json'
97+
} from '@yworks/react-yfiles-supply-chain'
6698

67-
function App() {
68-
registerLicense(yFilesLicense)
69-
70-
const data = {
71-
items: [
72-
{ name: 'Copper-Ore', id: 1, parentId: 3 },
73-
{ name: 'Copper-Plate', id: 2, parentId: 4 },
74-
{ name: 'Resource', id: 3 },
75-
{ name: 'Material', id: 4 }
76-
],
77-
connections: [{ sourceId: 1, targetId: 2 }]
78-
} satisfies SupplyChainData<UserSupplyChainItem, UserSupplyChainConnection>
79-
80-
return <SupplyChain data={data}></SupplyChain>
99+
import '@yworks/react-yfiles-supply-chain/dist/index.css'
100+
101+
import yFilesLicense from './license.json'
102+
103+
registerLicense(yFilesLicense)
104+
105+
const data = {
106+
items: [
107+
{ name: 'Copper-Ore', id: 1, parentId: 3 },
108+
{ name: 'Copper-Plate', id: 2, parentId: 4 },
109+
{ name: 'Resource', id: 3 },
110+
{ name: 'Material', id: 4 }
111+
],
112+
connections: [{ sourceId: 1, targetId: 2 }]
81113
}
82114

115+
function App() {
116+
return <SupplyChain data={data}></SupplyChain>
117+
}
118+
83119
export default App
84120
```
85121

@@ -180,5 +216,8 @@ diagramming SDK. For
180216
further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please
181217
visit [yWorks.com](https://www.yworks.com).
182218

219+
If you are exploring a different use case and require another React component,
220+
please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
221+
183222
For support or feedback, please reach out to [our support team](https://www.yworks.com/contact) or open
184223
an [issue on GitHub](https://github.com/yWorks/react-yfiles-supply-chain/issues). Happy diagramming!

‎docs/config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"mainComponents": ["SupplyChain", "SupplyChainProvider"]
2+
"mainComponents": ["SupplyChain", "SupplyChainProvider"],
3+
"componentPropsDocText": "data={data}"
34
}

‎docs/introduction/GettingStarted.mdx‎

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,65 +9,103 @@ import TypeLink from '../../components/TypeLink.astro'
99

1010
## Prerequisites
1111

12-
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.
12+
To use the Supply Chain component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
13+
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
14+
See [Licensing](https://docs.yworks.com/react-yfiles-supply-chain/introduction/licensing) for more information on this topic.
1315

14-
## Project setup
16+
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).
1517

16-
1. **Installation:**
17-
Install the component via npm by running the following command in your project directory:
18-
```bash
19-
npm install @yworks/react-yfiles-supply-chain
18+
19+
## Project Setup
20+
21+
1. **Installation**
22+
23+
In addition to yFiles, the Supply Chain component requires React to be installed in your project.
24+
If you want to start your project from scratch, we recommend using vite:
25+
```
26+
npm create vite@latest my-supply-chain-app -- --template react-ts
27+
```
28+
29+
Add the yFiles dependency:
30+
```
31+
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
2032
```
2133

22-
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.
34+
<details>
2335

24-
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).
36+
<summary>Sample <code>package.json</code> dependencies</summary>
37+
The resulting package.json dependencies should resemble the following:
2538

26-
Ensure that the dependencies in the `package.json` file resemble the following:
2739
```json
28-
{
29-
...
30-
"dependencies": {
31-
"@yworks/react-yfiles-supply-chain": "^1.0.0",
32-
"react": "^18.2.0",
33-
"react-dom": "^18.2.0",
34-
"yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
35-
...
40+
"dependencies": {
41+
"react": "^18.2.0",
42+
"react-dom": "^18.2.0",
43+
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
3644
}
37-
}
3845
```
46+
</details>
47+
48+
Now, the component itself can be installed:
49+
```bash
50+
npm install @yworks/react-yfiles-supply-chain
51+
```
52+
53+
2. **License**
54+
55+
Be sure to invoke <TypeLink type="registerLicense" /> before using the Supply Chain React component.
56+
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
57+
For licensed users, the license data is provided separately.
58+
59+
<details>
60+
61+
<summary>License registration</summary>
62+
63+
Import or paste your license data and register the license, e.g. in `App.tsx`:
64+
65+
```js
66+
import yFilesLicense from './license.json'
67+
68+
registerLicense(yFilesLicense)
69+
```
70+
</details>
71+
72+
3. **Stylesheet**
3973

40-
2. **License:**
41-
Be sure to invoke the <TypeLink type="registerLicense" /> function to activate the license for the application before using the company-ownership component.
74+
Make sure to import the CSS stylesheet as well:
4275

43-
3. **Usage:**
44-
Utilize the component in your application. Make sure to import the CSS stylesheet.
76+
```js
77+
import '@yworks/react-yfiles-supply-chain/dist/index.css'
78+
```
79+
80+
4. **Usage**
81+
82+
You are now all set to utilize the Supply Chain component with your data!
83+
See a basic example `App.tsx` below:
4584

4685
```tsx
4786
import {
48-
UserSupplyChainItem,
49-
UserSupplyChainConnection,
5087
registerLicense,
5188
SupplyChain,
52-
SupplyChainData
5389
} from '@yworks/react-yfiles-supply-chain'
90+
5491
import '@yworks/react-yfiles-supply-chain/dist/index.css'
92+
5593
import yFilesLicense from './license.json'
5694

95+
registerLicense(yFilesLicense)
96+
97+
const data = {
98+
items: [
99+
{ name: 'Copper-Ore', id: 1, parentId: 3 },
100+
{ name: 'Copper-Plate', id: 2, parentId: 4 },
101+
{ name: 'Resource', id: 3 },
102+
{ name: 'Material', id: 4 }
103+
],
104+
connections: [{ sourceId: 1, targetId: 2 }]
105+
}
106+
57107
function App() {
58-
registerLicense(yFilesLicense)
59-
60-
const data = {
61-
items: [
62-
{ name: 'Copper-Ore', id: 1, parentId: 3 },
63-
{ name: 'Copper-Plate', id: 2, parentId: 4 },
64-
{ name: 'Resource', id: 3 },
65-
{ name: 'Material', id: 4 }
66-
],
67-
connections: [{ sourceId: 1, targetId: 2 }]
68-
} satisfies SupplyChainData<UserSupplyChainItem, UserSupplyChainConnection>
69-
70-
return <SupplyChain data={data}></SupplyChain>
108+
return <SupplyChain data={data}></SupplyChain>
71109
}
72110

73111
export default App
@@ -79,5 +117,8 @@ For using the component, [yFiles for HTML](https://www.yworks.com/products/yfile
79117

80118
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).
81119

120+
If you are exploring a different use case and require another React component,
121+
please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
122+
82123
For support or feedback, please reach out to [our support team](https://website.yworks.home/contact) or open an issue on GitHub. Happy diagramming!
83124

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@yworks/react-yfiles-supply-chain",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"author": {
55
"name": "yFiles for HTML team @ yWorks GmbH",
66
"email": "yfileshtml@yworks.com"
@@ -45,7 +45,7 @@
4545
"peerDependencies": {
4646
"react": "^18.2.0",
4747
"react-dom": "^18.2.0",
48-
"yfiles": "^26.0.3"
48+
"yfiles": "^26.0.0"
4949
},
5050
"devDependencies": {
5151
"@microsoft/api-extractor": "^7.39.1",
@@ -55,7 +55,7 @@
5555
"typescript": "^5.3.2"
5656
},
5757
"dependencies": {
58-
"@yworks/react-yfiles-core": "^1.1.0"
58+
"@yworks/react-yfiles-core": "^2.0.0"
5959
},
6060
"files": [
6161
"LICENSE",

0 commit comments

Comments
 (0)