@douglasneuroinformatics/libui 2.8.2 → 2.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/Form/StringField/StringFieldInput.d.ts +4 -2
  2. package/dist/components/Form/StringField/StringFieldInput.d.ts.map +1 -1
  3. package/dist/components/Form/StringField/StringFieldInput.js +2 -2
  4. package/dist/components/Form/StringField/StringFieldTextArea.d.ts +4 -2
  5. package/dist/components/Form/StringField/StringFieldTextArea.d.ts.map +1 -1
  6. package/dist/components/Form/StringField/StringFieldTextArea.js +2 -2
  7. package/dist/components/Input/Input.js +1 -1
  8. package/dist/components/TextArea/TextArea.js +1 -1
  9. package/dist/douglasneuroinformatics-libui-2.9.1.tgz +0 -0
  10. package/package.json +3 -3
  11. package/src/components/Form/Form.stories.tsx +2 -0
  12. package/src/components/Form/StringField/StringField.stories.tsx +1 -0
  13. package/src/components/Form/StringField/StringFieldInput.tsx +4 -1
  14. package/src/components/Form/StringField/StringFieldTextArea.tsx +4 -1
  15. package/src/components/Input/Input.tsx +1 -1
  16. package/src/components/TextArea/TextArea.tsx +1 -1
  17. package/dist/douglasneuroinformatics-libui-2.8.2.tgz +0 -0
package/dist/components/Form/StringField/StringFieldInput.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
3
3
  import type { BaseFieldComponentProps } from '../types.js';
4
- export type StringFieldInputProps = BaseFieldComponentProps<string> & StringFormField;
5
- export declare const StringFieldInput: ({ description, error, label, name, readOnly, setValue, value }: StringFieldInputProps) => React.JSX.Element;
4
+ export type StringFieldInputProps = BaseFieldComponentProps<string> & Extract<StringFormField, {
5
+ variant: 'input' | 'textarea';
6
+ }>;
7
+ export declare const StringFieldInput: ({ description, error, label, name, placeholder, readOnly, setValue, value }: StringFieldInputProps) => React.JSX.Element;
6
8
  //# sourceMappingURL=StringFieldInput.d.ts.map
package/dist/components/Form/StringField/StringFieldInput.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -2,11 +2,11 @@ import React from 'react';
2
2
  import { Input } from '../../Input/Input.js';
3
3
  import { Label } from '../../Label/Label.js';
4
4
  import { FieldGroup } from '../FieldGroup/FieldGroup.js';
5
- export const StringFieldInput = ({ description, error, label, name, readOnly, setValue, value }) => {
5
+ export const StringFieldInput = ({ description, error, label, name, placeholder, readOnly, setValue, value }) => {
6
6
  return (React.createElement(FieldGroup, null,
7
7
  React.createElement(FieldGroup.Row, null,
8
8
  React.createElement(Label, { htmlFor: name }, label),
9
9
  React.createElement(FieldGroup.Description, { description: description })),
10
- React.createElement(Input, { disabled: readOnly, id: name, name: name, type: "text", value: value ?? '', onChange: (event) => setValue(event.target.value) }),
10
+ React.createElement(Input, { disabled: readOnly, id: name, name: name, placeholder: placeholder, type: "text", value: value ?? '', onChange: (event) => setValue(event.target.value) }),
11
11
  React.createElement(FieldGroup.Error, { error: error })));
12
12
  };
package/dist/components/Form/StringField/StringFieldTextArea.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { StringFormField } from '@douglasneuroinformatics/libui-form-types';
3
3
  import type { BaseFieldComponentProps } from '../types.js';
4
- export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & StringFormField;
5
- export declare const StringFieldTextArea: ({ description, error, label, name, readOnly, setValue, value }: StringFieldTextAreaProps) => React.JSX.Element;
4
+ export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & Extract<StringFormField, {
5
+ variant: 'input' | 'textarea';
6
+ }>;
7
+ export declare const StringFieldTextArea: ({ description, error, label, name, placeholder, readOnly, setValue, value }: StringFieldTextAreaProps) => React.JSX.Element;
6
8
  //# sourceMappingURL=StringFieldTextArea.d.ts.map
package/dist/components/Form/StringField/StringFieldTextArea.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -2,11 +2,11 @@ import React from 'react';
2
2
  import { Label } from '../../Label/Label.js';
3
3
  import { TextArea } from '../../TextArea/TextArea.js';
4
4
  import { FieldGroup } from '../FieldGroup/FieldGroup.js';
5
- export const StringFieldTextArea = ({ description, error, label, name, readOnly, setValue, value }) => {
5
+ export const StringFieldTextArea = ({ description, error, label, name, placeholder, readOnly, setValue, value }) => {
6
6
  return (React.createElement(FieldGroup, null,
7
7
  React.createElement(FieldGroup.Row, null,
8
8
  React.createElement(Label, { htmlFor: name }, label),
9
9
  React.createElement(FieldGroup.Description, { description: description })),
10
- React.createElement(TextArea, { disabled: readOnly, id: name, name: name, rows: 5, value: value ?? '', onChange: (event) => setValue(event.target.value) }),
10
+ React.createElement(TextArea, { disabled: readOnly, id: name, name: name, placeholder: placeholder, rows: 5, value: value ?? '', onChange: (event) => setValue(event.target.value) }),
11
11
  React.createElement(FieldGroup.Error, { error: error })));
12
12
  };
package/dist/components/Input/Input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { cn } from '../../utils.js';
3
3
  export const Input = React.forwardRef(function Input({ className, type, ...props }, ref) {
4
- 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 }));
4
+ 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 }));
5
5
  });
package/dist/components/TextArea/TextArea.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { cn } from '../../utils.js';
3
3
  export const TextArea = React.forwardRef(function TextArea({ className, ...props }, ref) {
4
- 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 }));
4
+ 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 }));
5
5
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@douglasneuroinformatics/libui",
3
3
  "type": "module",
4
- "version": "2.8.2",
4
+ "version": "2.9.1",
5
5
  "packageManager": "pnpm@9.3.0",
6
6
  "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
7
7
  "author": "Joshua Unrau",
@@ -64,7 +64,7 @@
64
64
  },
65
65
  "dependencies": {
66
66
  "@douglasneuroinformatics/libjs": "^0.3.1",
67
- "@douglasneuroinformatics/libui-form-types": "^0.9.0",
67
+ "@douglasneuroinformatics/libui-form-types": "^0.10.0",
68
68
  "@headlessui/tailwindcss": "^0.2.1",
69
69
  "@heroicons/react": "^2.1.3",
70
70
  "@radix-ui/react-accordion": "^1.1.2",
@@ -107,7 +107,7 @@
107
107
  "ts-pattern": "^5.1.2",
108
108
  "type-fest": "^4.20.0",
109
109
  "vaul": "^0.9.1",
110
- "zod": "^3.23.8",
110
+ "zod": "^3.23.6",
111
111
  "zustand": "^4.5.2"
112
112
  },
113
113
  "devDependencies": {
package/src/components/Form/Form.stories.tsx CHANGED
@@ -160,6 +160,7 @@ const stringFields: FormFields<
160
160
  },
161
161
  stringTextArea: {
162
162
  kind: 'string',
163
+ placeholder: 'This is a text area...',
163
164
  label: 'Text Area',
164
165
  variant: 'textarea'
165
166
  },
@@ -175,6 +176,7 @@ const stringFields: FormFields<
175
176
  description: 'This is a string field',
176
177
  kind: 'string',
177
178
  label: 'Input',
179
+ placeholder: 'This in an input field...',
178
180
  variant: 'input'
179
181
  },
180
182
  stringRadio: {
package/src/components/Form/StringField/StringField.stories.tsx CHANGED
@@ -40,6 +40,7 @@ export const TextArea: Story = {
40
40
  description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
41
41
  label: 'Text Area',
42
42
  name: 'text',
43
+ placeholder: 'This is a text area...',
43
44
  setValue,
44
45
  value,
45
46
  variant: 'textarea'
package/src/components/Form/StringField/StringFieldInput.tsx CHANGED
@@ -8,13 +8,15 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
8
8
 
9
9
  import type { BaseFieldComponentProps } from '../types.js';
10
10
 
11
- export type StringFieldInputProps = BaseFieldComponentProps<string> & StringFormField;
11
+ export type StringFieldInputProps = BaseFieldComponentProps<string> &
12
+ Extract<StringFormField, { variant: 'input' | 'textarea' }>;
12
13
 
13
14
  export const StringFieldInput = ({
14
15
  description,
15
16
  error,
16
17
  label,
17
18
  name,
19
+ placeholder,
18
20
  readOnly,
19
21
  setValue,
20
22
  value
@@ -29,6 +31,7 @@ export const StringFieldInput = ({
29
31
  disabled={readOnly}
30
32
  id={name}
31
33
  name={name}
34
+ placeholder={placeholder}
32
35
  type="text"
33
36
  value={value ?? ''}
34
37
  onChange={(event) => setValue(event.target.value)}
package/src/components/Form/StringField/StringFieldTextArea.tsx CHANGED
@@ -8,13 +8,15 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.js';
8
8
 
9
9
  import type { BaseFieldComponentProps } from '../types.js';
10
10
 
11
- export type StringFieldTextAreaProps = BaseFieldComponentProps<string> & StringFormField;
11
+ export type StringFieldTextAreaProps = BaseFieldComponentProps<string> &
12
+ Extract<StringFormField, { variant: 'input' | 'textarea' }>;
12
13
 
13
14
  export const StringFieldTextArea = ({
14
15
  description,
15
16
  error,
16
17
  label,
17
18
  name,
19
+ placeholder,
18
20
  readOnly,
19
21
  setValue,
20
22
  value
@@ -29,6 +31,7 @@ export const StringFieldTextArea = ({
29
31
  disabled={readOnly}
30
32
  id={name}
31
33
  name={name}
34
+ placeholder={placeholder}
32
35
  rows={5}
33
36
  value={value ?? ''}
34
37
  onChange={(event) => setValue(event.target.value)}
package/src/components/Input/Input.tsx CHANGED
@@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Inp
9
9
  <input
10
10
  autoComplete="off"
11
11
  className={cn(
12
- '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',
12
+ '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',
13
13
  className
14
14
  )}
15
15
  data-testid="input"
package/src/components/TextArea/TextArea.tsx CHANGED
@@ -12,7 +12,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(fun
12
12
  <textarea
13
13
  autoComplete="off"
14
14
  className={cn(
15
- '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',
15
+ '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',
16
16
  className
17
17
  )}
18
18
  data-testid="text-area"