Merge pull request #12 from squidit/feature/add-more-components

🌐 feature: Setup da internacionalização

README.md

@@ -16,14 +16,16 @@
 
 ## Installation
 
-To use this library in your React project, you can install it via npm or yarn:
+1. To use this library in your React project, you can install it via npm or yarn:
 
 ```bash
 npm install @squidit/css @squidit/react-css
 # or
 yarn add @squidit/css @squidit/react-css
 ```
 
+2. Configure css in your project according to the @squidit/css documentation described in the project's [README](https://github.com/squidit/css/blob/master/README.md)
+
 ## How to Use
 
 After installation, you can import and use the components as needed in your React components:

package.json

@@ -1,10 +1,10 @@
 {
   "name": "@squidit/react-css",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "scripts": {
     "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
     "lint": "eslint src --ext js,ts,tsx",
-    "build": "tsc && vite build",
+    "build": "rm -rf dist && tsc && vite build",
     "test": "vitest run",
     "test-watch": "vitest",
     "test:ui": "vitest --ui",
@@ -34,7 +34,29 @@
     "type": "git",
     "url": "git+https://github.com/squidit/react-css.git"
   },
-  "homepage": "https://squidit.github.io/css",
+  "homepage": "https://react-css.squidit.com.br",
+  "keywords": [
+    "react",
+    "components",
+    "library",
+    "UI",
+    "user interface",
+    "Squid",
+    "design system",
+    "componentization",
+    "frontend",
+    "web",
+    "reusable",
+    "responsive",
+    "customizable",
+    "themes",
+    "modern",
+    "flexible",
+    "UI components",
+    "UI library",
+    "design components",
+    "corporate components"
+  ],
   "author": "Squid <developers@squidit.com.br>",
   "license": "MIT",
   "devDependencies": {
@@ -83,5 +105,12 @@
   },
   "peerDependencies": {
     "react": "^18.2.0"
+  },
+  "dependencies": {
+    "i18next": "^23.11.1",
+    "i18next-browser-languagedetector": "^7.2.1",
+    "i18next-http-backend": "^2.5.0",
+    "react-i18next": "^14.1.0",
+    "rxjs": "^7.8.1"
   }
 }

src/assets/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "required": "Required field"
+}

src/assets/locales/es.json

@@ -0,0 +1,3 @@
+{
+  "required": "Campo requerido"
+}

src/assets/locales/pt.json

@@ -0,0 +1,3 @@
+{
+  "required": "Campo obrigatório"
+}

src/components/inputs/sq-input/sq-input.component.tsx

@@ -4,6 +4,7 @@ import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'r
 
 import './sq-input.component.scoped.scss'
 import './sq-input.component.scss'
+import { useTranslation } from 'react-i18next'
 
 const DELAY_TIME_FOR_TYPING_PAUSE = 800
 
@@ -98,6 +99,7 @@ export default ({
     value: value,
     error: '',
   })
+  const { t } = useTranslation()
 
   useEffect(() => {
     if (state.value !== value) {
@@ -126,13 +128,13 @@ export default ({
     if (externalError) {
       state.error = ''
     } else if (!!required && (!state.value || state.value.length < 1) && state.value !== 0) {
-      state.error = 'Required field'
+      state.error = t('required')
     } else if (type === 'email' && !validatorHelper.email(state.value)) {
-      state.error = 'Invalid Email'
+      state.error = t('invalidEmail')
     } else if (type === 'tel' && !validatorHelper.phone(state.value)) {
-      state.error = 'Invalid Phone'
+      state.error = t('invalidPhone')
     } else if (type === 'url' && state.value && state.value.length && !validatorHelper.url(state.value)) {
-      state.error = 'Invalid URL'
+      state.error = t('invalidUrl')
     } else {
       state.error = ''
     }