WIP: Update to Material UI Search Bar

.babelrc

@@ -1,4 +1,10 @@
 {
-  "presets": ["@babel/preset-react", "@babel/preset-env"],
-  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }]]
+  "presets": [
+    "@babel/env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/proposal-class-properties"
+  ],
 }

.eslintrc.js

@@ -0,0 +1,82 @@
+// rules
+const lintTS = {
+  plugins: ['@typescript-eslint'],
+  extends: ['plugin:@typescript-eslint/recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    warnOnUnsupportedTypeScriptVersion: false, // suppress the typescript version difference
+  },
+  // typescript-eslint https://github.com/typescript-eslint/typescript-eslint/tree/d0d71862efd7e079694fa9513ea983cc908ec6f6/packages/eslint-plugin
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-shadow': 'error',
+    '@typescript-eslint/prefer-ts-expect-error': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-var-requires': 'off', // turning off because we do not care if we import using es6 or common js... stupid lint
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-use-before-define': ['error', { variables: true }],
+    'react/display-name': 'off',
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: ['interface'],
+        format: ['PascalCase'],
+        prefix: ['I'],
+      },
+      {
+        selector: ['enum'],
+        format: ['PascalCase'],
+        prefix: ['E'],
+      },
+    ],
+  },
+};
+
+const lintReact = {
+  plugins: ['react'],
+  extends: ['plugin:react/recommended'],
+  // React Rules: https://www.npmjs.com/package/eslint-plugin-react
+  rules: {
+    'react/react-in-jsx-scope': 'off', // from react: Prevent missing React when using JSX -- turned off for next.js
+    'react/jsx-filename-extension': ['warn', { extensions: ['.tsx'] }], // from react: Restrict file extensions that may contain JSX
+    'react/prop-types': 'off', // from react: Prevent missing props validation in a React component definition
+    'react/jsx-props-no-spreading': ['error', { custom: 'ignore' }], // from react: Prevent JSX prop spreading
+    'react/no-unescaped-entities': 'warn', // Turning on to catch possible mistakes
+  },
+  settings: {
+    pragma: 'React',
+    version: 'detect',
+  },
+};
+
+module.exports = {
+  root: true,
+  parserOptions: lintTS.parserOptions,
+  parser: '@typescript-eslint/parser',
+  plugins: [...lintTS.plugins, ...lintReact.plugins],
+  extends: ['eslint:recommended', ...lintTS.extends, ...lintReact.extends],
+  rules: {
+    // eslint rules: https://eslint.org/docs/rules/
+    'prefer-const': 'warn', // from eslint: require `const` declarations for variables that are never reassigned after declared
+    // needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
+    'no-use-before-define': 'off', // from eslint: disallow the use of variables before they are defined
+    ...lintTS.rules,
+    ...lintReact.rules,
+  },
+  settings: {
+    react: lintReact.settings,
+    'import/resolver': {
+      'babel-module': {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        paths: ['src'],
+      },
+    },
+  },
+};

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI/CD
+
+on:
+  pull_request:
+    branches: [ master ] 
+  push:
+    branches: [ master ]
+
+  workflow_dispatch:
+
+jobs:
+  build-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Test
+        run: npm run test:ci

.gitignore

@@ -3,4 +3,9 @@ node_modules
 build
 lib
 styleguide/*
-storybook/*
+storybook*
+*.sh
+*.tgz
+.DS_Store
+sb_build
+coverage

.npmignore

@@ -4,3 +4,9 @@ src/*
 styleguide/*
 .storybook/*
 storybook/*
+demo.gif
+.babelrc
+*sh
+*tgz
+tsconfig.json
+lib/**/index.ts

.storybook/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ]
+}

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/stories/*.stories.mdx",
+    "../src/stories/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017-2020 Wertarbyte and contributors
+Copyright (c) 2021 Snekcode
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,3 +1,4 @@
+[![codecov](https://codecov.io/gh/SnekCode/material-ui-search-bar/branch/master/graph/badge.svg?token=9QWG3SY3Q3)](https://codecov.io/gh/SnekCode/material-ui-search-bar)
 # Material Search Bar
 
 ![Example](demo.gif)

jest.config.js

@@ -0,0 +1,17 @@
+/* eslint @typescript-eslint/no-var-requires: "off" */
+const { defaults } = require('jest-config');
+
+module.exports = {
+  ...defaults,
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/src/stories/'
+  ],
+  collectCoverage: true,
+  coveragePathIgnorePatterns: [
+    '/node_modules/'
+  ],
+  coverageReporters: ['json', 'lcov', 'text', 'text-summary'],
+  collectCoverageFrom: ['src/components/**/*.{ts,tsx}'],
+};