Migrate to Lerna and Yarn and improve examples (#3)

* Delete pnpm-lock.yaml

* Migrate to yarn and lerna

* Create yarn.lock

* Fix breaking changes

* Add routing and create chat page

* Improve initialization

* Improve example

* Add more use cases

* Update README.md

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -6,10 +6,33 @@ Welcome to the Chameleon Controls Library Samples repository! This repository co
 
 The [Chameleon Controls Library](https://github.com/genexuslabs/chameleon-controls-library) provides a set of customizable UI components designed to work seamlessly with different design systems, including Mercury. This repository aims to showcase practical implementations, starting with integration examples for React.
 
+## Requirements
+
+- Install Yarn
+
+  ```bash
+  npm i yarn -g
+  ```
+
+> [!WARNING]
+> For MacOS users, a few steps may be required to install Yarn.
+
 ## Available Samples
 
 [**react-mercury**](./packages/react-mercury/react/README.md): A sample showcasing how to integrate Chameleon controls with a React application using the GeneXus Mercury design system.
 
+- Start dev server: If the web-components package was not previously build or it has to be updated, run
+
+  ```bash
+  yarn start.react-mercury.build
+  ```
+
+  Otherwise, run
+
+  ```bash
+  yarn start.react-mercury
+  ```
+
 ## Contribution
 
 Contributions are welcome! If you have additional samples or improvements, feel free to fork the repository and submit a pull request.

lerna.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "version": "0.0.0"
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@genexus/chameleon-integrations",
+  "private": true,
+  "scripts": {
+    "start.react-mercury": "cd packages/react-mercury/react && yarn && yarn start",
+    "start.react-mercury.build": "yarn build.react-mercury.components && cd packages/react-mercury/react && yarn && yarn start",
+    "build.react-mercury": "yarn && yarn build.react-mercury.components && yarn build.react-mercury.app",
+    "build.react-mercury.app": "cd packages/react-mercury/react && yarn && yarn build",
+    "build.react-mercury.components": "cd packages/react-mercury/web-components && yarn && yarn build",
+    "build.react-mercury.components.watch": "yarn && yarn build.react-mercury.components --watch",
+    "preview.react-mercury": "yarn build.react-mercury.components && yarn preview.react-mercury.app",
+    "preview.react-mercury.app": "cd packages/react-mercury/react && yarn && yarn preview"
+  },
+  "workspaces": [
+    "packages/config/*",
+    "packages/react-mercury/*"
+  ],
+  "devDependencies": {
+    "@types/node": "^22.7.5",
+    "lerna": "^8.1.9",
+    "typescript": "~5.6.3"
+  },
+  "resolutions": {
+    "@types/react": "18.2.79"
+  }
+}

packages/react-mercury/react/README.md

@@ -5,7 +5,7 @@ The React package contains the Front-end application using the custom elements f
 ## Getting Started
 
 ```bash
-npm i pnpm -g
+npm i yarn -g
 ```
 
 ## Local development
@@ -15,8 +15,8 @@ npm i pnpm -g
 2. Run:
 
    ```bash
-   pnpm i
-   pnpm start
+   yarn
+   yarn start
    ```
 
 ## Building the package
@@ -25,13 +25,13 @@ npm i pnpm -g
 
 2. To build the design for production, run:
    ```bash
-   pnpm build
+   yarn build
    ```
 
 ## Preview production mode
 
 This mode uses the optimizations from the build command to run a local server:
 
 ```bash
-pnpm preview
+yarn preview
 ```

packages/react-mercury/react/index.html

@@ -6,7 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chameleon Integrations</title>
     <meta name="description" content="..." />
-    <script type="module" src="/src/initialize-registry.ts"></script>
+
+    <style>
+      @import "./src/assets/generated-bundles/base/base.css";
+      @import "./src/assets/generated-bundles/resets/box-sizing.css";
+    </style>
+
+    <script type="module">
+      import { registryProperty } from "@genexus/chameleon-controls-library/dist/collection";
+      import { getImagePathCallbackDefinitions } from "@genexus/mercury/assets-manager.js";
+      import { registerMercury } from "@genexus/mercury/register-mercury.js";
+
+      registerMercury();
+      registryProperty("getImagePathCallback", getImagePathCallbackDefinitions);
+    </script>
   </head>
   <body>
     <script type="module" src="/src/Main.tsx"></script>

packages/react-mercury/react/package.json

@@ -4,24 +4,25 @@
   "version": "0.0.0",
   "type": "module",
   "license": "Apache-2.0",
+  "prettier": "@genexus/chameleon-integrations-prettier-config",
   "scripts": {
     "start": "pnpm build.css && vite --port 5200 --open",
     "build": "pnpm build.css && tsc && vite build",
-    "build.css": "sass --load-path=src/assets --no-source-map --style compressed node_modules/@genexus/mercury/dist/bundles/scss:src/assets/generated-bundles",
+    "build.css": "sass --load-path=src/assets --no-source-map -q --style compressed ../../../node_modules/@genexus/mercury/dist/bundles/scss:src/assets/generated-bundles",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "pnpm build && vite preview --port 5200 --open"
   },
   "dependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "react-router-dom": "~6.26.2",
-    "@genexus/chameleon-controls-library": "6.0.0-next.40",
-    "@genexus/chameleon-integrations-web-components": "file:..\\web-components"
+    "@genexus/chameleon-controls-library": "6.0.0-next.54",
+    "@genexus/chameleon-integrations-web-components": "*"
   },
   "devDependencies": {
-    "@genexus/chameleon-integrations-prettier-config": "file:..\\..\\config\\prettier",
-    "@genexus/chameleon-integrations-typescript-config": "file:..\\..\\config\\typescript",
-    "@genexus/mercury": "0.9.0",
+    "@genexus/chameleon-integrations-prettier-config": "*",
+    "@genexus/chameleon-integrations-typescript-config": "*",
+    "@genexus/mercury": "0.12.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "~22.5.5",
     "@types/react": "~18.2.79",