fix: use div for form validation

Author: astagi

.circleci/config.yml

@@ -5,14 +5,13 @@
 version: 2
 
 aliases:
-  - &working_directory
-    ~/repo
+  - &working_directory ~/repo
 
   - &restore_cache
     keys:
-    - npm-dependencies-v4-{{ checksum "package.json" }}
-    # fallback to using the latest cache if no exact match is found
-    - npm-dependencies-v4-
+      - npm-dependencies-v4-{{ checksum "package.json" }}
+      # fallback to using the latest cache if no exact match is found
+      - npm-dependencies-v4-
 
   - &npm_install
     name: Install Packages
@@ -68,7 +67,6 @@ jobs:
           paths:
             - dist
 
-            
   check-gatsby-ssr:
     <<: *defaults
 
@@ -87,8 +85,8 @@ jobs:
       - run:
           name: Bind global package folder to local user
           command: |
-              mkdir ~/.npm-packages
-              npm config set prefix ~/.npm-packages
+            mkdir ~/.npm-packages
+            npm config set prefix ~/.npm-packages
       - run:
           name: Link the toolkit
           command: yarn link
@@ -120,7 +118,6 @@ jobs:
             yarn storybook:build
             yarn storybook:deploy
 
-
   npm-publish:
     <<: *defaults
 
@@ -151,8 +148,8 @@ workflows:
           filters:
             branches:
               ignore:
-                  - gh-pages
-                  - next
+                - gh-pages
+                - next
             tags:
               only: /.*/
 

.eslintrc.js

@@ -1,21 +1,17 @@
 module.exports = {
-  "extends": [
-    "react-app",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended",
-  ],
-  "overrides": [
-      {
-        "files": ['*.mdx'],
-        "extends": 'plugin:mdx/recommended',
-        "settings": {
-          "mdx/code-blocks": false,
+  extends: ['react-app', 'prettier/@typescript-eslint', 'plugin:prettier/recommended'],
+  overrides: [
+    {
+      files: ['*.mdx'],
+      extends: 'plugin:mdx/recommended',
+      settings: {
+        'mdx/code-blocks': false
       }
     }
   ],
-  "settings": {
-    "react": {
-      "version": "detect"
+  settings: {
+    react: {
+      version: 'detect'
     }
   }
-}
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: "[BUG]"
+title: '[BUG]'
 labels: bug
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Other Required Information (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: "[FEATURE]"
+title: '[FEATURE]'
 labels: enhancement
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,16 +6,18 @@
 Fixes #
 
 #### PR Checklist
+
 <!-- To Mark a Checklist box, put "x" inside the square brackets. For Example - [ ] becomes [x] -->
+
 - [ ] My branch is up-to-date with the Upstream `master` branch.
 - [ ] The unit tests pass locally with my changes (if applicable).
 - [ ] I have added tests that prove my fix is effective or that my feature works (if applicable).
 - [ ] I have added necessary documentation (if appropriate).
 
 #### Short description of what this resolves:
-<!-- Please add a short description of what this PR resolves to be clear for the community. -->
 
+<!-- Please add a short description of what this PR resolves to be clear for the community. -->
 
 #### Changes proposed in this Pull Request:
-<!-- You can use a few bullet points to describe some implementation changes proposed. For Example - feat: adding navbar component -->
--
+
+## <!-- You can use a few bullet points to describe some implementation changes proposed. For Example - feat: adding navbar component -->

.github/workflows/check-tree-shakeability.yml

@@ -1,5 +1,5 @@
 name: Check tree-shakeability
-on: [ pull_request ]
+on: [pull_request]
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/chromatic.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
         with:
-            fetch-depth: 0 
+          fetch-depth: 0
       - name: Setup Node.js with Yarn cache
         uses: actions/setup-node@v2
         with:
@@ -21,12 +21,12 @@ jobs:
 
       - name: Install dependencies
         run: yarn --frozen-lockfile
-        
+
       - name: Publish to Chromatic
         uses: chromaui/action@v1
-        
+
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitZeroOnChanges: true
-          skip: 'dependabot/**'
+          skip: 'dependabot/**'

.github/workflows/ci.yml

@@ -1,31 +1,31 @@
 name: Lint, Test & Coverage
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   coverage:
     runs-on: ubuntu-latest
     concurrency: ci-test-${{ github.ref }}
     steps:
-    - uses: actions/checkout@v2
-    - name: Setup Node.js with Yarn cache
-      uses: actions/setup-node@v2
-      with:
-        node-version: '14'
-        cache: 'yarn'
+      - uses: actions/checkout@v2
+      - name: Setup Node.js with Yarn cache
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'yarn'
 
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile
-    - name: Lint
-      run: yarn lint
-    - name: Test
-      run: yarn test:ci
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: yarn lint
+      - name: Test
+        run: yarn test:ci
 
-    - name: Upload coverage
-      uses: codecov/codecov-action@v2
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        flags: unittests
+      - name: Upload coverage
+        uses: codecov/codecov-action@v2
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: unittests

.prettierrc

@@ -6,5 +6,6 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "printWidth": 120
 }

.storybook/main.js

@@ -1,8 +1,8 @@
-const CircularDependencyPlugin = require('circular-dependency-plugin')
+const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 module.exports = {
   core: {
-    builder: 'webpack5',
+    builder: 'webpack5'
   },
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
@@ -19,32 +19,31 @@ module.exports = {
     reactDocgenTypescriptOptions: {
       compilerOptions: {
         allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
+        esModuleInterop: false
+      }
     }
   },
   webpackFinal: async (config, { configType }) => {
-    const assetRule = config.module.rules.find(({ test }) => test && test.test(".svg"));
+    const assetRule = config.module.rules.find(({ test }) => test && test.test('.svg'));
     // exclude svg from the default storybook file-loader
     assetRule.exclude = /\.svg$/;
 
     // add svgr loader to handle svgs
     config.module.rules.push({
       test: /\.svg$/,
-      use: ['url-loader'],
+      use: ['url-loader']
     });
 
-    config.plugins.push(new CircularDependencyPlugin({
-      // exclude detection of files based on a RegExp
-      exclude: /node_modules/,
-      // add errors to webpack instead of warnings
-      failOnError: true,
-    }));
+    config.plugins.push(
+      new CircularDependencyPlugin({
+        // exclude detection of files based on a RegExp
+        exclude: /node_modules/,
+        // add errors to webpack instead of warnings
+        failOnError: true
+      })
+    );
 
     return config;
   },
-  staticDirs: [
-    '../static',
-    { from: '../assets', to: '/' },
-  ],
+  staticDirs: ['../static', { from: '../assets', to: '/' }]
 };