@bytebrand/fe-ui-core 4.1.36 → 4.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.36",
+  "version": "4.1.38",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -17,6 +17,7 @@ import Star from './SVG/common/Star';
 import Plus from './SVG/common/Plus';
 import PlusNew from './SVG/common/PlusNew';
 import Trash from './SVG/common/Trash';
+import TrashRed from './SVG/common/TrashRed';
 import Question from './SVG/common/Question';
 import Info from './SVG/common/Info';
 import InfoTransparentIcon from './SVG/common/InfoTransparent';
@@ -315,6 +316,7 @@ const components: IComponentsProp = {
   plus: Plus,
   plusNew: PlusNew,
   trash: Trash,
+  trashRed: TrashRed,
   trashIcon: Trash,
   selector_unknown: Question,
   info: Info,

package/source/components/_common/IconSVG/SVG/common/TrashRed.tsx

@@ -0,0 +1,23 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const SvgTrash = (props: any) => (
+  <svg
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <mask id="mask0_7785_64413" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">
+      <rect x="0.666992" width="24" height="24" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_7785_64413)">
+      <path d="M7.96699 20.5C7.46699 20.5 7.04199 20.325 6.69199 19.975C6.34199 19.625 6.16699 19.2 6.16699 18.7V6H5.91699C5.70033 6 5.52133 5.929 5.37999 5.787C5.23799 5.64567 5.16699 5.46667 5.16699 5.25C5.16699 5.03333 5.23799 4.85433 5.37999 4.713C5.52133 4.571 5.70033 4.5 5.91699 4.5H9.66699C9.66699 4.25 9.75433 4.04167 9.92899 3.875C10.1043 3.70833 10.317 3.625 10.567 3.625H14.767C15.017 3.625 15.2297 3.70833 15.405 3.875C15.5797 4.04167 15.667 4.25 15.667 4.5H19.417C19.6337 4.5 19.813 4.571 19.955 4.713C20.0963 4.85433 20.167 5.03333 20.167 5.25C20.167 5.46667 20.0963 5.64567 19.955 5.787C19.813 5.929 19.6337 6 19.417 6H19.167V18.7C19.167 19.2 18.992 19.625 18.642 19.975C18.292 20.325 17.867 20.5 17.367 20.5H7.96699ZM7.66699 6V18.7C7.66699 18.7833 7.69633 18.8543 7.75499 18.913C7.81299 18.971 7.88366 19 7.96699 19H17.367C17.4503 19 17.5213 18.971 17.58 18.913C17.638 18.8543 17.667 18.7833 17.667 18.7V6H7.66699ZM10.067 16.25C10.067 16.4667 10.138 16.646 10.28 16.788C10.4213 16.9293 10.6003 17 10.817 17C11.0337 17 11.213 16.9293 11.355 16.788C11.4963 16.646 11.567 16.4667 11.567 16.25V8.75C11.567 8.53333 11.4963 8.354 11.355 8.212C11.213 8.07067 11.0337 8 10.817 8C10.6003 8 10.4213 8.07067 10.28 8.212C10.138 8.354 10.067 8.53333 10.067 8.75V16.25ZM13.767 16.25C13.767 16.4667 13.8377 16.646 13.979 16.788C14.121 16.9293 14.3003 17 14.517 17C14.7337 17 14.913 16.9293 15.055 16.788C15.1963 16.646 15.267 16.4667 15.267 16.25V8.75C15.267 8.53333 15.1963 8.354 15.055 8.212C14.913 8.07067 14.7337 8 14.517 8C14.3003 8 14.121 8.07067 13.979 8.212C13.8377 8.354 13.767 8.53333 13.767 8.75V16.25ZM7.66699 6V18.7C7.66699 18.7833 7.69633 18.8543 7.75499 18.913C7.81299 18.971 7.88366 19 7.96699 19H7.66699V6Z" fill="#BA1A1A"/>
+    </g>
+  </svg>
+);
+
+export default SvgTrash;
+/* tslint:enable */

package/source/components/_common/Modal/Modal.story.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import useModal from '../../../framework/hooks/useModal';
+
+import Modal from './Modal';
+
+const ModalComponent = () => {
+  const { isVisible, toggleModal } = useModal();
+  return (
+    <>
+      <button onClick={toggleModal}>
+        open modal
+      </button>
+      <Modal isVisible={isVisible} toggleModal={toggleModal} name='TEST_MODAL' />
+    </>
+  )
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('Modal', () => <ModalComponent />)

package/source/components/_common/Modal/Modal.styled.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/system';
+
+export const BaseModalWrapper = styled('div')({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  backgroundColor: '#fff',
+  boxShadow: 24,
+  padding: 20
+});

package/source/components/_common/Modal/Modal.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Modal from '@mui/material/Modal';
+import ModalsConfig from './ModalsConfig';
+import { BaseModalWrapper } from './Modal.styled';
+
+interface IBasicModal {
+  isVisible: boolean;
+  toggleModal: () => void;
+  name: string;
+  modalProps?: any;
+}
+
+const BasicModal = ({ isVisible, toggleModal, name, modalProps }: IBasicModal) => {
+
+  return (
+    <Modal open={isVisible} onClose={toggleModal}>
+      <BaseModalWrapper>
+        {ModalsConfig[name](modalProps)}
+      </BaseModalWrapper>
+    </Modal>
+  );
+};
+
+export default BasicModal;

package/source/components/_common/Modal/ModalsConfig.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import TestModal from './modals/TestModal';
+
+const ModalsConfig = {
+  TEST_MODAL: (props: any) => {
+    return <TestModal { ...props } />;
+  }
+};
+
+export default ModalsConfig;

package/source/components/_common/Modal/modals/TestModal.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestModal = () => {
+  return <div>test modal</div>;
+};
+
+export default TestModal;

package/source/components/_common/UserMenu/MaterialMenu.story.js

@@ -8,47 +8,47 @@ const superAdmin = true;
 const userMenuItems = [
   {
     icon: 'dashboardIcon',
-    content: 'Dashboard'
+    label: 'Dashboard'
   },
   {
     icon: 'userProfileIcon',
-    content: 'Profile'
+    label: 'Profile'
   },
   {
     icon: 'addressIcon',
-    content: 'Address'
+    label: 'Address'
   },
   {
     icon: 'myVehiclesIcon',
-    content: 'My Vehicles'
+    label: 'My Vehicles'
   },
   {
     icon: 'savedSearchsIcon',
-    content: 'Saved searchs'
+    label: 'Saved searchs'
   },
   {
     icon: 'favoritesIcon',
-    content: 'Favorites',
+    label: 'Favorites',
     amount: 0
   },
   !superAdmin && {
     icon: 'dealersIcon',
-    content: 'Dealers',
+    label: 'Dealers',
     amount: 1234,
     divider: true
   },
   {
     icon: 'imageSettingsIcon',
-    content: 'Image Settings'
+    label: 'Image Settings'
   },
   !superAdmin && {
     icon: 'supportCallbackIcon',
-    content: 'Support & Call back',
+    label: 'Support & Call back',
     divider: true
   },
   {
     icon: 'logoutIcon',
-    content: 'Logout'
+    label: 'Logout'
   },
 
 ];

package/source/components/_common/UserMenu/MaterialMenu.tsx

@@ -65,12 +65,11 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
           anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         >
           {menuItems.map((listItemProps: any, index: number) => {
-            const { value } = listItemProps;
             return !!listItemProps &&
               <ListItem
                 key={listItemProps.text}
                 selected={index === selectedIndex}
-                onClick={() => onHandleChange(value, index)}
+                onClick={() => onHandleChange(listItemProps.value, index)}
                 isSelect={isSelect}
                 Link={Link}
                 { ...listItemProps }

package/source/framework/hooks/useModal.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleModal = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return { isVisible, toggleModal };
+};
+
+export default useModal;