react-frontend-common-components 0.0.77 → 0.0.79

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

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

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

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

@@ -1,25 +1,25 @@
-.appTextArea {
-  .ant-input-outlined {
-    border-color: #bfbebe;
-    &:hover {
-      border-color: #bfbebe;
-    }
-  }
-  .ant-input::placeholder {
-    color: #202123 !important;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  *:focus {
-    outline: 0 !important;
-    box-shadow: unset !important;
-  }
-}
-
-.error {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
+.appTextArea {
+  .ant-input-outlined {
+    border-color: #bfbebe;
+    &:hover {
+      border-color: #bfbebe;
+    }
+  }
+  .ant-input::placeholder {
+    color: #202123 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  *: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

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

@@ -1,12 +1,12 @@
-.titleComponent {
-  span {
-    color: #000;
-    text-align: center;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-  }
-  .subText {
-    font-size: 1rem !important;
-  }
-}
+.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

@@ -1,28 +1,28 @@
-import React from "react";
-import { Typography } from "antd";
-import "./app-title.css";
-
-const { Title, Text } = Typography;
-
-interface TitleProps {
-  mainText: React.ReactNode;
-  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;
+import React from "react";
+import { Typography } from "antd";
+import "./app-title.css";
+
+const { Title, Text } = Typography;
+
+interface TitleProps {
+  mainText: React.ReactNode;
+  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

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

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

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