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

Feature/improvements and new components

Author: kubit-ui

.storybook/manager.ts

@@ -4,7 +4,7 @@ import { create } from '@storybook/theming';
 
 const theme = create({
   base: 'light', // this will inherit the base properties of Storybook's dark theme
-  brandTitle: `Kubit | react-components`,
+  brandTitle: `React components by Kubit`,
   brandUrl: 'https://kubit-ui.com/',
 
   // colors

.storybook/overview/introduction.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-// import Package from '../../package.json';
+import Package from '../../package.json';
 import bg from './assets/cover_home.webp';
 import './introduction.css';
 
@@ -24,7 +24,7 @@ export const Introduction = () => {
     >
       <div className="welcome-text-container">
         <h2 className="welcome_title">Kubit | web-components</h2>
-        <h4 className="welcome_version">{`v.1.0.0 | Saturn`}</h4>
+        <h4 className="welcome_version">{`v.${Package.version} | Saturn`}</h4>
       </div>
     </div>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.5.2",
+  "version": "1.6.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",

src/components/backToTop/backToTopControlled.tsx

@@ -25,9 +25,13 @@ const BackToTopControlledComponent = React.forwardRef(
 
     const innerRef = React.useRef<HTMLButtonElement | null>(null);
 
-    React.useImperativeHandle(ref, () => {
-      return innerRef?.current as HTMLButtonElement;
-    }, []);
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return innerRef?.current as HTMLButtonElement;
+      },
+      []
+    );
 
     const { state, setRef } = useManageState({
       states: Object.values(BackToTopStateType) as States,

src/components/calendar/list/list.tsx

@@ -229,6 +229,7 @@ export const List = ({
               styles={props.styles}
             >
               <ItemRove
+                ariaDisabled={isDisabled}
                 ariaLabel={formatDate(day, {
                   weekday: 'long',
                   year: 'numeric',

src/components/dot/dot.styled.ts

@@ -16,4 +16,6 @@ export const DotStyled = styled.span<IDotStyled>`
   ${props => getMeasuresStyles(props.sizeStyles.container)}
   ${props => getTypographyStyles(props.sizeStyles.container)}
   ${props => getTypographyStyles(props.styles.container)}
+  width: ${props => props.$width};
+  height: ${props => props.$height};
 `;

src/components/dot/dotStandAlone.tsx

@@ -4,11 +4,25 @@ import { DotStyled } from './dot.styled';
 import { IDotStandAlone } from './types/dot';
 
 const DotStandAloneComponent = (
-  { formatedNumber, sizeStyles, styles, dataTestId = 'dot-standalone-test-id' }: IDotStandAlone,
+  {
+    formatedNumber,
+    sizeStyles,
+    styles,
+    dataTestId = 'dot-standalone-test-id',
+    height,
+    width,
+  }: IDotStandAlone,
   ref: React.ForwardedRef<HTMLSpanElement> | undefined | null
 ): JSX.Element => {
   return (
-    <DotStyled ref={ref} data-testid={dataTestId} sizeStyles={sizeStyles} styles={styles}>
+    <DotStyled
+      ref={ref}
+      $height={height}
+      $width={width}
+      data-testid={dataTestId}
+      sizeStyles={sizeStyles}
+      styles={styles}
+    >
       {formatedNumber}
     </DotStyled>
   );

src/components/dot/stories/argtypes.ts

@@ -57,6 +57,28 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    width: {
+      control: { type: 'text' },
+      type: { name: 'string' },
+      description: 'Add width to the dot',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    height: {
+      control: { type: 'text' },
+      type: { name: 'string' },
+      description: 'Add height to the dot',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     dataTestId: {
       control: { type: 'text' },
       type: { name: 'string' },

src/components/dot/types/dot.ts

@@ -10,6 +10,8 @@ import { DotSizePropsType, DotVariantStylesType } from './dotTheme';
 export interface IDotStyled {
   styles: DotVariantStylesType;
   sizeStyles: DotSizePropsType;
+  $width?: string;
+  $height?: string;
 }
 
 /**
@@ -21,6 +23,8 @@ export interface IDotStandAlone {
   styles: DotVariantStylesType;
   sizeStyles: DotSizePropsType;
   formatedNumber?: number | string;
+  width?: string;
+  height?: string;
   dataTestId?: string;
 }
 

src/components/header/header.tsx

@@ -6,17 +6,23 @@ import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
 import { HeaderStandAlone } from './headerStandAlone';
+import { useHeaderShadow } from './hook/useHeaderShadow';
 import { HeaderPropsStylesType, IHeader, IHeaderStandAlone } from './types';
 
 const HeaderComponent = React.forwardRef(
   <V extends string | unknown>(
-    { variant, ctv, ...props }: IHeader<V>,
+    { variant, ctv, showShadowFrom, ...props }: IHeader<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<HeaderPropsStylesType, V>(STYLES_NAME.HEADER, variant, ctv);
     const device = useMediaDevice();
+    const { box_shadow } = styles?.container?.scrollShadow || {};
+    const { headerRef } = useHeaderShadow({
+      ref,
+      shadow: { boxShadow: box_shadow, showShadowFrom },
+    });
 
-    return <HeaderStandAlone {...props} ref={ref} device={device} styles={styles} />;
+    return <HeaderStandAlone {...props} ref={headerRef} device={device} styles={styles} />;
   }
 );
 HeaderComponent.displayName = 'HeaderComponent';