Changed build tool to vite. Upgraded react to version 18.

Author: BasicPrimitives

.eslintrc.json

@@ -1,36 +1,25 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+output
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.gitignore

@@ -3,8 +3,10 @@
 /public
 /docs
 /src
-/.next
+/output
 .gitignore
+create-react-app-readme.md
+package-lock.json
 yarn.lock
 .vscode
 *.log

.npmignore

@@ -10,19 +10,18 @@ Data visualization diagramming components library for dependencies visualization
 
 ## React Example
 
-```bash
-yarn create next-app test1
+```
+yarn create vite test1 --template react
 cd test1
 
 yarn add basicprimitivesreact
 
 yarn dev
 ```
 
-Add following changes into src/app/page.js.
+Add following changes into App.js
 
 ``` JavaScript
-'use client';
 import React from 'react';
 import { OrgDiagram } from 'basicprimitivesreact';
 import { PageFitMode, Enabled } from 'basicprimitives';
@@ -86,7 +85,7 @@ export default App;
 * No dependencies on 3rd party libraries.
 * Webpack [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) support
 
-### Basic Primitives Diagrams for [React Sample](https://reactjs.org/)
+### Basic Primitives Diagrams for [React](https://reactjs.org/)
 * User [JSX](https://reactjs.org/docs/introducing-jsx.html) templates
 * 100% [Virtual DOM](https://reactjs.org/docs/faq-internals.html) rendering cycle
 * [react-dnd](http://react-dnd.github.io/react-dnd/about) & [React Context](https://reactjs.org/docs/context.html) compatible 
@@ -153,6 +152,6 @@ Do you want to use a Basic Primitives diagram for a personal website, a school s
 ## Performance
 Through a full API, you can add, remove and modify individual items and their properties. The component will only update the visual elements affected by the API changes. We put in much effort to make it happen!
 
-Copyright (c) 2013 - 2023 Basic Primitives Inc
+Copyright (c) 2013 - 2024 Basic Primitives Inc
 * [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/)
 * [Commercial and government licenses](license.pdf)

README.md

@@ -10,4 +10,4 @@ The component ignores changes in node options, not affecting the diagram layout.
 
 The application stores the collection of items in the application component: `state`.  The diagram component updates its layout every time it gets a new configuration object reference. The diagram keeps the internal state between rendering cycles and tracks property changes for individual configuration objects. The configuration object properties may affect different visuals and transformations of the graph. The component tracks every property individually and optimizes rendering time.  For the more complex implementation of chart editing functionality, see the matrixed organizational chart structure editor demo at this site.
 
-[React Sample](../src/components/Samples/AddingNewItemsToChartAtRuntime.js)
+[React](../src/Samples/AddingNewItemsToChartAtRuntime.jsx)

docs/AddingNewItemsToChartAtRuntime.md

@@ -21,23 +21,23 @@ Use the `adviserPlacementType` option to place an adviser or assistant on the pa
 
 Use the `levelOffset` option to arrange assistants into multiple rows. See the regular children layout sample.
 
-[React Sample](../src/components/Samples/AdviserAndAssistantItemTypes.js)
+[React](../src/Samples/AdviserAndAssistantItemTypes.jsx)
 
 ## Sub Adviser & Sub Assistant item types
 
 Sub Adviser & Sub Assistant item types are variations of regular Adviser & Assistant types. The only difference is that they have the connection line going from the top edge of the node, and they are shift down one level relative to their parents.
 
 Use the `adviserPlacementType` option to place them on the parent's hierarchy's left or right side.
 
-[React Sample](../src/components/Samples/SubAdviserAndSubAssistantItemTypes.js)
+[React](../src/Samples/SubAdviserAndSubAssistantItemTypes.jsx)
 
 ## Adviser child nodes placement above parent's node children
 
 If the adviser node has its children, then control adds extra levels, so it places advisers children at rows above the parent's children. You can alter this layout schema with the `placeAdvisersAboveChildren` option. If you set it to false, control would place advisers and the parent's children at the same row of the diagram. 
 
-[React Sample](../src/components/Samples/PlaceAdvisersAboveChildren.js)
+[React](../src/Samples/PlaceAdvisersAboveChildren.jsx)
 
 ## Assistant child nodes placement above parent's node children
 If the assistant node has its children, then control pushes the parent's children down, placing assistant children at rows above the parent's children. You can alter this layout schema with the `placeAssistantsAboveChildren` option. If you set it to false, then the parent's and assistant's node children would be rendered side by side at the same level. 
 
-[React Sample](../src/components/Samples/PlaceAssistantsAboveChildren.js)
+[React](../src/Samples/PlaceAssistantsAboveChildren.jsx)

docs/AdviserAndAssistantItemTypes.md

@@ -31,7 +31,7 @@ import { Enabled } from basicprimitives;
         parent: null,
         title: "James Smith",
         description: "VP, Public Sector",
-        image: "/react/photos/a.png",
+        image: "./photos/a.png",
         hasButtons: Enabled.True
       }
     ]
@@ -88,4 +88,4 @@ import { OrgDiagram } from basicprimitivesreact;
 />
 ```
 
-[React Sample](../src/components/Samples/ButtonsPanel.js)
+[React](../src/Samples/ButtonsPanel.jsx)

docs/Buttons.md

@@ -18,15 +18,15 @@ import { ChildrenPlacementType } from basicprimitives;
         parent: null,
         title: "James Smith",
         description: "VP, Public Sector",
-        image: "/react/photos/a.png",
+        image: "./photos/a.png",
         childrenPlacementType: ChildrenPlacementType.Matrix // Individually
       }
     ]
   }
 />
 ```
 
-[React Sample](../src/components/Samples/ChildrenPlacementType.js)
+[React](../src/Samples/ChildrenPlacementType.jsx)
 
 # Placing children into multiple horizontal levels
 To programmatically place children nodes into multiple rows, use the `levelOffset` property. Child nodes would be grouped by that property and placed in rows. If level offsets defined for children have gaps, then the control would preserve empty row, so different branches and teams of the same organizations would be properly aligned.  See the matrixed layout demo for the matrixed team structure in the organization.
@@ -44,28 +44,28 @@ import { ChildrenPlacementType } from basicprimitives;
         parent: null,
         title: "James Smith",
         description: "VP, Public Sector",
-        image: "/react/photos/a.png",
+        image: "./photos/a.png",
         childrenPlacementType: ChildrenPlacementType.Horizontal
       },
       {
         id: 2,
         parent: 1,
         title: "James Smith",
         description: "VP, Public Sector",
-        image: "/react/photos/a.png",
+        image: "./photos/a.png",
         levelOffset: 0
       },
       {
         id: 3,
         parent: 1,
         title: "James Smith",
         description: "VP, Public Sector",
-        image: "/react/photos/a.png",
+        image: "./photos/a.png",
         levelOffset: 1
       }
     ]
   }
 />
 ```
 
-[React Sample](../src/components/Samples/ChildrenAndAssistantsLevelOffset.js)
+[React](../src/Samples/ChildrenAndAssistantsLevelOffset.jsx)

docs/ChildrenLayout.md

@@ -17,4 +17,4 @@ In general shape of connector annotation may indicate various relations, so comp
 ## Labels
 Connector annotations labels are plain text or JSX elements. Please, pay attention that component does not resolve connector annotations labels overlapping, so many annotations labels can clutter view and diagram in general.
 
-[React Sample](../src/components/Samples/ConnectorAnnotation.js)
+[React](../src/Samples/ConnectorAnnotation.jsx)

docs/ConnectorAnnotation.md

@@ -6,5 +6,5 @@ The following options control cross-branch nodes alignment:
 * `alignBranches` - property enables alignment
 * `placeAdvisersAboveChildren` - if this property is disabled, then advisers' children are placed at the same level and aligned to the children of the parent's node.
 
-[React Sample](../src/components/Samples/CrossBranchAlignment.js)
+[React](../src/Samples/CrossBranchAlignment.jsx)