@worknice/whiteboard 0.8.4-rc.4 → 0.9.0-rc.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 (7) hide show
  1. package/dist/fields/MultipleFileField.d.ts +11 -4
  2. package/dist/fields/MultipleFileField.js +7 -2
  3. package/dist/inputs/FileSlotInput.d.ts +7 -0
  4. package/dist/inputs/FileSlotInput.js +28 -0
  5. package/dist/inputs/MultipleFileInput.d.ts +9 -4
  6. package/dist/inputs/MultipleFileInput.js +55 -9
  7. package/package.json +2 -2
package/dist/fields/MultipleFileField.d.ts CHANGED
@@ -1,12 +1,19 @@
1
- import type { ComponentProps, ReactNode } from "react";
1
+ import type { ReactNode } from "react";
2
2
  import type { ValidationError } from "../forms/_types";
3
- import MultipleFileInput from "../inputs/MultipleFileInput";
4
- type Props = ComponentProps<typeof MultipleFileInput> & {
3
+ type Props<FileInput> = {
5
4
  description?: ReactNode;
6
5
  errors?: Array<ValidationError>;
7
6
  label: ReactNode;
8
7
  labelFont?: "heading" | "subheading" | "label" | "regular-bold" | "regular";
9
8
  required?: boolean;
9
+ id: string;
10
+ disabled?: boolean;
11
+ onChange: (files: FileInput[]) => void;
12
+ files: FileInput[];
13
+ fileToId: (file: FileInput) => string;
14
+ fileToName: (file: FileInput) => string | null;
15
+ fileFromName: (file: FileInput, name: string | null) => FileInput;
16
+ fileFromRaw: (file: File) => FileInput;
10
17
  };
11
- declare const MultipleFileField: ({ description, disabled, errors, id, label, labelFont, onChange, required, }: Props) => import("react/jsx-runtime").JSX.Element;
18
+ declare const MultipleFileField: <FileInput>({ description, disabled, errors, id, label, labelFont, onChange, required, files, fileToId, fileToName, fileFromRaw, fileFromName, }: Props<FileInput>) => import("react/jsx-runtime").JSX.Element;
12
19
  export default MultipleFileField;
package/dist/fields/MultipleFileField.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
2
  import * as __WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__ from "../forms/RegularField.js";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE__inputs_MultipleFileInput_js_cf4710b4__ from "../inputs/MultipleFileInput.js";
4
- const MultipleFileField = ({ description, disabled = false, errors, id, label, labelFont = "label", onChange, required = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
4
+ const MultipleFileField = ({ description, disabled = false, errors, id, label, labelFont = "label", onChange, required = false, files, fileToId, fileToName, fileFromRaw, fileFromName })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_RegularField_js_c54537ba__["default"], {
5
5
  description: description,
6
6
  errors: errors,
7
7
  inputId: id,
@@ -10,8 +10,13 @@ const MultipleFileField = ({ description, disabled = false, errors, id, label, l
10
10
  required: required,
11
11
  children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_MultipleFileInput_js_cf4710b4__["default"], {
12
12
  id: id,
13
+ disabled: disabled,
13
14
  onChange: onChange,
14
- disabled: disabled
15
+ files: files,
16
+ fileToId: fileToId,
17
+ fileToName: fileToName,
18
+ fileFromRaw: fileFromRaw,
19
+ fileFromName: fileFromName
15
20
  })
16
21
  });
17
22
  const MultipleFileField_rslib_entry_ = MultipleFileField;
package/dist/inputs/FileSlotInput.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ type Props = {
2
+ name: string | null;
3
+ onNameChange: (name: string | null) => void;
4
+ onRemove: () => void;
5
+ };
6
+ declare const FileSlotInput: ({ name, onNameChange, onRemove }: Props) => import("react/jsx-runtime").JSX.Element;
7
+ export default FileSlotInput;
package/dist/inputs/FileSlotInput.js ADDED
@@ -0,0 +1,28 @@
1
+ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
+ import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
3
+ import * as __WEBPACK_EXTERNAL_MODULE__StringInput_js_3cb68a8a__ from "./StringInput.js";
4
+ import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
5
+ const FileSlotInput = ({ name, onNameChange, onRemove })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
6
+ style: {
7
+ display: "grid",
8
+ gridTemplateColumns: "1fr max-content",
9
+ gap: "var(--size-n2)"
10
+ },
11
+ children: [
12
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__StringInput_js_3cb68a8a__["default"], {
13
+ value: name,
14
+ onChange: (value)=>{
15
+ onNameChange(value);
16
+ }
17
+ }),
18
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
19
+ icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
20
+ symbol: "Delete"
21
+ }),
22
+ type: "secondary",
23
+ onClick: onRemove
24
+ })
25
+ ]
26
+ });
27
+ const FileSlotInput_rslib_entry_ = FileSlotInput;
28
+ export { FileSlotInput_rslib_entry_ as default };
package/dist/inputs/MultipleFileInput.d.ts CHANGED
@@ -1,7 +1,12 @@
1
- type Props = {
2
- id?: string;
3
- onChange: (value: FileList | null) => void;
1
+ type Props<FileInput> = {
2
+ id: string;
4
3
  disabled?: boolean;
4
+ onChange: (files: FileInput[]) => void;
5
+ files: FileInput[];
6
+ fileToId: (file: FileInput) => string;
7
+ fileToName: (file: FileInput) => string | null;
8
+ fileFromName: (file: FileInput, name: string | null) => FileInput;
9
+ fileFromRaw: (file: File) => FileInput;
5
10
  };
6
- declare const MultipleFileInput: ({ id, onChange, disabled }: Props) => import("react/jsx-runtime").JSX.Element;
11
+ declare const MultipleFileInput: <FileInput>({ id, disabled, onChange, files, fileToId, fileToName, fileFromRaw, fileFromName, }: Props<FileInput>) => import("react/jsx-runtime").JSX.Element;
7
12
  export default MultipleFileInput;
package/dist/inputs/MultipleFileInput.js CHANGED
@@ -1,13 +1,59 @@
1
1
  import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
- const MultipleFileInput = ({ id, onChange, disabled })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
3
- id: id,
4
- type: "file",
5
- onChange: (event)=>{
6
- const files = event.target?.files;
7
- onChange(files ? files : null);
8
- },
9
- disabled: disabled,
10
- multiple: true
2
+ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
3
+ import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
4
+ import * as __WEBPACK_EXTERNAL_MODULE__presentation_VStack_js_fd392b79__ from "../presentation/VStack.js";
5
+ import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
6
+ import * as __WEBPACK_EXTERNAL_MODULE__FileSlotInput_js_bbb0a7e5__ from "./FileSlotInput.js";
7
+ const MultipleFileInput = ({ id, disabled, onChange, files = [], fileToId, fileToName, fileFromRaw, fileFromName })=>{
8
+ const fileInputRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
9
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__presentation_VStack_js_fd392b79__["default"], {
10
+ spacing: "n2",
11
+ justifyItems: "start",
12
+ children: [
13
+ files.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_VStack_js_fd392b79__["default"], {
14
+ spacing: "n2",
15
+ children: files.map((f)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__FileSlotInput_js_bbb0a7e5__["default"], {
16
+ name: fileToName(f),
17
+ onNameChange: (name)=>{
18
+ onChange(files.map((file)=>fileToId(file) === fileToId(f) ? fileFromName(f, name) : file));
19
+ },
20
+ onRemove: ()=>{
21
+ onChange(files.filter((file)=>fileToId(file) !== fileToId(f)));
22
+ }
23
+ }, fileToId(f)))
24
+ }) : null,
25
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
26
+ icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
27
+ symbol: "Plus"
28
+ }),
29
+ type: "secondary",
30
+ disabled: disabled,
31
+ onClick: ()=>{
32
+ fileInputRef.current?.click();
33
+ },
34
+ children: "Add files"
35
+ }),
36
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
37
+ style: {
38
+ display: "none"
39
+ },
40
+ id: id,
41
+ ref: fileInputRef,
42
+ type: "file",
43
+ onChange: (event)=>{
44
+ const fileList = event.target.files;
45
+ if (!fileList) return;
46
+ onChange([
47
+ ...files,
48
+ ...Array.from(fileList).map(fileFromRaw)
49
+ ]);
50
+ fileInputRef.current.value = "";
51
+ },
52
+ disabled: disabled,
53
+ multiple: true
54
+ })
55
+ ]
11
56
  });
57
+ };
12
58
  const MultipleFileInput_rslib_entry_ = MultipleFileInput;
13
59
  export { MultipleFileInput_rslib_entry_ as default };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@worknice/whiteboard",
3
3
  "description": "",
4
- "version": "0.8.4-rc.4",
4
+ "version": "0.9.0-rc.1",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "files": [
@@ -38,7 +38,7 @@
38
38
  "react-markdown": "^10.1.0",
39
39
  "utf8": "^3.0.0",
40
40
  "zod": "^3.22.3",
41
- "@worknice/utils": "^0.4.4-rc.5"
41
+ "@worknice/utils": "^0.4.4-rc.7"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@anolilab/semantic-release-pnpm": "^1.1.10",