Feat implement shell ux redesign

.editorconfig

@@ -1,10 +1,17 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
 root = true
 
+
 [*]
 
+# Change these settings to your own preference
 indent_style = space
 indent_size = 2
 
+# We recommend you to keep these unchanged
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.github/workflows/continuous-deployment.yml

@@ -0,0 +1,14 @@
+name: Continuous Deployment
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  ci-cd:
+    permissions:
+      contents: write
+      pull-requests: write
+    uses: OMICRONEnergyOSS/oscd-gh-workflows/.github/workflows/continuous-deployment.yml@main
+    secrets:
+      gh_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-please.yml

@@ -1,81 +1,17 @@
-name: release-please
-
+name: Release Please
 on:
   push:
     branches:
       - main
 
 jobs:
-  release-please:
-    runs-on: ubuntu-latest
-    outputs:
-      release_created: ${{ steps.release.outputs.release_created }}
-      tag_name: ${{ steps.release.outputs.tag_name }}
+  release:
     permissions:
       contents: write
-      pull-requests: write
       issues: write
-    steps:
-      - uses: googleapis/release-please-action@v4
-        id: release
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          config-file: release-please-config.json
-          manifest-file: .release-please-manifest.json
-
-  npm-publish:
-    needs: release-please
-    if: ${{ needs.release-please.outputs.release_created }}
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
+      pull-requests: write
       id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Build the package
-        run: npm run build
-      - name: Publish to NPMJS.org
-        run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  deploy:
-    needs: release-please
-    if: ${{ needs.release-please.outputs.release_created }}
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - uses: ./.github/actions/setup-node-env
-
-      - name: Build
-        run: npm run bundle
-
-      - name: Deploy
-        run: |
-          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-          npx gh-pages -d dist -u "github-actions <support+actions@github.com>"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Create zipped bundle
-        run: |
-          (cd ./dist && zip -r ../oscd-shell.zip .)
-          tar -C ./dist -czvf oscd-shell.tar.gz ./
-
-      - name: Upload zipped bundle to GitHub release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: gh release upload ${{ needs.release-please.outputs.tag_name }} oscd-shell.zip oscd-shell.tar.gz
+    uses: OMICRONEnergyOSS/oscd-gh-workflows/.github/workflows/release-please.yml@main
+    secrets:
+      npm_token: ${{ secrets.NPM_TOKEN }}
+      gh_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -1,25 +1,9 @@
-name: Test
+name: Unit Tests
 on: [push, pull_request, workflow_dispatch]
 
 jobs:
   test:
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.50.1-noble
-      options: --user 1001
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - uses: ./.github/actions/setup-node-env
-
-      - name: Run unit tests
-        run: npm run-script test:unit
-
-      - name: Run ESLint checks
-        run: npm run-script lint
-
-      - name: Run visual regression tests on PR
-        if: github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch'
-        run: npm run-script test:visual
+    permissions:
+      contents: write
+      pull-requests: write
+    uses: OMICRONEnergyOSS/oscd-gh-workflows/.github/workflows/unit-and-vrt-tests.yml@main

.github/workflows/update-screenshots.yml

@@ -1,32 +1,9 @@
 name: Update Screenshots
-
 on: [push, workflow_dispatch]
 
 jobs:
-  update-screenshots:
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.50.1-noble
-      options: --user 1001
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.head_ref }}
-
-      - uses: ./.github/actions/setup-node-env
-
-      - name: Run visual regression tests
-        run: npm run test:visual
-        id: tests
-        continue-on-error: true
-
-      - name: Update screenshots
-        if: ${{ steps.tests.outcome == 'failure' }}
-        run: |
-          npm run test:update
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git add screenshots
-          git commit -m "test: update screenshots"
-          git push
+  test:
+    permissions:
+      contents: write
+      pull-requests: write
+    uses: OMICRONEnergyOSS/oscd-gh-workflows/.github/workflows/update-screenshots.yml@main

.gitignore

@@ -1,19 +1,17 @@
-## npm
-/node_modules/
-/npm-debug.log
+node_modules
+*.tsbuildinfo
 
-## testing
-/coverage/
+## editors
+/.idea
+/.vscode
+
+## build artifacts
+dist
+coverage
+doc
+screenshots/*/failed/
+locales.ts
+locales
+custom-elements.json
 
-# build
-/locales.ts
-/locales
-/dist
-/custom-elements.json
-/.tsbuildinfo
-/.rollup.cache
-/screenshots/*/failed/
 
-# IDE
-.vscode/
-.idea/

demo/AddPlugins.js

@@ -1,11 +1,8 @@
-/* eslint-disable no-alert */
-export default class AddPlugins extends HTMLElement {
-  /* eslint-disable-next-line class-methods-use-this */
+export class AddPlugins extends HTMLElement {
   run() {
     const editor = this.getRootNode().host;
     const kind = window.confirm(
-      `Add a menu type plugin?
-If you choose 'Cancel', an editor type plugin will be added instead.`,
+      `Add a menu type plugin?\nIf you choose 'Cancel', an editor type plugin will be added instead.`,
     )
       ? 'menu'
       : 'editor';
@@ -37,3 +34,5 @@ If you choose 'Cancel', an editor type plugin will be added instead.`,
     editor.requestUpdate('plugins');
   }
 }
+
+export default AddPlugins;

demo/DemoPluginSrc.js

@@ -1,7 +1,7 @@
-/* eslint-disable no-alert */
-export default class DemoPluginSrc extends HTMLElement {
-  /* eslint-disable-next-line class-methods-use-this */
+export class DemoPluginSrc extends HTMLElement {
   run() {
     console.log(`${this.tagName}.run()`);
   }
 }
+
+export default DemoPluginSrc;

demo/demo-landing-page.js

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from 'lit';
+import { newOpenEvent } from '@openscd/oscd-api/utils.js';
+
+const sclDocString = `<?xml version="1.0" encoding="UTF-8"?>
+  <SCL version="2007" revision="B" xmlns="http://www.iec.ch/61850/2003/SCL">
+  <Substation name="A1" desc="test substation"></Substation>
+</SCL>`;
+
+export class DemoLandingPage extends LitElement {
+  rows = 100;
+
+  handleLoadDocClick() {
+    const doc = new DOMParser().parseFromString(
+      sclDocString,
+      'application/xml',
+    );
+    const openEvent = newOpenEvent(doc, 'sample.scd');
+    this.dispatchEvent(openEvent);
+  }
+
+  handleMenuPluginClick(plugin) {
+    const oscdShell = this.closest('oscd-shell');
+    if (oscdShell) {
+      const menuPluginInstance = oscdShell.shadowRoot.querySelector(
+        plugin.tagName,
+      );
+      if (menuPluginInstance) {
+        menuPluginInstance.run();
+      }
+    }
+  }
+
+  getMenuPlugins() {
+    const menuPlugins = this.closest('oscd-shell').plugins.menu;
+    return menuPlugins.filter(plugin => plugin.requireDoc !== true);
+  }
+
+  render() {
+    return html`
+      <div>
+        <h2>Custom Landing Page</h2>
+        <p>
+          This page is onl displayed as long as no documents are loaded.
+          Clicking the buttom below will trigger a "oscd-open" event which the
+          oscd-shell will intecept, then display the standard view.
+        </p>
+        <button @click=${() => this.handleLoadDocClick()}>
+          Load Sample Document
+        </button>
+        ${this.getMenuPlugins().map(
+          plugin =>
+            html`<button @click=${() => this.handleMenuPluginClick(plugin)}>
+              ${plugin.name}
+            </button>`,
+        )}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host > div {
+      color: var(--md-sys-color-on-surface);
+      /* background-color: var(--md-sys-color-surface-variant); */
+      font-family: 'Roboto', sans-serif;
+      font-weight: 300;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+    }
+  `;
+}
+
+customElements.define('demo-landing-page', DemoLandingPage);
+export default DemoLandingPage;