Update code base

.eslintignore

@@ -2,7 +2,9 @@
 /dist
 /easing
 /coverage
-!.*rc
 .*
+!.*rc
+!.github
+CODEOWNERS
 LICENSE
 yarn.lock

.eslintrc

@@ -11,15 +11,29 @@
     "airbnb-typescript",
     "airbnb/hooks"
   ],
-  "overrides": [],
+  "overrides": [
+    {
+      "files": ["*.test.ts", "*.test.tsx"],
+      "rules": {
+        "prefer-arrow-callback": [
+          "warn",
+          {
+            "allowNamedFunctions": true
+          }
+        ]
+      }
+    }
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
   "plugins": ["react", "mocha", "istanbul"],
   "rules": {
-    "istanbul/no-ignore-file": "error",
-    "istanbul/prefer-ignore-reason": "error"
+    "istanbul/no-ignore-file": "warn",
+    "istanbul/prefer-ignore-reason": "warn",
+    "max-len": "warn",
+    "no-nested-ternary": "warn"
   }
 }

.github/workflows/codeql.yml

@@ -9,17 +9,17 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
     paths-ignore:
       - '**.md'
       - '.github/**'
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ['main']
     paths-ignore:
       - '**.md'
       - '.github/**'
@@ -38,45 +38,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'typescript' ]
+        language: ['typescript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Use only 'java' to analyze code written in Java, Kotlin or both
         # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: '/language:${{matrix.language}}'

.prettierignore

@@ -2,7 +2,11 @@
 /dist
 /easing
 /coverage
-!.*rc
 .*
+!.*rc
+!.github
+CODEOWNERS
 LICENSE
 yarn.lock
+*.ts
+*.tsx

.prettierrc

@@ -2,7 +2,6 @@
   "$schema": "http://json.schemastore.org/prettierrc",
   "arrowParens": "always",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
   "printWidth": 100,
   "proseWrap": "always",

.stylelintignore

@@ -2,7 +2,9 @@
 /dist
 /easing
 /coverage
-!.*rc
 .*
+!.*rc
+!.github
+CODEOWNERS
 LICENSE
 yarn.lock

.stylelintrc

@@ -6,6 +6,12 @@
   ],
   "rules": {
     "function-parentheses-space-inside": "never-single-line",
-    "order/properties-alphabetical-order": null
+    "order/properties-alphabetical-order": null,
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["value"]
+      }
+    ]
   }
 }

README.md

@@ -2,31 +2,44 @@
 
 Bearing is a lightweight TypeScript carousel component for React.
 
-- **Laconic:** The component is built with a feel of minimalism in every step: from minimizing component props to taking care of styling eye-candies. There are also planned options of customizing many style-related things by yourself.
-- **Lightweight:** There are no leftover or unnecessary dependencies. You can fell confident of unpacked library size.
-- **TypeScript:** This means that not only is there a stable code base, but the library can also be used in both JavaScript and TypeScript projects out of package registry. No needs in additional type definitions search.
+- **Laconic:** The component is built with a feel of minimalism in every step: from minimizing
+  component props to taking care of styling eye-candies. There are also planned options of
+  customizing many style-related things by yourself.
+- **Lightweight:** There are no leftover or unnecessary dependencies. You can fell confident of
+  unpacked library size.
+- **TypeScript:** This means that not only is there a stable code base, but the library can also be
+  used in both JavaScript and TypeScript projects out of package registry. No needs in additional
+  type definitions search.
 
 ## Installation
 
-You can use Bearing as a `bearing` package on [npm](https://www.npmjs.com/package/bearing). Also there are online playground demonstrations planned.
+You can use Bearing as a `bearing` package on [npm](https://www.npmjs.com/package/bearing). Also
+there are online playground demonstrations planned.
 
 ## Documentation
 
-The documentation wiki is currently in development stage. It will be open for contributing so stay in touch. For now check out [examples](https://github.com/andrewbrodko/bearing/blob/main/README.md#examples).
+The documentation wiki is currently in development stage. It will be open for contributing so stay
+in touch. For now check out
+[examples](https://github.com/andrewbrodko/bearing/blob/main/README.md#examples).
 
 ## Examples
 
-We have several examples in the [examples section](https://github.com/andrewbrodko/bearing/wiki/Examples) of wiki.
+We have several examples in the
+[examples section](https://github.com/andrewbrodko/bearing/wiki/Examples) of wiki.
 
 ## Contributing
 
-The main purpose of this repository is to evolve Bearing, share experiences and master many skills. This repo started as my next level pet project. Read below to learn how you can take part in improving Bearing.
+The main purpose of this repository is to evolve Bearing, share experiences and master many skills.
+This repo started as my next level pet project. Read below to learn how you can take part in
+improving Bearing.
 
-To help you get familiar with declared contribution process, there are some common rules of doing so.
+To help you get familiar with declared contribution process, there are some common rules of doing
+so.
 
 ### Rollup
 
-This repo uses [rollup](https://www.npmjs.com/package/rollup) as a package bundler. To perform a local development cycle you need to complete a series of tasks:
+This repo uses [rollup](https://www.npmjs.com/package/rollup) as a package bundler. To perform a
+local development cycle you need to complete a series of tasks:
 
 1. Clone repo and install package dependencies
 2. Create React app for package testing
@@ -45,11 +58,14 @@ This repo uses [rollup](https://www.npmjs.com/package/rollup) as a package bundl
 
 ### Prettier
 
-Use [Prettier](https://www.npmjs.com/package/prettier) with ide plugin as your main code style checker.
+Use [Prettier](https://www.npmjs.com/package/prettier) with ide plugin as your main code style
+checker.
 
 ### Issues
 
-If you have encountered any bugs or want to offer a feature, feel free to send a pull request or raise an issue. There are two common rules of doing so:
+If you have encountered any bugs or want to offer a feature, feel free to send a pull request or
+raise an issue. There are two common rules of doing so:
 
 - Provide as much related info as you can when raising any issue
-- If you have encountered a bug, please post a link to codesandbox with your environment to re-create the issue
+- If you have encountered a bug, please post a link to codesandbox with your environment to
+  re-create the issue

rollup.config.ts

@@ -1,7 +1,7 @@
-import { RollupOptions } from "rollup";
+import { RollupOptions } from 'rollup';
 
 import typescript from '@rollup/plugin-typescript';
-import postcss from 'rollup-plugin-postcss-modules'
+import postcss from 'rollup-plugin-postcss-modules';
 import autoprefixer from 'autoprefixer';
 
 const bearing: RollupOptions = {
@@ -18,11 +18,11 @@ const bearing: RollupOptions = {
       sourceMap: true,
       modules: {
         generateScopedName: '[local]-[hash:base64:4]',
-        hashPrefix: 'prefix'
+        hashPrefix: 'prefix',
       },
       minimize: {
-        preset: 'default'
-      }
+        preset: 'default',
+      },
     }),
     typescript({
       rootDir: './src/bearing',

src/bearing/Slide/index.module.scss

@@ -1,12 +1,12 @@
 .slide {
   position: absolute;
-  padding: 0 8px;
   display: flex;
   justify-content: center;
+  padding: 0 8px;
 
-  & > img {
-    height: 100%;
+  img {
     width: 100%;
+    height: 100%;
     object-fit: cover;
   }
 }