Merge pull request #24 from kubit-ui/feature/new-v2-components-and-improvements

Feature/new v2 components and improvements

Author: Kubit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.8.3",
+  "version": "1.9.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",
@@ -89,16 +89,16 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@storybook/addon-a11y": "^8.2.6",
-    "@storybook/addon-controls": "^8.2.6",
+    "@storybook/addon-a11y": "^8.2.7",
+    "@storybook/addon-controls": "^8.2.7",
     "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-themes": "^8.2.6",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/react-vite": "^8.2.6",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-themes": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -111,8 +111,8 @@
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
@@ -122,9 +122,9 @@
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^28.7.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-n": "^17.10.1",
+    "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-promise": "^7.0.0",
@@ -133,7 +133,7 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.0.1",
-    "globals": "^15.8.0",
+    "globals": "^15.9.0",
     "gts": "^5.3.1",
     "html-validate": "^8.21.0",
     "jest": "^29.7.0",
@@ -147,8 +147,8 @@
     "prettier": "^3.3.3",
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
-    "storybook": "^8.2.6",
-    "ts-jest": "^29.2.3",
+    "storybook": "^8.2.7",
+    "ts-jest": "^29.2.4",
     "tsc-alias": "1.8.10",
     "typedoc": "^0.26.5",
     "typedoc-plugin-markdown": "^4.2.3",

src/components/button/buttonStandAlone.tsx

@@ -69,6 +69,7 @@ const ButtonStandAloneComponent = (
       data-testid={props.dataTestId}
       disabled={disabled}
       form={props.form}
+      id={props.id}
       minWidth={props.minWidth}
       role={props.role}
       tabIndex={props.tabIndex}

src/components/button/stories/argtypes.ts

@@ -35,6 +35,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    id: {
+      control: { type: 'text' },
+      type: { name: 'string' },
+      description: 'Button id',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     disabled: {
       description: 'Specifies if the button element is disabled or not',
       type: { name: 'boolean' },

src/components/button/stories/button.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   title: 'Components/Actions/Button',
   component: ButtonStory,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
     githubUrl: 'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/button',
     figmaUrl:
       'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-9829',
@@ -31,6 +31,7 @@ export const Button: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].ButtonVariantType || {})[0] as string,
     size: Object.values(variantsObject[themeSelected].ButtonSizeType || {})[0] as string,
+    id: 'buttonId',
     children: 'Button',
     icon: {
       icon: ICONS.ICON_PLACEHOLDER,

src/components/button/types/button.ts

@@ -64,6 +64,7 @@ export interface IButtonStandAlone
   form?: string;
   role?: string | ROLES;
   title?: string;
+  id?: string;
 }
 
 /**

src/components/drawer/drawerControlled.tsx

@@ -17,10 +17,7 @@ const SCROLL_DISTANCE = 5;
 const FOOTER_EDIT_STYLES: CssProperty[] = [
   { cssPropertyName: 'position', cssPropertyValue: 'static' },
 ];
-/* Constants for useZoomEffect (content) */
-const CONTENT_EDIT_STYLE: CssProperty[] = [
-  { cssPropertyName: 'height', cssPropertyValue: 'fit-content' },
-];
+
 const MAX_ZOOM = 2.4;
 
 const DrawerControlledComponent = React.forwardRef(
@@ -44,13 +41,11 @@ const DrawerControlledComponent = React.forwardRef(
     );
 
     const footerRef = useZoomEffect(FOOTER_EDIT_STYLES, MAX_ZOOM);
-    const contentRef = useZoomEffect(CONTENT_EDIT_STYLE, MAX_ZOOM);
 
     const drawerStructure = (
       <DrawerStandAlone
         {...props}
         ref={ref}
-        contentRef={contentRef}
         device={device}
         footerRef={footerRef}
         scrollableRef={scrollableRef}

src/components/drawer/types/drawer.ts

@@ -41,8 +41,8 @@ export interface IDrawerStandAlone {
   scrollableRef: (node) => void;
   shadowRef: (node) => void;
   /* To useZoomEffect */
-  footerRef: (node) => void;
-  contentRef: (node) => void;
+  footerRef?: (node) => void;
+  contentRef?: (node) => void;
 }
 
 type OmitProps = 'styles' | 'device' | 'scrollableRef' | 'shadowRef' | 'footerRef' | 'contentRef';

src/components/grid/grid.styled.ts

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import { DeviceBreakpointsType } from '@/types/breakpoints';
+import { getStyles } from '@/utils';
 
 import { ContentCustomGridItemType, CustomGridItemType, GridItemType, GridType } from './types';
 import { getGridConfiguration, getItemGridConfiguration, getMaxWidth } from './utils/grid.utils';
@@ -10,6 +11,7 @@ export const GridStyled = styled.div<GridType>`
   margin: auto;
   ${props =>
     ({
+      styles,
       theme: {
         MEDIA_QUERIES: { onlyTablet, onlyMobile, onlyDesktop },
         BREAKPOINTS,
@@ -27,15 +29,18 @@ export const GridStyled = styled.div<GridType>`
         )};
         padding: 0
           ${props.addPaddingForLayout ? props.config?.[DeviceBreakpointsType.DESKTOP]?.gap : 0};
+        ${getStyles(styles)}
       }
       ${onlyTablet} {
         ${getGridConfiguration(props.config?.[DeviceBreakpointsType.TABLET])};
         margin: 0 ${props.config?.[DeviceBreakpointsType.TABLET]?.margin}rem;
+        ${getStyles(styles)}
       }
 
       ${onlyMobile} {
         ${getGridConfiguration(props.config?.[DeviceBreakpointsType.MOBILE])};
         margin: 0 ${props.config?.[DeviceBreakpointsType.MOBILE]?.margin}rem;
+        ${getStyles(styles)}
       }
     `};
 `;

src/components/grid/types/grid.ts

@@ -1,9 +1,11 @@
 import { DeviceBreakpointsType } from '@/types/breakpoints';
+import { CommonStyleType } from '@/types/styles/commonStyle';
 
 export type GridType = {
   addPaddingForLayout?: boolean;
   isFullWidth?: boolean;
   columnsPadding?: number;
+  styles?: CommonStyleType;
   config?: {
     [DeviceBreakpointsType.DESKTOP]?: GridConfigType;
     [DeviceBreakpointsType.TABLET]?: GridConfigType;
@@ -26,6 +28,9 @@ export type GridConfigType = {
   columns?: number;
   gap?: string;
   margin?: number;
+  headerStyles?: CommonStyleType;
+  mainStyles?: CommonStyleType;
+  footerStyles?: CommonStyleType;
 };
 
 export type CustomGridItemType = GridItemType & {

src/components/index.ts

@@ -8,6 +8,7 @@ export * from './image';
 export * from './label';
 export * from './link';
 export * from './pill';
+export * from './pillV2';
 export * from './popover';
 export * from './tagV2';
 export * from './text';