Issue 44 add textarea component

[EdenWuyt]

Change Summary

Add textarea component

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

• The pull request title has an issue number
• The change works by "Smoke testing" or quick testing
• The change has tests
• The change has documentation

Other Information

• Test endpoint: http://localhost:3000/test/textarea
• Documentation: in components/ui/textarea
• The styling is based on implemented InputField (Issue 12 & 37 & 40) to maintain unity but seems a bit different from the bloom figma page.

Hi reviewer! I'm also not sure if it meets the requirement about shadcn ui, but since I dont see any package named shadcn in the package.json so I just observe how the current files work. Please let me know if its not an appropriate implementation

textarea_demo.mp4

Related issue

• Resolve Add Textarea component #44

[Fozzyack]

Just some small changes then feel free to merge.

Good work as per usual!

[Fozzyack]

Unused useState

[Fozzyack]

For better API consistency we can change setValue to onChange

[Fozzyack]

For consistency / extra styling add these extra fields:

• required?: - The text area might be a required field in a form
• classname?: - The text area might need extra classes in some use cases

[Fozzyack]

Hey Eden, sorry I should have been a bit clearer haha. The className and required field should be just for the textarea element - no need to worry about the label customisation. We can also simplify the component down by removing the div and moving some of those class names to the textarea.

Something like this: (one className prop, one required prop)

const Textarea: React.FC<TextareaProps> = ({
  id,
  name,
  label,
  placeholder,
  rows,
  value,
  onChange,
  required,
  className,
}) => {
  return (
    <>
      <label htmlFor={name} className="body-sm-bold mb-1 block">
        {label ? label : capitalizeFirstLetter(name)}
        {required && <span className="text-bloom-red"> *</span>}
      </label>
      <textarea
        id={id ? id : name}
        name={name}
        placeholder={placeholder ? placeholder : capitalizeFirstLetter(name)}
        rows={rows ? rows : 4}
        className={cn(
          "body w-full rounded-md border border-[hsl(var(--border))] bg-background shadow-[0_4px_0_0_#D1D5DB] px-3 py-2 outline-none placeholder:text-bloom-gray",
          className,
        )}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </>
  );
};

[Fozzyack]

For the required field we can just use something like {required && <span className="text-[var(--bloom-red)]"> *</span>}.

[Fozzyack]

[placerholder](placeholder:text-[var(--bloom-gray)]") can be replaced with text-bloom-gray

[Fozzyack]

We can actually remove this div and give some of these classnames to the textarea

[Fozzyack]

Excellent 👍