Added action icon and Action pane

.github/README.md

@@ -0,0 +1,10 @@
+# GitHub Actions
+OSCD-Components make use of GitHub Actions. 
+There are multiple GitHub actions with a variety of goals.
+
+## Workflows
+| Job            | File                                                             | Description                                     |
+| -------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
+| build          | [workflows/build.yaml](./workflows/build.yaml)                   | Builds all the projects                         |
+| test           | [workflows/test.yaml](./workflows/test.yaml)                     | Tests all the projects                          |
+| release-please | [workflows/release-please.yaml](./workflows/release-please.yaml) | Creates a release for every project (if needed) |

.github/workflows/build.yaml

@@ -0,0 +1,33 @@
+on:
+  push:
+    branches:
+    - '*'
+
+permissions: 
+  contents: write
+  pull-requests: write
+
+name: Build project
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - name: Setup tmate session
+        uses: mxschmitt/action-tmate@v3
+        with:
+          detached: true
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install Dependencies
+        run: |
+          npm i @nx/nx-linux-x64-gnu
+          npm ci
+
+      - name: Build 
+        run: npm run build:all

.github/workflows/chromatic.yaml

@@ -0,0 +1,35 @@
+on:
+  push:
+    branches:
+    - '*'
+
+permissions: 
+  contents: write
+  pull-requests: write
+
+name: Build Storybook
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install Dependencies
+        run: |
+          npm i @nx/nx-linux-x64-gnu
+          npm ci
+
+      - name: Build 
+        run: npm run build:all
+
+      - name: Chromatic
+        run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}
+

.gitignore

@@ -1,2 +1,9 @@
 node_modules/
-dist/
+dist/
+
+.tsbuildinfo
+
+.idea/
+
+/tmp/
+

.release-please-manifest.json

@@ -1,3 +1,10 @@
 {
-    "components/oscd-textfield": "0.0.21"
+  "components/oscd-textfield": "0.0.20",
+  "components/oscd-switch": "0.0.1",
+  "components/oscd-action-icon": "0.0.1",
+  "components/oscd-action-pane": "0.0.1",
+  "components/oscd-select": "0.0.1",
+  "components/oscd-checkbox": "0.0.1",
+  "components/oscd-button": "0.0.1",
+  "components/oscd-dialog": "0.0.1"
 }

.storybook/main.ts

@@ -4,20 +4,24 @@ const config: StorybookConfig = {
   stories: [
     '../components/**/stories/*.stories.@(js|jsx|ts|tsx)',
     '../components/**/stories/**/*.mdx',
+    '../stories/*.stories.@(js|jsx|ts|tsx)',
+    '../stories/**/*.mdx',
   ],
-
   addons: [
-    '@storybook/addon-essentials',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
     {
-      name: '@storybook/addon-docs',
+      name: '@storybook/adddon-essentials',
       options: {
-        jsxOptions: {},
-        csfPluginOptions: null,
-        mdxPluginOptions: {},
-        transcludeMarkdown: true,
+        background: false,
       },
     },
-    '@etchteam/storybook-addon-css-variables-theme',
+    '@etchteam/storybook-addon-status/register',
+    'storybook-addon-root-attribute/register',
+    '@whitespace/storybook-addon-html',
   ],
   framework: {
     name: '@storybook/web-components-vite',
@@ -34,7 +38,3 @@ const config: StorybookConfig = {
 };
 
 export default config;
-
-// To customize your Vite configuration you can use the viteFinal field.
-// Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs

.storybook/manager.ts

@@ -0,0 +1,5 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  enableShortcuts: false
+});

.storybook/preview-head.html

@@ -1 +1,29 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+/>
+
+<link
+href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+rel="stylesheet"
+/>
+
+<style>
+    #storybook-root {
+        background: #FFFFFF;
+        padding: 32px;
+    }
+
+    :root[dark] #storybook-root {
+        background: #242424;
+    }
+</style>
+
+<script>
+    const _customElementsDefine = window.customElements.define;
+    window.customElements.define = (name, cl, conf) => {
+      if (!customElements.get(name)) {
+        _customElementsDefine.call(window.customElements, name, cl, conf);
+      }
+    };
+</script>

.storybook/preview.ts

@@ -1,48 +1,43 @@
-import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme';
+import { setCustomElementsManifest } from '@storybook/web-components';
 
-const createStyleTags = (url) => {
-  return {
-    styleTag: null,
-    innerStyles: '',
-    use: async function () {
-      if (!this.styleTag) {
-        this.styleTag = document.createElement('style');
-        this.styleTag.type = 'text/css';
-        this.innerStyles = (await import(/* @vite-ignore */ url)).default;
-        this.styleTag.innerHTML = this.innerStyles;
-        document.body.appendChild(this.styleTag);
-        return;
-      }
-      this.styleTag.innerHTML = this.innerStyles;
-    },
-    unuse: function () {
-      if (this.styleTag) {
-        this.styleTag.innerHTML = '';
-      }
-    },
-  };
-};
+import { withRootAttribute } from 'storybook-addon-root-attribute';
 
-const OpenSCD = createStyleTags('../themes/oscd.css?inline');
+import '../themes/prebuilt/oscd.css';
 
-import { OscdTextfield } from '../components/oscd-textfield/src/oscd-textfield';
+import customElements from '../custom-elements.json';
 
-export const decorators = [cssVariablesTheme];
+setCustomElementsManifest(customElements);
+
+export const decorators = [withRootAttribute];
 
 export const parameters = {
-  cssVariables: {
-    files: {
-      'Oscd Theme': OpenSCD,
+  options: {
+    enableShortcuts: false,
+  },
+  statuses: {
+    released: {
+      background: '#0000ff',
+      color: '#ffffff',
+      description: 'This component is stable and released',
     },
-    defaultTheme: 'Oscd Theme',
+    beta: {
+      background: '#FF0000',
+      color: '#FFFFFF',
+      description: 'This component is still in beta',
+    },
+  },
+  rootAttribute: {
+    defaultState: {
+      name: 'Light',
+      value: null,
+    },
+    attribute: 'dark',
+    tooltip: true,
+    states: [
+      {
+        name: 'Dark',
+        value: 'dark',
+      },
+    ],
   },
 };
-
-function defineCustomElement(
-  name: string,
-  element: CustomElementConstructor
-): void {
-  customElements.get(name) || customElements.define(name, element);
-}
-
-defineCustomElement('oscd-textfield', OscdTextfield);

CODEOWNERS

@@ -0,0 +1,21 @@
+## Tools
+/tools/ @Pascalwilbrink
+
+## GitHub Actions
+/.github/ @Pascalwilbrink
+
+## Lib
+/lib/ @Pascalwilbrink
+
+# Themes
+/themes/ @Pascalwilbrink
+
+## Components
+/components/oscd-textfield @Pascalwilbrink
+/components/oscd-button @PascalWilbrink
+/components/oscd-switch @PascalWilbrink
+/components/oscd-action-icon @PascalWilbrink
+/components/oscd-action-pane @PascalWilbrink
+/components/oscd-select @PascalWilbrink
+/components/oscd-checkbox @PascalWilbrink
+/components/oscd-dialog @PascalWilbrink

README.md

@@ -1,11 +1,36 @@
-# OpenSCD Components
+# Oscd Components
 
+Oscd Components are the building blocks to create an OpenSCD Plugin. OSCD Components are custom WebComponents built in Lit, accessable in any modern browser
 
+> Check out the getting started guide or the documentation
+
+---
+
+## Components
+
+
+
+| Name                                                                                                                                                 | Status | Version |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------- |
+| [@openscd/oscd-action-icon](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-action-icon/README.md) | WIP    | 0.0.1   |
+| [@openscd/oscd-action-pane](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-action-pane/README.md) | WIP    | 0.0.1   |
+| [@openscd/oscd-button](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-button/README.md)           | WIP    | 0.0.1   |
+| [@openscd/oscd-checkbox](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-checkbox/README.md)       | WIP    | 0.0.1   |
+| [@openscd/oscd-dialog](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-dialog/README.md)           | WIP    | 0.0.1   |
+| [@openscd/oscd-select](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-select/README.md)           | WIP    | 0.0.1   |
+| [@openscd/oscd-switch](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-switch/README.md)           | WIP    | 0.0.1   |
+| [@openscd/oscd-textfield](./components//Users/pascalwilbrink/Documents/Workspaces/Alliander/components/oscd/components/oscd-textfield/README.md)     | stable | 0.0.20  |
+
+---
 
 ## Scripts
 
-| Name                           | Description                            | Properties |
-| ------------------------------ | -------------------------------------- | ---------- |
-| npm run generate:component     | Scaffold a new component               | See CLI    |
-| npx nx storybook `<component>` | Run Storybook for a specific component | component  |
 
+
+| Name                         | Description                                                      | Properties |
+| ---------------------------- | ---------------------------------------------------------------- | ---------- |
+| npm run generate:component   | Scaffolds a new component                                        | See CLI    |
+| npx nx storybook <component> | Run Storybook for a specific component                           | component  |
+| npm run build:all            | Builds all the components                                        | -          |
+| npx nx graph                 | Creates a visual graph for all the component dependencies        | -          |
+| npm run documentation        | Updates the documentation per component and the global README.md | -          |

components/oscd-action-icon/.gitignore

@@ -0,0 +1,20 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+.tsbuildinfo
+
+## testing
+/coverage/
+
+## docs
+/doc/
+
+# build
+/dist/

components/oscd-action-icon/.npmignore

@@ -0,0 +1,18 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+.tsbuildinfo
+
+## testing
+/coverage/
+
+## docs
+/doc/
+