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 <murat.corlu@trendyol.com>

* 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 <mehmet.tanas@trendyol.com>

.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');
+ }
+ }
+ }
+ },
+ }
+ ],
+};