@aslaluroba/help-center-react 3.0.4 → 3.0.6

package/src/ui/chatbot-popup/options-list-screen/option-card.tsx

@@ -1,25 +1,32 @@
-import { Button } from '@/components';
-import React from 'react';
-import ArrowRight from '../../../assets/icons/arrowRight.svg';
-import { useTranslation  } from 'react-i18next'
+import { Button } from "@/components";
+import ArrowRight from "../../../assets/icons/arrowRight.svg";
+import { useLocalTranslation } from "@/useLocalTranslation";
 
 interface OptionCardProps {
-    title: string;
+  title: string;
 }
 
 const OptionCard: React.FC<OptionCardProps> = (props) => {
- const { i18n} = useTranslation();
-          const isLTR = i18n.dir() === 'ltr';
-    return (
-        <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
-            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">{props.title}</p>
-            <Button variant="rounded-icon" size="icon" className="babylai-text-primary-500 hover:babylai-bg-primary-100">
-                <ArrowRight  className={`babylai-w-[12px] babylai-h-[12px] ${
-      isLTR ? '' : 'babylai-rotate-180'
-    } babylai-text-primary-500`}/>
-            </Button>
-        </div>
-    )
-}
+  const i18n = useLocalTranslation();
+  const isLTR = i18n.dir == "ltr";
+  return (
+    <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
+      <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">
+        {props.title}
+      </p>
+      <Button
+        variant="rounded-icon"
+        size="icon"
+        className="babylai-text-primary-500 hover:babylai-bg-primary-100"
+      >
+        <ArrowRight
+          className={`babylai-w-[12px] babylai-h-[12px] ${
+            isLTR ? "" : "babylai-rotate-180"
+          } babylai-text-primary-500`}
+        />
+      </Button>
+    </div>
+  );
+};
 
-export default OptionCard
+export default OptionCard;

package/src/ui/confirmation-modal/index.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@/components";
 import { useLocalTranslation } from "@/useLocalTranslation";
-import React from "react";
 
 interface ConfirmationModalProps {
     title: string;

package/src/ui/floating-message.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import CloseIcon from '../assets/icons/close.svg'
 interface FloatingMessageProps {
   message: string

package/src/ui/help-button.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Logo from '../assets/logo.svg'
 
 interface HelpButtonProps {

package/src/ui/help-center.tsx

@@ -1,5 +1,5 @@
 import ReviewDialog from '@/ui/review-dialog';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { apiRequest } from '../core/api';
 import { ClientAblyService } from '../core/AblyService';
 import { useLocalTranslation } from '../useLocalTranslation';
@@ -8,6 +8,7 @@ import { HelpScreenData, Message, Option, ReviewProps } from '../lib/types';
 import { FloatingMessage } from './floating-message';
 import { HelpButton } from './help-button';
 import { HelpPopup } from './help-popup';
+import { defaultLanguage } from '@/i18n';
 
 interface HelpCenterProps {
   helpScreenId: string;
@@ -27,7 +28,7 @@ export function HelpCenter({
   helpScreenId,
   user,
   showArrow = true,
-  language = 'en',
+  language = defaultLanguage,
   messageLabel = null,
   showHelpScreen = false,
 }: HelpCenterProps) {

package/src/ui/help-popup.tsx

@@ -5,7 +5,7 @@ import ChatBotErrorScreen from '@/ui/chatbot-popup/error-screen';
 import HomeScreen from '@/ui/chatbot-popup/home-screen';
 import ChatBotLoadingScreen from '@/ui/chatbot-popup/loading-screen';
 import OptionsListScreen from '@/ui/chatbot-popup/options-list-screen';
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import ChatIcon from '../assets/icons/chat.svg';
 import { Button } from '@/components';
 import { HelpScreenData, Message, Option } from '@/lib/types';

package/src/ui/review-dialog/index.tsx

@@ -1,8 +1,8 @@
 import { ReviewProps } from '@/lib/types'
 import { Rating } from '@/ui/review-dialog/rating'
-import React from 'react'
 import { useLocalTranslation } from '../../useLocalTranslation'
 import CloseCircle from '../../assets/icons/closeCircle.svg'
+import { useState } from 'react';
 
 interface ReviewDialogProps {
     handleSubmit: ({ comment, rating }: ReviewProps) => void;
@@ -11,9 +11,9 @@ interface ReviewDialogProps {
 
 const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
     const { t } = useLocalTranslation()
-    const [comment, setComment] = React.useState<string>('')
-    const [rating, setRating] = React.useState<number>(0)
-    const [error, setError] = React.useState<{ comment?: string; rating?: string }>({})
+    const [comment, setComment] = useState<string>('')
+    const [rating, setRating] = useState<number>(0)
+    const [error, setError] = useState<{ comment?: string; rating?: string }>({})
 
     const isCommentValid = comment.length >= 10 && comment.length <= 500
     const isRatingValid = rating >= 1 && rating <= 5

package/src/useLocalTranslation.ts

@@ -1,14 +1,14 @@
-
-import { useMemo } from 'react';
-import { createHelpCenterI18n } from './i18n';
+import { useMemo } from "react";
+import { createHelpCenterI18n, defaultLanguage } from "./i18n";
 
 export const useLocalTranslation = (languageFromProps?: string) => {
-  const language = languageFromProps || localStorage.getItem('app-language') || 'en';
+  const language =
+    languageFromProps || localStorage.getItem("app-language") || defaultLanguage;
 
   const i18n = useMemo(() => createHelpCenterI18n(language), [language]);
 
   const t = (key: string) => i18n.t(key);
   const dir = i18n.dir();
 
-  return { t, dir , i18n };
+  return { t, dir, i18n };
 };

package/tsconfig.json

@@ -22,23 +22,34 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
-    "jsx": "react",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
-     "paths": {
-      "@/*": ["src/*"],
-      "@/components/*": ["src/components/*"],
-      "@/ui/*": ["src/ui/*"],
-      "@/lib/*": ["src/lib/*"],
-      "@/assets/*": ["src/assets/*"]
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/ui/*": [
+        "src/ui/*"
+      ],
+      "@/lib/*": [
+        "src/lib/*"
+      ],
+      "@/assets/*": [
+        "src/assets/*"
+      ]
     },
   },
   "include": [
     "src",
+    "src/types",
     "assets"
   ],
   "exclude": [

package/src/styles/tailwind.css

@@ -1,4 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;