@douglasneuroinformatics/libui 2.8.2 → 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.8.2",
+  "version": "2.9.0",
   "packageManager": "pnpm@9.3.0",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -64,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",

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/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/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"