@spectric/ui 0.0.8 → 0.0.9

package/src/components/tooltip/tooltip.ts

@@ -0,0 +1,228 @@
+
+import { customElement, property } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./tooltip.css"
+export const TooltipElementTag = "spectric-tooltip"
+import { css, CSSResultGroup, html, LitElement, render } from "lit-element";
+import { DomRenderable } from "../table";
+export type { TooltipProps, TooltipEvents }
+export enum TooltipPostions {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    mouse = "mouse"
+}
+
+export type TooltipPostionsTypes = `${TooltipPostions}`
+interface TooltipProps {
+    /**
+     * How long you need to hover before the tooltip displays
+     */
+    delay: number;
+    /**
+     * How long the fade in animation should run
+     */
+    animationDuration: number;
+    /**
+     * Tooltip contents
+     */
+    text: DomRenderable
+    /**
+     * Where to anchor the tooltip
+     */
+    position: TooltipPostionsTypes
+    /**
+     * Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1
+     */
+    maxWidth?: number
+    /**
+     * Container the tool tip will be attached to. (default:document.body)
+     */
+    portalTarget?: HTMLElement
+
+    /** 
+     * The element that triggers the tooltip. (default:node.parentElement) This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+     */
+    triggerTarget?: HTMLElement
+}
+
+/**
+ * Spectric tooltip will add a tooltip to any container 
+ */
+@customElement(TooltipElementTag)
+export class TooltipElement extends LitElement implements TooltipProps {
+    @property({ type: Number, reflect: true })
+    delay: number = 100;
+    @property({ type: Number, reflect: true })
+    animationDuration: number = 0;
+    @property({ type: String, reflect: false })
+    text: DomRenderable = "";
+    @property({ type: String, reflect: true })
+    position: TooltipPostionsTypes = "right";
+    @property({ type: Number, reflect: true })
+    maxWidth?: number = 300;
+    private portalElement = document.createElement("div")
+    private mouseLocation?: { left: number; top: number; };
+    static styles?: CSSResultGroup | undefined = css`:host{max-height: 0px;
+    max-width: 0px;
+    display: none;
+    pointer-events:none;}`;
+    @property({ attribute: false })
+    portalTarget: HTMLElement = document.body
+    private timer?: number;
+    private open: boolean = false;
+    mouseframe?: number;
+    @property({ attribute: false })
+    triggerTarget?: HTMLElement;
+    private get target() {
+        return this.triggerTarget || this.parentElement
+    }
+    connectedCallback(): void {
+        super.connectedCallback()
+        if (this.target) {
+            this.target.addEventListener("mousemove", this._getMousePosition)
+            this.target.addEventListener("mouseover", this.showToolTip)
+            this.target.addEventListener("mouseleave", this._hideTooltip)
+        }
+    }
+    disconnectedCallback(): void {
+        super.connectedCallback()
+        this.target?.removeEventListener("mousemove", this._getMousePosition)
+        this.target?.removeEventListener("mouseover", this.showToolTip)
+        this.target?.removeEventListener("mouseleave", this._hideTooltip)
+        this.portalElement.remove()
+    }
+    private _getMousePosition = (ev: MouseEvent) => {
+        this.mouseLocation = {
+            left: ev.clientX,
+            top: ev.clientY
+        }
+        if (this.position == "mouse" && this.open && !this.mouseframe) {
+            this.mouseframe = requestAnimationFrame(() => this.positionTooltip())
+        }
+    }
+    _hideTooltip = () => {
+        if (this.timer) {
+            clearTimeout(this.timer)
+        }
+        this.open = false
+        this.portalElement.remove()
+    }
+    private showToolTip = async () => {
+        if (this.timer) {
+            clearTimeout(this.timer)
+        }
+        await new Promise(resolve => {
+            this.timer = window.setTimeout(resolve, this.delay)
+        })
+        this.portalElement.style.pointerEvents = "none"
+        this.portalElement.className = `spectric-tooltip-portal ${this.position}`
+        const tooltip = html`<div class="tooltip-container">
+            <span class="tooltip-caret"></span>
+            <div class="tooltip-content">${this.text}</div>
+        </div>`
+        render(tooltip, this.portalElement)
+        //with the delay it is possible that the triggering element was removed or hidden lets check that it is visible
+        if (!this.target || !this.target.checkVisibility()) {
+            return
+        }
+        //We need to append our tooltip and let the css updates apply before we can take measurements
+        this.portalTarget.appendChild(this.portalElement)
+        this.open = true
+        requestAnimationFrame(this.positionTooltip)
+    }
+    private applyStyle = (style: Record<string, string>) => {
+        Object.entries(style).forEach(([prop, value]) => {
+            this.portalElement.style.setProperty(prop, value)
+        })
+    }
+    private positionTooltip = () => {
+        if (!this.target) {
+            //We got detached before the animation frame completed
+            return
+        }
+        //Since we are attaching to a body we need to send the correct styles from the target portion of the dom to the portal element
+        let computedStyle = getComputedStyle(this)
+        let styles = {
+            "--spectric-primary": computedStyle.getPropertyValue("--spectric-primary"),
+            "--spectric-background-inverse": computedStyle.getPropertyValue("--spectric-background-inverse"),
+            "--spectric-background-hover": computedStyle.getPropertyValue("--spectric-background-hover"),
+            "--spectric-text-on-color": computedStyle.getPropertyValue("--spectric-text-on-color"),
+            "--spectric-border-radius": computedStyle.getPropertyValue("--spectric-border-radius"),
+        }
+        const bounds = this.target.getBoundingClientRect()
+        const portalBounds = this.portalElement.getBoundingClientRect()
+        if (this.target !== document.body)
+            if (this.maxWidth && this.maxWidth > 0) {
+                portalBounds.width = Math.min(portalBounds.width, this.maxWidth)
+            }
+        if (this.position === "mouse" && this.mouseLocation) {
+            this.mouseframe = undefined
+            const location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "top") {
+            const location = {
+                top: bounds.top - portalBounds.height + "px",
+                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "bottom") {
+            const location = {
+                top: bounds.bottom + "px",
+                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "left") {
+            const location = {
+                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
+                left: bounds.left - (portalBounds.width) + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "right") {
+            const location = {
+                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
+                left: bounds.right + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        }
+        if (this.position !== "mouse") {
+            this.portalElement.animate({ opacity: [0, 1] }, { duration: this.animationDuration })
+        }
+    }
+    protected render() {
+        //We don't need to render anything here this is just a placeholder element the content is displayed in a portal attached to the body.
+        // See showTooltip for the real rendering
+    }
+}
+
+
+interface TooltipEvents {
+    //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    //'filter': (event: CustomEvent<FilterEvent>) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TooltipElementTag]: HTMLElementTagWithEvents<TooltipElement, TooltipEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>
+            }
+        }
+    }
+}

package/src/docs/HTML-Vue-Python Integration.mdx

@@ -0,0 +1,18 @@
+# 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/src/docs/React.mdx

@@ -0,0 +1,20 @@
+# React 19+
+
+Has full support for webcomponents and you can use webcomponents exactly the same way you use any react component.
+
+There is one small stipulation. Any custom event that isn't in the react.DOMAttributes events (onClick,onBlur,onFocus... ect) will not be auto capitalized and handled as a react synthetic event.
+
+What does this mean?
+
+This means you will need to write
+
+```jsx
+<spectric-page onlogin={()=>}></spectric-page>
+```
+[Example Here](https://stackblitz.com/edit/react-ts-gq8n43qy?file=App.tsx)
+
+## React < 19
+
+For react < 19 the properties aren't passed down by react so you will need to use the useEffect hook to set the properties after the element has been created.
+
+[Example here](https://stackblitz.com/edit/react-ts-oo5hgcp2?file=App.tsx)

package/src/docs/welcome.mdx

@@ -0,0 +1,29 @@
+# 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
+
+```
+npm i @spectric/ui
+```
+
+The types files produced when building seemlessly integrate the custom elements into javascript giving full type hinting

package/src/stories/Button.stories.ts

@@ -4,6 +4,7 @@ import { ButtonSizes, ButtonVariants, type ButtonProps } from '../components/But
 import '../components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { TooltipPostions } from '../components';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
   title: 'UI/Button',
@@ -136,4 +137,25 @@ export const Dangerous: Story = {
   args: {
     danger: true
   },
+};
+
+export const ButtonsWithTooltips: Story = {
+  render: (args) => html`
+  ${Object.values(TooltipPostions).map(p => {
+    return html`
+<spectric-button
+    ?danger=${args.danger}
+    tooltip=${p}
+    tooltipPosition=${p}
+    size=${ifDefined(args.size)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${() => { alert("clicked") }}
+  >
+    ${p}
+</spectric-button>`
+  })}
+`,
+  args: {
+
+  },
 };

package/src/stories/fixtures/ExampleContent.ts

@@ -1,12 +1,14 @@
 
-import { filterByColumn } from "./data";
+import { filterByColumn, tablecolumns, tabledata } from "./data";
 import { ExampleBits } from "./Bits";
-import { FieldTypes } from "../../components/query_bar/QueryBar";
+import { FieldTypes, SpectricQuery } from "../../components/query_bar/QueryBar";
 
 import { html, LitElement } from 'lit';
 
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import "./lorumipsum"
+import { PaginationChangeProps } from "../../components/pagination";
+import { FilterEvent } from "../../components/table/cell";
 type Props = {
   frameWidth: number
 }
@@ -17,8 +19,35 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   }
   @property({ type: Number, reflect: true })
   frameWidth: number = 10;
+
+  @query("spectric-query")
+  query!: SpectricQuery
+
   @state()
   dialogOpen: boolean = false;
+  tableData = tabledata.slice(0, 3)
+  pagination = {
+    page: 1,
+    pageSize: 3,
+    size: "xsmall",
+    totalItems: tabledata.length,
+  }
+  _handleFilter = (e: CustomEvent<FilterEvent<any>>) => {
+    let include = e.detail.include ? "" : "not "
+    if (e.detail.column.key && e.detail.value) {
+      if (this.query.value !== "") {
+        this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`
+      } else {
+        this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`
+      }
+    }
+  }
+  _handlePaginationChange = (e: CustomEvent<{ pagination: PaginationChangeProps }>) => {
+    let { pagination } = e.detail
+    this.pagination = { ...this.pagination, ...pagination }
+    this.tableData = tabledata.slice((pagination.page - 1) * pagination.pageSize, (pagination.page) * pagination.pageSize)
+    this.requestUpdate()
+  }
   render() {
     return html`
         <spectric-dialog
@@ -59,6 +88,12 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
           >
         
           </spectric-query>
+          <spectric-table 
+          .data=${this.tableData} 
+          .columns=${tablecolumns} 
+          @filter=${this._handleFilter}
+          @change=${this._handlePaginationChange}
+          .pagination=${this.pagination}></spectric-table>
         <spectric-panel style="display:flex">
         <spectric-bit-display
             frameWidth=${this.frameWidth}
@@ -92,7 +127,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
           <spectric-button size="small" danger @click=${() => {
         this.dialogOpen = true
         this.requestUpdate()
-      }}>Delete</spectric-button>
+      }}>Delete (show modal)</spectric-button>
           <spectric-button size="small" danger variant="secondary">Override</spectric-button>
           <spectric-button size="small" danger variant="text">Disable</spectric-button>
           <spectric-button size="small" variant="text">test</spectric-button>

package/src/stories/fixtures/data.ts

@@ -1,3 +1,4 @@
+import { ColumnSettings } from "../../components/table";
 
 
 export const modulations = [
@@ -15,7 +16,7 @@ export const modulations = [
 //pulled from https://www.sigidwiki.com/wiki/Category:Digital signals that don't have a space or -
 export const signals = ["802.11n", "8PSK", "ASCII", "AUTOSPEC", "Aprizesat", "Autocab", "Bluetooth", "CCITT", "CDMA420", "CHIP", "CHU", "COFDMTV", "CompuLert", "Contestia", "Coquelet", "DCF77", "DominoEX", "DominoF", "EIA", "FLEX", "FSK441", "FSQ", "FST4W", "FT4", "FT8", "Hellschreiber", "ISCAT", "JS8", "JT4", "JT65", "JT6M", "JT9", "JTMS", "Kiwi", "Lentus", "LoRa", "MDC1200", "MOBITEX", "MSK144", "MT63", "Milstar", "NML", "NOV", "NPM", "NWC", "Olivia", "OpenSky", "Orbcomm", "PACKET", "PAX", "PI4", "POCSAG", "PSK2K", "Piccolo", "ProVoice", "Q15X25", "ROS", "RTTYM", "ReFLEX", "SIGFOX", "SPREAD", "Serdolik", "SkyOFDM", "THOR", "THROB", "TT2300", "TWINPLEX", "Tetrapol", "VISEL", "VOICE", "WSPR", "WiMAX", "WinDRM"]
 export const filterByColumn = async (field, text) => {
-  if(field === "time_seen"){
+  if (field === "time_seen") {
     return []
   }
   if (field === "modulations") {
@@ -30,4 +31,21 @@ export const filterByColumn = async (field, text) => {
     return values
   }
   return values.filter(v => v.includes(text))
-}
+}
+
+type TestData = {
+  name: string
+  company: string
+  contact: string
+  country: string
+}
+
+export const tabledata: TestData[] = [
+  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },
+  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },]
+export const tablecolumns: ColumnSettings<TestData>[] = [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]

package/src/stories/table.stories.ts

@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-import { PaginationChangeProps, type TableProps as Props } from "../components/";
+import { ColumnSettings, PaginationChangeProps, type TableProps as Props } from "../components/";
 import { html } from "lit";
 import '../components';
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
 import { FilterEvent } from "../components/table/cell";
+import { tablecolumns, tabledata } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 type TestData = {
   name: string
@@ -13,15 +14,8 @@ type TestData = {
   contact: string
   country: string
 }
-
-const data: TestData[] = [
-  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },
-  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
-  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },]
+const data = tabledata
+const columns = tablecolumns
 const meta = {
   title: "UI/Table",
   tags: ["autodocs"],
@@ -34,6 +28,7 @@ const meta = {
         .pagination=${args.pagination}
         .columns=${args.columns}
         .data=${!args.pagination ? data : data.slice((args.pagination.page - 1) * args.pagination.pageSize, (args.pagination.page) * args.pagination.pageSize)}
+        select=${ifDefined(args.select)}
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
         alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
       }}
@@ -51,10 +46,10 @@ const meta = {
     pagination: {
       page: 1,
       pageSize: 3,
-      size: "small",
+      size: "xsmall",
       totalItems: data.length,
     },
-    columns: [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]
+    columns: columns
   },
 } satisfies Meta<Props<TestData>>;
 
@@ -67,8 +62,27 @@ export const Basic: Story = {
     pagination: {
       page: 1,
       pageSize: 3,
-      size: "small",
+      size: "xsmall",
       totalItems: data.length,
     }
   },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const NoPagination: Story = {
+  args: {
+    pagination: undefined
+  },
+};
+
+export const MiltiSelect: Story = {
+  args: {
+    select: "multi"
+  },
+};
+
+export const SingleSelect: Story = {
+  args: {
+    select: "single"
+  },
 };

package/src/stories/tooltip.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { TooltipPostions, type TooltipProps as Props } from "../components/";
+import { html } from "lit";
+import "../components";
+import { useArgs } from "@storybook/client-api";
+import { ifDefined } from "lit/directives/if-defined.js";
+let positions = Object.values(TooltipPostions);
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "UI/Tooltip",
+    tags: ["autodocs"],
+    component: "spectric-tooltip",
+    render: (args) => {
+        const [_, updateArgs] = useArgs();
+
+        return html`
+      ${positions.map((p) => {
+            return html` <span>
+          <spectric-tooltip
+            position=${p}
+            text=${args.text || p}
+            delay=${args.delay}
+            animationDuration=${ifDefined(args.animationDuration)}
+          >
+          </spectric-tooltip>
+          ${p}
+      </span>
+      
+      `;
+        })}
+    `;
+    },
+    argTypes: {},
+    args: {
+        animationDuration: 500,
+        delay: 100
+    },
+} satisfies Meta<Props>;
+
+export default meta;
+type Story = StoryObj<Props>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const PositionTop: Story = {
+    args: {
+        position: "top",
+    },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const PositionLeft: Story = {
+    args: {
+        position: "left",
+    },
+};
+
+export const PositionRight: Story = {
+    args: {
+        position: "right",
+    },
+};
+
+export const PositionBottom: Story = {
+    args: {
+        position: "bottom",
+    },
+};