[FEAT] Update MLrun UI React 18 to 19

.storybook/main.js → .storybook/main.mjs

@@ -14,19 +14,17 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-module.exports = {
-  babel: async (options) => {
-    options.plugins.push('babel-plugin-inline-react-svg')
-    return options
+
+const config = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
   },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
-  ],
-  framework: '@storybook/react',
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   core: {
-    builder: 'webpack5'
+    builder: '@storybook/builder-vite'
   }
 }
+
+export default config

.stylelintrc.json

@@ -0,0 +1,41 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss", "stylelint-config-rational-order"],
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "selector-no-vendor-prefix": null,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/at-rule-no-unknown": true,
+    "media-feature-range-notation": null,
+    "property-no-vendor-prefix": null,
+    "selector-class-pattern": [
+      "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))*(?:_(?:[a-z0-9]+(?:-[a-z0-9]+)*)(?:_[a-z0-9]+(?:-[a-z0-9]+)*)?)?$",
+      {
+        "resolveNestedSelectors": true,
+        "message": "Expected kebab-case or BEM: block-name, block-name__elem-name(__sub-elem…), block-name_mod-name[_mod-val], block-name__elem-name_mod-name[_mod-val]"
+      }
+    ],
+    "scss/at-mixin-pattern": [
+      "^(?:[a-z][a-z0-9]*(?:-[a-z0-9]+)*|[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+      {
+        "message": "Expected mixin name to be kebab-case (my-mixin) or camelCase (myMixin)"
+      }
+    ],
+    "custom-property-pattern": [
+      "^(?:[a-z][a-z0-9]*(?:-[a-z0-9]+)*|[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+      {
+        "message": "Expected variable name to be kebab-case (my-variable) or camelCase (myVariable)"
+      }
+    ],
+    "scss/dollar-variable-pattern": [
+      "^(?:[a-z][a-z0-9]*(?:-[a-z0-9]+)*|[a-z][a-z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+      {
+        "message": "Expected variable name to be kebab-case (my-variable) or camelCase (myVariable)"
+      }
+    ]
+
+  }
+}

dist/components/Chip/Chip.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=Chip.d.ts.map

dist/components/Chip/Chip.mjs

@@ -0,0 +1,153 @@
+import { jsx as r, jsxs as T, Fragment as X } from "react/jsx-runtime";
+import h, { useState as Y, useCallback as Z, useEffect as z, useLayoutEffect as M } from "react";
+import e from "prop-types";
+import d from "classnames";
+import { useSelector as ee } from "react-redux";
+import { isEmpty as le } from "lodash";
+import ae from "../ChipForm/ChipForm.mjs";
+import { getChipLabelAndValue as ie } from "../../utils/chips.util.mjs";
+import { CHIP_OPTIONS as oe, CHIP as se } from "../../types.mjs";
+import re from "../../images/close.svg.mjs";
+/* empty css           */
+let t = ({
+  chip: i,
+  chipIndex: n = null,
+  chipOptions: b,
+  className: w,
+  editConfig: _ = {},
+  handleEditChip: H = () => {
+  },
+  handleIsEdit: I = () => {
+  },
+  handleRemoveChip: A = () => {
+  },
+  hiddenChips: B = !1,
+  isDeleteMode: D = !1,
+  isEditMode: o = !1,
+  onClick: O = null,
+  setChipsSizes: p = () => {
+  },
+  setEditConfig: V = () => {
+  },
+  setValidation: s = null,
+  shortChip: x = !1,
+  showChips: E,
+  textOverflowEllipsis: m = !1
+}, { chipsCellRef: G, hiddenChipsCounterRef: J }) => {
+  var P;
+  const [C, v] = Y([]), g = ee((l) => {
+    var a;
+    return (a = l.appStore) == null ? void 0 : a.frontendSpec;
+  }) ?? {}, c = h.useRef(), { chipLabel: y, chipValue: N } = ie(i), { background: R, boldValue: K, borderColor: k, density: $, font: S, borderRadius: L } = b, F = d(
+    "chip",
+    "chip__content",
+    (m || o) && "data-ellipsis",
+    x && "chip_short",
+    B && "chip_hidden",
+    $ && `chip-density_${$}`,
+    L && `chip-border_${L}`,
+    R && `chip-background_${R}`,
+    k && `chip-border_${k}`,
+    S && `chip-font_${S}`,
+    o && "editable",
+    (E || o) && "chip_visible",
+    w
+  ), Q = d(
+    "chip__label",
+    (m || o) && "data-ellipsis",
+    !le(C) && "chip__label_invalid"
+  ), U = d(
+    "chip__value",
+    (m || o) && "data-ellipsis",
+    K && "chip-value_bold"
+  ), f = Z(
+    (l) => {
+      var a;
+      if ((a = g.internal_labels) != null && a.includes(l))
+        return v([
+          { name: "internal label", label: "System-defined labels cannot be modified." }
+        ]), s && s(!1);
+      v([]), s && s(!0);
+    },
+    [g.internal_labels, s]
+  );
+  return z(() => {
+    var l, a;
+    s && f((a = (l = i.value.match(/^(?<key>|.+?):\s?(?<value>|.+?)$/)) == null ? void 0 : l.groups) == null ? void 0 : a.key);
+  }, [f, i, s]), M(() => {
+    if (c.current && p) {
+      const { marginLeft: l, marginRight: a } = getComputedStyle(c.current);
+      p((W) => {
+        var u, j, q;
+        return {
+          ...W,
+          [n]: (((q = (j = (u = c.current) == null ? void 0 : u.getBoundingClientRect) == null ? void 0 : j.call(u)) == null ? void 0 : q.width) ?? 0) + parseFloat(l) + parseFloat(a)
+        };
+      });
+    }
+  }, [n, p]), i.value.match(/^\+ [\d]+/g) ? /* @__PURE__ */ r(
+    "span",
+    {
+      className: `${F} chips_button`,
+      onClick: O,
+      ref: J,
+      children: i.value
+    }
+  ) : o && n === _.chipIndex ? /* @__PURE__ */ r(
+    ae,
+    {
+      chipOptions: b,
+      className: "input-label-key",
+      editConfig: _,
+      onChange: H,
+      ref: G,
+      setEditConfig: V,
+      value: (P = i.value.match(/^(?<key>|.+?):\s?(?<value>|.+?)$/)) == null ? void 0 : P.groups,
+      validationRules: C,
+      checkValidation: f
+    },
+    i.value
+  ) : /* @__PURE__ */ T(
+    "div",
+    {
+      className: F,
+      ref: c,
+      onClick: (l) => I(l, n),
+      children: [
+        y && /* @__PURE__ */ r("div", { className: Q, children: y }),
+        N && /* @__PURE__ */ T(X, { children: [
+          /* @__PURE__ */ r("div", { className: "chip__delimiter", children: i.delimiter ?? ":" }),
+          /* @__PURE__ */ r("div", { className: U, children: N })
+        ] }),
+        (o || D) && /* @__PURE__ */ r("button", { className: "item-icon-close", onClick: (l) => A(l, n), children: /* @__PURE__ */ r(re, {}) })
+      ]
+    }
+  );
+};
+t = h.forwardRef(t);
+t.displayName = "Chip";
+t.propTypes = {
+  chip: se.isRequired,
+  chipIndex: e.number,
+  chipOptions: oe.isRequired,
+  className: e.string,
+  editConfig: e.object,
+  handleEditChip: e.func,
+  handleIsEdit: e.func,
+  handleRemoveChip: e.func,
+  hiddenChips: e.bool,
+  isDeleteMode: e.bool,
+  isEditMode: e.bool,
+  onClick: e.func,
+  setChipsSizes: e.func,
+  setEditConfig: e.func,
+  setValidation: e.func,
+  shortChip: e.bool,
+  showChips: e.bool.isRequired,
+  textOverflowEllipsis: e.bool
+};
+const Ce = h.memo(t);
+export {
+  Ce as default
+};
+//# sourceMappingURL=Chip.mjs.map

dist/components/Chip/Chip.stories.d.ts

@@ -0,0 +1,26 @@
+declare namespace _default {
+    export let title: string;
+    export { Chip as component };
+}
+export default _default;
+export const LabelChip: any;
+export const MetricsChip: any;
+export const ParametersChip: any;
+export const GreenChip: any;
+export const DensePurpleChip: any;
+export const DenseGreyChip: any;
+export const DenseOrangeChip: any;
+export const DenseGreenChip: any;
+export const DenseAmethystChip: any;
+export const DenseJavaChip: any;
+export const DenseSorbusChip: any;
+export const LabelChipNormal: any;
+export const MetricsChipNormal: any;
+export const ParametersChipNormal: any;
+export const GreenChipNormal: any;
+export const LabelChipMedium: any;
+export const MetricsChipMedium: any;
+export const ParametersChipMedium: any;
+export const GreenChipMedium: any;
+import Chip from './Chip';
+//# sourceMappingURL=Chip.stories.d.ts.map

dist/components/ChipCell/ChipCell.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=ChipCell.d.ts.map