Feature request: Component Definition Expanded

[skhademcis]

Description

I want to have the ability to reuse REACT components from other JS projects, can the components be extended so that they can import npm modules from third party apps (perhaps via OS dependencies? https://splunk.github.io/addonfactory-ucc-generator/advanced/os-dependent_libraries/ )

From what I understand this is already possible in some capacity, if so please turn this request into a documentation update, with a detailed example of how to include third party npm packages and how to reference react component parameter throughout the framework (ex. using a hook to obtain information that could be fed into a component)

[skhademcis]

Please let me know if you need any clarification on this, the goal is to figure out how we can best use "components" in the UCC framework. Are the components wrappers around html elements and certain splunk objects (panels etc), or can they be used to render react components that would make integration with other products easier.

[vtsvetkov-splunk]

@skhademcis
Thank you for bringing this to our attention. You're correct; our documentation currently does not include instructions for usage with custom React components. We acknowledge this gap and are actively working to update our documentation to address this

[vtsvetkov-splunk]

We have documented the current state of extension with React components.
TL;DR: UCC does not support it, but there is a way to use it, and some addons implemented this way.
https://splunk.github.io/addonfactory-ucc-generator/custom_ui_extensions/overview/#react-component-extension

[skhademcis]

Thanks for the update, if we were to contribute/fork the framework, where would need to declare the new components?

I see the core react components here
https://github.com/splunk/addonfactory-ucc-generator/tree/develop/ui/src/components

And some declarations here as well
https://github.com/splunk/addonfactory-ucc-generator/blob/develop/splunk_add_on_ucc_framework/schema/schema.json

[artemrys]

We started the design phase for a better support for custom UI components, we will share more details once the design is complete.

Meanwhile, we have open sourced an "Example TA" where you can find one of the ways to support custom UI for UCC-based TAs - https://github.com/splunk/splunk-example-ta.

[vtsvetkov-splunk]

@skhademcis do you have any examples/use cases of custom react components that you would like to integrate in TA?
We have an example of a Date Picker that UCC lacks, but I would like to add more examples.
https://github.com/splunk/splunk-example-ta/blob/main/ui/src/ucc-ui-extensions/DateInput/DateInput.tsx