version 1.3.0

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

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}

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>

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>
+  );
+};

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({});

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;
+      };
+    };
   }
 }