@3t-transform/threeteeui 0.0.6 → 0.0.7

package/dist/types/components.d.ts

@@ -6,78 +6,155 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
-    interface TttxIcon {
-        "color"?: string;
-        "name": string;
-    }
-    interface TttxPage {
-        "appName": string;
-        "helpUrl": string;
-        "lastUpdated": string;
-        "logoutUrl": string;
-        "manageAccountsUrl": string;
-        "pageSize": 'large' | 'medium' | 'small' | string;
-        "pageTitle": string;
-    }
-    interface TttxWorksheet {
-        "pageSize": 'large' | 'medium' | 'small' | string;
+    interface TttxButton {
+        "buttonStyle": string;
+        "fontColor": string;
     }
+    interface TttxCheckbox {
+        "label": string;
+        "required": boolean;
+        "value": boolean;
+    }
+    interface TttxForm {
+        "dataAttribute": string;
+        "functionAttribute": string;
+    }
+    interface TttxSingleInput {
+        "errormsg": string;
+        "iconleft": string;
+        "iconright": string;
+        "label": string;
+        "pattern": string;
+        "placeholder": string;
+        "required": boolean;
+        "showerrormsg": boolean;
+        "type": string;
+        "valid": boolean;
+        "value": string;
+    }
+    interface TttxTextBox {
+        "errormsg": string;
+        "label": string;
+        "required": boolean;
+        "showerrormsg": boolean;
+        "value": 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 TttxSingleInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxSingleInputElement;
+}
+export interface TttxTextBoxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxTextBoxElement;
 }
 declare global {
-    interface HTMLTttxIconElement extends Components.TttxIcon, HTMLStencilElement {
+    interface HTMLTttxButtonElement extends Components.TttxButton, HTMLStencilElement {
     }
-    var HTMLTttxIconElement: {
-        prototype: HTMLTttxIconElement;
-        new (): HTMLTttxIconElement;
+    var HTMLTttxButtonElement: {
+        prototype: HTMLTttxButtonElement;
+        new (): HTMLTttxButtonElement;
     };
-    interface HTMLTttxPageElement extends Components.TttxPage, HTMLStencilElement {
+    interface HTMLTttxCheckboxElement extends Components.TttxCheckbox, HTMLStencilElement {
     }
-    var HTMLTttxPageElement: {
-        prototype: HTMLTttxPageElement;
-        new (): HTMLTttxPageElement;
+    var HTMLTttxCheckboxElement: {
+        prototype: HTMLTttxCheckboxElement;
+        new (): HTMLTttxCheckboxElement;
     };
-    interface HTMLTttxWorksheetElement extends Components.TttxWorksheet, HTMLStencilElement {
+    interface HTMLTttxFormElement extends Components.TttxForm, HTMLStencilElement {
     }
-    var HTMLTttxWorksheetElement: {
-        prototype: HTMLTttxWorksheetElement;
-        new (): HTMLTttxWorksheetElement;
+    var HTMLTttxFormElement: {
+        prototype: HTMLTttxFormElement;
+        new (): HTMLTttxFormElement;
+    };
+    interface HTMLTttxSingleInputElement extends Components.TttxSingleInput, HTMLStencilElement {
+    }
+    var HTMLTttxSingleInputElement: {
+        prototype: HTMLTttxSingleInputElement;
+        new (): HTMLTttxSingleInputElement;
+    };
+    interface HTMLTttxTextBoxElement extends Components.TttxTextBox, HTMLStencilElement {
+    }
+    var HTMLTttxTextBoxElement: {
+        prototype: HTMLTttxTextBoxElement;
+        new (): HTMLTttxTextBoxElement;
     };
     interface HTMLElementTagNameMap {
-        "tttx-icon": HTMLTttxIconElement;
-        "tttx-page": HTMLTttxPageElement;
-        "tttx-worksheet": HTMLTttxWorksheetElement;
+        "tttx-button": HTMLTttxButtonElement;
+        "tttx-checkbox": HTMLTttxCheckboxElement;
+        "tttx-form": HTMLTttxFormElement;
+        "tttx-single-input": HTMLTttxSingleInputElement;
+        "tttx-text-box": HTMLTttxTextBoxElement;
     }
 }
 declare namespace LocalJSX {
-    interface TttxIcon {
-        "color"?: string;
-        "name"?: string;
-    }
-    interface TttxPage {
-        "appName"?: string;
-        "helpUrl"?: string;
-        "lastUpdated"?: string;
-        "logoutUrl"?: string;
-        "manageAccountsUrl"?: string;
-        "pageSize"?: 'large' | 'medium' | 'small' | string;
-        "pageTitle"?: string;
-    }
-    interface TttxWorksheet {
-        "pageSize"?: 'large' | 'medium' | 'small' | string;
+    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 TttxSingleInput {
+        "errormsg"?: string;
+        "iconleft"?: string;
+        "iconright"?: string;
+        "label"?: string;
+        "onValueChanged"?: (event: TttxSingleInputCustomEvent<string>) => void;
+        "pattern"?: string;
+        "placeholder"?: string;
+        "required"?: boolean;
+        "showerrormsg"?: boolean;
+        "type"?: string;
+        "valid"?: boolean;
+        "value"?: string;
+    }
+    interface TttxTextBox {
+        "errormsg"?: string;
+        "label"?: string;
+        "onValueChanged"?: (event: TttxTextBoxCustomEvent<string>) => void;
+        "required"?: boolean;
+        "showerrormsg"?: boolean;
+        "value"?: string;
     }
     interface IntrinsicElements {
-        "tttx-icon": TttxIcon;
-        "tttx-page": TttxPage;
-        "tttx-worksheet": TttxWorksheet;
+        "tttx-button": TttxButton;
+        "tttx-checkbox": TttxCheckbox;
+        "tttx-form": TttxForm;
+        "tttx-single-input": TttxSingleInput;
+        "tttx-text-box": TttxTextBox;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
-            "tttx-page": LocalJSX.TttxPage & JSXBase.HTMLAttributes<HTMLTttxPageElement>;
-            "tttx-worksheet": LocalJSX.TttxWorksheet & JSXBase.HTMLAttributes<HTMLTttxWorksheetElement>;
+            "tttx-button": LocalJSX.TttxButton & JSXBase.HTMLAttributes<HTMLTttxButtonElement>;
+            "tttx-checkbox": LocalJSX.TttxCheckbox & JSXBase.HTMLAttributes<HTMLTttxCheckboxElement>;
+            "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
+            "tttx-single-input": LocalJSX.TttxSingleInput & JSXBase.HTMLAttributes<HTMLTttxSingleInputElement>;
+            "tttx-text-box": LocalJSX.TttxTextBox & JSXBase.HTMLAttributes<HTMLTttxTextBoxElement>;
         }
     }
 }

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,59 +1,58 @@
-{
-  "name": "@3t-transform/threeteeui",
-  "version": "0.0.6",
-  "description": "3t Design System",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/3tui/3tui.esm.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "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"
-  },
-  "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"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@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",
-    "@types/jest": "^27.0.3",
-    "babel-loader": "^8.2.5",
-    "chromatic": "^6.7.4",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
-    "puppeteer": "^10.0.0"
-  },
-  "license": "UNLICENSED",
-  "readme": "ERROR: No README data found!"
-}
+{
+  "name": "@3t-transform/threeteeui",
+  "version": "0.0.7",
+  "description": "3t Design System",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/3tui/3tui.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --project-token=531b962b0be5 --exit-zero-on-changes --exit-once-uploaded"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.10",
+    "@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.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/html": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/web-components": "^6.5.16",
+    "@types/jest": "^27.0.3",
+    "chromatic": "^6.7.4",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "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!",
+  "dependencies": {
+    "storybook": "^7.0.2"
+  }
+}

package/readme.md

@@ -1,4 +1,4 @@
-![header](header.png)
+![header](example.png)
 
 # 3t Design System
 
@@ -12,11 +12,6 @@
 - [ ] 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.