react-frontend-common-components 0.0.1

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { Layout, Menu } from "antd";
+import "./app-sidebar.css";
+
+const { Sider } = Layout;
+
+interface SidebarProps {
+  links: {
+    label: string;
+    path: string;
+    icon: React.ReactNode;
+    tag?: React.ReactNode;
+  }[];
+  logo?: React.ReactNode;
+  footerLinks?: {
+    label: string;
+    path: string;
+  }[];
+  className?: string;
+}
+
+const Sidebar = ({ links, logo, footerLinks, className }: SidebarProps) => {
+  const handleNavigation = (path: string) => {
+    window.location.href = path;
+  };
+
+  const menuItems = links.map((link) => ({
+    key: link.path,
+    icon: link.icon,
+    label: (
+      <span onClick={() => handleNavigation(link.path)}>
+        {link.label}
+        {link.tag && <span className={"tag"}>{link.tag}</span>}
+      </span>
+    ),
+  }));
+
+  const footerMenuItems = footerLinks?.map((link) => ({
+    key: link.path,
+    label: (
+      <span onClick={() => handleNavigation(link.path)}>{link.label}</span>
+    ),
+  }));
+
+  return (
+    <div className={`sideBar ${className}`}>
+      <Sider className={"sider"}>
+        <div className={"logo"}>{logo}</div>
+        <Menu mode="inline" className={"menu"} items={menuItems} />
+        {footerLinks && (
+          <div className={"footer"}>
+            <Menu mode="inline" items={footerMenuItems} />
+          </div>
+        )}
+      </Sider>
+    </div>
+  );
+};
+
+export default Sidebar;

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

@@ -0,0 +1,22 @@
+.appTab {
+  .tab {
+    .ant-tabs-nav {
+      &::before {
+        border: unset !important;
+      }
+      .ant-tabs-nav-wrap {
+        .ant-tabs-nav-list {
+          display: flex;
+          gap: 3.5rem;
+          align-items: center;
+          .ant-tabs-tab {
+            margin: 0;
+          }
+          .ant-tabs-ink-bar {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Tabs } from "antd";
+import type { TabsProps } from "antd";
+import "./app-tab.css";
+
+interface AppTabProps {
+  className?: string;
+  items?: TabsProps["items"];
+  handleChange?: (activeKey: string) => void;
+  defaultActiveKey?: string;
+}
+
+const AppTab = ({
+  className,
+  items,
+  handleChange,
+  defaultActiveKey,
+}: AppTabProps) => {
+  return (
+    <div className={`appTab ${className}`}>
+      <Tabs
+        defaultActiveKey={defaultActiveKey}
+        items={items}
+        onChange={handleChange}
+        className={"tab"}
+      />
+    </div>
+  );
+};
+
+export default AppTab;

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

@@ -0,0 +1,42 @@
+import { Table, TableProps } from "antd";
+import { ColumnsType } from "antd/lib/table";
+
+interface AppTableProps<T> extends TableProps<T> {
+  columns: ColumnsType<T>;
+  dataSource: T[];
+  rowKey?: string;
+  bordered?: boolean;
+  pagination?: TableProps<T>["pagination"];
+  size?: "small" | "middle" | "large";
+  scroll?: TableProps<T>["scroll"];
+  className?: string;
+}
+
+const AppTable = <T extends object>({
+  columns,
+  dataSource,
+  rowKey,
+  bordered = false,
+  pagination = { pageSize: 10 },
+  size = "middle",
+  scroll,
+  className,
+  ...tableProps
+}: AppTableProps<T>) => {
+  return (
+    <div className={className}>
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        rowKey={rowKey}
+        bordered={bordered}
+        pagination={pagination}
+        size={size}
+        scroll={scroll}
+        {...tableProps}
+      />
+    </div>
+  );
+};
+
+export default AppTable;

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

@@ -0,0 +1,11 @@
+.appTab {
+  width: max-content;
+  .ant-tag {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    border-radius: 8px;
+    padding: 4px 8px;
+    line-height: normal;
+  }
+}

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

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Tag } from "antd";
+import "./app-tag.css";
+
+interface AppTagProps {
+  color?: string;
+  closable?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  style?: React.CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+  closeIcon?: React.ReactNode;
+}
+
+const AppTag = ({
+  color,
+  closable = false,
+  onClick,
+  style,
+  className,
+  children,
+  closeIcon,
+}: AppTagProps) => {
+  const [visible, setVisible] = useState(true);
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className={`appTab ${className}`}>
+      <Tag
+        color={color}
+        closable={closable}
+        onClose={handleClose}
+        onClick={onClick}
+        style={style}
+        closeIcon={closeIcon}
+      >
+        {children}
+      </Tag>
+    </div>
+  );
+};
+
+export default AppTag;

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

@@ -0,0 +1,19 @@
+.appTextArea {
+  .ant-input-outlined {
+    border-color: #bfbebe;
+    &:hover {
+      border-color: #bfbebe;
+    }
+  }
+
+  *:focus {
+    outline: 0 !important;
+    box-shadow: unset !important;
+  }
+}
+
+.error {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}

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

@@ -0,0 +1,59 @@
+import { Input } from "antd";
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+import "./app-textarea.css";
+
+interface textAreaProps {
+  id?: string;
+  label?: string;
+  name?: string;
+  value?: string;
+  dataTestId?: string;
+  defaultValue?: string;
+  onPressEnter?: KeyboardEventHandler<HTMLTextAreaElement>;
+  handleChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  autoSize?: {
+    minRows?: number;
+    maxRows?: number;
+  };
+  rows?: number;
+  cols?: number;
+  placeholder?: string;
+  className?: string;
+  error?: string;
+}
+
+const AppTextarea = ({
+  id,
+  placeholder,
+  name,
+  value,
+  dataTestId,
+  defaultValue,
+  onPressEnter,
+  handleChange,
+  rows,
+  cols,
+  className,
+  error,
+}: textAreaProps) => {
+  return (
+    <div className={`appTextArea ${className}`}>
+      <Input.TextArea
+        data-test-id={dataTestId}
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        className={"textArea"}
+        onChange={handleChange}
+        defaultValue={defaultValue}
+        onPressEnter={onPressEnter}
+        rows={rows}
+        cols={cols}
+      />
+      {error && <div className={"error"}>{error}</div>}
+    </div>
+  );
+};
+
+export default AppTextarea;

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

@@ -0,0 +1,12 @@
+.titleComponent {
+  span {
+    color: #000;
+    text-align: center;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  .subText {
+    font-size: 1rem !important;
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Typography } from "antd";
+import "./app-title.css";
+
+const { Title, Text } = Typography;
+
+interface TitleProps {
+  mainText: string;
+  className?: string;
+  subText?: string;
+  level?: 1 | 2 | 3 | 4 | 5;
+}
+
+const AppTitle = ({
+  mainText,
+  className = "",
+  subText,
+  level = 1,
+}: TitleProps) => {
+  return (
+    <div className={`titleComponent ${className}`}>
+      <Title level={level}>{mainText}</Title>
+      {subText && <Text className={"subText"}>{subText}</Text>}
+    </div>
+  );
+};
+
+export default AppTitle;

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

@@ -0,0 +1,27 @@
+.toggleContainer {
+  display: flex;
+  align-items: center;
+  .ant-switch {
+    height: 16px;
+    position: relative;
+    .ant-switch-handle {
+      top: 50%;
+      bottom: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  &:not(.ant-switch.ant-switch-checked .ant-switch-handle) {
+    inset-inline-start: 0px;
+  }
+  & .ant-switch.ant-switch-checked .ant-switch-handle {
+    inset-inline-start: calc(100% - 18px);
+  }
+}
+
+.switch {
+  margin-right: 0.5rem;
+}
+
+.label {
+  font-size: 1rem;
+}

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

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Switch } from "antd";
+import "./app-toggle-button.css";
+
+interface AppToggleButtonProps {
+  initialChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  checkedLabel?: string;
+  uncheckedLabel?: string;
+  className?: string;
+}
+
+const AppToggleButton = ({
+  initialChecked = false,
+  onChange,
+  checkedLabel,
+  uncheckedLabel,
+  className,
+}: AppToggleButtonProps) => {
+  const [isChecked, setIsChecked] = useState(initialChecked);
+
+  const handleToggle = (checked: boolean) => {
+    setIsChecked(checked);
+    if (onChange) {
+      onChange(checked);
+    }
+  };
+
+  return (
+    <div className={`toggleContainer ${className}`}>
+      <Switch
+        checked={isChecked}
+        onChange={handleToggle}
+        className={"switch"}
+      />
+      <span className={"label"}>
+        {isChecked ? checkedLabel : uncheckedLabel}
+      </span>
+    </div>
+  );
+};
+
+export default AppToggleButton;

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

@@ -0,0 +1,26 @@
+.profileImageContainer {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.altTextWrapper {
+  font-size: 0.8rem;
+  text-align: center;
+  img {
+    border-radius: 0;
+  }
+}
+
+.profileImage {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  position: relative;
+  font-size: 0.8rem;
+}
+
+.fileInput {
+  display: none;
+}

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

@@ -0,0 +1,90 @@
+import React, { useState, useRef } from "react";
+import Icons from "../../themes/icons/icons";
+import "./app-upload-image.css";
+
+interface AppUploadImageProps {
+  className?: string;
+  uploadIcon?: React.ReactNode;
+  value?: string;
+  text?: string;
+  onFileChange?: (file: File | null) => void;
+  alertMessages?: {
+    invalidType?: string;
+    sizeExceed?: string;
+  };
+  acceptedFormats?: string[];
+  maxSizeMb?: number;
+  altText?: string;
+}
+
+const AppUploadImage = ({
+  className,
+  uploadIcon,
+  value = "",
+  text = "Upload Image",
+  onFileChange,
+  alertMessages = {
+    invalidType: "You can only upload JPG/PNG/SVG file!",
+    sizeExceed: "Image must be smaller than 2MB!",
+  },
+  acceptedFormats = ["image/jpeg", "image/png", "image/svg+xml"],
+  maxSizeMb = 2,
+  altText = "Profile Image",
+}: AppUploadImageProps) => {
+  const [imageUrl, setImageUrl] = useState<string>(value);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const isAcceptedFormat = acceptedFormats.includes(file.type);
+      const isLtMaxSize = file.size / 1024 / 1024 < maxSizeMb;
+
+      if (!isAcceptedFormat) {
+        alert(alertMessages.invalidType);
+        return;
+      }
+
+      if (!isLtMaxSize) {
+        alert(alertMessages.sizeExceed);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImageUrl(reader.result as string);
+        if (onFileChange) {
+          onFileChange(file);
+        }
+      };
+      reader.readAsDataURL(file);
+    } else if (onFileChange) {
+      onFileChange(null);
+    }
+  };
+
+  return (
+    <div className={`profileImageContainer ${className}`}>
+      <div className={imageUrl === "" ? "altTextWrapper" : ""}>
+        <img className={"profileImage"} src={imageUrl} alt={altText} />
+      </div>
+      <button className={"uploadButton"} onClick={handleButtonClick}>
+        <span>{uploadIcon || Icons.uploadIcon}</span>
+        {text}
+      </button>
+      <input
+        type="file"
+        accept={acceptedFormats.join(",")}
+        className={"fileInput"}
+        ref={fileInputRef}
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+};
+
+export default AppUploadImage;

package/src/components/over-view-card/over-view-card.css

@@ -0,0 +1,16 @@
+.overViewCard {
+  border-radius: 12px;
+  padding: 0.5rem 1rem;
+  background-color: #f9f9f9;
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  .text {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18.2px;
+    text-align: left;
+  }
+}

package/src/components/over-view-card/over-view-card.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Typography } from "antd";
+import "./over-view-card.css";
+
+const { Text } = Typography;
+
+interface OverViewCardProps {
+  className?: string;
+  text?: string;
+  number?: number;
+}
+
+const OverViewCard = ({ className, text, number }: OverViewCardProps) => {
+  return (
+    <div className={`overViewCard ${className}`}>
+      <Text>{text}</Text>
+      <span>{number}</span>
+    </div>
+  );
+};
+
+export default OverViewCard;

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as AppInput } from "./components/app-input/app-input";
+export { default as AppButton } from "./components/app-button/app-button";
+export { default as AppSidebar } from "./components/app-sidebar/app-sidebar";
+export { default as AppTextarea } from "./components/app-textarea/app-textarea";
+export { default as AppTab } from "./components/app-tab/app-tab";