l-min-components 1.7.1520 → 1.7.1522

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1520",
+  "version": "1.7.1522",
   "type": "module",
   "files": [
     "src/assets",

package/src/assets/svg/dashboard.jsx

@@ -1,10 +1,8 @@
-import React from 'react';
-import { useTranslation } from 'l-min-components/src/components';
-import wordStore from '../../mc/wordStore.json';
+import React from "react";
 export const DashboardIcon = ({ width, height, fill }) => (
   <svg
-    width={width || '24'}
-    height={height || '25'}
+    width={width || "24"}
+    height={height || "25"}
     viewBox="0 0 24 25"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -48,11 +46,10 @@ export const DashboardIcon = ({ width, height, fill }) => (
   </svg>
 );
 export const DashboardIconActive = ({ width, height }) => {
-  const { findText } = useTranslation(wordStore);
   return (
     <svg
-      width={width || '24'}
-      height={height || '25'}
+      width={width || "24"}
+      height={height || "25"}
       viewBox="0 0 24 25"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -64,7 +61,7 @@ export const DashboardIconActive = ({ width, height }) => {
         stroke-miterlimit="10"
         stroke-linecap="round"
         stroke-linejoin="round"
-        fill={findText('#ffffff')}
+        fill="#ffffff"
       />
       <path
         d="M17 10.1797H19C21 10.1797 22 9.17969 22 7.17969V5.17969C22 3.17969 21 2.17969 19 2.17969H17C15 2.17969 14 3.17969 14 5.17969V7.17969C14 9.17969 15 10.1797 17 10.1797Z"
@@ -73,7 +70,7 @@ export const DashboardIconActive = ({ width, height }) => {
         stroke-miterlimit="10"
         stroke-linecap="round"
         stroke-linejoin="round"
-        fill={findText('#ffffff')}
+        fill={"#ffffff"}
       />
       <path
         d="M17 22.1797H19C21 22.1797 22 21.1797 22 19.1797V17.1797C22 15.1797 21 14.1797 19 14.1797H17C15 14.1797 14 15.1797 14 17.1797V19.1797C14 21.1797 15 22.1797 17 22.1797Z"
@@ -82,7 +79,7 @@ export const DashboardIconActive = ({ width, height }) => {
         stroke-miterlimit="10"
         stroke-linecap="round"
         stroke-linejoin="round"
-        fill={findText('#ffffff')}
+        fill={"#ffffff"}
       />
       <path
         d="M5 22.1797H7C9 22.1797 10 21.1797 10 19.1797V17.1797C10 15.1797 9 14.1797 7 14.1797H5C3 14.1797 2 15.1797 2 17.1797V19.1797C2 21.1797 3 22.1797 5 22.1797Z"
@@ -91,7 +88,7 @@ export const DashboardIconActive = ({ width, height }) => {
         stroke-miterlimit="10"
         stroke-linecap="round"
         stroke-linejoin="round"
-        fill={findText('#ffffff')}
+        fill={"#ffffff"}
       />
     </svg>
   );

package/src/components/AIAnalysis/grammer.jsx

@@ -1,18 +1,18 @@
-import React, { useState } from 'react';
-import CursorClickIcon from './assets/cursorClick';
-import styled from 'styled-components';
-import { IoCloseOutline } from 'react-icons/io5';
-import { FaCheck } from 'react-icons/fa6';
-import ButtonComponent from '../button';
-import { useTranslation } from 'l-min-components/src/components';
-import wordStore from '../../mc/wordStore.json';
+import React, { useState } from "react";
+import CursorClickIcon from "./assets/cursorClick";
+import styled from "styled-components";
+import { IoCloseOutline } from "react-icons/io5";
+import { FaCheck } from "react-icons/fa6";
+import ButtonComponent from "../button";
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
 const Grammer = ({ data, hideScore }) => {
   const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(null);
   const [showVersion, setShowVersion] = useState(null);
-  const feedbackCorrection = data['Correction Operations (Optional)'] || [];
-  const originalText = data['Original Speech'] || '';
-  const correctText = data['Grammatical Correct Version'] || '';
+  const feedbackCorrection = data["Correction Operations (Optional)"] || [];
+  const originalText = data["Original Speech"] || "";
+  const correctText = data["Grammatical Correct Version"] || "";
   const getFeekbackResult = () => {
     const result = [];
     let positionCounter = 1; // Tracks the word position in the text
@@ -25,7 +25,7 @@ const Grammer = ({ data, hideScore }) => {
       const correction = feedbackCorrection[correctionIndex];
       if (
         correction &&
-        correction?.operation === 'substituted' &&
+        correction?.operation === "substituted" &&
         // Handle substitution
         words
           .slice(
@@ -104,7 +104,7 @@ const Grammer = ({ data, hideScore }) => {
     return result;
   };
   const generateParagraph = (data) => {
-    let paragraph = '<p>';
+    let paragraph = "<p>";
     data?.forEach((item) => {
       if (item?.highlight) {
         paragraph += `<span>${item?.text}</span> `;
@@ -112,7 +112,7 @@ const Grammer = ({ data, hideScore }) => {
         paragraph += `${item?.text} `;
       }
     });
-    paragraph = paragraph?.trim() + '</p>';
+    paragraph = paragraph?.trim() + "</p>";
     return paragraph;
   };
   return (
@@ -131,14 +131,14 @@ const Grammer = ({ data, hideScore }) => {
           <CursorClickIcon />
           <p>
             {findText(
-              'Click on the words/sentences highlighted in red to see feedback',
+              "Click on the words/sentences highlighted in red to see feedback"
             )}
           </p>
         </div>
         {!hideScore && (
           <p>
-            {findText('Points:')}
-            <span>{data?.['Grammar Score'] || 0}</span>
+            {findText("Points:")}
+            <span>{data?.["Grammar Score"] || 0}</span>
           </p>
         )}
       </Header>
@@ -159,7 +159,7 @@ const Grammer = ({ data, hideScore }) => {
         </div>
         {selected && (
           <div className="feedback_content">
-            <h3>{findText('Feedback:')}</h3>
+            <h3>{findText("Feedback:")}</h3>
             <div className="reply">
               {selected?.operation !== 'inserted' && (
                 <div className="row red">
@@ -187,7 +187,7 @@ const Grammer = ({ data, hideScore }) => {
             });
           }}
         >
-          <ButtonComponent text={findText('View script')} type="secondary" />
+          <ButtonComponent text={findText("View script")} type="secondary" />
         </span>
         <span
           onClick={() => {
@@ -200,7 +200,7 @@ const Grammer = ({ data, hideScore }) => {
           }}
         >
           <ButtonComponent
-            text={findText('View corrected version')}
+            text={findText("View corrected version")}
             type="secondary"
           />
         </span>
@@ -220,8 +220,8 @@ const WordsModal = ({ onClose, isCorrect, value }) => {
         <div className="word_wrapper">
           {isCorrect && (
             <div className="header">
-              <h4>{findText('Corrected version')}</h4>
-              <p>{findText('Introduced words are highlighted in green')}</p>
+              <h4>{findText("Corrected version")}</h4>
+              <p>{findText("Introduced words are highlighted in green")}</p>
             </div>
           )}
           <div

package/src/components/AIAnalysis/relevant.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import ArrowDown from './assets/arrowDown';
-import { useTranslation } from 'l-min-components/src/components';
-import wordStore from '../../mc/wordStore.json';
+import React, { useState } from "react";
+import styled from "styled-components";
+import ArrowDown from "./assets/arrowDown";
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
 const Relevant = ({ data, student_text, hideScore }) => {
   const { findText } = useTranslation(wordStore);
   return (
@@ -13,14 +13,14 @@ const Relevant = ({ data, student_text, hideScore }) => {
         </h2>
         {!hideScore && (
           <p>
-            {findText('Points:')}
+            {findText("Points:")}
             <span>{data?.Point || 0}</span>
           </p>
         )}
       </Header>
-      <Dropdown label={findText('Feedback')} isFeedback text={data?.Feedback} />
+      <Dropdown label={findText("Feedback")} isFeedback text={data?.Feedback} />
       {student_text && (
-        <Dropdown label={findText('Student essay')} text={student_text} />
+        <Dropdown label={findText("Student essay")} text={student_text} />
       )}
     </Container>
   );
@@ -31,16 +31,16 @@ const Dropdown = ({ isFeedback, text, label }) => {
   const [toggle, setToggle] = useState(true);
   return (
     <DropdownContainer
-      className={findText('{arg1}', {
-        arg1: isFeedback ? 'feedback' : undefined,
+      className={findText("{arg1}", {
+        arg1: isFeedback ? "feedback" : undefined,
       })}
       onClick={() => {
         text && setToggle(!toggle);
       }}
     >
       <div
-        className={findText('dd_header {arg1}', {
-          arg1: toggle ? 'toggle' : '',
+        className={findText("dd_header {arg1}", {
+          arg1: toggle ? "toggle" : "",
         })}
       >
         <p>{label}</p> <ArrowDown />

package/src/components/AIAnalysis/responsePlayer.jsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useSpeechSynthesis } from 'react-speech-kit';
-import useAudioPlayer from '../useAudioPlayer';
-import { useTranslation } from 'l-min-components/src/components';
-import wordStore from '../../mc/wordStore.json';
-const ResponsePlayer = ({ text, audio, small, Label = 'You say' }) => {
+import React, { useState } from "react";
+import styled from "styled-components";
+import { useSpeechSynthesis } from "react-speech-kit";
+import useAudioPlayer from "../useAudioPlayer";
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
+const ResponsePlayer = ({ text, audio, small, Label = "You say" }) => {
   const { findText } = useTranslation(wordStore);
   const [isPlaying, setIsPlaying] = useState(false);
   const {
@@ -39,7 +39,7 @@ const ResponsePlayer = ({ text, audio, small, Label = 'You say' }) => {
           }}
         >
           {isPlaying ? <StopIcon /> : <EarIcon />}
-          <span>{findText('Correct response')}</span>
+          <span>{findText("Correct response")}</span>
         </Button>
       )}
       {audio && isReady && (

package/src/components/AIAnalysis/speech.jsx

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import CursorClickIcon from './assets/cursorClick';
-import ResponsePlayer from './responsePlayer';
-import DropdownResult from './dropdownResult';
-import WordWheel from './wordWheel';
-import formatScore from '../../utils/formatScore';
-import { useTranslation } from 'l-min-components/src/components';
-import wordStore from '../../mc/wordStore.json';
+import React, { useState } from "react";
+import styled from "styled-components";
+import CursorClickIcon from "./assets/cursorClick";
+import ResponsePlayer from "./responsePlayer";
+import DropdownResult from "./dropdownResult";
+import WordWheel from "./wordWheel";
+import formatScore from "../../utils/formatScore";
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
 const Speech = ({ data, audio, hideScore }) => {
   const { findText } = useTranslation(wordStore);
-  const wordsData = Object.values(data['Word Phonetic Evaluation'])?.map(
+  const wordsData = Object.values(data["Word Phonetic Evaluation"])?.map(
     (word, idx) => ({
       id: idx,
       value: word,
-    }),
+    })
   );
   const [selectedWord, setSelectWord] = useState(wordsData[0]);
   const handeSelectWord = (idx, word) => {
@@ -47,12 +47,12 @@ const Speech = ({ data, audio, hideScore }) => {
       <Header>
         <div className="info">
           <CursorClickIcon />
-          <p>{findText('Click on the word to see detailed feedback')}</p>
+          <p>{findText("Click on the word to see detailed feedback")}</p>
         </div>
         {!hideScore && (
           <p>
-            {findText('Points:')}
-            <span>{formatScore(data['General Score']) || 0}</span>
+            {findText("Points:")}
+            <span>{formatScore(data["General Score"]) || 0}</span>
           </p>
         )}
       </Header>
@@ -80,17 +80,17 @@ const Speech = ({ data, audio, hideScore }) => {
         <div className="resp_body">
           <h2
             style={{
-              color: setColor(selectedWord?.value['Word Score']),
+              color: setColor(selectedWord?.value["Word Score"]),
             }}
           >
-            '{selectedWord?.value['Word']?.toLowerCase()}'
+            '{selectedWord?.value["Word"]?.toLowerCase()}'
           </h2>
           <div className="resp">
             {audio?.url && (
               <ResponsePlayer
                 small
                 audio={audio}
-                Label={findText('Student response')}
+                Label={findText("Student response")}
               />
             )}
 
@@ -98,7 +98,7 @@ const Speech = ({ data, audio, hideScore }) => {
           </div>
         </div>{' '}
         <DropdownResult
-          label={findText('Phoneme phonetics')}
+          label={findText("Phoneme phonetics")}
           element={
             <PhonemePhonetics
               data={selectedWord?.value['Phoneme Phonetic Evaluation']}
@@ -106,11 +106,11 @@ const Speech = ({ data, audio, hideScore }) => {
           }
         />
         <DropdownResult
-          label={findText('Word phonetics')}
+          label={findText("Word phonetics")}
           element={<WordPhonetics data={selectedWord?.value} />}
         />
         <DropdownResult
-          label={findText('Clarity level')}
+          label={findText("Clarity level")}
           element={
             <Claritylevel
               audibility={data?.Audibility}
@@ -120,8 +120,8 @@ const Speech = ({ data, audio, hideScore }) => {
           }
         />
         <DropdownResult
-          label={findText('Intonation')}
-          element={<Intonation value={data['Intonation']} />}
+          label={findText("Intonation")}
+          element={<Intonation value={data["Intonation"]} />}
         />
       </BottomWrapper>
     </Container>
@@ -244,37 +244,37 @@ export const Claritylevel = ({
     <ClaritylevelContent>
       <div className="context_box">
         <div className="top">
-          <h4>{findText('Speech Rate')}</h4>
-          <p>{findText('Your average words spoken per minute.')}</p>
+          <h4>{findText("Speech Rate")}</h4>
+          <p>{findText("Your average words spoken per minute.")}</p>
         </div>
         <div className="botton">
           <SpeedRateIcon />
           <p>
             {Math.floor(speechRate) || 0}
-            {findText('(wpm)')}
+            {findText("(wpm)")}
           </p>
         </div>
       </div>
       <div className="context_box">
         <div className="top">
-          <h4>{findText('Fluency')}</h4>
+          <h4>{findText("Fluency")}</h4>
           <p>
-            {findText('Your level of speaking proficiency in the language.')}
+            {findText("Your level of speaking proficiency in the language.")}
           </p>
         </div>
         <div className="botton">
           <WaveIcon />
           <p>
             {Math.floor(fluency) || 0}
-            {findText('(decibel level)')}
+            {findText("(decibel level)")}
           </p>
         </div>
       </div>
       <div className="context_box">
         <div className="top">
-          <h4>{findText('Audibility')}</h4>
+          <h4>{findText("Audibility")}</h4>
           <p>
-            {findText('How clearly you project your voice while speaking.')}
+            {findText("How clearly you project your voice while speaking.")}
           </p>
         </div>
         <div className="botton">
@@ -447,7 +447,7 @@ export const Intonation = ({ value = 0 }) => {
             : '#F95454';
   return (
     <IntonationContainer>
-      <p>{findText('The rise and fall of your voice while speaking.')}</p>
+      <p>{findText("The rise and fall of your voice while speaking.")}</p>
       <IntonationIcon />
       <p
         style={{
@@ -498,8 +498,8 @@ export const PhonemePhonetics = ({ data }) => {
   };
   const getFeedback = (v) => {
     if (v) {
-      const content = v['Phoneme Feedback'];
-      const title = v['Phoneme Feedback Summary'];
+      const content = v["Phoneme Feedback"];
+      const title = v["Phoneme Feedback Summary"];
       if (content && title)
         return {
           title,
@@ -514,9 +514,9 @@ export const PhonemePhonetics = ({ data }) => {
       <div className="box_container">
         <div className="table_wrapper">
           <div className="t_head">
-            <p>{findText('Phoneme')}</p>
-            <p>{findText('Score')}</p>
-            <p>{findText('Grade')}</p>
+            <p>{findText("Phoneme")}</p>
+            <p>{findText("Score")}</p>
+            <p>{findText("Grade")}</p>
           </div>
           <div className="row">
             {values?.map((v, idx) => (
@@ -632,25 +632,25 @@ const PhonemePhoneticsContainer = styled.div`
 `;
 export const WordPhonetics = ({ data }) => {
   const { findText } = useTranslation(wordStore);
-  const progress = data['Word Score'];
-  const syllables = data['Syllables'];
+  const progress = data["Word Score"];
+  const syllables = data["Syllables"];
   return (
     <WordPhoneticsContainer>
       <div className="header">
         <div className="box">
-          <p>{findText('Word Score:')}</p> <WordWheel progress={progress} />
+          <p>{findText("Word Score:")}</p> <WordWheel progress={progress} />
         </div>
         <div className="box">
-          <p>{findText('Number of Syllables:')}</p>
-          <span>{data['Number Of Syllables']}</span>
+          <p>{findText("Number of Syllables:")}</p>
+          <span>{data["Number Of Syllables"]}</span>
         </div>
       </div>
       <div className="table_wrapper">
         <div className="t_head">
-          <p>{findText('Syllables')}</p>
-          <p>{findText('Score')}</p>
-          <p>{findText('Syllable Structure')}</p>
-          <p>{findText('Stress')}</p>
+          <p>{findText("Syllables")}</p>
+          <p>{findText("Score")}</p>
+          <p>{findText("Syllable Structure")}</p>
+          <p>{findText("Stress")}</p>
         </div>
         <div className="t_row">
           {syllables?.map((v, key) => (
@@ -686,10 +686,10 @@ export const WordPhonetics = ({ data }) => {
               <div className="box">
                 <p
                   style={{
-                    textTransform: 'capitalize',
+                    textTransform: "capitalize",
                   }}
                 >
-                  {v['Stress']}
+                  {v["Stress"]}
                 </p>
               </div>
             </div>