flipper-ui 0.34.6 → 0.34.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.6",
+    "version": "0.34.8",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -10,9 +10,6 @@
         "type": "git",
         "url": "https://github.com/nginformatica/flipper-ui.git"
     },
-    "resolutions": {
-        "wrap-ansi": "7.0.0"
-    },
     "scripts": {
         "start": "storybook dev -p 6006",
         "build": "yarn clean && yarn build:ts && yarn build:babel",
@@ -35,51 +32,50 @@
     "dependencies": {
         "@emotion/react": "11.13.3",
         "@emotion/styled": "11.13.0",
-        "@mui/icons-material": "6.0.2",
-        "@mui/material": "6.0.2",
-        "@mui/styles": "6.0.2",
-        "@mui/x-date-pickers": "7.15.0",
+        "@mui/icons-material": "6.1.6",
+        "@mui/material": "6.1.6",
+        "@mui/system": "6.1.6",
+        "@mui/x-date-pickers": "7.22.0",
         "date-fns": "2.30.0",
         "ramda": "0.30.1",
-        "react-loading-skeleton": "3.4.0",
-        "react-number-format": "5.4.1",
-        "sprintf-js": "1.1.3",
-        "uuid": "10.0.0"
+        "react-loading-skeleton": "3.5.0",
+        "react-number-format": "5.4.2"
     },
     "devDependencies": {
-        "@babel/cli": "7.25.6",
-        "@babel/core": "7.25.2",
-        "@babel/plugin-transform-runtime": "7.25.4",
-        "@babel/preset-env": "7.25.4",
-        "@babel/preset-typescript": "7.24.7",
-        "@faker-js/faker": "8.4.1",
-        "@storybook/addon-essentials": "7.6.17",
-        "@storybook/addon-styling-webpack": "1.0.0",
-        "@storybook/react": "7.6.17",
-        "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "2.7.2",
+        "@babel/cli": "7.25.9",
+        "@babel/core": "7.26.0",
+        "@babel/plugin-transform-runtime": "7.25.9",
+        "@babel/preset-env": "7.26.0",
+        "@babel/preset-react": "7.25.9",
+        "@babel/preset-typescript": "7.26.0",
+        "@faker-js/faker": "9.1.0",
+        "@storybook/addon-essentials": "8.3.6",
+        "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+        "@storybook/blocks": "8.3.6",
+        "@storybook/react": "8.3.6",
+        "@storybook/react-webpack5": "8.3.6",
+        "@stylistic/eslint-plugin": "2.9.0",
         "@testing-library/dom": "10.4.0",
-        "@testing-library/jest-dom": "6.5.0",
+        "@testing-library/jest-dom": "6.6.2",
         "@testing-library/react": "16.0.1",
         "@testing-library/user-event": "14.5.2",
-        "@types/jest": "29.5.12",
-        "@types/node": "22.5.3",
+        "@types/jest": "29.5.14",
+        "@types/node": "22.8.4",
         "@types/ramda": "0.30.2",
-        "@types/react": "18.3.5",
-        "@types/sprintf-js": "1.1.4",
+        "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.4.0",
-        "@typescript-eslint/parser": "8.4.0",
-        "babel-loader": "9.1.3",
+        "@typescript-eslint/eslint-plugin": "8.12.2",
+        "@typescript-eslint/parser": "8.12.2",
+        "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-import-resolver-typescript": "3.6.3",
-        "eslint-plugin-import": "2.30.0",
+        "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.35.2",
-        "eslint-plugin-react-hooks": "4.6.2",
+        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-react-hooks": "5.0.0",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
@@ -87,12 +83,13 @@
         "prettier": "3.3.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "7.6.17",
+        "storybook": "8.3.6",
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
-        "typescript": "5.5.4",
-        "webpack": "5.94.0"
+        "typescript": "5.6.3",
+        "uuid": "11.0.2",
+        "webpack": "5.95.0"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",

package/test/mocks/chip-field-mock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SyntheticEvent } from 'react';
+import type { AutocompleteChangeReason } from '@/core/inputs/autocomplete';
+interface IMultiple {
+    onChange?: (_event: SyntheticEvent<Element, Event>, value: string[], reason?: AutocompleteChangeReason) => void;
+}
+export declare const MultipleField: ({ onChange }: IMultiple) => React.JSX.Element;
+export {};

package/test/mocks/chip-field-mock.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _chipField = _interopRequireDefault(require("../../core/inputs/chip-field"));
+var MultipleField = exports.MultipleField = function MultipleField(_ref) {
+  var onChange = _ref.onChange;
+  return /*#__PURE__*/_react["default"].createElement(_chipField["default"], {
+    label: "Emails *",
+    list: [{
+      value: 'email@1.com',
+      label: 'email@1.com'
+    }, {
+      value: 'email@2.com',
+      label: 'email@2.com'
+    }],
+    error: false,
+    disabled: false,
+    value: [],
+    onChange: onChange
+  });
+};

package/test/util.js

@@ -50,7 +50,7 @@ function drag(_x) {
   return _drag.apply(this, arguments);
 }
 function _drag() {
-  _drag = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(element) {
+  _drag = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(element) {
     var _ref,
       inTo,
       delta,

package/theme/colors.d.ts

@@ -1,60 +1,65 @@
-import type { Priority, Feedback, Criticality, Graphically } from './presets';
 declare const _default: {
+    red: Record<number, string>;
+    pink: Record<number, string>;
+    lightPink: Record<number, string>;
+    purple: Record<number, string>;
+    indigo: Record<number, string>;
+    darkBlue: Record<number, string>;
+    blue: Record<number, string>;
+    lightBlue: Record<number, string>;
+    lightTeal: Record<number, string>;
+    teal: Record<number, string>;
+    green: Record<number, string>;
+    lightGreen: Record<number, string>;
+    amber: Record<number, string>;
+    orange: Record<number, string>;
+    deepOrange: Record<number, string>;
+    brown: Record<number, string>;
+    lightBrown: Record<number, string>;
+    gray: Record<number, string>;
+    neutral: Record<number, string>;
+    action: {
+        cancel: string;
+        confirm: string;
+    };
     primary: {
+        light: string;
         main: string;
         dark: string;
-        light: string;
-        contrast: string;
     };
     secondary: {
+        light: string;
         main: string;
         dark: string;
-        light: string;
-        contrast: string;
     };
-    app: {
-        border: string;
-        background: {
-            main: string;
-            lighter: string;
+    criticality: {
+        low: string;
+        medium: string;
+        high: string;
+    };
+    priority: {
+        main: {
+            neutral: string;
+            minimal: string;
+            low: string;
+            medium: string;
+            high: string;
+            critical: string;
         };
-        text: {
-            main: string;
-            light: string;
-            disabled: string;
+        light: {
+            neutral: string;
+            minimal: string;
+            low: string;
+            medium: string;
+            high: string;
+            critical: string;
         };
     };
-    priority: Record<Priority, {
-        main: string;
-        light: string;
-    }>;
-    feedback: Record<Feedback, string>;
-    graphic: Record<Graphically, {
-        main: string;
-        light: string;
-    }>;
-    criticality: Record<Criticality, string>;
-    neutral: {
-        black: string;
-        white: string;
-        transparent: string;
-    };
-    grays: {
-        g0: string;
-        g1: string;
-        g2: string;
-        g3: string;
-        g4: string;
-        g5: string;
-        g6: string;
-        g7: string;
-        g8: string;
-        g9: string;
-    };
-    action: {
-        confirm: string;
-        cancel: string;
-        neutral: string;
+    feedback: {
+        danger: string;
+        warning: string;
+        success: string;
+        info: string;
     };
 };
 export default _default;

package/theme/colors.js

@@ -4,140 +4,294 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var red = {
+  50: '#FFCDD2',
+  100: '#FCAEB2',
+  200: '#F88F93',
+  300: '#F57173',
+  400: '#F15253',
+  500: '#EE3334',
+  600: '#EA1414',
+  700: '#D00A0A',
+  800: '#B50000',
+  900: '#99000F'
+};
+var pink = {
+  50: '#FADADB',
+  100: '#F5B4B8',
+  200: '#EF8F94',
+  300: '#EA6970',
+  400: '#EF5F6C',
+  500: '#F55469',
+  600: '#FA4A65',
+  700: '#FF4062',
+  800: '#FC1A40',
+  900: '#C60034'
+};
+var lightPink = {
+  50: '#FFD0C1',
+  100: '#F2A29A',
+  200: '#E57373',
+  300: '#F26A69',
+  400: '#FF605E',
+  500: '#F55756',
+  600: '#EA4D4D',
+  700: '#DD4C4A',
+  800: '#CF4A46',
+  900: '#C24943'
+};
+var purple = {
+  50: '#F3E5F5',
+  100: '#D7C6E0',
+  200: '#C9ABD0',
+  300: '#BC91C0',
+  400: '#AE76B0',
+  500: '#A05BA0',
+  600: '#7B4299',
+  700: '#623A84',
+  800: '#6B1D80',
+  900: '#74007C'
+};
+var indigo = {
+  50: '#E0E4FF',
+  100: '#C1CDF3',
+  200: '#84A0DB',
+  300: '#6589CF',
+  400: '#6581CE',
+  500: '#667CCD',
+  600: '#6674CC',
+  700: '#4D59B2',
+  800: '#333E98',
+  900: '#1A237E'
+};
+var darkBlue = {
+  50: '#E8EAF6',
+  100: '#858FA4',
+  200: '#647188',
+  300: '#43536D',
+  400: '#2C3E5B',
+  500: '#213352',
+  600: '#152849',
+  700: '#132442',
+  800: '#10203A',
+  900: '#0E1C33'
+};
+var blue = {
+  50: '#DAF2FD',
+  100: '#AEE5F9',
+  200: '#82D9F6',
+  300: '#56CCF2',
+  400: '#49B3F0',
+  500: '#3C99EF',
+  600: '#2F80ED',
+  700: '#276BF0',
+  800: '#1840F6',
+  900: '#0815FC'
+};
+var lightBlue = {
+  50: '#E0F5FE',
+  100: '#A3E0FB',
+  200: '#66CBF9',
+  300: '#29B6F6',
+  400: '#039BE5',
+  500: '#0288D1',
+  600: '#0277BD',
+  700: '#01579B',
+  800: '#004A7C',
+  900: '#043658'
+};
+var lightTeal = {
+  50: '#E7F3F5',
+  100: '#CFE7EA',
+  200: '#B7DCE0',
+  300: '#9FD0D5',
+  400: '#87C4CB',
+  500: '#79B1BC',
+  600: '#6B9FAC',
+  700: '#568395',
+  800: '#487086',
+  900: '#3E6073'
+};
+var teal = {
+  50: '#E0F2F1',
+  100: '#B2DFDB',
+  200: '#80CBC4',
+  300: '#67C1B8',
+  400: '#4DB6AC',
+  500: '#26A69A',
+  600: '#009688',
+  700: '#00897B',
+  800: '#00695C',
+  900: '#004D40'
+};
+var green = {
+  50: '#CEE5D8',
+  100: '#9FCFA7',
+  200: '#6FB975',
+  300: '#40A344',
+  400: '#289939',
+  500: '#108F2D',
+  600: '#118D16',
+  700: '#0F7F14',
+  800: '#0D7011',
+  900: '#0B620F'
+};
+var lightGreen = {
+  50: '#E9F4DD',
+  100: '#C3E997',
+  200: '#AED581',
+  300: '#9DCC66',
+  400: '#8BC34A',
+  500: '#7DAE43',
+  600: '#6E983D',
+  700: '#608336',
+  800: '#487429',
+  900: '#33691E'
+};
+var amber = {
+  50: '#FFF7D5',
+  100: '#FFF7B3',
+  200: '#F1C555',
+  300: '#EEC33E',
+  400: '#EAC128',
+  500: '#E7BF11',
+  600: '#FFAD00',
+  700: '#E89600',
+  800: '#D17E00',
+  900: '#985D04'
+};
+var orange = {
+  50: '#FFE1B4',
+  100: '#F8D88F',
+  200: '#FCC970',
+  300: '#FFB950',
+  400: '#FFAF38',
+  500: '#FFA41C',
+  600: '#FF9900',
+  700: '#F37500',
+  800: '#E65100',
+  900: '#FF4500'
+};
+var deepOrange = {
+  50: '#FFCCBC',
+  100: '#F5874F',
+  200: '#EF7943',
+  300: '#E96C38',
+  400: '#E45E2C',
+  500: '#DE5121',
+  600: '#D84315',
+  700: '#D03F12',
+  800: '#C73A0F',
+  900: '#BF360C'
+};
+var lightBrown = {
+  50: '#F7DED6',
+  100: '#ECAD98',
+  200: '#FE9275',
+  300: '#E97551',
+  400: '#ED6C45',
+  500: '#D95E38',
+  600: '#C5502C',
+  700: '#B2411F',
+  800: '#9E3313',
+  900: '#8A2506'
+};
+var brown = {
+  50: '#DAC7BB',
+  100: '#CCB2A1',
+  200: '#BD9C87',
+  300: '#AF876D',
+  400: '#A07252',
+  500: '#925C38',
+  600: '#83471E',
+  700: '#6C3C20',
+  800: '#553221',
+  900: '#3E2723'
+};
+var gray = {
+  50: '#FAFAFA',
+  100: '#F5F5F5',
+  200: '#EEEEEE',
+  300: '#E0E0E0',
+  400: '#BDBDBD',
+  500: '#9E9E9E',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121'
+};
 var neutral = {
-  black: '#000000',
-  white: '#FFFFFF',
-  transparent: 'rgba(0, 0, 0, 0)'
+  50: '#FFFFFF',
+  100: '#F6F7FF',
+  200: '#000000'
+};
+var action = {
+  cancel: deepOrange[600],
+  confirm: green[600]
 };
 var primary = {
-  main: '#152849',
-  dark: '#0E1C33',
-  light: '#43536D',
-  contrast: neutral.white
+  light: darkBlue[300],
+  main: darkBlue[600],
+  dark: darkBlue[900]
 };
 var secondary = {
-  main: '#118D16',
-  dark: '#0B620F',
-  light: '#40A344',
-  contrast: neutral.white
+  light: green[300],
+  main: green[600],
+  dark: green[900]
 };
-var feedback = {
-  danger: '#D84315',
-  warning: '#FFA000',
-  success: '#0E9043',
-  info: '#2F80ED'
-};
-var action = {
-  confirm: '#118D16',
-  cancel: '#D84315',
-  neutral: primary.main
-};
-var grays = {
-  g0: '#212121',
-  g1: '#424242',
-  g2: '#616161',
-  g3: '#757575',
-  g4: '#9e9e9e',
-  g5: '#bdbdbd',
-  g6: '#e0e0e0',
-  g7: '#eeeeee',
-  g8: '#f5f5f5',
-  g9: '#fafafa'
-};
-var graphic = {
-  pink: {
-    main: '#D467A8',
-    light: '#F4D9E9'
-  },
-  purple: {
-    main: '#7B4299',
-    light: '#D7C6E0'
-  },
-  brown: {
-    main: '#83471E',
-    light: '#DAC7BB'
-  },
-  red: {
-    main: '#D84315',
-    light: '#FFCDBE'
-  },
-  orange: {
-    main: '#FF9900',
-    light: '#FFE1B4'
-  },
-  yellow: {
-    main: '#E7BF11',
-    light: '#FFF7D5'
-  },
-  lightgreen: {
-    main: '#8BC34A',
-    light: '#E9F4DD'
-  },
-  green: {
-    main: '#0A7B3E',
-    light: '#CEE5D8'
-  },
-  blue: {
-    main: '#56CCF2',
-    light: '#DAF2FD'
-  },
-  gray: {
-    main: grays.g5,
-    light: grays.g8
-  }
+var criticality = {
+  low: lightGreen[400],
+  medium: amber[500],
+  high: orange[600]
 };
 var priority = {
-  critical: {
-    main: '#D84315',
-    light: '#FFCDBE'
-  },
-  high: {
-    main: '#FF9900',
-    light: '#FFE1B4'
+  main: {
+    neutral: gray[400],
+    minimal: blue[300],
+    low: lightGreen[400],
+    medium: amber[500],
+    high: orange[600],
+    critical: deepOrange[600]
   },
-  medium: {
-    main: '#E7BF11',
-    light: '#FFF7D5'
-  },
-  low: {
-    main: '#8BC34A',
-    light: '#E9F4DD'
-  },
-  minimal: {
-    main: '#56CCF2',
-    light: '#DAF2FD'
-  },
-  neutral: {
-    main: grays.g5,
-    light: grays.g8
+  light: {
+    neutral: gray[100],
+    minimal: blue[50],
+    low: lightGreen[50],
+    medium: amber[50],
+    high: orange[50],
+    critical: deepOrange[50]
   }
 };
-var criticality = {
-  high: '#FF9900',
-  medium: '#E7BF11',
-  low: '#8BC34A'
-};
-var app = {
-  border: grays.g6,
-  background: {
-    main: '#F6F7FF',
-    lighter: grays.g8
-  },
-  text: {
-    main: grays.g0,
-    light: grays.g3,
-    disabled: grays.g6
-  }
+var feedback = {
+  danger: deepOrange[600],
+  warning: orange[600],
+  success: green[400],
+  info: blue[600]
 };
 var _default = exports["default"] = {
+  red: red,
+  pink: pink,
+  lightPink: lightPink,
+  purple: purple,
+  indigo: indigo,
+  darkBlue: darkBlue,
+  blue: blue,
+  lightBlue: lightBlue,
+  lightTeal: lightTeal,
+  teal: teal,
+  green: green,
+  lightGreen: lightGreen,
+  amber: amber,
+  orange: orange,
+  deepOrange: deepOrange,
+  brown: brown,
+  lightBrown: lightBrown,
+  gray: gray,
+  neutral: neutral,
+  action: action,
   primary: primary,
   secondary: secondary,
-  app: app,
-  priority: priority,
-  feedback: feedback,
-  graphic: graphic,
   criticality: criticality,
-  neutral: neutral,
-  grays: grays,
-  action: action
+  priority: priority,
+  feedback: feedback
 };

package/theme/index.d.ts

@@ -1,3 +1,2 @@
 export * from './theme';
-export * from './presets';
 export { default as ThemeProviderFlipper } from './ThemeProvider';