Textarea component

import { SfTextarea } from '@storefront-ui/react';

export default function DisabledTextareaDemo() {
  return (
    <>
      <label>
        <span className="typography-text-sm font-medium cursor-not-allowed text-disabled-900">Description</span>
        <SfTextarea
          disabled
          placeholder="Write something about yourself..."
          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
        />
      </label>
      <p className="typography-hint-xs text-disabled-500  mt-0.5">Do not include personal or financial information.</p>
    </>
  );
}

import { SfTextarea } from '@storefront-ui/react';

export default function ReadonlyTextarea() {
  return (
    <>
      <label>
        <span className="typography-text-sm font-medium">Description</span>
        <SfTextarea
          value="Hello! I'm a passionate shopper and a regular user of this ecommerce platform."
          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
          readOnly
        />
      </label>
      <p className="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
    </>
  );
}

import { SfTextarea } from '@storefront-ui/react';

export default function InvalidTextarea() {
  return (
    <>
      <label>
        <span className="typography-text-sm font-medium">Description</span>
        <SfTextarea invalid placeholder="Write something about yourself..." className="w-full block" />
      </label>
      <div className="flex justify-between mt-0.5">
        <p className="typography-text-sm text-negative-700 font-medium">The field cannot be empty</p>
        <p className="typography-hint-xs text-neutral-500">Do not include personal or financial information.</p>
      </div>
    </>
  );
}

import { SfTextarea } from '@storefront-ui/react';
import classNames from 'classnames';
import { ChangeEvent, useState } from 'react';

export default function TextareaWithLimit() {
  const characterLimit = 25;
  const disabled = false;
  const readonly = false;
  const invalid = false;
  const helpText = 'Help text';
  const errorText = 'Error';

  const [value, setValue] = useState('');

  function onChange(event: ChangeEvent<HTMLTextAreaElement>) {
    setValue(event?.target.value);
  }
  const isAboveLimit = characterLimit ? value.length > characterLimit : false;
  const charsCount = characterLimit ? characterLimit - value.length : null;

  const getCharacterLimitClass = () => (isAboveLimit ? 'text-negative-700 font-medium' : 'text-neutral-500');

  return (
    <>
      <label>
        <span className="text-sm font-medium">Description</span>
        <SfTextarea
          value={value}
          placeholder="Write something about yourself..."
          invalid={invalid}
          disabled={disabled}
          onChange={onChange}
          className="w-full mt-0.5 block"
        />
      </label>
      <div className="flex justify-between mt-0.5">
        <div>
          {invalid && !disabled && (
            <p className="typography-text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>
          )}
          {helpText && (
            <p className={classNames('typography-hint-xs', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
              {helpText}
            </p>
          )}
        </div>
        {characterLimit && !readonly ? (
          <p className={classNames('typography-error-xs', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
            {charsCount}
          </p>
        ) : null}
      </div>
    </>
  );
}

import { SfTextarea } from '@storefront-ui/react';
import { attach } from '@frsource/autoresize-textarea';
import { useEffect, useRef } from 'react';

export default function TextareaAutoresize() {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  useEffect(() => {
    if (textareaRef.current) {
      attach(textareaRef.current);
    }
  }, []);
  return (
    <>
      <label>
        <span className="typography-text-sm font-medium">Description</span>
        <SfTextarea ref={textareaRef} className="w-full h-max-[500px] block" size="sm" aria-label="Label size sm" />
      </label>
      <p className="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
    </>
  );
}