@douglasneuroinformatics/libui 5.0.2 → 6.0.0

package/src/components/index.ts

@@ -1,56 +1,36 @@
-export * from './Accordion';
-export * from './ActionDropdown';
-export * from './AlertDialog';
-export * from './ArrowToggle';
-export * from './Avatar';
-export * from './Badge';
-export * from './Breadcrumb';
-export * from './Button';
-export * from './Card';
-export * from './Chart';
-export * from './Checkbox';
-export * from './ClientTable';
-export * from './Collapsible';
-export * from './Command';
-export * from './ContextMenu';
-export * from './CopyButton';
-export * from './DataTable';
-export * from './DatePicker';
-export * from './Dialog';
-export * from './Drawer';
-export * from './DropdownButton';
-export * from './DropdownMenu';
-export * from './ErrorBoundary';
-export * from './ErrorFallback';
-export * from './FileDropzone';
-export * from './Form';
-export * from './Heading';
-export * from './HoverCard';
-export * from './Input';
-export * from './Label';
-export * from './LanguageToggle';
-export * from './LineGraph';
-export * from './ListboxDropdown';
-export * from './MenuBar';
-export * from './OneTimePasswordInput';
-export * from './Popover';
-export * from './Progress';
-export * from './RadioGroup';
-export * from './Resizable';
-export * from './ScrollArea';
-export * from './SearchBar';
-export * from './Select';
-export * from './Separator';
-export * from './Sheet';
-export * from './Slider';
-export * from './Spinner';
-export * from './SpinnerIcon';
-export * from './StatisticCard';
-export * from './Switch';
-export * from './Table';
-export * from './Tabs';
-export * from './TextArea';
-export * from './ThemeToggle';
-export * from './Tooltip';
-
-export { /** @deprecated */ NotificationHub } from '@/providers/CoreProvider/NotificationHub';
+export * from './ActionDropdown/ActionDropdown.tsx';
+export * from './ArrowToggle/ArrowToggle.tsx';
+export * from './Badge/Badge.tsx';
+export * from './Button/Button.tsx';
+export * from './Card/Card.tsx';
+export * from './Checkbox/Checkbox.tsx';
+export * from './ClientTable/ClientTable.tsx';
+export * from './CopyButton/CopyButton.tsx';
+export * from './DataTable/DataTable.tsx';
+export * from './DatePicker/DatePicker.tsx';
+export * from './Dialog/Dialog.tsx';
+export * from './DropdownButton/DropdownButton.tsx';
+export * from './DropdownMenu/DropdownMenu.tsx';
+export * from './FileDropzone/FileDropzone.tsx';
+export * from './Form/Form.tsx';
+export * from './Heading/Heading.tsx';
+export * from './HoverCard/HoverCard.tsx';
+export * from './Input/Input.tsx';
+export * from './Label/Label.tsx';
+export * from './LanguageToggle/LanguageToggle.tsx';
+export * from './ListboxDropdown/ListboxDropdown.tsx';
+export * from './OneTimePasswordInput/OneTimePasswordInput.tsx';
+export * from './Popover/Popover.tsx';
+export * from './RadioGroup/RadioGroup.tsx';
+export * from './SearchBar/SearchBar.tsx';
+export * from './Select/Select.tsx';
+export * from './Separator/Separator.tsx';
+export * from './Sheet/Sheet.tsx';
+export * from './Slider/Slider.tsx';
+export * from './Spinner/Spinner.tsx';
+export * from './StatisticCard/StatisticCard.tsx';
+export * from './Table/Table.tsx';
+export * from './Tabs/Tabs.tsx';
+export * from './TextArea/TextArea.tsx';
+export * from './ThemeToggle/ThemeToggle.tsx';
+export * from './Tooltip/Tooltip.tsx';

package/src/hooks/index.ts

@@ -1,14 +1,13 @@
-export * from './useChart';
-export * from './useDestructiveAction';
-export * from './useDownload';
-export * from './useEventCallback';
-export * from './useEventListener';
-export * from './useInterval';
-export * from './useIsomorphicLayoutEffect';
-export * from './useMediaQuery';
-export * from './useNotificationsStore';
-export * from './useOnClickOutside';
-export * from './useStorage';
-export * from './useTheme';
-export * from './useTranslation';
-export * from './useWindowSize';
+export * from './useDestructiveAction/useDestructiveAction.ts';
+export * from './useDownload/useDownload.ts';
+export * from './useEventCallback/useEventCallback.ts';
+export * from './useEventListener/useEventListener.ts';
+export * from './useInterval/useInterval.ts';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts';
+export * from './useMediaQuery/useMediaQuery.ts';
+export * from './useNotificationsStore/useNotificationsStore.ts';
+export * from './useOnClickOutside/useOnClickOutside.ts';
+export * from './useStorage/useStorage.ts';
+export * from './useTheme/useTheme.ts';
+export * from './useTranslation/useTranslation.ts';
+export * from './useWindowSize/useWindowSize.ts';

package/src/hooks/useDestructiveAction/useDestructiveAction.test.ts

@@ -1,10 +1,14 @@
 import { act, renderHook } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useDestructiveAction } from './useDestructiveAction';
-import { useDestructiveActionStore } from './useDestructiveActionStore';
-
-import type { DestructiveAction, DestructiveActionOptions, DestructiveActionParams } from './useDestructiveActionStore';
+import { useDestructiveAction } from './useDestructiveAction.ts';
+import { useDestructiveActionStore } from './useDestructiveActionStore.ts';
+
+import type {
+  DestructiveAction,
+  DestructiveActionOptions,
+  DestructiveActionParams
+} from './useDestructiveActionStore.ts';
 
 vi.mock('./useDestructiveActionStore', () => ({
   useDestructiveActionStore: vi.fn()

package/src/hooks/useDestructiveAction/useDestructiveAction.ts

@@ -1,8 +1,12 @@
 import { useCallback } from 'react';
 
-import { useDestructiveActionStore } from './useDestructiveActionStore';
+import { useDestructiveActionStore } from './useDestructiveActionStore.ts';
 
-import type { DestructiveAction, DestructiveActionOptions, DestructiveActionParams } from './useDestructiveActionStore';
+import type {
+  DestructiveAction,
+  DestructiveActionOptions,
+  DestructiveActionParams
+} from './useDestructiveActionStore.ts';
 
 /**
  * Returns a function that accepts a destructive action and optional configuration.

package/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts

@@ -1,9 +1,9 @@
 import { act, renderHook } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { useDestructiveActionStore } from './useDestructiveActionStore';
+import { useDestructiveActionStore } from './useDestructiveActionStore.ts';
 
-import type { DestructiveAction, DestructiveActionOptions } from './useDestructiveActionStore';
+import type { DestructiveAction, DestructiveActionOptions } from './useDestructiveActionStore.ts';
 
 describe('useDestructiveActionStore', () => {
   afterEach(() => {

package/src/hooks/useDownload/useDownload.test.ts

@@ -1,13 +1,13 @@
 import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useDownload } from './useDownload';
+import { useDownload } from './useDownload.ts';
 
 const mockNotificationsStore = {
   addNotification: vi.fn()
 };
 
-vi.mock('../useNotificationsStore', () => ({
+vi.mock('../useNotificationsStore/useNotificationsStore.ts', () => ({
   useNotificationsStore: () => mockNotificationsStore
 }));
 

package/src/hooks/useDownload/useDownload.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import type { Promisable } from 'type-fest';
 
-import { useNotificationsStore } from '../useNotificationsStore';
+import { useNotificationsStore } from '../useNotificationsStore/useNotificationsStore.ts';
 
 type DownloadTextOptions = {
   blobType: 'text/csv' | 'text/plain';

package/src/hooks/useEventCallback/useEventCallback.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, renderHook, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { useEventCallback } from './useEventCallback';
+import { useEventCallback } from './useEventCallback.ts';
 
 describe('useEventCallback', () => {
   it('should not call the callback during render', () => {

package/src/hooks/useEventCallback/useEventCallback.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts';
 
 export function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R) {
   const ref = useRef<typeof fn>(() => {

package/src/hooks/useEventListener/useEventListener.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, renderHook } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { useEventListener } from './useEventListener';
+import { useEventListener } from './useEventListener.ts';
 
 describe('useEventListener', () => {
   afterEach(() => {

package/src/hooks/useEventListener/useEventListener.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import type { RefObject } from 'react';
 
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts';
 
 // MediaQueryList Event based useEventListener interface
 function useEventListener<K extends keyof MediaQueryListEventMap>(

package/src/hooks/useInterval/useInterval.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useInterval } from './useInterval';
+import { useInterval } from './useInterval.ts';
 
 describe('useInterval()', () => {
   beforeEach(() => {

package/src/hooks/useInterval/useInterval.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts';
 
 export function useInterval(callback: () => void, delay: null | number) {
   const savedCallback = useRef(callback);

package/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.test.ts

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 const isBrowser = vi.fn();
 
-vi.mock('@/utils', () => ({ isBrowser }));
+vi.mock('#utils', () => ({ isBrowser }));
 
 describe('useIsomorphicLayoutEffect', () => {
   beforeEach(() => {

package/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect } from 'react';
 
-import { isBrowser } from '@/utils';
+import { isBrowser } from '#utils';
 
 export const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect;

package/src/hooks/useMediaQuery/useMediaQuery.test.ts

@@ -1,12 +1,12 @@
 import { renderHook } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { mockMatchMedia } from '@/testing/mocks';
-import { isBrowser } from '@/utils';
+import { mockMatchMedia } from '#testing:mocks';
+import { isBrowser } from '#utils';
 
-import { useMediaQuery } from './useMediaQuery';
+import { useMediaQuery } from './useMediaQuery.ts';
 
-vi.mock('@/utils', () => ({ isBrowser: vi.fn(() => true) }));
+vi.mock('#utils', () => ({ isBrowser: vi.fn(() => true) }));
 
 describe('useMediaQuery', () => {
   afterEach(() => {

package/src/hooks/useMediaQuery/useMediaQuery.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { isBrowser } from '@/utils';
+import { isBrowser } from '#utils';
 
 /**
  * Get the result of an arbitrary CSS media query

package/src/hooks/useNotificationsStore/useNotificationsStore.test.ts

@@ -1,7 +1,7 @@
 import { act, renderHook } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { useNotificationsStore } from './useNotificationsStore';
+import { useNotificationsStore } from './useNotificationsStore.ts';
 
 describe('useNotificationsStore', () => {
   it('should render and return an object', () => {

package/src/hooks/useOnClickOutside/useOnClickOutside.test.ts

@@ -1,7 +1,7 @@
 import { act, fireEvent, renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { useOnClickOutside } from './useOnClickOutside';
+import { useOnClickOutside } from './useOnClickOutside.ts';
 
 describe('useOnClickOutside', () => {
   it('should call the handler when a clicking outside the element', () => {

package/src/hooks/useOnClickOutside/useOnClickOutside.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 
-import { useEventListener } from '../useEventListener';
+import { useEventListener } from '../useEventListener/useEventListener.ts';
 
 type Handler = (event: MouseEvent) => void;
 

package/src/hooks/useStorage/useLocalStorage.test.ts

@@ -1,13 +1,13 @@
 import { renderHook } from '@testing-library/react';
 import { describe, it, vi } from 'vitest';
 
-import { mockStorage } from '@/testing/mocks';
+import { mockStorage } from '#testing:mocks';
 
-import { useLocalStorage } from './useLocalStorage';
+import { useLocalStorage } from './useLocalStorage.ts';
 
 mockStorage('localStorage');
 
-vi.mock('@/utils', () => ({ isBrowser: vi.fn(() => true) }));
+vi.mock('#utils', () => ({ isBrowser: vi.fn(() => true) }));
 
 describe('useLocalStorage()', () => {
   it('should render', () => {

package/src/hooks/useStorage/useLocalStorage.ts

@@ -1,8 +1,8 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-import { useStorage } from './useStorage';
+import { useStorage } from './useStorage.ts';
 
-import type { UseStorageOptions } from './useStorage';
+import type { UseStorageOptions } from './useStorage.ts';
 
 /** Custom hook that uses local storage to persist state across page reloads */
 export function useLocalStorage<T>(

package/src/hooks/useStorage/useSessionStorage.test.ts

@@ -1,13 +1,13 @@
 import { renderHook } from '@testing-library/react';
 import { describe, it, vi } from 'vitest';
 
-import { mockStorage } from '@/testing/mocks';
+import { mockStorage } from '#testing:mocks';
 
-import { useSessionStorage } from './useSessionStorage';
+import { useSessionStorage } from './useSessionStorage.ts';
 
 mockStorage('sessionStorage');
 
-vi.mock('@/utils', () => ({ isBrowser: vi.fn(() => true) }));
+vi.mock('#utils', () => ({ isBrowser: vi.fn(() => true) }));
 
 describe('useSessionStorage()', () => {
   it('should render', () => {

package/src/hooks/useStorage/useSessionStorage.ts

@@ -1,8 +1,8 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-import { useStorage } from './useStorage';
+import { useStorage } from './useStorage.ts';
 
-import type { UseStorageOptions } from './useStorage';
+import type { UseStorageOptions } from './useStorage.ts';
 
 /** Custom hook that uses session storage to persist state across page reloads */
 export function useSessionStorage<T>(

package/src/hooks/useStorage/useStorage.test.ts

@@ -1,17 +1,17 @@
 import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { mockStorage } from '@/testing/mocks';
-import { isBrowser } from '@/utils';
+import { mockStorage } from '#testing:mocks';
+import { isBrowser } from '#utils';
 
-import { useStorage } from './useStorage';
+import { useStorage } from './useStorage.ts';
 
-import type { StorageName } from './useStorage';
+import type { StorageName } from './useStorage.ts';
 
 const storages: StorageName[] = ['localStorage', 'sessionStorage'];
 storages.forEach(mockStorage);
 
-vi.mock('@/utils', () => ({ isBrowser: vi.fn(() => true) }));
+vi.mock('#utils', () => ({ isBrowser: vi.fn(() => true) }));
 
 describe('useStorage()', () => {
   storages.forEach((storageName) => {

package/src/hooks/useStorage/useStorage.ts

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 
-import { isBrowser } from '@/utils';
+import { isBrowser } from '#utils';
 
-import { useEventCallback } from '../useEventCallback';
-import { useEventListener } from '../useEventListener';
+import { useEventCallback } from '../useEventCallback/useEventCallback.ts';
+import { useEventListener } from '../useEventListener/useEventListener.ts';
 
 type StorageName = 'localStorage' | 'sessionStorage';
 

package/src/hooks/useTheme/useTheme.test.ts

@@ -1,14 +1,14 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { mockMatchMedia, mockStorage } from '@/testing/mocks';
-import { isBrowser } from '@/utils';
+import { mockMatchMedia, mockStorage } from '#testing:mocks';
+import { isBrowser } from '#utils';
 
-import { DEFAULT_THEME, SYS_DARK_MEDIA_QUERY, THEME_ATTRIBUTE, THEME_KEY, useTheme } from './useTheme';
+import { DEFAULT_THEME, SYS_DARK_MEDIA_QUERY, THEME_ATTRIBUTE, THEME_KEY, useTheme } from './useTheme.ts';
 
 mockStorage('localStorage');
 
-vi.mock('@/utils', () => ({ isBrowser: vi.fn(() => true) }));
+vi.mock('#utils', () => ({ isBrowser: vi.fn(() => true) }));
 
 describe('useTheme', () => {
   beforeEach(() => {

package/src/hooks/useTheme/useTheme.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 // this is required since our storybook manager plugin cannot use vite aliases
-import { isBrowser } from '../../utils';
+import { isBrowser } from '../../utils/index.ts';
 
 type Theme = 'dark' | 'light';
 

package/src/hooks/useTranslation/useTranslation.ts

@@ -6,10 +6,10 @@ import type {
   TranslationKeyForNamespace,
   TranslationNamespace,
   TranslatorType
-} from '@/i18n';
+} from '#i18n';
 
 // this is required since our storybook manager plugin cannot use vite aliases
-import { i18n } from '../../i18n';
+import { i18n } from '../../i18n/index.ts';
 
 export function useTranslation(): TranslatorType<TranslationKey>;
 export function useTranslation<TNamespace extends TranslationNamespace>(

package/src/hooks/useWindowSize/useWindowSize.test.ts

@@ -1,7 +1,7 @@
 import { act, renderHook } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import { useWindowSize } from './useWindowSize';
+import { useWindowSize } from './useWindowSize.ts';
 
 const setupHook = () => renderHook(() => useWindowSize());
 

package/src/hooks/useWindowSize/useWindowSize.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { useEventListener } from '../useEventListener';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useEventListener } from '../useEventListener/useEventListener.ts';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts';
 
 export type WindowSize = {
   height: number;

package/src/i18n/__tests__/translator.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { Translator } from '../translator';
+import { Translator } from '../translator.ts';
 
 describe('Translator', () => {
   const translator = new Translator();

package/src/i18n/translator.ts

@@ -2,7 +2,7 @@ import { format } from '@douglasneuroinformatics/libjs';
 import { get } from 'lodash-es';
 import type { SetOptional } from 'type-fest';
 
-import libui from './translations/libui.json';
+import libui from './translations/libui.json' with { type: 'json' };
 
 import type {
   Language,
@@ -11,7 +11,7 @@ import type {
   TranslationKey,
   Translations,
   TranslatorType
-} from './types';
+} from './types.ts';
 
 type TranslatorEventMap = {
   languageChange: (...args: [language: Language]) => void;

package/src/providers/CoreProvider/CoreProvider.stories.tsx

@@ -2,12 +2,10 @@ import { useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Input, Label } from '@/components';
-import { Button } from '@/components/Button';
-import { useDestructiveAction } from '@/hooks/useDestructiveAction';
-import { useNotificationsStore } from '@/hooks/useNotificationsStore';
+import { Button, Input, Label } from '#components';
+import { useDestructiveAction, useNotificationsStore } from '#hooks';
 
-import { CoreProvider } from './CoreProvider';
+import { CoreProvider } from './CoreProvider.tsx';
 
 type Story = StoryObj<typeof CoreProvider>;
 

package/src/providers/CoreProvider/CoreProvider.tsx

@@ -1,5 +1,5 @@
-import { DestructiveActionDialog } from './DestructiveActionDialog';
-import { NotificationHub } from './NotificationHub';
+import { DestructiveActionDialog } from './DestructiveActionDialog.tsx';
+import { NotificationHub } from './NotificationHub.tsx';
 
 export const CoreProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (

package/src/providers/CoreProvider/DestructiveActionDialog.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Button } from '@/components/Button';
-import { Dialog } from '@/components/Dialog';
-import { useDestructiveActionStore } from '@/hooks/useDestructiveAction/useDestructiveActionStore';
-import type { DestructiveActionDef } from '@/hooks/useDestructiveAction/useDestructiveActionStore';
-import { useTranslation } from '@/hooks/useTranslation';
+import { Button, Dialog } from '#components';
+import { useTranslation } from '#hooks';
+
+import { useDestructiveActionStore } from '../../hooks/useDestructiveAction/useDestructiveActionStore.ts';
+
+import type { DestructiveActionDef } from '../../hooks/useDestructiveAction/useDestructiveActionStore.ts';
 
 export const DestructiveActionDialog = () => {
   const deletePendingDestructiveAction = useDestructiveActionStore((store) => store.deletePendingDestructiveAction);

package/src/providers/CoreProvider/NotificationHub.tsx

@@ -1,11 +1,10 @@
 import { XIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 
-import { Card } from '@/components/Card';
-import { useTranslation } from '@/hooks';
-import { useNotificationsStore } from '@/hooks/useNotificationsStore';
+import { Card } from '#components';
+import { useNotificationsStore, useTranslation } from '#hooks';
 
-import { NotificationIcon } from './NotificationIcon';
+import { NotificationIcon } from './NotificationIcon.tsx';
 
 type NotificationHubProps = {
   /** The number of milliseconds before the notification is automatically cleared */

package/src/providers/CoreProvider/NotificationIcon.tsx

@@ -1,4 +1,4 @@
-import type { NotificationInterface } from '@/hooks/useNotificationsStore';
+import type { NotificationInterface } from '#hooks';
 
 export type NotificationIconProps = {
   type: NotificationInterface['type'];

package/src/providers/index.ts

@@ -1 +1 @@
-export * from './CoreProvider';
+export * from './CoreProvider/CoreProvider.tsx';