react-frontend-common-components 0.0.1

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-frontend-common-components",
+  "version": "0.0.1",
+  "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",
+    "react": "^18.3.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@types/react": "^18.3.5",
+    "@types/uuid": "^10.0.0",
+    "antd": "^5.20.5",
+    "react-icons": "^5.3.0",
+    "rollup": "^4.21.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "uuid": "^10.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +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/],
+  },
+];

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

@@ -0,0 +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;

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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import Icons from "../../themes/icons/icons";
+import "./app-back-arrow.css";
+
+interface BackArrowProps {
+  text?: string;
+  href: string;
+  className?: string;
+  backIcon?: React.ReactNode;
+}
+
+const AppBackArrow = ({
+  text = "Back",
+  href,
+  className,
+  backIcon,
+}: BackArrowProps) => {
+  const handleNavigation = () => {
+    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

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

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { Badge, BadgeProps as AntdBadgeProps } from "antd";
+import "./app-badge.css";
+
+interface AppBadgeProps extends AntdBadgeProps {
+  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

@@ -0,0 +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;

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

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

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

@@ -0,0 +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;

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

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

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { Card } from "antd";
+import { CardProps } from "antd/lib/card";
+import "./app-card.css";
+
+interface AppCardProps extends CardProps {
+  title?: React.ReactNode;
+  extra?: React.ReactNode;
+  cover?: React.ReactNode;
+  hoverable?: boolean;
+  actions?: React.ReactNode[];
+  className?: string;
+  borderless?: boolean;
+}
+
+const AppCard = ({
+  title,
+  extra,
+  cover,
+  hoverable = false,
+  actions,
+  className,
+  borderless,
+  ...cardProps
+}: AppCardProps) => {
+  return (
+    <div className={`appCard ${className}`}>
+      <Card
+        title={title}
+        extra={extra}
+        cover={cover}
+        hoverable={hoverable}
+        className={`${borderless ? "borderless" : ""}`}
+        actions={actions}
+        {...cardProps}
+      >
+        {cardProps.children}
+      </Card>
+    </div>
+  );
+};
+
+export default AppCard;

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

@@ -0,0 +1,68 @@
+.appCarousel {
+  position: relative;
+  width: 100%;
+
+  .ant-carousel .slick-slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .slick-dots {
+    gap: 0.5rem;
+    align-items: center;
+    li {
+      width: 6px !important;
+      border-radius: 50%;
+      margin: 0;
+      button {
+        height: 6px;
+      }
+    }
+  }
+}
+
+.carouselItem {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+  }
+}
+
+.prevArrow,
+.nextArrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  color: rgb(0, 0, 0);
+  font-size: 1.5rem;
+  cursor: pointer;
+  z-index: 1;
+  display: flex;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.prevArrow {
+  left: 10px;
+}
+
+.nextArrow {
+  right: 10px;
+}
+
+.carouselLines {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}

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

@@ -0,0 +1,62 @@
+import React, { useRef } from "react";
+import { Carousel } from "antd";
+import type { CarouselProps } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import "./app-carousel.css";
+
+interface AppCarouselProps extends CarouselProps {
+  items: React.ReactNode[];
+  className?: string;
+  nxtIcon?: React.ReactNode;
+  prevIcon?: React.ReactNode;
+  showIcon?: boolean;
+  showDots?: boolean;
+  showLines?: boolean;
+  autoplay?: boolean;
+}
+
+const AppCarousel = ({
+  items,
+  className,
+  nxtIcon,
+  prevIcon,
+  showIcon,
+  showDots = true,
+  autoplay,
+  ...rest
+}: AppCarouselProps) => {
+  const carouselRef = useRef<any>(null);
+
+  const handlePrev = () => {
+    carouselRef.current?.prev();
+  };
+
+  const handleNext = () => {
+    carouselRef.current?.next();
+  };
+
+  return (
+    <div className={`appCarousel ${className}`}>
+      {showIcon && (
+        <>
+          <span className={"prevArrow"} onClick={handlePrev}>
+            {prevIcon || <LeftOutlined />}
+          </span>
+          <span className={"nextArrow"} onClick={handleNext}>
+            {nxtIcon || <RightOutlined />}
+          </span>
+        </>
+      )}
+
+      <Carousel autoplay={autoplay} ref={carouselRef} dots={showDots} {...rest}>
+        {items.map((item, index) => (
+          <div key={index} className={"carouselItem"}>
+            {item}
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  );
+};
+
+export default AppCarousel;

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

@@ -0,0 +1,6 @@
+.appChart {
+  & > canvas {
+    height: 100% !important;
+    width: 100% !important;
+  }
+}

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

@@ -0,0 +1,97 @@
+import React from "react";
+import { Bar, Line, Pie, Doughnut } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartData,
+  ChartOptions,
+} from "chart.js";
+import "./app-chart.css";
+
+// Register the necessary modules
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+type ChartType = "bar" | "line" | "pie" | "doughnut";
+
+interface AppChartProps {
+  type: ChartType;
+  data: ChartData<"bar" | "line" | "pie" | "doughnut">;
+  options?: ChartOptions<"bar" | "line" | "pie" | "doughnut">;
+  className?: string;
+  height?: number;
+  width?: number;
+}
+
+const AppChart = ({
+  type,
+  data,
+  options,
+  className,
+  height = 400,
+  width = 600,
+}: AppChartProps) => {
+  const renderChart = () => {
+    switch (type) {
+      case "bar":
+        return (
+          <Bar
+            data={data as ChartData<"bar">}
+            options={options as ChartOptions<"bar">}
+            className={className}
+          />
+        );
+      case "line":
+        return (
+          <Line
+            data={data as ChartData<"line">}
+            options={options as ChartOptions<"line">}
+            className={className}
+          />
+        );
+      case "pie":
+        return (
+          <Pie
+            data={data as ChartData<"pie">}
+            options={options as ChartOptions<"pie">}
+            className={className}
+          />
+        );
+      case "doughnut":
+        return (
+          <Doughnut
+            data={data as ChartData<"doughnut">}
+            options={options as ChartOptions<"doughnut">}
+            className={className}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div style={{ height, width }} className={`appChart ${className}`}>
+      {renderChart()}
+    </div>
+  );
+};
+
+export default AppChart;

package/src/components/app-checkbox-text/app-checkbox-text.css

@@ -0,0 +1,12 @@
+.appCheckboxText {
+  .checkboxText {
+    & > span:last-child {
+      line-height: unset;
+      & > span {
+        font-size: 15px;
+        font-weight: 500;
+        text-align: left;
+      }
+    }
+  }
+}

package/src/components/app-checkbox-text/app-checkbox-text.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Checkbox } from "antd";
+import "./app-checkbox-text.css";
+
+interface Type {
+  text: string;
+  className?: string;
+}
+
+const AppCheckboxText = ({ text, className }: Type) => {
+  return (
+    <div className={`appCheckboxText ${className}`}>
+      <Checkbox className={"checkboxText"}>
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      </Checkbox>
+    </div>
+  );
+};
+
+export default AppCheckboxText;

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

@@ -0,0 +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;