@douglasneuroinformatics/libui 2.8.1 → 2.9.0

package/dist/components/Form/StringField/StringFieldInput.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { BaseFieldComponentProps } from '../types.js';
-export type StringFieldInputProps = BaseFieldComponentProps<string> & StringFormField;
-export declare const StringFieldInput: ({ description, error, label, name, readOnly, setValue, value }: StringFieldInputProps) => React.JSX.Element;
+export type StringFieldInputProps = BaseFieldComponentProps<string> & Extract<StringFormField, {
+    variant: 'input' | 'textarea';
+}>;
+export declare const StringFieldInput: ({ description, error, label, name, placeholder, readOnly, setValue, value }: StringFieldInputProps) => React.JSX.Element;
 //# sourceMappingURL=StringFieldInput.d.ts.map

package/dist/components/Form/StringField/StringFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringFieldInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAMjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AAEtF,eAAO,MAAM,gBAAgB,mEAQ1B,qBAAqB,sBAkBvB,CAAC"}
+{"version":3,"file":"StringFieldInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAMjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GACjE,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,GAAG,UAAU,CAAA;CAAE,CAAC,CAAC;AAE9D,eAAO,MAAM,gBAAgB,gFAS1B,qBAAqB,sBAmBvB,CAAC"}

package/dist/components/Form/StringField/StringFieldInput.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { Input } from '../../Input/Input.js';
 import { Label } from '../../Label/Label.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-export const StringFieldInput = ({ description, error, label, name, readOnly, setValue, value }) => {
+export const StringFieldInput = ({ description, error, label, name, placeholder, readOnly, setValue, value }) => {
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, { htmlFor: name }, label),
             React.createElement(FieldGroup.Description, { description: description })),
-        React.createElement(Input, { disabled: readOnly, id: name, name: name, type: "text", value: value ?? '', onChange: (event) => setValue(event.target.value) }),
+        React.createElement(Input, { disabled: readOnly, id: name, name: name, placeholder: placeholder, type: "text", value: value ?? '', onChange: (event) => setValue(event.target.value) }),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/StringField/StringFieldTextArea.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
 import type { BaseFieldComponentProps } from '../types.js';
-export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & StringFormField;
-export declare const StringFieldTextArea: ({ description, error, label, name, readOnly, setValue, value }: StringFieldTextAreaProps) => React.JSX.Element;
+export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & Extract<StringFormField, {
+    variant: 'input' | 'textarea';
+}>;
+export declare const StringFieldTextArea: ({ description, error, label, name, placeholder, readOnly, setValue, value }: StringFieldTextAreaProps) => React.JSX.Element;
 //# sourceMappingURL=StringFieldTextArea.d.ts.map

package/dist/components/Form/StringField/StringFieldTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringFieldTextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAMjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AAEzF,eAAO,MAAM,mBAAmB,mEAQ7B,wBAAwB,sBAkB1B,CAAC"}
+{"version":3,"file":"StringFieldTextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/StringField/StringFieldTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAMjF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,MAAM,CAAC,GACpE,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,GAAG,UAAU,CAAA;CAAE,CAAC,CAAC;AAE9D,eAAO,MAAM,mBAAmB,gFAS7B,wBAAwB,sBAmB1B,CAAC"}

package/dist/components/Form/StringField/StringFieldTextArea.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { Label } from '../../Label/Label.js';
 import { TextArea } from '../../TextArea/TextArea.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-export const StringFieldTextArea = ({ description, error, label, name, readOnly, setValue, value }) => {
+export const StringFieldTextArea = ({ description, error, label, name, placeholder, readOnly, setValue, value }) => {
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, { htmlFor: name }, label),
             React.createElement(FieldGroup.Description, { description: description })),
-        React.createElement(TextArea, { disabled: readOnly, id: name, name: name, rows: 5, value: value ?? '', onChange: (event) => setValue(event.target.value) }),
+        React.createElement(TextArea, { disabled: readOnly, id: name, name: name, placeholder: placeholder, rows: 5, value: value ?? '', onChange: (event) => setValue(event.target.value) }),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Input/Input.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { cn } from '../../utils.js';
 export const Input = React.forwardRef(function Input({ className, type, ...props }, ref) {
-    return (React.createElement("input", { autoComplete: "off", className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), "data-testid": "input", ref: ref, type: type, ...props }));
+    return (React.createElement("input", { autoComplete: "off", className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), "data-testid": "input", ref: ref, type: type, ...props }));
 });

package/dist/components/TextArea/TextArea.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { cn } from '../../utils.js';
 export const TextArea = React.forwardRef(function TextArea({ className, ...props }, ref) {
-    return (React.createElement("textarea", { autoComplete: "off", className: cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), "data-testid": "text-area", ref: ref, ...props }));
+    return (React.createElement("textarea", { autoComplete: "off", className: cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), "data-testid": "text-area", ref: ref, ...props }));
 });

package/dist/styles/globals.css

@@ -70,6 +70,7 @@
 @layer base {
   * {
     @apply border-border;
+    scrollbar-width: thin;
   }
   body {
     @apply bg-background text-foreground;

package/dist/testing/mocks.js

@@ -31,7 +31,7 @@ export const mockStorage = (name) => {
             this.store = {};
         }
         getItem(key) {
-            return this.store[key] || null;
+            return this.store[key] ?? null;
         }
         removeItem(key) {
             delete this.store[key];

package/package.json

@@ -1,18 +1,15 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "packageManager": "pnpm@9.3.0",
-  "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
-  "author": {
-    "name": "Douglas Neuroinformatics",
-    "email": "support@douglasneuroinformatics.ca"
-  },
+  "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
+  "author": "Joshua Unrau",
   "license": "Apache-2.0",
   "homepage": "https://github.com/DouglasNeuroInformatics/libui#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/DouglasNeuroInformatics/libui"
+    "url": "https://github.com/DouglasNeuroInformatics/libui"
   },
   "bugs": {
     "url": "https://github.com/DouglasNeuroInformatics/libui/issues"
@@ -67,7 +64,7 @@
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.9.0",
+    "@douglasneuroinformatics/libui-form-types": "^0.10.0",
     "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -116,11 +113,10 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@commitlint/types": "^19.0.3",
     "@douglasneuroinformatics/eslint-config": "^4.2.2",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.1",
+    "@douglasneuroinformatics/prettier-config": "^0.0.1",
+    "@douglasneuroinformatics/semantic-release": "^0.0.1",
+    "@douglasneuroinformatics/tsconfig": "^1.0.1",
     "@storybook/addon-essentials": "^8.1.6",
     "@storybook/addon-interactions": "^8.1.6",
     "@storybook/addon-links": "^8.1.6",
@@ -147,9 +143,8 @@
     "husky": "^9.0.11",
     "jsdom": "24.1.0",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.1",
+    "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.2",
-    "semantic-release": "^23.0.8",
     "sort-json": "^2.0.1",
     "storybook": "^8.1.6",
     "storybook-react-i18next": "^3.1.1",
@@ -157,5 +152,15 @@
     "typescript": "~5.4.5",
     "vite": "5.2.13",
     "vitest": "^1.6.0"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release": {
+    "extends": [
+      "@douglasneuroinformatics/semantic-release"
+    ]
   }
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -72,7 +72,7 @@ export const DatePicker = React.forwardRef<React.ElementRef<typeof Card>, DatePi
   // the duration is doubled because presumably it is to mount old and mount new
   const [canSetMonth, setCanSetMonth] = useState(true);
 
-  const monthName = t(`months.${MONTHS[date.getMonth()]}`);
+  const monthName = t(`months.${MONTHS[date.getMonth()]!}`);
 
   const handleYearSelection = (date: Date) => {
     dispatch({ type: 'set-year', value: date.getFullYear() });

package/src/components/Form/FieldsComponent.tsx

@@ -19,7 +19,7 @@ export type FieldsComponentProps<T extends FormDataType> = {
 /** Renders an object containing key value pairs, where the value is a FormField of some kind */
 export const FieldsComponent = <T extends FormDataType>({ fields, ...props }: FieldsComponentProps<T>) => {
   return Object.keys(fields).map((name) => {
-    const field = fields[name];
+    const field = fields[name]!;
     if (field.kind === 'dynamic') {
       return <DynamicField {...props} field={field} key={name} name={name} />;
     }

package/src/components/Form/Form.stories.tsx

@@ -160,6 +160,7 @@ const stringFields: FormFields<
   },
   stringTextArea: {
     kind: 'string',
+    placeholder: 'This is a text area...',
     label: 'Text Area',
     variant: 'textarea'
   },
@@ -175,6 +176,7 @@ const stringFields: FormFields<
     description: 'This is a string field',
     kind: 'string',
     label: 'Input',
+    placeholder: 'This in an input field...',
     variant: 'input'
   },
   stringRadio: {

package/src/components/Form/NumberRecordField.tsx

@@ -41,7 +41,7 @@ export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecor
       </Heading>
       <div className="space-y-6">
         {Object.keys(items).map((name) => {
-          const item = items[name];
+          const item = items[name]!;
           return (
             <NumberField
               error={recordError?.[name]}

package/src/components/Form/RecordArrayField.tsx

@@ -73,12 +73,12 @@ export const RecordArrayField = memo(function RecordArrayField({
                     if (!newArrayError[i]) {
                       newArrayError[i] = {};
                     }
-                    newArrayError[i][name] = error;
+                    newArrayError[i]![name] = error;
                     setArrayError(newArrayError);
                   }}
                   setValue={(value) => {
                     const newArrayValue = [...arrayValue];
-                    newArrayValue[i][name] = value;
+                    newArrayValue[i]![name] = value;
                     setArrayValue(newArrayValue);
                   }}
                   value={arrayValue?.[i]?.[name]}

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

@@ -40,6 +40,7 @@ export const TextArea: Story = {
             description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
             label: 'Text Area',
             name: 'text',
+            placeholder: 'This is a text area...',
             setValue,
             value,
             variant: 'textarea'

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

@@ -8,13 +8,15 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 
 import type { BaseFieldComponentProps } from '../types.js';
 
-export type StringFieldInputProps = BaseFieldComponentProps<string> & StringFormField;
+export type StringFieldInputProps = BaseFieldComponentProps<string> &
+  Extract<StringFormField, { variant: 'input' | 'textarea' }>;
 
 export const StringFieldInput = ({
   description,
   error,
   label,
   name,
+  placeholder,
   readOnly,
   setValue,
   value
@@ -29,6 +31,7 @@ export const StringFieldInput = ({
         disabled={readOnly}
         id={name}
         name={name}
+        placeholder={placeholder}
         type="text"
         value={value ?? ''}
         onChange={(event) => setValue(event.target.value)}

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

@@ -8,13 +8,15 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 
 import type { BaseFieldComponentProps } from '../types.js';
 
-export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & StringFormField;
+export type StringFieldTextAreaProps = BaseFieldComponentProps<string> &
+  Extract<StringFormField, { variant: 'input' | 'textarea' }>;
 
 export const StringFieldTextArea = ({
   description,
   error,
   label,
   name,
+  placeholder,
   readOnly,
   setValue,
   value
@@ -29,6 +31,7 @@ export const StringFieldTextArea = ({
         disabled={readOnly}
         id={name}
         name={name}
+        placeholder={placeholder}
         rows={5}
         value={value ?? ''}
         onChange={(event) => setValue(event.target.value)}

package/src/components/Form/utils.ts

@@ -28,7 +28,7 @@ export function getFormFields<T extends FormDataType>(content: FormContent<T>):
   if (!Array.isArray(content)) {
     return content;
   }
-  return content.reduce((prev, current) => ({ ...prev, ...current.fields }), content[0].fields) as FormFields<T>;
+  return content.reduce((prev, current) => ({ ...prev, ...current.fields }), content[0]!.fields) as FormFields<T>;
 }
 
 /**

package/src/components/Input/Input.tsx

@@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Inp
     <input
       autoComplete="off"
       className={cn(
-        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       data-testid="input"

package/src/components/TextArea/TextArea.tsx

@@ -12,7 +12,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(fun
     <textarea
       autoComplete="off"
       className={cn(
-        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       data-testid="text-area"

package/src/hooks/useNotificationsStore.test.ts

@@ -23,7 +23,7 @@ describe('useNotificationsStore', () => {
     expect(result.current.notifications.length).toBe(1);
     expect(result.current.notifications[0]).toMatchObject({ message: 'test' });
     act(() => {
-      result.current.dismissNotification(result.current.notifications[0].id);
+      result.current.dismissNotification(result.current.notifications[0]!.id);
     });
     expect(result.current.notifications.length).toBe(0);
   });

package/src/i18n.ts

@@ -69,8 +69,8 @@ i18n.addPreInitTranslations = function (this, translations) {
     return;
   }
   const resources = createResources(translations);
-  Object.assign(this.options.resources.en, resources.en);
-  Object.assign(this.options.resources.fr, resources.fr);
+  Object.assign(this.options.resources.en!, resources.en);
+  Object.assign(this.options.resources.fr!, resources.fr);
 };
 
 i18n.use(initReactI18next).use(LanguageDetector);

package/src/styles/globals.css

@@ -70,6 +70,7 @@
 @layer base {
   * {
     @apply border-border;
+    scrollbar-width: thin;
   }
   body {
     @apply bg-background text-foreground;

package/src/testing/mocks.ts

@@ -35,7 +35,7 @@ export const mockStorage = (name: 'localStorage' | 'sessionStorage'): void => {
     }
 
     getItem(key: string) {
-      return this.store[key] || null;
+      return this.store[key] ?? null;
     }
 
     removeItem(key: string) {