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

Feature/improvements and new components

Author: kubit-ui

.storybook/figmaAddon/register.tsx renamed to .storybook/addons/figmaAddon/register.tsx

@@ -0,0 +1,40 @@
+import { Div } from '@storybook/components';
+import { addons, types } from '@storybook/manager-api';
+import { useParameter } from '@storybook/manager-api';
+
+import React from 'react';
+
+const ADDON_ID = 'myaddon/status';
+const PARAM_KEY = 'status';
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Status',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => {
+      const status = useParameter(PARAM_KEY, '#');
+
+      if (status === '#') {
+        return null;
+      }
+
+      if (status === 'DEPRECATED') {
+        return (
+          <Div
+            style={{
+              backgroundColor: 'rgb(223, 43, 81)',
+              color: '#FFF',
+              padding: '5px 15px',
+              fontWeight: 'bold',
+            }}
+          >
+            Deprecated
+          </Div>
+        );
+      }
+
+      return <Div></Div>;
+    },
+  });
+});

.storybook/githubAddon/register.tsx renamed to .storybook/addons/githubAddon/register.tsx

@@ -14,9 +14,10 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-coverage',
-    './tokensAddons/register.tsx',
-    './figmaAddon/register.tsx',
-    './githubAddon/register.tsx',
+    './addons/tokensAddons/register.tsx',
+    './addons/figmaAddon/register.tsx',
+    './addons/githubAddon/register.tsx',
+    './addons/statusAddon/register.tsx',
   ],
   framework: {
     name: '@storybook/react-vite',

.storybook/addons/statusAddon/register.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -27,7 +27,13 @@
     "dist",
     "package.json",
     "README.md",
-    "LICENSE.md"
+    "LICENSE.md",
+    "!dist/cjs/assets",
+    "!dist/esm/assets",
+    "!dist/**/tests",
+    "!dist/**/**/*.test.*",
+    "!dist/**/storybook",
+    "!dist/**/**/stories"
   ],
   "keywords": [
     "web-components",

.storybook/tokensAddons/register.tsx renamed to .storybook/addons/tokensAddons/register.tsx

@@ -1,5 +1,5 @@
 import { TextComponentType } from '@/components/text';
-import { CATEGORY_CONTROL } from '@/constants';
+import { CATEGORY_CONTROL } from '@/constants/categoryControl';
 import { IThemeObjectVariants } from '@/designSystem/themesObject';
 import { ArgTypesReturn } from '@/types';
 

.storybook/main.ts

@@ -13,8 +13,10 @@ type IActionBottomSheetStyles = {
   styles?: CommonStyleType;
 };
 
-export const ActionBottomSheetSyled = styled.div<IActionBottomSheetStyles & { $height?: string }>`
+export const ActionBottomSheetStyled = styled.div<IActionBottomSheetStyles & { $height?: string }>`
   max-height: 100vh;
+  max-height: var(--100svh, 100vh);
+  max-height: 100svh;
   ${props => getStyles(props.styles)}
   height: ${({ $height }) => $height};
 `;
@@ -49,6 +51,8 @@ export const ActionBottomSheetContentStyled = styled.div<IActionBottomSheetStyle
   ${({ theme: { MEDIA_QUERIES } }) => css`
     ${MEDIA_QUERIES?.mobileAndTablet} {
       max-height: 100vh;
+      max-height: var(--100svh, 100vh);
+      max-height: 100svh;
     }
   `}
 `;

package.json

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { PopoverControlled as Popover } from '@/components/popover';
 import { STYLES_NAME } from '@/constants';
-import { useId, useMediaDevice, useScrollEffect } from '@/hooks';
+import { useDeviceHeight, useId, useMediaDevice, useScrollEffect } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { DeviceBreakpointsType } from '@/types';
@@ -22,6 +22,7 @@ const ActionBottomSheetControlledStructureComponent = React.forwardRef(
     { variant, ctv, ...props }: IActionBottomSheetControlledStructure<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
+    useDeviceHeight();
     const styles = useStyles<ActionBottomSheetVariantStylesType, V>(
       STYLES_NAME.ACTION_BOTTOM_SHEET,
       variant,

src/components/accordion/stories/argtypes.ts

@@ -8,7 +8,7 @@ import {
   ActionBottomSheetHeaderContentStyled,
   ActionBottomSheetHeaderStyled,
   ActionBottomSheetIconSyled,
-  ActionBottomSheetSyled,
+  ActionBottomSheetStyled,
   ActionBottomSheetTitleSyled,
 } from './actionBottomSheet.styled';
 import { IActionBottomSheetStandAlone } from './types';
@@ -18,7 +18,7 @@ const ActionBottomSheetStandAloneComponent = (
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   return (
-    <ActionBottomSheetSyled
+    <ActionBottomSheetStyled
       ref={ref}
       $height={props.height}
       data-testid={`${props.dataTestId}Container`}
@@ -53,7 +53,7 @@ const ActionBottomSheetStandAloneComponent = (
       <ActionBottomSheetContentStyled ref={scrollableRef} styles={props.styles.content}>
         {props.children}
       </ActionBottomSheetContentStyled>
-    </ActionBottomSheetSyled>
+    </ActionBottomSheetStyled>
   );
 };