NAD viewer

.eslintignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    plugins: [
+        '@typescript-eslint',
+    ],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        "plugin:prettier/recommended",
+        'prettier'
+    ],
+    env : {
+        "browser": true
+    },
+    rules: {
+        "prettier/prettier": "warn"
+    },
+};

.github/workflows/build.yml

@@ -0,0 +1,29 @@
+name: CI
+on: [push]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout sources
+              uses: actions/checkout@v2
+              with:
+                  persist-credentials: false
+
+            - name: FixForNodeWarnings
+              run: |
+                  echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+            - name: Build
+              run: |
+                  npm install
+                  npm run test
+                  npx eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0
+                  npm run build
+
+            - name: Broadcast update event
+              if: github.ref == 'refs/heads/main'
+              uses: gridsuite/broadcast-event@main
+              with:
+                  token: ${{ secrets.REPO_ACCESS_TOKEN }}
+                  event-type: powsybl-diagram-viewer-updated

.gitignore

@@ -0,0 +1,13 @@
+# dependencies
+/node_modules
+
+# distribution
+/dist
+
+# webstorm
+/.idea
+
+# parcel
+/.parcel-cache
+
+

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true
+}

README.md

@@ -1 +1,32 @@
-# powsybl-diagram-viewer
+# powsybl-diagram-viewer
+
+Typescript library to integrate a powsybl svg diagram in a javascript project. The library is built with the Parcel bundler.  
+Node from v16.15.0 is required to build with Parcel.
+
+Use:  
+'npm install'  
+'npm run build'
+
+
+#### For developers
+
+For development purpose, you can run 'npm run watch' for hot building (rebuild after a code save). 
+Your consumer project should point on the local distribution. Edit your package.json depedencies : 
+'"powsybl-diagram-viewer": "file: path/to/powsybl-diagram-viewer",'
+
+#### For integrators
+
+If you want to deploy a new version of powsybl-diagram-viewer in the [NPM package registry](https://www.npmjs.com/package/@powsybl/powsybl-diagram-viewer),
+you need to follow the steps below:
+
+-   Update to the new version in [package.json](https://github.com/powsybl/powsybl-diagram-viewer/blob/main/package.json) (example `0.6.0`)
+-   Build it: `npm install`
+-   Commit the package.json and package-lock.json files, push to a branch, make a PR, have it reviewed and merged to main.
+-   Pull and checkout main on your last commit.
+-   [Tag your last commit](https://semver.org/) : `git tag <tag>` (example: `v0.6.0`)
+-   Push tag : `git push origin <tag>`
+-   Checkout the tag in a fresh repo copy : `cd $(mktemp -d) && git clone https://github.com/powsybl/powsybl-diagram-viewer.git` then `cd powsybl-diagram-viewer && git checkout <tag>`
+-   [Test your package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages#testing-your-package): `npm install`
+-   [Login on the command line to the npm registry](https://docs.npmjs.com/logging-in-to-an-npm-enterprise-registry-from-the-command-line): `npm login`
+-   [Publish the package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages#publishing-scoped-public-packages): `npm publish`
+

__tests__/network-area-diagram.test.ts

@@ -0,0 +1,21 @@
+import { NetworkAreaDiagramViewer } from '../src/network-area-diagram-viewer';
+
+describe('Test network-area-diagram-viewer.ts', () => {
+    // SVG not loaded properly in DOM with Jest. Has to be enrich...
+    test('nad creation', () => {
+        const container: HTMLDivElement = document.createElement('div');
+
+        const nad: NetworkAreaDiagramViewer = new NetworkAreaDiagramViewer(
+            container,
+            '',
+            0,
+            0,
+            0,
+            0
+        );
+
+        expect(container.getElementsByTagName('svg').length).toBe(0);
+        expect(nad.getContainer().outerHTML).toBe('<div></div>');
+        expect(nad.getSvgContent()).toBe('');
+    });
+});