@douglasneuroinformatics/libui 3.1.2 → 3.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "packageManager": "pnpm@9.3.0",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -119,6 +119,7 @@
     "@douglasneuroinformatics/prettier-config": "^0.0.1",
     "@douglasneuroinformatics/semantic-release": "^0.0.1",
     "@douglasneuroinformatics/tsconfig": "^1.0.2",
+    "@faker-js/faker": "^9.0.1",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",

package/src/components/Accordion/Accordion.spec.tsx

@@ -5,8 +5,8 @@ import { Accordion } from './Accordion';
 
 const TEST_ID = 'accordion';
 
-const TestAccordion = () => (
-  <Accordion collapsible type="single">
+const TestAccordion: React.FC<{ [key: string]: any }> = (props) => (
+  <Accordion collapsible type="single" {...props}>
     <Accordion.Item value="item-1">
       <Accordion.Trigger>T1</Accordion.Trigger>
       <Accordion.Content>C1</Accordion.Content>
@@ -19,16 +19,17 @@ describe('Accordion', () => {
     render(<TestAccordion />);
     expect(screen.getByTestId(TEST_ID)).toBeDefined();
   });
+  it('should include custom data attributes', () => {
+    render(<TestAccordion data-foo="bar" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveAttribute('data-foo', 'bar');
+  });
   it('should open and close an item', () => {
     render(<TestAccordion />);
-
     const toggle = screen.getByText('T1');
     expect(toggle).toBeInTheDocument();
     expect(() => screen.getByText('C1')).toThrow();
-
     fireEvent.click(toggle);
     expect(screen.getByText('C1')).toBeInTheDocument();
-
     fireEvent.click(toggle);
     expect(() => screen.getByText('C1')).toThrow();
   });

package/src/components/ActionDropdown/ActionDropdown.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ActionDropdown } from './ActionDropdown';
+
+type Props = React.ComponentPropsWithoutRef<typeof ActionDropdown>;
+
+const TEST_ID = 'ActionDropdown';
+
+const TestActionDropdown: React.FC<Partial<Props>> = (props) => {
+  return (
+    <ActionDropdown
+      data-testid={TEST_ID}
+      options={['Option 1', 'Option 2']}
+      title="Action Dropdown"
+      onSelection={vi.fn()}
+      {...props}
+    />
+  );
+};
+
+describe('ActionDropdown', () => {
+  it('should render', () => {
+    render(<TestActionDropdown />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should include custom data attributes', () => {
+    render(<TestActionDropdown data-foo="bar" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveAttribute('data-foo', 'bar');
+  });
+  it('should contain a custom class name', () => {
+    render(<TestActionDropdown className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

package/src/components/ActionDropdown/ActionDropdown.tsx

@@ -1,3 +1,5 @@
+import { cn } from '@/utils';
+
 import { DropdownButton } from '../DropdownButton';
 import { DropdownMenu } from '../DropdownMenu';
 
@@ -12,8 +14,12 @@ type ActionDropdownOptionKey<T> = T extends readonly string[]
     : never;
 
 export type ActionDropdownProps<T extends ActionDropdownOptions> = {
+  [key: `data-${string}`]: unknown;
+
   align?: DropdownMenuContentProps['align'];
 
+  className?: string;
+
   contentClassName?: string;
 
   disabled?: boolean;
@@ -35,18 +41,20 @@ export type ActionDropdownProps<T extends ActionDropdownOptions> = {
 // eslint-disable-next-line react/function-component-definition
 export function ActionDropdown<const T extends ActionDropdownOptions>({
   align = 'start',
+  className,
   contentClassName,
   disabled,
   onSelection,
   options,
   title,
   triggerClassName,
-  widthFull
+  widthFull,
+  ...props
 }: ActionDropdownProps<T>) {
   const optionKeys: readonly string[] = options instanceof Array ? options : Object.keys(options);
   return (
     <DropdownMenu>
-      <div className="w-full">
+      <div className={cn('w-full', className)} {...props}>
         <DropdownMenu.Trigger asChild>
           <DropdownButton className={triggerClassName} disabled={disabled}>
             {title}

package/src/components/ClientTable/ClientTable.tsx

@@ -53,6 +53,7 @@ export type ClientTableColumnProps<T extends ClientTableEntry> = {
 };
 
 export type ClientTableProps<T extends ClientTableEntry> = {
+  [key: `data-${string}`]: unknown;
   className?: string;
   columnDropdownOptions?: ClientTableDropdownOptions<T>;
   columns: ClientTableColumn<T>[];
@@ -71,7 +72,8 @@ export const ClientTable = <T extends ClientTableEntry>({
   entriesPerPage = 10,
   minRows,
   noWrap,
-  onEntryClick
+  onEntryClick,
+  ...props
 }: ClientTableProps<T>) => {
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -83,7 +85,7 @@ export const ClientTable = <T extends ClientTableEntry>({
   const nRows = Math.max(currentEntries.length, minRows ?? -1);
 
   return (
-    <div className={className}>
+    <div className={className} {...props}>
       <div className="rounded-md border bg-card tracking-tight text-muted-foreground shadow-sm">
         <Table>
           <Table.Header>

package/src/components/Form/DateField/DateField.tsx

@@ -43,7 +43,6 @@ export const DateField = ({ disabled, error, label, name, readOnly, setValue, va
         <Popover.Trigger>
           <Input
             autoComplete="off"
-            data-cy="date-input"
             data-testid="date-input"
             disabled={disabled || readOnly}
             name={name}

package/src/components/Form/Form.tsx

@@ -167,19 +167,12 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
       )}
       <div className="flex w-full gap-3">
         {/** Note - aria-label is used for testing in downstream packages */}
-        <Button
-          aria-label="Submit Button"
-          className="block w-full"
-          data-cy="submit-form"
-          disabled={readOnly}
-          type="submit"
-          variant="primary"
-        >
+        <Button aria-label="Submit" className="block w-full" disabled={readOnly} type="submit" variant="primary">
           {submitBtnLabel ?? t('form.submit')}
         </Button>
         {resetBtn && (
           <Button
-            aria-label="Reset Button"
+            aria-label="Reset"
             className="block w-full"
             disabled={readOnly}
             type="button"

package/src/components/Form/NumberField/NumberFieldSelect.tsx

@@ -30,19 +30,15 @@ export const NumberFieldSelect = <T extends number = number>({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <Select name={name} value={value?.toString() ?? ''} onValueChange={(value) => setValue(parseFloat(value) as T)}>
-        <Select.Trigger
-          data-cy={`${name}-select-trigger`}
-          data-testid={`${name}-select-trigger`}
-          disabled={disabled || readOnly}
-        >
+        <Select.Trigger data-testid={`${name}-select-trigger`} disabled={disabled || readOnly}>
           <Select.Value />
         </Select.Trigger>
-        <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>
+        <Select.Content data-testid={`${name}-select-content`}>
           {Object.keys(options).map((option) => {
             // Option needs to be type number (this was a design flaw), but is actually always coerced to string anyways
             const text = (disableAutoPrefix ? '' : `${option} - `) + options[option as any as T];
             return (
-              <Select.Item data-cy={`${name}-select-item-${option}`} key={option} value={option}>
+              <Select.Item data-testid={`${name}-select-item-${option}`} key={option} value={option}>
                 {text}
               </Select.Item>
             );

package/src/components/Form/StringField/StringFieldSelect.tsx

@@ -29,16 +29,12 @@ export const StringFieldSelect = <T extends string = string>({
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
       <Select name={name} value={value ?? ''} onValueChange={(value: T) => setValue(value)}>
-        <Select.Trigger
-          data-cy={`${name}-select-trigger`}
-          data-testid={`${name}-select-trigger`}
-          disabled={disabled || readOnly}
-        >
+        <Select.Trigger data-testid={`${name}-select-trigger`} disabled={disabled || readOnly}>
           <Select.Value />
         </Select.Trigger>
-        <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>
+        <Select.Content data-testid={`${name}-select-content`}>
           {Object.keys(options).map((option) => (
-            <Select.Item data-cy={`${name}-select-item-${option}`} key={option} value={option}>
+            <Select.Item data-testid={`${name}-select-item-${option}`} key={option} value={option}>
               {options[option as T]}
             </Select.Item>
           ))}

package/src/components/ListboxDropdown/ListboxDropdown.tsx

@@ -47,7 +47,7 @@ export const ListboxDropdown = <T extends ListboxDropdownOption>({
             <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"
-              data-cy="select-dropdown-option"
+              data-testid="select-dropdown-option"
               key={option.key}
               onSelect={(event) => {
                 event.preventDefault();

package/src/testing/mocks.ts

@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker';
 import { vi } from 'vitest';
 
 /**
@@ -51,3 +52,11 @@ export const mockStorage = (name: 'localStorage' | 'sessionStorage'): void => {
     value: new StorageMock()
   });
 };
+
+export const mockTranslationStore = () => {
+  vi.mock('@/hooks/useTranslation', () => ({
+    useTranslation: () => ({
+      t: () => faker.word.sample()
+    })
+  }));
+};

package/src/testing/setup-tests.ts

@@ -1,9 +1,12 @@
 import { cleanup } from '@testing-library/react';
 import { afterEach, vi } from 'vitest';
 
+import { mockTranslationStore } from './mocks';
+
 import '@testing-library/jest-dom/vitest';
 
 vi.mock('zustand');
+mockTranslationStore();
 
 // Since we're not using vitest globals, we need to explicitly call cleanup()
 // for testing-library. See: