feat: enhance document download and UI components in app (#1)

* feat: enhance document download and UI components in App

* chore: add commitlint configuration for conventional commit messages

* chore: add commitlint and conventional commit configuration to devDependencies

* chore: add data-testid attributes for testing in SuperDocESign component

Author: caio-pizzol

demo/src/App.tsx

@@ -111,6 +111,9 @@ export function App() {
             ) : (
                 <>
                     <h2 style={{ marginBottom: '20px' }}>Employment Agreement</h2>
+                    <p style={{ marginBottom: '16px', color: '#666' }}>
+                        Use the document toolbar to download the current agreement at any time.
+                    </p>
                     <SuperDocESign
                         eventId={`demo-${Date.now()}`}
                         document={{
@@ -144,6 +147,7 @@ export function App() {
                                 }
                             ]
                         }}
+                        download={{ label: 'Download PDF' }}
                         onSubmit={handleSubmit}
                         onDownload={handleDownload}
                         onStateChange={handleStateChange}
@@ -174,4 +178,4 @@ export function App() {
             )}
         </div>
     );
-}
+}

demo/src/index.css

@@ -8,4 +8,28 @@ body {
     font-family: system-ui, -apple-system, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
+}
+
+.superdoc-esign-document {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #ffffff;
+}
+
+.superdoc-esign-document-toolbar {
+    background: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.superdoc-esign-document-controls {
+    justify-content: flex-end;
+}
+
+.superdoc-esign-document-viewer {
+    background: #ffffff;
+}
+
+.superdoc-esign-form-actions {
+    justify-content: flex-end;
+}