react-frontend-common-components 0.0.83 → 0.0.84

package/package.json

@@ -1,40 +1,40 @@
-{
-  "name": "react-frontend-common-components",
-  "version": "0.0.83",
-  "description": "Reusable frontend library",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "rollup": "rollup -c --bundleConfigAsCjs"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "postcss": "^8.4.45",
-    "react": "^18.3.1",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4"
-  },
-  "dependencies": {
-    "@react-google-maps/api": "^2.19.3",
-    "@types/react": "^18.3.5",
-    "@types/uuid": "^10.0.0",
-    "antd": "^5.20.5",
-    "chart.js": "^4.4.4",
-    "react-chartjs-2": "^5.2.0",
-    "react-icons": "^5.3.0",
-    "react-otp-input": "^3.1.1",
-    "react-phone-input-2": "^2.15.1",
-    "rollup": "^4.21.2",
-    "uuid": "^10.0.0"
-  }
-}
+{
+  "name": "react-frontend-common-components",
+  "version": "0.0.84",
+  "description": "Reusable frontend library",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup -c --bundleConfigAsCjs"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "postcss": "^8.4.45",
+    "react": "^18.3.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@react-google-maps/api": "^2.19.3",
+    "@types/react": "^18.3.5",
+    "@types/uuid": "^10.0.0",
+    "antd": "^5.20.5",
+    "chart.js": "^4.4.4",
+    "react-chartjs-2": "^5.2.0",
+    "react-icons": "^5.3.0",
+    "react-otp-input": "^3.1.1",
+    "react-phone-input-2": "^2.15.1",
+    "rollup": "^4.21.2",
+    "uuid": "^10.0.0"
+  }
+}

package/rollup.config.js

@@ -1,44 +1,44 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
-import terser from "@rollup/plugin-terser";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import postcss from "rollup-plugin-postcss";
-
-const packageJson = require("./package.json");
-
-export default [
-  // CommonJS and ES module output
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main, // CommonJS
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module, // ES module
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
-      postcss(),
-    ],
-    external: ["react", "react-dom"],
-  },
-  // TypeScript declaration files
-  {
-    input: "src/index.ts",
-    output: [{ file: packageJson.types }],
-    plugins: [dts.default()],
-    external: [/\.css/],
-  },
-];
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+
+const packageJson = require("./package.json");
+
+export default [
+  // CommonJS and ES module output
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main, // CommonJS
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module, // ES module
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  // TypeScript declaration files
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css/],
+  },
+];

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

@@ -1,24 +1,24 @@
-import React from "react";
-import { Avatar } from "antd";
-import type { AvatarProps } from "antd";
-import { UserOutlined } from "@ant-design/icons";
-
-interface AppAvatarProps extends AvatarProps {
-  fallbackIcon?: React.ReactNode;
-  className?: string;
-}
-
-const AppAvatar = ({
-  src,
-  fallbackIcon = <UserOutlined />,
-  className,
-  ...props
-}: AppAvatarProps) => {
-  return (
-    <div className={className}>
-      <Avatar src={src} icon={!src ? fallbackIcon : undefined} {...props} />
-    </div>
-  );
-};
-
-export default AppAvatar;
+import React from "react";
+import { Avatar } from "antd";
+import type { AvatarProps } from "antd";
+import { UserOutlined } from "@ant-design/icons";
+
+interface AppAvatarProps extends AvatarProps {
+  fallbackIcon?: React.ReactNode;
+  className?: string;
+}
+
+const AppAvatar = ({
+  src,
+  fallbackIcon = <UserOutlined />,
+  className,
+  ...props
+}: AppAvatarProps) => {
+  return (
+    <div className={className}>
+      <Avatar src={src} icon={!src ? fallbackIcon : undefined} {...props} />
+    </div>
+  );
+};
+
+export default AppAvatar;

package/src/components/app-back-arrow/app-back-arrow.css

@@ -1,17 +1,17 @@
-.backArrow {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-size: 1rem;
-  & > span {
-    display: flex;
-  }
-
-  .icon {
-    margin-right: 0.5rem;
-  }
-
-  .text {
-    font-weight: 500;
-  }
-}
+.backArrow {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 1rem;
+  & > span {
+    display: flex;
+  }
+
+  .icon {
+    margin-right: 0.5rem;
+  }
+
+  .text {
+    font-weight: 500;
+  }
+}

package/src/components/app-back-arrow/app-back-arrow.tsx

@@ -1,37 +1,37 @@
-import React from "react";
-import { MouseEventHandler } from "react";
-import Icons from "../../themes/icons/icons";
-import "./app-back-arrow.css";
-
-interface BackArrowProps {
-  text?: string;
-  href?: string;
-  className?: string;
-  backIcon?: React.ReactNode;
-  onClick?: MouseEventHandler<HTMLElement>;
-}
-
-const AppBackArrow = ({
-  text = "Back",
-  href,
-  className,
-  backIcon,
-  onClick,
-}: BackArrowProps) => {
-  const handleNavigation: MouseEventHandler<HTMLElement> = (event) => {
-    if (onClick) {
-      onClick(event);
-    } else if (href) {
-      window.location.href = href;
-    }
-  };
-
-  return (
-    <div className={`backArrow ${className}`} onClick={handleNavigation}>
-      <span className={"icon"}>{backIcon || Icons.backArrow}</span>
-      {text && <span className={"text"}>{text}</span>}
-    </div>
-  );
-};
-
-export default AppBackArrow;
+import React from "react";
+import { MouseEventHandler } from "react";
+import Icons from "../../themes/icons/icons";
+import "./app-back-arrow.css";
+
+interface BackArrowProps {
+  text?: string;
+  href?: string;
+  className?: string;
+  backIcon?: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLElement>;
+}
+
+const AppBackArrow = ({
+  text = "Back",
+  href,
+  className,
+  backIcon,
+  onClick,
+}: BackArrowProps) => {
+  const handleNavigation: MouseEventHandler<HTMLElement> = (event) => {
+    if (onClick) {
+      onClick(event);
+    } else if (href) {
+      window.location.href = href;
+    }
+  };
+
+  return (
+    <div className={`backArrow ${className}`} onClick={handleNavigation}>
+      <span className={"icon"}>{backIcon || Icons.backArrow}</span>
+      {text && <span className={"text"}>{text}</span>}
+    </div>
+  );
+};
+
+export default AppBackArrow;

package/src/components/app-badge/app-badge.css

@@ -1,11 +1,11 @@
-.appBadge {
-  .ribbonWrapper {
-    .ant-ribbon-wrapper {
-      position: relative;
-      .ant-ribbon {
-        position: absolute;
-        top: 0;
-      }
-    }
-  }
-}
+.appBadge {
+  .ribbonWrapper {
+    .ant-ribbon-wrapper {
+      position: relative;
+      .ant-ribbon {
+        position: absolute;
+        top: 0;
+      }
+    }
+  }
+}

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

@@ -1,44 +1,44 @@
-import React from "react";
-import { Badge, BadgeProps as AntdBadgeProps } from "antd";
-import "./app-badge.css";
-
-interface AppBadgeProps extends Omit<AntdBadgeProps, "content"> {
-  content?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  ribbon?: {
-    text: React.ReactNode;
-    color?: string;
-    placement?: "start" | "end";
-  };
-}
-
-const AppBadge = ({
-  content,
-  children,
-  className,
-  ribbon,
-  ...props
-}: AppBadgeProps) => {
-  return (
-    <div className={`appBadge ${className}`}>
-      <Badge count={content} {...props}>
-        {ribbon ? (
-          <div className={"ribbonWrapper"}>
-            <Badge.Ribbon
-              text={ribbon.text}
-              color={ribbon.color}
-              placement={ribbon.placement}
-            >
-              {children}
-            </Badge.Ribbon>
-          </div>
-        ) : (
-          children
-        )}
-      </Badge>
-    </div>
-  );
-};
-
-export default AppBadge;
+import React from "react";
+import { Badge, BadgeProps as AntdBadgeProps } from "antd";
+import "./app-badge.css";
+
+interface AppBadgeProps extends Omit<AntdBadgeProps, "content"> {
+  content?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  ribbon?: {
+    text: React.ReactNode;
+    color?: string;
+    placement?: "start" | "end";
+  };
+}
+
+const AppBadge = ({
+  content,
+  children,
+  className,
+  ribbon,
+  ...props
+}: AppBadgeProps) => {
+  return (
+    <div className={`appBadge ${className}`}>
+      <Badge count={content} {...props}>
+        {ribbon ? (
+          <div className={"ribbonWrapper"}>
+            <Badge.Ribbon
+              text={ribbon.text}
+              color={ribbon.color}
+              placement={ribbon.placement}
+            >
+              {children}
+            </Badge.Ribbon>
+          </div>
+        ) : (
+          children
+        )}
+      </Badge>
+    </div>
+  );
+};
+
+export default AppBadge;

package/src/components/app-bread-crumb/app-bread-crumb.tsx

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

package/src/components/app-button/app-button.css

@@ -1,13 +1,13 @@
-.appButton {
-  width: max-content;
-
-  .ant-btn {
-    padding: 12px;
-    height: unset;
-    &:hover {
-      border-color: transparent !important;
-      outline: unset !important;
-      box-shadow: unset !important;
-    }
-  }
-}
+.appButton {
+  width: max-content;
+
+  .ant-btn {
+    padding: 12px;
+    height: unset;
+    &:hover {
+      border-color: transparent !important;
+      outline: unset !important;
+      box-shadow: unset !important;
+    }
+  }
+}

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

@@ -1,51 +1,51 @@
-import { Button } from "antd";
-import { MouseEventHandler } from "react";
-import { SizeType } from "antd/lib/config-provider/SizeContext";
-import "./app-button.css";
-import React from "react";
-
-interface AppButtonProps {
-  size?: "small" | "middle" | "large" | "default" | undefined;
-  className?: string;
-  handleClick?: MouseEventHandler<HTMLElement>;
-  icon?: React.ReactNode;
-  text?: string;
-  disabled?: boolean;
-  iconPosition?: string;
-  isLoading?: boolean;
-  type?: "default" | "text" | "link" | "primary" | "dashed" | undefined;
-}
-
-const AppButton = ({
-  type,
-  size,
-  className,
-  handleClick,
-  icon,
-  text,
-  disabled,
-  iconPosition,
-  isLoading,
-}: AppButtonProps) => {
-  return (
-    <div className={`appButton ${className}`}>
-      <Button
-        disabled={disabled}
-        type={type}
-        className={[
-          "customBtn",
-          icon ? "btn-icon" : "",
-          iconPosition === "right" ? "iconRight" : "",
-        ].join(" ")}
-        size={size as SizeType}
-        onClick={handleClick}
-        icon={icon}
-        loading={isLoading}
-      >
-        {text}
-      </Button>
-    </div>
-  );
-};
-
-export default AppButton;
+import { Button } from "antd";
+import { MouseEventHandler } from "react";
+import { SizeType } from "antd/lib/config-provider/SizeContext";
+import "./app-button.css";
+import React from "react";
+
+interface AppButtonProps {
+  size?: "small" | "middle" | "large" | "default" | undefined;
+  className?: string;
+  handleClick?: MouseEventHandler<HTMLElement>;
+  icon?: React.ReactNode;
+  text?: string;
+  disabled?: boolean;
+  iconPosition?: string;
+  isLoading?: boolean;
+  type?: "default" | "text" | "link" | "primary" | "dashed" | undefined;
+}
+
+const AppButton = ({
+  type,
+  size,
+  className,
+  handleClick,
+  icon,
+  text,
+  disabled,
+  iconPosition,
+  isLoading,
+}: AppButtonProps) => {
+  return (
+    <div className={`appButton ${className}`}>
+      <Button
+        disabled={disabled}
+        type={type}
+        className={[
+          "customBtn",
+          icon ? "btn-icon" : "",
+          iconPosition === "right" ? "iconRight" : "",
+        ].join(" ")}
+        size={size as SizeType}
+        onClick={handleClick}
+        icon={icon}
+        loading={isLoading}
+      >
+        {text}
+      </Button>
+    </div>
+  );
+};
+
+export default AppButton;

package/src/components/app-card/app-card.css

@@ -1,8 +1,8 @@
-.borderless {
-  border: none !important;
-  box-shadow: none !important;
-  & * {
-    border: none !important;
-    box-shadow: none !important;
-  }
-}
+.borderless {
+  border: none !important;
+  box-shadow: none !important;
+  & * {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}