@hazelcast/ui 1.3.3-next.4 → 1.3.3-next.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.3.3-next.4+9351c2e",
+  "version": "1.3.3-next.54+160e789",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -28,8 +28,8 @@
     "test": "jest --maxWorkers=50%",
     "test:watch": "jest --watch",
     "start": "pnpm run storybook",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "publish-storybook": "chromatic --storybook-build-dir storybook-static --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "test:visual": "loki --verboseRenderer --requireReference --chromeTolerance 3 --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
@@ -37,8 +37,8 @@
     "generate-screenshots": "pnpm run build-storybook && loki update --reactUri file:./storybook-static --chromeDockerImage 'yukinying/chrome-headless-browser-stable:110.0.5481.77' --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "lint": "pnpm run lint:ts && pnpm run lint:css",
     "lint:fix": "pnpm run lint:ts:fix && pnpm run lint:css:fix",
-    "lint:ts": "eslint --ext .ts,.tsx .",
-    "lint:ts:fix": "pnpm run lint -- --fix",
+    "lint:ts": "eslint .",
+    "lint:ts:fix": "pnpm run lint:ts --fix",
     "lint:css": "postcss --config ./.postcss-lint --replace '**/*.{css,scss}'",
     "lint:css:fix": "stylelint --fix '**/*.{css,scss}'"
   },
@@ -46,74 +46,80 @@
     "url": "https://github.com/hazelcast/frontend-shared/issues"
   },
   "dependencies": {
-    "@hazelcast/helpers": "^1.3.2",
-    "@hazelcast/services": "^1.3.2",
-    "@headlessui/react": "^1.4.2",
-    "@icons-pack/react-simple-icons": "^9.3.0",
-    "@popperjs/core": "^2.11.7",
-    "@types/react-modal": "3.16.0",
-    "@types/react-table": "^7.7.14",
-    "classnames": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "@hazelcast/helpers": "^1.3.3-next.54+160e789",
+    "@hazelcast/services": "^1.3.3-next.54+160e789",
+    "@headlessui/react": "^1.7.19",
+    "@icons-pack/react-simple-icons": "^12.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@tanstack/react-table": "^8.21.2",
+    "@types/react-modal": "3.16.3",
+    "classnames": "^2.5.1",
+    "date-fns": "^2.30.0",
     "dequal": "^2.0.3",
-    "formik": "^2.2.9",
-    "nuka-carousel": "^5.5.1",
-    "rc-tooltip": "^5.3.1",
-    "react-datepicker": "^4.11.0",
+    "formik": "^2.4.6",
+    "nuka-carousel": "^7.0.0",
+    "react-datepicker": "^4.25.0",
     "react-feather": "^2.0.10",
-    "react-hotkeys": "^2.0.0",
+    "react-hot-keys": "^2.7.3",
     "react-merge-refs": "^1.1.0",
-    "react-modal": "^3.16.1",
+    "react-modal": "^3.16.3",
     "react-popper": "^2.3.0",
-    "react-resize-aware": "3.1.1",
-    "react-select": "^5.8.0",
+    "react-select": "^5.10.0",
     "react-simple-timefield": "^3.3.1",
-    "react-table": "^7.8.0",
-    "react-uid": "^2.3.2",
-    "react-use": "^17.4.0",
-    "use-deep-compare": "^1.1.0"
+    "react-uid": "^2.4.0",
+    "react-use": "^17.6.0",
+    "use-deep-compare": "^1.3.0"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.3.2",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.16",
-    "@storybook/theming": "^6.5.16",
-    "@types/classnames": "^2.3.1",
-    "@types/enzyme": "^3.10.12",
-    "@types/jest-axe": "^3.5.3",
-    "@types/react": "^17.0.45",
-    "@types/react-datepicker": "^4.3.2",
-    "@types/react-dom": "^17.0.17",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "babel-loader": "^9.1.2",
-    "doiuse": "^4.4.1",
-    "enzyme": "^3.11.0",
-    "jest-axe": "^8.0.0",
-    "loki": "^0.34.0",
-    "postcss": "^8.4.23",
-    "postcss-cli": "^9.1.0",
-    "postcss-reporter": "^7.0.5",
-    "postcss-scss": "^4.0.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^15.6.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^4.6.0",
-    "webpack": "^5.81.0",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@hazelcast/test-helpers": "^1.3.3-next.54+160e789",
+    "@storybook/addon-designs": "^8.2.0",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-onboarding": "^8.6.3",
+    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/manager-api": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-webpack5": "^8.6.3",
+    "@storybook/test": "^8.6.3",
+    "@storybook/theming": "8.5.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/classnames": "^2.3.4",
+    "@types/jest-axe": "^3.5.9",
+    "@types/node": "^18.15.3",
+    "@types/react": "^18.3.18",
+    "@types/react-datepicker": "^4.19.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/use-persisted-state": "^0.3.5",
+    "babel-loader": "^9.2.1",
+    "doiuse": "^6.0.5",
+    "jest-axe": "^10.0.0",
+    "loki": "^0.35.1",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-reporter": "^7.1.0",
+    "postcss-scss": "^4.0.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.6.3",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.7.0",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "@types/react": "^17 || ^18",
-    "@types/react-dom": "^17 || ^18",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "lodash": "^4.17.21",
+    "react": "^18",
+    "react-dom": "^18"
   },
-  "gitHead": "9351c2e6a48cbec2d2712e8f128aecebaded4317"
+  "gitHead": "160e789e82c27cd489299a60fc690d359d307cc6"
 }

package/styles/constants/_colors.scss

@@ -1,30 +1,54 @@
-// https://zeroheight.com/11d0e6dac/p/594529--colors
+// https://www.figma.com/design/uGTDLFJEVy4dCNIhlmTPRw/%F0%9F%90%9D-HIVE-3.0?node-id=1061-4605&p=f&t=7sJDCVUY4O5jNXma-0
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
 $colorPrimaryDark: #003b87 !default;
+
 $colorNeutralWhite: #fff !default;
-$colorNeutralLighter: #fafafa !default;
-$colorNeutralLight: #b7c1cb !default;
+
+$colorNeutralGray: #e9f0f9 !default;
+$colorNeutralGrayDarker: #ccdff5 !default;
+
 $colorNeutral: #dbdbdb !default;
+$colorNeutralLight: #b7c1cb !default;
+$colorNeutralLighter: #fafafa !default;
+
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: darken($colorSuccess, 10%) !default;
+$colorSuccessDark: #64d03c !default;
+$colorSuccessDarkest: #3b7044 !default;
+
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: darken($colorInfo, 10%) !default;
+$colorInfoDark: #4adfdf !default;
+$colorInfoDarkest: #006585 !default;
+
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: darken($colorWarning, 15%) !default;
+$colorWarningDark: #f6dd00 !default;
+$colorWarningDarkest: #8b5d00 !default;
+
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: darken($colorError, 10%) !default;
+$colorErrorDark: #8f001d !default;
+
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
-$colorTextSubdued: #69707d !default;
+$colorTextSubdued: $colorTextSecondary !default;
+
 $colorOverlayBackground: #f0f6ff !default;
 $colorAccessibilityOutline: #74f !default;
+
 $colorBrand: #00bac6 !default;
-$colorShadow: rgb(53 61 73 / 20%) !default;
-$colorMenuDark: #333 !default;
-$authPrimary: #c6ff3a !default;
-$authSecondary: #0b2b39 !default;
+$colorBrandText: #10a4b3 !default;
+$colorShadow: $colorNeutral !default;
+
+$colorMenuDark: $colorText !default;
+$colorAuthSecondary: #0b2b39 !default;
+
+$colorBrandPrimary: #c6ff3a !default;
+$colorBrandSecondary: #061727 !default;
+$colorBrandAccent: #122d45 !default;
+$colorBrandOcean: #0080a9 !default;
+$colorBrandRaspberry: #c91268 !default;
+$colorBrandCarrot: #f5911e !default;
+$colorBrandBlueberry: #0019fe !default;

package/styles/constants/_typography.scss

@@ -44,13 +44,6 @@ $lineHeightBodyTiny: normal !default;
   @return '';
 }
 
-@mixin typographyH1Hero($override: false) {
-  font-weight: $fontWeightHeadingRegular #{override($override)};
-  font-size: $fontSizeH4 #{override($override)};
-  letter-spacing: $letterSpacingH4 #{override($override)};
-  line-height: $lineHeightH4 #{override($override)};
-}
-
 @mixin typographyH1($override: false) {
   font-weight: $fontWeightHeadingRegular #{override($override)};
   font-size: $fontSizeH1 #{override($override)};

package/styles/helpers/_a11y.scss

@@ -36,3 +36,11 @@
   top: 1px;
   left: 1px;
 }
+
+@mixin focusOutlineSimple() {
+  &:focus-within {
+    outline: none;
+
+    @include outlineSimple;
+  }
+}

package/styles/helpers/_gradients.scss

@@ -1,11 +1,44 @@
 @use '../constants' as c;
 
-@mixin gradientLime {
-  background: c.$authPrimary;
-  background: linear-gradient(270deg, c.$authPrimary 0%, #00b8b8 100%);
+@mixin textGradient() {
+  /* doiuse-disable background-clip-text */
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  /* doiuse-enable background-clip-text */
 }
 
-@mixin gradientOcean {
-  background: c.$colorText;
-  background: linear-gradient(270deg, #0c6f8e 0%, #1b2939 100%);
+@mixin gradientLime($angle: 270deg) {
+  background: linear-gradient($angle, c.$colorBrandPrimary, #00b8b8);
+}
+
+@mixin textGradientLime($angle: 0deg) {
+  @include gradientLime($angle);
+  @include textGradient;
+}
+
+@mixin gradientOcean($angle: 270deg) {
+  background: linear-gradient($angle, #116884, c.$colorText);
+}
+
+@mixin textGradientOcean($angle: 0deg) {
+  @include gradientOcean($angle);
+  @include textGradient;
+}
+
+@mixin gradientSea($angle: 270deg) {
+  background: linear-gradient($angle, #0c6f8e, #08d1d1);
+}
+
+@mixin textGradientSea($angle: 0deg) {
+  @include gradientSea($angle);
+  @include textGradient;
+}
+
+@mixin gradientCitrus($angle: 90deg) {
+  background: linear-gradient($angle, c.$colorBrandRaspberry, c.$colorBrandCarrot);
+}
+
+@mixin textGradientCitrus($angle: 0deg) {
+  @include gradientCitrus($angle);
+  @include textGradient;
 }

package/styles/helpers/_text.scss

@@ -3,3 +3,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin multilineOverflowEllipsis {
+  @supports (-webkit-line-clamp: 2) {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}

package/styles/typography/ubuntu-mono.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/UbuntuMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./fonts/UbuntuMono-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/UbuntuMono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 500;
+  src: url('./fonts/UbuntuMono-BoldItalic.woff2') format('woff2');
+}

package/lib/utils/test.d.ts

@@ -1,3 +0,0 @@
-import { ReactWrapper } from 'enzyme';
-import { Component } from 'react';
-export declare const waitForComponentToPaint: <T = Component<{}, {}, any>>(wrapper: ReactWrapper<T, {}, Component<{}, {}, any>>) => Promise<void>;

package/lib/utils/test.js

@@ -1,8 +0,0 @@
-import { act } from 'react-dom/test-utils';
-export const waitForComponentToPaint = async (wrapper) => {
-    await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        wrapper.update();
-    });
-};
-//# sourceMappingURL=test.js.map

package/lib/utils/test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/utils/test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAI1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,EAAiB,OAAwB,EAAE,EAAE;IACvF,MAAM,GAAG,CAAC,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACtD,OAAO,CAAC,MAAM,EAAE,CAAA;IAClB,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}