Merge pull request #29 from kubit-ui/feature/improvements-components-and-utilities

Feature/improvements components and utilities

Author: kubit-ui

.prettierrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'consistent',
+  jsxSingleQuote: false,
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'avoid',
+  printWidth: 100,
+  endOfLine: 'lf',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: ['react', 'styled-components', 'dayjs', '^(?!\\.|@)', '^@/', '^\\.'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  overrides: [
+    {
+      files: ['config/**/*.js'],
+      options: {
+        printWidth: 160,
+      },
+    },
+  ],
+};

.prettierrc.js

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -93,54 +93,54 @@
     "@babel/preset-typescript": "^7.24.7",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.9.1",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-controls": "^8.2.9",
+    "@eslint/js": "^9.11.1",
+    "@storybook/addon-a11y": "^8.3.2",
+    "@storybook/addon-controls": "^8.3.2",
     "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-themes": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-themes": "^8.3.2",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-vite": "^8.3.2",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/jest-axe": "^3.5.9",
-    "@types/mocha": "^10.0.7",
-    "@types/react": "^18.3.4",
+    "@types/mocha": "^10.0.8",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.9.1",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.8.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-n": "^17.10.2",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-n": "^17.10.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.11",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unused-imports": "^4.1.3",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.9.0",
     "gts": "^5.3.1",
-    "html-validate": "^8.21.0",
+    "html-validate": "^8.23.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-canvas-mock": "^2.5.2",
@@ -152,23 +152,23 @@
     "prettier": "^3.3.3",
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.2",
     "ts-jest": "^29.2.5",
     "tsc-alias": "1.8.10",
-    "typedoc": "^0.26.6",
-    "typedoc-plugin-markdown": "^4.2.6",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
+    "typedoc": "^0.26.7",
+    "typedoc-plugin-markdown": "^4.2.8",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7",
     "vite-tsconfig-paths": "^5.0.1",
     "yarn-deduplicate": "^6.0.2"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.0",
+    "@emotion/is-prop-valid": "^1.3.1",
     "lottie-web": "^5.12.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "styled-components": "^6.1.12"
+    "styled-components": "^6.1.13"
   },
   "resolutions": {
     "strip-ansi": "^6.0.1",
@@ -180,4 +180,4 @@
     "url": "https://github.com/kubit-ui/kubit-react-components/issues"
   },
   "homepage": "https://www.kubit-ui.com/"
-}
+}

package.json

@@ -3,6 +3,7 @@ import ICON_CHEVRON_DOWN from './icons/icon_chevron_down.svg';
 import ICON_CHEVRON_LEFT from './icons/icon_chevron_left.svg';
 import ICON_CHEVRON_RIGHT from './icons/icon_chevron_right.svg';
 import ICON_CHEVRON_UP from './icons/icon_chevron_up.svg';
+import ICON_DRAG from './icons/icon_ds_handle.svg';
 import ICON_GHOST from './icons/icon_ghost.svg';
 import ICON_PLACEHOLDER from './icons/icon_placeholder.svg';
 import ICON_CLOSE from './icons/icon_x_close.svg';
@@ -26,6 +27,7 @@ export const ICONS = {
   ICON_PLAY_BUTTON,
   ICON_CHECKMARK_THICK,
   ICON_REPLACE,
+  ICON_DRAG,
 };
 
 export const ILLUSTRATIONS = {

src/assets/storybook/icons/icon_ds_handle.svg

@@ -49,7 +49,6 @@ export const ButtonStyled = styled.button<IButtonStyled>`
   align-items: center;
   justify-content: center;
   text-align: ${({ alignText }) => alignText ?? 'left'};
-  min-width: ${props => props.minWidth};
   cursor: pointer;
   flex-direction: ${props =>
     props.$iconPosition === IconPositionType.LEFT ? 'row' : 'row-reverse'};
@@ -86,7 +85,7 @@ export const ButtonStyled = styled.button<IButtonStyled>`
       ${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
     }
   }
-
+  min-width: ${props => props.minWidth};
   width: ${props => (props.$fullWidth ? '100%' : 'auto')};
 
   &::after {

src/assets/storybook/index.ts

@@ -52,6 +52,20 @@ describe('Month Selector utils', () => {
     const result2 = keyLeftFunction(previous2);
     expect(result2).toBe(previous2 - 1);
   });
+  it('keyLeftMove - maxDate and minDate in same year - should move to the left when left arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 4, 15);
+
+    const keyLeftFunction = keyLeftMove({ currentDate, maxDate, minDate });
+
+    const previous1 = minDate.getMonth();
+    const previous2 = minDate.getMonth() + 1;
+    const result1 = keyLeftFunction(previous1);
+    expect(result1).toBe(maxDate.getMonth());
+    const result2 = keyLeftFunction(previous2);
+    expect(result2).toBe(previous2 - 1);
+  });
   it('keyRightMove - maxDate and currentDate in same year - should move to the right when right arrow key is pressed', () => {
     const maxDate = new Date(2023, 8, 15);
     const currentDate = new Date(2023, 8, 22);
@@ -94,6 +108,21 @@ describe('Month Selector utils', () => {
     const result2 = keyRightFunction(previous2);
     expect(result2).toBe(previous2 + 1);
   });
+
+  it('keyRightMove - maxDate and minDate in same year - should move to the right when right arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 4, 15);
+
+    const keyRightFunction = keyRightMove({ currentDate, maxDate, minDate });
+
+    const previous1 = maxDate.getMonth();
+    const previous2 = maxDate.getMonth() - 1;
+    const result1 = keyRightFunction(previous1);
+    expect(result1).toBe(minDate.getMonth());
+    const result2 = keyRightFunction(previous2);
+    expect(result2).toBe(previous2 + 1);
+  });
   it('keyUpMove - maxDate and currentDate in same year - should move up when up arrow key is pressed', () => {
     const maxDate = new Date(2023, 8, 15);
     const currentDate = new Date(2023, 8, 22);
@@ -145,7 +174,24 @@ describe('Month Selector utils', () => {
     const result3 = keyUpFunction(previous3);
     expect(result3).toBe(firstMonth);
   });
-  it('keyDownMove - maxDate and currentDate in same year - should move up when up arrow key is pressed', () => {
+  it('keyUpMove - maxDate and minDate in same year - should move up when up arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 0, 15);
+
+    const keyUpFunction = keyUpMove({ currentDate, maxDate, minDate });
+
+    const previous1 = minDate.getMonth();
+    const previous2 = minDate.getMonth() + 3;
+    const previous3 = minDate.getMonth() + 2;
+    const result1 = keyUpFunction(previous1);
+    expect(result1).toBe(maxDate.getMonth());
+    const result2 = keyUpFunction(previous2);
+    expect(result2).toBe(previous2 - 3);
+    const result3 = keyUpFunction(previous3);
+    expect(result3).toBe(minDate.getMonth());
+  });
+  it('keyDownMove - maxDate and currentDate in same year - should move down when down arrow key is pressed', () => {
     const maxDate = new Date(2023, 8, 15);
     const currentDate = new Date(2023, 8, 22);
     const minDate = new Date(2000, 0, 15);
@@ -162,7 +208,7 @@ describe('Month Selector utils', () => {
     const result3 = keyDownFunction(previous3);
     expect(result3).toBe(maxDate.getMonth());
   });
-  it('keyDownMove - minDate and currentDate in same year - should move up when up arrow key is pressed', () => {
+  it('keyDownMove - minDate and currentDate in same year - should move down when down arrow key is pressed', () => {
     const maxDate = new Date(2025, 8, 15);
     const currentDate = new Date(2023, 8, 22);
     const minDate = new Date(2023, 0, 15);
@@ -179,7 +225,7 @@ describe('Month Selector utils', () => {
     const result3 = keyDownFunction(previous3);
     expect(result3).toBe(previous3 + 3);
   });
-  it('keyDownMove - currentDate year is different than minDate and maxDate - should move up when up arrow key is pressed', () => {
+  it('keyDownMove - currentDate year is different than minDate and maxDate - should move down when down arrow key is pressed', () => {
     const maxDate = new Date(2025, 8, 15);
     const currentDate = new Date(2023, 8, 22);
     const minDate = new Date(2000, 0, 15);
@@ -196,6 +242,23 @@ describe('Month Selector utils', () => {
     const result3 = keyDownFunction(previous3);
     expect(result3).toBe(previous3 + 3);
   });
+  it('keyDownMove - maxDate and minDate in same year - should move down when down arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 0, 15);
+
+    const keyDownFunction = keyDownMove({ currentDate, maxDate, minDate });
+
+    const previous1 = maxDate.getMonth();
+    const previous2 = 1;
+    const previous3 = maxDate.getMonth() + 3;
+    const result1 = keyDownFunction(previous1);
+    expect(result1).toBe(firstMonth);
+    const result2 = keyDownFunction(previous2);
+    expect(result2).toBe(previous2 + 3);
+    const result3 = keyDownFunction(previous3);
+    expect(result3).toBe(maxDate.getMonth());
+  });
   it('keyTabMove - should return previous', () => {
     const previous = 5;
     const result = keyTabMove(previous);

src/components/button/button.styled.ts

@@ -18,6 +18,9 @@ export const keyLeftMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      return previous === minDate.getMonth() ? maxDate.getMonth() : previous - 1;
+    }
     if (isSameYear(maxDate, currentDate)) {
       return previous === FIRST_MONTH ? maxDate.getMonth() : previous - 1;
     }
@@ -34,6 +37,9 @@ export const keyRightMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      return previous === maxDate.getMonth() ? minDate.getMonth() : previous + 1;
+    }
     if (isSameYear(maxDate, currentDate)) {
       return previous === maxDate.getMonth() ? FIRST_MONTH : previous + 1;
     }
@@ -50,6 +56,14 @@ export const keyUpMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      if (previous === minDate.getMonth()) {
+        return maxDate.getMonth();
+      }
+      return previous <= minDate.getMonth() + NUM_DAYS_IN_ROW
+        ? minDate.getMonth()
+        : previous - NUM_DAYS_IN_ROW;
+    }
     if (isSameYear(minDate, currentDate)) {
       if (previous === minDate.getMonth()) {
         return LAST_MONTH;
@@ -77,6 +91,14 @@ export const keyDownMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      if (previous === maxDate.getMonth()) {
+        return minDate.getMonth();
+      }
+      return previous >= maxDate.getMonth() - NUM_DAYS_IN_ROW
+        ? maxDate.getMonth()
+        : previous + NUM_DAYS_IN_ROW;
+    }
     if (isSameYear(minDate, currentDate)) {
       if (previous === LAST_MONTH) {
         return minDate.getMonth();