[PLAY-713] Convert kit to typescript (#2444)

**What does this PR do?** A clear and concise description with your runway ticket url. Converts the `textarea.jsx` to typescript `textarea.tsx` and adds a test **Screenshots:** Screenshots to visualize your addition/change There are no visual changes **How to test?** Steps to confirm the desired behavior: 1. Go to http://127.0.0.1:3000/kits/textarea/react# 2. Test all of the examples on the page #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [x] **TESTS** I have added test coverage to my code. --------- Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com>
powerhome · Apr 24, 2023 · b7e71b5 · b7e71b5
1 parent 87f012a
commit b7e71b5
Show file tree

Hide file tree

Showing 4 changed files with 344 additions and 135 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_textarea/_textarea.jsx b/playbook/app/pb_kits/playbook/pb_textarea/_textarea.jsx
diff --git a/playbook/app/pb_kits/playbook/pb_textarea/_textarea.tsx b/playbook/app/pb_kits/playbook/pb_textarea/_textarea.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React, { forwardRef, useEffect, useRef } from 'react'
+import classnames from 'classnames'
+
+import PbTextarea from '.'
+import type { InputCallback } from '../types'
+
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+
+type TextareaProps = {
+  aria?: {[key: string]: string},
+  characterCount?: string,
+  className?: string,
+  children?: React.ReactChild[],
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  inline?: boolean,
+  object?: string,
+  method?: string,
+  label?: string,
+  maxCharacters?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  required?: boolean,
+  rows?: number,
+  resize: "none" | "both" | "horizontal" | "vertical" | "auto",
+  onChange?: InputCallback<HTMLTextAreaElement>,
+} & GlobalProps
+
+const Textarea = ({
+  aria = {},
+  characterCount,
+  className,
+  children,
+  data = {},
+  disabled,
+  inline = false,
+  resize = 'none',
+  error,
+  label,
+  maxCharacters,
+  name,
+  onChange = () => {},
+  placeholder,
+  required,
+  rows = 4,
+  value,
+  ...props
+}: TextareaProps, ref: any) => {
+  ref = useRef<HTMLTextAreaElement>(null)
+  useEffect(() => {
+    if (ref.current && resize === 'auto') {
+      PbTextarea.addMatch(ref.current)
+    }
+  })
+
+  const errorClass = error ? 'error' : null
+  const inlineClass = inline ? 'inline' : ''
+  const resizeClass = `resize_${resize}`
+  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
+  const noCount = typeof characterCount !== 'undefined'
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
+
+  const checkIfZero = (characterCount: string | number) => {
+    return characterCount == 0 ? characterCount.toString() : characterCount
+  }
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+    >
+      <Caption text={label} />
+      {children || (
+        <textarea
+          className="pb_textarea_kit"
+          disabled={disabled}
+          name={name}
+          onChange={onChange}
+          placeholder={placeholder}
+          ref={ref}
+          required={required}
+          rows={rows}
+          value={value}
+          {...props}
+        />
+      )}
+
+      {error ? (
+        <>
+          {characterCount ? (
+            <Flex spacing="between" vertical="center">
+              <FlexItem>
+                <Body margin="none" status="negative" text={error} />
+              </FlexItem>
+              <FlexItem>
+                <Caption margin="none" size="xs" text={characterCounter()} />
+              </FlexItem>
+            </Flex>
+          ) : (
+            <Body status="negative" text={error} />
+          )}
+        </>
+      ) : (
+         noCount && (
+          <Caption margin="none" size="xs" text={characterCounter()} />
+        )
+      )}
+    </div>
+  );
+}
+
+export default forwardRef(Textarea)
diff --git a/...app/pb_kits/playbook/pb_textarea/index.js → ...pp/pb_kits/playbook/pb_textarea/index.tsx b/...app/pb_kits/playbook/pb_textarea/index.js → ...pp/pb_kits/playbook/pb_textarea/index.tsx
@@ -1,6 +1,8 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTextarea extends PbEnhancedElement {
+  style: {[key: string]: string}
+  scrollHeight: string
   static get selector() {
     return '.resize_auto textarea'
   }