feat(BoemlyFormControl): Make Textarea available

src/components/BoemlyFormControl/BoemlyFormControl.stories.tsx

@@ -103,6 +103,13 @@ Checkbox.args = {
   checkboxProps: { children: 'Checkbox' },
 };
 
+export const Textarea = Template.bind({});
+Textarea.args = {
+  id: 'textarea',
+  inputType: 'Textarea',
+  textareaProps: { placeholder: 'Textarea' },
+};
+
 export const DatePicker = Template.bind({});
 DatePicker.args = {
   id: 'date-picker',

src/components/BoemlyFormControl/BoemlyFormControl.tsx

@@ -1,25 +1,27 @@
-import { StyleProps } from '@chakra-ui/react';
 import React, { ReactNode } from 'react';
 import {
   Checkbox,
   CheckboxProps,
-  Text,
   FormControl,
   FormErrorMessage,
   FormHelperText,
   FormLabel,
+  Input,
   InputGroup,
+  InputProps,
   InputRightElement,
-  Input,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
   NumberInput,
   NumberInputField,
+  NumberInputProps,
   NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
   Select,
-  InputProps,
-  NumberInputProps,
   SelectProps,
+  StyleProps,
+  Text,
+  Textarea,
+  TextareaProps,
   useToken,
 } from '@chakra-ui/react';
 import { CaretDown, CaretUp, Check, WarningOctagon } from 'phosphor-react';
@@ -34,13 +36,14 @@ export interface BoemlyFormControlProps extends StyleProps {
   errorMessage?: string;
 
   // Input type
-  inputType?: 'Input' | 'NumberInput' | 'Select' | 'Checkbox' | 'DatePicker';
+  inputType?: 'Input' | 'NumberInput' | 'Select' | 'Checkbox' | 'DatePicker' | 'Textarea';
   inputProps?: InputProps;
   numberInputProps?: NumberInputProps;
   selectProps?: SelectProps;
   selectOptions?: { value: string; label: string; disabled?: boolean }[];
   checkboxProps?: CheckboxProps;
   datePickerProps?: DatePickerProps;
+  textareaProps?: TextareaProps;
 
   // Inner input elements
   leftAddonsOrElements?: ReactNode[];
@@ -67,6 +70,7 @@ export const BoemlyFormControl: React.FC<BoemlyFormControlProps> = ({
   selectOptions = [],
   checkboxProps,
   datePickerProps,
+  textareaProps,
 
   leftAddonsOrElements = [],
   rightAddonsOrElements = [],
@@ -114,6 +118,8 @@ export const BoemlyFormControl: React.FC<BoemlyFormControlProps> = ({
         return <Checkbox {...checkboxProps} />;
       case 'DatePicker':
         return <DatePicker size={size} {...datePickerProps} />;
+      case 'Textarea':
+        return <Textarea bgColor="white" {...textareaProps} />;
       default:
         return <Input bgColor="white" {...inputProps} />;
     }

src/constants/componentCustomizations.tsx

@@ -460,6 +460,39 @@ export const CustomizedPinInput = {
   },
 };
 
+export const CustomizedTextarea = {
+  sizes: {
+    xl: {
+      ...CustomizedText.sizes.mdRegularNormal,
+      py: '2',
+      px: '4',
+      borderRadius: 'xl',
+    },
+    lg: {
+      ...CustomizedText.sizes.mdLowNormal,
+      py: '2',
+      px: '4',
+      borderRadius: 'lg',
+    },
+    md: {
+      ...CustomizedText.sizes.smRegularNormal,
+      py: '2',
+      px: '4',
+      borderRadius: 'lg',
+    },
+    sm: {
+      ...CustomizedText.sizes.smLowNormal,
+      py: '2',
+      px: '3',
+      borderRadius: 'md',
+    },
+  },
+  defaultProps: {
+    size: 'lg',
+    focusBorderColor: 'black',
+  },
+};
+
 export const CustomizedSelect = {
   defaultProps: {
     variant: 'outline',

src/utils/getTheme.ts

@@ -13,6 +13,7 @@ import {
   CustomizedSelect,
   CustomizedTable,
   CustomizedText,
+  CustomizedTextarea,
   CustomizedTooltip,
 } from '../constants/componentCustomizations';
 import {
@@ -62,6 +63,7 @@ const getTheme = ({ customColors, customFonts, customRadii }: Options) => {
       Select: CustomizedSelect,
       Table: CustomizedTable,
       Text: CustomizedText,
+      Textarea: CustomizedTextarea,
       Tooltip: CustomizedTooltip,
     },
   });