@3t-transform/threeteeui 0.0.7 → 0.0.8

package/package.json

@@ -1,58 +1,67 @@
-{
-  "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"
-  }
-}
+{
+  "name": "@3t-transform/threeteeui",
+  "version": "0.0.8",
+  "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": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=531b962b0be5 --exit-zero-on-changes --exit-once-uploaded",
+    "lint:generate": "eslint --ext .tsx -o output.eslint.json -f json"
+  },
+  "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": "^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",
+    "@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",
+    "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": {
+    "@popperjs/core": "^2.11.7",
+    "storybook": "^7.0.6"
+  }
+}

package/readme.md

@@ -1,30 +1,17 @@
-![header](example.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
-
-## 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
 

package/dist/cjs/tttx-single-input.cjs.entry.js

@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-253ca97c.js');
-
-const tttxSingleInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}";
-
-const TttxSingleInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.handleFocus = () => {
-      this.isfocused = true;
-    };
-    this.handleBlur = () => {
-      this.isfocused = false;
-    };
-    this.isfocused = false;
-    this.label = undefined;
-    this.valid = undefined;
-    this.showerrormsg = undefined;
-    this.errormsg = undefined;
-    this.value = undefined;
-    this.type = 'text';
-    this.placeholder = undefined;
-    this.pattern = undefined;
-    this.iconleft = undefined;
-    this.iconright = undefined;
-    this.required = undefined;
-  }
-  handleChange(event) {
-    const target = event.target;
-    this.value = target.value;
-    this.valueChanged.emit(target.value);
-  }
-  render() {
-    const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : '', this.iconleft ? 'iconleft' : ''].join(' ');
-    return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : ''), index.h("div", { class: inputClass }, this.iconleft && (index.h("div", { class: "icon-left" }, index.h("span", { class: "material-symbols-rounded" }, this.iconleft))), index.h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("span", { class: "material-symbols-rounded" }, this.iconright)))), this.showerrormsg && this.errormsg && index.h("div", { class: "errormsg" }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
-  }
-};
-TttxSingleInput.style = tttxSingleInputCss;
-
-exports.tttx_single_input = TttxSingleInput;

package/dist/cjs/tttx-text-box.cjs.entry.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-253ca97c.js');
-
-const tttxTextBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}";
-
-const TttxTextBox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.handleFocus = () => {
-      this.isfocused = true;
-    };
-    this.handleBlur = () => {
-      this.isfocused = false;
-    };
-    this.label = undefined;
-    this.showerrormsg = undefined;
-    this.errormsg = undefined;
-    this.required = undefined;
-    this.value = undefined;
-    this.isfocused = false;
-  }
-  handleChange(event) {
-    const target = event.target;
-    this.value = target.value;
-    this.valueChanged.emit(target.value);
-  }
-  render() {
-    const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : ''].join(' ');
-    return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : ''), index.h("div", { class: inputClass }, index.h("input", { class: "input", type: "text", value: this.value, required: this.required, onInput: event => this.handleChange(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this) })), this.showerrormsg && this.errormsg && index.h("div", { class: "errormsg" }, this.errormsg))));
-  }
-};
-TttxTextBox.style = tttxTextBoxCss;
-
-exports.tttx_text_box = TttxTextBox;

package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.css

@@ -1,142 +0,0 @@
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
-  font-weight: 400;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  color: #9e9e9e;
-}
-
-.field {
-  clear: both;
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  height: 36px;
-  border: 1px solid #c8c8c8;
-  border-radius: 4px;
-}
-
-.icon-left,
-.icon-right {
-  flex-basis: 24px;
-}
-
-.icon-left span,
-.icon-right span {
-  font-size: 24px;
-  line-height: 24px;
-  text-align: center;
-  display: block;
-  width: 24px;
-  height: 24px;
-  margin-top: 4px;
-}
-
-.icon-left span {
-  margin-left: 4px;
-}
-
-.icon-right span {
-  margin-right: 4px;
-}
-
-.input {
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  padding: 8px 16px;
-  background-color: transparent;
-}
-
-.iconleft .input {
-  padding-left: 4px;
-}
-
-.iconright .input {
-  padding-right: 4px;
-}
-
-.label {
-  display: block;
-  font-size: 16px;
-  height: 18px;
-  font-weight: 600;
-  color: #212121;
-  font-size: 16px;
-  margin-bottom: 4px;
-  z-index: 1;
-}
-
-.disabled {
-  background: #f0f0f0;
-  color: #9e9e9e;
-  border-color: #c8c8c8;
-}
-
-.focused {
-  border-color: #1479c6;
-}
-
-.errormsg {
-  height: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  float: left;
-  margin-bottom: 16px;
-  box-sizing: border-box;
-  background-color: transparent;
-  height: 26px;
-  font-size: 14px;
-  color: white;
-  border-radius: none;
-  z-index: 2;
-  color: #DC0000;
-}
-
-.errormsg .validationicon {
-  width: 16px;
-  height: 16px;
-  font-size: 16px;
-  margin-right: 4px;
-  vertical-align: middle;
-  color: #DC0000;
-}
-
-.danger {
-  color: #DC0000;
-}
-
-.optional {
-  color: #757575;
-  font-weight: normal;
-}
-
-:host {
-  display: block;
-}
-
-.spacing {
-  margin-bottom: 16px;
-}
-
-.errorstate {
-  border-color: #DC0000;
-}

package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.stories.js

@@ -1,92 +0,0 @@
-import icons from './../../../icons';
-export default {
-  title: 'Atoms/Single Input',
-  component: 'tttx-single-input',
-  argTypes: {
-    iconleft: {
-      options: icons,
-      control: { type: 'select' },
-    },
-    iconright: {
-      options: icons,
-      control: { type: 'select' },
-    },
-    type: {
-      options: ['text', 'password', 'email', 'number'],
-      control: { type: 'radio' },
-    },
-  },
-};
-const TemplateTest = ({ value, label, iconleft, iconright, type, required, errormsg, placeholder }) => `
-<tttx-single-input
-  placeholder="${placeholder}"
-  iconleft="${iconleft}"
-  iconright="${iconright}"
-  value="${value}"
-  label="${label}"
-  type="${type}"
-  errormsg="${errormsg}"
-  ${required ? `required` : ''}
-></tttx-single-input>
-`;
-export const Default = TemplateTest.bind({});
-Default.args = {
-  value: 'Uh egg',
-  label: 'Please tell me about your egg',
-  icon: 'egg',
-  type: 'text',
-  errormsg: 'Incorrect egg, please egg again.',
-  required: true,
-  valid: true,
-  placeholder: 'Please for the love of god tell me about your egg',
-};
-const TemplateMultiple = () => `
-
-<tttx-single-input
-  iconleft="search"
-  iconright="clear"
-  placeholder="Search for your account"
-  label="Account number"
-  type="text"
-  errormsg="testing123"
-  showerrormsg
-></tttx-single-input>
-
-<tttx-single-input
-  placeholder="Enter first name"
-  label="First name"
-  type="text"
-  errormsg="Your first name is required"
-  required
-  showerrormsg
-></tttx-single-input>
-
-<tttx-single-input
-  placeholder="Enter last name"
-  label="Last name"
-  type="text"
-  errormsg="testing123"
-  required
-  showerrormsg
-></tttx-single-input>
-
-<tttx-single-input
-  placeholder="Enter date of birth"
-  label="Date of birth"
-  type="text"
-  errormsg="testing123"
-  required
-  showerrormsg
-></tttx-single-input>
-
-<tttx-single-input
-  placeholder="Enter email address"
-  label="Email address"
-  type="email"
-  errormsg="testing123"
-  required
-  showerrormsg
-></tttx-single-input>
-
-`;
-export const Example = TemplateMultiple.bind({});

package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.js

@@ -1,150 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class TttxTextBox {
-  constructor() {
-    this.handleFocus = () => {
-      this.isfocused = true;
-    };
-    this.handleBlur = () => {
-      this.isfocused = false;
-    };
-    this.label = undefined;
-    this.showerrormsg = undefined;
-    this.errormsg = undefined;
-    this.required = undefined;
-    this.value = undefined;
-    this.isfocused = false;
-  }
-  handleChange(event) {
-    const target = event.target;
-    this.value = target.value;
-    this.valueChanged.emit(target.value);
-  }
-  render() {
-    const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : ''].join(' ');
-    return (h(Host, null, h("div", { class: "field spacing" }, this.label && h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : ''), h("div", { class: inputClass }, h("input", { class: "input", type: "text", value: this.value, required: this.required, onInput: event => this.handleChange(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this) })), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, this.errormsg))));
-  }
-  static get is() { return "tttx-text-box"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-text-box.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-text-box.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "showerrormsg": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "showerrormsg",
-        "reflect": false
-      },
-      "errormsg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "errormsg",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isfocused": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChanged",
-        "name": "valueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-}

package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.stories.js

@@ -1,17 +0,0 @@
-export default {
-  title: 'Atoms/Text Box',
-  component: 'tttx-text-box'
-};
-const TemplateTest = ({ label, errormsg, required }) => `
-<tttx-text-box
-  label="${label}"
-  errormsg="${errormsg}"
-  ${required ? `required` : ''}
-></tttx-text-box>
-`;
-export const Default = TemplateTest.bind({});
-Default.args = {
-  label: 'Input Label',
-  errormsg: 'Field is required',
-  required: true
-};