From e6cde861c5b18ef1b1cc76da884685cc769cd7d4 Mon Sep 17 00:00:00 2001 From: Mark Date: Wed, 30 Oct 2024 14:39:55 -0400 Subject: [PATCH] Add all dependencies to getting started --- .../guides/getting_started/dependencies.md | 52 +++++++++++++++++++ .../config/initializers/global_variables.rb | 7 +-- yarn.lock | 12 ----- 3 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 playbook-website/app/views/guides/getting_started/dependencies.md diff --git a/playbook-website/app/views/guides/getting_started/dependencies.md b/playbook-website/app/views/guides/getting_started/dependencies.md new file mode 100644 index 0000000000..3323271988 --- /dev/null +++ b/playbook-website/app/views/guides/getting_started/dependencies.md @@ -0,0 +1,52 @@ +--- +title: Dependencies +icon: code +description: Some of our kits require additional libraries to run properly. +--- + +## Unbundled Dependencies + +These kits require you to install additional libraries to get full functionality. + +To install them add them to your project using `yarn add`, `npm install`, or manually add them to your `package.json` file. + +| Kit | Kit Link | NPM Link(s) | Dependency(s) | +|---------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|---------------------------------------------| +| **Icon** | [Icon](https://playbook.powerapp.cloud/kits/icon/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Icon Circle** | [Icon Circle](https://playbook.powerapp.cloud/kits/icon_circle/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Icon Stat Value** | [Icon Stat Value](https://playbook.powerapp.cloud/kits/icon_stat_value/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Icon Value** | [Icon Value](https://playbook.powerapp.cloud/kits/icon_value/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Map** | [Map](https://playbook.powerapp.cloud/kits/map/react) | [maplibre-gl](https://www.npmjs.com/package/maplibre-gl) | maplibre-gl | +| **Rich Text Editor**
(TipTap Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | - [@tiptap/core](https://www.npmjs.com/package/@tiptap/core)
- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react)
- [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/starter-kit)
- [@tiptap/extension-document](https://www.npmjs.com/package/@tiptap/extension-document)
- [@tiptap/extension-highlight](https://www.npmjs.com/package/@tiptap/extension-highlight)
- [@tiptap/extension-horizontal-rule](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)
- [@tiptap/extension-link](https://www.npmjs.com/package/@tiptap/extension-link)
- [@tiptap/extension-paragraph](https://www.npmjs.com/package/@tiptap/extension-paragraph)
- [@tiptap/extension-text](https://www.npmjs.com/package/@tiptap/extension-text)
- [@tiptap/pm](https://www.npmjs.com/package/@tiptap/pm) | - @tiptap/core
- @tiptap/react
- @tiptap/starter-kit
- @tiptap/extension-document
- @tiptap/extension-highlight
- @tiptap/extension-horizontal-rule
- @tiptap/extension-link
- @tiptap/extension-paragraph
- @tiptap/extension-text
- @tiptap/pm | + +## Bundled Dependencies + +These kits use dependencies that are bundled with them; no additional installation is required. + +| Kit | Kit Link | NPM Link(s) | Dependency(s) | +|------------------------|-----------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------| +| **Advanced Table** | [Advanced Table](https://playbook.powerapp.cloud/kits/advanced_table/react) | [@tanstack/react-table](https://www.npmjs.com/package/@tanstack/react-table) | @tanstack/react-table | +| **Bar Graph** | [Bar Graph](https://playbook.powerapp.cloud/kits/bar_graph/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Circle Chart** | [Circle Chart](https://playbook.powerapp.cloud/kits/circle_chart/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Date Picker** | [Date Picker](https://playbook.powerapp.cloud/kits/date_picker/react) | [flatpickr](https://www.npmjs.com/package/flatpickr) | flatpickr | +| **Dialog** | [Dialog](https://playbook.powerapp.cloud/kits/dialog/react) | [react-modal](https://www.npmjs.com/package/react-modal) | react-modal | +| **File Upload** | [File Upload](https://playbook.powerapp.cloud/kits/file_upload/react) | [react-dropzone](https://www.npmjs.com/package/react-dropzone) | react-dropzone | +| **Filter** | [Filter](https://playbook.powerapp.cloud/kits/filter/react) | [react-popper](https://www.npmjs.com/package/react-popper) | react-popper | +| **Gauge** | [Gauge](https://playbook.powerapp.cloud/kits/gauge/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Highlight** | [Highlight](https://playbook.powerapp.cloud/kits/highlight/react) | [react-highlight-words](https://www.npmjs.com/package/react-highlight-words) | react-highlight-words | +| **LightBox** | [LightBox](https://playbook.powerapp.cloud/kits/lightbox/react) | [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch) | react-zoom-pan-pinch | +| **Line Graph** | [Line Graph](https://playbook.powerapp.cloud/kits/line_graph/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Multi Level Select** | [Multi Level Select](https://playbook.powerapp.cloud/kits/multi_level_select/react) | [lodash](https://www.npmjs.com/package/lodash) | lodash | +| **Passphrase** | [Passphrase](https://playbook.powerapp.cloud/kits/passphrase/react) | [react-popper](https://www.npmjs.com/package/react-popper) | react-popper | +| **Phone Number Input** | [Phone Number Input](https://playbook.powerapp.cloud/kits/phone_number_input/react) | [intl-tel-input](https://www.npmjs.com/package/intl-tel-input) | intl-tel-input | +| **Popover** | [Popover](https://playbook.powerapp.cloud/kits/popover/react) | [lodash](https://www.npmjs.com/package/lodash),
[react-popper](https://www.npmjs.com/package/react-popper) | lodash,
react-popper | +| **Rich Text Editor**
(Trix Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | [trix](https://www.npmjs.com/package/trix),
[react-trix](https://www.npmjs.com/package/react-trix) | trix,
react-trix | +| **Tooltip** | [Tooltip](https://playbook.powerapp.cloud/kits/tooltip/react) | [@floating-ui/react](https://www.npmjs.com/package/@floating-ui/react) | @floating-ui/react | +| **Treemap Chart** | [Treemap Chart](https://playbook.powerapp.cloud/kits/treemap_chart/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Typeahead** | [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react) | [react-select](https://www.npmjs.com/package/react-select),
[lodash](https://www.npmjs.com/package/lodash) | react-select,
lodash | +| **Walkthrough** | [Walkthrough](https://playbook.powerapp.cloud/kits/walkthrough/react) | [react-joyride](https://www.npmjs.com/package/react-joyride) | react-joyride | + +## Notes +**Rich Text Editor**: This kit supports two different editors: +**TipTap Editor**: Requires manual installation of `tiptap` and various `@tiptap/*` extensions (listed above under Unbundled Dependencies). +**Trix Editor**: Dependencies (`trix` and `react-trix`) are bundled with the kit; no extra installation is needed. diff --git a/playbook-website/config/initializers/global_variables.rb b/playbook-website/config/initializers/global_variables.rb index 68052286d5..ca695bca59 100644 --- a/playbook-website/config/initializers/global_variables.rb +++ b/playbook-website/config/initializers/global_variables.rb @@ -69,10 +69,11 @@ ], } -# Move HTML figma to the end +# Move these pages to the end of the Getting Started page +page_names = ["HTML&_CSS", "figma_setup", "how_to_theme", "dependencies"] -move_pages = navigation[:getting_started][:pages].select { |page| ["HTML&_CSS", "figma_setup", "how_to_theme"].include?(page[:page_id]) } -navigation[:getting_started][:pages].reject! { |page| ["HTML&_CSS", "figma_setup", "how_to_theme"].include?(page[:page_id]) } +move_pages = navigation[:getting_started][:pages].select { |page| page_names.include?(page[:page_id]) } +navigation[:getting_started][:pages].reject! { |page| page_names.include?(page[:page_id]) } navigation[:getting_started][:pages].concat(move_pages) DOCS = navigation diff --git a/yarn.lock b/yarn.lock index bc890a2c0b..d8c29927aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3760,13 +3760,6 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== -"@types/flatpickr@3.1.2": - version "3.1.2" - resolved "https://npm.powerapp.cloud/@types/flatpickr/-/flatpickr-3.1.2.tgz#767e04fea776ddb399007028bed1a885e26d6d52" - integrity sha512-vCEuLqfSlpPhLDOvxyYMIlX20Dwn3XSEeYf9rXfcldDQdLVrtxDdIzE82xhlEFVeHpERujCCQIqETNEUrGsVtA== - dependencies: - flatpickr "*" - "@types/fs-extra@^8.0.1": version "8.1.5" resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.5.tgz#33aae2962d3b3ec9219b5aca2555ee00274f5927" @@ -6642,11 +6635,6 @@ flat-cache@^2.0.1: rimraf "2.6.3" write "1.0.3" -flatpickr@*, flatpickr@^4.6.13: - version "4.6.13" - resolved "https://npm.powerapp.cloud/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94" - integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw== - flatted@^2.0.0: version "2.0.2" resolved "https://npm.powerapp.cloud/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"