Add useLanguageAttributeHook story

packages/storybook/src/stories/Misc/atoms/useLanguageAttributeHook.stories.tsx

@@ -0,0 +1,41 @@
+import {useLanguageAttribute, IntroductionText, Button } from "scorer-ui-kit";
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+export default {
+  title: 'Hooks',
+  component: useLanguageAttribute,
+  decorators: []
+};
+
+const Container = styled.div`
+  margin: 100px;
+`;
+
+const Title = styled.h2`
+  color: var(--gray-2);
+  &:lang(ja) {
+    color: red;
+  }
+`;
+
+export const _useLanguageAttribute = () => {
+
+  const {onLanguageAttributeToggle} = useLanguageAttribute(['en','ja'], 'ja');
+  const [selectedLang, setSelectedLang] = useState('japanese');
+
+  const title = selectedLang === 'english' ? 'Welcome' : 'ようこそ';
+  const buttonText = selectedLang === 'english' ? 'Language Toggle': '言語トグル'
+  const introductionText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales non mauris sed fermentum. Proin non elit at lectus semper lacinia a sed nisi. Sed nibh neque, sagittis at laoreet non, sodales non nisl. Nam nec lectus erat. Etiam bibendum tristique ipsum eu dictum. Nam egestas felis in mauris molestie tristique.";
+
+  const onLanguageToggle = useCallback(() => {
+    const updatedLanguage = selectedLang === 'english' ? 'japanese' : 'english';
+    setSelectedLang(updatedLanguage);
+    onLanguageAttributeToggle();
+  },[onLanguageAttributeToggle, selectedLang]);
+
+  return <Container>
+    <Title >{title}</Title>
+    <IntroductionText>{introductionText}</IntroductionText>
+    <Button onClick={onLanguageToggle}>{buttonText}</Button>
+  </Container>;
+};

packages/ui-lib/src/hooks/useLanguageAttribute.tsx

@@ -1,11 +1,16 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
-const setInitialLanguage = (defaultLanguages: string[]) => {
+const setInitialLanguage = (defaultLanguages: string[], initLanguage?: string) => {
   if (defaultLanguages.length === 0) {
     console.warn("defaultLanguages array is empty. Unable to set a language.");
     return;
   }
 
+  if (initLanguage && defaultLanguages.includes(initLanguage)) {
+    document.documentElement.setAttribute("lang", initLanguage);
+    return;
+  }
+
   const browserLang = navigator.language.split("-")[0];
   const htmlLang = document.documentElement.lang;
 
@@ -23,8 +28,10 @@ const setInitialLanguage = (defaultLanguages: string[]) => {
   }
 };
 
-const useLanguageAttribute = (languageList: string[]) => {
-  // Toggles between the first two languages in the list
+const useLanguageAttribute = (languageList: string[], initLanguage?: string) => {
+
+  const isInitialMount = useRef(true);
+
   const onLanguageAttributeToggle = useCallback(() => {
     if (languageList.length < 2) {
       console.warn("Insufficient languages in the list for toggling.");
@@ -42,8 +49,13 @@ const useLanguageAttribute = (languageList: string[]) => {
       console.warn("languageList is empty. Unable to initialize language attribute.");
       return;
     }
-    setInitialLanguage(languageList);
-  }, [languageList]);
+
+    if (isInitialMount.current) {
+      setInitialLanguage(languageList, initLanguage);
+      isInitialMount.current = false;
+    }
+
+  }, [initLanguage, languageList]);
 
   return {
     onLanguageAttributeToggle,