From b85fa1e0b9e07e57430c8b802571d1f81bce12bd Mon Sep 17 00:00:00 2001 From: Mark Rosenberg <38965626+markdoeswork@users.noreply.github.com> Date: Fri, 1 Nov 2024 14:21:32 -0400 Subject: [PATCH] [PLAY-1571] Add dependencies to getting started page (#3864) **What does this PR do?** A clear and concise description with your runway ticket url. Runway https://runway.powerhrg.com/backlog_items/PLAY-1571 Find all the dependancies for our kits and put them on a page Some of them need the plabyook consumer to add a library to their app, others ship with playbook check it out https://pr3864.playbook.beta.px.powerapp.cloud/guides/getting_started/dependencies ![screenshot-pr3864_playbook_beta_px_powerapp_cloud-2024_10_30-15_11_44](https://github.com/user-attachments/assets/52deb7b1-ad74-47d0-8474-15ca37efba5f) --- .../guides/getting_started/dependencies.md | 52 +++++++++++++++++++ .../config/initializers/global_variables.rb | 7 +-- 2 files changed, 56 insertions(+), 3 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