feat: i18n, he/ro/es

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitnoi.se/react-scheduler",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "repository": {

readme.md

@@ -186,17 +186,19 @@ const mockedSchedulerData: SchedulerData = [
 
 ##### Scheduler Config Object
 
-| Property Name                        | Type                                          | Default     | Description                                                                                                                                                            |
-| ------------------------------------ | --------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| zoom                                 | `0` or `1`                                    | 0           | `0` - display grid divided into weeks `1` - display grid divided into days                                                                                             |
-| filterButtonState                    | `number`                                      | 0           | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) |
-| maxRecordsPerPage                    | `number`                                      | 50          | number of items from `SchedulerData` visible per page                                                                                                                  |
-| lang                                 | `en`, `lt`, `de`, `fr`, `it`, `pt-BR` or `pl` | en          | scheduler's language                                                                                                                                                   |
-| includeTakenHoursOnWeekendsInDayView | `boolean`                                     | `false`     | show weekends as taken when given resource is longer than a week                                                                                                       |
-| showTooltip                          | `boolean`                                     | `true`      | show tooltip when hovering over tiles                                                                                                                                  |
-| translations                         | `LocaleType[]`                                | `undefined` | option to add specific langs translations                                                                                                                              |
-| showTooltip                          | `boolean`                                     | `true`      | show tooltip when hovering over tiles                                                                                                                                  |
-| translations                         | `LocaleType[]`                                | `undefined` | option to add specific langs translations                                                                                                                              |
+---
+
+| Property Name                        | Type               | Default     | Description                                                                                                                                                            |
+| ------------------------------------ | ------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| zoom                                 | `0` or `1` or `2`  | 0           | `0` - display grid divided into weeks `1` - display grid divided into days `2` - display grid divided into hours                                                       |
+| filterButtonState                    | `number`           | 0           | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) |
+| maxRecordsPerPage                    | `number`           | 50          | number of items from `SchedulerData` visible per page                                                                                                                  |
+| lang                                 | `en`, `lt` or `pl` | en          | scheduler's language                                                                                                                                                   |
+| includeTakenHoursOnWeekendsInDayView | `boolean`          | `false`     | show weekends as taken when given resource is longer than a week                                                                                                       |
+| showTooltip                          | `boolean`          | `true`      | show tooltip when hovering over tiles                                                                                                                                  |
+| translations                         | `LocaleType[]`     | `undefined` | option to add specific langs translations                                                                                                                              |
+| showThemeToggle                      | `boolean`          | `false`     | show toggle button to switch between light/dark mode                                                                                                                   |
+| defaultTheme                         | `light` or `dark`  | `light`     | scheduler's default theme                                                                                                                                              |
 
 #### Translation object example
 

src/components/Tooltip/Tooltip.tsx

@@ -51,7 +51,7 @@ const Tooltip: FC<TooltipProps> = ({ tooltipData, zoom }) => {
     tooltipRef.current.style.top = `${coords.y + 8}px`;
 
     // disposition.overtime affects tooltip's width, thus it's needed to recalculate it's coords whenever overtime changes
-  }, [coords.x, width, disposition.overtime, coords.y]);
+  }, [coords.x, width, disposition.overtime, coords.y, zoom]);
 
   return (
     <StyledTooltipWrapper ref={tooltipRef}>

src/context/CalendarProvider/CalendarProvider.tsx

@@ -122,13 +122,13 @@ const CalendarProvider = ({
       }, 300);
       load();
     },
-    [onRangeChange, range]
+    [onRangeChange, range, zoom]
   );
 
   useEffect(() => {
     outsideWrapper.current = document.getElementById(outsideWrapperId);
     setCols(getCols(zoom));
-  }, []);
+  }, [zoom]);
 
   useEffect(() => {
     const handleResize = () => setCols(getCols(zoom));

src/context/LocaleProvider/locales.ts

@@ -5,7 +5,10 @@ import ltDayjsTranslations from "dayjs/locale/lt";
 import frDayjsTranslations from "dayjs/locale/fr";
 import itDayjsTranslations from "dayjs/locale/it";
 import ptBRDayjsTranslations from "dayjs/locale/pt-br";
-import { en, pl, de, lt, fr, it, ptBR } from "@/locales";
+import roDayjsTranslations from "dayjs/locale/ro";
+import heDayjsTranslations from "dayjs/locale/he";
+import esDayjsTranslations from "dayjs/locale/es";
+import { en, pl, de, lt, fr, it, ptBR, es, he, ro } from "@/locales";
 import { LocaleType } from "./types";
 
 export const localesData: LocaleType[] = [
@@ -39,6 +42,30 @@ export const localesData: LocaleType[] = [
     translateCode: "lt-LT",
     dayjsTranslations: ltDayjsTranslations
   },
+  {
+    id: "de",
+    lang: de,
+    translateCode: "de-DE",
+    dayjsTranslations: deDayjsTranslations
+  },
+  {
+    id: "es",
+    lang: es,
+    translateCode: "es-ES",
+    dayjsTranslations: esDayjsTranslations
+  },
+  {
+    id: "he",
+    lang: he,
+    translateCode: "he_IL",
+    dayjsTranslations: heDayjsTranslations
+  },
+  {
+    id: "ro",
+    lang: ro,
+    translateCode: "ro_RO",
+    dayjsTranslations: roDayjsTranslations
+  },
   {
     id: "pl",
     lang: pl,

src/locales/es.ts

@@ -0,0 +1,17 @@
+export const es = {
+  feelingEmpty: "Me siento vacío...",
+  free: "Libre",
+  loadNext: "Siguiente",
+  loadPrevious: "Anterior",
+  over: "Finalizado",
+  taken: "Reservado",
+  topbar: {
+    filters: "Filtros",
+    next: "Siguiente",
+    prev: "Anterior",
+    today: "Hoy",
+    view: "Vista"
+  },
+  search: "Buscar",
+  week: "Semana"
+};

src/locales/he.ts

@@ -0,0 +1,17 @@
+export const he = {
+  feelingEmpty: "אני מרגיש ריק...",
+  free: "חופשי",
+  loadNext: "הבא",
+  loadPrevious: "הקודם",
+  over: "מסתיים",
+  taken: "תפוס",
+  topbar: {
+    filters: "מסננים",
+    next: "הבא",
+    prev: "הקודם",
+    today: "היום",
+    view: "תצוגה"
+  },
+  search: "חיפוש",
+  week: "שבוע"
+};

src/locales/index.ts

@@ -5,3 +5,6 @@ export { lt } from "./lt";
 export { fr } from "./fr";
 export { it } from "./it";
 export { ptBR } from "./ptBR";
+export { he } from "./he";
+export { ro } from "./ro";
+export { es } from "./es";

src/locales/ro.ts

@@ -0,0 +1,17 @@
+export const ro = {
+  feelingEmpty: "Mă simt gol...",
+  free: "Liber",
+  loadNext: "Următorul",
+  loadPrevious: "Anterior",
+  over: "Finalizat",
+  taken: "Ocupat",
+  topbar: {
+    filters: "Filtre",
+    next: "Următorul",
+    prev: "Anterior",
+    today: "Astăzi",
+    view: "Vizualizare"
+  },
+  search: "Căutare",
+  week: "Săptămână"
+};

src/types/global.ts

@@ -9,7 +9,7 @@ type ZoomLevelTuple = typeof allZoomLevel;
 
 export type ZoomLevel = ZoomLevelTuple[number];
 
-export type LangCodes = "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR";
+export type LangCodes = "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR" | "he" | "es" | "ro";
 
 export type Config = {
   zoom: ZoomLevel;
@@ -21,7 +21,7 @@ export type Config = {
    */
   filterButtonState?: number;
   /**
-   * Language code: "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR"
+   * Language code: "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR" | "he" | "es" | "ro"
    */
   lang?: LangCodes | string;
   isFiltersButtonVisible?: boolean;