From 6e90f1be42279537aacb8959d30911f7712d58d9 Mon Sep 17 00:00:00 2001 From: Robert-Jan de Dreu Date: Sun, 14 Nov 2021 19:10:48 +0100 Subject: [PATCH] [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 | 43 ++++++++++++++++++++++++++++++++- src/pages/_docs/autosize.md | 1 + src/pages/_docs/charts.md | 4 ++- src/pages/_docs/countup.md | 1 + src/pages/_docs/download.md | 17 ++++++++++++- src/pages/_docs/input-mask.md | 1 + src/pages/_docs/range-slider.md | 2 ++ 7 files changed, 66 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index dafdaefcd..4c7b207e9 100644 --- a/package.json +++ b/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" }, diff --git a/src/pages/_docs/autosize.md b/src/pages/_docs/autosize.md index 5ffd12253..803cfff7c 100644 --- a/src/pages/_docs/autosize.md +++ b/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 diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md index c9c7fecb4..41e6d2a92 100644 --- a/src/pages/_docs/charts.md +++ b/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 diff --git a/src/pages/_docs/countup.md b/src/pages/_docs/countup.md index 984b49ec0..ec83bcfb7 100644 --- a/src/pages/_docs/countup.md +++ b/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 diff --git a/src/pages/_docs/download.md b/src/pages/_docs/download.md index 9ca1bb3de..bff2024db 100644 --- a/src/pages/_docs/download.md +++ b/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 }} -``` \ No newline at end of file +``` + +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) \ No newline at end of file diff --git a/src/pages/_docs/input-mask.md b/src/pages/_docs/input-mask.md index f78c3f453..e694af3ea 100644 --- a/src/pages/_docs/input-mask.md +++ b/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 diff --git a/src/pages/_docs/range-slider.md b/src/pages/_docs/range-slider.md index 2b354eede..79a34c322 100644 --- a/src/pages/_docs/range-slider.md +++ b/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/).