Skip to content

Commit 8666e18

Browse files
kespinolakespinola
authored
Merge pull request #4 from holaplex/anshul/form-updates
Form component update, add forgot password feature, add form page in playground
2 parents 1f0dbd1 + 5df95a2 commit 8666e18

File tree

7 files changed

+192
-22
lines changed

7 files changed

+192
-22
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/@holaplexui-playground/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@
2020
"react-dom": "18.2.0"
2121
},
2222
"devDependencies": {
23-
"eslint": "8.30.0",
24-
"eslint-config-next": "13.1.1",
2523
"@tailwindcss/forms": "^0.5.3",
2624
"@tailwindcss/typography": "^0.5.8",
2725
"autoprefixer": "^10.4.13",
26+
"eslint": "8.30.0",
27+
"eslint-config-next": "13.1.1",
2828
"postcss": "^8.4.20",
2929
"tailwindcss": "^3.2.4",
3030
"typescript": "4.9.4"

‎packages/@holaplexui-playground/pages/form.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { Form } from '@holaplex/ui-library-react';
2+
3+
function HidePasswordIcon({ size = 16, color = 'none', className = '' }) {
4+
return (
5+
<svg
6+
width={size}
7+
height={size}
8+
viewBox='0 0 16 16'
9+
fill={color}
10+
className={className}
11+
xmlns='http://www.w3.org/2000/svg'
12+
>
13+
<path
14+
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'
15+
stroke='black'
16+
stroke-linecap='round'
17+
stroke-linejoin='round'
18+
/>
19+
<path
20+
fill-rule='evenodd'
21+
clip-rule='evenodd'
22+
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'
23+
stroke='black'
24+
stroke-linecap='round'
25+
stroke-linejoin='round'
26+
/>
27+
</svg>
28+
);
29+
}
30+
31+
function ShowPasswordIcon({ size = 16, color = 'none', className = '' }) {
32+
return (
33+
<svg
34+
width={size}
35+
height={size}
36+
viewBox='0 0 16 16'
37+
fill={color}
38+
className={className}
39+
xmlns='http://www.w3.org/2000/svg'
40+
>
41+
<path
42+
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'
43+
stroke='black'
44+
stroke-linecap='round'
45+
stroke-linejoin='round'
46+
/>
47+
<path
48+
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'
49+
stroke='black'
50+
stroke-linecap='round'
51+
stroke-linejoin='round'
52+
/>
53+
<path
54+
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'
55+
stroke='black'
56+
stroke-linecap='round'
57+
stroke-linejoin='round'
58+
/>
59+
<path
60+
d='M14.0021 13.3356L2.66406 1.99756'
61+
stroke='black'
62+
stroke-linecap='round'
63+
stroke-linejoin='round'
64+
/>
65+
</svg>
66+
);
67+
}
68+
69+
export default function App() {
70+
return (
71+
<div className='w-[400px] mx-auto flex flex-col gap-4 justify-center items-center p-4'>
72+
<Form>
73+
<Form.Label name='Email' />
74+
<Form.Input placeholder='e.g. [email protected]' />
75+
<Form.Label
76+
name='Password'
77+
asideComponent={<div className='text-xs'>Forgot Password?</div>}
78+
className='mt-5'
79+
/>
80+
<Form.Password
81+
placeholder='Enter your password'
82+
showPasswordIcon={<ShowPasswordIcon />}
83+
hidePasswordIcon={<HidePasswordIcon />}
84+
/>
85+
</Form>
86+
</div>
87+
);
88+
}

‎packages/@holaplexui-playground/styles/globals.css‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,42 +104,52 @@ a {
104104
text-decoration: none;
105105
}
106106

107-
@media (prefers-color-scheme: dark) {
107+
/* @media (prefers-color-scheme: dark) {
108108
html {
109109
color-scheme: dark;
110110
}
111-
}
111+
} */
112112

113113
.spinner-border {
114114
vertical-align: -0.125em;
115115
border: solid currentColor;
116116
border-right-color: transparent;
117117
}
118118

119-
.form-label {
120-
@apply mb-6 flex flex-col gap-2;
121-
}
122-
123119
.avatar {
124120
@apply bg-blue-500;
125121
}
126122

123+
.form-label {
124+
@apply flex flex-col gap-2;
125+
}
126+
127127
.form-label-text {
128-
@apply font-semibold text-white;
128+
@apply font-semibold text-sm;
129129
}
130130

131131
.form-error {
132132
@apply whitespace-nowrap text-left text-sm text-red-500;
133133
}
134134

135+
.form-input-container {
136+
@apply flex flex-row w-full items-center rounded-md border border-gray-800;
137+
}
135138
.form-input {
136-
@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;
139+
@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;
137140
}
138141

142+
.form-input-icon-container {
143+
@apply p-2 bg-gray-200 rounded-md ml-1 mr-1;
144+
}
139145
.form-input-error {
140146
@apply border-red-500;
141147
}
142148

149+
.form-show-password-container {
150+
@apply p-2 bg-gray-200 rounded-md ml-1 mr-1;
151+
}
152+
143153
.price-text {
144154
@apply text-white;
145-
}
155+
}

‎packages/@holaplexui-react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@holaplex/ui-library-react",
33
"author": "Holaplex Inc.",
4-
"version": "0.4.0",
4+
"version": "0.5.0",
55
"description": "Holaplex react ui library components",
66
"private": false,
77
"files": [
@@ -24,6 +24,7 @@
2424
"react-intersection-observer": "^9.4.1"
2525
},
2626
"devDependencies": {
27+
"@tailwindcss/forms": "^0.5.3",
2728
"@types/node": "^18.11.18",
2829
"@types/react": "^18.0.26",
2930
"@types/react-dom": "^18.0.8",

‎packages/@holaplexui-react/src/components/Form.tsx‎

Lines changed: 77 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
forwardRef,
77
LegacyRef,
88
InputHTMLAttributes,
9+
useState,
910
} from 'react';
1011
import { FieldError } from 'react-hook-form';
1112

@@ -19,16 +20,27 @@ export function Form({
1920
interface FormLabelProps
2021
extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
2122
name: string;
23+
asideComponent?: JSX.Element;
2224
}
2325

24-
function FormLabel({ name, className, children, ...props }: FormLabelProps): JSX.Element {
26+
function FormLabel({
27+
name,
28+
asideComponent,
29+
className,
30+
children,
31+
...props
32+
}: FormLabelProps): JSX.Element {
2533
return (
26-
<label className="form-label" {...props}>
27-
<span className="form-label-text">{name}</span>
34+
<label className={clsx('form-label', className)} {...props}>
35+
<div className="flex w-full justify-between items-center">
36+
<span className="form-label-text">{name}</span>
37+
{asideComponent}
38+
</div>
2839
{children}
2940
</label>
3041
);
3142
}
43+
Form.Label = FormLabel;
3244

3345
interface FormErrorProps {
3446
message?: string;
@@ -44,8 +56,6 @@ function FormError({ message }: FormErrorProps): JSX.Element | null {
4456

4557
Form.Error = FormError;
4658

47-
Form.Label = FormLabel;
48-
4959
interface FormInputProps
5060
extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
5161
className?: string;
@@ -58,15 +68,74 @@ const FormInput = forwardRef(function FormInput(
5868
ref
5969
) {
6070
return (
61-
<div className={clsx('form-input', { 'focus-within:form-input-error': error }, className)}>
62-
{icon && icon}
71+
<div
72+
className={clsx(
73+
'form-input-container',
74+
{ 'focus-within:form-input-error': error },
75+
className
76+
)}
77+
>
78+
{icon && <div className="form-input-icon-container">{icon}</div>}
79+
6380
<input
6481
{...props}
6582
ref={ref as LegacyRef<HTMLInputElement> | undefined}
66-
className={clsx('w-full bg-transparent', { 'pl-2': icon })}
83+
type="text"
84+
className={clsx('form-input', {
85+
'ml-1': icon,
86+
})}
6787
/>
6888
</div>
6989
);
7090
});
7191

7292
Form.Input = FormInput;
93+
94+
interface FormPasswordProps
95+
extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
96+
className?: string;
97+
icon?: JSX.Element;
98+
showPasswordIcon?: JSX.Element;
99+
hidePasswordIcon?: JSX.Element;
100+
error?: FieldError;
101+
}
102+
103+
const FormPassword = forwardRef(function FormPassword(
104+
{ className, icon, showPasswordIcon, hidePasswordIcon, error, ...props }: FormPasswordProps,
105+
ref
106+
) {
107+
const [showPassword, setShowPassword] = useState(false);
108+
109+
return (
110+
<div
111+
className={clsx(
112+
'form-input-container',
113+
{ 'focus-within:form-input-error': error },
114+
className
115+
)}
116+
>
117+
{icon && <div className="form-input-icon-container">{icon}</div>}
118+
119+
<input
120+
{...props}
121+
ref={ref as LegacyRef<HTMLInputElement> | undefined}
122+
type={showPassword ? 'text' : 'password'}
123+
className={clsx('form-input', {
124+
'ml-1': icon,
125+
'mr-1': showPasswordIcon && hidePasswordIcon,
126+
})}
127+
/>
128+
129+
{showPasswordIcon && hidePasswordIcon && (
130+
<div
131+
className="form-show-password-container"
132+
onClick={() => setShowPassword(!showPassword)}
133+
>
134+
{showPassword ? showPasswordIcon : hidePasswordIcon}
135+
</div>
136+
)}
137+
</div>
138+
);
139+
});
140+
141+
Form.Password = FormPassword;

‎packages/@holaplexui-react/tailwind.config.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = {
2323
},
2424
},
2525
},
26-
plugins: [],
26+
plugins: [require('@tailwindcss/forms')],
2727
corePlugins: {
2828
preflight: false,
2929
},

0 commit comments

Comments
 (0)