[Suggestion] Move optional dependencies to peerDependencies (#924)

* Move optional dependencies to peerDependencies

* Add peerDependencies to dev dependencies

To make local builds and tests work properly it seems it's common to add optional
peerDependencies to the devDependencies to make sure they are installed for testing

* Fix missing comma breaking package.json validity

* Add documentation of installing peer dependencies

* Add tom select to build & peer dependencies

package.json

@@ -65,12 +65,17 @@
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
     "@storybook/html": "^6.3.12",
+    "apexcharts": "^3.29.0",
     "autoprefixer": "^10.3.7",
+    "autosize": "^5.0.1",
     "browser-sync": "^2.27.5",
     "bundlewatch": "^0.3.2",
+    "choices.js": "^9.0.1",
     "chromatic": "^6.0.5",
+    "countup.js": "^2.0.8",
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
+    "flatpickr": "^4.6.9",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
@@ -82,13 +87,17 @@
     "gulp-rename": "^2.0.0",
     "gulp-rtlcss": "^1.4.2",
     "gulp-sass": "^5.0.0",
+    "imask": "^6.2.2",
+    "litepicker": "^2.0.11",
     "node-sass": "^6.0.1",
+    "nouislider": "^15.5.0",
     "postcss": "^8.3.11",
     "release-it": "^14.11.6",
     "rollup": "^2.58.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "storybook-addon-outline": "^1.4.1",
+    "tom-select": "^1.7.8",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^1.10.2",
@@ -97,9 +106,12 @@
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "@tabler/icons": "^1.42.0",
+    "bootstrap": "5.1.3"
+  },
+  "peerDependencies": {
     "apexcharts": "^3.29.0",
     "autosize": "^5.0.1",
-    "bootstrap": "5.1.3",
+    "choices.js": "^9.0.1",
     "countup.js": "^2.0.8",
     "flatpickr": "^4.6.9",
     "imask": "^6.2.2",
@@ -107,6 +119,35 @@
     "nouislider": "^15.5.0",
     "tom-select": "^1.7.8"
   },
+  "peerDependenciesMeta": {
+    "apexcharts": {
+      "optional": true
+    },
+    "autosize": {
+      "optional": true
+    },
+    "choices.js": {
+      "optional": true
+    },
+    "countup.js": {
+      "optional": true
+    },
+    "flatpickr": {
+      "optional": true
+    },
+    "imask": {
+      "optional": true
+    },
+    "litepicker": {
+      "optional": true
+    },
+    "nouislider": {
+      "optional": true
+    },
+    "tom-select": {
+      "optional": true
+    }
+  },
   "resolutions": {
     "**/**/node-gyp": "^5.0.0"
   },

src/pages/_docs/autosize.md

@@ -5,6 +5,7 @@ description: The autosize element will automatically adjust the textarea height
 libs: autosize
 ---
 
+To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
 
 ## Default markup
 

src/pages/_docs/charts.md

@@ -5,7 +5,9 @@ libs: apexcharts
 description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
 ---
 
-[ApexCharts](https://apexcharts.com/) documentation.
+To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`. 
+
+See also the [ApexCharts](https://apexcharts.com/) documentation.
 
 ## Line Chart
 

src/pages/_docs/countup.md

@@ -5,6 +5,7 @@ menu: docs.components.countup
 libs: countup
 ---
 
+To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
 
 ## Default countup
 

src/pages/_docs/download.md

@@ -30,4 +30,19 @@ Install Tabler in your Node.js powered apps with the npm package:
 
 ```
 npm install {{ site.npm-package }}
-```
+```
+
+Tabler uses other packages to enhance the functionality for example charts and input masks. These are not automatically installed to avoid huge 
+dependency trees and need to be installed by using npm install. We support the following packages as of writing.
+
+- [apexcharts](https://apexcharts.com/)
+- [autosize](http://www.jacklmoore.com/autosize/)
+- [choices.js](https://github.com/Choices-js/Choices)
+- [countup.js](https://inorganik.github.io/countUp.js/)
+- [flatpickr](https://flatpickr.js.org/)
+- [imask](https://imask.js.org/)
+- [litepicker](https://litepicker.com/)
+- [nouislider](https://refreshless.com/nouislider/)
+- [tom-select](https://tom-select.js.org/)
+
+For the complete list of supported packages you can check the peerDependencies section in our [package.json]({{ site.github-url }}/blob/dev/package.json)

src/pages/_docs/input-mask.md

@@ -4,6 +4,7 @@ description: An input mask is a used to clarify the input format required in a g
 menu: docs.plugins.input-mask
 ---
 
+To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`.
 
 ## Default markup
 

src/pages/_docs/range-slider.md

@@ -4,6 +4,8 @@ menu: docs.components.range-slider
 libs: nouislider
 ---
 
+To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
+
 All options and features can be found [**here**](https://refreshless.com/nouislider/).