@douglasneuroinformatics/libui 2.0.9 → 2.2.0

package/dist/components/Form/NumberField/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAExF,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAEtG,eAAO,MAAM,WAAW,UAAW,gBAAgB,sBAMlD,CAAC"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAErF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAExF,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAEtG,eAAO,MAAM,WAAW,UAAW,gBAAgB,sBAOlD,CAAC"}

package/dist/components/Form/NumberField/NumberField.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { match } from 'ts-pattern';
 import { NumberFieldInput } from './NumberFieldInput.js';
 import { NumberFieldRadio } from './NumberFieldRadio.js';
+import { NumberFieldSelect } from './NumberFieldSelect.js';
 import { NumberFieldSlider } from './NumberFieldSlider.js';
 export const NumberField = (props) => {
     return match(props)
         .with({ variant: 'input' }, (props) => React.createElement(NumberFieldInput, { ...props }))
         .with({ variant: 'slider' }, (props) => React.createElement(NumberFieldSlider, { ...props }))
         .with({ variant: 'radio' }, (props) => React.createElement(NumberFieldRadio, { ...props }))
+        .with({ variant: 'select' }, (props) => React.createElement(NumberFieldSelect, { ...props }))
         .exhaustive();
 };

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts

@@ -3,7 +3,7 @@ import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types'
 import type { Simplify } from 'type-fest';
 import type { BaseFieldComponentProps } from '../types.js';
 export type NumberFieldRadioProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
-    variant: 'radio';
+    options: object;
 }>>;
 export declare const NumberFieldRadio: ({ description, error, label, name, options, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
 //# sourceMappingURL=NumberFieldRadio.d.ts.map

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,kEAQ1B,qBAAqB,sBAiCvB,CAAC"}
+{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAChF,CAAC;AAEF,eAAO,MAAM,gBAAgB,kEAQ1B,qBAAqB,sBAiCvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import { type BaseFieldComponentProps } from '../types.js';
+export type NumberFieldSelectProps<T extends number = number> = Simplify<BaseFieldComponentProps<T> & Extract<NumberFormField<T>, {
+    options: object;
+}>>;
+export declare const NumberFieldSelect: <T extends number = number>({ description, error, label, name, options, setValue, value }: NumberFieldSelectProps<T>) => React.JSX.Element;
+//# sourceMappingURL=NumberFieldSelect.d.ts.map

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CACtE,uBAAuB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC9E,CAAC;AAEF,eAAO,MAAM,iBAAiB,6FAQ3B,uBAAuB,CAAC,CAAC,sBAuB3B,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSelect.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Label } from '../../Label/Label.js';
+import { Select } from '../../Select/Select.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import {} from '../types.js';
+export const NumberFieldSelect = ({ description, error, label, name, options, setValue, value }) => {
+    return (React.createElement(FieldGroup, null,
+        React.createElement(FieldGroup.Row, null,
+            React.createElement(Label, null, label),
+            React.createElement(FieldGroup.Description, { description: description })),
+        React.createElement(Select, { name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseFloat(value)) },
+            React.createElement(Select.Trigger, { "data-cy": `${name}-select-trigger`, "data-testid": `${name}-select-trigger` },
+                React.createElement(Select.Value, null)),
+            React.createElement(Select.Content, { "data-cy": `${name}-select-content`, "data-testid": `${name}-select-content` }, Object.keys(options).map((option) => (React.createElement(Select.Item, { key: option, value: option }, options[option]))))),
+        React.createElement(FieldGroup.Error, { error: error })));
+};

package/dist/hooks/useDownload.d.ts

@@ -1,13 +1,20 @@
 import type { Promisable } from 'type-fest';
-type DownloadOptions<T extends Blob | string = Blob | string> = T extends Blob ? {
-    blobType: 'image/png';
-} : {
+type DownloadTextOptions = {
     blobType: 'text/csv' | 'text/plain';
 };
+type DownloadBlobOptions = {
+    blobType: 'application/zip' | 'image/jpeg' | 'image/png' | 'image/webp';
+};
+interface DownloadFunction {
+    (filename: string, data: Blob, options: DownloadBlobOptions): Promise<void>;
+    (filename: string, data: () => Promisable<Blob>, options: DownloadBlobOptions): Promise<void>;
+    (filename: string, data: string, options?: DownloadTextOptions): Promise<void>;
+    (filename: string, data: () => Promisable<string>, options?: DownloadTextOptions): Promise<void>;
+}
 /**
  * Used to trigger downloads of arbitrary data to the client
  * @returns A function to invoke the download
  */
-export declare function useDownload(): <T extends string | Blob>(filename: string, fetchData: () => Promisable<T>, options?: DownloadOptions<T>) => Promise<void>;
+export declare function useDownload(): DownloadFunction;
 export {};
 //# sourceMappingURL=useDownload.d.ts.map

package/dist/hooks/useDownload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDownload.d.ts","sourceRoot":"","sources":["../../src/hooks/useDownload.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAI5C,KAAK,eAAe,CAAC,CAAC,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,IAAI,GAC1E;IAAE,QAAQ,EAAE,WAAW,CAAA;CAAE,GACzB;IAAE,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAA;CAAE,CAAC;AAE5C;;;GAGG;AACH,wBAAgB,WAAW,wCA2Bb,MAAM,aACL,MAAM,WAAW,CAAC,CAAC,YACpB,gBAAgB,CAAC,CAAC,mBAiB/B"}
+{"version":3,"file":"useDownload.d.ts","sourceRoot":"","sources":["../../src/hooks/useDownload.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAI5C,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAC;CACrC,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,iBAAiB,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;CACzE,CAAC;AAGF,UAAU,gBAAgB;IACxB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9F,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAClG;AAED;;;GAGG;AACH,wBAAgB,WAAW,IAAI,gBAAgB,CA0C9C"}

package/dist/hooks/useDownload.js

@@ -22,9 +22,9 @@ export function useDownload() {
             setState(null);
         }
     }, [state]);
-    return async (filename, fetchData, options) => {
+    return async (filename, _data, options) => {
         try {
-            const data = await fetchData();
+            const data = typeof _data === 'function' ? await _data() : _data;
             if (typeof data !== 'string' && !options?.blobType) {
                 throw new Error("argument 'blobType' must be defined when download is called with a Blob object");
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.0.9",
+  "version": "2.2.0",
   "packageManager": "pnpm@8.15.3",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.6.8",
+    "@douglasneuroinformatics/libui-form-types": "^0.7.0",
     "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.1.3",

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

@@ -4,6 +4,7 @@ import { match } from 'ts-pattern';
 
 import { NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput.js';
 import { NumberFieldRadio, type NumberFieldRadioProps } from './NumberFieldRadio.js';
+import { NumberFieldSelect } from './NumberFieldSelect.js';
 import { NumberFieldSlider, type NumberFieldSliderProps } from './NumberFieldSlider.js';
 
 export type NumberFieldProps = NumberFieldInputProps | NumberFieldRadioProps | NumberFieldSliderProps;
@@ -13,5 +14,6 @@ export const NumberField = (props: NumberFieldProps) => {
     .with({ variant: 'input' }, (props) => <NumberFieldInput {...props} />)
     .with({ variant: 'slider' }, (props) => <NumberFieldSlider {...props} />)
     .with({ variant: 'radio' }, (props) => <NumberFieldRadio {...props} />)
+    .with({ variant: 'select' }, (props) => <NumberFieldSelect {...props} />)
     .exhaustive();
 };

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

@@ -11,7 +11,7 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 import type { BaseFieldComponentProps } from '../types.js';
 
 export type NumberFieldRadioProps = Simplify<
-  BaseFieldComponentProps<number> & Extract<NumberFormField, { variant: 'radio' }>
+  BaseFieldComponentProps<number> & Extract<NumberFormField, { options: object }>
 >;
 
 export const NumberFieldRadio = ({

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Label } from '../../Label/Label.js';
+import { Select } from '../../Select/Select.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import { type BaseFieldComponentProps } from '../types.js';
+
+export type NumberFieldSelectProps<T extends number = number> = Simplify<
+  BaseFieldComponentProps<T> & Extract<NumberFormField<T>, { options: object }>
+>;
+
+export const NumberFieldSelect = <T extends number = number>({
+  description,
+  error,
+  label,
+  name,
+  options,
+  setValue,
+  value
+}: NumberFieldSelectProps<T>) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <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`}>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content data-cy={`${name}-select-content`} data-testid={`${name}-select-content`}>
+          {Object.keys(options).map((option) => (
+            <Select.Item key={option} value={option}>
+              {/** option needs to be type number, but no sense converting it when it is coerced right back anyways */}
+              {options[option as any as T]}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/hooks/useDownload.ts

@@ -4,18 +4,30 @@ import type { Promisable } from 'type-fest';
 
 import { useNotificationsStore } from './useNotificationsStore.js';
 
-type DownloadOptions<T extends Blob | string = Blob | string> = T extends Blob
-  ? { blobType: 'image/png' }
-  : { blobType: 'text/csv' | 'text/plain' };
+type DownloadTextOptions = {
+  blobType: 'text/csv' | 'text/plain';
+};
+
+type DownloadBlobOptions = {
+  blobType: 'application/zip' | 'image/jpeg' | 'image/png' | 'image/webp';
+};
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+interface DownloadFunction {
+  (filename: string, data: Blob, options: DownloadBlobOptions): Promise<void>;
+  (filename: string, data: () => Promisable<Blob>, options: DownloadBlobOptions): Promise<void>;
+  (filename: string, data: string, options?: DownloadTextOptions): Promise<void>;
+  (filename: string, data: () => Promisable<string>, options?: DownloadTextOptions): Promise<void>;
+}
 
 /**
  * Used to trigger downloads of arbitrary data to the client
  * @returns A function to invoke the download
  */
-export function useDownload() {
+export function useDownload(): DownloadFunction {
   const notifications = useNotificationsStore();
   const [state, setState] = useState<{
-    blobType: DownloadOptions['blobType'];
+    blobType: string;
     data: Blob | string;
     filename: string;
   } | null>(null);
@@ -38,13 +50,9 @@ export function useDownload() {
     }
   }, [state]);
 
-  return async <T extends Blob | string>(
-    filename: string,
-    fetchData: () => Promisable<T>,
-    options?: DownloadOptions<T>
-  ) => {
+  return async (filename, _data, options) => {
     try {
-      const data = await fetchData();
+      const data = typeof _data === 'function' ? await _data() : _data;
       if (typeof data !== 'string' && !options?.blobType) {
         throw new Error("argument 'blobType' must be defined when download is called with a Blob object");
       }