First functional version

.babelrc

@@ -0,0 +1,21 @@
+{
+    "presets": [
+        // "@babel/preset-env",
+        ["@babel/preset-env", {
+            "targets": 
+                {
+                    "node": "current"
+                }
+            }
+        ],
+        [
+            "@babel/preset-react", {
+                "runtime": "automatic"
+            }
+        ]
+    ],
+    "plugins": [
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-transform-runtime"
+    ]
+}

.eslintignore

@@ -0,0 +1,3 @@
+# Ignore built files except build/index.js
+dist/*
+!dist/index.js

.eslintrc.js

@@ -0,0 +1,52 @@
+const RULES = {
+    OFF: 'off',
+    WARN: 'warn',
+    ERROR: 'error'
+}
+
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        jest: true
+    },
+    extends: [
+        'plugin:jest/recommended',
+        'plugin:react/recommended',
+        'standard'
+    ],
+    settings: {
+        react: {
+            version: 'detect'
+        },
+        jest: {
+            version: 'detect'
+        }
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        },
+        ecmaVersion: 12,
+        sourceType: 'module'
+    },
+    plugins: [
+        'react',
+        'jest'
+    ],
+    rules: {
+        'prefer-arrow-callback': RULES.WARN,
+        'prefer-const': RULES.WARN,
+        quotes: [2, 'single', 'avoid-escape'],
+        indent: [RULES.ERROR, 4],
+        'react/jsx-indent': [RULES.ERROR, 4],
+        'react/jsx-indent-props': [RULES.ERROR, 4],
+        'react/prop-types': RULES.OFF,
+        'react/react-in-jsx-scope': RULES.OFF,
+        'jest/no-disabled-tests': RULES.WARN,
+        'jest/no-focused-tests': RULES.ERROR,
+        'jest/no-identical-title': RULES.ERROR,
+        'jest/prefer-to-have-length': RULES.WARN,
+        'jest/valid-expect': RULES.ERROR
+    }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.stylelintrc.json

@@ -0,0 +1,12 @@
+{
+    "extends": "stylelint-config-standard",
+    "plugins": [
+        "stylelint-no-unused-selectors"
+    ],
+    "rules": {
+        "declaration-no-important": true,
+        "color-hex-case": "upper",
+        "indentation": 4,
+        "plugin/no-unused-selectors": true
+    }
+}

README.md

@@ -0,0 +1,71 @@
+# React Range Component
+
+This project contains a responsive and customized React Range component inside of a demo environment.\
+It's written in react and packaged by webpack with the help of babel.
+
+For testing demonstration, a mock api with the array values is provided by https://www.mockable.io/ service.
+
+## Getting Started
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
+
+## Install dependencies
+
+Once the project is cloned or downloaded to a local folder. Perform this command to install dependencies.
+
+### `yarn install` / `npm install`
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start` / `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
+
+The page will reload if you make edits.
+You will also see any lint errors in the console.
+
+### `yarn lint` / `npm run lint`
+
+Checks code to comply with the given rules in .eslintrc.js (for javascript files) and .stylelintrc.json (for css files).
+
+It's also preconfigured to fix all missmatchings.
+
+### `yarn test` / `npm run test`
+
+Launches the test runner in the interactive watch mode.
+
+### `yarn build` / `npm run build`
+
+Builds the app for production to the `dist` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified, splitted into chunks and the filenames include the hashes.
+
+### `yarn serve` / `npm run serve`
+
+Once you deploy the application by running the build command, it's possible to serve the production version by executing this command.\
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
+
+## Attributes
+There are several attributes which must be implemented to work properly:
+
+- **rangeValues**: It provides a values array to the component which will be used to set min and max range values as well as intermediate values when array length is greater than 2.
+- **onChangeMin**: It provides a callback function to be called on minimum filter change providing new value as an argument.
+- **onChangeMax**: It provides a callback function to be called on maximum filter change providing new value as an argument.
+
+## Modes
+
+**Continuous Mode**
+
+It's automatically enabled when only two values are provided by rangeValues array attribute.
+
+*Optional Attributes for continuous mode*
+- **filtersOffset**: It sets a threshold offset between minimum and maximum filters (by defatul: 1) *Optional*
+- **updateOnEnd**: Callback functions are called only on end (default value: **false**). It can be enabled for performance reasons. *Optional*
+
+**Staggered Mode**
+
+It's automatically enabled when more than two values are provided by rangeValues array attribute.

config/webpack.common.js

@@ -0,0 +1,35 @@
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const HtmlWebPackPlugin = require('html-webpack-plugin')
+const path = require('path')
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        filename: '[name].[contenthash].js',
+        publicPath: '/'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.json']
+    },
+    module: {
+        rules: [
+            {
+                use: ['babel-loader'],
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/
+            },
+            {
+                type: 'asset',
+                test: /\.(png|svg|jpg|jpeg|gif)$/i
+            }
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebPackPlugin({
+            template: './public/index.html',
+            favicon: './public/favicon.ico'
+        })
+    ]
+}

config/webpack.dev.js

@@ -0,0 +1,31 @@
+const { HotModuleReplacementPlugin } = require('webpack')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common')
+
+const devConfig = {
+    mode: 'development',
+    devServer: {
+        port: '8080',
+        contentBase: './dist',
+        open: 'chrome',
+        historyApiFallback: true,
+        hot: true
+    },
+    target: 'web',
+    module: {
+        rules: [
+            {
+                use: ['style-loader', 'css-loader'],
+                test: /\.(css)$/i
+            }
+        ]
+    },
+    plugins: [
+        new HotModuleReplacementPlugin(),
+        new ReactRefreshWebpackPlugin()
+    ],
+    devtool: 'eval-source-map'
+}
+
+module.exports = merge(common, devConfig)

config/webpack.prod.js

@@ -0,0 +1,26 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common')
+
+const prodConfig = {
+    mode: 'production',
+    optimization: {
+        splitChunks: {
+            chunks: 'all'
+        }
+    },
+    module: {
+        rules: [
+            {
+                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+                test: /\.(css)$/i
+            }
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin()
+    ],
+    devtool: 'source-map'
+}
+
+module.exports = merge(common, prodConfig)

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    verbose: true,
+    transform: {
+        '^.+\\.(js|jsx)?$': 'babel-jest',
+        '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css'
+    },
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
+    }
+}

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "range-component",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve --config config/webpack.dev.js",
+    "build": "webpack --config config/webpack.prod.js",
+    "test": "jest --watchAll",
+    "lint": "eslint . --fix & stylelint \"src/**/*.css\" --fix",
+    "serve": "serve -s ./dist/ -l 8080"
+  },
+  "keywords": [],
+  "author": "Selugr",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.0.6",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "css-loader": "^6.2.0",
+    "eslint": "^7.31.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jest": "^24.3.7",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.24.0",
+    "html-webpack-plugin": "^5.3.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.0.6",
+    "jest-transform-css": "^2.1.0",
+    "mini-css-extract-plugin": "^2.2.0",
+    "react-refresh": "^0.10.0",
+    "serve": "^12.0.0",
+    "style-loader": "^3.2.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-no-unused-selectors": "^1.0.39",
+    "webpack": "^5.49.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1"/>
+        <meta name="description" content="React Range Component Demo Site" />
+        <title>React Range Component Demo</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300&display=swap" rel="stylesheet" />
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

src/App.css

@@ -0,0 +1,8 @@
+.app {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 1rem;
+}