@dynamic-framework/ui-react 1.36.2 → 2.0.0-dev.2

package/dist/types/utils/tests/getQueryString.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/mediaQuery.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/tests/validatePhoneNumber.spec.d.ts

@@ -0,0 +1 @@
+export {};

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.2",
+  "version": "2.0.0-dev.2",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -49,6 +49,11 @@
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
     "build:scss:watch": "npx nodemon --watch src --ext scss --exec 'npm run build:scss'",
+    "dev:ts": "tsc -p tsconfig.build.json",
+    "dev:rollup": "rollup -c rollup.config.mjs",
+    "dev:scss": "node scripts/build-scss.js",
+    "build:once": "npm run dev:ts && npm run dev:rollup && sleep 0.5 && npm run dev:scss && yalc push",
+    "watch:ds": "npx nodemon --watch src --ext ts,tsx,scss --delay 1000ms --exec \"npm run build:once\"",
     "cp": "npm run cp:bootstrap && npm run cp:popper && npm run cp:bootstrap-icons",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
     "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
@@ -67,12 +72,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",
@@ -94,7 +100,7 @@
     "file-selector": "^2.1.2",
     "google-libphonenumber": "^3.2.40",
     "i18next": "~23.6.0",
-    "react-content-loader": "~6.2.1",
+    "lucide-react": "^0.548.0",
     "react-datepicker": "~8.3.0",
     "react-international-phone": "~4.5.0",
     "react-responsive-pagination": "^2.9.0",
@@ -110,27 +116,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",
+    "@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/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",
@@ -144,37 +144,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.4.1",
     "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/_shame.scss

@@ -1,5 +1,46 @@
-// keep empty.
+/* stylelint-disable declaration-no-important */
 
 .flex-1 {
   flex: 1;
 }
+
+.text-muted {
+  --#{$prefix}text-muted: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}text-muted) !important;
+}
+
+.form-text {
+  --#{$prefix}form-text: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}form-text) !important;
+}
+
+.spinner-border {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+th {
+  font-weight: var(--#{$prefix}fw-semibold) !important;
+}
+
+@media (min-width: 1200px) {
+  legend {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+}
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+
+@each $size, $width in $container-max-widths {
+  .max-w-#{$size} {
+    max-width: $width;
+  }
+}

package/src/style/abstracts/_mixins.scss

@@ -152,8 +152,6 @@
 
   &.loading {
     --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
-    --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
   }
 }
 // scss-docs-end df-btn-variant-mixin
@@ -170,7 +168,7 @@
     --#{$prefix}table-striped-color: #{$color};
     --#{$prefix}table-active-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-active-bg-factor})")};
     --#{$prefix}table-active-color: #{$color};
-    --#{$prefix}table-hover-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-hover-bg-factor})")};
+    --#{$prefix}table-hover-bg: var(--#{$prefix}gray-25);
     --#{$prefix}table-hover-color: #{$color};
 
     color: var(--#{$prefix}table-color);

package/src/style/abstracts/_utilities.scss

@@ -30,7 +30,7 @@ $utilities: map-merge(
         values: map-merge(
           map-get(map-get($utilities, "background-color"), "values"),
           map-loop(
-            map-merge-multiple($theme-colors-palettes, $palette-grays, $bg-surface-colors, $bg-soft-colors),
+            map-merge-multiple($theme-colors-palettes, $palette-grays),
             rgba-css-var,
             "$key",
             "bg"
@@ -66,6 +66,12 @@ $utilities: map-merge(
         responsive: true
       )
     ),
+    "position": map-merge(
+      map-get($utilities, "position"),
+      (
+        responsive: true
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
@@ -130,6 +136,50 @@ $utilities: map-merge(
         responsive: true,
       )
     ),
+    "v-align": (
+      property: vertical-align,
+      responsive: true,
+      class: "v-align",
+      values: (
+        baseline: baseline,
+        top: top,
+        bottom: bottom,
+        text-top: text-top,
+        text-bottom: text-bottom,
+        sub: sub,
+        super: super,
+        middle: middle,
+      )
+    ),
+    "display": (
+      property: display,
+      responsive: true,
+      class: "d",
+      values: (
+        inline: inline,
+        inline-block: inline-block,
+        block: block,
+        table: table,
+        table-row: table-row,
+        table-cell: table-cell,
+        flex: flex,
+        inline-flex: inline-flex,
+        none: none,
+        grid: grid,
+        table-header-group: table-header-group,
+      )
+    ),
+    "text-wrap": (
+      property: text-wrap,
+      responsive: true,
+      class: "text-wrap",
+      values: (
+        balance: balance,
+        normal: normal,
+        truncate: truncate,
+        wrap: wrap
+      )
+    ),
     "body-font-size": (
       class: "fs-body",
       responsive: true,

package/src/style/abstracts/variables/_+import.scss

@@ -19,9 +19,9 @@ $focus-ring-width: .25rem !default;
 $focus-ring-opacity: .25 !default;
 $focus-ring-blur: 0 !default;
 // custom
-$focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
+$focus-ring-border-color: transparent !default;
 $focus-ring-color-mapping: "secondary-rgb" !default;
-$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
+$focus-ring-color: var(--#{$prefix}gray-100) !default;
 // end custom
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
@@ -66,6 +66,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "buttons";
 @import "forms";
 @import "z-index";
+@import "shadow";
 @import "navs";
 @import "navbar";
 @import "dropdowns";

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

@@ -13,5 +13,7 @@ $alert-color-scale: 100% !default;
 // custom
 $alert-gap: var(--#{$prefix}ref-spacer-4) !default;
 $alert-close-icon-size: var(--#{$prefix}ref-spacer-4) !default;
+
+
 // end custom
 // scss-docs-end alert-variables

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

@@ -5,8 +5,16 @@
 // custom
 $body-color-mapping: "gray-900" !default;
 $body-color: map-get($all-colors, $body-color-mapping) !default;
-$body-bg-mapping: "secondary-soft" !default;
-$body-bg: map-get($all-colors, $body-bg-mapping) !default;
+
+// $body-bg-mapping: "secondary-soft" !default;
+// $body-bg: map-get($all-colors, $body-bg-mapping) !default;
+// Se mapeaba a la variable css
+// Al final quedaba: --bs-secondary-soft-rgb
+
+// WIP: Se asigna el color manualmente
+// este color no existe en la paleta de grises
+// ¿Se tendría que agregar?
+$body-bg: #f5f6fa !default;
 
 $body-secondary-color: var(--#{$prefix}body-color-rgb) !default;
 $body-secondary-bg: var(--#{$prefix}gray-200) !default;
@@ -29,4 +37,3 @@ $link-hover-color: map-get($all-colors, $link-hover-color-mapping) !default;
 // end custom
 
 $link-decoration: none !default;
-$link-hover-decoration: underline !default;

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

@@ -8,10 +8,10 @@ $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius: 1rem !default;
-$border-radius-sm: .5rem !default;
-$border-radius-lg: 1.5rem !default;
-$border-radius-xl: 2rem !default;
-$border-radius-xxl: 2.5rem !default;
+$border-radius: .5rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: 1rem !default;
+$border-radius-xl: 1.5rem !default;
+$border-radius-xxl: 2rem !default;
 $border-radius-pill: 50rem !default;
 // scss-docs-end border-radius-variables

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

@@ -4,17 +4,18 @@
 
 // scss-docs-start btn-variables
 $btn-color: var(--#{$prefix}body-color) !default;
-$btn-padding-y: $spacer-3 !default;
-$btn-padding-x: $spacer-8 !default;
-$btn-line-height: 1 !default;
+$btn-padding-y: $spacer-2 !default;
+$btn-padding-x: $spacer-4 !default;
+$btn-line-height: 1.5 !default;
+$btn-font-weight: $font-weight-semibold !default;
 
-$btn-padding-y-sm: $spacer-2 !default;
-$btn-padding-x-sm: $spacer-4 !default;
+$btn-padding-y-sm: $spacer-1 !default;
+$btn-padding-x-sm: $spacer-3 !default;
 $btn-font-size-sm: $small-font-size !default;
 
-$btn-padding-y-lg: $spacer-4 !default;
-$btn-padding-x-lg: $spacer-8 !default;
-$btn-font-size-lg: $h6-font-size !default;
+$btn-padding-y-lg: $spacer-3 !default;
+$btn-padding-x-lg: $spacer-5 !default;
+$btn-lg-font-size: 1.15rem !default;
 
 $btn-border-width: $input-btn-border-width !default;
 
@@ -22,9 +23,14 @@ $btn-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstr
 $btn-disabled-opacity: .65 !default;
 $btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
-$btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
-$btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
-$btn-border-radius-lg: var(--#{$prefix}border-radius-pill) !default;
+$btn-border-radius: .5rem !default;
+$btn-border-radius-lg: .5rem !default;
+$btn-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1) !default;
+$btn-border-radius-sm: .25rem !default;
 
 $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end btn-variables
+
+$btn-outline-primary-hover-color: inherit !default;
+$btn-outline-primary-hover-bg: transparent !default;
+$btn-outline-primary-focus-bg: transparent !default;

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

@@ -1,9 +1,11 @@
 // Cards
 
 // scss-docs-start card-variables
-$card-border-width: 0px !default;
-$card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 $card-bg: var(--#{$prefix}white) !default;
-$card-spacer-y: $spacer-6 !default;
-$card-spacer-x: $spacer-6 !default;
+$card-spacer-y: $spacer-4 !default;
+$card-spacer-x: $spacer-4 !default;
+$card-cap-padding-y: $spacer-4 !default;
+$card-cap-bg: transparent !default;
+$card-border-color: var(--#{$prefix}gray-50) !default;
+
 // scss-docs-end card-variables

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

@@ -5,9 +5,9 @@ $chip-gap: $spacer-1 !default;
 $chip-bg: var(--#{$prefix}white) !default;
 $chip-color: var(--#{$prefix}gray-900) !default;
 $chip-border-radius: $border-radius-pill !default;
-$chip-padding-x: $spacer-2 !default;
+$chip-padding-x: $spacer-3 !default;
 $chip-padding-y: $spacer-1 !default;
 $chip-font-size: $small-font-size !default;
 $chip-font-weight: $font-weight-bold !default;
-$chip-line-height: $line-height-base * $spacer-4 !default;
+$chip-line-height: $line-height-base !default;
 // scss-docs-end chip-variables