@dynamic-framework/ui-react 1.36.1 → 2.0.0-dev.1

package/jest/setup.js

@@ -1,6 +1,99 @@
+/* eslint-disable react/prop-types */
+const React = require('react');
+
 jest.mock('react-content-loader', () => jest.fn());
 
-jest.mock('react-responsive-pagination', () => jest.fn());
+jest.mock('react-responsive-pagination', () => {
+  function MockPagination(props) {
+    const {
+      current,
+      total,
+      onPageChange,
+      className = '',
+    } = props;
+
+    const handleClick = React.useCallback(
+      (page) => {
+        if (page !== current && page >= 1 && page <= total) {
+          onPageChange(page);
+        }
+      },
+      [current, total, onPageChange],
+    );
+
+    return React.createElement('div', {
+      className,
+      'data-testid': 'responsive-pagination',
+    }, [
+      React.createElement('button', {
+        type: 'button',
+        key: 'prev',
+        onClick: () => handleClick(current - 1),
+        disabled: current === 1,
+        'data-testid': 'pagination-previous',
+      }, 'Previous'),
+
+      ...(function getPageButtons() {
+        const pageButtons = [];
+        const windowSize = 2; // Show current ±2
+        const startPage = Math.max(1, current - windowSize);
+        const endPage = Math.min(total, current + windowSize);
+        // Always show first page
+        if (startPage > 1) {
+          pageButtons.push(React.createElement('button', {
+            key: 1,
+            type: 'button',
+            onClick: () => handleClick(1),
+            'data-testid': 'pagination-page-1',
+            'aria-current': current === 1 ? 'page' : undefined,
+            style: { fontWeight: current === 1 ? 'bold' : 'normal' },
+          }, 1));
+          if (startPage > 2) {
+            pageButtons.push(React.createElement('span', { key: 'start-ellipsis', style: { margin: '0 4px' } }, '...'));
+          }
+        }
+        // Window of page buttons
+        for (let page = startPage; page <= endPage; page += 1) {
+          if (!(page === 1 && startPage > 1)) {
+            pageButtons.push(React.createElement('button', {
+              key: page,
+              type: 'button',
+              onClick: () => handleClick(page),
+              'data-testid': `pagination-page-${page}`,
+              'aria-current': page === current ? 'page' : undefined,
+              style: { fontWeight: page === current ? 'bold' : 'normal' },
+            }, page));
+          }
+        }
+        // Always show last page
+        if (endPage < total) {
+          if (endPage < total - 1) {
+            pageButtons.push(React.createElement('span', { key: 'end-ellipsis', style: { margin: '0 4px' } }, '...'));
+          }
+          pageButtons.push(React.createElement('button', {
+            key: total,
+            type: 'button',
+            onClick: () => handleClick(total),
+            'data-testid': `pagination-page-${total}`,
+            'aria-current': total === current ? 'page' : undefined,
+            style: { fontWeight: total === current ? 'bold' : 'normal' },
+          }, total));
+        }
+        return pageButtons;
+      }()),
+
+      React.createElement('button', {
+        key: 'next',
+        type: 'button',
+        onClick: () => handleClick(current + 1),
+        disabled: current === total,
+        'data-testid': 'pagination-next',
+      }, 'Next'),
+    ]);
+  }
+
+  return MockPagination;
+});
 
 jest.mock('@react-input/mask', () => ({
   InputMask: jest.fn(),

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.36.1",
+  "version": "2.0.0-dev.1",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -42,6 +42,7 @@
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "test:storybook": "test-storybook",
     "build": "npm run clean && npm run build:react && npm run build:scss && npm run cp",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
@@ -66,12 +67,13 @@
     "publish:cdn-version": "node scripts/publish-cdn.js",
     "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --acl public-read",
     "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
+    "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",
-    "prepare": "husky install",
+    "prepare": "husky",
     "commitlint": "commitlint --edit"
   },
   "engines": {
-    "node": ">=20.13.1"
+    "node": ">=22.0.0"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -109,26 +111,21 @@
     "@mdx-js/react": "~2.3.0",
     "@popperjs/core": "~2.11.8",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-a11y": "~8.2.9",
-    "@storybook/addon-actions": "~8.2.9",
-    "@storybook/addon-essentials": "~8.2.9",
-    "@storybook/addon-interactions": "~8.2.9",
-    "@storybook/addon-links": "~8.2.9",
-    "@storybook/addon-viewport": "~8.2.9",
-    "@storybook/blocks": "~8.2.9",
-    "@storybook/react": "~8.2.9",
-    "@storybook/react-vite": "~8.2.9",
-    "@storybook/test": "~8.2.9",
-    "@storybook/theming": "~8.2.9",
-    "@testing-library/jest-dom": "~6.1.4",
-    "@testing-library/react": "~14.0.0",
-    "@types/google-libphonenumber": "^7.4.30",
+    "@storybook/addon-a11y": "~9.0.17",
+    "@storybook/addon-docs": "~9.0.17",
+    "@storybook/addon-links": "~9.0.17",
+    "@storybook/react-vite": "~9.0.17",
+    "@testing-library/jest-dom": "~6.6.3",
+    "@testing-library/react": "~16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
     "@types/node": "~18.15.3",
-    "@types/react": "~18.2.31",
-    "@types/react-dom": "~18.2.14",
+    "@types/react": "~19.1.8",
+    "@types/react-dom": "~19.1.6",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
+    "@vitejs/plugin-react": "~4.7.0",
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
     "babel-jest": "^29.7.0",
@@ -142,37 +139,39 @@
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
-    "formik": "^2.4.6",
+    "formik": "~2.4.6",
     "glob": "~10.3.10",
-    "husky": "~8.0.3",
+    "husky": "~9.1.7",
     "jest": "~29.7.0",
     "jest-axe": "~8.0.0",
     "jest-cli": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~18.3.1",
-    "react-dom": "~18.2.0",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
     "react-hot-toast": "~2.5.2",
     "react-i18next": "~13.3.1",
-    "recharts": "~2.12.7",
-    "rimraf": "~5.0.5",
+    "recharts": "~3.1.0",
+    "remark-gfm": "~4.0.1",
+    "rimraf": "~6.0.1",
     "rollup": "^4.27.4",
     "sass": "~1.69.4",
-    "storybook": "~8.2.9",
+    "storybook": "~9.0.17",
     "stylelint": "^16.16.0",
     "stylelint-config-twbs-bootstrap": "^16.0.0",
     "ts-jest": "~29.2.3",
     "tslib": "~2.6.2",
     "typescript": "~5.2.2",
+    "vite": "~6.3.5",
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "react": "~18.3.1",
-    "react-dom": "~18.2.0",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
     "react-hot-toast": "~2.5.2",
     "react-i18next": "~13.3.1",
-    "recharts": "~2.12.7"
+    "recharts": "~3.1.0"
   },
   "peerDependenciesMeta": {
     "recharts": {

package/src/style/abstracts/variables/_forms.scss

@@ -80,14 +80,14 @@ $input-group-addon-border-color: transparent !default;
 
 // custom
 $input-group-sm-icon-size: $spacer-4 !default;
-$input-group-lg-icon-size: $spacer-7 !default;
+$input-group-lg-icon-size: $spacer-6 !default;
 $form-text-padding-y: 0 !default;
 $form-text-padding-x: 0 !default;
 // end custom
 
 // scss-docs-start form-select-variables
 $form-select-disabled-color: $input-disabled-color !default;
-$form-select-bg-size: 16px !default; // In pixels because image dimensions
+$form-select-bg-size: 20px !default; // In pixels because image dimensions
 $form-select-bg-opacity: 0 !default;
 $form-select-indicator-color: var(--#{$prefix}gray-500) !default;
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$gray-500}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/></svg>") !default;

package/src/style/abstracts/variables/_z-index.scss

@@ -9,3 +9,27 @@ $zindex-offcanvas: 1055 !default;
 $zindex-modal-backdrop: 1050 !default;
 $zindex-modal: 1055 !default;
 // scss-docs-end zindex-stack
+
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  20: 20,
+  30: 30,
+  40: 40,
+  50: 50,
+  60: 60,
+  70: 70,
+  80: 80,
+  90: 90,
+  100: 100
+) !default;

package/src/style/components/_d-icon.scss

@@ -1,7 +1,7 @@
 .d-icon {
   --#{$prefix}icon-color: var(--#{$prefix}icon-component-color, inherit);
   --#{$prefix}icon-bg-color: var(--#{$prefix}icon-component-bg-color, inherit);
-  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-6));
+  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-5));
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 

package/src/style/components/_d-select.scss

@@ -13,7 +13,7 @@
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
   --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
-  --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-5);
   --#{$prefix}select-multi-value-padding: 0 var(--#{$prefix}ref-spacer-1) 0 var(--#{$prefix}select-gap);
   --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}select-gap);
   --#{$prefix}select-multi-value-background: var(--#{$prefix}secondary-100);
@@ -26,8 +26,8 @@
   --#{$prefix}select-indicator-separator-margin: var(--#{$prefix}ref-spacer-0) var(--#{$prefix}ref-spacer-1);
   --#{$prefix}select-indicator-separator-color: var(--#{$prefix}transparent);
 
-  --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}select-indicator-width: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}select-indicator-height: var(--#{$prefix}ref-spacer-5);
 
   // focus
   &:focus-within {