@douglasneuroinformatics/libui 2.10.0 → 3.0.0

package/src/components/Card/Card.stories.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from '../Button/Button.js';
-import { Input } from '../Input/Input.js';
-import { Label } from '../Label/Label.js';
-import { Select } from '../Select/Select.js';
-import { Card } from './Card.js';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Select } from '../Select';
+import { Card } from './Card';
 
 type Story = StoryObj<typeof Card>;
 

package/src/components/Card/Card.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
 const CardRoot = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CardRoot(
   { className, ...props },

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.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, vi } from 'vitest';
 
-import { Checkbox } from './Checkbox.js';
+import { Checkbox } from './Checkbox';
 
 const TEST_ID = 'checkbox';
 

package/src/components/Checkbox/Checkbox.stories.tsx

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

package/src/components/Checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const Checkbox = React.forwardRef<
+export const Checkbox = forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(function Checkbox({ className, ...props }, ref) {

package/src/components/Checkbox/index.ts

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

package/src/components/ClientTable/ClientTable.stories.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
 import { randomInt, range } from '@douglasneuroinformatics/libjs';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ClientTable } from './ClientTable.js';
-import { type ClientTableColumn } from './ClientTable.js';
+import { ClientTable } from './ClientTable';
+import { type ClientTableColumn } from './ClientTable';
 
 type ExampleItem = {
   c1: number;

package/src/components/ClientTable/ClientTable.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 
 import { toBasicISOString } from '@douglasneuroinformatics/libjs';
 import { range } from 'lodash-es';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import { Table } from '../Table/Table.js';
-import { ClientTablePagination } from './ClientTablePagination.js';
+import { cn } from '@/utils';
+
+import { DropdownMenu } from '../DropdownMenu';
+import { Table } from '../Table';
+import { ClientTablePagination } from './ClientTablePagination';
 
 /** Coerces the value in a cell to a string for consistant display purposes */
 function defaultFormatter(value: unknown): string {

package/src/components/ClientTable/ClientTablePagination.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
+import { useTranslation } from '@/hooks';
 
-import { useTranslation } from 'react-i18next';
-
-import { Button } from '../Button/Button.js';
+import { Button } from '../Button';
 
 export type ClientPagePaginationProps = {
   currentPage: number;
@@ -25,13 +23,7 @@ export const ClientTablePagination = ({
   return (
     <div className="flex items-center justify-between py-3">
       <div className="hidden sm:block">
-        <p className="text-sm font-medium text-muted-foreground">
-          {t('pagination.info', {
-            first: firstEntry,
-            last: lastEntry,
-            total: totalEntries
-          })}
-        </p>
+        <p className="text-sm font-medium text-muted-foreground">{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
       </div>
       <div className="flex flex-1 justify-between gap-3 sm:justify-end">
         <Button

package/src/components/ClientTable/index.ts

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

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import { Fragment, useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { ChevronsUpDownIcon } from 'lucide-react';
 
-import { Button } from '../Button/Button.js';
-import { Collapsible } from './Collapsible.js';
+import { Button } from '../Button';
+import { Collapsible } from './Collapsible';
 
 type Story = StoryObj<typeof Collapsible>;
 
@@ -18,7 +18,7 @@ export const Default: Story = {
         <Story
           args={{
             children: (
-              <React.Fragment>
+              <Fragment>
                 <div className="flex items-center justify-between space-x-4 px-4">
                   <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
                   <Collapsible.Trigger asChild>
@@ -32,7 +32,7 @@ export const Default: Story = {
                   <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/colors</div>
                   <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@stitches/react</div>
                 </Collapsible.Content>
-              </React.Fragment>
+              </Fragment>
             ),
             className: 'w-[350px] space-y-2',
             onOpenChange: setIsOpen,

package/src/components/Collapsible/Collapsible.tsx

@@ -1,6 +1,6 @@
 import { Content, Trigger } from '@radix-ui/react-collapsible';
 
-import { CollapsibleRoot } from './CollapsibleRoot.js';
+import { CollapsibleRoot } from './CollapsibleRoot';
 
 export const Collapsible = Object.assign(CollapsibleRoot, {
   Content,

package/src/components/Collapsible/CollapsibleRoot.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Root } from '@radix-ui/react-collapsible';
 
-export const CollapsibleRoot = React.forwardRef<
-  React.ElementRef<typeof Root>,
-  React.ComponentPropsWithoutRef<typeof Root>
->(function CollapsibleRoot(props, ref) {
-  return <Root ref={ref} {...props} />;
-});
+export const CollapsibleRoot = forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+  function CollapsibleRoot(props, ref) {
+    return <Root ref={ref} {...props} />;
+  }
+);

package/src/components/Collapsible/index.ts

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

package/src/components/Command/Command.stories.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 import { CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon, UserIcon } from 'lucide-react';
 
-import { Command } from './Command.js';
+import { Command } from './Command';
 
 type Story = StoryObj<typeof Command>;
 

package/src/components/Command/Command.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 import type { Simplify } from 'type-fest';
 
-import { cn } from '../../utils.js';
-import { CommandEmpty } from './CommandEmpty.js';
-import { CommandGroup } from './CommandGroup.js';
-import { CommandInput } from './CommandInput.js';
-import { CommandItem } from './CommandItem.js';
-import { CommandList } from './CommandList.js';
-import { CommandSeparator } from './CommandSeparator.js';
-import { CommandShortcut } from './CommandShortcut.js';
+import { cn } from '@/utils';
+
+import { CommandEmpty } from './CommandEmpty';
+import { CommandGroup } from './CommandGroup';
+import { CommandInput } from './CommandInput';
+import { CommandItem } from './CommandItem';
+import { CommandList } from './CommandList';
+import { CommandSeparator } from './CommandSeparator';
+import { CommandShortcut } from './CommandShortcut';
 
 type CommandRootProps = Simplify<React.ComponentPropsWithoutRef<typeof CommandPrimitive>>;
 

package/src/components/Command/CommandEmpty.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 
-export const CommandEmpty = React.forwardRef<
+export const CommandEmpty = forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >(function CommandEmpty(props, ref) {

package/src/components/Command/CommandGroup.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const CommandGroup = React.forwardRef<
+export const CommandGroup = forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(function CommandGroup({ className, ...props }, ref) {

package/src/components/Command/CommandInput.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const CommandInput = React.forwardRef<
+export const CommandInput = forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(function CommandInput({ className, ...props }, ref) {

package/src/components/Command/CommandItem.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const CommandItem = React.forwardRef<
+export const CommandItem = forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(function CommandItem({ className, ...props }, ref) {

package/src/components/Command/CommandList.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const CommandList = React.forwardRef<
+export const CommandList = forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(function CommandList({ className, ...props }, ref) {

package/src/components/Command/CommandSeparator.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const CommandSeparator = React.forwardRef<
+export const CommandSeparator = forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(function CommandSeparator({ className, ...props }, ref) {

package/src/components/Command/CommandShortcut.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 CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;

package/src/components/Command/index.ts

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

package/src/components/ContextMenu/ContextMenu.stories.tsx

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

package/src/components/ContextMenu/ContextMenu.tsx

@@ -1,14 +1,14 @@
 import { Group, Portal, RadioGroup, Root, Sub, Trigger } from '@radix-ui/react-context-menu';
 
-import { ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.js';
-import { ContextMenuContent } from './ContextMenuContent.js';
-import { ContextMenuItem } from './ContextMenuItem.js';
-import { ContextMenuLabel } from './ContextMenuLabel.js';
-import { ContextMenuRadioItem } from './ContextMenuRadioItem.js';
-import { ContextMenuSeparator } from './ContextMenuSeparator.js';
-import { ContextMenuShortcut } from './ContextMenuShortcut.js';
-import { ContextMenuSubContent } from './ContextMenuSubContent.js';
-import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
+import { ContextMenuCheckboxItem } from './ContextMenuCheckboxItem';
+import { ContextMenuContent } from './ContextMenuContent';
+import { ContextMenuItem } from './ContextMenuItem';
+import { ContextMenuLabel } from './ContextMenuLabel';
+import { ContextMenuRadioItem } from './ContextMenuRadioItem';
+import { ContextMenuSeparator } from './ContextMenuSeparator';
+import { ContextMenuShortcut } from './ContextMenuShortcut';
+import { ContextMenuSubContent } from './ContextMenuSubContent';
+import { ContextMenuSubTrigger } from './ContextMenuSubTrigger';
 
 export const ContextMenu = Object.assign(Root.bind(null), {
   CheckboxItem: ContextMenuCheckboxItem,

package/src/components/ContextMenu/ContextMenuCheckboxItem.tsx

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

package/src/components/ContextMenu/ContextMenuContent.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 
-import { cn } from '../../utils.js';
+import { cn } from '@/utils';
 
-export const ContextMenuContent = React.forwardRef<
+export const ContextMenuContent = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 >(function ContextMenuContent({ className, ...props }, ref) {

package/src/components/ContextMenu/ContextMenuItem.tsx

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

package/src/components/ContextMenu/ContextMenuLabel.tsx

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

package/src/components/ContextMenu/ContextMenuRadioItem.tsx

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

package/src/components/ContextMenu/ContextMenuSeparator.tsx

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

package/src/components/ContextMenu/ContextMenuShortcut.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 ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;

package/src/components/ContextMenu/ContextMenuSubContent.tsx

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

package/src/components/ContextMenu/ContextMenuSubTrigger.tsx

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

package/src/components/ContextMenu/index.ts

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

package/src/components/CopyButton/CopyButton.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CopyButton } from './CopyButton';
+
+type Story = StoryObj<typeof CopyButton>;
+
+export default { component: CopyButton } as Meta<typeof CopyButton>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'centered'
+  }
+};

package/src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { ClipboardCheckIcon, ClipboardListIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { Button, type ButtonProps } from '../Button';
+
+export const CopyButton: React.FC<{ size?: ButtonProps['size']; text: string; variant?: ButtonProps['variant'] }> = ({
+  size,
+  text,
+  variant
+}) => {
+  const [state, setState] = useState<'READY' | 'SUCCESS'>('READY');
+
+  return (
+    <Button
+      size={size ?? 'icon'}
+      type="button"
+      variant={variant}
+      onClick={() => {
+        if (state === 'READY') {
+          navigator.clipboard
+            .writeText(text)
+            .then(() => setState('SUCCESS'))
+            .catch(console.error);
+        }
+      }}
+      onMouseLeave={() => {
+        setState('READY');
+      }}
+    >
+      <AnimatePresence mode="popLayout">
+        <motion.div
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          key={state}
+          transition={{ duration: 0.1 }}
+        >
+          {match(state)
+            .with('READY', () => <ClipboardListIcon />)
+            .with('SUCCESS', () => <ClipboardCheckIcon />)
+            .exhaustive()}
+        </motion.div>
+      </AnimatePresence>
+    </Button>
+  );
+};

package/src/components/CopyButton/index.ts

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

package/src/components/DatePicker/Calendar.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { AnimatePresence, motion } from 'framer-motion';
 import { range } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
+
+import { useTranslation } from '@/hooks';
 
 export const CALENDAR_ANIMATION_DURATION = 0.2; // seconds
 
@@ -12,7 +13,7 @@ export type CalendarProps = {
   year: number;
 };
 
-export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar(props, ref) {
+export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(props, ref) {
   const { t } = useTranslation('libui');
   const firstDay = new Date(props.year, props.month).getDay();
   const lastDay = new Date(props.year, props.month + 1, 0).getDate();

package/src/components/DatePicker/DatePicker.stories.tsx

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