Skip to content
This repository was archived by the owner on Jan 30, 2026. It is now read-only.

Commit d053af7

Browse files
caiopizzolcaiopizzol
committed
chore: prettier, eslint, typecheck and build - pre-commit hooks
1 parent 3fc8f99 commit d053af7

File tree

16 files changed

+1388
-1204
lines changed

16 files changed

+1388
-1204
lines changed

‎.husky/pre-commit‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
pnpm type-check && pnpm lint
1+
pnpm lint-staged && pnpm type-check && pnpm build

‎.prettierrc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
{}
1+
{
2+
"singleQuote": true,
3+
"printWidth": 100
4+
}

‎demo/src/App.tsx‎

Lines changed: 196 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -5,183 +5,209 @@ import 'superdoc/style.css';
55
import './App.css';
66

77
export function App() {
8-
const [submitted, setSubmitted] = useState(false);
9-
const [submitData, setSubmitData] = useState<SubmitData | null>(null);
10-
const [events, setEvents] = useState<string[]>([]);
8+
const [submitted, setSubmitted] = useState(false);
9+
const [submitData, setSubmitData] = useState<SubmitData | null>(null);
10+
const [events, setEvents] = useState<string[]>([]);
1111

12-
const log = (msg: string) => {
13-
const time = new Date().toLocaleTimeString();
14-
console.log(`[${time}] ${msg}`);
15-
setEvents(prev => [...prev.slice(-4), `${time} - ${msg}`]);
16-
};
12+
const log = (msg: string) => {
13+
const time = new Date().toLocaleTimeString();
14+
console.log(`[${time}] ${msg}`);
15+
setEvents((prev) => [...prev.slice(-4), `${time} - ${msg}`]);
16+
};
1717

18-
const handleSubmit = async (data: SubmitData) => {
19-
log('✓ Agreement signed');
20-
console.log('Submit data:', data);
21-
setSubmitted(true);
22-
setSubmitData(data);
23-
};
18+
const handleSubmit = async (data: SubmitData) => {
19+
log('✓ Agreement signed');
20+
console.log('Submit data:', data);
21+
setSubmitted(true);
22+
setSubmitData(data);
23+
};
2424

25-
const handleDownload = async (data: DownloadData) => {
26-
// Send to your backend for DOCX to PDF conversion
27-
const response = await fetch('/v1/convert-to-pdf', {
28-
method: 'POST',
29-
headers: { 'Content-Type': 'application/json' },
30-
body: JSON.stringify(data)
31-
});
25+
const handleDownload = async (data: DownloadData) => {
26+
// Send to your backend for DOCX to PDF conversion
27+
const response = await fetch('/v1/convert-to-pdf', {
28+
method: 'POST',
29+
headers: { 'Content-Type': 'application/json' },
30+
body: JSON.stringify(data),
31+
});
3232

33-
const blob = await response.blob();
34-
const url = URL.createObjectURL(blob);
35-
const a = document.createElement('a');
36-
a.href = url;
37-
a.download = data.fileName;
38-
a.click();
39-
URL.revokeObjectURL(url);
40-
};
33+
const blob = await response.blob();
34+
const url = URL.createObjectURL(blob);
35+
const a = document.createElement('a');
36+
a.href = url;
37+
a.download = data.fileName;
38+
a.click();
39+
URL.revokeObjectURL(url);
40+
};
4141

42-
const handleStateChange = (state: SigningState) => {
43-
if (state.scrolled && !events.some(e => e.includes('Scrolled'))) {
44-
log('↓ Scrolled to bottom');
45-
}
46-
if (state.isValid && !events.some(e => e.includes('Ready'))) {
47-
log('✓ Ready to submit');
48-
}
49-
console.log('State:', state);
50-
};
42+
const handleStateChange = (state: SigningState) => {
43+
if (state.scrolled && !events.some((e) => e.includes('Scrolled'))) {
44+
log('↓ Scrolled to bottom');
45+
}
46+
if (state.isValid && !events.some((e) => e.includes('Ready'))) {
47+
log('✓ Ready to submit');
48+
}
49+
console.log('State:', state);
50+
};
5151

52-
const handleFieldChange = (field: FieldChange) => {
53-
log(`Field "${field.id}": ${field.value}`);
54-
console.log('Field change:', field);
55-
};
52+
const handleFieldChange = (field: FieldChange) => {
53+
log(`Field "${field.id}": ${field.value}`);
54+
console.log('Field change:', field);
55+
};
5656

57-
return (
58-
<div style={{ maxWidth: '900px', margin: '40px auto', padding: '20px' }}>
59-
<header style={{ marginBottom: '40px', textAlign: 'center' }}>
60-
<h1>
61-
<a href="https://www.npmjs.com/package/@superdoc-dev/esign" target="_blank" rel="noopener">
62-
@superdoc-dev/esign
63-
</a>
64-
</h1>
65-
<p style={{ color: '#666' }}>
66-
React eSign component from <a href="https://superdoc.dev" target="_blank" rel="noopener">SuperDoc</a>
67-
</p>
68-
</header>
57+
return (
58+
<div style={{ maxWidth: '900px', margin: '40px auto', padding: '20px' }}>
59+
<header style={{ marginBottom: '40px', textAlign: 'center' }}>
60+
<h1>
61+
<a
62+
href="https://www.npmjs.com/package/@superdoc-dev/esign"
63+
target="_blank"
64+
rel="noopener"
65+
>
66+
@superdoc-dev/esign
67+
</a>
68+
</h1>
69+
<p style={{ color: '#666' }}>
70+
React eSign component from{' '}
71+
<a href="https://superdoc.dev" target="_blank" rel="noopener">
72+
SuperDoc
73+
</a>
74+
</p>
75+
</header>
6976

70-
{submitted ? (
71-
<div style={{ textAlign: 'center', padding: '40px', background: '#f0fdf4', borderRadius: '8px' }}>
72-
<div style={{ fontSize: '48px', marginBottom: '20px' }}>✅</div>
73-
<h2>Agreement Signed!</h2>
74-
<p style={{ color: '#666', marginTop: '10px' }}>
75-
Event ID: {submitData?.eventId}
76-
</p>
77-
{submitData?.signerFields.find(f => f.id === 'signature') && (
78-
<div style={{ marginTop: '20px' }}>
79-
<p style={{ color: '#666', marginBottom: '8px' }}>Signature:</p>
80-
<div style={{
81-
fontFamily: 'cursive',
82-
fontSize: '24px',
83-
padding: '16px',
84-
background: 'white',
85-
borderRadius: '4px',
86-
border: '1px solid #ddd'
87-
}}>
88-
{submitData.signerFields.find(f => f.id === 'signature')?.value}
89-
</div>
90-
</div>
91-
)}
92-
<button
93-
onClick={() => {
94-
setSubmitted(false);
95-
setEvents([]);
96-
}}
97-
style={{
98-
marginTop: '30px',
99-
padding: '12px 24px',
100-
background: '#3b82f6',
101-
color: 'white',
102-
border: 'none',
103-
borderRadius: '6px',
104-
cursor: 'pointer',
105-
fontSize: '16px'
106-
}}
107-
>
108-
Try Again
109-
</button>
110-
</div>
111-
) : (
112-
<>
113-
<h2 style={{ marginBottom: '20px' }}>Employment Agreement</h2>
114-
<p style={{ marginBottom: '16px', color: '#666' }}>
115-
Use the document toolbar to download the current agreement at any time.
116-
</p>
117-
<SuperDocESign
118-
eventId={`demo-${Date.now()}`}
119-
document={{
120-
source: "https://storage.googleapis.com/public_static_hosting/public_demo_docs/service_agreement.docx",
121-
mode: 'full',
122-
validation: {
123-
scroll: { required: true }
124-
}
125-
}}
126-
fields={{
127-
document: [
128-
{ id: 'user_name', value: 'John Doe' },
129-
{ id: 'agreement_date', value: new Date().toLocaleDateString() },
130-
{ id: 'company_name', value: 'SuperDoc' },
131-
{ id: 'service_type', value: 'Premium' },
132-
{ id: 'agreement_jurisdiction', value: 'CA' },
133-
{ id: 'company_address', value: '123 Main St, Anytown, USA' }
134-
],
135-
signer: [
136-
{
137-
id: 'signature',
138-
type: 'signature',
139-
label: 'Your Signature',
140-
validation: { required: true }
141-
},
142-
{
143-
id: 'terms',
144-
type: 'checkbox',
145-
label: 'I accept the terms and conditions',
146-
validation: { required: true }
147-
},
148-
{
149-
id: 'email',
150-
type: 'checkbox',
151-
label: 'Send me a copy of the agreement',
152-
validation: { required: false }
153-
}
154-
]
155-
}}
156-
download={{ label: 'Download PDF' }}
157-
onSubmit={handleSubmit}
158-
onDownload={handleDownload}
159-
onStateChange={handleStateChange}
160-
onFieldChange={handleFieldChange}
161-
documentHeight="500px"
162-
/>
163-
164-
{/* Event Log */}
165-
{events.length > 0 && (
166-
<div style={{
167-
marginTop: '20px',
168-
padding: '12px',
169-
background: '#f9fafb',
170-
border: '1px solid #e5e7eb',
171-
borderRadius: '6px',
172-
fontSize: '13px',
173-
fontFamily: 'monospace'
174-
}}>
175-
<div style={{ fontWeight: 'bold', marginBottom: '8px', fontSize: '12px', color: '#6b7280' }}>
176-
EVENT LOG
177-
</div>
178-
{events.map((evt, i) => (
179-
<div key={i} style={{ padding: '2px 0', color: '#374151' }}>{evt}</div>
180-
))}
181-
</div>
182-
)}
183-
</>
184-
)}
77+
{submitted ? (
78+
<div
79+
style={{
80+
textAlign: 'center',
81+
padding: '40px',
82+
background: '#f0fdf4',
83+
borderRadius: '8px',
84+
}}
85+
>
86+
<div style={{ fontSize: '48px', marginBottom: '20px' }}>✅</div>
87+
<h2>Agreement Signed!</h2>
88+
<p style={{ color: '#666', marginTop: '10px' }}>Event ID: {submitData?.eventId}</p>
89+
{submitData?.signerFields.find((f) => f.id === 'signature') && (
90+
<div style={{ marginTop: '20px' }}>
91+
<p style={{ color: '#666', marginBottom: '8px' }}>Signature:</p>
92+
<div
93+
style={{
94+
fontFamily: 'cursive',
95+
fontSize: '24px',
96+
padding: '16px',
97+
background: 'white',
98+
borderRadius: '4px',
99+
border: '1px solid #ddd',
100+
}}
101+
>
102+
{submitData.signerFields.find((f) => f.id === 'signature')?.value}
103+
</div>
104+
</div>
105+
)}
106+
<button
107+
onClick={() => {
108+
setSubmitted(false);
109+
setEvents([]);
110+
}}
111+
style={{
112+
marginTop: '30px',
113+
padding: '12px 24px',
114+
background: '#3b82f6',
115+
color: 'white',
116+
border: 'none',
117+
borderRadius: '6px',
118+
cursor: 'pointer',
119+
fontSize: '16px',
120+
}}
121+
>
122+
Try Again
123+
</button>
185124
</div>
186-
);
125+
) : (
126+
<>
127+
<h2 style={{ marginBottom: '20px' }}>Employment Agreement</h2>
128+
<p style={{ marginBottom: '16px', color: '#666' }}>
129+
Use the document toolbar to download the current agreement at any time.
130+
</p>
131+
<SuperDocESign
132+
eventId={`demo-${Date.now()}`}
133+
document={{
134+
source:
135+
'https://storage.googleapis.com/public_static_hosting/public_demo_docs/service_agreement.docx',
136+
mode: 'full',
137+
validation: {
138+
scroll: { required: true },
139+
},
140+
}}
141+
fields={{
142+
document: [
143+
{ id: 'user_name', value: 'John Doe' },
144+
{ id: 'agreement_date', value: new Date().toLocaleDateString() },
145+
{ id: 'company_name', value: 'SuperDoc' },
146+
{ id: 'service_type', value: 'Premium' },
147+
{ id: 'agreement_jurisdiction', value: 'CA' },
148+
{ id: 'company_address', value: '123 Main St, Anytown, USA' },
149+
],
150+
signer: [
151+
{
152+
id: 'signature',
153+
type: 'signature',
154+
label: 'Your Signature',
155+
validation: { required: true },
156+
},
157+
{
158+
id: 'terms',
159+
type: 'checkbox',
160+
label: 'I accept the terms and conditions',
161+
validation: { required: true },
162+
},
163+
{
164+
id: 'email',
165+
type: 'checkbox',
166+
label: 'Send me a copy of the agreement',
167+
validation: { required: false },
168+
},
169+
],
170+
}}
171+
download={{ label: 'Download PDF' }}
172+
onSubmit={handleSubmit}
173+
onDownload={handleDownload}
174+
onStateChange={handleStateChange}
175+
onFieldChange={handleFieldChange}
176+
documentHeight="500px"
177+
/>
178+
179+
{/* Event Log */}
180+
{events.length > 0 && (
181+
<div
182+
style={{
183+
marginTop: '20px',
184+
padding: '12px',
185+
background: '#f9fafb',
186+
border: '1px solid #e5e7eb',
187+
borderRadius: '6px',
188+
fontSize: '13px',
189+
fontFamily: 'monospace',
190+
}}
191+
>
192+
<div
193+
style={{
194+
fontWeight: 'bold',
195+
marginBottom: '8px',
196+
fontSize: '12px',
197+
color: '#6b7280',
198+
}}
199+
>
200+
EVENT LOG
201+
</div>
202+
{events.map((evt, i) => (
203+
<div key={i} style={{ padding: '2px 0', color: '#374151' }}>
204+
{evt}
205+
</div>
206+
))}
207+
</div>
208+
)}
209+
</>
210+
)}
211+
</div>
212+
);
187213
}

0 commit comments

Comments
 (0)