@conduction/components 2.0.7 → 2.0.9

package/src/components/editableTableRow/EditableTableRow.js

@@ -1,34 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
-import * as styles from "./EditableTableRow.module.css";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "@gemeente-denhaag/components-react";
-import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
-import { useForm } from "react-hook-form";
-import { InputEmail, InputText } from "../formFields";
-export const EditableTableRow = ({ thead, value, inputType, handleSave, }) => {
-    const [editing, setEditing] = React.useState(false);
-    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing } })] }));
-};
-const RegularTableRow = ({ value, setEditing }) => {
-    const { t } = useTranslation();
-    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: value }), _jsx(TableCell, { children: _jsx("div", { className: styles.editButton, onClick: () => setEditing(true), children: _jsx(Link, { icon: _jsx(EditIcon, {}), iconAlign: "start", children: t("Edit") }) }) })] }));
-};
-const EditingTableRow = ({ value, setEditing, handleSave, inputType, }) => {
-    const { t } = useTranslation();
-    const { register, handleSubmit, formState: { errors }, } = useForm();
-    const onSubmit = (data) => {
-        handleSave(data.value);
-        setEditing(false);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { ...{ inputType, value, register, errors } }), _jsxs("div", { className: styles.editButtonsContainer, children: [_jsx("button", { type: "submit", className: styles.submit, children: _jsx(Link, { icon: _jsx(CheckedIcon, {}), iconAlign: "start", children: t("Save") }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: t("Cancel") }) })] })] }) }), _jsx(TableCell, {})] }));
-};
-const FormField = ({ inputType, value, register, errors }) => {
-    switch (inputType) {
-        case "email":
-            return _jsx(InputEmail, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
-        case "text":
-            return _jsx(InputText, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
-    }
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import * as styles from "./EditableTableRow.module.css";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "@gemeente-denhaag/components-react";
+import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
+import { useForm } from "react-hook-form";
+import { InputEmail, InputText } from "../formFields";
+export const EditableTableRow = ({ thead, value, inputType, handleSave, }) => {
+    const [editing, setEditing] = React.useState(false);
+    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing } })] }));
+};
+const RegularTableRow = ({ value, setEditing }) => {
+    const { t } = useTranslation();
+    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: value }), _jsx(TableCell, { children: _jsx("div", { className: styles.editButton, onClick: () => setEditing(true), children: _jsx(Link, { icon: _jsx(EditIcon, {}), iconAlign: "start", children: t("Edit") }) }) })] }));
+};
+const EditingTableRow = ({ value, setEditing, handleSave, inputType, }) => {
+    const { t } = useTranslation();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    const onSubmit = (data) => {
+        handleSave(data.value);
+        setEditing(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { ...{ inputType, value, register, errors } }), _jsxs("div", { className: styles.editButtonsContainer, children: [_jsx("button", { type: "submit", className: styles.submit, children: _jsx(Link, { icon: _jsx(CheckedIcon, {}), iconAlign: "start", children: t("Save") }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: t("Cancel") }) })] })] }) }), _jsx(TableCell, {})] }));
+};
+const FormField = ({ inputType, value, register, errors }) => {
+    switch (inputType) {
+        case "email":
+            return _jsx(InputEmail, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
+        case "text":
+            return _jsx(InputText, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
+    }
+};

package/src/components/editableTableRow/EditableTableRow.module.css

@@ -1,25 +1,25 @@
-.th {
-  width: 35%;
-}
-
-.cancel {
-  color: var(--skeleton-color-grey-3) !important;
-}
-
-.editButtonsContainer {
-  display: flex;
-  margin-block-start: var(--skeleton-size-xs);
-}
-
-.editButtonsContainer > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.submit {
-  all: unset;
-}
-
-.editButton {
-  display: flex;
-  justify-content: flex-end;
-}
+.th {
+  width: 35%;
+}
+
+.cancel {
+  color: var(--skeleton-color-grey-3) !important;
+}
+
+.editButtonsContainer {
+  display: flex;
+  margin-block-start: var(--skeleton-size-xs);
+}
+
+.editButtonsContainer > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.submit {
+  all: unset;
+}
+
+.editButton {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/editableTableRow/EditableTableRow.tsx

@@ -1,138 +1,138 @@
-import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
-import * as styles from "./EditableTableRow.module.css";
-import * as React from "react";
-import { Link } from "@gemeente-denhaag/components-react";
-import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
-import { FieldValues, useForm, UseFormRegister } from "react-hook-form";
-import { InputEmail, InputText } from "../formFields";
-
-interface InputTypes {
-  inputType: "text" | "email";
-}
-
-interface EditableTableRowProps {
-  thead: string;
-  value: string;
-  saveLabel: string;
-  cancelLabel: string;
-  editLabel: string;
-  handleSave: (value: any) => void;
-}
-
-export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
-  thead,
-  value,
-  inputType,
-  editLabel,
-  cancelLabel,
-  saveLabel,
-  handleSave,
-}) => {
-  const [editing, setEditing] = React.useState<boolean>(false);
-
-  return (
-    <TableRow>
-      <TableHeader className={styles.th}>{thead}</TableHeader>
-
-      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel }} />}
-      {!editing && <RegularTableRow {...{ value, setEditing, editLabel }} />}
-    </TableRow>
-  );
-};
-
-/**
- * Specific rows based on editing (Regular: not editing & Editing: editing)
- */
-
-interface RegularTableRowProps {
-  value: string;
-  editLabel: string;
-  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const RegularTableRow: React.FC<RegularTableRowProps> = ({ value, editLabel, setEditing }) => {
-  return (
-    <>
-      <TableCell>{value}</TableCell>
-
-      <TableCell>
-        <div className={styles.editButton} onClick={() => setEditing(true)}>
-          <Link icon={<EditIcon />} iconAlign="start">
-            {editLabel}
-          </Link>
-        </div>
-      </TableCell>
-    </>
-  );
-};
-
-interface EditingTableRowProps {
-  value: string;
-  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
-  saveLabel: string;
-  cancelLabel: string;
-  handleSave: (value: any) => void;
-}
-
-const EditingTableRow: React.FC<EditingTableRowProps & InputTypes> = ({
-  value,
-  setEditing,
-  handleSave,
-  inputType,
-  saveLabel,
-  cancelLabel,
-}) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
-
-  const onSubmit = (data: any): void => {
-    handleSave(data.value);
-    setEditing(false);
-  };
-
-  return (
-    <>
-      <TableCell>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <FormField {...{ inputType, value, register, errors }} />
-
-          <div className={styles.editButtonsContainer}>
-            <button type="submit" className={styles.submit}>
-              <Link icon={<CheckedIcon />} iconAlign="start">
-                {saveLabel}
-              </Link>
-            </button>
-
-            <div onClick={() => setEditing(false)}>
-              <Link icon={<CloseIcon />} iconAlign="start" className={styles.cancel}>
-                {cancelLabel}
-              </Link>
-            </div>
-          </div>
-        </form>
-      </TableCell>
-
-      <TableCell />
-    </>
-  );
-};
-
-interface FormFieldProps {
-  value: string;
-  register: UseFormRegister<FieldValues>;
-  errors: {
-    [x: string]: any;
-  };
-}
-
-const FormField: React.FC<FormFieldProps & InputTypes> = ({ inputType, value, register, errors }) => {
-  switch (inputType) {
-    case "email":
-      return <InputEmail defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
-    case "text":
-      return <InputText defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
-  }
-};
+import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import * as styles from "./EditableTableRow.module.css";
+import * as React from "react";
+import { Link } from "@gemeente-denhaag/components-react";
+import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
+import { FieldValues, useForm, UseFormRegister } from "react-hook-form";
+import { InputEmail, InputText } from "../formFields";
+
+interface InputTypes {
+  inputType: "text" | "email";
+}
+
+interface EditableTableRowProps {
+  thead: string;
+  value: string;
+  saveLabel: string;
+  cancelLabel: string;
+  editLabel: string;
+  handleSave: (value: any) => void;
+}
+
+export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
+  thead,
+  value,
+  inputType,
+  editLabel,
+  cancelLabel,
+  saveLabel,
+  handleSave,
+}) => {
+  const [editing, setEditing] = React.useState<boolean>(false);
+
+  return (
+    <TableRow>
+      <TableHeader className={styles.th}>{thead}</TableHeader>
+
+      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel }} />}
+      {!editing && <RegularTableRow {...{ value, setEditing, editLabel }} />}
+    </TableRow>
+  );
+};
+
+/**
+ * Specific rows based on editing (Regular: not editing & Editing: editing)
+ */
+
+interface RegularTableRowProps {
+  value: string;
+  editLabel: string;
+  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const RegularTableRow: React.FC<RegularTableRowProps> = ({ value, editLabel, setEditing }) => {
+  return (
+    <>
+      <TableCell>{value}</TableCell>
+
+      <TableCell>
+        <div className={styles.editButton} onClick={() => setEditing(true)}>
+          <Link icon={<EditIcon />} iconAlign="start">
+            {editLabel}
+          </Link>
+        </div>
+      </TableCell>
+    </>
+  );
+};
+
+interface EditingTableRowProps {
+  value: string;
+  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
+  saveLabel: string;
+  cancelLabel: string;
+  handleSave: (value: any) => void;
+}
+
+const EditingTableRow: React.FC<EditingTableRowProps & InputTypes> = ({
+  value,
+  setEditing,
+  handleSave,
+  inputType,
+  saveLabel,
+  cancelLabel,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data: any): void => {
+    handleSave(data.value);
+    setEditing(false);
+  };
+
+  return (
+    <>
+      <TableCell>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <FormField {...{ inputType, value, register, errors }} />
+
+          <div className={styles.editButtonsContainer}>
+            <button type="submit" className={styles.submit}>
+              <Link icon={<CheckedIcon />} iconAlign="start">
+                {saveLabel}
+              </Link>
+            </button>
+
+            <div onClick={() => setEditing(false)}>
+              <Link icon={<CloseIcon />} iconAlign="start" className={styles.cancel}>
+                {cancelLabel}
+              </Link>
+            </div>
+          </div>
+        </form>
+      </TableCell>
+
+      <TableCell />
+    </>
+  );
+};
+
+interface FormFieldProps {
+  value: string;
+  register: UseFormRegister<FieldValues>;
+  errors: {
+    [x: string]: any;
+  };
+}
+
+const FormField: React.FC<FormFieldProps & InputTypes> = ({ inputType, value, register, errors }) => {
+  switch (inputType) {
+    case "email":
+      return <InputEmail defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
+    case "text":
+      return <InputText defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
+  }
+};

package/src/components/formFields/checkbox.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormControlLabel } from "@gemeente-denhaag/components-react";
-export const InputCheckbox = ({ name, validation, register, label, }) => _jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", ...register(name, { ...validation }) }), ...{ label } });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+export const InputCheckbox = ({ name, validation, register, label, }) => _jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", ...register(name, { ...validation }) }), ...{ label } });

package/src/components/formFields/checkbox.tsx

@@ -1,14 +1,21 @@
-import { FormControlLabel } from "@gemeente-denhaag/components-react";
-import { IReactHookFormProps } from "./types";
-
-export interface ICheckboxProps {
-  label: string;
-  name: string;
-}
-
-export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
-  name,
-  validation,
-  register,
-  label,
-}) => <FormControlLabel input={<input type="checkbox" {...register(name, { ...validation })} />} {...{ label }} />;
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+import { IReactHookFormProps } from "./types";
+
+export interface ICheckboxProps {
+  label: string;
+  name: string;
+  defaultChecked?: boolean;
+}
+
+export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
+  name,
+  validation,
+  register,
+  label,
+  defaultChecked,
+}) => (
+  <FormControlLabel
+    input={<input type="checkbox" {...{ defaultChecked }} {...register(name, { ...validation })} />}
+    {...{ label }}
+  />
+);

package/src/components/formFields/createKeyValue/CreateKeyValue.module.css

@@ -0,0 +1,43 @@
+:root {
+  --conduction-create-key-value-table-row-border: 1px solid var(--skeleton-color-grey-1);
+}
+
+.keyValue {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table {
+  border-collapse: collapse;
+}
+
+.table td,
+.table th {
+  text-align: left;
+  padding-inline: 0;
+  padding-block: var(--skeleton-size-md);
+}
+
+.tdDelete {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+}
+
+.form > *:not(:last-child) {
+  margin-right: 10px;
+}
+
+.form > input {
+  flex: 5;
+}
+
+.form > button {
+  flex: 2;
+  max-width: fit-content;
+}

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import * as styles from "./CreateKeyValue.module.css";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { IReactHookFormProps } from "../types";
+import { IInputProps } from "../input";
+import { Button } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
+
+/**
+ * Export KeyValue input component (wrapped in FormFieldGroup)
+ */
+interface CreateKeyValueProps {
+  control: Control<FieldValues, any>;
+  defaultValue?: IKeyValue[];
+}
+
+interface IKeyValue {
+  key: string;
+  value: string;
+}
+
+export const CreateKeyValue: React.FC<CreateKeyValueProps & IInputProps & IReactHookFormProps> = ({
+  name,
+  errors,
+  control,
+  validation,
+  defaultValue,
+}) => {
+  return (
+    <Controller
+      {...{ control, name, errors }}
+      rules={validation}
+      render={({ field: { onChange } }) => {
+        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors }} />;
+      }}
+    />
+  );
+};
+
+/**
+ * Internal KeyValueComponent (contains all required logic)
+ */
+interface CreateKeyValueComponentProps {
+  defaultValue?: IKeyValue[];
+  handleChange: (...event: any[]) => void;
+}
+
+const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValue, handleChange }) => {
+  const [currentKey, setCurrentKey] = React.useState<string>("");
+  const [currentValue, setCurrentValue] = React.useState<string>("");
+  const [keyValues, setKeyValues] = React.useState<IKeyValue[]>(defaultValue ?? []);
+
+  const currentKeyRef = React.useRef(null);
+  const currentValueRef = React.useRef(null);
+
+  const handleCreate = (): void => {
+    const keyValue: IKeyValue = { key: currentKey, value: currentValue };
+
+    setCurrentKey("");
+    setCurrentValue("");
+
+    setKeyValues([...keyValues, keyValue]);
+  };
+
+  React.useEffect(() => {
+    defaultValue && setKeyValues(defaultValue);
+  }, [defaultValue]);
+
+  React.useEffect(() => {
+    handleChange(keyValues);
+  }, [keyValues]);
+
+  return (
+    <div className={styles.keyValue}>
+      {keyValues && (
+        <Table className={styles.table}>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Key</TableHeader>
+              <TableHeader>Value</TableHeader>
+              <TableHeader />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {keyValues.map((keyValue, idx) => (
+              <TableRow className={styles.row} key={`${keyValue}${idx}`}>
+                <TableCell>{keyValue.key}</TableCell>
+                <TableCell>{keyValue.value}</TableCell>
+                <TableCell className={styles.tdDelete}>
+                  <Button onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}>
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <div className={styles.form}>
+        <input
+          type="text"
+          placeholder="Key"
+          value={currentKey}
+          ref={currentKeyRef}
+          className="denhaag-textfield__input"
+          onChange={(e) => setCurrentKey(e.target.value)}
+        />
+
+        <input
+          type="text"
+          placeholder="Value"
+          value={currentValue}
+          ref={currentValueRef}
+          className="denhaag-textfield__input"
+          onChange={(e) => setCurrentValue(e.target.value)}
+        />
+
+        <Button onClick={handleCreate} disabled={!currentKey || !currentValue}>
+          Add
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/formFields/index.js

@@ -1,4 +1,4 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/index.tsx

@@ -1,19 +1,21 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-import { InputRadio } from "./radio";
-import { SelectSingle, SelectMultiple } from "./select/select";
-
-export {
-  InputRadio,
-  InputText,
-  InputPassword,
-  InputEmail,
-  InputDate,
-  InputNumber,
-  InputCheckbox,
-  InputFile,
-  Textarea,
-  SelectSingle,
-  SelectMultiple,
-};
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+import { InputRadio } from "./radio";
+import { SelectSingle, SelectMultiple } from "./select/select";
+import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
+
+export {
+  InputRadio,
+  InputText,
+  InputPassword,
+  InputEmail,
+  InputDate,
+  InputNumber,
+  InputCheckbox,
+  InputFile,
+  Textarea,
+  SelectSingle,
+  SelectMultiple,
+  CreateKeyValue,
+};