From dcb47b1bceb01078245ebeb7a5056fae4f921ce3 Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Thu, 19 Jan 2023 13:25:46 +0530
Subject: [PATCH 1/5] Form component update, add forgot password feature, add
 form page in playground

---
 package-lock.json                             |  8 +-
 packages/@holaplexui-playground/package.json  |  6 +-
 .../@holaplexui-playground/pages/form.tsx     | 83 +++++++++++++++++++
 .../@holaplexui-playground/styles/globals.css | 28 +++++--
 packages/@holaplexui-react/package.json       |  1 +
 .../@holaplexui-react/src/components/Form.tsx | 71 ++++++++++++++--
 .../@holaplexui-react/tailwind.config.cjs     |  2 +-
 7 files changed, 177 insertions(+), 22 deletions(-)
 create mode 100644 packages/@holaplexui-playground/pages/form.tsx

diff --git a/package-lock.json b/package-lock.json
index 1c3e631..67c1c2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5651,7 +5651,7 @@
       "name": "@holaplex/ui-library-playground",
       "version": "0.1.0",
       "dependencies": {
-        "@holaplex/ui-library-react": "*",
+        "@holaplex/ui-library-react": "^0.4.0",
         "@next/font": "13.1.1",
         "@types/node": "18.11.18",
         "@types/react": "18.0.26",
@@ -5827,7 +5827,7 @@
     },
     "packages/@holaplexui-react": {
       "name": "@holaplex/ui-library-react",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "dependencies": {
         "@headlessui/react": "^1.7.4",
         "@heroicons/react": "^2.0.13",
@@ -5838,6 +5838,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",
@@ -5950,7 +5951,7 @@
     "@holaplex/ui-library-playground": {
       "version": "file:packages/@holaplexui-playground",
       "requires": {
-        "@holaplex/ui-library-react": "*",
+        "@holaplex/ui-library-react": "^0.4.0",
         "@next/font": "13.1.1",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.8",
@@ -6088,6 +6089,7 @@
         "@headlessui/react": "^1.7.4",
         "@heroicons/react": "^2.0.13",
         "@react-hook/window-size": "^3.1.1",
+        "@tailwindcss/forms": "*",
         "@types/node": "^18.11.18",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.8",
diff --git a/packages/@holaplexui-playground/package.json b/packages/@holaplexui-playground/package.json
index bcc1be8..0fad17f 100644
--- a/packages/@holaplexui-playground/package.json
+++ b/packages/@holaplexui-playground/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@holaplex/ui-library-react": "*",
+    "@holaplex/ui-library-react": "^0.4.0",
     "@next/font": "13.1.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
@@ -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
new file mode 100644
index 0000000..aec19da
--- /dev/null
+++ b/packages/@holaplexui-playground/pages/form.tsx
@@ -0,0 +1,83 @@
+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 />
+        <Form.Label name='Password' className='mt-5' />
+        <Form.Password
+          showPasswordIcon={<ShowPasswordIcon />}
+          hidePasswordIcon={<HidePasswordIcon />}
+        />
+      </Form>
+    </div>
+  );
+}
diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
index 07cee26..86101d8 100644
--- a/packages/@holaplexui-playground/styles/globals.css
+++ b/packages/@holaplexui-playground/styles/globals.css
@@ -104,11 +104,11 @@ a {
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
   }
-}
+} */
 
 .spinner-border {
   vertical-align: -0.125em;
@@ -116,30 +116,40 @@ a {
   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 bg-white;
+}
 .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 text-black w-full focus-within:border-white focus:ring-0 focus:ring-offset-0;
 }
 
+.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;
-}
\ No newline at end of file
+}
diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
index 5af292f..7aadc96 100644
--- a/packages/@holaplexui-react/package.json
+++ b/packages/@holaplexui-react/package.json
@@ -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
index c238a0f..6caff26 100644
--- 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';
 
@@ -23,12 +24,13 @@ interface FormLabelProps
 
 function FormLabel({ name, className, children, ...props }: FormLabelProps): JSX.Element {
   return (
-    <label className="form-label" {...props}>
+    <label className={clsx('form-label', className)} {...props}>
       <span className="form-label-text">{name}</span>
       {children}
     </label>
   );
 }
+Form.Label = FormLabel;
 
 interface FormErrorProps {
   message?: string;
@@ -44,8 +46,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 +58,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
index 0bf5d84..dc10308 100644
--- 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,
   },

From defb6adf05f3b313458b127c686a593e073dd480 Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Thu, 19 Jan 2023 13:34:56 +0530
Subject: [PATCH 2/5] add aside component to label

---
 packages/@holaplexui-playground/pages/form.tsx     |  6 +++++-
 packages/@holaplexui-react/src/components/Form.tsx | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
index aec19da..c4fda1a 100644
--- a/packages/@holaplexui-playground/pages/form.tsx
+++ b/packages/@holaplexui-playground/pages/form.tsx
@@ -72,7 +72,11 @@ export default function App() {
       <Form>
         <Form.Label name='Email' />
         <Form.Input />
-        <Form.Label name='Password' className='mt-5' />
+        <Form.Label
+          name='Password'
+          asideComponent={<div className='text-xs'>Forgot Password?</div>}
+          className='mt-5'
+        />
         <Form.Password
           showPasswordIcon={<ShowPasswordIcon />}
           hidePasswordIcon={<HidePasswordIcon />}
diff --git a/packages/@holaplexui-react/src/components/Form.tsx b/packages/@holaplexui-react/src/components/Form.tsx
index 6caff26..f082b69 100644
--- a/packages/@holaplexui-react/src/components/Form.tsx
+++ b/packages/@holaplexui-react/src/components/Form.tsx
@@ -20,12 +20,22 @@ 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={clsx('form-label', className)} {...props}>
-      <span className="form-label-text">{name}</span>
+      <div className="flex w-full justify-between items-center">
+        <span className="form-label-text">{name}</span>
+        {asideComponent}
+      </div>
       {children}
     </label>
   );

From 400f771640d9190545f60b6e08147990f7f77267 Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Thu, 19 Jan 2023 14:45:43 +0530
Subject: [PATCH 3/5] minor fix

---
 packages/@holaplexui-playground/styles/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
index 86101d8..9f9401d 100644
--- a/packages/@holaplexui-playground/styles/globals.css
+++ b/packages/@holaplexui-playground/styles/globals.css
@@ -133,10 +133,10 @@ a {
 }
 
 .form-input-container {
-  @apply flex flex-row w-full items-center rounded-md border border-gray-800 bg-white;
+  @apply flex flex-row w-full items-center rounded-md border border-gray-800;
 }
 .form-input {
-  @apply text-black w-full focus-within:border-white focus:ring-0 focus:ring-offset-0;
+  @apply text-black w-full appearance-none focus:appearance-none border-none focus:border-none outline-none focus:outline-none border-transparent focus:border-transparent;
 }
 
 .form-input-icon-container {

From cca4ea918de59aa93e929da770689f5d44a0fb03 Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Thu, 19 Jan 2023 15:07:07 +0530
Subject: [PATCH 4/5] cleanup

---
 package-lock.json                                  | 6 +++---
 packages/@holaplexui-playground/package.json       | 2 +-
 packages/@holaplexui-playground/pages/form.tsx     | 3 ++-
 packages/@holaplexui-playground/styles/globals.css | 2 +-
 packages/@holaplexui-react/package.json            | 2 +-
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 67c1c2c..a5ec79e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5651,7 +5651,7 @@
       "name": "@holaplex/ui-library-playground",
       "version": "0.1.0",
       "dependencies": {
-        "@holaplex/ui-library-react": "^0.4.0",
+        "@holaplex/ui-library-react": "*",
         "@next/font": "13.1.1",
         "@types/node": "18.11.18",
         "@types/react": "18.0.26",
@@ -5951,7 +5951,7 @@
     "@holaplex/ui-library-playground": {
       "version": "file:packages/@holaplexui-playground",
       "requires": {
-        "@holaplex/ui-library-react": "^0.4.0",
+        "@holaplex/ui-library-react": "*",
         "@next/font": "13.1.1",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.8",
@@ -6089,7 +6089,7 @@
         "@headlessui/react": "^1.7.4",
         "@heroicons/react": "^2.0.13",
         "@react-hook/window-size": "^3.1.1",
-        "@tailwindcss/forms": "*",
+        "@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-playground/package.json b/packages/@holaplexui-playground/package.json
index 0fad17f..a9544b4 100644
--- a/packages/@holaplexui-playground/package.json
+++ b/packages/@holaplexui-playground/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@holaplex/ui-library-react": "^0.4.0",
+    "@holaplex/ui-library-react": "*",
     "@next/font": "13.1.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
index c4fda1a..da18b82 100644
--- a/packages/@holaplexui-playground/pages/form.tsx
+++ b/packages/@holaplexui-playground/pages/form.tsx
@@ -71,13 +71,14 @@ export default function App() {
     <div className='w-[400px] mx-auto flex flex-col gap-4 justify-center items-center p-4'>
       <Form>
         <Form.Label name='Email' />
-        <Form.Input />
+        <Form.Input placeholder='e.g. name@example.com' />
         <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 />}
         />
diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
index 9f9401d..306fc6d 100644
--- a/packages/@holaplexui-playground/styles/globals.css
+++ b/packages/@holaplexui-playground/styles/globals.css
@@ -136,7 +136,7 @@ a {
   @apply flex flex-row w-full items-center rounded-md border border-gray-800;
 }
 .form-input {
-  @apply text-black w-full appearance-none focus:appearance-none border-none focus:border-none outline-none focus:outline-none border-transparent focus:border-transparent;
+  @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 {
diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
index 7aadc96..27cee01 100644
--- 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.4.1",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [

From 5df95a2138f3bcf957cee8f2b859810c6cb360f5 Mon Sep 17 00:00:00 2001
From: Anshul Goel <anshul.go87@gmail.com>
Date: Thu, 19 Jan 2023 15:14:15 +0530
Subject: [PATCH 5/5] Update version to 0.5.0

---
 packages/@holaplexui-react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
index 27cee01..61050e8 100644
--- 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.1",
+  "version": "0.5.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [