@harjs/react-ui 1.0.2 → 1.1.3

package/README.md

@@ -9,7 +9,7 @@ A lightweight, premium, and fully type-safe UI component library built explicitl
 
 ---
 
-## 🚀 Key Features
+## Features
 
 - **Rich Component Ecosystem**: Out-of-the-box support for advanced architectural layout systems including dynamic Data Tables, Kanban Boards, Navigation Menus, Wizards (Steps), and Data Visualization Charts.
 - **Strict Type-Safety**: Fully engineered with TypeScript generics and atomic prop-types, giving you predictive IntelliSense and rigid compile-time validations for complex structures like nested table filters and form models.
@@ -18,7 +18,7 @@ A lightweight, premium, and fully type-safe UI component library built explicitl
 
 ---
 
-## 📦 Installation
+## Installation
 
 To inject this package into your user interface layer workspace, execute the command corresponding to your package manager:
 

package/dist/components/charts/gantt/index.js

@@ -2,7 +2,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import "../../../assets/css/components/charts/gantt/styles.css";
 import Pagination from "../../navigation/pagination";
-import { useTranslation } from "../../../libs/core/application/hooks";
+import { useTranslation } from "@harjs/translation";
+import TableTR from "../../../libs/core/application/locales/table/tr";
+import TableEN from "../../../libs/core/application/locales/table/en";
 const colors = ["#A881FA", "#75CFA4", "#EE6D63", "#FAD87A"];
 const Gantt = ({ title, description, data, pagination, config = { isSearchable: false } }) => {
     // refs
@@ -48,7 +50,10 @@ const Gantt = ({ title, description, data, pagination, config = { isSearchable:
     let PREVMATCHMONT = 0;
     let PREVMATCHDAY = 0;
     // hooks
-    const { t } = useTranslation(String(config.locale ?? "tr"));
+    const { t } = useTranslation(String(config?.locale ?? "tr"), {
+        tr: { ...TableTR },
+        en: { ...TableEN },
+    });
     // methods
     const handleResize = useCallback(() => {
         return (_) => {

package/dist/components/data-display/kanban-board/filter/DateFilters.js

@@ -4,11 +4,16 @@ import { ARIcon } from "../../../icons";
 import Grid from "../../grid-system";
 import Button from "../../../form/button";
 import Divider from "../../divider";
-import { useTranslation } from "../../../../libs/core/application/hooks";
+import { useTranslation } from "@harjs/translation";
+import KanbanBoardTR from "../../../../libs/core/application/locales/kanban-board/tr";
+import KanbanBoardEN from "../../../../libs/core/application/locales/kanban-board/en";
 const { Row, Column, Box } = Grid;
 function DateFilters({ states, methods, config }) {
     // hooks
-    const { t } = useTranslation(String(config?.locale ?? "tr"));
+    const { t } = useTranslation(String(config?.locale ?? "tr"), {
+        tr: { ...KanbanBoardTR },
+        en: { ...KanbanBoardEN },
+    });
     return Object.entries(states.dateFilters.get).map(([name, range], index) => {
         const isEqualsName = states.openName.get === name;
         const className = [];

package/dist/components/data-display/kanban-board/filter/SelectFilters.js

@@ -4,11 +4,16 @@ import Checkbox from "../../../form/checkbox";
 import Grid from "../../grid-system";
 import Button from "../../../form/button";
 import Divider from "../../divider";
-import { useTranslation } from "../../../../libs/core/application/hooks";
+import { useTranslation } from "@harjs/translation";
+import KanbanBoardTR from "../../../../libs/core/application/locales/kanban-board/tr";
+import KanbanBoardEN from "../../../../libs/core/application/locales/kanban-board/en";
 const { Box } = Grid;
 function SelectFilters({ states, methods, config }) {
     // hooks
-    const { t } = useTranslation(String(config?.locale ?? "tr"));
+    const { t } = useTranslation(String(config?.locale ?? "tr"), {
+        tr: { ...KanbanBoardTR },
+        en: { ...KanbanBoardEN },
+    });
     return Object.entries(states.selectFilters.get).map(([name, values], index) => {
         const isEqualsName = states.openName.get === name;
         const className = [];

package/dist/components/data-display/kanban-board/filter/index.js

@@ -4,14 +4,19 @@ import DateFilters from "./DateFilters";
 import SelectFilters from "./SelectFilters";
 import React from "react";
 import Input from "../../../form/input";
-import { useTranslation } from "../../../../libs/core/application/hooks";
+import { useTranslation } from "@harjs/translation";
+import KanbanBoardTR from "../../../../libs/core/application/locales/kanban-board/tr";
+import KanbanBoardEN from "../../../../libs/core/application/locales/kanban-board/en";
 function Filter({ states, config }) {
     // refs
     const _searchTimeOut = useRef(null);
     // states
     const [openName, setOpenName] = useState(null);
     // hooks
-    const { t } = useTranslation(String(config?.locale ?? "tr"));
+    const { t } = useTranslation(String(config?.locale ?? "tr"), {
+        tr: { ...KanbanBoardTR },
+        en: { ...KanbanBoardEN },
+    });
     // methods
     const handleOpen = (name) => setOpenName(openName === name ? null : name);
     return (React.createElement("div", { className: "filters" },

package/dist/components/data-display/table/PropertiesPopup.js

@@ -3,12 +3,14 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
 import ReactDOM from "react-dom";
 import { ARIcon } from "../../icons";
 import { ExtractKey } from "./Helpers";
-import { useTranslation } from "../../../libs/core/application/hooks";
+import TableTR from "../../../libs/core/application/locales/table/tr";
+import TableEN from "../../../libs/core/application/locales/table/en";
+import { useTranslation } from "@harjs/translation";
 function PropertiesPopup({ refs, states, methods, coordinate, config }) {
     // refs
     const _arTablePropertiesPopup = useRef(null);
     // hooks
-    const { t } = useTranslation(String(config.locale ?? "tr"));
+    const { t } = useTranslation(String(config.locale ?? "tr"), { tr: { ...TableTR }, en: { ...TableEN } });
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;

package/dist/components/data-display/table/body/TBody.js

@@ -3,7 +3,9 @@ import React, { Fragment, memo, useEffect, useRef, useState } from "react";
 import { ARIcon } from "../../../icons";
 import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
-import { useTranslation } from "../../../../libs/core/application/hooks";
+import TableTR from "../../../../libs/core/application/locales/table/tr";
+import TableEN from "../../../../libs/core/application/locales/table/en";
+import { useTranslation } from "@harjs/translation";
 const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config, methods, states, renderCell, }) => {
     const _subrowSelector = config.subrow?.selector ?? "subitems";
     const _subrowButton = config.subrow?.button ?? true;
@@ -48,7 +50,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
     const [rowHeights, setRowHeights] = useState([]);
     const _subrowSelector = config.subrow?.selector ?? "subitems";
     const _subrowButton = config.subrow?.button ?? false;
-    const { t } = useTranslation(String(config.locale ?? "tr"));
+    const { t } = useTranslation(String(config.locale ?? "tr"), { tr: { ...TableTR }, en: { ...TableEN } });
     const renderCell = ({ item, column, index, cIndex, depth, level, height = 0, isSubrows = false }) => {
         let render;
         const itemTrackId = methods.trackBy?.(item) ?? index.toString();

package/dist/components/data-display/table/index.js

@@ -19,7 +19,9 @@ import { ExtractKey } from "./Helpers";
 import Header from "./header/Header";
 import TBody from "./body/TBody";
 import DatePicker from "../../form/date-picker";
-import { useTranslation } from "../../../libs/core/application/hooks";
+import { useTranslation } from "@harjs/translation";
+import TableTR from "../../../libs/core/application/locales/table/tr";
+import TableEN from "../../../libs/core/application/locales/table/en";
 const { Row, Column } = Grid;
 const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, selectionDisabled, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
     const _innerRef = useRef(null);
@@ -64,7 +66,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const [currentPage, setCurrentPage] = useState(1);
     const [selectedPerPage, setSelectedPerPage] = useState(pagination?.perPage ?? 10);
     const [isMobile, setIsMobile] = useState(false);
-    const { t } = useTranslation(String(config.locale ?? "tr"));
+    const { t } = useTranslation(String(config.locale ?? "tr"), {
+        tr: { ...TableTR },
+        en: { ...TableEN },
+    });
     useImperativeHandle(ref, () => _innerRef.current);
     if (config && Object.keys(config.scroll || {}).length > 0) {
         if (_tableContent.current && config.scroll) {

package/dist/libs/core/application/contexts/index.d.ts

@@ -1,5 +1,4 @@
 import { ConfigProvider } from "./Config";
 import { NotificationProvider } from "./Notification";
-import { LanguageProvider } from "./Language";
 import { LoadingProvider } from "./Loading";
-export { ConfigProvider, LanguageProvider, NotificationProvider, LoadingProvider };
+export { ConfigProvider, NotificationProvider, LoadingProvider };

package/dist/libs/core/application/contexts/index.js

@@ -1,5 +1,4 @@
 import { ConfigProvider } from "./Config";
 import { NotificationProvider } from "./Notification";
-import { LanguageProvider } from "./Language";
 import { LoadingProvider } from "./Loading";
-export { ConfigProvider, LanguageProvider, NotificationProvider, LoadingProvider };
+export { ConfigProvider, NotificationProvider, LoadingProvider };

package/dist/libs/core/application/hooks/index.d.ts

@@ -1,6 +1,5 @@
 import useNotification from "./useNotification";
 import useValidation from "./useValidation";
-import useTranslation from "./useTranslation";
 declare const useLayout: () => {
     config: {
         layout: {
@@ -37,5 +36,4 @@ declare const useLoading: () => {
     isLoading: boolean;
     setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 };
-declare const useLanguage: () => string | undefined;
-export { useLayout, useLoading, useLanguage, useTranslation, useNotification, useValidation };
+export { useLayout, useLoading, useNotification, useValidation };

package/dist/libs/core/application/hooks/index.js

@@ -1,11 +1,9 @@
 "use client";
 import { useContext } from "react";
 import { ConfigContext } from "../contexts/Config";
-import { LanguageContext } from "../contexts/Language";
 import { LoadingContext } from "../contexts/Loading";
 import useNotification from "./useNotification";
 import useValidation from "./useValidation";
-import useTranslation from "./useTranslation";
 const useLayout = () => {
     const context = useContext(ConfigContext);
     if (!context)
@@ -13,5 +11,4 @@ const useLayout = () => {
     return context;
 };
 const useLoading = () => useContext(LoadingContext);
-const useLanguage = () => useContext(LanguageContext);
-export { useLayout, useLoading, useLanguage, useTranslation, useNotification, useValidation };
+export { useLayout, useLoading, useNotification, useValidation };

package/dist/libs/infrastructure/shared/index.d.ts

@@ -0,0 +1,5 @@
+import DATE from "./DATE";
+import NUMBER from "./NUMBER";
+import PHONE from "./PHONE";
+import Utils from "./Utils";
+export { DATE, NUMBER, PHONE, Utils };

package/dist/libs/infrastructure/shared/index.js

@@ -0,0 +1,5 @@
+import DATE from "./DATE";
+import NUMBER from "./NUMBER";
+import PHONE from "./PHONE";
+import Utils from "./Utils";
+export { DATE, NUMBER, PHONE, Utils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harjs/react-ui",
-  "version": "1.0.2",
+  "version": "1.1.3",
   "publishConfig": {
     "access": "public"
   },
@@ -66,5 +66,8 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "@harjs/translation": "^1.0.1"
   }
 }

package/dist/libs/core/application/contexts/Language.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-declare const LanguageContext: React.Context<string | undefined>;
-declare const LanguageProvider: ({ children, language }: {
-    children: React.ReactNode;
-    language: string | undefined;
-}) => React.JSX.Element;
-export { LanguageContext, LanguageProvider };

package/dist/libs/core/application/contexts/Language.js

@@ -1,7 +0,0 @@
-"use client";
-import React, { createContext } from "react";
-const LanguageContext = createContext(undefined);
-const LanguageProvider = ({ children, language }) => {
-    return React.createElement(LanguageContext.Provider, { value: language }, children);
-};
-export { LanguageContext, LanguageProvider };

package/dist/libs/core/application/hooks/useTranslation.d.ts

@@ -1,9 +0,0 @@
-import { INotificationLocale } from "../locales";
-import IKanbanBoardLocale from "../locales/kanban-board/IKanbanBoardLocale";
-import ITableLocale from "../locales/table/ITableLocale";
-type LocaleMap = Record<string, Record<string, any>>;
-declare const useTranslation: <TBaseLocale>(currentLanguage: string | undefined, translations?: LocaleMap) => {
-    t: (key: Extract<keyof TBaseLocale | keyof ITableLocale | keyof IKanbanBoardLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
-    currentLanguage: string | undefined;
-};
-export default useTranslation;

package/dist/libs/core/application/hooks/useTranslation.js

@@ -1,25 +0,0 @@
-import Utils from "../../../infrastructure/shared/Utils";
-import { NotificationEN, NotificationTR } from "../locales";
-import KanbanBoardEN from "../locales/kanban-board/en";
-import KanbanBoardTR from "../locales/kanban-board/tr";
-import TableEN from "../locales/table/en";
-import TableTR from "../locales/table/tr";
-const useTranslation = function (currentLanguage, translations = {}) {
-    const merged = {};
-    const ExtraLocales = {
-        tr: { ...TableTR, ...KanbanBoardTR, ...NotificationTR },
-        en: { ...TableEN, ...KanbanBoardEN, ...NotificationEN },
-    };
-    const allLanguages = new Set([...Object.keys(translations), ...Object.keys(ExtraLocales)]);
-    allLanguages.forEach((lang) => {
-        merged[lang] = {
-            ...translations[lang],
-            ...ExtraLocales[lang],
-        };
-    });
-    const t = (key, ...args) => {
-        return Utils.StringFormat(merged[currentLanguage ?? "tr"][key], ...args) ?? "";
-    };
-    return { t, currentLanguage };
-};
-export default useTranslation;