@homefile/components-v2 2.7.3 → 2.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,8 +3,9 @@ import { t } from 'i18next';
3
3
  import { MenuButton, IconButton, Menu, MenuItem, MenuList, MenuDivider, } from '@chakra-ui/react';
4
4
  import { ChevronRight, Overlay } from '../..';
5
5
  import { colors } from '../../../theme/colors';
6
+ import { Fragment } from 'react/jsx-runtime';
6
7
  export const IconMenuWithMove = ({ disabled = false, icon, itemForm, menuItems, onMove, }) => {
7
- return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed", zIndex: "4" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: "menuIcon", w: "fit-content", disabled: disabled }), _jsxs(MenuList, { zIndex: "5", children: [menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
8
+ return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed", zIndex: "4" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Fragment, { children: icon }), variant: "menuIcon", w: "fit-content", disabled: disabled }), _jsxs(MenuList, { zIndex: "5", children: [menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
8
9
  bg: 'lightGreen.1',
9
10
  }, _focus: {
10
11
  bg: 'lightGreen.1',
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Center, Container, Slide } from '@chakra-ui/react';
3
3
  export const FooterDrawer = ({ children, isOpen, variant = 'footer' }) => {
4
- return (_jsx(Slide, { direction: "bottom", in: isOpen, children: _jsx(Container, { variant: variant, minW: "full", children: _jsx(Center, { py: ["0.5rem", "2rem"], children: children }) }) }));
4
+ return (_jsx(Slide, { direction: "bottom", in: isOpen, animate: { transform: "translateX(0px)" }, children: _jsx(Container, { variant: variant, minW: "full", children: _jsx(Center, { py: ["0.5rem", "2rem"], children: children }) }) }));
5
5
  };
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { MenuButton, IconButton, Menu, MenuItem, MenuList, Box, } from '@chakra-ui/react';
3
3
  import { Overlay } from '..';
4
+ import { Fragment } from 'react/jsx-runtime';
4
5
  export const IconMenu = ({ disabled = false, icon, itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', }) => {
5
- return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
6
+ return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Fragment, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
6
7
  bg: 'lightGreen.1',
7
8
  }, _focus: {
8
9
  bg: 'lightGreen.1',
@@ -1,3 +1,4 @@
1
- export declare const GroupsContainer: ({ children, }: {
2
- children?: JSX.Element | JSX.Element[];
1
+ import { ReactNode } from 'react';
2
+ export declare const GroupsContainer: ({ children }: {
3
+ children?: ReactNode;
3
4
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Stack } from '@chakra-ui/react';
3
- export const GroupsContainer = ({ children, }) => {
3
+ export const GroupsContainer = ({ children }) => {
4
4
  return (_jsx(Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", children: children }));
5
5
  };
@@ -10,6 +10,6 @@ export declare const useDocumentPreview: ({ handleClose, handleSend, }: Document
10
10
  columnsDesktop: number;
11
11
  columnsMobile: number;
12
12
  columnWidth: number;
13
- contentRef: import("react").RefObject<HTMLDivElement>;
13
+ contentRef: import("react").RefObject<HTMLDivElement | null>;
14
14
  };
15
15
  export {};
@@ -4,7 +4,7 @@ import { useToast } from '@chakra-ui/react';
4
4
  import { CustomToast } from '../components';
5
5
  export const useCustomToast = () => {
6
6
  const chakraToast = useToast();
7
- const toastIdRef = useRef();
7
+ const toastIdRef = useRef(null);
8
8
  const close = () => {
9
9
  if (toastIdRef.current) {
10
10
  chakraToast.close(toastIdRef.current);
@@ -1,10 +1,11 @@
1
+ import { ReactNode } from 'react';
1
2
  export interface MenuItemI {
2
3
  handleClick: (form: any) => void;
3
4
  label: string;
4
5
  }
5
6
  export interface IconMenuI<T> {
6
7
  disabled?: boolean;
7
- icon?: JSX.Element;
8
+ icon?: ReactNode;
8
9
  itemForm?: T;
9
10
  menuItems?: MenuItemI[];
10
11
  onClick?: () => void;
@@ -1,10 +1,11 @@
1
+ import { ReactNode } from 'react';
1
2
  export interface StepI {
2
3
  [key: string]: {
3
4
  arrowBottom?: 'bottom' | 'bottom-left' | 'bottom-right';
4
5
  arrowLeft?: 'left' | 'left-top' | 'left-bottom';
5
6
  arrowRight?: 'right' | 'right-top' | 'right-bottom';
6
7
  arrowTop?: 'top' | 'top-left' | 'top-right';
7
- component: JSX.Element;
8
+ component: ReactNode;
8
9
  leftRef?: string | number;
9
10
  topRef?: string | number;
10
11
  bottomRef?: string | number;
@@ -1,6 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Drawer } from '@chakra-ui/react';
3
- import { HomeDetailsContent, FooterButtons } from '../../components';
2
+ import { HomeDetailsContent, FooterButtons, RightPanel } from '../../components';
4
3
  import { HomeCards, ButtonsFooter } from '../../helpers';
5
4
  import { ShareHomeConnectionsComponent } from '../sharedHomePanel/ShareHomeConnections.stories';
6
5
  const { name, image, address } = HomeCards[0];
@@ -9,7 +8,7 @@ export default {
9
8
  component: HomeDetailsContent,
10
9
  };
11
10
  export const HomeDetailsContentComponent = (args) => {
12
- return (_jsx(Drawer, { placement: "right", onClose: () => null, isOpen: true, size: "md", children: _jsx(HomeDetailsContent, Object.assign({}, args)) }));
11
+ return (_jsx(RightPanel, { onClose: () => null, isOpen: true, size: "md", children: _jsx(HomeDetailsContent, Object.assign({}, args)) }));
13
12
  };
14
13
  HomeDetailsContentComponent.args = {
15
14
  apartmentNumber: address.apartmentNumber,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.7.3",
3
+ "version": "2.7.5",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
@@ -22,66 +22,65 @@
22
22
  "src"
23
23
  ],
24
24
  "devDependencies": {
25
- "@chakra-ui/storybook-addon": "^5.2.5",
26
- "@chromatic-com/storybook": "^3.2.2",
27
- "@faker-js/faker": "^9.0.3",
28
- "@storybook/addon-a11y": "^8.4.7",
29
- "@storybook/addon-essentials": "^8.4.7",
30
- "@storybook/addon-interactions": "^8.4.7",
31
- "@storybook/addon-links": "^8.4.7",
32
- "@storybook/addon-onboarding": "^8.4.7",
33
- "@storybook/addon-viewport": "^8.4.7",
34
- "@storybook/blocks": "^8.4.7",
35
- "@storybook/react": "^8.4.7",
36
- "@storybook/react-vite": "^8.4.7",
37
- "@storybook/test": "^8.4.7",
38
- "@types/node": "^22.7.6",
39
- "@types/react": "^18.3.11",
40
- "@types/react-dom": "^18.3.1",
41
- "@vitejs/plugin-react": "^4.3.2",
25
+ "@chromatic-com/storybook": "^3.2.4",
26
+ "@faker-js/faker": "^9.4.0",
27
+ "@storybook/addon-a11y": "^8.5.0",
28
+ "@storybook/addon-essentials": "^8.5.0",
29
+ "@storybook/addon-interactions": "^8.5.0",
30
+ "@storybook/addon-links": "^8.5.0",
31
+ "@storybook/addon-viewport": "^8.5.0",
32
+ "@storybook/blocks": "^8.5.0",
33
+ "@storybook/react": "^8.5.0",
34
+ "@storybook/react-vite": "^8.5.0",
35
+ "@storybook/test": "^8.5.0",
36
+ "@types/node": "^22.10.7",
37
+ "@types/react": "^19.0.7",
38
+ "@types/react-dom": "^19.0.3",
39
+ "@vitejs/plugin-react": "^4.3.4",
42
40
  "axe-playwright": "^2.0.3",
43
41
  "copyfiles": "^2.4.1",
44
42
  "git-commit-msg-linter": "^5.0.4",
45
- "husky": "^9.1.6",
43
+ "husky": "^9.1.7",
46
44
  "jest": "^29.7.0",
47
45
  "json-loader": "^0.5.7",
48
46
  "rimraf": "^6.0.1",
49
- "semantic-release": "^24.1.2",
50
- "storybook": "^8.4.7",
51
- "storybook-react-i18next": "^3.1.8",
47
+ "semantic-release": "^24.2.1",
48
+ "storybook": "^8.5.0",
49
+ "storybook-react-i18next": "^3.2.1",
52
50
  "tsconfig-replace-paths": "^0.0.14",
53
51
  "tscpaths": "^0.0.9",
54
- "typescript": "^5.6.3",
55
- "vite": "^5.4.9"
52
+ "typescript": "^5.7.3",
53
+ "vite": "^6.0.9"
56
54
  },
57
55
  "dependencies": {
58
56
  "@chakra-ui/icons": "^2.2.4",
59
57
  "@chakra-ui/react": "^2.10.3",
60
58
  "@emotion/react": "^11.13.3",
61
59
  "@emotion/styled": "^11.13.0",
62
- "@fontsource/assistant": "^5.1.0",
63
- "@fontsource/poppins": "^5.1.0",
60
+ "@fontsource/assistant": "^5.1.1",
61
+ "@fontsource/poppins": "^5.1.1",
64
62
  "@hassanmojab/react-modern-calendar-datepicker": "^3.1.7",
65
- "@hookform/resolvers": "^3.3.1",
66
- "@rive-app/react-canvas": "^4.14.5",
67
- "axios": "^1.7.7",
63
+ "@hookform/resolvers": "^3.10.0",
64
+ "@rive-app/react-canvas": "^4.17.6",
65
+ "@storybook/addon-themes": "^8.5.0",
66
+ "axios": "^1.7.9",
68
67
  "date-fns": "^4.1.0",
69
68
  "framer-motion": "^11.11.9",
70
- "i18next": "^23.16.0",
71
- "i18next-browser-languagedetector": "^8.0.0",
72
- "i18next-http-backend": "^2.6.2",
73
- "react": "^18.2.0",
74
- "react-dom": "^18.2.0",
75
- "react-dropzone": "^14.2.9",
76
- "react-hook-form": "^7.53.0",
77
- "react-i18next": "^15.0.3",
78
- "react-icons": "^5.3.0",
69
+ "i18next": "^24.2.1",
70
+ "i18next-browser-languagedetector": "^8.0.2",
71
+ "i18next-http-backend": "^3.0.1",
72
+ "react": "^19.0.0",
73
+ "react-dom": "^19.0.0",
74
+ "react-dropzone": "^14.3.5",
75
+ "react-hook-form": "^7.54.2",
76
+ "react-i18next": "^15.4.0",
77
+ "react-icons": "^5.4.0",
79
78
  "react-modern-calendar-datepicker": "^3.1.6",
80
79
  "react-quill": "^2.0.0",
81
- "react-spinners": "^0.14.1",
82
- "recharts": "^2.13.0",
83
- "valtio": "^2.1.0",
84
- "yup": "^1.2.0"
80
+ "react-spinners": "^0.15.0",
81
+ "recharts": "^2.15.0",
82
+ "valtio": "^2.1.2",
83
+ "yup": "^1.6.1"
85
84
  },
86
85
  "scripts": {
87
86
  "start": "storybook dev -p 6007",
@@ -10,6 +10,7 @@ import {
10
10
  import { IconMenuWithMoveI } from '@/interfaces'
11
11
  import { ChevronRight, Overlay } from '@/components'
12
12
  import { colors } from '@/theme/colors'
13
+ import { Fragment } from 'react/jsx-runtime'
13
14
 
14
15
  export const IconMenuWithMove = <T extends unknown>({
15
16
  disabled = false,
@@ -31,7 +32,7 @@ export const IconMenuWithMove = <T extends unknown>({
31
32
  <MenuButton
32
33
  as={IconButton}
33
34
  aria-label="Options"
34
- icon={icon}
35
+ icon={<Fragment>{icon}</Fragment>}
35
36
  variant="menuIcon"
36
37
  w="fit-content"
37
38
  disabled={disabled}
@@ -3,7 +3,7 @@ import { FooterDrawerI } from '@/interfaces'
3
3
 
4
4
  export const FooterDrawer = ({ children, isOpen, variant = 'footer' }: FooterDrawerI) => {
5
5
  return (
6
- <Slide direction="bottom" in={isOpen}>
6
+ <Slide direction="bottom" in={isOpen} animate={{ transform: "translateX(0px)" }}>
7
7
  <Container variant={variant} minW="full">
8
8
  <Center py={["0.5rem","2rem"]}>{children}</Center>
9
9
  </Container>
@@ -94,6 +94,7 @@ import { useHomeBoard, useWindowDimensions } from '@/hooks'
94
94
  import { Painting } from '@/assets/images'
95
95
 
96
96
  import { ReportI } from '@/interfaces'
97
+ import { ReactNode } from 'react'
97
98
 
98
99
  const forms: Record<number, ReportI[]> = {
99
100
  1: homeAssitantStep1FormMock,
@@ -131,7 +132,7 @@ export const HomeBoard = () => {
131
132
 
132
133
  const currentHomeAssistantForm = forms[homeAssistantCurrentStep]
133
134
 
134
- const rightPanelComponents: { [key: string]: JSX.Element } = {
135
+ const rightPanelComponents: { [key: string]: ReactNode } = {
135
136
  AddFolder: (
136
137
  <AddFolder
137
138
  handleClose={onRightClose}
@@ -8,6 +8,7 @@ import {
8
8
  } from '@chakra-ui/react'
9
9
  import { IconMenuI } from '@/interfaces'
10
10
  import { Overlay } from '@/components'
11
+ import { Fragment } from 'react/jsx-runtime'
11
12
 
12
13
  export const IconMenu = <T extends unknown>({
13
14
  disabled = false,
@@ -28,7 +29,7 @@ export const IconMenu = <T extends unknown>({
28
29
  <MenuButton
29
30
  as={IconButton}
30
31
  aria-label="Options"
31
- icon={icon}
32
+ icon={<Fragment>{icon}</Fragment>}
32
33
  variant={variant}
33
34
  w={width}
34
35
  disabled={disabled}
@@ -1,10 +1,7 @@
1
1
  import { Stack } from '@chakra-ui/react'
2
+ import { ReactNode } from 'react'
2
3
 
3
- export const GroupsContainer = ({
4
- children,
5
- }: {
6
- children?: JSX.Element | JSX.Element[]
7
- }) => {
4
+ export const GroupsContainer = ({ children }: { children?: ReactNode }) => {
8
5
  return (
9
6
  <Stack
10
7
  spacing="10"
@@ -66,7 +66,7 @@ const Header = ({
66
66
  recipient: { accountTypes },
67
67
  isDocument,
68
68
  }: Pick<RecipientCardI, 'header' | 'recipient' | 'isDocument'>) => {
69
- if (header) return header as JSX.Element
69
+ if (header) return header
70
70
  return (
71
71
  <RecipientHeader
72
72
  accountType={accountTypes.join(', ')}
@@ -4,7 +4,7 @@ import { CustomToast } from '@/components'
4
4
 
5
5
  export const useCustomToast = () => {
6
6
  const chakraToast = useToast()
7
- const toastIdRef = useRef<ToastId | undefined>()
7
+ const toastIdRef = useRef<ToastId | undefined>(null)
8
8
 
9
9
  const close = () => {
10
10
  if (toastIdRef.current) {
@@ -1,3 +1,5 @@
1
+ import { ReactNode } from 'react'
2
+
1
3
  export interface MenuItemI {
2
4
  handleClick: (form: any) => void
3
5
  label: string
@@ -5,7 +7,7 @@ export interface MenuItemI {
5
7
 
6
8
  export interface IconMenuI<T> {
7
9
  disabled?: boolean
8
- icon?: JSX.Element
10
+ icon?: ReactNode
9
11
  itemForm?: T
10
12
  menuItems?: MenuItemI[]
11
13
  onClick?: () => void
@@ -1,10 +1,12 @@
1
+ import { ReactNode } from 'react'
2
+
1
3
  export interface StepI {
2
4
  [key: string]: {
3
5
  arrowBottom?: 'bottom' | 'bottom-left' | 'bottom-right'
4
6
  arrowLeft?: 'left' | 'left-top' | 'left-bottom'
5
7
  arrowRight?: 'right' | 'right-top' | 'right-bottom'
6
8
  arrowTop?: 'top' | 'top-left' | 'top-right'
7
- component: JSX.Element
9
+ component: ReactNode
8
10
  leftRef?: string | number
9
11
  topRef?: string | number
10
12
  bottomRef?: string | number
@@ -1,6 +1,6 @@
1
1
  import { Meta } from '@storybook/react'
2
2
  import { Drawer } from '@chakra-ui/react'
3
- import { HomeDetailsContent, FooterButtons } from '@/components'
3
+ import { HomeDetailsContent, FooterButtons, RightPanel } from '@/components'
4
4
  import { HomeCards, ButtonsFooter } from '@/helpers'
5
5
  import { HomeDetailsContentI } from '@/interfaces'
6
6
  import { ShareHomeConnectionsComponent } from '../sharedHomePanel/ShareHomeConnections.stories'
@@ -14,9 +14,9 @@ export default {
14
14
 
15
15
  export const HomeDetailsContentComponent = (args: HomeDetailsContentI) => {
16
16
  return (
17
- <Drawer placement="right" onClose={() => null} isOpen size="md">
17
+ <RightPanel onClose={() => null} isOpen size="md">
18
18
  <HomeDetailsContent {...args} />
19
- </Drawer>
19
+ </RightPanel>
20
20
  )
21
21
  }
22
22