feat: input component (#129)

* feat: input component first boilerplate

* feat: input work in progress

* feat(input): more attributes are defined

* feat(input): set validity with custom validation

* feat(input): styling input

* feat: input error validation and label defined

* feat(input): added input medium features

* feat(input): added input large, added all types

* test(input): some tests are added

* test: fix esbuild plugin causes ts decorators dont run

* test(input): test coverage increased

* refactor(input): linter fixes

* docs(input): story file created

* docs(storybook): adding user interaction test addon

* feat: adding reportValidity method

* docs(storybook): adding basic input ant input labels

* refactor: linter fixes

* fix(input): label-fixed placeholder visibility

* test: include styles in unit tests (#133)

Co-authored-by: Murat Çorlu <[email protected]>

* test: clean forgotten tag in test html

* test: dependency fix

* refactor: linter fix

* refactor: linter fix

* fix(storybook): version fixed to 6.5.5

* docs(input): storybook doc improved

* fix(input): css lint fix

* fix(input): css part definition forgotten in the code

* fix(input): font style fixed

* fix(input): ui fixes with new rem sizes

* chore(storybook): multi column demos aligned top

* refactor(input): private properties pointed, better jsdoc

* refactor: better web component analyzer

* fix(input): placeholder color fix

* fix(design): duplicate colors removed

* fix(input): label bg color fixed

Co-authored-by: mehmet.tanas <[email protected]>

.lintstagedrc

@@ -1,7 +1,7 @@
 {
   "*.{ts,tsx,js}": [
     "eslint --rule 'no-console: error' --fix",
-    "prettier --write"
+    "prettier --write src/"
   ],
   "*.{json,md}": [
     "prettier --write"

.storybook/preview-head.html

@@ -1,2 +1,7 @@
 <link rel="stylesheet" href="/themes/default.css" />
 <script type="module" src="/baklava.js"></script>
+<style>
+    .innerZoomElementWrapper > * {
+        vertical-align: top;
+    }
+</style>

.storybook/preview.js

@@ -1,5 +1,5 @@
 import { setCustomElementsManifest } from '@storybook/web-components';
-import customElements from '../src/custom-elements.json';
+import customElements from '../dist/custom-elements.json';
 
 setCustomElementsManifest(customElements);
 

custom-elements-manifest.config.mjs

@@ -0,0 +1,27 @@
+export default {
+  globs: ['src/components/**/!(*.test).ts'],
+  exclude: ['src/**/*.css', 'src/components/icon/icon-list.ts'],
+  outdir: 'dist/',
+  dev: false,
+  watch: false,
+  dependencies: false,
+  packagejson: true,
+  litelement: true,
+  plugins: [
+    {
+      name: 'filter',
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            if (classDoc?.members) {
+              classDoc.members = classDoc.members.filter(member => member.privacy !== 'private');
+            }
+          }
+        }
+      },
+    }
+  ],
+};