@spectric/ui 0.0.4

package/src/components/query_bar/querylanguage/outputTypes/toCQL.ts

@@ -0,0 +1,122 @@
+
+import { FieldTypes, KueryNode } from '../..';
+import { wildcardSymbol } from '../kuery/node_types/wildcard';
+
+export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
+export const KQL_NODE_TYPE_WILDCARD = 'wildcard';
+export type FunctionName = 'is' | 'and' | 'or' | 'not' | 'range' | 'exists' | 'nested';
+const and = (node: KueryNode, fields?: FieldTypes[]) => {
+  const children = node.arguments || [];
+  return (
+    '(' +
+    children
+      .map((child: KueryNode) => {
+        return toCql(child, fields);
+      })
+      .join(' AND ') +
+    ')'
+  );
+};
+const is = (node: KueryNode, fields?: FieldTypes[]) => {
+  var {
+    arguments: [fieldNameArg, valueArg, isValue],
+  } = node;
+  let operator = '=';
+  if (valueArg.type === 'wildcard') {
+    operator = '';
+  }
+  let value = toCql(valueArg);
+  isValue = isValue.value || typeof value === "string";
+  if (valueArg.type === 'literal' && isValue) {
+    value = `'${value}'`; //should be quoted
+  }
+  if (valueArg.type === 'literal' && !isValue) {
+    value = `${value}`; //shouldn't be quoted
+  }
+  let fieldName = toCql(fieldNameArg);
+  if (fieldName == null) {
+    //this isn't possible if we don't have the names of all the fields.
+    //if we have all the fields we can do a list of or statements (field ILIKE "%value%")
+    if (fields && isValue) {
+      return `(${fields.filter(f => f.type === "string").map(field => `${field.name} ILIKE '%${valueArg.value}%'`).join(" OR ")})`
+    }
+    if (fields && !isValue && (valueArg.value === true || valueArg.value === false)) {
+      return `(${fields.filter(f => f.type === "boolean").map(field => `${field.name}=${valueArg.value}`).join(" OR ")})`
+    }
+    return ""
+  }
+  return fieldName + operator + value;
+};
+
+const or = (node: KueryNode, fields?: FieldTypes[]) => {
+  const children = node.arguments || [];
+  return (
+    '(' +
+    children
+      .map((child: KueryNode) => {
+        return toCql(child, fields);
+      })
+      .join(' OR ') +
+    ')'
+  );
+};
+const not = (node: KueryNode, fields?: FieldTypes[]) => {
+  const [argument] = node.arguments;
+  return 'NOT (' + toCql(argument, fields) + ')';
+};
+
+const AST_TO_CQL = {
+  gt: '>',
+  lt: '<',
+  gte: '>=',
+  lte: '<=',
+};
+const range = (node: KueryNode,) => {
+
+  const [fieldNameArg, operator] = node.arguments;
+  let valueArg = operator.value
+  // @ts-ignore
+  const opsign = AST_TO_CQL[operator.name];
+  let value = toCql(valueArg);
+  if (valueArg.type === 'literal') {
+    value = `${value}`;
+  }
+  return `${fieldNameArg.value} ${opsign} ${value}`;
+};
+const exists = (node: KueryNode) => {
+  const [fieldNameArg] = node.arguments;
+  return `${fieldNameArg.value} IS NOT NULL`;
+};
+const nested = (node: KueryNode) => {
+  //nested types don't exist in CQL
+  console.warn("Nested types dont exist in CQL", node)
+  return ""
+}
+export const functions = {
+  is,
+  and,
+  or,
+  not,
+  range,
+  exists,
+  nested
+};
+const nodeTypes = {
+  function: (node: KueryNode, fields?: FieldTypes[]) => {
+    // @ts-ignore
+    return functions[node.function as FunctionName](node, fields);
+  },
+  literal: (node: KueryNode) => {
+    return node.value;
+  },
+  wildcard: (node: KueryNode) => {
+    const { value } = node;
+    return ` LIKE '${value.split(KQL_WILDCARD_SYMBOL).join('%')}'`;
+  },
+};
+
+export const toCql = (node: KueryNode, fields?: FieldTypes[]): string => {
+  //@ts-ignore
+  const nodeType = nodeTypes[node.type] as unknown as any;
+  return nodeType(node, fields);
+};

package/src/components/query_bar/querylanguage/outputTypes/toMongo.ts

@@ -0,0 +1,103 @@
+/* eslint-disable @kbn/eslint/require-license-header */
+import { FieldTypes, KueryNode } from '../..';
+import { wildcardSymbol } from '../kuery/node_types/wildcard';
+
+export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
+export const KQL_NODE_TYPE_WILDCARD = 'wildcard';
+export type FunctionName = 'is' | 'and' | 'or' | 'not' | 'range' | 'exists' | 'nested';
+const and = (node: KueryNode) => {
+  const children = node.arguments || [];
+  let query: any = { "$and": children.map((c: KueryNode) => toMongo(c)) }
+
+  return query;
+};
+const is = (node: KueryNode) => {
+  const {
+    arguments: [fieldNameArg, valueArg],
+  } = node;
+
+  let value = toMongo(valueArg);
+  const isExistsQuery = valueArg.type === 'wildcard' && (valueArg.value as any) === '@kuery-wildcard@';
+  if (isExistsQuery) {
+    return exists(node)
+  }
+  let query: any = {}
+  query[toMongo(fieldNameArg)] = { "$eq": value }
+  return query;
+};
+
+const or = (node: KueryNode) => {
+  const children = node.arguments || [];
+  return {
+    "$or": children
+      .map((child: KueryNode) => {
+        return toMongo(child);
+      })
+  }
+
+};
+const not = (node: KueryNode) => {
+  const [fieldNameArg] = node.arguments;
+  let query: any = {};
+  query = { "$ne": toMongo(fieldNameArg) }
+  return query;
+};
+
+const AST_TO_CQL = {
+  gt: '$gt',
+  lt: '$lt',
+  gte: '$gte',
+  lte: '$lte',
+};
+const range = (node: KueryNode) => {
+  const [fieldNameArg, operator] = node.arguments;
+  let valueArg = operator.value
+  // @ts-ignore
+  const opsign = AST_TO_CQL[operator.name];
+  let value = toMongo(valueArg);
+
+  let query: any = {}
+  query[fieldNameArg.value] = {}
+  query[fieldNameArg.value][opsign] = value
+  return query
+
+
+};
+const exists = (node: KueryNode) => {
+  const [fieldNameArg] = node.arguments;
+  return { [toMongo(fieldNameArg)]: { $ne: null } }
+};
+
+const nested = (node: KueryNode) => {
+
+  console.warn("TODO Implement nested search", node)
+  return ""
+}
+export const functions = {
+  is,
+  and,
+  or,
+  not,
+  range,
+  exists,
+  nested
+};
+const nodeTypes = {
+  function: (node: KueryNode) => {
+    // @ts-ignore
+    return functions[node.function as FunctionName](node);
+  },
+  literal: (node: KueryNode) => {
+    return node.value;
+  },
+  wildcard: (node: KueryNode) => {
+    const { value } = node;
+    return `/${value.split(KQL_WILDCARD_SYMBOL).join('.*')}/`;
+  },
+};
+
+export const toMongo = (node: KueryNode, fields?: FieldTypes[]): string => {
+  //@ts-ignore
+  const nodeType = nodeTypes[node.type] as unknown as any;
+  return nodeType(node, fields);
+};

package/src/components/query_bar/querylanguage/utils.ts

@@ -0,0 +1,35 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+export function getTimeZoneFromSettings(dateFormatTZ: string) {
+
+  return dateFormatTZ;//always use zulu
+}

package/src/components/query_bar/types.ts

@@ -0,0 +1,59 @@
+import { NodeTypes } from './querylanguage/kuery/node_types';
+
+export interface KueryNode {
+  type: keyof NodeTypes;
+  [key: string]: any;
+}
+
+export type DslQuery = any;
+
+export interface KueryParseOptions {
+  helpers: {
+    [key: string]: any;
+  };
+  startRule: string;
+  allowLeadingWildcards: boolean;
+  errorOnLuceneSyntax: boolean;
+  cursorSymbol?: string;
+  parseCursor?: boolean;
+}
+
+export type IIndexPattern = { fields: IFieldType[] }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface JsonArray extends Array<JsonValue> { }
+export interface JsonObject {
+  [key: string]: JsonValue;
+}
+export type JsonValue = null | boolean | number | string | JsonObject | JsonArray;
+export { nodeTypes } from './querylanguage/kuery/node_types';
+
+export interface IFieldSubType {
+  multi?: { parent: string };
+  nested?: { path: string };
+}
+export interface IFieldType {
+  name: string;
+  type: string;
+  script?: string;
+  lang?: string;
+  count?: number;
+  // esTypes might be undefined on old index patterns that have not been refreshed since we added
+  // this prop. It is also undefined on scripted fields.
+  esTypes?: string[];
+  aggregatable?: boolean;
+  filterable?: boolean;
+  searchable?: boolean;
+  sortable?: boolean;
+  visualizable?: boolean;
+  readFromDocValues?: boolean;
+  scripted?: boolean;
+  subType?: IFieldSubType;
+  displayName?: string;
+  format?: any;
+
+}
+export interface LatLon {
+  lat: number;
+  lon: number;
+}

package/src/components/splitview/index.ts

@@ -0,0 +1 @@
+export * from "./splitview"

package/src/components/splitview/splitview.css.ts

@@ -0,0 +1,66 @@
+import { css } from "lit";
+
+export const style = css`
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+
+    }
+    .split-view {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      position:relative;
+    }
+    .split-view.active{
+      cursor:ew-resize;
+    }
+    .split-view.active.vertical{
+      cursor:ns-resize;
+    }
+    .split-view.vertical {
+      flex-direction: column;
+    }
+    .panel {
+      flex: 1;
+      overflow: auto;
+    }
+    .splitter {
+      border-radius: var(--spectric-border-radius, .4em);
+      background-color:  var(--spectric-input-color,#ccc);
+      user-select: none;
+      transition: background-color 100ms linear;
+    }
+    
+    .splitter.invisible {
+      background-color: #00000000;
+    }
+    .splitter:hover {
+      background-color: var(--spectric-button-primary, #1ea7fd);
+      transition: background-color 500ms linear;
+    }
+    .splitter.active {
+      background-color: var(--spectric-button-primary, #1ea7fd);
+      transition: background-color 500ms linear;
+    }
+    .split-view > .error-display{
+        display:none;
+        position:absolute;
+        top:0;
+        right:0
+    }
+    .split-view.error > .error-display{
+        display:inline-block;
+
+    }
+    .split-view.vertical .splitter {
+      cursor: ns-resize;
+      height: 5px;
+      width: 100%;
+    }
+    .split-view:not(.vertical) .splitter {
+      width: 5px;
+      cursor: ew-resize;
+    }
+  `;

package/src/components/splitview/splitview.ts

@@ -0,0 +1,183 @@
+import { html, PropertyValues, } from 'lit-element';
+import { DisposableElement } from '../../classes/DisposibleElement';
+import { customElement, property, query, queryAsync, state } from 'lit/decorators.js';
+
+import { style } from './splitview.css';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { debounceAnimation } from '../../utils/debounce';
+
+export enum Orientations {
+    horizontal = "horizontal",
+    vertical = "vertical"
+}
+export interface SplitViewProps {
+    /** Controls the orientation of the splitter handle */
+    orientation: `${Orientations}`;
+    /** the percentage to split the view default: 50*/
+    percentage?: number
+    /** Should the splitter handle be invisible? */
+    invisible?: boolean
+    /** Clamps the minimum split percentage default: 10 */
+    min: number
+    /** Clamps the maximum split percentage default: 90 */
+    max: number
+    /** save and load split state to localstorage splitter must have an id attribute default: true */
+    useSavedState?: boolean
+}
+export const ElementTag = 'spectric-splitview'
+/**
+ * Split view will take a container and split it horizontally or vertically. This element can only have two children.
+ * If you supply the **id** attribute on the split view element it will save and load the state keeping the user defined position
+ * @slot - Element can only take 2 HTMLElements.
+ */
+@customElement(ElementTag)
+export class SplitView extends DisposableElement implements SplitViewProps {
+
+    @property({ type: String }) orientation = 'horizontal' as Orientations;
+
+    @property({ type: Number, reflect: true }) percentage: SplitViewProps['percentage'] = 50;
+
+    @property({ type: Boolean }) invisible: SplitViewProps['invisible'] = false;
+    static styles = style
+
+    @property({ type: Number, reflect: true }) min: SplitViewProps['min'] = 10;
+    @property({ type: Number, reflect: true }) max: SplitViewProps['max'] = 90;
+    @property({ type: Boolean, reflect: true }) useSavedState: SplitViewProps['useSavedState'] = true;
+
+    @state()
+    private isDragging: boolean = false;
+    @state()
+    private _error: string | false = false;
+    @queryAsync(".splitter")
+    private _splitter!: Promise<HTMLElement>
+
+    @query("slot[name='panel1']")
+    private _panel1!: HTMLSlotElement
+    @query("slot[name='panel2']")
+    private _panel2!: HTMLSlotElement
+    constructor() {
+        super()
+        let id = this.getAttribute("id");
+        if (id && this.useSavedState) {
+            let savedValue = localStorage.getItem(`splitview-${id}`)
+            if (savedValue) {
+                this.percentage = parseFloat(savedValue)
+            }
+        }
+        this.addDisposableListener(this._splitter, "mousedown", () => {
+            this.isDragging = true;
+        })
+        /**
+         * On double click set percentage to 50%
+         */
+        this.addDisposableListener(this._splitter, "dblclick", () => {
+            this.percentage = 50
+            this._emitChange()
+        })
+        this.addDisposableListener(document.body, "mousemove", this._onMouseMove)
+        this.addDisposableListener(document.body, 'mouseup', () => {
+            this.isDragging = false;
+        });
+    }
+
+    protected updated(changedProperties: PropertyValues): void {
+        if (changedProperties.has("percentage")) {
+            this.percentage = Math.min(Math.max(Number(this.percentage), this.min), this.max)
+        }
+    }
+    _emitChange = () => {
+        let { percentage, orientation, invisible, min, max, useSavedState } = this
+        let id = this.getAttribute("id");
+        if (id && this.useSavedState) {
+            localStorage.setItem(`splitview-${id}`, String(percentage))
+        }
+        /** CustomEvent\<SplitViewProps\> Fired every time there is a change to the split percentage */
+        this.dispatchEvent(new CustomEvent<SplitViewProps>("change", { detail: { orientation, percentage, invisible, min, max, useSavedState } }))
+    }
+    _onMouseMove = debounceAnimation((e: MouseEvent) => {
+        if (this.isDragging) {
+            const rect = this.getBoundingClientRect();
+            let offset: number;
+            let percentage: number;
+            if (this.orientation === 'horizontal') {
+                offset = e.clientX - rect.left;
+                percentage = (offset / rect.width) * 100;
+            } else {
+                offset = e.clientY - rect.top;
+                percentage = (offset / rect.height) * 100;
+            }
+            //clamp to min/mix of the split
+            percentage = Math.min(Math.max(percentage, this.min), this.max)
+            this.percentage = percentage
+            this._emitChange()
+        }
+    });
+    private _assignSlot = (e: Event) => {
+        if (!e.target) {
+            return
+        }
+        let slot = e.target as HTMLSlotElement;
+        let nodes = slot.assignedNodes().filter(n => n instanceof HTMLElement);
+        if (nodes.length > 2) {
+            console.log("cannot assign more than 2 elements to a split view")
+        }
+        nodes.forEach(element => {
+            if (this._panel1.assignedNodes().length === 0) {
+                element.slot = "panel1"
+                return
+            }
+            if (this._panel2.assignedNodes().length === 0) {
+                element.slot = "panel2"
+                return
+            }
+            this._error = "Too many element assigned to split view splitter can only have a maximum of 2 children"
+            console.warn("Too many element assigned to split view splitter can only have a maximum of 2 children")
+        }
+        )
+    }
+    render() {
+        return html`
+        <div class="split-view ${this.orientation} ${this._error ? "error" : ""} ${this.isDragging ? "active" : ""}" style="--split-percentage: ${this.percentage}%;">
+            <span class="error-display">${this._error}</span>
+            <div class="panel" style="${this.orientation === 'horizontal' ? 'flex: var(--split-percentage, 50%)' : 'max-height: var(--split-percentage, 50%)'}">
+                <slot name="panel1"></slot>
+            </div>
+            <div class="splitter ${this.invisible ? "invisible" : ""} ${this.isDragging ? "active" : ""}"></div>
+            <div class="panel" style="${this.orientation === 'horizontal' ? 'flex: calc(100% - var(--split-percentage, 50%))' : 'max-height: calc(100% - var(--split-percentage, 50%))'}">
+                <slot name="panel2"></slot>
+            </div>
+        </div>
+        <slot @slotchange=${this._assignSlot} style="display:none"></slot>
+    `;
+    }
+}
+
+export interface SplitViewEvents {
+    'change': (event: CustomEvent<SplitViewProps>) => void;
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [ElementTag]: HTMLElementTagWithEvents<SplitView, SplitViewEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link SplitView}
+             */
+            [ElementTag]: ReactElementWithPropsAndEvents<SplitView, SplitViewProps, SplitViewEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link SplitView}
+                 */
+                [ElementTag]: ReactElementWithPropsAndEvents<SplitView, SplitViewProps, SplitViewEvents>
+            }
+        }
+    }
+}

package/src/components/types.ts

@@ -0,0 +1,35 @@
+export type HTMLElementTagWithEvents<ElementClass, EventsMap> = Omit<{
+    [P in keyof ElementClass]: ElementClass[P];
+}, "addEventListener" | "removeEventListener"> & WithEvents<EventsMap>;
+
+type WithEvents<EventsMap> = {
+    addEventListener<K extends keyof Omit<HTMLElementEventMap, keyof EventsMap>>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends keyof EventsMap>(type: K, listener: EventsMap[K], options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof Omit<HTMLElementEventMap, keyof EventsMap>>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof EventsMap>(type: K, listener: EventsMap[K], options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+//export type ReactElementWithPropsAndEvents<Class,Props,Events> = React.DetailedHTMLProps<Props & React.DOMAttributes<Class>&ReactEventMap<Events>, Class>
+export type ReactElementWithPropsAndEvents<Class, Props, Events = {}> = React.DetailedHTMLProps<Props & React.DOMAttributes<Class> & OverloadReactSyntheticEvents<Class, Events> & ReactEventMap<Events>, Class>
+
+// If our Event name happens to be a built in dom event like click
+//  the element.addEventListener("click") will not get the 
+// specified event in the event map because 
+// react internally creates a synthetic event for particular types
+//  so we need to extract the those events and return a react synthetic event for those specific types
+type OverloadReactSyntheticEvents<Class, Events> = Pick<ReactSyntheticEvents<Class, Events>, ExtractOverlappingEvents<Class, Events>>
+type ExtractOverlappingEvents<Class, Events> = Extract<React.DOMAttributes<Class>, keyof ReactSyntheticEvents<Class, Events>>
+
+//Map the event names that are handled by react to syntheticEvents
+export type ReactSyntheticEvents<Class, Events> = {
+    [Key in keyof Events as `on${Capitalize<string & Key>}`]: (e: React.SyntheticEvent<Class, Events[Key]>) => void;
+}
+
+
+//Map native event to the React on<eventtype> property F
+// FIXME we need to Omit the keys that where mapped to synthetic events (the inverse of the OverloadReactSyntheticEvents)
+export type ReactEventMap<Events> = Partial<{
+    [Key in keyof Events as `on${string & Key}`]: Events[Key];
+}>

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components"

package/src/stories/Banner.stories.ts

@@ -0,0 +1,46 @@
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import type { BannerProps, BannerSlots } from '../components/Banner';
+import '../components/Banner';
+import { html } from 'lit';
+
+const meta = {
+  title: 'UI/Banner',
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  component: "spectric-banner",
+  render: (args) => {
+    console.log(args)
+    return html`<spectric-banner ?dismissable=${args.dismissable} .headerStyle=${args.headerStyle}>${args.text}</spectric-banner>
+`
+  },
+  args: {
+    text: "Banner with default style"
+  }
+} satisfies Meta<BannerProps & BannerSlots>;
+
+export default meta;
+type Story = StoryObj<BannerProps & BannerSlots>;
+
+export const ClassificationBanner: Story = {
+  args: {
+    text: "Unclassified",
+    headerStyle: {
+      backgroundColor: "green",
+      color: "white"
+    },
+  },
+};
+
+export const DismissableBanner: Story = {
+  args: {
+    text: "Can be dismissed",
+    dismissable: true,
+    headerStyle: {
+      backgroundColor: "cornflowerblue",
+      color: "white"
+    },
+  }
+};
+