@ovh-ux/muk 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1](https://github.com/ovh/manager/compare/@ovh-ux/muk@0.1.0...@ovh-ux/muk@0.1.1) (2025-10-23)
+
+**Note:** Version bump only for package @ovh-ux/muk
+
 # [0.1.0](https://github.com/ovh/manager/compare/@ovh-ux/muk@0.0.1...@ovh-ux/muk@0.1.0) (2025-10-23)
 
 ### Bug Fixes

package/README.md

@@ -1,26 +1,61 @@
-# ⚛️⚡ Manager Components Library
+# ⚛️⚡ Manager UI Kit Library
+
+Design-system library for OVHcloud Manager µ-apps.
 
 ## Features
 
-Hosts the components used in manager
-Keep it as simple as possible
+- **Unified Entry Point for Manager Development:** Access all Manager components, hooks, and utilities from a single, streamlined library — eliminating dependency clutter, simplifying imports, and accelerating development with one consistent source of truth.
+- **Built on OVHcloud Design System v19:** Harnesses the power and consistency of OVHcloud’s latest design principles — ensuring visual harmony, modern aesthetics, and a unified user experience across all Manager applications. Elimination of shadow DOM for simplified tests.
+- **Absorb Breaking Changes from ODS:** As MUK exposes wrappers for every ODS components, in future MUK can absorb the pressure of ODS braking change to reduce the impact on µ-apps
+- **Exclusive Manager Components:** Includes purpose-built Manager-only components such as Datagrid, layouts, Modals, Tags Management and more — crafted specifically to meet complex product needs and streamline development across Manager platforms.
+- **Accessibility by Design:** Every component is crafted with WCAG-compliant accessibility in mind, ensuring inclusivity and usability for all users right out of the box.
+- **Optimized for Performance:** Engineered for scalability and speed — with Datagrid virtualization that efficiently handles massive data sets while keeping interfaces lightning fast.
+- **Tree-Shakeable Architecture:** Designed with modular exports that support tree-shaking, ensuring your applications load only what they need — reducing bundle size, improving load times, and boosting overall performance.
+- **Developer-Friendly Documentation:** Explore an interactive documentation hub on Manager-Wiki, featuring live examples, ready-to-use code snippets, and detailed guidelines to speed up adoption and integration.
+
+## Usage
+
+To use the Manager UI Kit in your project,
+
+1.  Add a dependency in your app,
+
+```
+yarn add @ovhcloud/muk
+```
+
+2.  Import CSS in your app,
+
+```
+ import '@ovh-ux/muk/dist/style.css';
+```
+
+**Note:** This requirement is temporary and will no longer be needed with future releases.
+
+3. Import components in your tsx file and use it as per your needs,
+
+```tsx
+import { Badge, BADGE_COLOR, BADGE_SIZE } from '@ovh-ux/muk';
 
-## Add new component
+return (
+  <Badge color={BADGE_COLOR.information} size={BADGE_SIZE.md}>
+    Active
+  </Badge>
+);
+```
 
-1. Create a new components folder in `src/components`
-2. Add your `stories.tsx` file
-3. Add your e2e test
+## Contributing
 
-## Import component to another project
+For development guidelines, refer our [documentation](https://ovh.github.io/manager/storybook-static/index.html?path=/docs/manager-ui-kit-guidelines-new-component--technical-information).
 
-The component is not builded so you can import directly the component named `Card` from the workspace like this :
-`import Card from '@ovh-ux/manager-react-components'`
+Request new component [here](https://github.com/ovh/manager/issues/new?template=manager_components_feature_request.yml).
+Report a bug [here](https://github.com/ovh/manager/issues/new?template=manager_components_bug_report.yml).
 
-## Main Scripts
+## Useful Commands
 
-Always prepending yarn:
+Run the commands using `yarn` package manager,
 
-- `start`: Run the storybook
-- `test:e2e`: Run e2e test using playwright
-- `test`: Runs testing using coverage
-- `test:watch`: Runs test using watch mode
+- `build`: Generates the production build of the package.
+- `test`: Run all tests to validate code functionality and quality.
+- `test:ci`: Runs the test suite and reports code coverage metrics.
+- `lint:modern`: Check code for linting errors and enforce coding standards.
+- `lint:modern:fix`: Runs the `lint:modern` with fix option to automatically fix the reported issues

package/dist/{TagsModal.component-wlV7ClY7.mjs → TagsModal.component-BIbbIBAv.mjs}

@@ -1,4 +1,4 @@
-import { j as a, M as k, T as b } from "./lib-Bpiw0_2K.mjs";
+import { j as a, M as k, T as b } from "./lib-CWaID5dp.mjs";
 import { forwardRef as f, useState as l, useCallback as R } from "react";
 import { useTranslation as x } from "react-i18next";
 import { MODAL_COLOR as T, Input as j, Button as E, BUTTON_VARIANT as S, BUTTON_SIZE as B } from "@ovhcloud/ods-react";

package/dist/{lib-Bpiw0_2K.mjs → lib-CWaID5dp.mjs}

@@ -3989,29 +3989,30 @@ function lg({
     isLoading: o
   };
 }
-const ce = "@ovh-ux/manager-common-translations", ir = {
-  BYTES: `${ce}/bytes`,
-  CLIPBOARD: `${ce}/clipboard`,
-  ACTIONS: `${ce}/actions`,
-  FORM: `${ce}/form`,
-  IAM: `${ce}/iam`,
-  SERVICE: `${ce}/service`,
-  BILLING: `${ce}/billing`,
-  ERROR: `${ce}/error`,
-  STATUS: `${ce}/status`,
-  DATACENTER: `${ce}/datacenter`,
-  REGION: `${ce}/region`,
-  DASHBOARD: `${ce}/dashboard`,
-  ONBOARDING: `${ce}/onboarding`,
-  ORDER: `${ce}/order`,
-  CONTACT: `${ce}/contact`,
-  COUNTRIES: `${ce}/countries`,
-  COUNTRY: `${ce}/country`,
-  LANGUAGE: `${ce}/language`,
-  UPLOAD: `${ce}/upload`,
-  RESOURCES: `${ce}/resources`,
-  SYSTEM: `${ce}/system`,
-  TIME: `${ce}/time`
+const ue = "@ovh-ux/manager-common-translations", ir = {
+  BYTES: `${ue}/bytes`,
+  CLIPBOARD: `${ue}/clipboard`,
+  ACTIONS: `${ue}/actions`,
+  FORM: `${ue}/form`,
+  IAM: `${ue}/iam`,
+  SERVICE: `${ue}/service`,
+  BILLING: `${ue}/billing`,
+  ERROR: `${ue}/error`,
+  STATUS: `${ue}/status`,
+  DATACENTER: `${ue}/datacenter`,
+  REGION: `${ue}/region`,
+  DASHBOARD: `${ue}/dashboard`,
+  ONBOARDING: `${ue}/onboarding`,
+  ORDER: `${ue}/order`,
+  CONTACT: `${ue}/contact`,
+  COUNTRIES: `${ue}/countries`,
+  COUNTRY: `${ue}/country`,
+  LANGUAGE: `${ue}/language`,
+  UPLOAD: `${ue}/upload`,
+  RESOURCES: `${ue}/resources`,
+  SYSTEM: `${ue}/system`,
+  TIME: `${ue}/time`,
+  NAVIGATION: `${ue}/navigation`
 }, ug = {
   1e3: ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
   1024: ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
@@ -6129,8 +6130,8 @@ function fm() {
     }(), $e = Dt && Dt.isTypedArray;
     function Ct(d, v) {
       for (var y = -1, D = d == null ? 0 : d.length, re = 0, L = []; ++y < D; ) {
-        var ue = d[y];
-        v(ue, y, d) && (L[re++] = ue);
+        var ce = d[y];
+        v(ce, y, d) && (L[re++] = ce);
       }
       return L;
     }
@@ -6314,9 +6315,9 @@ function fm() {
     }
     gt.prototype.clear = lr, gt.prototype.delete = ji, gt.prototype.get = Ei, gt.prototype.has = Ti, gt.prototype.set = Ri;
     function Mi(d, v) {
-      var y = dr(d), D = !y && Xi(d), re = !y && !D && Lr(d), L = !y && !D && !re && Fa(d), ue = y || D || re || L, xe = ue ? zt(d.length, String) : [], Ce = xe.length;
+      var y = dr(d), D = !y && Xi(d), re = !y && !D && Lr(d), L = !y && !D && !re && Fa(d), ce = y || D || re || L, xe = ce ? zt(d.length, String) : [], Ce = xe.length;
       for (var le in d)
-        ye.call(d, le) && !(ue && // Safari 9 has enumerable `arguments.length` in strict mode.
+        ye.call(d, le) && !(ce && // Safari 9 has enumerable `arguments.length` in strict mode.
         (le == "length" || // Node.js 0.10 has enumerable non-index properties on buffers.
         re && (le == "offset" || le == "parent") || // PhantomJS 2 has enumerable non-index properties on typed arrays.
         L && (le == "buffer" || le == "byteLength" || le == "byteOffset") || // Skip index properties.
@@ -6343,16 +6344,16 @@ function fm() {
       return d === v ? !0 : d == null || v == null || !Ln(d) && !Ln(v) ? d !== d && v !== v : zi(d, v, y, D, Da, re);
     }
     function zi(d, v, y, D, re, L) {
-      var ue = dr(d), xe = dr(v), Ce = ue ? u : Ut(d), le = xe ? u : Ut(v);
+      var ce = dr(d), xe = dr(v), Ce = ce ? u : Ut(d), le = xe ? u : Ut(v);
       Ce = Ce == l ? S : Ce, le = le == l ? S : le;
       var Ze = Ce == S, mt = le == S, je = Ce == le;
       if (je && Lr(d)) {
         if (!Lr(v))
           return !1;
-        ue = !0, Ze = !1;
+        ce = !0, Ze = !1;
       }
       if (je && !Ze)
-        return L || (L = new gt()), ue || Fa(d) ? za(d, v, y, D, re, L) : ki(d, v, Ce, y, D, re, L);
+        return L || (L = new gt()), ce || Fa(d) ? za(d, v, y, D, re, L) : ki(d, v, Ce, y, D, re, L);
       if (!(y & a)) {
         var tt = Ze && ye.call(d, "__wrapped__"), nt = mt && ye.call(v, "__wrapped__");
         if (tt || nt) {
@@ -6380,8 +6381,8 @@ function fm() {
       return v;
     }
     function za(d, v, y, D, re, L) {
-      var ue = y & a, xe = d.length, Ce = v.length;
-      if (xe != Ce && !(ue && Ce > xe))
+      var ce = y & a, xe = d.length, Ce = v.length;
+      if (xe != Ce && !(ce && Ce > xe))
         return !1;
       var le = L.get(d);
       if (le && L.get(v))
@@ -6390,7 +6391,7 @@ function fm() {
       for (L.set(d, v), L.set(v, d); ++Ze < xe; ) {
         var tt = d[Ze], nt = v[Ze];
         if (D)
-          var qt = ue ? D(nt, tt, Ze, v, d, L) : D(tt, nt, Ze, d, v, L);
+          var qt = ce ? D(nt, tt, Ze, v, d, L) : D(tt, nt, Ze, d, v, L);
         if (qt !== void 0) {
           if (qt)
             continue;
@@ -6412,7 +6413,7 @@ function fm() {
       }
       return L.delete(d), L.delete(v), mt;
     }
-    function ki(d, v, y, D, re, L, ue) {
+    function ki(d, v, y, D, re, L, ce) {
       switch (y) {
         case ze:
           if (d.byteLength != v.byteLength || d.byteOffset != v.byteOffset)
@@ -6435,12 +6436,12 @@ function fm() {
           var Ce = D & a;
           if (xe || (xe = Ot), d.size != v.size && !Ce)
             return !1;
-          var le = ue.get(d);
+          var le = ce.get(d);
           if (le)
             return le == v;
-          D |= o, ue.set(d, v);
-          var Ze = za(xe(d), xe(v), D, re, L, ue);
-          return ue.delete(d), Ze;
+          D |= o, ce.set(d, v);
+          var Ze = za(xe(d), xe(v), D, re, L, ce);
+          return ce.delete(d), Ze;
         case Ae:
           if (Jt)
             return Jt.call(d) == Jt.call(v);
@@ -6448,12 +6449,12 @@ function fm() {
       return !1;
     }
     function Hi(d, v, y, D, re, L) {
-      var ue = y & a, xe = Oa(d), Ce = xe.length, le = Oa(v), Ze = le.length;
-      if (Ce != Ze && !ue)
+      var ce = y & a, xe = Oa(d), Ce = xe.length, le = Oa(v), Ze = le.length;
+      if (Ce != Ze && !ce)
         return !1;
       for (var mt = Ce; mt--; ) {
         var je = xe[mt];
-        if (!(ue ? je in v : ye.call(v, je)))
+        if (!(ce ? je in v : ye.call(v, je)))
           return !1;
       }
       var tt = L.get(d);
@@ -6461,11 +6462,11 @@ function fm() {
         return tt == v;
       var nt = !0;
       L.set(d, v), L.set(v, d);
-      for (var qt = ue; ++mt < Ce; ) {
+      for (var qt = ce; ++mt < Ce; ) {
         je = xe[mt];
         var kt = d[je], wn = v[je];
         if (D)
-          var Ba = ue ? D(wn, kt, je, v, d, L) : D(kt, wn, je, d, v, L);
+          var Ba = ce ? D(wn, kt, je, v, d, L) : D(kt, wn, je, d, v, L);
         if (!(Ba === void 0 ? kt === wn || re(kt, wn, y, D, L) : Ba)) {
           nt = !1;
           break;
@@ -7868,7 +7869,7 @@ const mi = qi(
       }
     )
   ] }) : null;
-}, ih = Ki(() => import("./TagsModal.component-wlV7ClY7.mjs")), sh = ({
+}, ih = Ki(() => import("./TagsModal.component-BIbbIBAv.mjs")), sh = ({
   tags: e,
   displayInternalTags: n = !1,
   maxLines: t,

package/dist/manager-ui-kit-lib.es.ts

@@ -1,4 +1,4 @@
-import { ab as e, ac as o, ad as r, ae as t, A as i, w as n, Y as E, x as T, B as l, O as C, a9 as S, $ as I, af as u, ag as c, ah as _, ai as O, C as N, aa as R, aj as d, ak as P, al as A, b4 as p, D as g, a8 as m, am as b, an as M, ao as L, a4 as U, G as h, a1 as F, a2 as B, ap as D, aq as y, ar as k, J as G, K as H, as as x, at as V, au as v, av as w, a5 as Y, H as Z, b6 as f, L as z, a0 as K, F as W, aw as Q, ax as J, ay as q, M as X, N as $, b5 as j, a6 as aa, a7 as sa, W as ea, b3 as oa, az as ra, aA as ta, aB as ia, aC as na, aD as Ea, aE as Ta, P as la, aF as Ca, aG as Sa, aH as Ia, aI as ua, aJ as ca, aL as _a, aM as Oa, aK as Na, aN as Ra, R as da, aO as Pa, aP as Aa, aQ as pa, U as ga, S as ma, aR as ba, aS as Ma, y as La, Z as Ua, _ as ha, Q as Fa, V as Ba, E as Da, z as ya, aT as ka, aU as Ga, aV as Ha, aW as xa, aX as Va, aY as va, aZ as wa, a_ as Ya, a$ as Za, b0 as fa, b1 as za, b2 as Ka, a3 as Wa, d as Qa, k as Ja, g as qa, i as Xa, v as $a, b7 as ja, t as as, c as ss, p as es, l as os, h as rs, u as ts, n as is, b as ns, q as Es, r as Ts, o as ls, e as Cs, f as Ss, m as Is, a as us, I as cs, X as _s, s as Os } from "./lib-Bpiw0_2K.mjs";
+import { ab as e, ac as o, ad as r, ae as t, A as i, w as n, Y as E, x as T, B as l, O as C, a9 as S, $ as I, af as u, ag as c, ah as _, ai as O, C as N, aa as R, aj as d, ak as P, al as A, b4 as p, D as g, a8 as m, am as b, an as M, ao as L, a4 as U, G as h, a1 as F, a2 as B, ap as D, aq as y, ar as k, J as G, K as H, as as x, at as V, au as v, av as w, a5 as Y, H as Z, b6 as f, L as z, a0 as K, F as W, aw as Q, ax as J, ay as q, M as X, N as $, b5 as j, a6 as aa, a7 as sa, W as ea, b3 as oa, az as ra, aA as ta, aB as ia, aC as na, aD as Ea, aE as Ta, P as la, aF as Ca, aG as Sa, aH as Ia, aI as ua, aJ as ca, aL as _a, aM as Oa, aK as Na, aN as Ra, R as da, aO as Pa, aP as Aa, aQ as pa, U as ga, S as ma, aR as ba, aS as Ma, y as La, Z as Ua, _ as ha, Q as Fa, V as Ba, E as Da, z as ya, aT as ka, aU as Ga, aV as Ha, aW as xa, aX as Va, aY as va, aZ as wa, a_ as Ya, a$ as Za, b0 as fa, b1 as za, b2 as Ka, a3 as Wa, d as Qa, k as Ja, g as qa, i as Xa, v as $a, b7 as ja, t as as, c as ss, p as es, l as os, h as rs, u as ts, n as is, b as ns, q as Es, r as Ts, o as ls, e as Cs, f as Ss, m as Is, a as us, I as cs, X as _s, s as Os } from "./lib-CWaID5dp.mjs";
 import { DATEPICKER_DAY as Rs, DATEPICKER_DAYS as ds, DATEPICKER_VIEW as Ps, DATEPICKER_VIEWS as As, FILE_REJECTION_CAUSE as ps, FILE_REJECTION_CAUSES as gs, FILE_UPLOAD_I18N as ms, MESSAGE_COLOR as bs, MESSAGE_COLORS as Ms, MESSAGE_I18N as Ls, MESSAGE_VARIANT as Us, MESSAGE_VARIANTS as hs, PHONE_NUMBER_COUNTRIES_PRESET as Fs, PHONE_NUMBER_COUNTRIES_PRESETS as Bs, PHONE_NUMBER_COUNTRY_ISO_CODE as Ds, PHONE_NUMBER_COUNTRY_ISO_CODES as ys, PHONE_NUMBER_I18N as ks, PHONE_NUMBER_PARSING_ERROR as Gs, PHONE_NUMBER_PARSING_ERRORS as Hs, POPOVER_POSITION as xs, POPOVER_POSITIONS as Vs, SWITCH_SIZE as vs, SWITCH_SIZES as ws, TIMEPICKER_I18N as Ys, TIMEZONE as Zs, TIMEZONES as fs, TIMEZONES_PRESET as zs, TIMEZONES_PRESETS as Ks, TOOLTIP_POSITION as Ws, TOOLTIP_POSITIONS as Qs, useFormField as Js } from "@ovhcloud/ods-react";
 export {
   e as Accordion,