@3t-transform/threeteeui 0.0.6 → 0.0.8

package/dist/types/components.d.ts

@@ -6,78 +6,182 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface TttxButton {
+        "buttonStyle": string;
+        "fontColor": string;
+    }
+    interface TttxCheckbox {
+        "label": string;
+        "required": boolean;
+        "value": boolean;
+    }
+    interface TttxForm {
+        "dataAttribute": string;
+        "functionAttribute": string;
+    }
     interface TttxIcon {
-        "color"?: string;
-        "name": string;
+        "colour": string;
+        "icon": string;
     }
-    interface TttxPage {
-        "appName": string;
-        "helpUrl": string;
-        "lastUpdated": string;
-        "logoutUrl": string;
-        "manageAccountsUrl": string;
-        "pageSize": 'large' | 'medium' | 'small' | string;
-        "pageTitle": string;
+    interface TttxInput {
+        "errormsg": string;
+        "iconleft": string;
+        "iconright": string;
+        "label": string;
+        "pattern": string;
+        "placeholder": string;
+        "required": boolean;
+        "showerrormsg": boolean;
+        "type": string;
+        "valid": boolean;
+        "value": string;
     }
-    interface TttxWorksheet {
-        "pageSize": 'large' | 'medium' | 'small' | string;
+    interface TttxLoadingSpinner {
+        "loadingMessage": boolean;
+        "size": 'small' | 'large';
     }
+    interface TttxPopoverContent {
+        "body": string;
+        "header": string;
+        "linkcontext": string;
+        "linktext": string;
+    }
+}
+export interface TttxButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxButtonElement;
+}
+export interface TttxCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxCheckboxElement;
+}
+export interface TttxFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxFormElement;
+}
+export interface TttxInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxInputElement;
 }
 declare global {
+    interface HTMLTttxButtonElement extends Components.TttxButton, HTMLStencilElement {
+    }
+    var HTMLTttxButtonElement: {
+        prototype: HTMLTttxButtonElement;
+        new (): HTMLTttxButtonElement;
+    };
+    interface HTMLTttxCheckboxElement extends Components.TttxCheckbox, HTMLStencilElement {
+    }
+    var HTMLTttxCheckboxElement: {
+        prototype: HTMLTttxCheckboxElement;
+        new (): HTMLTttxCheckboxElement;
+    };
+    interface HTMLTttxFormElement extends Components.TttxForm, HTMLStencilElement {
+    }
+    var HTMLTttxFormElement: {
+        prototype: HTMLTttxFormElement;
+        new (): HTMLTttxFormElement;
+    };
     interface HTMLTttxIconElement extends Components.TttxIcon, HTMLStencilElement {
     }
     var HTMLTttxIconElement: {
         prototype: HTMLTttxIconElement;
         new (): HTMLTttxIconElement;
     };
-    interface HTMLTttxPageElement extends Components.TttxPage, HTMLStencilElement {
+    interface HTMLTttxInputElement extends Components.TttxInput, HTMLStencilElement {
+    }
+    var HTMLTttxInputElement: {
+        prototype: HTMLTttxInputElement;
+        new (): HTMLTttxInputElement;
+    };
+    interface HTMLTttxLoadingSpinnerElement extends Components.TttxLoadingSpinner, HTMLStencilElement {
     }
-    var HTMLTttxPageElement: {
-        prototype: HTMLTttxPageElement;
-        new (): HTMLTttxPageElement;
+    var HTMLTttxLoadingSpinnerElement: {
+        prototype: HTMLTttxLoadingSpinnerElement;
+        new (): HTMLTttxLoadingSpinnerElement;
     };
-    interface HTMLTttxWorksheetElement extends Components.TttxWorksheet, HTMLStencilElement {
+    interface HTMLTttxPopoverContentElement extends Components.TttxPopoverContent, HTMLStencilElement {
     }
-    var HTMLTttxWorksheetElement: {
-        prototype: HTMLTttxWorksheetElement;
-        new (): HTMLTttxWorksheetElement;
+    var HTMLTttxPopoverContentElement: {
+        prototype: HTMLTttxPopoverContentElement;
+        new (): HTMLTttxPopoverContentElement;
     };
     interface HTMLElementTagNameMap {
+        "tttx-button": HTMLTttxButtonElement;
+        "tttx-checkbox": HTMLTttxCheckboxElement;
+        "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
-        "tttx-page": HTMLTttxPageElement;
-        "tttx-worksheet": HTMLTttxWorksheetElement;
+        "tttx-input": HTMLTttxInputElement;
+        "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
+        "tttx-popover-content": HTMLTttxPopoverContentElement;
     }
 }
 declare namespace LocalJSX {
+    interface TttxButton {
+        "buttonStyle"?: string;
+        "fontColor"?: string;
+        "onClickEvent"?: (event: TttxButtonCustomEvent<string>) => void;
+    }
+    interface TttxCheckbox {
+        "label"?: string;
+        "onValueChanged"?: (event: TttxCheckboxCustomEvent<boolean>) => void;
+        "required"?: boolean;
+        "value"?: boolean;
+    }
+    interface TttxForm {
+        "dataAttribute"?: string;
+        "functionAttribute"?: string;
+        "onFormSubmit"?: (event: TttxFormCustomEvent<any>) => void;
+    }
     interface TttxIcon {
-        "color"?: string;
-        "name"?: string;
+        "colour"?: string;
+        "icon"?: string;
+    }
+    interface TttxInput {
+        "errormsg"?: string;
+        "iconleft"?: string;
+        "iconright"?: string;
+        "label"?: string;
+        "onValueChanged"?: (event: TttxInputCustomEvent<string>) => void;
+        "pattern"?: string;
+        "placeholder"?: string;
+        "required"?: boolean;
+        "showerrormsg"?: boolean;
+        "type"?: string;
+        "valid"?: boolean;
+        "value"?: string;
     }
-    interface TttxPage {
-        "appName"?: string;
-        "helpUrl"?: string;
-        "lastUpdated"?: string;
-        "logoutUrl"?: string;
-        "manageAccountsUrl"?: string;
-        "pageSize"?: 'large' | 'medium' | 'small' | string;
-        "pageTitle"?: string;
+    interface TttxLoadingSpinner {
+        "loadingMessage"?: boolean;
+        "size"?: 'small' | 'large';
     }
-    interface TttxWorksheet {
-        "pageSize"?: 'large' | 'medium' | 'small' | string;
+    interface TttxPopoverContent {
+        "body"?: string;
+        "header"?: string;
+        "linkcontext"?: string;
+        "linktext"?: string;
     }
     interface IntrinsicElements {
+        "tttx-button": TttxButton;
+        "tttx-checkbox": TttxCheckbox;
+        "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
-        "tttx-page": TttxPage;
-        "tttx-worksheet": TttxWorksheet;
+        "tttx-input": TttxInput;
+        "tttx-loading-spinner": TttxLoadingSpinner;
+        "tttx-popover-content": TttxPopoverContent;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "tttx-button": LocalJSX.TttxButton & JSXBase.HTMLAttributes<HTMLTttxButtonElement>;
+            "tttx-checkbox": LocalJSX.TttxCheckbox & JSXBase.HTMLAttributes<HTMLTttxCheckboxElement>;
+            "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
-            "tttx-page": LocalJSX.TttxPage & JSXBase.HTMLAttributes<HTMLTttxPageElement>;
-            "tttx-worksheet": LocalJSX.TttxWorksheet & JSXBase.HTMLAttributes<HTMLTttxWorksheetElement>;
+            "tttx-input": LocalJSX.TttxInput & JSXBase.HTMLAttributes<HTMLTttxInputElement>;
+            "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
+            "tttx-popover-content": LocalJSX.TttxPopoverContent & JSXBase.HTMLAttributes<HTMLTttxPopoverContentElement>;
         }
     }
 }

package/dist/types/icons.d.ts

@@ -0,0 +1,2 @@
+declare const icons: string[];
+export default icons;

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3t-transform/threeteeui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "3t Design System",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -20,40 +20,48 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=531b962b0be5 --exit-zero-on-changes --exit-once-uploaded",
-    "theme:build": "sass src/theme/scss/bundles/dx.tttx.scss public/dx.tttx.css"
+    "lint:generate": "eslint --ext .tsx -o output.eslint.json -f json"
   },
-  "dependencies": {
-    "@mdx-js/react": "^2.1.5",
-    "@rollup/plugin-commonjs": "^23.0.3",
-    "@stencil/core": "^2.20.0",
-    "devextreme": "22.1.6",
-    "less": "^4.1.3",
-    "material-symbols": "^0.2.8",
-    "materialize-css": "^1.0.0",
-    "sass": "^1.56.1"
+  "resolutions": {
+    "@types/babel__traverse": "7.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.21.4",
+    "@mdx-js/react": "^2.1.5",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@stencil/core": "^2.20.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/html": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/chart.js": "^2.9.37",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-mdx-gfm": "^7.0.6",
+    "@storybook/html": "^7.0.6",
+    "@storybook/html-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/web-components": "^7.0.6",
     "@types/jest": "^27.0.3",
-    "babel-loader": "^8.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
     "chromatic": "^6.7.4",
+    "eslint": "^8.38.0",
     "jest": "^27.4.5",
     "jest-cli": "^27.4.5",
-    "puppeteer": "^10.0.0"
+    "less": "^4.1.3",
+    "lit-html": "^2.7.0",
+    "puppeteer": "^10.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.56.1"
   },
   "license": "UNLICENSED",
-  "readme": "ERROR: No README data found!"
+  "readme": "ERROR: No README data found!",
+  "dependencies": {
+    "@popperjs/core": "^2.11.7",
+    "storybook": "^7.0.6"
+  }
 }

package/readme.md

@@ -1,35 +1,17 @@
-![header](header.png)
-
-# 3t Design System
-
-> Our new UX is under development and we need a space to realise it
-
-- [x] Individual components so we can test them individually
-- [x] Atomic design oriented so it is easy to understand
-- [x] Use Storybook to host the components
-- [x] The components will be Custom Components (Web Components)
-- [x] Use Chromatic for designer feedback on developer work
-- [ ] When a developer makes changes and pushes to master, we deploy the library to NPM
-- [ ] We will use NPM versions to pull the components into our frontend applications
-
-## DevExtreme
-
-We use devextreme to as a base for building our components. For details on their components, see their [API documentation](https://js.devexpress.com/Documentation/ApiReference/UI_Components/) and their [component demos](https://js.devexpress.com/Demos/WidgetsGallery/).
-
-
-## Stencil Component Starter
-
-This is a starter project for building a standalone Web Component using Stencil.
-
-Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
-
-## Stencil
-
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+## TTTX Library Vision
+
+- To create versioned components where each micro-frontend may use any version it chooses.
+	- Why? - Our root frontend contains many micro-frontends. Each one might have a diffrent version of these components loaded at any time. We must not let a change in one MFE affect another MFE loaded at the same time.
+- To keep the components extremely lightweight, use as few dependencies as possible. Keep the individual components in the low KB, not the MB.
+	- Why? - When there are multiple versions of the same component loaded, we need to keep them extremely lightweight. Most simple components can be executed in a few dozen KB.
+- No CSS frameworks. Use only the minimum styles to get the job done.
+	- Why? - This means we can be sure that we only load code we are actually using.
+- No external styles. A component must style itself and be inside a shadow DOM so that styles from the external application cannot leak inside.
+	- Why? - We cannot have any components being affected by the styles of the surrunding application. The component must be entirely self-contained.
+- No leaking styles. A component must not infect the application with its styles.
+	- Why? - The same goes both ways, the component styles must not affect the surrounding application.
+- Create only components as we need them. YAGNI applies.
+	- Why? - It's about Agile. We need to deliver value to the customer (our develoeprs) as soon as possible for their feedback, and so they can deliver value to their customer (our users). If a certain component is required, it will crop up, and then we will make it.
 
 ## Getting Started