@spectric/ui 0.0.4

package/.gitlab-ci.yml

@@ -0,0 +1,28 @@
+stages:         
+  - publish
+  - pages
+
+publish:      
+  image: node:20.15.1
+  stage: publish
+  only:
+    - tags
+  script:
+    - npm install
+    - echo '//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}'>.npmrc
+    - echo '//${CI_SERVER_HOST}/api/v4/groups/${CI_PROJECT_NAMESPACE_ID}/-/packages/npm/:_authToken=<token>'>>.npmrc
+    - echo '//${CI_SERVER_HOST}/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}'>>.npmrc
+    - npm run build
+    - npm publish
+
+pages:
+  image: node:20.15.1
+  stage: pages
+  only:
+    - tags
+  script:
+    - npm install
+    - npm run storybook:build
+  artifacts:
+    paths:
+      - public

package/.nvmrc

@@ -0,0 +1 @@
+20.15.1

package/.storybook/analyze.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+npx web-component-analyzer src --outFiles .storybook/build/custom-elements-next.json
+cmp -s  .storybook/build/custom-elements.json .storybook/build/custom-elements-next.json || mv .storybook/build/custom-elements-next.json .storybook/build/custom-elements.json
+npx web-component-analyzer src -f vscode --outFiles dist/vscode-custom-elements.json

package/.storybook/main.ts

@@ -0,0 +1,55 @@
+import type { StorybookConfig } from "@storybook/web-components-vite";
+import run from "vite-plugin-run";
+import execa from 'execa';
+import { version } from '../package.json';
+const config: StorybookConfig = {
+  managerHead: (headHtmlContent) => {
+    console.log(headHtmlContent)
+    const style = `
+    <style>
+    .sidebar-header {
+        margin-bottom: 36px;
+        position: relative;
+    }
+    .sidebar-header div:first-of-type {
+        display: none;
+    }
+    .sidebar-header::before {
+        content: 'Spectric UI ${version}';
+        font-size: 20px;
+        color: #5C6870;
+        font-weight: normal;
+    }
+    </style>
+    `;
+    return `${headHtmlContent}\n${style}`;
+  },
+  stories: [{
+    // 👇 Sets the directory containing your stories
+    directory: '../src/stories/',
+    // 👇 Storybook will load all files that match this glob
+    files: '*.stories.*',
+    // 👇 Used when generating automatic titles for your stories.
+    titlePrefix: 'Spectric UI Components',
+  }],
+  addons: ["@storybook/addon-essentials", "@chromatic-com/storybook"],
+  framework: {
+    name: "@storybook/web-components-vite",
+    options: {
+    },
+  },
+  async viteFinal(config, options) {
+    //analyze webcomponent and if the json output is different move it into place this will cause storybook to reload the fresh info
+    config.plugins?.push(
+      run(
+        {
+          silent: false,
+          name: 'Create webcomponent json',
+          run: ['.storybook/analyze.sh'],
+          pattern: ['**/*.ts'],
+        },
+      ))
+    return config;
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,42 @@
+import type { Preview } from "@storybook/web-components";
+import { addons } from '@storybook/manager-api';
+import { setCustomElementsManifest } from '@storybook/web-components';
+import customElements from './build/custom-elements.json';
+customElements.tags.forEach(tag => {
+  if (tag.properties) {
+    let stylesindex = tag.properties.findIndex(e => e.name == "styles")
+    if (stylesindex != -1) {
+      tag.properties.splice(stylesindex, 1)
+    }
+  }
+})
+setCustomElementsManifest(customElements);
+
+import { create } from '@storybook/theming/create';
+import { version } from '../package.json';
+
+const theme = create({
+  base: "light",
+  // Typography
+  fontBase: "'Helvetica Neue', Arial, sans-serif",
+  fontCode: "Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
+  brandTitle: `Spectric UI ${version}`,
+  brandImage: "https://static.wixstatic.com/media/bb8de2_d075320863814eeb9c954fcc57ce2822%7Emv2.png/v1/fill/w_192%2Ch_192%2Clg_1%2Cusm_0.66_1.00_0.01/bb8de2_d075320863814eeb9c954fcc57ce2822%7Emv2.png",
+  brandUrl: 'https://gitlab.spectric.com/web/spectric-ui',
+});
+addons.setConfig({
+  theme
+});
+const preview: Preview = {
+  parameters: {
+    docs: { canvas: { layout: "padded" }, theme: theme },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "runem.lit-plugin"
+    ]
+}

package/.vscode/settings.json

@@ -0,0 +1,41 @@
+{
+    "editor.formatOnSave": true,
+    "javascript.format.enable": true,
+    "typescript.format.enable": true,
+    "javascript.format.insertSpaceAfterCommaDelimiter": true,
+    "javascript.format.insertSpaceAfterConstructor": false,
+    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
+    "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
+    "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
+    "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
+    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
+    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
+    "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
+    "javascript.format.semicolons": "ignore",
+    "typescript.format.indentSwitchCase": true,
+    "typescript.format.insertSpaceAfterCommaDelimiter": true,
+    "typescript.format.insertSpaceAfterConstructor": false,
+    "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
+    "typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
+    "typescript.format.insertSpaceAfterSemicolonInForStatements": true,
+    "typescript.format.insertSpaceAfterTypeAssertion": false,
+    "typescript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
+    "typescript.format.insertSpaceBeforeFunctionParenthesis": false,
+    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
+    "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
+    "typescript.format.semicolons": "ignore",
+    "typescript.tsserver.enableTracing": false,
+    "typescript.tsserver.log": "off"
+}

package/README.MD

@@ -0,0 +1,50 @@
+# Component Examples and playground
+https://pages.spectric.com/web/spectric-ui/?path=/docs/spectric-ui-components-ui-page--docs
+
+# Developing
+```
+nvm use
+npm start
+```
+# Publishing
+
+To publish a new version run
+```
+npm version patch
+git push --follow-tags
+```
+This will trigger a pipeline to run and build the source and publish to our internal gitlab NPM
+
+# Installing In your project
+Internally (for now) we use gitlab as the package registry. To configure npm to use gitlab for `@spectric` packages follow the one time steps below
+1. Create an access token for npm [Personal Access Token](https://gitlab.spectric.com/-/user_settings/personal_access_tokens)
+    - ensure it has api access
+2. Point npm to install `@spectric` packages from gitlab
+    - run `npm config set -- @spectric:registry=https://gitlab.spectric.com/api/v4/groups/585/-/packages/npm/`
+3. Have npm use the access token created in 1. to authenticate
+    - run `npm config set -- //gitlab.spectric.com/api/v4/groups/585/-/packages/npm/:_authToken <token>`
+
+After you have setup npm witht he steps above you can install this package normally.
+
+```
+npm i @spectric/ui
+```
+
+# Javascript/typescript integration
+The types files produced when building seemlessly integrate the custom elements into javascript giving full type hinting
+
+# HTML integration
+Add the dist/custom-element.json to the html.languge settings
+https://code.visualstudio.com/docs/languages/html#_html-custom-data
+![Add spectric custom elements](html-include.png)
+
+# VUE Integration
+Complete steps to include custom elements in the HTML language server
+then 
+Add the HTML language server in the @ext:Vue.volar extention
+![Add the HTML language server in the @ext:Vue.volar extention](vue-include.png)
+Once setup hovering over spectric elements will provide documentation
+![alt text](vue-example.png)
+
+# Python Jinja
+Same as HTML Integration

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@spectric/ui",
+  "version": "0.0.4",
+  "type": "module",
+  "main": "./dist/index.es.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && vite build",
+    "start": "storybook dev -p 6006",
+    "storybook:build": "web-component-analyzer src --outFiles .storybook/build/custom-elements.json && storybook build --output-dir public",
+    "release": "npm version patch && git push --follow-tags"
+  },
+  "dependencies": {
+    "lit": "^3.2.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/client-api": "^7.6.17",
+    "@storybook/test": "^8.4.6",
+    "@storybook/web-components": "^8.4.6",
+    "@storybook/web-components-vite": "^8.4.6",
+    "@types/react": "^18.3.12",
+    "storybook": "^8.4.6",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-run": "^0.6.1",
+    "web-component-analyzer": "^2.0.0"
+  }
+}

package/src/classes/BitArray.ts

@@ -0,0 +1,48 @@
+export const BitArray = class BitArray {
+    buffer: ArrayBuffer;
+    u8: Uint8Array;
+    constructor(buf: ArrayBuffer) {
+        this.buffer = buf;
+        this.u8 = new Uint8Array(buf);
+        return new Proxy(this, {
+            get(obj: any, prop) {
+                if (!obj[prop]) {
+                    return obj.getBit(prop);
+                } else {
+                    return obj[prop];
+                }
+            }
+        })
+    }
+    getBit(idx: number) {
+        var v = this.u8[idx >> 3];
+        var off = idx & 0x7;
+        return (v >> (7 - off)) & 1;
+    }
+    setBit(idx: number, val: any) {
+        var off = idx & 0x7;
+        if (val) {
+            this.u8[idx >> 3] |= 0x80 >> off;
+        } else {
+            this.u8[idx >> 3] &= ~(0x80 >> off);
+        }
+    }
+    get length() {
+        return this.u8.byteLength * 8;
+    }
+    set(array: string | any[], start: number) {
+        for (let i = start || 0, j = 0, len = array.length; j < len; i++, j++) {
+            this.setBit(i, array[j]);
+        }
+    };
+    subarray(start: number, stop: number) {
+        let sub = [];
+        start = start || 0;
+        stop = stop || this.length;
+        stop = stop > this.length ? this.length : stop;
+        for (let i = start; i < stop; i++) {
+            sub.push(this.getBit(i));
+        }
+        return sub;
+    };
+}

package/src/classes/DisposibleElement.ts

@@ -0,0 +1,108 @@
+import { LitElement } from "lit-element/lit-element.js";
+
+export interface IDisposable {
+    dispose(): void;
+}
+class DomListener implements IDisposable {
+
+    private _handler?: (e: any) => void;
+    private _node?: EventTarget;
+    private __target?: EventTarget | Promise<EventTarget>
+    private readonly _type: string;
+    private readonly _options: boolean | AddEventListenerOptions;
+
+    constructor(node: EventTarget | Promise<EventTarget>, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) {
+        this.__target = node
+        this._handler = handler;
+        this._type = type;
+        this._handler = handler;
+        this._options = (options || false);
+        if (node instanceof Promise) {
+            node.then(targetNode => {
+                if (!this._handler) {
+                    //Already disposed
+                    return
+                }
+                this._node = targetNode
+                this._node.addEventListener(this._type, this._handler, this._options);
+            })
+        } else {
+            this._node = node
+            this._node.addEventListener(this._type, this._handler, this._options);
+        }
+    }
+
+    dispose(): void {
+        if (!this._handler) {
+            // Already disposed
+            return;
+        }
+        if (this._node) {
+            console.log(`removing event ${this._type} from `, this._node, this.__target instanceof Promise)
+            this._node.removeEventListener(this._type, this._handler, this._options);
+        }
+        // Prevent leakers from holding on to the dom or handler func
+        this.__target = undefined;
+        this._node = undefined;
+        this._handler = undefined;
+    }
+}
+export class DisposableElement extends LitElement {
+    private readonly _disposables = new Set<IDisposable>();
+    private _isDisposed = false;
+    private _disposableListeners: { target: HTMLElement | Promise<HTMLElement>, event: string, handler: any }[] = []
+    private _connected: boolean = false;
+    /**
+     * Creates listeners on a target that will automatically get cleaned up when the element is removed from the DOM. This prevents memory leaks.
+     * @param target The element| promise<element> we plan to attach the listener to
+     * @param event The event name
+     * @param handler The event handler
+     */
+    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void
+    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: SpectricGlobalEvents[K]): void
+    public addDisposableListener(target: HTMLElement | Promise<HTMLElement>, event: string, handler: any): void {
+        let exists = this._disposableListeners.find(d => d.event === event && d.target === target && d.handler === handler)
+        if (exists) {
+            console.warn("Event handler already exists best practice is to add the this in the constructor")
+            return //Event handler has already been added, maybe they added it in a callback
+        }
+        this._disposableListeners.push({ target, event, handler })
+        if (this._connected) {
+            this.registerDisposable(new DomListener(target, event, handler))
+        }
+    }
+    public registerDisposable<T extends IDisposable>(o: T): T {
+        if (!o) {
+            return o;
+        }
+        if ((o as unknown) === this) {
+            throw new Error('Cannot register a disposable on itself!');
+        }
+        if (this._isDisposed) {
+            console.warn(new Error('Trying to add a disposable to something that has already been disposed of. The added object will be leaked!').stack);
+        } else {
+            this._disposables.add(o);
+        }
+
+        return o;
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this._connected = true
+        this._isDisposed = false
+        this._disposableListeners.forEach(({ target, event, handler }) => {
+            this.registerDisposable(new DomListener(target, event, handler))
+        })
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this._connected = false
+        this._disposables.forEach(disposable => {
+            disposable.dispose()
+        })
+        this._isDisposed = true;
+    }
+
+}

package/src/components/Banner.ts

@@ -0,0 +1,102 @@
+import { html, LitElement } from 'lit';
+import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
+import "./Button"
+import { customElement, property } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+
+export interface BannerProps {
+  /**What is returned in the event details when a banner is dismissed */
+  bannerId?: any,
+  /** Banner Text to display */
+  text?: string;
+  /** What background color to use */
+  headerStyle?: StyleInfo;
+  /** Can be dismissed */
+  dismissable?: boolean;
+
+}
+
+
+
+const DEFAULT_STYLE: StyleInfo = {
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: "black",
+  color: "white",
+  textAlign: "center"
+}
+
+/**
+ * @slot text - Banner Text content
+ */
+@customElement('spectric-banner')
+export class SpectricBanner extends LitElement implements BannerProps {
+  @property({ type: Boolean, reflect: true })
+  dismissable: boolean = false;
+  //static styles?: CSSResultGroup | undefined = style;
+  @property({ type: String, reflect: true })
+  text?: string = "";
+  @property({ type: String, reflect: true })
+  bannerId?: string = "";
+  @property({ type: Object })
+  headerStyle?: StyleInfo = {};
+
+  @property({ state: true, type: Boolean, attribute: false })
+  private _dismissed: boolean = false;
+
+  private onDismiss = (e: PointerEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+    this._dismissed = true;
+    let { bannerId, text, headerStyle, dismissable }: BannerProps = this
+    this.dispatchEvent(new CustomEvent<BannerProps>('bannerDismissed', {
+      detail: { bannerId, text, headerStyle, dismissable },
+      ...options
+    }));
+  }
+  protected render(): unknown {
+    if (this._dismissed) {
+      return
+    }
+    return html`
+        <header style=${styleMap({ ...DEFAULT_STYLE, ...this.headerStyle })}>
+        <div style="flex-grow:1"><slot name="text">${this.text}</slot><slot></slot></div>
+        ${this.dismissable ? html`<spectric-button size="small" @click=${this.onDismiss}>X</spectric-button>` : null}
+        </header>
+    `;
+  }
+}
+
+export interface BannerEventMap {
+  'bannerDismissed': (event: CustomEvent<BannerProps>) => void
+}
+
+declare global {
+
+  interface HTMLElementTagNameMap {
+    "spectric-banner": HTMLElementTagWithEvents<SpectricBanner, BannerEventMap>
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * {@link SpectricBanner}
+       */
+      "spectric-banner": ReactElementWithPropsAndEvents<SpectricBanner, BannerProps, BannerEventMap>;
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * {@link SpectricBanner}
+         */
+        "spectric-banner": ReactElementWithPropsAndEvents<SpectricBanner, BannerProps, BannerEventMap>;
+      }
+    }
+  }
+}