Merge pull request #4 from holaplex/anshul/form-updates

Form component update, add forgot password feature, add form page in playground
holaplex · Jan 19, 2023 · 8666e18 · 8666e18
2 parents 1f0dbd1 + 5df95a2
commit 8666e18
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/@holaplexui-playground/package.json b/packages/@holaplexui-playground/package.json
@@ -20,11 +20,11 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "eslint": "8.30.0",
-    "eslint-config-next": "13.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
     "autoprefixer": "^10.4.13",
+    "eslint": "8.30.0",
+    "eslint-config-next": "13.1.1",
     "postcss": "^8.4.20",
     "tailwindcss": "^3.2.4",
     "typescript": "4.9.4"

diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
@@ -0,0 +1,88 @@
+import { Form } from '@holaplex/ui-library-react';
+
+function HidePasswordIcon({ size = 16, color = 'none', className = '' }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox='0 0 16 16'
+      fill={color}
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M9.41452 6.5865C10.1952 7.36717 10.1952 8.6345 9.41452 9.4165C8.63386 10.1972 7.36652 10.1972 6.58452 9.4165C5.80386 8.63583 5.80386 7.3685 6.58452 6.5865C7.36652 5.8045 8.63319 5.8045 9.41452 6.5865'
+        stroke='black'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M2 7.99992C2 7.56059 2.10133 7.12592 2.29733 6.72525V6.72525C3.30733 4.66059 5.53933 3.33325 8 3.33325C10.4607 3.33325 12.6927 4.66059 13.7027 6.72525V6.72525C13.8987 7.12592 14 7.56059 14 7.99992C14 8.43925 13.8987 8.87392 13.7027 9.27458V9.27458C12.6927 11.3393 10.4607 12.6666 8 12.6666C5.53933 12.6666 3.30733 11.3393 2.29733 9.27458V9.27458C2.10133 8.87392 2 8.43925 2 7.99992Z'
+        stroke='black'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+    </svg>
+  );
+}
+
+function ShowPasswordIcon({ size = 16, color = 'none', className = '' }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox='0 0 16 16'
+      fill={color}
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M9.70514 9.03858C9.27877 9.75749 8.45061 10.1358 7.62805 9.98746C6.80549 9.83911 6.16168 9.1953 6.01333 8.37274C5.86497 7.55018 6.2433 6.72202 6.96221 6.29565'
+        stroke='black'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M11.9973 11.3309C10.8474 12.203 9.44277 12.6731 7.99956 12.6687C5.60816 12.7113 3.39859 11.397 2.29452 9.2753C1.89792 8.47142 1.89792 7.52878 2.29452 6.7249C2.84668 5.62531 3.72688 4.72447 4.81338 4.14697'
+        stroke='black'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M13.6185 9.42294C13.6453 9.37225 13.6801 9.32678 13.7054 9.27513C14.102 8.47125 14.102 7.52861 13.7054 6.72473C12.6013 4.60302 10.3917 3.28874 8.00031 3.33133C7.85038 3.33133 7.70465 3.35134 7.55664 3.36109'
+        stroke='black'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M14.0021 13.3356L2.66406 1.99756'
+        stroke='black'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+    </svg>
+  );
+}
+
+export default function App() {
+  return (
+    <div className='w-[400px] mx-auto flex flex-col gap-4 justify-center items-center p-4'>
+      <Form>
+        <Form.Label name='Email' />
+        <Form.Input placeholder='e.g. [email protected]' />
+        <Form.Label
+          name='Password'
+          asideComponent={<div className='text-xs'>Forgot Password?</div>}
+          className='mt-5'
+        />
+        <Form.Password
+          placeholder='Enter your password'
+          showPasswordIcon={<ShowPasswordIcon />}
+          hidePasswordIcon={<HidePasswordIcon />}
+        />
+      </Form>
+    </div>
+  );
+}
diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
@@ -104,42 +104,52 @@ a {
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
   }
-}
+} */
 
 .spinner-border {
   vertical-align: -0.125em;
   border: solid currentColor;
   border-right-color: transparent;
 }
 
-.form-label {
-  @apply mb-6 flex flex-col gap-2;
-}
-
 .avatar {
   @apply bg-blue-500;
 }
 
+.form-label {
+  @apply flex flex-col gap-2;
+}
+
 .form-label-text {
-  @apply font-semibold text-white;
+  @apply font-semibold text-sm;
 }
 
 .form-error {
   @apply whitespace-nowrap text-left text-sm text-red-500;
 }
 
+.form-input-container {
+  @apply flex flex-row w-full items-center rounded-md border border-gray-800;
+}
 .form-input {
-  @apply flex w-full flex-row items-center justify-start rounded-md border border-gray-800 bg-gray-800 p-2 text-white focus-within:border-white focus:ring-0 focus:ring-offset-0;
+  @apply w-full text-black appearance-none focus:appearance-none border-none focus:border-none outline-none focus:outline-none border-transparent focus:border-transparent;
 }
 
+.form-input-icon-container {
+  @apply p-2 bg-gray-200 rounded-md ml-1 mr-1;
+}
 .form-input-error {
   @apply border-red-500;
 }
 
+.form-show-password-container {
+  @apply p-2 bg-gray-200 rounded-md ml-1 mr-1;
+}
+
 .price-text {
   @apply text-white;
-}
+}
diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [
@@ -24,6 +24,7 @@
     "react-intersection-observer": "^9.4.1"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.8",

diff --git a/packages/@holaplexui-react/src/components/Form.tsx b/packages/@holaplexui-react/src/components/Form.tsx
@@ -6,6 +6,7 @@ import {
   forwardRef,
   LegacyRef,
   InputHTMLAttributes,
+  useState,
 } from 'react';
 import { FieldError } from 'react-hook-form';
 
@@ -19,16 +20,27 @@ export function Form({
 interface FormLabelProps
   extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
   name: string;
+  asideComponent?: JSX.Element;
 }
 
-function FormLabel({ name, className, children, ...props }: FormLabelProps): JSX.Element {
+function FormLabel({
+  name,
+  asideComponent,
+  className,
+  children,
+  ...props
+}: FormLabelProps): JSX.Element {
   return (
-    <label className="form-label" {...props}>
-      <span className="form-label-text">{name}</span>
+    <label className={clsx('form-label', className)} {...props}>
+      <div className="flex w-full justify-between items-center">
+        <span className="form-label-text">{name}</span>
+        {asideComponent}
+      </div>
       {children}
     </label>
   );
 }
+Form.Label = FormLabel;
 
 interface FormErrorProps {
   message?: string;
@@ -44,8 +56,6 @@ function FormError({ message }: FormErrorProps): JSX.Element | null {
 
 Form.Error = FormError;
 
-Form.Label = FormLabel;
-
 interface FormInputProps
   extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   className?: string;
@@ -58,15 +68,74 @@ const FormInput = forwardRef(function FormInput(
   ref
 ) {
   return (
-    <div className={clsx('form-input', { 'focus-within:form-input-error': error }, className)}>
-      {icon && icon}
+    <div
+      className={clsx(
+        'form-input-container',
+        { 'focus-within:form-input-error': error },
+        className
+      )}
+    >
+      {icon && <div className="form-input-icon-container">{icon}</div>}
+
       <input
         {...props}
         ref={ref as LegacyRef<HTMLInputElement> | undefined}
-        className={clsx('w-full bg-transparent', { 'pl-2': icon })}
+        type="text"
+        className={clsx('form-input', {
+          'ml-1': icon,
+        })}
       />
     </div>
   );
 });
 
 Form.Input = FormInput;
+
+interface FormPasswordProps
+  extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  className?: string;
+  icon?: JSX.Element;
+  showPasswordIcon?: JSX.Element;
+  hidePasswordIcon?: JSX.Element;
+  error?: FieldError;
+}
+
+const FormPassword = forwardRef(function FormPassword(
+  { className, icon, showPasswordIcon, hidePasswordIcon, error, ...props }: FormPasswordProps,
+  ref
+) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div
+      className={clsx(
+        'form-input-container',
+        { 'focus-within:form-input-error': error },
+        className
+      )}
+    >
+      {icon && <div className="form-input-icon-container">{icon}</div>}
+
+      <input
+        {...props}
+        ref={ref as LegacyRef<HTMLInputElement> | undefined}
+        type={showPassword ? 'text' : 'password'}
+        className={clsx('form-input', {
+          'ml-1': icon,
+          'mr-1': showPasswordIcon && hidePasswordIcon,
+        })}
+      />
+
+      {showPasswordIcon && hidePasswordIcon && (
+        <div
+          className="form-show-password-container"
+          onClick={() => setShowPassword(!showPassword)}
+        >
+          {showPassword ? showPasswordIcon : hidePasswordIcon}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Form.Password = FormPassword;
diff --git a/packages/@holaplexui-react/tailwind.config.cjs b/packages/@holaplexui-react/tailwind.config.cjs
@@ -23,7 +23,7 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
   corePlugins: {
     preflight: false,
   },