[mercury][unanimo] Add a new showcase for Mercury and Unanimo. Improve assets manager implementation for the DS

packages/mercury/package.json

@@ -16,6 +16,12 @@
         "default": "./dist/index.js"
       }
     },
+    "./MERCURY_ASSETS.js": {
+      "import": {
+        "types": "./dist/assets/MERCURY_ASSETS.d.ts",
+        "default": "./dist/assets/MERCURY_ASSETS.js"
+      }
+    },
     "./assets-manager.js": {
       "import": {
         "types": "./dist/assets-manager.d.ts",

packages/mercury/src/bundles.ts

@@ -17,21 +17,28 @@ type BundleNames =
   | MercuryBundleUtil
   | MercuryBundleUtilFormFull;
 
-const getThemeModelItem = <T extends BundleNames>(
+const getThemeModelItem = <T extends BundleNames, S extends string>(
   basePath: string,
   bundleName: T,
+  bundleNamePrefix: S | undefined,
   attachStyleSheet: boolean | undefined = undefined
-) =>
-  attachStyleSheet === undefined
+) => {
+  const bundleNameWithPrefix = bundleNamePrefix
+    ? bundleNamePrefix + bundleName
+    : bundleName;
+  const bundleURL = `${basePath}${bundleName}.css`;
+
+  return attachStyleSheet === undefined
     ? ({
-        name: bundleName,
-        url: `${basePath}${bundleName}.css`
+        name: bundleNameWithPrefix,
+        url: bundleURL
       } as const satisfies ThemeItemModel)
     : ({
-        name: bundleName,
-        url: `${basePath}${bundleName}.css`,
+        name: bundleNameWithPrefix,
+        url: bundleURL,
         attachStyleSheet
       } as const satisfies ThemeItemModel);
+};
 
 /**
  * Given the basePath, returns all bundles (except base and icons) in the
@@ -49,50 +56,65 @@ const getThemeModelItem = <T extends BundleNames>(
  *   </body>
  * ```
  */
-export const getThemeBundles = (basePath: string) =>
+export const getThemeBundles = (basePath: string, bundleNamePrefix?: string) =>
   [
     // Components
-    getThemeModelItem(basePath, "components/accordion"),
-    getThemeModelItem(basePath, "components/button"),
-    getThemeModelItem(basePath, "components/chat"),
-    getThemeModelItem(basePath, "components/checkbox"),
-    getThemeModelItem(basePath, "components/code"),
-    getThemeModelItem(basePath, "components/combo-box"),
-    getThemeModelItem(basePath, "components/flexible-layout"),
-    getThemeModelItem(basePath, "components/dialog"),
-    getThemeModelItem(basePath, "components/dropdown"),
-    getThemeModelItem(basePath, "components/icon"),
-    getThemeModelItem(basePath, "components/edit"),
-    getThemeModelItem(basePath, "components/layout-splitter"),
-    getThemeModelItem(basePath, "components/list-box"),
-    getThemeModelItem(basePath, "components/markdown-viewer", false),
-    getThemeModelItem(basePath, "components/navigation-list"),
-    getThemeModelItem(basePath, "components/pills"),
-    getThemeModelItem(basePath, "components/radio-group"),
-    getThemeModelItem(basePath, "components/segmented-control"),
-    getThemeModelItem(basePath, "components/sidebar"),
-    getThemeModelItem(basePath, "components/slider"),
-    getThemeModelItem(basePath, "components/tab"),
-    getThemeModelItem(basePath, "components/tabular-grid"),
-    getThemeModelItem(basePath, "components/ticket-list"),
-    getThemeModelItem(basePath, "components/switch"),
-    getThemeModelItem(basePath, "components/tooltip"),
-    getThemeModelItem(basePath, "components/tree-view"),
-    getThemeModelItem(basePath, "components/widget"),
+    getThemeModelItem(basePath, "components/accordion", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/button", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/chat", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/checkbox", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/code", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/combo-box", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/flexible-layout", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/dialog", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/dropdown", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/icon", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/edit", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/layout-splitter", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/list-box", bundleNamePrefix),
+    getThemeModelItem(
+      basePath,
+      "components/markdown-viewer",
+      bundleNamePrefix,
+      false
+    ),
+    getThemeModelItem(basePath, "components/navigation-list", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/pills", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/radio-group", bundleNamePrefix),
+    getThemeModelItem(
+      basePath,
+      "components/segmented-control",
+      bundleNamePrefix
+    ),
+    getThemeModelItem(basePath, "components/sidebar", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/slider", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/switch", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/tab", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/tabular-grid", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/ticket-list", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/tooltip", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/tree-view", bundleNamePrefix),
+    getThemeModelItem(basePath, "components/widget", bundleNamePrefix),
 
     // Resets
-    getThemeModelItem(basePath, "resets/box-sizing"),
+    getThemeModelItem(basePath, "resets/box-sizing", bundleNamePrefix),
 
     // Utils
-    getThemeModelItem(basePath, "utils/form"),
-    getThemeModelItem(basePath, "utils/elevation"),
-    getThemeModelItem(basePath, "utils/form--full"),
-    getThemeModelItem(basePath, "utils/layout"),
-    getThemeModelItem(basePath, "utils/spacing"),
-    getThemeModelItem(basePath, "utils/typography"),
-    getThemeModelItem(basePath, "chameleon/scrollbar")
+    getThemeModelItem(basePath, "utils/form", bundleNamePrefix),
+    getThemeModelItem(basePath, "utils/elevation", bundleNamePrefix),
+    getThemeModelItem(basePath, "utils/form--full", bundleNamePrefix),
+    getThemeModelItem(basePath, "utils/layout", bundleNamePrefix),
+    getThemeModelItem(basePath, "utils/spacing", bundleNamePrefix),
+    getThemeModelItem(basePath, "utils/typography", bundleNamePrefix),
+    getThemeModelItem(basePath, "chameleon/scrollbar", bundleNamePrefix)
   ] as const satisfies ThemeModel;
 
+const addPrefixToBundleNames = (
+  bundles: MercuryBundleOptimized[] | MercuryBundleFull[],
+  bundleNamePrefix?: string
+) =>
+  bundleNamePrefix ? bundles.map(bundle => bundleNamePrefix + bundle) : bundles;
+
 /**
  * Given the bundles array and the basePath (optional), returns the given
  * bundles in the format of type `ThemeModel`.
@@ -111,7 +133,8 @@ export const getThemeBundles = (basePath: string) =>
  *     "utils/form",
  *     "utils/layout",
  *   ],
- *   "./assets/css/"
+ *   "./assets/css/", (optional)
+ *   "mercury" (optional)
  * );
  *
  * HTML/render/template:
@@ -123,8 +146,11 @@ export const getThemeBundles = (basePath: string) =>
  */
 export const getBundles = (
   bundles: MercuryBundleOptimized[] | MercuryBundleFull[],
-  basePath?: string
+  basePath?: string,
+  bundleNamePrefix?: string
 ): ThemeModel =>
   basePath
-    ? bundles.map(bundle => getThemeModelItem(basePath, bundle))
-    : bundles;
+    ? bundles.map(bundle =>
+        getThemeModelItem(basePath, bundle, bundleNamePrefix)
+      )
+    : addPrefixToBundleNames(bundles, bundleNamePrefix);

packages/mercury/src/components/code/_tokens.scss

@@ -9,6 +9,8 @@
   --code__border: var(--mer-border__width--sm) solid
     var(--mer-surface__elevation--03);
   --code__border-radius: var(--mer-border__radius--sm);
+
+  // TODO: Fix this. It MUST be two separated properties (padding-block and padding-inline)
   --code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
 
   --ch-code__doctag: var(--code__color-blue);

packages/showcase/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

packages/showcase/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

packages/showcase/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false
+}

packages/showcase/README.md

@@ -0,0 +1,27 @@
+# Showcase
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.11.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.