@douglasneuroinformatics/libui 4.2.1 → 4.3.0

package/dist/hooks.d.ts

@@ -3,7 +3,7 @@ export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as T
 import { Promisable } from 'type-fest';
 import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
-import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DHTtLrqP.js';
+import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DDyMlEuL.js';
 
 declare function useChart(): {
     config: ChartConfig;

package/dist/hooks.js

@@ -19,8 +19,8 @@ import {
   useTheme,
   useTranslation,
   useWindowSize
-} from "./chunk-6C6CJESI.js";
-import "./chunk-ARKHRGTL.js";
+} from "./chunk-LSGD4EQY.js";
+import "./chunk-VFVO337W.js";
 import "./chunk-HCQE34RL.js";
 export {
   DEFAULT_THEME,

package/dist/i18n.d.ts

@@ -1,7 +1,7 @@
 import * as zustand from 'zustand';
 import { SetOptional } from 'type-fest';
-import { L as Language, b as Translations, a as TranslateFunction } from './types-DHTtLrqP.js';
-export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DHTtLrqP.js';
+import { L as Language, b as Translations, a as TranslateFunction } from './types-DDyMlEuL.js';
+export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DDyMlEuL.js';
 
 type InitOptions = {
     defaultLanguage?: Language;

package/dist/i18n.js

@@ -2,7 +2,7 @@
 import {
   i18n,
   translationStore
-} from "./chunk-ARKHRGTL.js";
+} from "./chunk-VFVO337W.js";
 export {
   i18n,
   translationStore

package/dist/{types-DHTtLrqP.d.ts → types-DDyMlEuL.d.ts}

@@ -143,6 +143,10 @@ var pagination = {
 		en: "<< First",
 		fr: "<< Première"
 	},
+	first: {
+		en: "First",
+		fr: "Première"
+	},
 	info: {
 		en: "Showing {{first}} to {{last}} of {{total}} results",
 		fr: "Affichage de {{first}} à {{last}} sur {{total}} résultats"
@@ -151,6 +155,10 @@ var pagination = {
 		en: "Last >>",
 		fr: "Dernière >>"
 	},
+	last: {
+		en: "Last",
+		fr: "Dernière"
+	},
 	next: {
 		en: "Next",
 		fr: "Suivant"
@@ -166,6 +174,14 @@ var searchBar = {
 		fr: "Rechercher..."
 	}
 };
+var yes = {
+	en: "Yes",
+	fr: "Oui"
+};
+var no = {
+	en: "No",
+	fr: "Non"
+};
 var libuiTranslations = {
 	days: days,
 	form: form,
@@ -173,7 +189,9 @@ var libuiTranslations = {
 	notifications: notifications,
 	oneTimePasswordInput: oneTimePasswordInput,
 	pagination: pagination,
-	searchBar: searchBar
+	searchBar: searchBar,
+	yes: yes,
+	no: no
 };
 
 declare namespace UserConfig {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "packageManager": "pnpm@10.7.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -92,6 +92,7 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,76 @@
+import { range, toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { faker } from '@faker-js/faker';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DataTable } from './DataTable';
+
+import type { DataTableColumn } from './DataTable';
+
+type User = {
+  birthday: Date;
+  email: string;
+  firstName: string;
+  lastName: string;
+};
+
+type Story = StoryObj<typeof DataTable<User>>;
+
+const columns: DataTableColumn<User>[] = [
+  {
+    format: (value) => {
+      return toBasicISOString(value);
+    },
+    key: 'birthday',
+    label: 'Birthday'
+  },
+  {
+    format: 'email',
+    key: 'email',
+    label: 'Email',
+    sortable: true
+  }
+];
+
+const data: User[] = range(60)
+  .unwrap()
+  .map(() => ({
+    birthday: faker.date.birthdate(),
+    email: faker.internet.email(),
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName()
+  }));
+
+export default { component: DataTable } as Meta<typeof DataTable<User>>;
+
+export const Default: Story = {
+  args: {
+    columns,
+    data,
+    headerAction: {
+      label: 'Do Something',
+      onClick: () => {
+        alert('Something!');
+      }
+    },
+    rowActions: [
+      {
+        destructive: true,
+        label: 'Delete',
+        onSelect: (row) => {
+          alert(`Delete User: ${row.firstName} ${row.lastName}`);
+        }
+      }
+    ],
+    search: {
+      key: 'email',
+      placeholder: 'Filter emails...'
+    }
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    columns,
+    data: []
+  }
+};

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,289 @@
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from '@tanstack/react-table';
+import type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { range } from 'lodash-es';
+import { ArrowUpDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
+import type { Promisable } from 'type-fest';
+
+import { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { SearchBar } from '../SearchBar';
+import { Table } from '../Table';
+import { DestructiveActionDialog } from './DestructiveActionDialog';
+import { RowActionsDropdown } from './RowActionsDropdown';
+
+import type { RowAction } from './RowActionsDropdown';
+
+type StaticDataTableColumn<TData extends { [key: string]: unknown }> = {
+  [K in Extract<keyof TData, string>]: {
+    format?: 'email' | ((val: TData[K]) => unknown);
+    key: K;
+    label: string;
+    sortable?: boolean;
+  };
+}[Extract<keyof TData, string>];
+
+type DynamicDataTableColumn<TData extends { [key: string]: unknown }> = {
+  compute: (row: TData) => unknown;
+  key?: never;
+  label: string;
+};
+
+type DataTableColumn<TData extends { [key: string]: unknown }> =
+  | DynamicDataTableColumn<TData>
+  | StaticDataTableColumn<TData>;
+
+type DataTableProps<TData extends { [key: string]: unknown }> = {
+  columns: DataTableColumn<TData>[];
+  data: TData[];
+  headerAction?: {
+    label: string;
+    onClick: () => void;
+  };
+  rowActions?: RowAction<TData>[];
+  search?: {
+    key: Extract<keyof TData, string>;
+    placeholder?: string;
+  };
+};
+
+function isStaticColumn<TData extends { [key: string]: unknown }>(
+  column: DataTableColumn<TData>
+): column is StaticDataTableColumn<TData> {
+  return typeof column.key === 'string';
+}
+
+export const DataTable = <TData extends { [key: string]: unknown }>({
+  columns,
+  data,
+  headerAction,
+  rowActions,
+  search
+}: DataTableProps<TData>) => {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [destructiveActionPending, setDestructiveActionPending] = useState<(() => Promisable<void>) | null>(null);
+  const { t } = useTranslation('libui');
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+
+  const columnDefs = useMemo<ColumnDef<TData, unknown>[]>(() => {
+    const result: ColumnDef<TData, unknown>[] = columns.map((col) => {
+      let def: ColumnDef<TData, unknown>;
+      if (isStaticColumn(col)) {
+        def = {
+          accessorKey: col.key,
+          header: col.sortable
+            ? ({ column }) => (
+                <button
+                  className="flex items-center justify-between gap-2"
+                  onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+                >
+                  {col.label}
+                  <ArrowUpDownIcon className="h-4 w-4" />
+                </button>
+              )
+            : col.label
+        };
+        if (col.format) {
+          def.cell = ({ getValue }) => {
+            const value = getValue() as TData[Extract<keyof TData, string>];
+            if (typeof col.format === 'function') {
+              return col.format(value);
+            } else if (col.format === 'email') {
+              return (
+                <a className="hover:underline" href={`mailto:${value as string}`}>
+                  {value as string}
+                </a>
+              );
+            }
+            return value;
+          };
+        }
+      } else {
+        def = {
+          accessorFn: col.compute,
+          header: col.label
+        };
+      }
+      return def;
+    });
+
+    if (rowActions) {
+      result.push({
+        cell: ({ row }) => {
+          return (
+            <RowActionsDropdown
+              row={row}
+              rowActions={rowActions}
+              setDestructiveActionPending={setDestructiveActionPending}
+            />
+          );
+        },
+        id: '__actions'
+      });
+    }
+    return result;
+  }, [columns]);
+
+  const table = useReactTable({
+    columns: columnDefs,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    state: {
+      columnFilters,
+      pagination,
+      sorting
+    }
+  });
+
+  useEffect(() => {
+    if (search) {
+      table.getColumn(search.key)?.setFilterValue(searchValue);
+    }
+  }, [table, searchValue]);
+
+  const headerGroups = table.getHeaderGroups();
+  const { rows } = table.getRowModel();
+
+  const pageCount = table.getPageCount();
+  const currentPage = pagination.pageIndex;
+
+  const start = Math.max(0, Math.min(currentPage - 1, pageCount - 3));
+  const end = Math.min(start + 3, pageCount);
+
+  const pageIndexOptions = range(start, end);
+
+  return (
+    <Fragment>
+      <DestructiveActionDialog
+        destructiveActionPending={destructiveActionPending}
+        setDestructiveActionPending={setDestructiveActionPending}
+      />
+      {search && (
+        <div className="flex items-center gap-4 py-4">
+          <SearchBar
+            className="grow"
+            placeholder={search.placeholder}
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          {headerAction && (
+            <Button type="button" variant="outline" onClick={headerAction.onClick}>
+              {headerAction.label}
+            </Button>
+          )}
+        </div>
+      )}
+      <div className="rounded-md border">
+        <Table>
+          <Table.Header>
+            {headerGroups.map((headerGroup) => (
+              <Table.Row key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <Table.Head key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </Table.Head>
+                  );
+                })}
+              </Table.Row>
+            ))}
+          </Table.Header>
+          <Table.Body>
+            {rows?.length ? (
+              rows.map((row) => (
+                <Table.Row data-state={row.getIsSelected() && 'selected'} key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.Cell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Table.Cell>
+                  ))}
+                </Table.Row>
+              ))
+            ) : (
+              <Table.Row>
+                <Table.Cell className="h-24 text-center" colSpan={rowActions ? columns.length + 1 : columns.length}>
+                  {t({
+                    en: 'No Results',
+                    fr: 'Aucun résultat'
+                  })}
+                </Table.Cell>
+              </Table.Row>
+            )}
+          </Table.Body>
+        </Table>
+      </div>
+      <div className="mx-auto flex w-min pt-6 pb-4">
+        <Button
+          className="flex gap-1"
+          disabled={!table.getCanPreviousPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.firstPage()}
+        >
+          <ChevronsLeftIcon className="-ml-1 h-4 w-4" />
+          <span>{t('pagination.first')}</span>
+        </Button>
+        <Button
+          className="mr-1 flex gap-1"
+          disabled={!table.getCanPreviousPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.previousPage()}
+        >
+          <ChevronLeftIcon className="-ml-1 h-4 w-4" />
+          <span>{t('pagination.previous')}</span>
+        </Button>
+        {pageIndexOptions.map((index) => (
+          <Button
+            key={index}
+            type="button"
+            variant={index === pagination.pageIndex ? 'outline' : 'ghost'}
+            onClick={() => table.setPageIndex(index)}
+          >
+            {index + 1}
+          </Button>
+        ))}
+        <Button
+          className="ml-1 flex gap-1"
+          disabled={!table.getCanNextPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.nextPage()}
+        >
+          <span>{t('pagination.next')}</span>
+          <ChevronRightIcon className="-mr-1 h-4 w-4" />
+        </Button>
+        <Button
+          className="flex gap-1"
+          disabled={!table.getCanNextPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.lastPage()}
+        >
+          <span>{t('pagination.last')}</span>
+          <ChevronsRightIcon className="-mr-1 h-4 w-4" />
+        </Button>
+      </div>
+    </Fragment>
+  );
+};
+
+export type { DataTableColumn };

package/src/components/DataTable/DestructiveActionDialog.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable jsx-a11y/no-autofocus */
+
+import type React from 'react';
+
+import type { Promisable } from 'type-fest';
+
+import { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { Dialog } from '../Dialog';
+
+export type DestructiveActionPending = (() => Promisable<void>) | null;
+
+export const DestructiveActionDialog: React.FC<{
+  destructiveActionPending: DestructiveActionPending;
+  setDestructiveActionPending: React.Dispatch<React.SetStateAction<DestructiveActionPending>>;
+}> = ({ destructiveActionPending, setDestructiveActionPending }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog
+      open={destructiveActionPending !== null}
+      onOpenChange={(open) => {
+        if (!open) {
+          setDestructiveActionPending(null);
+        }
+      }}
+    >
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>
+            {t({
+              en: 'Confirm Action',
+              fr: "Confirmer l'action"
+            })}
+          </Dialog.Title>
+          <Dialog.Description>
+            {t({
+              en: 'This action cannot be reversed. Please confirm that you would like to continue.',
+              fr: 'Cette action ne peut être inversée. Veuillez confirmer que vous souhaitez poursuivre.'
+            })}
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Button
+            className="min-w-16"
+            size="sm"
+            type="button"
+            variant="outline"
+            onClick={async () => {
+              await destructiveActionPending?.();
+              setDestructiveActionPending(null);
+            }}
+          >
+            {t('libui.yes')}
+          </Button>
+          <Button
+            autoFocus={true}
+            className="min-w-16"
+            size="sm"
+            type="button"
+            variant="primary"
+            onClick={() => setDestructiveActionPending(null)}
+          >
+            {t('libui.no')}
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+};

package/src/components/DataTable/RowActionsDropdown.tsx

@@ -0,0 +1,64 @@
+import type React from 'react';
+
+import type { Row } from '@tanstack/react-table';
+import { MoreHorizontalIcon } from 'lucide-react';
+import type { Promisable } from 'type-fest';
+
+import { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+
+import type { DestructiveActionPending } from './DestructiveActionDialog';
+
+export type RowAction<TData extends { [key: string]: unknown }> = {
+  destructive?: boolean;
+  label: string;
+  onSelect: (row: TData) => Promisable<void>;
+};
+
+export const RowActionsDropdown = <TData extends { [key: string]: unknown }>({
+  row,
+  rowActions,
+  setDestructiveActionPending
+}: {
+  row: Row<TData>;
+  rowActions: RowAction<TData>[];
+  setDestructiveActionPending: React.Dispatch<React.SetStateAction<DestructiveActionPending>>;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full justify-end">
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="-m-1.5" size="icon" variant="ghost">
+            <MoreHorizontalIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          <DropdownMenu.Label>
+            {t({
+              en: 'Actions',
+              fr: 'Actions'
+            })}
+          </DropdownMenu.Label>
+          {rowActions.map(({ destructive, label, onSelect }, i) => (
+            <DropdownMenu.Item
+              className={destructive ? 'text-destructive' : undefined}
+              key={i}
+              onSelect={() => {
+                if (destructive) {
+                  setDestructiveActionPending(() => () => void onSelect(row.original));
+                } else {
+                  void onSelect(row.original);
+                }
+              }}
+            >
+              {label}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  );
+};

package/src/components/DataTable/index.ts

@@ -0,0 +1 @@
+export * from './DataTable';

package/src/components/index.ts

@@ -33,7 +33,6 @@ export * from './ListboxDropdown';
 export * from './MenuBar';
 export * from './NotificationHub';
 export * from './OneTimePasswordInput';
-export * from './Pagination';
 export * from './Popover';
 export * from './Progress';
 export * from './RadioGroup';

package/src/i18n/translations/libui.json

@@ -142,6 +142,10 @@
       "en": "<< First",
       "fr": "<< Première"
     },
+    "first": {
+      "en": "First",
+      "fr": "Première"
+    },
     "info": {
       "en": "Showing {{first}} to {{last}} of {{total}} results",
       "fr": "Affichage de {{first}} à {{last}} sur {{total}} résultats"
@@ -150,6 +154,10 @@
       "en": "Last >>",
       "fr": "Dernière >>"
     },
+    "last": {
+      "en": "Last",
+      "fr": "Dernière"
+    },
     "next": {
       "en": "Next",
       "fr": "Suivant"
@@ -164,5 +172,13 @@
       "en": "Search...",
       "fr": "Rechercher..."
     }
+  },
+  "yes": {
+    "en": "Yes",
+    "fr": "Oui"
+  },
+  "no": {
+    "en": "No",
+    "fr": "Non"
   }
 }

package/dist/chunk-ARKHRGTL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/i18n/store.ts","../src/i18n/translations/libui.json","../src/i18n/internal.ts"],"sourcesContent":["import type { SetOptional } from 'type-fest';\nimport { subscribeWithSelector } from 'zustand/middleware';\nimport { createStore } from 'zustand/vanilla';\n\nimport libui from '@/i18n/translations/libui.json';\n\nimport { getTranslation } from './internal';\n\nimport type { Language, TranslateFunction, Translations } from './types';\n\ntype InitOptions = {\n  defaultLanguage?: Language;\n  fallbackLanguage?: Language;\n  translations?: SetOptional<Translations, 'libui'>;\n};\n\ntype I18N = {\n  init: (options?: InitOptions) => void;\n  t: TranslateFunction;\n};\n\nexport type TranslationStore = {\n  changeLanguage: (language: Language) => void;\n  fallbackLanguage: Language;\n  isInitialized: boolean;\n  resolvedLanguage: Language;\n  translations: Translations;\n};\n\nexport const translationStore = createStore(\n  subscribeWithSelector<TranslationStore>((set) => ({\n    changeLanguage(language) {\n      set({ resolvedLanguage: language });\n    },\n    fallbackLanguage: 'en',\n    isInitialized: false,\n    resolvedLanguage: 'en',\n    translations: { libui }\n  }))\n);\n\nexport const i18n: I18N = {\n  init: ({ defaultLanguage, fallbackLanguage, translations }: InitOptions = {}) => {\n    const state = translationStore.getState();\n    if (state.isInitialized) {\n      console.error('Cannot reinitialize translations store');\n      return;\n    }\n    translationStore.subscribe(\n      (state) => state.resolvedLanguage,\n      (resolvedLanguage) => {\n        document.documentElement.lang = resolvedLanguage;\n      }\n    );\n    translationStore.setState({\n      fallbackLanguage: fallbackLanguage ?? state.fallbackLanguage,\n      isInitialized: true,\n      resolvedLanguage: defaultLanguage ?? state.resolvedLanguage,\n      translations: {\n        ...state.translations,\n        ...translations\n      }\n    });\n  },\n  t: (target, ...args) => {\n    const state = translationStore.getState();\n    return getTranslation(target, state, ...args);\n  }\n};\n","{\n  \"days\": {\n    \"friday\": {\n      \"en\": \"Friday\",\n      \"fr\": \"Vendredi\"\n    },\n    \"monday\": {\n      \"en\": \"Monday\",\n      \"fr\": \"Lundi\"\n    },\n    \"saturday\": {\n      \"en\": \"Saturday\",\n      \"fr\": \"Samedi\"\n    },\n    \"sunday\": {\n      \"en\": \"Sunday\",\n      \"fr\": \"Dimanche\"\n    },\n    \"thursday\": {\n      \"en\": \"Thursday\",\n      \"fr\": \"Jeudi\"\n    },\n    \"tuesday\": {\n      \"en\": \"Tuesday\",\n      \"fr\": \"Mardi\"\n    },\n    \"wednesday\": {\n      \"en\": \"Wednesday\",\n      \"fr\": \"Mercredi\"\n    }\n  },\n  \"form\": {\n    \"append\": {\n      \"en\": \"Append\",\n      \"fr\": \"Ajouter\"\n    },\n    \"radioLabels\": {\n      \"false\": {\n        \"en\": \"False\",\n        \"fr\": \"Faux\"\n      },\n      \"true\": {\n        \"en\": \"True\",\n        \"fr\": \"Vrai\"\n      }\n    },\n    \"remove\": {\n      \"en\": \"Remove\",\n      \"fr\": \"Supprimer\"\n    },\n    \"required\": {\n      \"en\": \"This field is required\",\n      \"fr\": \"Ce champ est obligatoire\"\n    },\n    \"reset\": {\n      \"en\": \"Reset\",\n      \"fr\": \"Réinitialiser\"\n    },\n    \"submit\": {\n      \"en\": \"Submit\",\n      \"fr\": \"Soumettre\"\n    }\n  },\n  \"months\": {\n    \"april\": {\n      \"en\": \"April\",\n      \"fr\": \"Avril\"\n    },\n    \"august\": {\n      \"en\": \"August\",\n      \"fr\": \"Août\"\n    },\n    \"december\": {\n      \"en\": \"December\",\n      \"fr\": \"Décembre\"\n    },\n    \"february\": {\n      \"en\": \"February\",\n      \"fr\": \"Février\"\n    },\n    \"january\": {\n      \"en\": \"January\",\n      \"fr\": \"Janvier\"\n    },\n    \"july\": {\n      \"en\": \"July\",\n      \"fr\": \"Juillet\"\n    },\n    \"june\": {\n      \"en\": \"June\",\n      \"fr\": \"Juin\"\n    },\n    \"march\": {\n      \"en\": \"March\",\n      \"fr\": \"Mars\"\n    },\n    \"may\": {\n      \"en\": \"May\",\n      \"fr\": \"Mai\"\n    },\n    \"november\": {\n      \"en\": \"November\",\n      \"fr\": \"Novembre\"\n    },\n    \"october\": {\n      \"en\": \"October\",\n      \"fr\": \"Octobre\"\n    },\n    \"september\": {\n      \"en\": \"September\",\n      \"fr\": \"Septembre\"\n    }\n  },\n  \"notifications\": {\n    \"types\": {\n      \"error\": {\n        \"en\": \"Error\",\n        \"fr\": \"Erreur\"\n      },\n      \"info\": {\n        \"en\": \"Info\",\n        \"fr\": \"Attention\"\n      },\n      \"success\": {\n        \"en\": \"Success\",\n        \"fr\": \"Succès\"\n      },\n      \"warning\": {\n        \"en\": \"Warning\",\n        \"fr\": \"Avertissement\"\n      }\n    }\n  },\n  \"oneTimePasswordInput\": {\n    \"invalidCodeFormat\": {\n      \"en\": \"Invalid code format\",\n      \"fr\": \"Format de code invalide\"\n    }\n  },\n  \"pagination\": {\n    \"firstPage\": {\n      \"en\": \"<< First\",\n      \"fr\": \"<< Première\"\n    },\n    \"info\": {\n      \"en\": \"Showing {{first}} to {{last}} of {{total}} results\",\n      \"fr\": \"Affichage de {{first}} à {{last}} sur {{total}} résultats\"\n    },\n    \"lastPage\": {\n      \"en\": \"Last >>\",\n      \"fr\": \"Dernière >>\"\n    },\n    \"next\": {\n      \"en\": \"Next\",\n      \"fr\": \"Suivant\"\n    },\n    \"previous\": {\n      \"en\": \"Previous\",\n      \"fr\": \"Précédent\"\n    }\n  },\n  \"searchBar\": {\n    \"placeholder\": {\n      \"en\": \"Search...\",\n      \"fr\": \"Rechercher...\"\n    }\n  }\n}\n","import { format } from '@douglasneuroinformatics/libjs';\nimport { get } from 'lodash-es';\nimport type { Primitive } from 'type-fest';\n\nimport type { Language } from './types';\n\nexport function getTranslation(\n  target: string | { [L in Language]?: string },\n  state: {\n    fallbackLanguage: Language;\n    resolvedLanguage: Language;\n    translations: { [key: string]: any };\n  },\n  ...args: Exclude<Primitive, symbol>[]\n) {\n  let value: { [key: string]: string };\n  if (typeof target === 'string') {\n    value = get(state.translations, target) as { [key: string]: string };\n  } else {\n    value = target;\n  }\n  return format((value[state.resolvedLanguage] ?? value[state.fallbackLanguage])!, ...args);\n}\n"],"mappings":"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","names":["state"]}