Community forum - Great amount and useful posts, however the navigation (by clicking from one post to another) and its searchability can be improved, maybe use StackOverflow as an inspiration?
Unable to use the most common front-end React framework with a Custom UI app Material UI requires react@"^17.0.0 || ^18.0.0"
If we Forge create -> Custom UI -> Macro template we get an app with an old React version, due to: confluence-macro-custom-ui-static@0.1.5 that requires a 2 year old React version
Can be reproduced by running the following in the static/hello-world folder after creating the custom UI macro forge template:
npm install @mui/material @emotion/react @emotion/styled
A copy of the error can be seen below: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: confluence-macro-custom-ui-static@0.1.5 npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.13.1" from the root project npm ERR! peer react@">=16.8.0" from @emotion/react@11.10.5 npm ERR! node_modules/@emotion/react npm ERR! @emotion/react@"" from the root project npm ERR! peerOptional @emotion/react@"^11.5.0" from @mui/material@5.10.12 npm ERR! node_modules/@mui/material npm ERR! @mui/material@"" from the root project npm ERR! 1 more (@emotion/styled) npm ERR! 1 more (@emotion/styled) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.0 || ^18.0.0" from @mui/material@5.10.12 npm ERR! node_modules/@mui/material npm ERR! @mui/material@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /home/user/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /home/user/.npm/_logs/2022-10-31T19_31_27_801Z-debug-0.log
If we downgrade the version of Material UI to v4 we get the following, within the browsers console, when we try to use it jss.esm.js:1903 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-PpoL88sugL+MixGj6eFNM05Q0l/B2tpC9guyJrsQkSY='), or a nonce ('nonce-...') is required to enable inline execution.
Some “workarounds” are available within the community, for example allowing unsafe inline styles, but that should not be necessary for using such a commonly used framework,
Feature request - logs (CLI) The forge logs CLI feature should support watching, whenever a new log appears it should print it without any interaction needed.
Feature request - UI I needed to create a form which had all the things of the UI kit’s functionality and a simple file upload field, because of that I had to use a Custom UI component that does not have any easily manageable state to the other UI components. Therefore it would be best if: We have the option to change the Text form field is changed to Input and we have the ability to set whether its a text/password or a file field We have a common state for the current page for the current user for the app, meaning if we have multiple components on one page defined through different macros, UI kit, Custom UI components, etc they should be able communicate with each other through something simplistic like Redux/useContext Add custom UI components and UI kit components within the same page/macro/etc possibly through grouping within the manifest file, and if possible without having to rely on the forge bridge
Documentation issue - app operational context It is not clearly documented how a Forge application interacts with the back-end and the front-end, the Custom UI and the UI kit apps interact differently and the basics have to be learned by trying or looking through numerous community posts, which should not be necessary, some common use cases should be listed for things such as localStorage, Web APIs, setTimeout, setInterval, etc.
Documentation issue - Debugging According to the documentation I have to run forge logs to see console output, however that is not necessary for Custom UI apps, maybe it isn’t for UI kit ones too, I haven’t tried it. The console.log prints can be seen in the browser’s console.
Documentation issue - Examples The different examples available through forge create can’t be easily seen through the reference website, I had to google forge confluence custom UI for example to see how that is described, it was hidden in to many menus for me to navigate through to find from the building a Confluence hello world app page
Log in or sign up for Devpost to join the conversation.