@douglasneuroinformatics/libui 2.11.0 → 3.0.0

package/src/components/Label/Label.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70'
 );
 
-export const Label = React.forwardRef<
+export const Label = forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(function Label({ className, ...props }, ref) {

package/src/components/Label/index.ts

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

package/src/components/LanguageToggle/LanguageToggle.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { LanguageToggle } from './LanguageToggle.js';
+import { LanguageToggle } from './LanguageToggle';
 
 type Story = StoryObj<typeof LanguageToggle>;
 

package/src/components/LanguageToggle/LanguageToggle.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-
 import { LanguagesIcon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 
-import { Button, type ButtonProps } from '../Button/Button.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { useTranslation } from '@/hooks';
+import type { Language } from '@/i18n';
+
+import { Button, type ButtonProps } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
 
 export type LanguageToggleProps = {
   align?: 'center' | 'end' | 'start';
   contentClassName?: string;
   itemClassName?: string;
   options: {
-    [key: string]: string;
+    [L in Language]?: string;
   };
   triggerClassName?: string;
   variant?: ButtonProps['variant'];
@@ -25,7 +25,7 @@ export const LanguageToggle = ({
   triggerClassName,
   variant = 'outline'
 }: LanguageToggleProps) => {
-  const { i18n } = useTranslation('libui');
+  const { changeLanguage } = useTranslation('libui');
   return (
     <DropdownMenu>
       <DropdownMenu.Trigger asChild>
@@ -35,8 +35,12 @@ export const LanguageToggle = ({
       </DropdownMenu.Trigger>
       <DropdownMenu.Content align={align} className={contentClassName}>
         {Object.keys(options).map((option) => (
-          <DropdownMenu.Item className={itemClassName} key={option} onClick={() => void i18n.changeLanguage(option)}>
-            {options[option]}
+          <DropdownMenu.Item
+            className={itemClassName}
+            key={option}
+            onClick={() => void changeLanguage(option as Language)}
+          >
+            {options[option as Language]}
           </DropdownMenu.Item>
         ))}
       </DropdownMenu.Content>

package/src/components/LanguageToggle/index.ts

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

package/src/components/LineGraph/LineGraph.stories.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { LineGraph } from './LineGraph.js';
+import { LineGraph } from './LineGraph';
 
 type GraphData = readonly {
   m1: number;

package/src/components/LineGraph/LineGraph.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
-import { useTranslation } from 'react-i18next';
 import {
   CartesianGrid,
   ErrorBar,
@@ -17,7 +16,8 @@ import {
 } from 'recharts';
 import type { ConditionalKeys } from 'type-fest';
 
-import { type Theme, useTheme } from '../../hooks/useTheme.js';
+import { useTranslation } from '@/hooks';
+import { type Theme, useTheme } from '@/hooks/useTheme';
 
 /** An array of arbitrary objects with data to graph  */
 
@@ -64,7 +64,7 @@ function LineGraphComponent<const T extends LineGraphData>({
     label?: string;
   };
 }) {
-  const { i18n } = useTranslation('libui');
+  const { resolvedLanguage } = useTranslation('libui');
   const [theme] = useTheme();
 
   return (
@@ -99,7 +99,7 @@ function LineGraphComponent<const T extends LineGraphData>({
           contentStyle={tooltipStyles[theme]}
           labelFormatter={(time: number) => {
             const date = new Date(time);
-            return new Intl.DateTimeFormat(i18n.resolvedLanguage, {
+            return new Intl.DateTimeFormat(resolvedLanguage, {
               dateStyle: 'full',
               timeStyle: 'medium'
             }).format(date);

package/src/components/LineGraph/index.ts

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

package/src/components/ListboxDropdown/ListboxDropdown.stories.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ListboxDropdown } from './ListboxDropdown.js';
+import { ListboxDropdown } from './ListboxDropdown';
 
 type Story = StoryObj<typeof ListboxDropdown>;
 

package/src/components/ListboxDropdown/ListboxDropdown.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
-import { type ButtonProps } from '../Button/Button.js';
-import { DropdownButton } from '../DropdownButton/DropdownButton.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { cn } from '@/utils';
+
+import { type ButtonProps } from '../Button';
+import { DropdownButton } from '../DropdownButton';
+import { DropdownMenu } from '../DropdownMenu';
 
 export type ListboxDropdownOption = {
   key: string;
@@ -45,7 +46,7 @@ export const ListboxDropdown = <T extends ListboxDropdownOption>({
           return (
             <DropdownMenu.CheckboxItem
               checked={checked}
-              className="flex w-full items-center whitespace-nowrap bg-slate-50 p-2 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 "
+              className="flex w-full items-center whitespace-nowrap bg-slate-50 p-2 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700"
               data-cy="select-dropdown-option"
               key={option.key}
               onSelect={(event) => {

package/src/components/ListboxDropdown/index.ts

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

package/src/components/MenuBar/MenuBar.stories.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { MenuBar } from './MenuBar.js';
+import { MenuBar } from './MenuBar';
 
 type Story = StoryObj<typeof MenuBar>;
 

package/src/components/MenuBar/MenuBar.tsx

@@ -1,19 +1,17 @@
-import type React from 'react';
-
 import { Group, Menu, Portal, RadioGroup, Sub } from '@radix-ui/react-menubar';
 import type { MenubarMenuProps } from '@radix-ui/react-menubar';
 
-import { MenuBarCheckboxItem } from './MenuBarCheckboxItem.js';
-import { MenuBarContent } from './MenuBarContent.js';
-import { MenuBarItem } from './MenuBarItem.js';
-import { MenuBarLabel } from './MenuBarLabel.js';
-import { MenuBarRadioItem } from './MenuBarRadioItem.js';
-import { MenuBarRoot } from './MenuBarRoot.js';
-import { MenuBarSeparator } from './MenuBarSeparator.js';
-import { MenuBarShortcut } from './MenuBarShortcut.js';
-import { MenuBarSubContent } from './MenuBarSubContent.js';
-import { MenuBarSubTrigger } from './MenuBarSubTrigger.js';
-import { MenuBarTrigger } from './MenuBarTrigger.js';
+import { MenuBarCheckboxItem } from './MenuBarCheckboxItem';
+import { MenuBarContent } from './MenuBarContent';
+import { MenuBarItem } from './MenuBarItem';
+import { MenuBarLabel } from './MenuBarLabel';
+import { MenuBarRadioItem } from './MenuBarRadioItem';
+import { MenuBarRoot } from './MenuBarRoot';
+import { MenuBarSeparator } from './MenuBarSeparator';
+import { MenuBarShortcut } from './MenuBarShortcut';
+import { MenuBarSubContent } from './MenuBarSubContent';
+import { MenuBarSubTrigger } from './MenuBarSubTrigger';
+import { MenuBarTrigger } from './MenuBarTrigger';
 
 export const MenuBar = Object.assign(MenuBarRoot, {
   CheckboxItem: MenuBarCheckboxItem,

package/src/components/MenuBar/MenuBarCheckboxItem.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { CheckboxItem, ItemIndicator } from '@radix-ui/react-menubar';
 import { CheckIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarCheckboxItem = React.forwardRef<
+export const MenuBarCheckboxItem = forwardRef<
   React.ElementRef<typeof CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof CheckboxItem>
 >(function MenuBarCheckboxItem({ checked, children, className, ...props }, ref) {

package/src/components/MenuBar/MenuBarContent.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Content, Portal } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
-export const MenuBarContent = React.forwardRef<
+import { cn } from '@/utils';
+export const MenuBarContent = forwardRef<
   React.ElementRef<typeof Content>,
   React.ComponentPropsWithoutRef<typeof Content>
 >(function MenuBarContent({ align = 'start', alignOffset = -4, className, sideOffset = 8, ...props }, ref) {

package/src/components/MenuBar/MenuBarItem.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Item } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarItem = React.forwardRef<
+export const MenuBarItem = forwardRef<
   React.ElementRef<typeof Item>,
   {
     inset?: boolean;

package/src/components/MenuBar/MenuBarLabel.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Label } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarLabel = React.forwardRef<
+export const MenuBarLabel = forwardRef<
   React.ElementRef<typeof Label>,
   {
     inset?: boolean;

package/src/components/MenuBar/MenuBarRadioItem.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { ItemIndicator, RadioItem } from '@radix-ui/react-menubar';
 import { CircleIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarRadioItem = React.forwardRef<
+export const MenuBarRadioItem = forwardRef<
   React.ElementRef<typeof RadioItem>,
   React.ComponentPropsWithoutRef<typeof RadioItem>
 >(function MenuBarRadioItem({ children, className, ...props }, ref) {

package/src/components/MenuBar/MenuBarRoot.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Root } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarRoot = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+export const MenuBarRoot = forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
   function MenuBarRoot({ className, ...props }, ref) {
     return (
       <Root

package/src/components/MenuBar/MenuBarSeparator.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Separator } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarSeparator = React.forwardRef<
+export const MenuBarSeparator = forwardRef<
   React.ElementRef<typeof Separator>,
   React.ComponentPropsWithoutRef<typeof Separator>
 >(function MenuBarSeparator({ className, ...props }, ref) {

package/src/components/MenuBar/MenuBarShortcut.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const MenuBarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;

package/src/components/MenuBar/MenuBarSubContent.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { SubContent } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarSubContent = React.forwardRef<
+export const MenuBarSubContent = forwardRef<
   React.ElementRef<typeof SubContent>,
   React.ComponentPropsWithoutRef<typeof SubContent>
 >(function MenuBarSubContent({ className, ...props }, ref) {

package/src/components/MenuBar/MenuBarSubTrigger.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { SubTrigger } from '@radix-ui/react-menubar';
 import { ChevronRightIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const MenuBarSubTrigger = React.forwardRef<
+export const MenuBarSubTrigger = forwardRef<
   React.ElementRef<typeof SubTrigger>,
   {
     inset?: boolean;

package/src/components/MenuBar/MenuBarTrigger.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Trigger } from '@radix-ui/react-menubar';
 
-import { cn } from '../../utils.js';
-export const MenuBarTrigger = React.forwardRef<
+import { cn } from '@/utils';
+export const MenuBarTrigger = forwardRef<
   React.ElementRef<typeof Trigger>,
   React.ComponentPropsWithoutRef<typeof Trigger>
 >(function MenuBarTrigger({ className, ...props }, ref) {

package/src/components/MenuBar/index.ts

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

package/src/components/NotificationHub/NotificationHub.stories.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { useNotificationsStore } from '../../hooks/useNotificationsStore.js';
-import { Button } from '../Button/Button.js';
-import { NotificationHub } from './NotificationHub.js';
+import { useNotificationsStore } from '@/hooks/useNotificationsStore';
+
+import { Button } from '../Button';
+import { NotificationHub } from './NotificationHub';
 
 type Story = StoryObj<typeof NotificationHub>;
 

package/src/components/NotificationHub/NotificationHub.tsx

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

package/src/components/NotificationHub/NotificationIcon.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
 
-import { type NotificationInterface } from '../../hooks/useNotificationsStore.js';
+import { type NotificationInterface } from '@/hooks/useNotificationsStore';
 
 export type NotificationIconProps = {
   type: NotificationInterface['type'];

package/src/components/NotificationHub/index.ts

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

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Pagination } from './Pagination.js';
+import { Pagination } from './Pagination';
 
 type Story = StoryObj<typeof Pagination>;
 

package/src/components/Pagination/Pagination.tsx

@@ -1,10 +1,10 @@
-import { PaginationContent } from './PaginationContent.js';
-import { PaginationEllipsis } from './PaginationEllipsis.js';
-import { PaginationItem } from './PaginationItem.js';
-import { PaginationLink } from './PaginationLink.js';
-import { PaginationNext } from './PaginationNext.js';
-import { PaginationPrevious } from './PaginationPrevious.js';
-import { PaginationRoot } from './PaginationRoot.js';
+import { PaginationContent } from './PaginationContent';
+import { PaginationEllipsis } from './PaginationEllipsis';
+import { PaginationItem } from './PaginationItem';
+import { PaginationLink } from './PaginationLink';
+import { PaginationNext } from './PaginationNext';
+import { PaginationPrevious } from './PaginationPrevious';
+import { PaginationRoot } from './PaginationRoot';
 
 export const Pagination = Object.assign(PaginationRoot, {
   Content: PaginationContent,

package/src/components/Pagination/PaginationContent.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const PaginationContent = ({ className, ...props }: React.ComponentProps<'ul'>) => (
   <ul className={cn('flex flex-row items-center gap-1', className)} {...props} />

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 
 import { MoreHorizontalIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
   <span aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>

package/src/components/Pagination/PaginationItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const PaginationItem = ({ className, ...props }: React.ComponentProps<'li'>) => (
   <li className={className} {...props} />

package/src/components/Pagination/PaginationLink.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
 
 import type { Simplify } from 'type-fest';
 
-import { cn } from '../../utils.js';
-import { type ButtonProps, buttonVariants } from '../Button/Button.js';
+import { cn } from '@/utils';
+
+import { type ButtonProps, buttonVariants } from '../Button';
 
 export type PaginationLinkProps = Simplify<
   {

package/src/components/Pagination/PaginationNext.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import * as React from 'react';
 
 import { ChevronRightIcon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 
-import { cn } from '../../utils.js';
-import { PaginationLink } from './PaginationLink.js';
+import { useTranslation } from '@/hooks';
+import { cn } from '@/utils';
+
+import { PaginationLink } from './PaginationLink';
 
 export const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
   const { t } = useTranslation('libui');

package/src/components/Pagination/PaginationPrevious.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-
 import { ChevronLeftIcon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 
-import { cn } from '../../utils.js';
-import { PaginationLink, type PaginationLinkProps } from './PaginationLink.js';
+import { useTranslation } from '@/hooks';
+import { cn } from '@/utils';
+
+import { PaginationLink, type PaginationLinkProps } from './PaginationLink';
 
 export const PaginationPrevious = ({ className, ...props }: PaginationLinkProps) => {
   const { t } = useTranslation('libui');

package/src/components/Pagination/PaginationRoot.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 export const PaginationRoot = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav

package/src/components/Pagination/index.ts

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

package/src/components/Popover/Popover.spec.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { describe, expect, it } from 'vitest';
 
-import { Popover } from './Popover.js';
+import { Popover } from './Popover';
 
 const TestPopover = () => (
   <Popover>

package/src/components/Popover/Popover.stories.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { Fragment } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { CircleHelpIcon } from 'lucide-react';
 
-import { Button } from '../Button/Button.js';
-import { Input } from '../Input/Input.js';
-import { Label } from '../Label/Label.js';
-import { Popover } from './Popover.js';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Popover } from './Popover';
 
 type Story = StoryObj<typeof Popover>;
 
@@ -21,7 +21,7 @@ export default {
 export const Form: Story = {
   args: {
     children: (
-      <React.Fragment>
+      <Fragment>
         <Popover.Trigger asChild>
           <Button variant="outline">Open popover</Button>
         </Popover.Trigger>
@@ -51,7 +51,7 @@ export const Form: Story = {
             </div>
           </div>
         </Popover.Content>
-      </React.Fragment>
+      </Fragment>
     )
   }
 };
@@ -59,14 +59,14 @@ export const Form: Story = {
 export const Icon: Story = {
   args: {
     children: (
-      <React.Fragment>
+      <Fragment>
         <Popover.Trigger asChild>
           <Button size="icon" variant="ghost">
             <CircleHelpIcon />
           </Button>
         </Popover.Trigger>
         <Popover.Content className="w-min whitespace-nowrap text-sm">Hello World</Popover.Content>
-      </React.Fragment>
+      </Fragment>
     )
   }
 };

package/src/components/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 import { Root as PopoverRoot, Trigger as PopoverTrigger } from '@radix-ui/react-popover';
 
-import { PopoverContent } from './PopoverContent.js';
+import { PopoverContent } from './PopoverContent';
 
 export const Popover = Object.assign(PopoverRoot.bind(null), {
   Content: PopoverContent,