add basic setup

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "amd": true
+  },
+  "extends": [
+    "airbnb-base",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "import/extensions": 0,
+    "import/no-unresolved": 0,
+    "import/no-extraneous-dependencies": 0,
+    "prettier/prettier": "warn",
+    "@typescript-eslint/no-shadow": "warn"
+  }
+}

.github/workflows/basic-checks.yml

@@ -0,0 +1,36 @@
+name: Basic Checks
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  build:
+    name: 'Lint 🧮, Test 🧪 and Build ⚒️'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 'Checkout code'
+        uses: actions/checkout@v3
+
+      - name: 'Setup node'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 17.9.1
+
+      - name: 'Install dependencies'
+        run: npm ci
+
+      - name: 'Run eslint'
+        run: npm run lint
+
+      - name: 'Run scss lint'
+        run: npm run lint-scss
+
+      - name: 'Run coverage unit test'
+        run: npm run test:coverage
+
+      - name: 'Run build'
+        run: npm run build

.github/workflows/playwright.yml

@@ -0,0 +1,35 @@
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    name: 'Playwright 👩🏽‍🚒 E2E Test 🚀'
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+# Skip ignoring this file because it is required for GitHub Pages to work.
+# dist/
+.nyc_output/
+coverage/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.mocharc.json

@@ -0,0 +1,4 @@
+{
+  "require": "ts-node/register",
+  "spec": "tests/**/*.ts"
+}

.nycrc.json

@@ -0,0 +1,10 @@
+{
+  "lines": 80,
+  "branches": 80,
+  "functions": 80,
+  "statements": 80,
+  "check-coverage": false,
+  "include": ["src/**/*.ts"],
+  "exclude": ["tests/**/*.ts"],
+  "reporter": ["lcov", "html", "text"]
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.scss-lint.yml

@@ -0,0 +1,216 @@
+exclude: 'stylesheets/vendors/**'
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: true
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero
+
+  ChainedClasses:
+    enabled: false
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: false
+
+  ElsePlacement:
+    enabled: true
+    style: same_line
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short
+
+  HexNotation:
+    enabled: true
+    style: lowercase
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: false
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: true
+    character: space
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero
+
+  MergeableSelector:
+    enabled: false
+    force_nesting: false
+
+  NameFormat:
+    enabled: true
+    convention: hyphenated_lowercase
+    allow_leading_underscore: true
+
+  NestingDepth:
+    enabled: true
+    max_depth: 1
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PrivateNamingConvention:
+    enabled: true
+    prefix: _
+
+  PropertyCount:
+    enabled: false
+
+  PropertySortOrder:
+    enabled: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  PropertyUnits:
+    enabled: false
+
+  PseudoElement:
+    enabled: true
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: 'hyphenated_BEM'
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableColon:
+    enabled: true
+    style: at_least_one_space
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space
+    allow_single_line_padding: true
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: false
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+
+  VendorPrefixes:
+    enabled: true
+    identifier_list: base
+    include: []
+    exclude: []
+
+  ZeroUnit:
+    enabled: true

README.md

@@ -1 +1,36 @@
-# otp-field
+# otp-field
+
+A opt field build using ts and scss
+
+## Mocha Test Runner Setup
+
+- [mocha npm package](https://www.npmjs.com/package/mocha)
+- [mocha types npm package](https://www.npmjs.com/package/@types/mocha)
+- [ts-node npm package](https://www.npmjs.com/package/ts-node)
+- [Configuration Doc Link](https://mochajs.org/#configuring-mocha-nodejs)
+- [Sample Config files](https://github.com/mochajs/mocha/tree/master/example/config)
+- [Mocha Test Explorer VSCode Extension](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter)
+
+## Chai Assertion Library Setup
+
+- [chai npm package](https://www.npmjs.com/package/chai)
+- [chai types npm package](https://www.npmjs.com/package/@types/chai)
+
+## jsdom Setup
+
+- [jsdom npm package](https://www.npmjs.com/package/jsdom)
+- [jsdom-global npm package](https://www.npmjs.com/package/jsdom-global)
+
+## NYC Test Coverage Setup
+
+- [nyc npm package](https://www.npmjs.com/package/nyc)
+
+## sinon Setup
+
+- [sinon npm package](https://www.npmjs.com/package/sinon)
+- [sinon types npm package](https://www.npmjs.com/package/@types/sinon)
+
+## Playwright Setup
+
+- [playwright installation doc link](https://playwright.dev/docs/intro#installing-playwright)
+- [http-server npm package](https://www.npmjs.com/package/http-server)