I am trying to create a custom component in AEM's SPA editor for react. The custom component will only hold a parsys or a responsive-grid, where i can drag and drop components.
I can do it very easily in htl :
<sly data-sly-resource="${'parsys' # resourceType='foundation/components/parsys'}"></sly>
How can I implement it in react?
Adobe's reference implementation doesn't provide any solution for this though it provides Layout Container. I've gone through adobe's example and many others on internet, also checked the adobe experience league, but nothing useful found so far.
Any idea or solution would be appreciated.
Thanks in advance.
Related
I’m building a plugin that will allow users to upload a 3D asset and manage some content about that object in a JSON field. I’d also like to use the Richtext field along with the WYSIWYG component that comes with strapi.
I’m looking for a way to import and configure that component in the React component that I’m building in my plugin.
Is this possible, and if so, are there examples of how I could do this?
This is probably the complete Richtext field built into Strapi: https://github.com/strapi/strapi/tree/main/packages/core/admin/admin/src/content-manager/components/Wysiwyg
I don't think it's available with Strapi's published package, and you cannot find it with their design system.
So I'd recommend looking into an alternative solution like using another WYSIWYG editor package instead.
I am at the beginning of creating my own personal React Web App, and I would like to first start by creating a custom trapezoidal (Nothing too complex) shape to use all over the front page.
I researched many methods and libraries that could help (Konva, draw-shape-reactjs, etc.); however, I would like to ask for other opinions about what to use. I did see somewhere that React does not work well with HTML Canvas. So I'll avoid that, unless told otherwise.
If I should consider a simpler way to create such shapes with CSS on a React Framework, please let me know.
Recently I've joined a new job and they are working with Salesforce. They have all pages with APEX and I propose to migrate to Lightning components.
I've created the first 7 components and I'm using Atomic Design Methodology (https://atomicdesign.bradfrost.com/chapter-2/) to develop these components.
I want to implement stories (with Storybook) or another similar library to document and put examples of each web component.
My question is... Is it possible? I try to install Storybook in the project and isn't working. The question is simple, whether or not you can. And if not, if you know any alternative to it.
Thank you!
In order to use Storybook, you will need to follow the provided Storybook documentation for lightning "Web Component" rather than the other available options like React and configure your VS Code to work with your SF Environment. Also, you might want to look into downloading the lwc-services, lwc-webpack-plugin and mo-dx-plugin dependency.
I'm using react tabulator, displaying the data works perfectly, but I need to allow that the user can add tags in some cells, it's not clear to me how to achieve this because the docs only have concise information about this and using the standard (vanilla js) library, I can't find a reacts way to achieve this
I'd like to connect the event with a redux dispatcher because I need to run an action when the user add or delete tags, but not sure if it's possible with this lib
I'd appreciate any help, guide, or clue about how can I achieve this, thank you so much
Use react-tabulator instead of tabulator
My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section).
The CMS distribution currently includes a bundled version of the javascript needed to run the web app, but not the original TSX files.
Now, we would like to make it possible to the developers using our CMS to extend the web app by
1) Injecting additional sections into the UI using a "slot-fill" approach
2) Possibly even overriding the existing sections rendering a different component in the same place.
<div>
<SidebarComponent />
<Section1Component />
<Section2Component />
// How to inject a possible PluginComponent here?
</div>
From the research we've conducted so far, there seem to be no "official" way to do this, so I'm wondering what would be the best approach in this case.
I am facing the same issue where I need a component from a plugin to interact with a component from another plugin with a hook system. I have a created a small codesanbox with the same approach adapted to your need.
Basically the approach is to create a injectedComponents.js at the root of your plugin that specifies in which plugin and area your component needs to be injected.
Here is ademo
single-spa has some good options in order to achieve this.
Please see if it can be help for you.
Microfrontends
Parcels
I am late to this but
Just create a utility class with registry function, and register each component to the registry (just dictionary of key value pair, where key is a constant and Value is the component). T
Then when you display a component in your base app, get it from the registry using a key. Then once you publish this whole base app as package ( make sure to export the utility registry). A user can register a component with the same name and override the default component.
For communication between totally independant components, you can use and EventEmitter