@bytebrand/fe-ui-core 4.8.25 → 4.8.27

package/source/components/_common/MaterialStepButton/MaterialStepButton.tsx

@@ -1,61 +1,61 @@
-import React from 'react';
-// import deLocale from 'date-fns/locale/de';
-// import enLocale from 'date-fns/locale/en-US';
-// import {
-//   LocalizationProvider,
-//   CalendarPickerView,
-//   DatePicker
-// } from '@mui/x-date-pickers';
-// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-
-import TextField from '@mui/material/TextField';
-import classnames from 'classnames';
-import styles from './MaterialStepButton.styl';
-
-interface IMaterialDatePicker {
-  language?: string;
-  className?: string;
-  minDate?: Date;
-  maxDate?: Date;
-  value?: string;
-  placeholder?: string;
-  // openTo?: CalendarPickerView;
-  // views?: CalendarPickerView[];
-  format?: string;
-  error?: boolean;
-  onChange: (value: Date) => void;
-}
-
-const MaterialStepButton: React.FC<IMaterialDatePicker> = ({
-
-}: IMaterialDatePicker) => {
-
-  const localeMap: {
-    [key: string]: any
-  } = {
-    // en: enLocale,
-    // de: deLocale
-  };
-
-  // const wrapperClassName = classnames(
-  //   styles.inputBirthday,
-  //   className
-  // );
-
-  return (
-    <p>MaterialStepButtonMaterialStepButtonMaterialStepButtonMaterialStepButton</p>
-  );
-};
-
-MaterialStepButton.defaultProps = {
-  className: '',
-  value: '',
-  placeholder: '',
-  error: false,
-  views: ['year', 'month', 'day'],
-  format: 'dd/MM/yyyy',
-  openTo: 'year',
-  onChange: () => {}
-};
-
-export default MaterialStepButton;
+import React from 'react';
+// import deLocale from 'date-fns/locale/de';
+// import enLocale from 'date-fns/locale/en-US';
+// import {
+//   LocalizationProvider,
+//   CalendarPickerView,
+//   DatePicker
+// } from '@mui/x-date-pickers';
+// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+
+import TextField from '@mui/material/TextField';
+import classnames from 'classnames';
+import styles from './MaterialStepButton.styl';
+
+interface IMaterialDatePicker {
+  language?: string;
+  className?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  value?: string;
+  placeholder?: string;
+  // openTo?: CalendarPickerView;
+  // views?: CalendarPickerView[];
+  format?: string;
+  error?: boolean;
+  onChange: (value: Date) => void;
+}
+
+const MaterialStepButton: React.FC<IMaterialDatePicker> = ({
+
+}: IMaterialDatePicker) => {
+
+  const localeMap: {
+    [key: string]: any
+  } = {
+    // en: enLocale,
+    // de: deLocale
+  };
+
+  // const wrapperClassName = classnames(
+  //   styles.inputBirthday,
+  //   className
+  // );
+
+  return (
+    <p>MaterialStepButtonMaterialStepButtonMaterialStepButtonMaterialStepButton</p>
+  );
+};
+
+MaterialStepButton.defaultProps = {
+  className: '',
+  value: '',
+  placeholder: '',
+  error: false,
+  views: ['year', 'month', 'day'],
+  format: 'dd/MM/yyyy',
+  openTo: 'year',
+  onChange: () => {}
+};
+
+export default MaterialStepButton;

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

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import MaterialSwitch from './MaterialSwitch';
-
-const Switch = () => {
-  const [value, setValue] = useState(false);
-
-  const onChange = (checked) => {
-    setValue(checked);
-  };
-
-  return <MaterialSwitch value={value} onChange={onChange} label='switcher' />
-}
-
-
-storiesOf('_Common_UI', module)
-  .add('MaterialSwitch', () => <Switch />)
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialSwitch from './MaterialSwitch';
+
+const Switch = () => {
+  const [value, setValue] = useState(false);
+
+  const onChange = (checked) => {
+    setValue(checked);
+  };
+
+  return <MaterialSwitch value={value} onChange={onChange} label='switcher' />
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('MaterialSwitch', () => <Switch />)

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

@@ -1,5 +1,5 @@
-import { styled } from '@mui/system';
-
-export const BaseModalWrapper = styled('div')({
-
-});
+import { styled } from '@mui/system';
+
+export const BaseModalWrapper = styled('div')({
+
+});

package/source/components/_common/MaterialSwitch/MaterialSwitch.tsx

@@ -1,37 +1,37 @@
-import React, { useState } from 'react';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-interface IMaterialSwitch {
-  value: boolean;
-  disabled?: boolean;
-  onChange: (value: boolean) => void;
-  label?: any;
-  sx?: any;
-  labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
-}
-
-const MaterialSwitch = ({ disabled, label, onChange, value = false, sx, labelPlacement }: IMaterialSwitch) => {
-  const [checked, setChecked] = useState(value);
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(event.target.checked);
-    onChange(event.target.checked);
-  };
-  return (
-    <FormControlLabel
-      label={label}
-      sx={sx}
-      labelPlacement={labelPlacement}
-      control={
-        <Switch
-          checked={value || checked}
-          onChange={handleChange}
-          disabled={disabled}
-          onClick={e => e.stopPropagation()}
-        />
-      }
-    />
-  );
-};
-
-export default MaterialSwitch;
+import React, { useState } from 'react';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+interface IMaterialSwitch {
+  value: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+  label?: any;
+  sx?: any;
+  labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
+}
+
+const MaterialSwitch = ({ disabled, label, onChange, value = false, sx, labelPlacement }: IMaterialSwitch) => {
+  const [checked, setChecked] = useState(value);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+    onChange(event.target.checked);
+  };
+  return (
+    <FormControlLabel
+      label={label}
+      sx={sx}
+      labelPlacement={labelPlacement}
+      control={
+        <Switch
+          checked={value || checked}
+          onChange={handleChange}
+          disabled={disabled}
+          onClick={e => e.stopPropagation()}
+        />
+      }
+    />
+  );
+};
+
+export default MaterialSwitch;

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

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import MaterialTooltip from './MaterialTooltip';
-
-const Tooltip = () => {
-  return <MaterialTooltip text='info text' icon='infoIcon' />
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialTooltip', () => <Tooltip />)
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialTooltip from './MaterialTooltip';
+
+const Tooltip = () => {
+  return <MaterialTooltip text='info text' icon='infoIcon' />
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialTooltip', () => <Tooltip />)

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

@@ -1,24 +1,24 @@
-import { styled } from '@mui/system';
-import IconSVG from '../IconSVG/IconSVG';
-import { createTheme } from '@mui/material/styles';
-
-export const IconSvgWrapper = styled(IconSVG)(props => ({
-  fill: props.disabled ? '#4C4E6442' : '#4C4E648A',
-  width: '10px',
-  height: '10px'
-}));
-
-export const TooltipWrapper = styled('div')(() => ({
-  // zIndex: props.zindex ? props.zindex : 9996,
-  display: 'inline-block'
-}));
-
-export const Theme = createTheme({
-  components: {
-    MuiTooltip: {
-      styleOverrides: {
-
-      }
-    }
-  }
-});
+import { styled } from '@mui/system';
+import IconSVG from '../IconSVG/IconSVG';
+import { createTheme } from '@mui/material/styles';
+
+export const IconSvgWrapper = styled(IconSVG)(props => ({
+  fill: props.disabled ? '#4C4E6442' : '#4C4E648A',
+  width: '10px',
+  height: '10px'
+}));
+
+export const TooltipWrapper = styled('div')(() => ({
+  // zIndex: props.zindex ? props.zindex : 9996,
+  display: 'inline-block'
+}));
+
+export const Theme = createTheme({
+  components: {
+    MuiTooltip: {
+      styleOverrides: {
+
+      }
+    }
+  }
+});

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -1,87 +1,87 @@
-import React, { useState } from 'react';
-import IconButton from '@mui/material/IconButton';
-import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-import { styled, ThemeProvider } from '@mui/material/styles';
-import { IconSvgWrapper, Theme, TooltipWrapper } from './MaterialTooltip.styled';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { debounce } from 'lodash';
-
-interface IMaterialTooltip {
-  text: string;
-  icon?: string;
-  className?: string;
-  placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
-  disabled?: Boolean;
-  zindex?: number;
-}
-
-const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} classes={{ popper: className }} />
-))(({ zindex }: { zindex: number }) => ({
-  zIndex: zindex ? zindex : 9996,
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: '#fff',
-    color: '#4C4E64AD',
-    border: '1px solid rgb(60 60 60 / 22%)',
-    fontSize: 10,
-    padding: '4px 8px',
-    maxWidth: '149px',
-    borderRadius: 6,
-    background: '#FFFFFF',
-    boxShadow: '0px 0px 1px -2px rgba(76, 78, 100, 0.2), 0px 0px 2px rgba(76, 78, 100, 0.14), 0px 0px 5px rgba(76, 78, 100, 0.12)'
-  }
-}));
-
-const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const onHandleMenuOpen = (event: any) => {
-    event.persist();
-    event.preventDefault();
-    setIsOpen(true);
-  };
-
-  const onHandleMenuClose = () => {
-    setIsOpen(false);
-  };
-
-  const onHandleMenuToggle = debounce(
-    (_: any) => {
-      setIsOpen(() => !isOpen);
-    },
-    50
-  );
-
-  return (
-    <ThemeProvider theme={Theme}>
-      <ClickAwayListener touchEvent={'onTouchStart'} onClickAway={onHandleMenuClose}>
-        <TooltipWrapper>
-          <LightTooltip
-            open={isOpen}
-            onMouseOver={onHandleMenuOpen}
-            onMouseLeave={onHandleMenuClose}
-            onClose={onHandleMenuClose}
-            onTouchEnd={onHandleMenuToggle}
-            placement={placement}
-            title={text}
-            enterTouchDelay={0}
-            leaveTouchDelay={10000}
-            disableFocusListener
-            disableTouchListener
-            className={className}
-            zindex={zindex}
-            PopperProps={{
-              disablePortal: true
-            }}
-          >
-            <IconButton>
-              <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
-            </IconButton>
-          </LightTooltip>
-        </TooltipWrapper>
-      </ClickAwayListener>
-    </ThemeProvider>
-  );
-};
-
-export default MaterialTooltip;
+import React, { useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { styled, ThemeProvider } from '@mui/material/styles';
+import { IconSvgWrapper, Theme, TooltipWrapper } from './MaterialTooltip.styled';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { debounce } from 'lodash';
+
+interface IMaterialTooltip {
+  text: string;
+  icon?: string;
+  className?: string;
+  placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+  disabled?: Boolean;
+  zindex?: number;
+}
+
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ zindex }: { zindex: number }) => ({
+  zIndex: zindex ? zindex : 9996,
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: '#fff',
+    color: '#4C4E64AD',
+    border: '1px solid rgb(60 60 60 / 22%)',
+    fontSize: 10,
+    padding: '4px 8px',
+    maxWidth: '149px',
+    borderRadius: 6,
+    background: '#FFFFFF',
+    boxShadow: '0px 0px 1px -2px rgba(76, 78, 100, 0.2), 0px 0px 2px rgba(76, 78, 100, 0.14), 0px 0px 5px rgba(76, 78, 100, 0.12)'
+  }
+}));
+
+const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onHandleMenuOpen = (event: any) => {
+    event.persist();
+    event.preventDefault();
+    setIsOpen(true);
+  };
+
+  const onHandleMenuClose = () => {
+    setIsOpen(false);
+  };
+
+  const onHandleMenuToggle = debounce(
+    (_: any) => {
+      setIsOpen(() => !isOpen);
+    },
+    50
+  );
+
+  return (
+    <ThemeProvider theme={Theme}>
+      <ClickAwayListener touchEvent={'onTouchStart'} onClickAway={onHandleMenuClose}>
+        <TooltipWrapper>
+          <LightTooltip
+            open={isOpen}
+            onMouseOver={onHandleMenuOpen}
+            onMouseLeave={onHandleMenuClose}
+            onClose={onHandleMenuClose}
+            onTouchEnd={onHandleMenuToggle}
+            placement={placement}
+            title={text}
+            enterTouchDelay={0}
+            leaveTouchDelay={10000}
+            disableFocusListener
+            disableTouchListener
+            className={className}
+            zindex={zindex}
+            PopperProps={{
+              disablePortal: true
+            }}
+          >
+            <IconButton>
+              <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
+            </IconButton>
+          </LightTooltip>
+        </TooltipWrapper>
+      </ClickAwayListener>
+    </ThemeProvider>
+  );
+};
+
+export default MaterialTooltip;

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

@@ -1,49 +1,49 @@
-import React, { useEffect, useState } from 'react';
-import useModal from '../../../framework/hooks/useModal';
-import { updateCookieList } from '../../../framework/utils/CommonUtils';
-import Modal from './Modal';
-
-export interface ICookieModal {
-  handleSentryInit?: () => void;
-}
-
-const CookieModal = ({ handleSentryInit }: ICookieModal) => {
-  const { isVisible, toggleModal } = useModal();
-  const [modal, setModal] = useState('');
-
-  useEffect(
-    () => {
-      const cookieConfig = localStorage.getItem('cookieConfig');
-      if (!cookieConfig) {
-        setModal('PREVIEW_COOKIE_MODAL');
-        toggleModal();
-      } else setTimeout(() => { updateCookieList(handleSentryInit); }, 3000);
-    },
-    []
-  );
-
-  const onClearModalState = () => {
-    setModal('');
-  };
-
-  const modalProps = {
-    onClearModalState,
-    setModal
-  };
-
-  return isVisible
-    ? <Modal
-        isVisible={isVisible}
-        handleSentryInit={handleSentryInit}
-        toggleModal={toggleModal}
-        name={modal}
-        modalProps={modalProps}
-      />
-    : <></>;
-};
-
-CookieModal.defaultProps = {
-  handleSentryInit: () => {}
-};
-
-export default CookieModal;
+import React, { useEffect, useState } from 'react';
+import useModal from '../../../framework/hooks/useModal';
+import { updateCookieList } from '../../../framework/utils/CommonUtils';
+import Modal from './Modal';
+
+export interface ICookieModal {
+  handleSentryInit?: () => void;
+}
+
+const CookieModal = ({ handleSentryInit }: ICookieModal) => {
+  const { isVisible, toggleModal } = useModal();
+  const [modal, setModal] = useState('');
+
+  useEffect(
+    () => {
+      const cookieConfig = localStorage.getItem('cookieConfig');
+      if (!cookieConfig) {
+        setModal('PREVIEW_COOKIE_MODAL');
+        toggleModal();
+      } else setTimeout(() => { updateCookieList(handleSentryInit); }, 3000);
+    },
+    []
+  );
+
+  const onClearModalState = () => {
+    setModal('');
+  };
+
+  const modalProps = {
+    onClearModalState,
+    setModal
+  };
+
+  return isVisible
+    ? <Modal
+        isVisible={isVisible}
+        handleSentryInit={handleSentryInit}
+        toggleModal={toggleModal}
+        name={modal}
+        modalProps={modalProps}
+      />
+    : <></>;
+};
+
+CookieModal.defaultProps = {
+  handleSentryInit: () => {}
+};
+
+export default CookieModal;

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

@@ -1,37 +1,37 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import useModal from '../../../framework/hooks/useModal';
-
-import Modal from './Modal';
-
-const ModalComponent = () => {
-  const { isVisible, toggleModal } = useModal();
-  const [modal, setModal] = useState('');
-
-  const onClearModalState = () => {
-    setModal('');
-  };
-
-  const onOpenCookieModal = () => {
-    setModal('PREVIEW_COOKIE_MODAL');
-    toggleModal();
-  };
-
-  const modalProps = {
-    onClearModalState,
-    setModal
-  }
-
-  return (
-    <>
-      <button onClick={onOpenCookieModal}>
-        open modal
-      </button>
-      <Modal isVisible={isVisible} toggleModal={toggleModal} name={modal} modalProps={modalProps} />
-    </>
-  )
-}
-
-
-storiesOf('_Common_UI', module)
-  .add('Modal', () => <ModalComponent />)
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import useModal from '../../../framework/hooks/useModal';
+
+import Modal from './Modal';
+
+const ModalComponent = () => {
+  const { isVisible, toggleModal } = useModal();
+  const [modal, setModal] = useState('');
+
+  const onClearModalState = () => {
+    setModal('');
+  };
+
+  const onOpenCookieModal = () => {
+    setModal('PREVIEW_COOKIE_MODAL');
+    toggleModal();
+  };
+
+  const modalProps = {
+    onClearModalState,
+    setModal
+  }
+
+  return (
+    <>
+      <button onClick={onOpenCookieModal}>
+        open modal
+      </button>
+      <Modal isVisible={isVisible} toggleModal={toggleModal} name={modal} modalProps={modalProps} />
+    </>
+  )
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('Modal', () => <ModalComponent />)