Skip to content

Commit 265d012

Browse files
jsajaljsajal
committed
remove usage of tailwind css forms
1 parent 462572b commit 265d012

4 files changed

Lines changed: 103 additions & 137 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
"@emotion/styled": "^11.11.0",
4646
"@headlessui/react": "^1.7.18",
4747
"@heroicons/react": "^2.1.1",
48-
"@hookform/resolvers": "^3.7.0",
4948
"@testing-library/jest-dom": "^5.17.0",
5049
"@testing-library/react": "^13.4.0",
5150
"@testing-library/user-event": "^13.5.0",
@@ -67,7 +66,6 @@
6766
"react-custom-scrollbars": "^4.2.1",
6867
"react-dom": "^18.2.0",
6968
"react-edit-text": "^5.1.1",
70-
"react-hook-form": "^7.52.0",
7169
"react-icons": "^5.0.1",
7270
"react-json-view-lite": "^1.4.0",
7371
"react-perfect-scrollbar": "^1.5.8",
@@ -82,12 +80,10 @@
8280
"tailwindcss": "^3.4.1",
8381
"typescript": "4",
8482
"web-vitals": "^2.1.4",
85-
"zod": "^3.23.8",
8683
"zustand": "^4.5.2"
8784
},
8885
"devDependencies": {
8986
"@changesets/cli": "^2.27.1",
90-
"@tailwindcss/forms": "^0.5.7",
9187
"@tailwindcss/typography": "^0.5.10",
9288
"@types/node": "20.11.5",
9389
"daisyui": "^4.7.2",

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 47 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/molecules/modals/SettingsModal.js‎

Lines changed: 102 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,59 @@
11
import React, { Fragment, useState, useEffect } from 'react';
22
import { Dialog, Transition, Tab } from '@headlessui/react';
3-
import { useForm } from 'react-hook-form';
4-
import { z } from 'zod';
5-
import { zodResolver } from '@hookform/resolvers/zod';
3+
// import { useForm } from 'react-hook-form';
4+
// import { z } from 'zod';
5+
// import { zodResolver } from '@hookform/resolvers/zod';
66
import { XCircleIcon } from '@heroicons/react/20/solid';
77
import Button from 'components/atoms/common/Button';
88
import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
99
import { addLogSyncConfig } from 'service/settings';
1010
import useSettingsStore from 'stores/SettingsStore';
1111

12-
const schema = z.object({
13-
enabled: z.boolean(),
14-
accessId: z.string(),
15-
accessKey: z.string(),
16-
});
12+
// const schema = z.object({
13+
// enabled: z.boolean(),
14+
// accessId: z.string(),
15+
// accessKey: z.string(),
16+
// });
1717

1818
const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) => {
1919
const [successFullSubmissionMessage, showSuccessFullSubmissionMessage] = useState(false);
20+
const [failureFullSubmissionMessage, showFailureFullSubmissionMessage] = useState(false);
2021
const config = useSettingsStore((state) => state.logSyncConfig);
22+
const [enabled, setEnabled] = useState(false);
23+
const [accessId, setAccessId] = useState('');
24+
const [accessKey, setAccessKey] = useState('');
25+
console.log(config);
2126

22-
const {
23-
register,
24-
handleSubmit,
25-
setValue,
26-
setError,
27-
formState: { errors, isSubmitting },
28-
} = useForm({
29-
defaultValues: {
30-
enabled: false,
31-
accessId: '',
32-
accessKey: '',
33-
},
34-
resolver: zodResolver(schema),
35-
});
27+
// const {
28+
// register,
29+
// handleSubmit,
30+
// setValue,
31+
// setError,
32+
// formState: { errors, isSubmitting },
33+
// } = useForm({
34+
// defaultValues: {
35+
// enabled: false,
36+
// accessId: '',
37+
// accessKey: '',
38+
// },
39+
// resolver: zodResolver(schema),
40+
// });
3641

3742
useEffect(() => {
38-
setValue('enabled', config?.enabled || false);
39-
setValue('accessId', config?.accessId || '');
40-
setValue('accessKey', config?.accessKey || '');
43+
setEnabled(config?.enabled || false);
44+
setAccessId(config?.accessId || '');
45+
setAccessKey(config?.accessKey || '');
4146
}, [config]);
4247

43-
const onFormSubmit = async (data) => {
48+
const onFormSubmit = async () => {
4449
try {
45-
await addLogSyncConfig(data.enabled, 'https://flowtest-ai.vercel.app', data.accessId, data.accessKey);
50+
await addLogSyncConfig(enabled, 'https://flowtest-ai.vercel.app', accessId, accessKey);
4651
// send the form data as a request
4752
showSuccessFullSubmissionMessage(true);
4853
closeFn();
4954
} catch (error) {
5055
// To show error message from the request handler
51-
setError('root', { message: error });
56+
showFailureFullSubmissionMessage(true);
5257
}
5358
};
5459

@@ -59,6 +64,9 @@ const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) =
5964
as='div'
6065
className='relative z-10'
6166
onClose={() => {
67+
setEnabled(config?.enabled || false);
68+
setAccessId(config?.accessId || '');
69+
setAccessKey(config?.accessKey || '');
6270
closeFn();
6371
}}
6472
>
@@ -114,65 +122,74 @@ const SettingsModal = ({ closeFn = () => null, open = false, initialTab = 0 }) =
114122
<Tab.Panels className='mt-2'>
115123
<Tab.Panel className='p-4'>
116124
{/* Scans Content */}
117-
<form className='flex flex-col items-start gap-4' onSubmit={handleSubmit(onFormSubmit)}>
118-
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
119-
<div className='py-2'>
120-
<p className='text-lg'>
121-
Scans aim to provide anayltics and observability for your flows. <br />
122-
<a
123-
href='https://flowtest-ai.vercel.app/'
124-
target='_blank'
125-
rel='noreferrer'
126-
className='text-blue-500 hover:underline'
127-
>
128-
Get Access Keys
129-
</a>
130-
</p>
131-
</div>
132-
<div className='py-2'>
133-
<label htmlFor='enabled' className='block text-lg font-medium text-gray-700'>
134-
Enabled
135-
</label>
136-
<input type='checkbox' {...register('enabled')} id='enabled' className='block' />
137-
{errors.enabled && <div className='text-red-500'>{errors.enabled.message}</div>}
138-
</div>
139-
<div className='py-2'>
140-
<label htmlFor='accessId' className='block text-lg font-medium text-gray-700'>
141-
Access Id
142-
</label>
143-
<input
144-
{...register('accessId')}
145-
type='text'
146-
placeholder='Access Id'
147-
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
148-
/>
149-
{errors.accessId && <div className='text-red-500'>{errors.accessId.message}</div>}
150-
</div>
151-
<div className='py-2'>
152-
<label htmlFor='accessKey' className='block text-lg font-medium text-gray-700'>
153-
Access Key
154-
</label>
155-
<input
156-
{...register('accessKey')}
157-
type='text'
158-
placeholder='Access Key'
159-
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
160-
/>
161-
{errors.accessKey && <div className='text-red-500'>{errors.accessKey.message}</div>}
162-
</div>
163-
<div>
164-
{errors.root && <div className='text-red-500'>{errors.root.message}</div>}{' '}
165-
{successFullSubmissionMessage && (
166-
<div className='text-green-500'> Successfully saved settings</div>
167-
)}
168-
</div>
125+
<div className='bg-card min-h-[20vh] w-full rounded-lg border border-gray-300 p-4 shadow-sm'>
126+
<div className='py-2'>
127+
<p className='text-lg'>
128+
Scans aim to provide anayltics and observability for your flows. <br />
129+
<a
130+
href='https://flowtest-ai.vercel.app/'
131+
target='_blank'
132+
rel='noreferrer'
133+
className='text-blue-500 hover:underline'
134+
>
135+
Get Access Keys
136+
</a>
137+
</p>
169138
</div>
170-
<div className='flex justify-center w-full mt-6'>
171-
<Button btnType={BUTTON_TYPES.primary} isDisabled={isSubmitting} fullWidth={true}>
172-
{isSubmitting ? 'Loading...' : 'Save'}
173-
</Button>
139+
<div className='py-2'>
140+
<label htmlFor='enabled' className='block text-lg font-medium text-gray-700'>
141+
Enabled
142+
</label>
143+
<input
144+
type='checkbox'
145+
checked={enabled}
146+
onChange={() => setEnabled(!enabled)}
147+
id='enabled'
148+
className='block'
149+
/>
174150
</div>
175-
</form>
151+
<div className='py-2'>
152+
<label htmlFor='accessId' className='block text-lg font-medium text-gray-700'>
153+
Access Id
154+
</label>
155+
<input
156+
value={accessId}
157+
onChange={(e) => setAccessId(e.target.value)}
158+
type='text'
159+
placeholder='Access Id'
160+
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
161+
/>
162+
</div>
163+
<div className='py-2'>
164+
<label htmlFor='accessKey' className='block text-lg font-medium text-gray-700'>
165+
Access Key
166+
</label>
167+
<input
168+
value={accessKey}
169+
onChange={(e) => setAccessKey(e.target.value)}
170+
type='text'
171+
placeholder='Access Key'
172+
className='mb-2 block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
173+
/>
174+
</div>
175+
<div>
176+
{failureFullSubmissionMessage && (
177+
<div className='text-red-500'> Failed to saved settings</div>
178+
)}
179+
{successFullSubmissionMessage && (
180+
<div className='text-green-500'> Successfully saved settings</div>
181+
)}
182+
</div>
183+
</div>
184+
<div className='flex justify-center w-full mt-6'>
185+
<Button
186+
btnType={BUTTON_TYPES.primary}
187+
fullWidth={true}
188+
onClickHandle={async () => await onFormSubmit()}
189+
>
190+
{'Save'}
191+
</Button>
192+
</div>
176193
</Tab.Panel>
177194
<Tab.Panel className='p-4'>
178195
{/* Theme Content */}

‎tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ module.exports = {
7070
montserrat: ['Montserrat', 'sans-serif'],
7171
},
7272
},
73-
plugins: [require('daisyui'), require('@tailwindcss/forms')],
73+
plugins: [require('daisyui')],
7474
daisyui: {
7575
// themes: false,
7676
themes: [],

0 commit comments

Comments
 (0)