@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/custom-components/AgIconButton/RIf.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const RIf = ({ show, children }) => {
+  if (show) return <>{children}</>;
+  return null;
+};
+
+export default RIf;
+
+RIf.propTypes = {
+  show: PropTypes.any,
+  children: PropTypes.any,
+};

package/src/views/custom-components/AgIconButton/button.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import RIf from './RIf';
+import WaterDropWrapper from './waterDrop';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import PropTypes from 'prop-types';
+
+/**
+ * A water-drop effect button component.
+*
+* @example
+ * <AgButton onClick={() => {}} label="Click me" className="btn-md-fill-primary" suffix={<i className="ri-arrow-right-line" />} prefix={<i className="ri-arrow-left-line" />} />
+*
+* @param {string} [className] - The class name to be applied to the button can be customized using the format "btn-1-2-3", where:
+
+1 can be sm, md, or lg (representing size),
+
+2 can be fill, outlined, text, or link (representing style), and
+
+3 can be primary, secondary, light, or error (representing theme)."
+
+* @param {boolean} [disabled=false] - Whether the button is disabled or not.
+* @param {function} onClick - Function to be called when the button is clicked.
+* @param {string} label - The label of the button.
+* @param {React.ReactNode} [suffix=null] - The suffix component to be rendered.
+* @param {React.ReactNode} [prefix=null] - The prefix component to be rendered.
+* @param {React.ReactNode} [children=null] - The children component to be rendered.
+* @returns {React.ReactElement} The button component.
+*/
+
+export function AgButton({ className, disabled, onClick, label, suffix, prefix, children, type }) {
+const { translate } = useTranslateProvider();
+  return (
+    <WaterDropWrapper className={'rounded-md'} disabled={disabled} onClick={onClick}>
+      <button
+        className={`inline-flex items-center gap-x-1 ${className || 'btn-md-fill-primary'}`}
+        disabled={disabled}
+        type={type}
+      >
+        <RIf show={children}>{children}</RIf>
+        <RIf show={!children}>
+          {/* <div className="inline-flex items-center gap-x-1"> */}
+          <RIf show={prefix}>
+            <div className="start-adornment -ml-2">{prefix}</div>
+          </RIf>
+          <div className="text-label grow">
+            <span>{translate(label)}</span>
+          </div>
+          <RIf show={suffix}>
+            <div className="end-adornment">{suffix}</div>
+          </RIf>
+          {/* </div> */}
+        </RIf>
+      </button>
+    </WaterDropWrapper>
+  );
+}
+
+AgButton.propTypes = {
+  className: PropTypes.any,
+  onClick: PropTypes.any,
+  disabled: PropTypes.any,
+  label: PropTypes.any,
+  suffix: PropTypes.any,
+  prefix: PropTypes.any,
+  children: PropTypes.any,
+  type: PropTypes.any,
+};
+
+/**
+ * An icon button component with a water-drop effect.
+ *
+ * @param {string} [className] - The class name to be applied to the button can be customized using the format "icon-btn-1-2-3", where:
+
+    1 can be sm, md, or lg (representing size),
+
+    2 can be fill, outlined, text, or link (representing style), and
+
+    3 can be primary, secondary, light, or error (representing theme)."
+Note: If you want background to be transparent, use "bg-transparent"
+
+ * @param {boolean} [disabled=false] - Whether the button is disabled or not.
+ * @param {function} onClick - Function to be called when the button is clicked.
+ * @param {React.ReactNode} [icon=null] - The icon component to be rendered.
+ * @returns {React.ReactElement} The icon button component.
+ */
+export function AgIconButton({ className, onClick, disabled, icon }) {
+  return (
+    <WaterDropWrapper disabled={disabled} onClick={onClick}>
+      <button
+        className={`${className || 'icon-btn-md-fill-primary'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        disabled={disabled}
+        type="button"
+      >
+        <RIf show={icon}>{icon}</RIf>
+        <RIf show={!icon}>
+          <i className="ri-circle-line"></i>
+        </RIf>
+      </button>
+    </WaterDropWrapper>
+  );
+}
+
+AgIconButton.propTypes = {
+  className: PropTypes.any,
+  onClick: PropTypes.any,
+  disabled: PropTypes.any,
+  icon: PropTypes.any,
+};

package/src/views/custom-components/AgIconButton/waterDrop.jsx

@@ -0,0 +1,95 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./waterDrop.scss";
+import PropTypes from "prop-types";
+
+const WaterDropWrapper = ({ className = "", disabled, children, onClick }) => {
+  const wrapperRef = useRef(null);
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const [ripple, setRipple] = useState(null);
+  const [fadeOut, setFadeOut] = useState(false);
+
+  const handleMouseDown = (e) => {
+    if (disabled) return;
+
+    const rect = wrapperRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    setRipple({ x, y, size: Math.max(rect.width * 2, rect.height * 2) });
+    setIsMouseDown(true);
+    setFadeOut(false);
+  };
+
+  const getIsMouseDown = () => isMouseDown;
+
+  const handleMouseUp = (e) => {
+    if (disabled) return;
+    setIsMouseDown(false);
+    setFadeOut(true);
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (disabled) return;
+    setIsMouseDown(false);
+    setFadeOut(true);
+  };
+
+  useEffect(() => {
+    if (!ripple) return;
+
+    let timeoutId;
+
+    if (fadeOut) {
+      timeoutId = setTimeout(() => {
+        setRipple(null); // Remove ripple after fade-out
+      }, 300); // Match fade-out transition duration
+    } else {
+      timeoutId = setTimeout(() => {
+        if (getIsMouseDown()) return;
+        setRipple(null);
+      }, 500);
+    } // Adjust duration as needed
+
+    return () => clearTimeout(timeoutId);
+  }, [ripple, fadeOut]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={`water-drop-wrapper ${className}`}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseLeave}
+    >
+      {!disabled && ripple && (
+        <span
+          className={`ripple ${fadeOut ? "fade-out" : ""}`}
+          style={{
+            left: ripple.x,
+            top: ripple.y,
+            width: ripple.size,
+            height: ripple.size,
+          }}
+        />
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default WaterDropWrapper;
+
+
+WaterDropWrapper.propTypes = {
+  className: PropTypes.any,
+  onClick: PropTypes.any,
+  disabled: PropTypes.any,
+  label: PropTypes.any,
+  suffix: PropTypes.any,
+  prefix: PropTypes.any,
+  children: PropTypes.any,
+  type: PropTypes.any,
+};

package/src/views/custom-components/AgIconButton/waterDrop.scss

@@ -0,0 +1,37 @@
+.water-drop-wrapper {
+  padding: 0;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  /* Crucial for clipping the ripple */
+  cursor: pointer;
+  height: fit-content;
+  /* Add any other styling for your wrapper here */
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  background: rgba(0, 0, 0, 0.15);
+  /* Adjust ripple color and opacity */
+  animation: ripple-effect 0.5s ease-out forwards;
+  /* Adjust animation duration */
+  pointer-events: none;
+  /* Prevents the ripple from interfering with other clicks */
+
+  transition: opacity 0.3s ease-out;
+  /* Add transition for fade-out */
+}
+
+.ripple.fade-out {
+  opacity: 0;
+  /* Fade out to 0 opacity */
+}
+
+@keyframes ripple-effect {
+  to {
+    transform: translate(-50%, -50%) scale(1);
+    // opacity: 0;
+  }
+}

package/src/views/custom-components/AlertPlaceholder.jsx

@@ -0,0 +1,32 @@
+import { Alert } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const AlertPlaceholder = ({ severity = 'info', variant = 'outlined', height = '100%', children }) => {
+  return (
+    <Alert
+      severity={severity}
+      variant={variant}
+      sx={{
+        p: 2,
+        height: height,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textAlign: 'center',
+        fontSize: '1.2rem',
+      }}
+    >
+      {children}
+    </Alert>
+  );
+};
+
+AlertPlaceholder.propTypes = {
+  severity: PropTypes.string,
+  variant: PropTypes.string,
+  height: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default AlertPlaceholder;

package/src/views/custom-components/AllFaIconsSelector.jsx

@@ -0,0 +1,56 @@
+import React, { memo } from "react";
+import { FontAwesomeIconsNames } from "@/common/fontAwesomeIcons/FontAwesomeIconsNames";
+import Grid from "@mui/material/Grid2";
+import { Alert, ButtonBase, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { showToast } from "@/common/toaster/toaster";
+import FontAwesomeIcons from "@/common/fontAwesomeIcons/FontAwesomeIcons";
+
+const AllFaIconsSelector = () => {
+  return (
+    <Box sx={{ backgroundColor: "background.paper", my: 2, p: 2 }}>
+      <Alert severity="info" variant="outlined">
+        Click on the icon to copy its code
+      </Alert>
+      <Grid container spacing={3} flexWrap="wrap" sx={{ my: 1 }}>
+        {FontAwesomeIconsNames.map((icon) => (
+          <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={icon}>
+            <ButtonBase
+              sx={{ display: "flow", width: "100%", borderRadius: "0.5rem" }}
+            >
+              <Box
+                sx={{
+                  m: 1,
+                  p: 1,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  flexDirection: "column",
+                  backgroundColor: "background.default",
+                  borderRadius: "0.5rem",
+                }}
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    `<FontAwesomeIcons iconName="${icon}" />`
+                  );
+                  showToast({
+                    message: `${icon} icon copied`,
+                    type: "success",
+                  });
+                }}
+                key={icon}
+              >
+                <Box sx={{ mb: 1 }}>
+                  <FontAwesomeIcons iconName={icon} size={"2xl"} />
+                </Box>
+                <Typography>{icon}</Typography>
+              </Box>
+            </ButtonBase>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default memo(AllFaIconsSelector);

package/src/views/custom-components/CkEditor/CkEditor.js

@@ -0,0 +1,102 @@
+import {
+  ClassicEditor as BaseClassicEditor,
+  Essentials,
+  CKFinderUploadAdapter,
+  Autoformat,
+  Bold,
+  Italic,
+  BlockQuote,
+  CKBox,
+  CKFinder,
+  EasyImage,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  PictureEditing,
+  Indent,
+  Link,
+  List,
+  MediaEmbed,
+  Paragraph,
+  PasteFromOffice,
+  Table,
+  TableToolbar,
+  TextTransformation,
+  CloudServices,
+} from 'ckeditor5';
+
+import 'ckeditor5/ckeditor5.css';
+
+export default class Editor extends BaseClassicEditor {}
+
+Editor.builtinPlugins = [
+  Essentials,
+  CKFinderUploadAdapter,
+  Autoformat,
+  Bold,
+  Italic,
+  BlockQuote,
+  CKBox,
+  CKFinder,
+  CloudServices,
+  EasyImage,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Indent,
+  Link,
+  List,
+  MediaEmbed,
+  Paragraph,
+  PasteFromOffice,
+  PictureEditing,
+  Table,
+  TableToolbar,
+  TextTransformation,
+];
+
+Editor.defaultConfig = {
+  licenseKey: 'GPL',
+  toolbar: {
+    items: [
+      'undo',
+      'redo',
+      '|',
+      'heading',
+      '|',
+      'bold',
+      'italic',
+      '|',
+      'link',
+      'uploadImage',
+      'insertTable',
+      'blockQuote',
+      'mediaEmbed',
+      '|',
+      'bulletedList',
+      'numberedList',
+      'outdent',
+      'indent',
+    ],
+  },
+  image: {
+    toolbar: [
+      'imageStyle:inline',
+      'imageStyle:block',
+      'imageStyle:side',
+      '|',
+      'toggleImageCaption',
+      'imageTextAlternative',
+    ],
+  },
+  table: {
+    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
+  },
+  language: 'en',
+};

package/src/views/custom-components/CustomAccordion.jsx

@@ -0,0 +1,72 @@
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+
+
+/**
+ * A customizable Accordion component using MUI.
+ *
+ * Props:
+ * - title:          The header content of the accordion.
+ * - children:       The content displayed when expanded.
+ * - expanded:       Boolean to control whether this panel is expanded.
+ * - onChange:       Callback (event, isExpanded) => void, forwarded to Accordion.
+ * - disabled:       Boolean to disable the accordion.
+ * - summaryProps:   Additional props to pass to AccordionSummarTeleconsultationy.
+ * - detailsProps:   Additional props to pass to AccordionDetails.
+ * - accordionProps: Other props to pass to Accordion.
+ */
+export default function CustomAccordion({
+  title,
+  children,
+  expanded = false,
+  onChange,
+  disabled,
+  summaryProps,
+  detailsProps,
+  dataTestId,
+  headerHeight = null,
+  iconRequired = true,
+  ...props
+}) {
+  return (
+    <Accordion expanded={expanded} onChange={onChange} disabled={disabled} {...props} data-testid={dataTestId}>
+      <AccordionSummary
+        expandIcon={iconRequired && <FontAwesomeIcon icon={faChevronDown} className="pl-2" />}
+        {...summaryProps}
+        className="bg-gray-100 font-bold"
+        data-testid={`${dataTestId}-title`}
+        sx={{
+          '&.Mui-expanded': {
+            minHeight: headerHeight || 64,
+          },
+          '& .MuiAccordionSummary-content.Mui-expanded': {
+            margin: 0,
+          },
+        }}
+      >
+        {title}
+      </AccordionSummary>
+
+      <AccordionDetails {...detailsProps} className="bg-white" data-testid={`${dataTestId}-children`}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+CustomAccordion.propTypes = {
+  title: PropTypes.any,
+  children: PropTypes.any,
+  expanded: PropTypes.any,
+  onChange: PropTypes.any,
+  disabled: PropTypes.any,
+  summaryProps: PropTypes.any,
+  detailsProps: PropTypes.any,
+  accordionProps: PropTypes.any,
+  props: PropTypes.any,
+  dataTestId: PropTypes.any,
+  headerHeight: PropTypes.any,
+  iconRequired: PropTypes.any,
+};

package/src/views/custom-components/CustomActionIcons.jsx

@@ -0,0 +1,118 @@
+import { Button, Menu, MenuItem, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+function CustomActionIcons({
+  icon,
+  onClick,
+  menuItems,
+  row,
+  menuClick,
+  disabled,
+  dataTestId = 'icon',
+  iconColor = 'primary',
+  backgroundColor = 'blue',
+  hoverBackgroundColor = 'gray',
+  hoverIconColor = 'primary',
+  rotateIcon = false,
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const [isHovered, setIsHovered] = useState(false);
+  const handleClick = (event) => {
+    if (menuClick) {
+      menuClick(row);
+    }
+    if (menuItems && menuItems.length > 0) {
+      setAnchorEl(event.currentTarget);
+    } else if (onClick) {
+      onClick();
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <div
+        onClick={handleClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={
+          icon?.props?.children
+            ? 'flex items-center justify-center bg-transparent shadow-none cursor-pointer transition-colors duration-300'
+            : 'w-10 h-10 rounded-full border border-customBlue flex items-center justify-center shadow-none cursor-pointer transition-colors duration-300'
+        }
+        style={{
+          backgroundColor: isHovered && hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
+        
+          transition: 'all 0.2s ease-in-out',
+          // 2. Add Scale (1.2x) and Tilt (12deg) based on hover state
+          transform: isHovered ? 'scale(1.1) ' : 'scale(1)',
+        }}
+      >
+        <Button
+          data-testid={dataTestId}
+          className="min-w-0  bg-transparent"
+          disabled={disabled}
+          sx={{
+            color: isHovered && hoverIconColor ? hoverIconColor : iconColor,
+            border: 'none',
+            '&:hover': {
+              border: 'none',
+              outline: 'none',
+            },
+            '&:focus': {
+              outline: 'none',
+            },
+
+            // 1. Add Smooth Transition
+            transition: 'all 0.2s ease-in-out',
+            // 2. Add Scale (1.2x) and Tilt (12deg) based on hover state
+            transform: isHovered
+              ? rotateIcon
+                ? 'scale(1.2) rotate(-12deg)'
+                : 'scale(1.2) rotate(0deg)'
+              : 'scale(1) rotate(0deg)',
+          }}
+        >
+          {React.cloneElement(icon, { sx: { fontSize: icon?.props?.sx?.fontSize || '21px' } })}
+        </Button>
+      </div>
+
+      {menuItems && menuItems.length > 0 && (
+        <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+          {menuItems.map((menuItem, index) => (
+            <MenuItem
+              key={index + 1}
+              onClick={() => {
+                menuItem.onClick(row);
+                handleClose();
+              }}
+            >
+              <Typography variant="body2"> {menuItem.label} </Typography>
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    </>
+  );
+}
+CustomActionIcons.propTypes = {
+  icon: PropTypes.any,
+  onClick: PropTypes.any,
+  menuItems: PropTypes.any,
+  row: PropTypes.any,
+  menuClick: PropTypes.any,
+  disabled: PropTypes.any,
+  dataTestId: PropTypes.any,
+  iconColor: PropTypes.any,
+  backgroundColor: PropTypes.any,
+  hoverBackgroundColor: PropTypes.any,
+  hoverIconColor: PropTypes.any,
+  rotateIcon: PropTypes.any,
+};
+
+export default CustomActionIcons;