react-frontend-common-components 0.0.76 → 0.0.79

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

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

@@ -1,68 +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;
-}
+.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

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

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

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

@@ -1,98 +1,98 @@
-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,
-  ...props
-}: 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;
+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,
+  ...props
+}: 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

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

@@ -1,32 +1,32 @@
-import React from "react";
-import { Checkbox } from "antd";
-import { CheckboxChangeEvent } from "antd/es/checkbox";
-import "./app-checkbox-text.css";
-
-interface AppCheckboxTextProps {
-  text: string;
-  checked?: boolean;
-  handleChange?: (e: CheckboxChangeEvent) => void;
-  className?: string;
-}
-
-const AppCheckboxText = ({
-  text,
-  checked,
-  handleChange,
-  className,
-}: AppCheckboxTextProps) => {
-  return (
-    <div className={`appCheckboxText ${className}`}>
-      <Checkbox
-        className="checkboxText"
-        checked={checked}
-        onChange={handleChange}
-      >
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      </Checkbox>
-    </div>
-  );
-};
-
-export default AppCheckboxText;
+import React from "react";
+import { Checkbox } from "antd";
+import { CheckboxChangeEvent } from "antd/es/checkbox";
+import "./app-checkbox-text.css";
+
+interface AppCheckboxTextProps {
+  text: string;
+  checked?: boolean;
+  handleChange?: (e: CheckboxChangeEvent) => void;
+  className?: string;
+}
+
+const AppCheckboxText = ({
+  text,
+  checked,
+  handleChange,
+  className,
+}: AppCheckboxTextProps) => {
+  return (
+    <div className={`appCheckboxText ${className}`}>
+      <Checkbox
+        className="checkboxText"
+        checked={checked}
+        onChange={handleChange}
+      >
+        <span dangerouslySetInnerHTML={{ __html: text }} />
+      </Checkbox>
+    </div>
+  );
+};
+
+export default AppCheckboxText;