diff --git a/.storybook/index.mdx b/.storybook/index.mdx index 00ea1ef3..170674ce 100644 --- a/.storybook/index.mdx +++ b/.storybook/index.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/blocks'; -# Welcome to the Douglasneuroinformatics UI Library +# Welcome to the DouglasNeuroinformatics UI Library This library includes generic UI components built using shadcn/ui with React and TailwindCSS. diff --git a/package.json b/package.json index 8defa442..4c4d1ec2 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "zod": "^3.25.x" }, "dependencies": { - "@douglasneuroinformatics/libjs": "^2.8.0", + "@douglasneuroinformatics/libjs": "^3.0.1", "@douglasneuroinformatics/libui-form-types": "^0.11.0", "@radix-ui/react-accordion": "^1.2.3", "@radix-ui/react-alert-dialog": "^1.1.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dff77333..c679d654 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,8 +8,8 @@ importers: .: dependencies: '@douglasneuroinformatics/libjs': - specifier: ^2.8.0 - version: 2.8.0(neverthrow@8.2.0)(zod@3.25.32) + specifier: ^3.0.1 + version: 3.0.1(neverthrow@8.2.0)(zod@3.25.32) '@douglasneuroinformatics/libui-form-types': specifier: ^0.11.0 version: 0.11.0 @@ -470,12 +470,12 @@ packages: typescript: optional: true - '@douglasneuroinformatics/libjs@2.8.0': + '@douglasneuroinformatics/libjs@3.0.1': resolution: - { integrity: sha512-2hNFONcYsfQ5wSsTn3NjXSrqEpwdmQ0GmTajaUrX1DOQpRKSt5MmlxhTzLon51S86eR4rbSUkBEsD0AUonFGiw== } + { integrity: sha512-zdkYLe0JRRIfF446pBg8P8vffqiIs+uydnJB4OC8diDSsd35hQyVIf3hkarzLZR647ceRQD6OkA+IvciER/e1Q== } peerDependencies: neverthrow: ^8.2.0 - zod: ^3.22.6 + zod: ^3.25.x '@douglasneuroinformatics/libui-form-types@0.11.0': resolution: @@ -6603,7 +6603,7 @@ snapshots: - svelte - ts-node - '@douglasneuroinformatics/libjs@2.8.0(neverthrow@8.2.0)(zod@3.25.32)': + '@douglasneuroinformatics/libjs@3.0.1(neverthrow@8.2.0)(zod@3.25.32)': dependencies: clean-stack: 5.2.0 extract-stack: 3.0.0 diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx index 38afd808..fccc5629 100644 --- a/src/components/DataTable/DataTable.stories.tsx +++ b/src/components/DataTable/DataTable.stories.tsx @@ -1,4 +1,4 @@ -import { range, toBasicISOString } from '@douglasneuroinformatics/libjs'; +import { range, toBasicISOString, unwrap } from '@douglasneuroinformatics/libjs'; import { faker } from '@faker-js/faker'; import type { Meta, StoryObj } from '@storybook/react'; @@ -31,14 +31,12 @@ const columns: DataTableColumn[] = [ } ]; -const data: User[] = range(60) - .unwrap() - .map(() => ({ - birthday: faker.date.birthdate(), - email: faker.internet.email(), - firstName: faker.person.firstName(), - lastName: faker.person.lastName() - })); +const data: User[] = unwrap(range(60)).map(() => ({ + birthday: faker.date.birthdate(), + email: faker.internet.email(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName() +})); export default { component: DataTable } as Meta>; @@ -46,12 +44,14 @@ export const Default: Story = { args: { columns, data, - headerAction: { - label: 'Do Something', - onClick: () => { - alert('Something!'); + headerActions: [ + { + label: 'Do Something', + onClick: () => { + alert('Something!'); + } } - }, + ], rowActions: [ { destructive: true, diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index 12aa1512..8617c372 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -1,4 +1,4 @@ -import { Fragment, useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { flexRender, @@ -45,10 +45,10 @@ type DataTableColumn = type DataTableProps = { columns: DataTableColumn[]; data: TData[]; - headerAction?: { + headerActions?: { label: string; onClick: () => void; - }; + }[]; rowActions?: RowAction[]; search?: { key: Extract; @@ -65,7 +65,7 @@ function isStaticColumn( export const DataTable = ({ columns, data, - headerAction, + headerActions, rowActions, search }: DataTableProps) => { @@ -173,7 +173,7 @@ export const DataTable = ({ const pageIndexOptions = range(start, end); return ( - +
({ value={searchValue} onValueChange={setSearchValue} /> - {headerAction && ( - + {headerActions && ( +
+ {headerActions.map(({ label, onClick }, i) => ( + + ))} +
)}
)} @@ -230,30 +234,29 @@ export const DataTable = ({ -
+
{pageIndexOptions.map((index) => ( ))}
- +
); }; diff --git a/src/components/DataTable/DestructiveActionDialog.tsx b/src/components/DataTable/DestructiveActionDialog.tsx index bdc78b94..3fd180f6 100644 --- a/src/components/DataTable/DestructiveActionDialog.tsx +++ b/src/components/DataTable/DestructiveActionDialog.tsx @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/no-misused-promises */ -/* eslint-disable jsx-a11y/no-autofocus */ import type React from 'react'; @@ -26,7 +25,7 @@ export const DestructiveActionDialog: React.FC<{ } }} > - + event.preventDefault()}> {t({ @@ -44,9 +43,8 @@ export const DestructiveActionDialog: React.FC<{