impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/TableChat/TableChatSidePanel.styles.scss

@@ -1,57 +0,0 @@
-@import "../../styles/index.scss";
-
-#table-chat-side-panel {
-  .impact_drawer_container {
-    background: $whiteColor;
-  }
-
-  .impact_drawer_header {
-    background: $lightBlueColor;
-    border-bottom: 1px solid $disabledSecondaryBorder;
-  }
-
-  .impact_drawer_body {
-    padding: 0;
-  }
-}
-
-.table-chat-container {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  gap: 10px;
-  flex-direction: row;
-}
-
-.empty-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    width: 190px;
-    height: 197px;
-  }
-  p:nth-of-type(1) {
-    color: $mainFontColor;
-
-    font-size: 20px;
-    font-style: normal;
-    font-weight: $ExtraFontWeight;
-    line-height: 30px; /* 150% */
-  }
-
-  p:nth-of-type(2) {
-    color: $inputInfoColor;
-    text-align: center;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: $normalFontWeight;
-    line-height: 125%; /* 20px */
-  }
-}
-
-.loader-padding {
-  padding: 16px;
-  width: 100%;
-}

package/src/components/TableChat/components/ChatMessageSkeleton/ChatFooterSkeleton.jsx

@@ -1,43 +0,0 @@
-// components/chat/skeletons/ChatFooterSkeleton.jsx
-import React from "react";
-import Skeleton from "@mui/material/Skeleton";
-import "./ChatSkeleton.scss";
-
-const ChatFooterSkeleton = () => {
-  return (
-    <div className="chat-footer-skeleton">
-      <div className="chat-actions">
-        <Skeleton
-          variant="rectangular"
-          width={80}
-          height={24}
-          className="action-skeleton"
-          style={{ borderRadius: "12px" }}
-        />
-      </div>
-      <div className="chat-input-container">
-        <Skeleton
-          variant="rectangular"
-          width="100%"
-          height={40}
-          className="input-skeleton"
-          style={{ borderRadius: "20px" }}
-        />
-        <Skeleton
-          variant="circular"
-          width={36}
-          height={36}
-          className="emoji-skeleton"
-        />
-        <Skeleton
-          variant="circular"
-          width={40}
-          height={40}
-          className="send-skeleton"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ChatFooterSkeleton;

package/src/components/TableChat/components/ChatMessageSkeleton/ChatHeaderSkeleton.jsx

@@ -1,55 +0,0 @@
-// components/chat/skeletons/ChatHeaderSkeleton.jsx
-import React from "react";
-import Skeleton from "@mui/material/Skeleton";
-import "./ChatSkeleton.scss";
-
-const ChatHeaderSkeleton = () => {
-  return (
-    <div className="chat-header-skeleton">
-      <div className="chat-header-left">
-        <Skeleton
-          variant="circular"
-          width={40}
-          height={40}
-          className="avatar-skeleton"
-        />
-        <div className="chat-info">
-          <Skeleton
-            variant="text"
-            width={120}
-            height={24}
-            className="title-skeleton"
-          />
-          <Skeleton
-            variant="text"
-            width={80}
-            height={16}
-            className="status-skeleton"
-          />
-        </div>
-      </div>
-      <div className="chat-header-right">
-        <Skeleton
-          variant="circular"
-          width={36}
-          height={36}
-          className="icon-skeleton"
-        />
-        <Skeleton
-          variant="circular"
-          width={36}
-          height={36}
-          className="icon-skeleton"
-        />
-        <Skeleton
-          variant="circular"
-          width={36}
-          height={36}
-          className="icon-skeleton"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ChatHeaderSkeleton;

package/src/components/TableChat/components/ChatMessageSkeleton/ChatMessageListSkeleton.jsx

@@ -1,94 +0,0 @@
-// components/chat/skeletons/ChatMessageListSkeleton.jsx
-import React from "react";
-import Skeleton from "@mui/material/Skeleton";
-import "./ChatSkeleton.scss";
-
-const ChatMessageListSkeleton = ({ className, messageCount = 8 }) => {
-  // Generate skeleton messages with different widths for variety
-  const renderSkeletonMessages = () => {
-    const messages = [];
-    // const messageCount = 8; // Number of skeleton messages to show
-
-    for (let i = 0; i < messageCount; i++) {
-      const isOwnMessage = i % 3 === 0; // Every third message is "own" message
-      const hasDateSeparator = i % 4 === 0; // Every fourth message has a date separator
-
-      if (hasDateSeparator) {
-        messages.push(
-          <div key={`date-${i}`} className="date-separator-skeleton">
-            <Skeleton
-              variant="text"
-              width={80}
-              height={16}
-              className="date-skeleton"
-            />
-          </div>
-        );
-      }
-
-      messages.push(
-        <div
-          key={`msg-${i}`}
-          className={`message-skeleton ${isOwnMessage ? "own-message" : ""}`}
-        >
-          {!isOwnMessage && (
-            <Skeleton
-              variant="circular"
-              width={32}
-              height={32}
-              className="message-avatar-skeleton"
-            />
-          )}
-          <div className="message-content-skeleton">
-            {!isOwnMessage && (
-              <Skeleton
-                variant="text"
-                width={100}
-                height={16}
-                className="sender-skeleton"
-              />
-            )}
-            <Skeleton
-              variant="text"
-              width={isOwnMessage ? 200 : 180}
-              height={20}
-              className="text-skeleton"
-            />
-            <Skeleton
-              variant="text"
-              width={isOwnMessage ? 160 : 220}
-              height={20}
-              className="text-skeleton"
-            />
-            <div className="message-meta-skeleton">
-              <Skeleton
-                variant="text"
-                width={60}
-                height={14}
-                className="time-skeleton"
-              />
-              {isOwnMessage && (
-                <Skeleton
-                  variant="circular"
-                  width={16}
-                  height={16}
-                  className="status-skeleton"
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return messages;
-  };
-
-  return (
-    <div className={`chat-message-list-skeleton ${className}`}>
-      {renderSkeletonMessages()}
-    </div>
-  );
-};
-
-export default ChatMessageListSkeleton;

package/src/components/TableChat/components/ChatMessageSkeleton/ChatSkeleton.jsx

@@ -1,22 +0,0 @@
-// components/chat/skeletons/ChatSkeleton.jsx
-import React from "react";
-import ChatHeaderSkeleton from "./ChatHeaderSkeleton";
-import ChatMessageListSkeleton from "./ChatMessageListSkeleton";
-import ChatFooterSkeleton from "./ChatFooterSkeleton";
-import "./ChatSkeleton.scss";
-
-const ChatSkeleton = () => {
-  return (
-    <div className="chat-skeleton-container">
-      <div className="chat-skeleton">
-        <ChatHeaderSkeleton />
-        <div className="chat-body">
-          <ChatMessageListSkeleton />
-        </div>
-        <ChatFooterSkeleton />
-      </div>
-    </div>
-  );
-};
-
-export default ChatSkeleton;

package/src/components/TableChat/components/ChatMessageSkeleton/ChatSkeleton.scss

@@ -1,179 +0,0 @@
-// components/chat/skeletons/ChatSkeleton.scss
-.chat-skeleton-container {
-  width: 100%;
-  max-width: 610px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.chat-skeleton {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-
-// Header Skeleton Styles
-.chat-header-skeleton {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #e0e0e0;
-  background-color: #fff;
-}
-
-.chat-header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.chat-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.chat-header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-// Message List Skeleton Styles
-.chat-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  background-color: #f5f5f5;
-}
-
-.chat-message-list-skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-}
-
-.thread-skeleton {
-  max-width: 550px;
-}
-
-.date-separator-skeleton {
-  display: flex;
-  justify-content: center;
-  margin: 8px 0;
-}
-
-.message-skeleton {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  max-width: 70%;
-
-  &.own-message {
-    align-self: flex-end;
-    flex-direction: row-reverse;
-  }
-}
-
-.message-content-skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.message-meta-skeleton {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 4px;
-}
-
-// Footer Skeleton Styles
-.chat-footer-skeleton {
-  padding: 12px 16px;
-  border-top: 1px solid #e0e0e0;
-  background-color: #fff;
-}
-
-.chat-input-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.chat-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-end;
-  margin-bottom: 4px;
-}
-
-// Skeleton specific styles
-.avatar-skeleton {
-  background-color: #e0e0e0;
-}
-
-.title-skeleton {
-  background-color: #e0e0e0;
-}
-
-.status-skeleton {
-  background-color: #e0e0e0;
-}
-
-.icon-skeleton {
-  background-color: #e0e0e0;
-}
-
-.date-skeleton {
-  background-color: #e0e0e0;
-}
-
-.message-avatar-skeleton {
-  background-color: #e0e0e0;
-}
-
-.sender-skeleton {
-  background-color: #e0e0e0;
-}
-
-.text-skeleton {
-  background-color: #e0e0e0;
-}
-
-.time-skeleton {
-  background-color: #e0e0e0;
-}
-
-.status-skeleton {
-  background-color: #e0e0e0;
-}
-
-.attach-skeleton {
-  background-color: #e0e0e0;
-}
-
-.input-skeleton {
-  background-color: #e0e0e0;
-}
-
-.emoji-skeleton {
-  background-color: #e0e0e0;
-}
-
-.send-skeleton {
-  background-color: #e0e0e0;
-}
-
-.action-skeleton {
-  background-color: #e0e0e0;
-}

package/src/components/TableChat/components/SkeletonList.jsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Loader } from "../../Loader";
-
-export const SkeletonList = ({ count = 5, text = "Loading..." }) => (
-  <div className="table-chat-right-section-container-empty loader-padding">
-    {[...Array(count)].map((_, i) => (
-      <div key={i} style={{ marginBottom: 20 }}>
-        <Loader progress="100%" showSkeleton size="large" text={text} />
-      </div>
-    ))}
-  </div>
-);

package/src/components/TableChat/components/TableChatLeftSection/AddChatContainer/AddChatContainer.jsx

@@ -1,171 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "../../../../Input";
-import { TextArea } from "../../../../TextArea";
-import { Button } from "../../../../Button";
-import "./AddChatContainer.styles.scss";
-
-// Validation rules
-const validationRules = {
-  chatName: {
-    required: "Chat name is required",
-    minLength: {
-      value: 2,
-      message: "Chat name must be at least 2 characters long",
-    },
-    maxLength: {
-      value: 50,
-      message: "Chat name cannot exceed 50 characters",
-    },
-    // pattern: {
-    //   value: /^[a-zA-Z0-9\s\-_]+$/,
-    //   message:
-    //     "Chat name can only contain letters, numbers, spaces, hyphens, and underscores",
-    // },
-  },
-  chatDescription: {
-    maxLength: {
-      value: 100,
-      message: "Description cannot exceed 100 characters",
-    },
-  },
-};
-
-const AddChat = ({
-  setShowAddChat,
-  handleChatName,
-  selectedChannelInfo,
-  handleToast,
-  setIsCreateNewChatOpen,
-}) => {
-  const containerRef = useRef(null);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting, isValid },
-    reset,
-  } = useForm({
-    mode: "onSubmit", // Validate on change for real-time feedback
-    defaultValues: {
-      chatName: "",
-      chatDescription: "",
-    },
-  });
-
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target)
-      ) {
-        handleCancel();
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  // Form submission handler
-  const onSubmit = async (data) => {
-    try {
-      // 👇 Call the root function with validated data
-      const response = await handleChatName(data, selectedChannelInfo);
-
-      handleToast(true, "Chat saved successfully", "success");
-
-      // ✅ Close container after success and reset form
-      handleCancel();
-    } catch (err) {
-      console.error("Error while saving chat:", err);
-      handleToast(true, "Error while saving chat", "error");
-      // TODO: Add proper error handling/toast notification
-    }
-  };
-
-  // Cancel handler - resets form and closes modal
-  const handleCancel = () => {
-    reset();
-    setShowAddChat(false);
-    setIsCreateNewChatOpen(false);
-  };
-
-  return (
-    <div ref={containerRef} className="addChat_container">
-      <form
-        className="chatcontainer"
-        onSubmit={handleSubmit(onSubmit)}
-        noValidate
-      >
-        <Controller
-          name="chatName"
-          control={control}
-          rules={validationRules.chatName}
-          render={({ field }) => (
-            <Input
-              label="Chat name"
-              placeholder="Price negotiation"
-              type="text"
-              isDisabled={isSubmitting}
-              isError={!!errors.chatName}
-              isHelperText={!!errors.chatName}
-              helperText={errors.chatName?.message}
-              value={field.value}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              name={field.name}
-            />
-          )}
-        />
-
-        <Controller
-          name="chatDescription"
-          control={control}
-          rules={validationRules.chatDescription}
-          render={({ field }) => (
-            <TextArea
-              label="Add description"
-              placeholder="Lets review the latest changes"
-              isDisabled={isSubmitting}
-              height="80px"
-              maxRows={2}
-              characterLimit={100}
-              width="100%"
-              isError={!!errors.chatDescription}
-              secondaryLabel={errors.chatDescription?.message}
-              value={field.value || ""} // Ensure value is never undefined
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              name={field.name}
-            />
-          )}
-        />
-
-        <div className="chatFooterContainer">
-          <Button
-            variant="tertiary"
-            size="large"
-            type="button"
-            disabled={isSubmitting}
-            onClick={handleCancel}
-          >
-            Cancel
-          </Button>
-          <Button
-            className="chat_save_btn"
-            variant="primary"
-            size="large"
-            type="submit"
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? <>Saving...</> : "Save"}
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default AddChat;

package/src/components/TableChat/components/TableChatLeftSection/AddChatContainer/AddChatContainer.styles.scss

@@ -1,37 +0,0 @@
-@import "../../../../../styles/index.scss";
-
-.chatcontainer {
-  background: $whiteColor;
-  position: fixed;
-  top: 120px;
-  width: 231px;
-  padding: 10px;
-  border-radius: 10px;
-  display: grid;
-  grid-auto-flow: row;
-  row-gap: 10px;
-  box-shadow: 0 0 4px 0 $boxShadowMedium;
-  z-index: 9999;
-  .chat-header-navigation .nav-right button {
-    border: 1px solid $deactivateColor;
-  }
-  .chat-header-navigation .nav-right button {
-    background-color: $primaryColor !important;
-  }
-  .MuiInputBase-root input.MuiInputBase-input {
-    min-width: 210px !important;
-  }
-}
-
-.chatFooterContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.addChat_container {
-  position: absolute;
-}
-.chat_save_btn {
-  background-color: $primaryColor !important;
-}

package/src/components/TableChat/components/TableChatLeftSection/ChannelCheckbox/ChannelCheckbox.jsx

@@ -1,28 +0,0 @@
-import { selectClasses } from "@mui/material";
-import React from "react";
-import { Checkbox } from "../../../../Checkbox";
-
-export const ChannelCheckbox = ({
-  checked = false,
-  onChange,
-  id,
-  className = "channel-checkbox-input",
-  disabled = false,
-  handleChatSelect,
-  selectedChat,
-  ...props
-}) => {
-  return (
-    <div className="channel-checkbox" onClick={(e) => e.stopPropagation()}>
-      <Checkbox
-        checked={selectedChat?.includes(id)}
-        label=""
-        onChange={(e) => {
-          e.stopPropagation();
-          handleChatSelect(id);
-        }}
-        variant="default"
-      />
-    </div>
-  );
-};