react-frontend-common-components 0.0.77 → 0.0.79

package/src/components/app-collapse/app-collapse.tsx

@@ -1,57 +1,57 @@
-import React from "react";
-import { Collapse } from "antd";
-import { CollapseProps, CollapsePanelProps } from "antd/lib/collapse";
-
-const { Panel } = Collapse;
-
-interface AppCollapseProps extends CollapseProps {
-  panels?: {
-    key: string;
-    header: React.ReactNode;
-    content: React.ReactNode;
-    collapsible?: CollapsePanelProps["collapsible"];
-  }[];
-  className?: string;
-}
-
-const AppCollapse = ({
-  panels = [],
-  defaultActiveKey,
-  onChange,
-  expandIconPosition,
-  ghost,
-  accordion,
-  expandIcon,
-  size,
-  bordered,
-  activeKey,
-  className,
-  ...restProps
-}: AppCollapseProps) => {
-  const items = panels.map((panel) => ({
-    key: panel.key,
-    label: panel.header,
-    children: panel.content,
-    collapsible: panel.collapsible,
-  }));
-
-  return (
-    <div className={className}>
-      <Collapse
-        defaultActiveKey={defaultActiveKey}
-        onChange={onChange}
-        expandIconPosition={expandIconPosition}
-        ghost={ghost}
-        accordion={accordion}
-        expandIcon={expandIcon}
-        size={size}
-        bordered={bordered}
-        activeKey={activeKey}
-        items={items}
-        {...restProps}
-      />
-    </div>
-  );
-};
-
-export default AppCollapse;
+import React from "react";
+import { Collapse } from "antd";
+import { CollapseProps, CollapsePanelProps } from "antd/lib/collapse";
+
+const { Panel } = Collapse;
+
+interface AppCollapseProps extends CollapseProps {
+  panels?: {
+    key: string;
+    header: React.ReactNode;
+    content: React.ReactNode;
+    collapsible?: CollapsePanelProps["collapsible"];
+  }[];
+  className?: string;
+}
+
+const AppCollapse = ({
+  panels = [],
+  defaultActiveKey,
+  onChange,
+  expandIconPosition,
+  ghost,
+  accordion,
+  expandIcon,
+  size,
+  bordered,
+  activeKey,
+  className,
+  ...restProps
+}: AppCollapseProps) => {
+  const items = panels.map((panel) => ({
+    key: panel.key,
+    label: panel.header,
+    children: panel.content,
+    collapsible: panel.collapsible,
+  }));
+
+  return (
+    <div className={className}>
+      <Collapse
+        defaultActiveKey={defaultActiveKey}
+        onChange={onChange}
+        expandIconPosition={expandIconPosition}
+        ghost={ghost}
+        accordion={accordion}
+        expandIcon={expandIcon}
+        size={size}
+        bordered={bordered}
+        activeKey={activeKey}
+        items={items}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+export default AppCollapse;

package/src/components/app-custom-loader/app-custom-loader.css

@@ -1,116 +1,116 @@
-.wrapper {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: (0, 0, 0, 0.3);
-  backdrop-filter: blur(10px);
-  display: flex;
-  z-index: 99;
-}
-
-/*code for custom loading icon*/
-
-.loader {
-  position: relative;
-  width: 80px;
-  margin-left: 45%;
-  margin-top: 25%;
-}
-
-.loader span {
-  display: block;
-  transform-origin: 40px 40px;
-  animation: ding 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-}
-
-.loader span::before {
-  content: "";
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: rgb(0, 0, 0);
-  margin: -4px 0 0 -4px;
-}
-
-.loader span:nth-child(1) {
-  animation-delay: -0.36s;
-}
-
-.loader span:nth-child(1):before {
-  top: 63px;
-  left: 63px;
-}
-
-.loader span:nth-child(2) {
-  animation-delay: -0.72s;
-}
-
-.loader span:nth-child(2):before {
-  top: 68px;
-  left: 56px;
-}
-
-.loader span:nth-child(3) {
-  animation-delay: -0.108s;
-}
-
-.loader span:nth-child(3):before {
-  top: 71px;
-  left: 48px;
-}
-.loader span:nth-child(4) {
-  animation-delay: -0.144s;
-}
-
-.loader span:nth-child(4):before {
-  top: 72px;
-  left: 40px;
-}
-
-.loader span:nth-child(5) {
-  animation-delay: -0.18;
-}
-
-.loader span:nth-child(5):before {
-  top: 71px;
-  left: 32px;
-}
-
-.loader span:nth-child(6) {
-  animation-delay: -0.216s;
-}
-
-.loader span:nth-child(6):before {
-  top: 68px;
-  left: 24px;
-}
-
-.loader span:nth-child(7) {
-  animation-delay: -0.252s;
-}
-
-.loader span:nth-child(7):before {
-  top: 63px;
-  left: 17px;
-}
-
-.loader span:nth-child(8) {
-  animation-delay: -0.288s;
-}
-
-.loader span:nth-child(8):before {
-  top: 56px;
-  left: 12px;
-}
-
-@keyframes ding {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
+.wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: (0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  display: flex;
+  z-index: 99;
+}
+
+/*code for custom loading icon*/
+
+.loader {
+  position: relative;
+  width: 80px;
+  margin-left: 45%;
+  margin-top: 25%;
+}
+
+.loader span {
+  display: block;
+  transform-origin: 40px 40px;
+  animation: ding 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.loader span::before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgb(0, 0, 0);
+  margin: -4px 0 0 -4px;
+}
+
+.loader span:nth-child(1) {
+  animation-delay: -0.36s;
+}
+
+.loader span:nth-child(1):before {
+  top: 63px;
+  left: 63px;
+}
+
+.loader span:nth-child(2) {
+  animation-delay: -0.72s;
+}
+
+.loader span:nth-child(2):before {
+  top: 68px;
+  left: 56px;
+}
+
+.loader span:nth-child(3) {
+  animation-delay: -0.108s;
+}
+
+.loader span:nth-child(3):before {
+  top: 71px;
+  left: 48px;
+}
+.loader span:nth-child(4) {
+  animation-delay: -0.144s;
+}
+
+.loader span:nth-child(4):before {
+  top: 72px;
+  left: 40px;
+}
+
+.loader span:nth-child(5) {
+  animation-delay: -0.18;
+}
+
+.loader span:nth-child(5):before {
+  top: 71px;
+  left: 32px;
+}
+
+.loader span:nth-child(6) {
+  animation-delay: -0.216s;
+}
+
+.loader span:nth-child(6):before {
+  top: 68px;
+  left: 24px;
+}
+
+.loader span:nth-child(7) {
+  animation-delay: -0.252s;
+}
+
+.loader span:nth-child(7):before {
+  top: 63px;
+  left: 17px;
+}
+
+.loader span:nth-child(8) {
+  animation-delay: -0.288s;
+}
+
+.loader span:nth-child(8):before {
+  top: 56px;
+  left: 12px;
+}
+
+@keyframes ding {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/app-custom-loader/app-custom-loader.tsx

@@ -1,23 +1,23 @@
-import "./app-custom-loader.css";
-
-interface AppCustomLoaderProps {
-  className?: string;
-}
-
-const AppCustomLoader = ({ className }: AppCustomLoaderProps) => {
-  return (
-    <div className={`wrapper ${className}`}>
-      <div className={"loader"}>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-    </div>
-  );
-};
-export default AppCustomLoader;
+import "./app-custom-loader.css";
+
+interface AppCustomLoaderProps {
+  className?: string;
+}
+
+const AppCustomLoader = ({ className }: AppCustomLoaderProps) => {
+  return (
+    <div className={`wrapper ${className}`}>
+      <div className={"loader"}>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  );
+};
+export default AppCustomLoader;

package/src/components/app-divider/app-divider.tsx

@@ -1,16 +1,16 @@
-import React from "react";
-import { Divider, DividerProps } from "antd";
-
-interface AppDividerProps extends DividerProps {
-  className?: string;
-}
-
-const AppDivider = ({ className, ...props }: AppDividerProps) => {
-  return (
-    <div className={className}>
-      <Divider {...props} />
-    </div>
-  );
-};
-
-export default AppDivider;
+import React from "react";
+import { Divider, DividerProps } from "antd";
+
+interface AppDividerProps extends DividerProps {
+  className?: string;
+}
+
+const AppDivider = ({ className, ...props }: AppDividerProps) => {
+  return (
+    <div className={className}>
+      <Divider {...props} />
+    </div>
+  );
+};
+
+export default AppDivider;

package/src/components/app-float-button/app-float-button.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import { FloatButton, FloatButtonProps } from "antd";
-
-interface AppFloatButtonProps extends FloatButtonProps {
-  className?: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-const AppFloatButton = ({
-  className,
-  onClick,
-  onMouseEnter,
-  ...props
-}: AppFloatButtonProps) => {
-  return (
-    <div className={className}>
-      <FloatButton {...props} onClick={onClick} onMouseEnter={onMouseEnter} />
-    </div>
-  );
-};
-
-export default AppFloatButton;
+import React from "react";
+import { FloatButton, FloatButtonProps } from "antd";
+
+interface AppFloatButtonProps extends FloatButtonProps {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const AppFloatButton = ({
+  className,
+  onClick,
+  onMouseEnter,
+  ...props
+}: AppFloatButtonProps) => {
+  return (
+    <div className={className}>
+      <FloatButton {...props} onClick={onClick} onMouseEnter={onMouseEnter} />
+    </div>
+  );
+};
+
+export default AppFloatButton;

package/src/components/app-image-box/app-image-box.css

@@ -1,22 +1,22 @@
-.appImageBox {
-  width: max-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-
-  .ant-image {
-    border-radius: 50%;
-    overflow: hidden;
-
-    .ant-image-img {
-      border-radius: 50%;
-    }
-  }
-  .text {
-    font-size: 16px;
-    font-weight: 700;
-    line-height: normal;
-    color: #000000;
-  }
-}
+.appImageBox {
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .ant-image {
+    border-radius: 50%;
+    overflow: hidden;
+
+    .ant-image-img {
+      border-radius: 50%;
+    }
+  }
+  .text {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: normal;
+    color: #000000;
+  }
+}

package/src/components/app-image-box/app-image-box.tsx

@@ -1,42 +1,42 @@
-import React, { MouseEventHandler } from "react";
-import { Image } from "antd";
-import "./app-image-box.css";
-
-interface ImageType {
-  src: string;
-}
-
-interface AppImageBoxProps {
-  width?: number;
-  height?: number;
-  text?: string;
-  image: ImageType;
-  className?: string;
-  handleClick?: MouseEventHandler<HTMLElement>;
-}
-
-const AppImageBox = ({
-  width = 100,
-  height = 100,
-  text,
-  image,
-  className,
-  handleClick,
-}: AppImageBoxProps) => {
-  return (
-    <div className={`appImageBox ${className}`} onClick={handleClick}>
-      <Image
-        preview={false}
-        width={width}
-        height={height}
-        src={image.src}
-        alt={text}
-      />
-      {text && (
-        <span className={"text"} dangerouslySetInnerHTML={{ __html: text }} />
-      )}
-    </div>
-  );
-};
-
-export default AppImageBox;
+import React, { MouseEventHandler } from "react";
+import { Image } from "antd";
+import "./app-image-box.css";
+
+interface ImageType {
+  src: string;
+}
+
+interface AppImageBoxProps {
+  width?: number;
+  height?: number;
+  text?: string;
+  image: ImageType;
+  className?: string;
+  handleClick?: MouseEventHandler<HTMLElement>;
+}
+
+const AppImageBox = ({
+  width = 100,
+  height = 100,
+  text,
+  image,
+  className,
+  handleClick,
+}: AppImageBoxProps) => {
+  return (
+    <div className={`appImageBox ${className}`} onClick={handleClick}>
+      <Image
+        preview={false}
+        width={width}
+        height={height}
+        src={image.src}
+        alt={text}
+      />
+      {text && (
+        <span className={"text"} dangerouslySetInnerHTML={{ __html: text }} />
+      )}
+    </div>
+  );
+};
+
+export default AppImageBox;