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

…provements

Feature/new v2 components and improvements

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';

src/components/layout/layout.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { useMediaDevice } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
@@ -10,8 +11,9 @@ const LAYOUT_STYLES = 'LAYOUT_STYLES';
 
 export const LayoutComponent = ({ variant, ctv, ...props }: ILayout): JSX.Element => {
   const styles = useStyles<LayoutVariantStylesType>(LAYOUT_STYLES, variant, ctv);
+  const device = useMediaDevice();
 
-  return <LayoutStandAlone styles={styles} {...props} />;
+  return <LayoutStandAlone styles={styles} {...props} device={device} />;
 };
 
 export const Layout = (props: ILayout): JSX.Element => (

src/components/layout/layoutStandAlone.tsx

@@ -17,6 +17,7 @@ export const LayoutStandAlone = ({
   gridConfig,
   footerContent,
   dataTestId = 'layout',
+  device,
 }: ILayoutStandAlone): JSX.Element => {
   const columnsConfiguration = columnsConfig ?? styles.defaultColumnsConfig;
   const gridConfiguration = gridConfig ?? styles.gridConfig;
@@ -25,7 +26,12 @@ export const LayoutStandAlone = ({
   return (
     <LayoutContainer $paddingBottom={styles.padding_botom_size} backgroundColor={backgroundColor}>
       {headerContent && (
-        <Grid addPaddingForLayout config={gridConfiguration} data-testid={`${dataTestId}Header`}>
+        <Grid
+          addPaddingForLayout
+          config={gridConfiguration}
+          data-testid={`${dataTestId}Header`}
+          styles={gridConfiguration?.[device]?.headerStyles}
+        >
           <GridItem
             as={LayoutRoleType.header}
             desktop={header?.[DeviceBreakpointsType.DESKTOP]}
@@ -36,7 +42,12 @@ export const LayoutStandAlone = ({
           </GridItem>
         </Grid>
       )}
-      <Grid addPaddingForLayout config={gridConfiguration} data-testid={`${dataTestId}Main`}>
+      <Grid
+        addPaddingForLayout
+        config={gridConfiguration}
+        data-testid={`${dataTestId}Main`}
+        styles={gridConfiguration?.[device]?.mainStyles}
+      >
         <GridItem
           as={LayoutRoleType.main}
           desktop={asideContent ? main?.[DeviceBreakpointsType.DESKTOP] : main?.DESKTOP_FULL}
@@ -58,7 +69,12 @@ export const LayoutStandAlone = ({
         )}
       </Grid>
       {footerContent && footer && (
-        <Grid addPaddingForLayout config={gridConfiguration} data-testid={`${dataTestId}Footer`}>
+        <Grid
+          addPaddingForLayout
+          config={gridConfiguration}
+          data-testid={`${dataTestId}Footer`}
+          styles={gridConfiguration?.[device]?.footerStyles}
+        >
           <GridItem
             as={LayoutRoleType.footer}
             desktop={footer[DeviceBreakpointsType.DESKTOP]}

src/components/layout/stories/layout.stories.tsx

@@ -15,7 +15,6 @@ const meta = {
   title: 'Components/Templates/Layout',
   component: Story,
   parameters: {
-    layout: 'centered',
     githubUrl: 'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/layout',
   },
   tags: ['autodocs'],
@@ -29,7 +28,11 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 export const Layout: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].LayoutVariantType || {})[0] as string,
-    mainContent: <ReplaceContent height={'100%'}>Main content</ReplaceContent>,
+    mainContent: (
+      <>
+        <ReplaceContent height={'100%'}>Main content</ReplaceContent>
+      </>
+    ),
     headerContent: <ReplaceContent>Header content</ReplaceContent>,
     asideContent: <ReplaceContent height={'100%'}>Aside content</ReplaceContent>,
     footerContent: <ReplaceContent>Footer content</ReplaceContent>,

src/components/layout/types/layout.ts

@@ -35,10 +35,11 @@ export interface ILayoutStandAlone {
     [DeviceBreakpointsType.TABLET]?: GridConfigType;
     [DeviceBreakpointsType.MOBILE]?: GridConfigType;
   };
+  device: DeviceBreakpointsType;
 }
 
 export interface ILayout
-  extends Omit<ILayoutStandAlone, 'styles'>,
+  extends Omit<ILayoutStandAlone, 'styles' | 'device'>,
     Omit<CustomTokenTypes<LayoutVariantStylesType>, 'cts' | 'extraCt'> {
   variant: string;
 }

src/components/layout/types/layoutTheme.ts

@@ -1,3 +1,4 @@
+import { GridConfigType } from '@/components/grid';
 import { DeviceBreakpointsType } from '@/types/breakpoints';
 
 export type ConfigByDevice = {
@@ -9,7 +10,7 @@ export type ConfigByDevice = {
 export type LayoutVariantStylesType = {
   padding_botom_size?: string;
   gridConfig?: {
-    [deviceBreakpoint in DeviceBreakpointsType]?: ConfigByDevice;
+    [deviceBreakpoint in DeviceBreakpointsType]?: GridConfigType;
   };
   defaultColumnsConfig?: {
     header?: {

src/components/link/linkAsButton/linkAsButton.styled.ts

@@ -4,13 +4,14 @@ import { ButtonSizePropsType, ButtonStateKeyOfType, ButtonStateType } from '@/co
 
 // Apply button border radius to the link when focus-visible
 export const LinkAsButtonWrapperStyled = styled.div<{
+  $fullWidth?: boolean;
   $styles?: ButtonStateKeyOfType;
   $state: ButtonStateType;
   $sizeStyles?: ButtonSizePropsType;
 }>`
   display: inline;
   > *:first-child {
-    display: inline-block;
+    display: ${props => (props.$fullWidth ? 'block' : 'inline-block')};
     ${({ $sizeStyles, $styles, $state }) => {
       if (!$styles?.[$state]) {
         return css``;

src/components/link/linkAsButton/linkAsButtonStandAlone.tsx

@@ -16,6 +16,7 @@ export const LinkAsButtonStandAloneComponent = (
   return (
     // Apply button border radius to the link when focus-visible
     <LinkAsButtonWrapperStyled
+      $fullWidth={props.fullWidth}
       $sizeStyles={props.sizeStyles}
       $state={props.state}
       $styles={props.styles}

src/components/link/linkAsButton/stories/argtypes.ts

@@ -202,7 +202,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.ACCESIBILITY,
       },
     },
-    isFullWidth: {
+    fullWidth: {
       description: 'Show full width',
       type: { name: 'boolean' },
       control: { type: 'boolean' },

src/components/link/linkAsButton/stories/linkAsButton.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   title: 'Components/Actions/LinkAsButton',
   component: LinkAsButtonStory,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/link/types/link.ts

@@ -63,6 +63,7 @@ export interface ILinkAsButtonStandAlone extends Omit<IButtonStandAlone, 'showLo
   sizeStyles: ButtonSizePropsType;
   children: string | JSX.Element;
   component?: TextComponentType | GenericLinkType;
+  fullWidth?: boolean;
   url: string;
   state: ButtonStateType;
   target?: string;