Merge pull request #19 from squidit/feature/update-docs

Feature/update docs
squidit · Jun 13, 2024 · 5ceee2a · 5ceee2a
2 parents 99dbc60 + 5ebabd6
commit 5ceee2a
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/react-css",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
     "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
     "lint": "eslint src --ext js,ts,tsx",

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -3,20 +3,12 @@ import Backend from 'i18next-http-backend'
 import { initReactI18next } from 'react-i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 
-interface Translations {
-  en: {
-    [key: string]: any
-  }
-  pt: {
-    [key: string]: any
-  }
-  es: {
-    [key: string]: any
-  }
-}
+type DefaultKey = { [key: string]: any }
 
-interface AllComponentsTranslations {
-  [key: string]: Translations
+type Translations = {
+  en: DefaultKey
+  pt: DefaultKey
+  es: DefaultKey
 }
 
 import ptGlobals from '@assets/locales/pt.json'
@@ -50,8 +42,6 @@ import ptSqInputName from '@components/inputs/sq-input-name/locales/pt.json'
 import enSqInputName from '@components/inputs/sq-input-name/locales/en.json'
 import esSqInputName from '@components/inputs/sq-input-name/locales/es.json'
 
-const componentsThatUseGlobals = ['sqInput']
-
 const getResources = () => ({
   en: {
     globals: enGlobals,
@@ -94,6 +84,18 @@ const getResources = () => ({
 export const defaultNS = 'globals'
 export let resources: Translations = getResources()
 
+type LanguageResources = typeof resources
+type Language = keyof LanguageResources
+type ComponentName = keyof LanguageResources[Language]
+type ComponentTranslations = {
+  [L in Language]: Translations[L]
+}
+
+type AllComponentsTranslations = {
+  [C in ComponentName]: ComponentTranslations
+}
+
+const componentsThatUseGlobals: ComponentName[] = ['sqInput']
 export const setAllComponentsTranslations = (allComponentsTranslations: AllComponentsTranslations[]) => {
   if (allComponentsTranslations?.length) {
     allComponentsTranslations.forEach((componentTranslations) => {
@@ -106,13 +108,16 @@ export const setAllComponentsTranslations = (allComponentsTranslations: AllCompo
   }
 }
 
-export const setComponentTranslations = (componentName: string, translations?: Translations) => {
+export const setComponentTranslations = (componentName: ComponentName, translations?: Translations) => {
   componentName?.[0]?.toLocaleLowerCase()
 
   if (translations) {
-    resources.en[componentsThatUseGlobals?.includes(componentName) ? 'globals' : componentName] = translations.en
-    resources.pt[componentsThatUseGlobals?.includes(componentName) ? 'globals' : componentName] = translations.pt
-    resources.es[componentsThatUseGlobals?.includes(componentName) ? 'globals' : componentName] = translations.es
+    const enResources = resources.en[componentsThatUseGlobals?.includes(componentName) ? 'globals' : componentName]
+    const ptResources = resources.pt[componentsThatUseGlobals?.includes(componentName) ? 'globals' : componentName]
+    const esResources = resources.es[componentsThatUseGlobals?.includes(componentName) ? 'globals' : componentName]
+    Object.assign(enResources, translations.en)
+    Object.assign(ptResources, translations.pt)
+    Object.assign(esResources, translations.es)
   } else {
     resources = getResources()
   }

diff --git a/src/index.mdx b/src/index.mdx
@@ -16,6 +16,7 @@ import { Meta } from '@storybook/blocks'
 * [Components](#components)
 * [Installation](#installation)
 * [How to Use](#how-to-use)
+* [Translations](#translations)
 * [Customization](#customization)
 * [License](#license)
 
@@ -68,6 +69,33 @@ const MyComponent = () => {
 export default MyComponent;
 ```
 
+## Translations
+
+The lib is available in English, Portuguese and Spanish. By default it is loaded in English, but you can change the lib language to Portuguese or Spanish as follows:
+
+In your project's index, import the functions responsible for translating the lib, define the translation structure and call the translation function.
+
+Here's an example on StackBlitz:
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-uitsef?embed=1&file=src%2Fmain.tsx"
+  width="100%"
+  height="500px"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+></iframe>
+
+
+It is also possible to change translations for individual components, as shown in the example below
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-uitsef?embed=1&file=src%2FApp.tsx"
+  width="100%"
+  height="500px"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+></iframe>
+
 ## Customization
 
 This library allows high flexibility and customization of the components. You can modify the default styles of the components using specific props or by overriding the styles via CSS.