From f9857eb77233a69d01e673d75f80a66e9f0f61c7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 24 Feb 2022 18:18:28 -0800
Subject: [PATCH] Add components for textareas and text limited fields

---
 components/CharLimitedFieldset/index.scss | 29 ++++++++++++
 components/CharLimitedFieldset/index.tsx  | 54 +++++++++++++++++++++++
 components/TextFieldset/index.scss        |  5 +++
 components/TextFieldset/index.tsx         | 33 ++++++++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 components/CharLimitedFieldset/index.scss
 create mode 100644 components/CharLimitedFieldset/index.tsx
 create mode 100644 components/TextFieldset/index.scss
 create mode 100644 components/TextFieldset/index.tsx

diff --git a/components/CharLimitedFieldset/index.scss b/components/CharLimitedFieldset/index.scss
new file mode 100644
index 00000000..5755fd4a
--- /dev/null
+++ b/components/CharLimitedFieldset/index.scss
@@ -0,0 +1,29 @@
+.Limited {
+    background: white;
+    border-radius: 6px;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+    display: flex;
+    gap: $unit;
+    padding-right: $unit * 2;
+
+    &:focus-within {
+        border: 2px solid #275DC5;
+        box-shadow: 0 2px rgba(255, 255, 255, 1);
+    }
+
+    .Counter {
+        color: $grey-50;
+        font-weight: $bold;
+        line-height: 42px;
+    }
+
+    .Input {
+        background: transparent;
+        border-radius: 0;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/CharLimitedFieldset/index.tsx b/components/CharLimitedFieldset/index.tsx
new file mode 100644
index 00000000..aefd8ab6
--- /dev/null
+++ b/components/CharLimitedFieldset/index.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import './index.scss'
+
+interface Props {
+    fieldName: string
+    placeholder: string
+    value?: string
+    limit: number
+    error: string
+    onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const CharLimitedFieldset = React.forwardRef<HTMLInputElement, Props>(function fieldSet(props, ref) {
+    const fieldType = (['password', 'confirm_password'].includes(props.fieldName)) ? 'password' : 'text'
+
+    const [currentCount, setCurrentCount] = useState(0)
+
+    useEffect(() => {
+        setCurrentCount((props.value) ? props.limit - props.value.length : props.limit)
+    }, [props.limit, props.value])
+
+    function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+        setCurrentCount(props.limit - event.currentTarget.value.length)
+        if (props.onChange) props.onChange(event)
+    }
+
+    return (
+        <fieldset className="Fieldset">
+            <div className="Limited">
+                <input
+                    autoComplete="off"
+                    className="Input" 
+                    type={fieldType}
+                    name={props.fieldName} 
+                    placeholder={props.placeholder}
+                    defaultValue={props.value || ''}
+                    onBlur={props.onBlur}
+                    onChange={onChange}
+                    maxLength={props.limit}
+                    ref={ref}
+                    formNoValidate
+                />
+                <span className="Counter">{currentCount}</span>
+            </div>
+            {
+                props.error.length > 0 && 
+                <p className='InputError'>{props.error}</p>
+            }
+        </fieldset>
+    )
+})
+
+export default CharLimitedFieldset
\ No newline at end of file
diff --git a/components/TextFieldset/index.scss b/components/TextFieldset/index.scss
new file mode 100644
index 00000000..f84fe540
--- /dev/null
+++ b/components/TextFieldset/index.scss
@@ -0,0 +1,5 @@
+.Fieldset textarea {
+    color: $grey-00;
+    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 21px;
+}
\ No newline at end of file
diff --git a/components/TextFieldset/index.tsx b/components/TextFieldset/index.tsx
new file mode 100644
index 00000000..63b80c61
--- /dev/null
+++ b/components/TextFieldset/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import './index.scss'
+
+interface Props {
+    fieldName: string
+    placeholder: string
+    value?: string
+    error: string
+    onBlur?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+const TextFieldset = React.forwardRef<HTMLTextAreaElement, Props>(function fieldSet(props, ref) {
+    return (
+        <fieldset className="Fieldset">
+            <textarea
+                className="Input" 
+                name={props.fieldName} 
+                placeholder={props.placeholder}
+                defaultValue={props.value || ''}
+                onBlur={props.onBlur}
+                onChange={props.onChange}
+                ref={ref}
+            />
+            {
+                props.error.length > 0 && 
+                <p className='InputError'>{props.error}</p>
+            }
+        </fieldset>
+    )
+})
+
+export default TextFieldset
\ No newline at end of file