Facilitate the experience of testing Clay locally on DXP

[matuzalemsteles]

Well currently we have a lot of problems testing local Clay in DXP, we already had two problems with that, one of them was giving React type conflicts from Clay monorepo to DXP monorepo types.

../../../../../../clay/node_modules/@types/react/index.d.ts(2817,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
../../../node_modules/@types/react/index.d.ts(2835,14): error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
../../../node_modules/@types/react/index.d.ts(2848,13): error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.

The idea is to try to simplify creating some bash script or nodejs as appropriate to simplify the linking of Clay modules in DXP.

[julien]

@matuzalemsteles as I said in #4241, for me it was a matter of linking the correct packages and using yarn link PACKAGE_NAME in DXP. I don't know how much we want to automate this, but here's a simple script that will link all clay packages

#!/usr/bin/env bash
packages=$(find 'packages/' -maxdepth 1 -mindepth 1 -type d)
for p in $packages; do
    if [ -f "$p/package.json" ]; then
        cd "$p"
        yarn build
        yarn link
        cd -
    fi
done

The only problem here is that some packages don't have a build script specified in their package.json, so this might need to be tweaked to check that.

[EDIT]: I edited the script part, to avoid doing the build in a subshell (not necessary): if no build script is defined in package.json, it will obviously not build but it won't stop the script or prevent from linking. After running the script all packages in the clay repo are linked in ~/.config/yarn/link and it's pretty easy to do a yarn link SOME_CLAY_PACKAGE_NAME in dxp. I don't know how much we want to automate this, but I think this is a good start.

[julien]

@matuzalemsteles just tested and here are the steps, I did to test "local" changes:

• Run the shell script posted in the last comment
• Navigate to liferay-portal repository
• Navigate to modules/apps/frontend-taglib/frontend-taglib-clay
• Link packages (in my case yarn link @clayui/alert @clayui/button @clayui/label)
• Stop tomcat (When deploying the frontend-taglib-clay module, if tomcat is running it usually crashes)
• Deploy the OSGi module (gradlew deploy -a)
• Start tomcat
• Navigate to http://localhost:8080

(My change was totally pointless but it was just to test, so don't be scared of what you see in this screenshot)

Result:

[julien]

Adding another comment, just to say that personally if it's just a matter of linking the desired packages I would rather not maintain a script and have detailed instructions in our README or Wiki. It just boils down to something like this

Run and build the package from the clay repo

yarn workspace @clayui/PACKAGE_NAME build
yarn workspace @clayui/PACKAGE_NAME link

To use it from an OSGi module in DXP

yarn link @clayui/PACKAGE_NAME
gradlew deploy -a

But I'm curious to know what the rest of the team thinks.