From 152ac3ca5e27fb43417122399765b37de1ea9ea8 Mon Sep 17 00:00:00 2001
From: morrys <lorenzo.digiacomo85@gmail.com>
Date: Tue, 28 Nov 2023 16:32:09 +0100
Subject: [PATCH] version 1.3.0

---
 package.json                                  |  2 +-
 .../form/fields/ValidatedCheckbox.tsx         |  4 +-
 .../fields/ValidatedSelectAutocomplete.tsx    |  4 +
 .../form/fields/ValidatedTextArea.tsx         | 92 +++++++++++++++++++
 .../form/fields/ValidatedTextArea.stories.tsx | 19 ++++
 src/themes/theme.d.ts                         | 11 +++
 6 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 src/components/components/form/fields/ValidatedTextArea.tsx
 create mode 100644 src/stories/components/form/fields/ValidatedTextArea.stories.tsx

diff --git a/package.json b/package.json
index 2197c37..0054e14 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netservice/astrea-react-ds",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "Apache-2.0",
diff --git a/src/components/components/form/fields/ValidatedCheckbox.tsx b/src/components/components/form/fields/ValidatedCheckbox.tsx
index c63d632..3a3070c 100644
--- a/src/components/components/form/fields/ValidatedCheckbox.tsx
+++ b/src/components/components/form/fields/ValidatedCheckbox.tsx
@@ -5,7 +5,7 @@ import uniqueId from '../../../../util/uniqueId';
 import { composeValidators, ValidatedInput } from '../validators';
 
 interface AdditionalProps {
-  label: string;
+  label: string | React.ReactNode;
   labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
 }
 
@@ -22,6 +22,7 @@ export const ValidatedCheckbox: React.FC<ValidatedCheckboxProps> = ({
   labelPlacement,
   errorMessage,
   disabled,
+  sx,
   ...rest
 }) => {
   const key = useMemo(() => name || uniqueId('v_txt-'), [name]);
@@ -55,6 +56,7 @@ export const ValidatedCheckbox: React.FC<ValidatedCheckboxProps> = ({
     <FormControlLabel
       control={
         <Checkbox
+          sx={sx}
           {...rest}
           value={value}
           onChange={setValueCallback}
diff --git a/src/components/components/form/fields/ValidatedSelectAutocomplete.tsx b/src/components/components/form/fields/ValidatedSelectAutocomplete.tsx
index 6083aa7..4c0b38c 100644
--- a/src/components/components/form/fields/ValidatedSelectAutocomplete.tsx
+++ b/src/components/components/form/fields/ValidatedSelectAutocomplete.tsx
@@ -71,6 +71,10 @@ export function ValidatedSelectAutocomplete({
     [children]
   );
 
+  React.useEffect(() => {
+    setValue((defaultValue || null) as string);
+  }, [items]);
+
   return (
     <LabelInput nameHtml={key} label={label as string}>
       <Autocomplete<SelectItem, boolean, boolean, boolean>
diff --git a/src/components/components/form/fields/ValidatedTextArea.tsx b/src/components/components/form/fields/ValidatedTextArea.tsx
new file mode 100644
index 0000000..526f73e
--- /dev/null
+++ b/src/components/components/form/fields/ValidatedTextArea.tsx
@@ -0,0 +1,92 @@
+import { InputProps, TextareaAutosize } from '@mui/material';
+import { styled } from '@mui/system';
+import React, { useCallback, useMemo } from 'react';
+import { useFormField } from 'relay-forms';
+import uniqueId from '../../../../util/uniqueId';
+import { LabelInput } from '../../LabelInput';
+import { ValidatedInput, composeValidators } from '../validators';
+
+export type ValidatedTextAreaProps = ValidatedInput<
+  Omit<InputProps, 'value'>,
+  string
+>;
+
+const TextareaAutosizeStyled = styled(TextareaAutosize)(({ theme }: { theme: any }) => ({
+    fontFamily: `${theme.typography.fontFamily}`,
+  display: 'block',
+  padding: 8,
+  minHeight: '90px',
+  width: '100%',
+  borderColor: '#B1B4B6',
+  outline: '0',
+  borderRadius: '0',
+  '&:focus': {
+    boxShadow: `0 0 0 3px ${theme.palette.focus.main}`,
+    borderWidth: '3px',
+  },
+  '&:hover': {
+    borderColor: '#0B0C0C',
+  },
+}));
+
+/**
+ * Campo di testo integrato con relay-forms.
+ * Supporta la validazione tramite i campi validate
+ */
+export const ValidatedTextArea: React.FC<any> = ({
+  name,
+  label,
+  defaultValue,
+  validate,
+  errorMessage,
+  disabled,
+  placeholder,
+  onChange,
+  ...rest
+}) => {
+  const key = useMemo(() => name || uniqueId('v_txt-'), [name]);
+
+  const validateCallback = useCallback(
+    (v: string) => composeValidators(validate, errorMessage)(v),
+    [validate, errorMessage]
+  );
+
+  const [{ value, error }, setValue] = useFormField({
+    key,
+    initialValue: (defaultValue || '') as string,
+    validate: validateCallback,
+  });
+
+  React.useEffect(() => {
+    if (disabled) {
+      setValue((defaultValue || '') as string);
+    }
+  }, [disabled]);
+
+  const setValueCallback = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.target;
+      setValue(value);
+
+      if (onChange) {
+        onChange(event);
+      }
+    },
+    [setValue, onChange]
+  );
+
+  return (
+    <LabelInput nameHtml={key} label={label as string}>
+      <TextareaAutosizeStyled
+        {...rest}
+        fullWidth
+        value={value}
+        error={!!error}
+        onChange={setValueCallback}
+        disabled={disabled}
+        multiline
+        placeholder={placeholder}
+      />
+    </LabelInput>
+  );
+};
diff --git a/src/stories/components/form/fields/ValidatedTextArea.stories.tsx b/src/stories/components/form/fields/ValidatedTextArea.stories.tsx
new file mode 100644
index 0000000..d5ba01a
--- /dev/null
+++ b/src/stories/components/form/fields/ValidatedTextArea.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { ValidatedForm } from '../../../../components/components/form/ValidatedForm';
+import { ValidatedTextArea } from '../../../../components/components/form/fields/ValidatedTextArea';
+
+export default {
+  title: 'Components/Form/TextArea',
+  component: ValidatedTextArea,
+} as Meta<typeof ValidatedTextArea>;
+
+const Template: StoryFn<typeof ValidatedTextArea> = (args) => {
+  return (
+    <ValidatedForm onSubmit={() => {}}>
+      <ValidatedTextArea label="Insert a comment" name="astrea-textarea" placeholder="Hello, this is text written in a textarea" />
+    </ValidatedForm>
+  );
+};
+
+export const TextInput = Template.bind({});
diff --git a/src/themes/theme.d.ts b/src/themes/theme.d.ts
index 4e430f0..9755695 100644
--- a/src/themes/theme.d.ts
+++ b/src/themes/theme.d.ts
@@ -22,6 +22,10 @@ declare module '@mui/material/styles' {
     };
     typography: {
       fontFamily: string;
+      h1: {
+        fontSize: string;
+        fontWeight: number;
+      };
     };
   }
   interface ThemeOptions {
@@ -34,5 +38,12 @@ declare module '@mui/material/styles' {
     footer?: {
       backgroundColor?: string;
     };
+    typography?: {
+      fontFamily?: string;
+      h1?: {
+        fontSize?: string;
+        fontWeight?: number;
+      };
+    };
   }
 }