@m4l/components 0.1.40 → 0.1.41

package/components/animate/variants/bounce.d.ts

@@ -0,0 +1,136 @@
+import { VariantsType } from '../type';
+export declare const varBounce: (props?: VariantsType | undefined) => {
+    in: {
+        initial: {};
+        animate: {
+            scale: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    inUp: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inDown: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inLeft: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inRight: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    out: {
+        animate: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    outUp: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outDown: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outLeft: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+    outRight: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+};

package/components/animate/variants/container.11f82b76.js

@@ -0,0 +1,22 @@
+const varContainer = (props) => {
+  const staggerIn = props?.staggerIn || 0.05;
+  const delayIn = props?.staggerIn || 0.05;
+  const staggerOut = props?.staggerIn || 0.05;
+  return {
+    animate: {
+      transition: {
+        staggerChildren: staggerIn,
+        delayChildren: delayIn
+      }
+    },
+    exit: {
+      transition: {
+        staggerChildren: staggerOut,
+        staggerDirection: -1
+      }
+    }
+  };
+};
+export {
+  varContainer as v
+};

package/components/animate/variants/container.d.ts

@@ -0,0 +1,19 @@
+export declare type Props = {
+    staggerIn?: number;
+    delayIn?: number;
+    staggerOut?: number;
+};
+export declare const varContainer: (props?: Props | undefined) => {
+    animate: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    exit: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};

package/components/animate/variants/fade.b561c0fc.js

@@ -0,0 +1,63 @@
+import { v as varTranEnter, a as varTranExit } from "./transition.bd46b9ce.js";
+const varFade = (props) => {
+  const distance = props?.distance || 120;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+  return {
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: varTranEnter },
+      exit: { opacity: 0, transition: varTranExit }
+    },
+    inUp: {
+      initial: { y: distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inDown: {
+      initial: { y: -distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inLeft: {
+      initial: { x: -distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inRight: {
+      initial: { x: distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    }
+  };
+};
+export {
+  varFade as v
+};

package/components/animate/variants/fade.d.ts

@@ -0,0 +1,217 @@
+import { VariantsType } from '../type';
+export declare const varFade: (props?: VariantsType | undefined) => {
+    in: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: (props?: import("../type").TranEnterType | undefined) => {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            opacity: number;
+            transition: (props?: import("../type").TranExitType | undefined) => {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inRight: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    out: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outRight: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+};

package/components/animate/variants/index.7a912140.js

@@ -0,0 +1 @@
+

package/components/animate/variants/index.d.ts

@@ -0,0 +1,4 @@
+export * from './fade';
+export * from './bounce';
+export * from './container';
+export * from './transition';

package/components/animate/variants/transition.bd46b9ce.js

@@ -0,0 +1,20 @@
+const varTranHover = (props) => {
+  const duration = props?.duration || 0.32;
+  const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+const varTranEnter = (props) => {
+  const duration = props?.durationIn || 0.64;
+  const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+const varTranExit = (props) => {
+  const duration = props?.durationOut || 0.48;
+  const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+export {
+  varTranExit as a,
+  varTranHover as b,
+  varTranEnter as v
+};

package/components/animate/variants/transition.d.ts

@@ -0,0 +1,13 @@
+import { TranHoverType, TranEnterType, TranExitType } from '../type';
+export declare const varTranHover: (props?: TranHoverType | undefined) => {
+    duration: number;
+    ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+};
+export declare const varTranEnter: (props?: TranEnterType | undefined) => {
+    duration: number;
+    ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+};
+export declare const varTranExit: (props?: TranExitType | undefined) => {
+    duration: number;
+    ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+};

package/components/areas/components/Area/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AreaProps } from './types';
+export declare const Area: {
+    (props: AreaProps): JSX.Element;
+    displayName: string;
+};

package/components/areas/components/Area/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperArea: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/areas/components/Area/types.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { DynamicMFParameters, IsolationDynamicMFParameters } from '../../contexts/DynamicMFParmsContext/types';
+import type { Layout } from 'react-grid-layout';
+export declare type WinType = 'microfrontend' | 'component';
+export declare type EmergeType = 'layout' | 'popup' | 'modal';
+export interface MFBaseProps {
+    module_id: string;
+    debug_port: number;
+    cache?: boolean;
+    dynamicParams?: IsolationDynamicMFParameters;
+    prefix: string;
+}
+export interface MicroFrontendProps extends MFBaseProps {
+    dynamicParams?: DynamicMFParameters;
+}
+export interface WindowBaseProps {
+    winType: WinType;
+    emergeType: EmergeType;
+    container_id: string;
+    url_icon: string;
+    title: string;
+    onClose?: (layoutId: string) => void;
+}
+export interface LayoutBaseProps extends WindowBaseProps {
+    emergeType: 'layout';
+    layoutProps: Omit<Layout, 'i'>;
+}
+export interface LayoutMFProps extends LayoutBaseProps {
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+}
+export interface LayoutComponentProps extends LayoutBaseProps {
+    winType: 'component';
+    component: ReactNode;
+}
+export declare type LayoutProps = LayoutMFProps | LayoutComponentProps;
+export declare type NewLayoutProps = Omit<LayoutMFProps, 'container_id' | 'onClose'> | Omit<LayoutComponentProps, 'container_id' | 'onClose'>;
+export interface HashWindowsByLayouts {
+    [P: string]: LayoutProps;
+}
+export declare type Position = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface PopUpBaseProps extends WindowBaseProps {
+    emergeType: 'popup';
+    zIndex?: number;
+    windowProps: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
+}
+export interface PopUpMFProps extends PopUpBaseProps {
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+}
+export interface PopUpComponentProps extends PopUpBaseProps {
+    winType: 'component';
+    component: ReactNode;
+}
+export declare type PopUpProps = PopUpMFProps | PopUpComponentProps;
+export declare type NewPopUpProps = Omit<PopUpMFProps, 'container_id' | 'onClose'> | Omit<PopUpComponentProps, 'container_id' | 'onClose'>;
+export interface ModalBaseProps extends WindowBaseProps {
+    emergeType: 'modal';
+    zIndex?: number;
+    position?: Position;
+}
+export interface ModalMFProps extends ModalBaseProps {
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+}
+export interface ModalComponentProps extends ModalBaseProps {
+    winType: 'component';
+    component: ReactNode;
+}
+export declare type ModalProps = ModalMFProps | ModalComponentProps;
+export declare type NewModalProps = Omit<ModalMFProps, 'container_id' | 'onClose'> | Omit<ModalComponentProps, 'container_id' | 'onClose'>;
+export declare type WindowProps = LayoutProps | PopUpProps | ModalProps;
+export declare type NewWindowProps = NewLayoutProps | NewPopUpProps | NewModalProps;
+export interface AreaType {
+    id: string;
+    name: string;
+    loadWindows?: boolean;
+}
+export interface AreaProps extends Omit<AreaType, 'url_icon' | 'name'> {
+    active: boolean;
+}
+export declare type AreaRef = {
+    addWindow?: (newWindow: NewWindowProps) => string;
+    current: {
+        divRef: HTMLDivElement | null;
+    };
+};