Skip to content

Commit 4cbe421

Browse files
ncameraNicolás Cámera
ncamera
and
Nicolás Cámera
authored
[mercury][unanimo] Add a new showcase for Mercury and Unanimo. Improve assets manager implementation for the DS (#431)
* Add showcase package A package to implement the showcase for Mercury and Unanimo design systems * Improve showcase implementation * Improve showcase implementation * Improve showcase implementation * Add radio group page * Add support to choose the DS and color scheme * Refactor navigation to update navigation-list links * Add "elevation" page * Add "icons" page * Add search in the icons page * Improve style * Improve customization and refactor some code to extract logic into services * Add Chameleon Compatibility page and refactor some services * Update templates, routes and package-lock * Update compatibility tables * [unanimo] Rename "switch" class to "toggle" * Add missing commit * Add dropdown, navigation-list, segmented-control and slider bundles * [mercury] Add support to customize the theme names of the bundles with a prefix * [unanimo] Add support for loading bundles the same way Mercury does * Update package-lock.json * Fix breaking changes and improve CSS loading performance * Bump versions and use local DSs * [mercury] Export MERCURY_ASSETS entry * Create package-lock.json * Add support to conditional render categories * Add support for displaying templates of different frameworks * Add "Introduction" routes and add some fixes * "Getting started" routes, first bits * Reduce flickering when navigating in the app * Simplify development by declaring the metadata for each page * Create netlify.toml * Reduce the flickering even more * Simplify template definition * Add showcase for the combo-box * Add showcase for the slider * Add showcase for the search component * Improve examples * Start adding "label" showcase and fix some issues with icons * Use onPush change detection * Add logos and improve styles * Simplify routing * Add showcase for typographies * Improve showcase for typograpies * Improve styles * Improve code templates and start adding "Gemini migration" showcase * Improve examples * Improve code templates and add more cases for the "Gemini migration" showcase * Improve showcase * Add more cases for the "label" showcase * Fix change detection bugs * Add showcase for the icon components and minor improvements * Improve examples * Improve examples * Add showcase for the dialog component and minor fixes * Revert change for renaming "switch" to "toggle" --------- Co-authored-by: Nicolás Cámera <nicolas.camera@globant.com>
1 parent 8c9d7e5 commit 4cbe421

File tree

123 files changed

+30351
-113
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+30351
-113
lines changed

‎packages/mercury/package-lock.json‎

Lines changed: 5372 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mercury/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@
1616
"default": "./dist/index.js"
1717
}
1818
},
19+
"./MERCURY_ASSETS.js": {
20+
"import": {
21+
"types": "./dist/assets/MERCURY_ASSETS.d.ts",
22+
"default": "./dist/assets/MERCURY_ASSETS.js"
23+
}
24+
},
1925
"./assets-manager.js": {
2026
"import": {
2127
"types": "./dist/assets-manager.d.ts",

‎packages/mercury/src/bundles.ts‎

Lines changed: 73 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,28 @@ type BundleNames =
1717
| MercuryBundleUtil
1818
| MercuryBundleUtilFormFull;
1919

20-
const getThemeModelItem = <T extends BundleNames>(
20+
const getThemeModelItem = <T extends BundleNames, S extends string>(
2121
basePath: string,
2222
bundleName: T,
23+
bundleNamePrefix: S | undefined,
2324
attachStyleSheet: boolean | undefined = undefined
24-
) =>
25-
attachStyleSheet === undefined
25+
) => {
26+
const bundleNameWithPrefix = bundleNamePrefix
27+
? bundleNamePrefix + bundleName
28+
: bundleName;
29+
const bundleURL = `${basePath}${bundleName}.css`;
30+
31+
return attachStyleSheet === undefined
2632
? ({
27-
name: bundleName,
28-
url: `${basePath}${bundleName}.css`
33+
name: bundleNameWithPrefix,
34+
url: bundleURL
2935
} as const satisfies ThemeItemModel)
3036
: ({
31-
name: bundleName,
32-
url: `${basePath}${bundleName}.css`,
37+
name: bundleNameWithPrefix,
38+
url: bundleURL,
3339
attachStyleSheet
3440
} as const satisfies ThemeItemModel);
41+
};
3542

3643
/**
3744
* Given the basePath, returns all bundles (except base and icons) in the
@@ -49,50 +56,65 @@ const getThemeModelItem = <T extends BundleNames>(
4956
* </body>
5057
* ```
5158
*/
52-
export const getThemeBundles = (basePath: string) =>
59+
export const getThemeBundles = (basePath: string, bundleNamePrefix?: string) =>
5360
[
5461
// Components
55-
getThemeModelItem(basePath, "components/accordion"),
56-
getThemeModelItem(basePath, "components/button"),
57-
getThemeModelItem(basePath, "components/chat"),
58-
getThemeModelItem(basePath, "components/checkbox"),
59-
getThemeModelItem(basePath, "components/code"),
60-
getThemeModelItem(basePath, "components/combo-box"),
61-
getThemeModelItem(basePath, "components/flexible-layout"),
62-
getThemeModelItem(basePath, "components/dialog"),
63-
getThemeModelItem(basePath, "components/dropdown"),
64-
getThemeModelItem(basePath, "components/icon"),
65-
getThemeModelItem(basePath, "components/edit"),
66-
getThemeModelItem(basePath, "components/layout-splitter"),
67-
getThemeModelItem(basePath, "components/list-box"),
68-
getThemeModelItem(basePath, "components/markdown-viewer", false),
69-
getThemeModelItem(basePath, "components/navigation-list"),
70-
getThemeModelItem(basePath, "components/pills"),
71-
getThemeModelItem(basePath, "components/radio-group"),
72-
getThemeModelItem(basePath, "components/segmented-control"),
73-
getThemeModelItem(basePath, "components/sidebar"),
74-
getThemeModelItem(basePath, "components/slider"),
75-
getThemeModelItem(basePath, "components/tab"),
76-
getThemeModelItem(basePath, "components/tabular-grid"),
77-
getThemeModelItem(basePath, "components/ticket-list"),
78-
getThemeModelItem(basePath, "components/switch"),
79-
getThemeModelItem(basePath, "components/tooltip"),
80-
getThemeModelItem(basePath, "components/tree-view"),
81-
getThemeModelItem(basePath, "components/widget"),
62+
getThemeModelItem(basePath, "components/accordion", bundleNamePrefix),
63+
getThemeModelItem(basePath, "components/button", bundleNamePrefix),
64+
getThemeModelItem(basePath, "components/chat", bundleNamePrefix),
65+
getThemeModelItem(basePath, "components/checkbox", bundleNamePrefix),
66+
getThemeModelItem(basePath, "components/code", bundleNamePrefix),
67+
getThemeModelItem(basePath, "components/combo-box", bundleNamePrefix),
68+
getThemeModelItem(basePath, "components/flexible-layout", bundleNamePrefix),
69+
getThemeModelItem(basePath, "components/dialog", bundleNamePrefix),
70+
getThemeModelItem(basePath, "components/dropdown", bundleNamePrefix),
71+
getThemeModelItem(basePath, "components/icon", bundleNamePrefix),
72+
getThemeModelItem(basePath, "components/edit", bundleNamePrefix),
73+
getThemeModelItem(basePath, "components/layout-splitter", bundleNamePrefix),
74+
getThemeModelItem(basePath, "components/list-box", bundleNamePrefix),
75+
getThemeModelItem(
76+
basePath,
77+
"components/markdown-viewer",
78+
bundleNamePrefix,
79+
false
80+
),
81+
getThemeModelItem(basePath, "components/navigation-list", bundleNamePrefix),
82+
getThemeModelItem(basePath, "components/pills", bundleNamePrefix),
83+
getThemeModelItem(basePath, "components/radio-group", bundleNamePrefix),
84+
getThemeModelItem(
85+
basePath,
86+
"components/segmented-control",
87+
bundleNamePrefix
88+
),
89+
getThemeModelItem(basePath, "components/sidebar", bundleNamePrefix),
90+
getThemeModelItem(basePath, "components/slider", bundleNamePrefix),
91+
getThemeModelItem(basePath, "components/switch", bundleNamePrefix),
92+
getThemeModelItem(basePath, "components/tab", bundleNamePrefix),
93+
getThemeModelItem(basePath, "components/tabular-grid", bundleNamePrefix),
94+
getThemeModelItem(basePath, "components/ticket-list", bundleNamePrefix),
95+
getThemeModelItem(basePath, "components/tooltip", bundleNamePrefix),
96+
getThemeModelItem(basePath, "components/tree-view", bundleNamePrefix),
97+
getThemeModelItem(basePath, "components/widget", bundleNamePrefix),
8298

8399
// Resets
84-
getThemeModelItem(basePath, "resets/box-sizing"),
100+
getThemeModelItem(basePath, "resets/box-sizing", bundleNamePrefix),
85101

86102
// Utils
87-
getThemeModelItem(basePath, "utils/form"),
88-
getThemeModelItem(basePath, "utils/elevation"),
89-
getThemeModelItem(basePath, "utils/form--full"),
90-
getThemeModelItem(basePath, "utils/layout"),
91-
getThemeModelItem(basePath, "utils/spacing"),
92-
getThemeModelItem(basePath, "utils/typography"),
93-
getThemeModelItem(basePath, "chameleon/scrollbar")
103+
getThemeModelItem(basePath, "utils/form", bundleNamePrefix),
104+
getThemeModelItem(basePath, "utils/elevation", bundleNamePrefix),
105+
getThemeModelItem(basePath, "utils/form--full", bundleNamePrefix),
106+
getThemeModelItem(basePath, "utils/layout", bundleNamePrefix),
107+
getThemeModelItem(basePath, "utils/spacing", bundleNamePrefix),
108+
getThemeModelItem(basePath, "utils/typography", bundleNamePrefix),
109+
getThemeModelItem(basePath, "chameleon/scrollbar", bundleNamePrefix)
94110
] as const satisfies ThemeModel;
95111

112+
const addPrefixToBundleNames = (
113+
bundles: MercuryBundleOptimized[] | MercuryBundleFull[],
114+
bundleNamePrefix?: string
115+
) =>
116+
bundleNamePrefix ? bundles.map(bundle => bundleNamePrefix + bundle) : bundles;
117+
96118
/**
97119
* Given the bundles array and the basePath (optional), returns the given
98120
* bundles in the format of type `ThemeModel`.
@@ -111,7 +133,8 @@ export const getThemeBundles = (basePath: string) =>
111133
* "utils/form",
112134
* "utils/layout",
113135
* ],
114-
* "./assets/css/"
136+
* "./assets/css/", (optional)
137+
* "mercury" (optional)
115138
* );
116139
*
117140
* HTML/render/template:
@@ -123,8 +146,11 @@ export const getThemeBundles = (basePath: string) =>
123146
*/
124147
export const getBundles = (
125148
bundles: MercuryBundleOptimized[] | MercuryBundleFull[],
126-
basePath?: string
149+
basePath?: string,
150+
bundleNamePrefix?: string
127151
): ThemeModel =>
128152
basePath
129-
? bundles.map(bundle => getThemeModelItem(basePath, bundle))
130-
: bundles;
153+
? bundles.map(bundle =>
154+
getThemeModelItem(basePath, bundle, bundleNamePrefix)
155+
)
156+
: addPrefixToBundleNames(bundles, bundleNamePrefix);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
--code__border: var(--mer-border__width--sm) solid
1010
var(--mer-surface__elevation--03);
1111
--code__border-radius: var(--mer-border__radius--sm);
12+
13+
// TODO: Fix this. It MUST be two separated properties (padding-block and padding-inline)
1214
--code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
1315

1416
--ch-code__doctag: var(--code__color-blue);

‎packages/showcase/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
ij_typescript_use_double_quotes = false
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎packages/showcase/.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎packages/showcase/.prettierrc.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSpacing": true,
4+
"jsxBracketSameLine": false,
5+
"jsxSingleQuote": false,
6+
"quoteProps": "as-needed",
7+
"printWidth": 80,
8+
"semi": true,
9+
"singleQuote": false,
10+
"tabWidth": 2,
11+
"trailingComma": "none",
12+
"useTabs": false
13+
}

‎packages/showcase/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Showcase
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.11.
4+
5+
## Development server
6+
7+
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.
8+
9+
## Code scaffolding
10+
11+
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`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
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.
24+
25+
## Further help
26+
27+
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.

0 commit comments

Comments
 (0)