@formsnip/embed 1.0.0

package/README.md

@@ -0,0 +1,79 @@
+# @formsnip/embed
+
+React component for embedding FormSnip forms in your React applications.
+
+## Installation
+
+```bash
+npm install @formsnip/embed
+# or
+yarn add @formsnip/embed
+# or
+pnpm add @formsnip/embed
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { FormSnip } from '@formsnip/embed';
+
+function App() {
+  return (
+    <div>
+      <FormSnip formId="your-form-id" />
+    </div>
+  );
+}
+```
+
+### With Custom Base URL
+
+```tsx
+import { FormSnip } from '@formsnip/embed';
+
+function App() {
+  return (
+    <FormSnip
+      formId="your-form-id"
+      baseUrl="https://api.formsnip.com"
+      onSuccess={(data) => {
+        console.log('Form submitted successfully!', data);
+      }}
+      onError={(error) => {
+        console.error('Form submission error:', error);
+      }}
+      className="my-custom-class"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `formId` | `string` | Yes | - | The ID of the form to embed |
+| `baseUrl` | `string` | No | `'https://api.formsnip.com'` | The base URL of the FormSnip API |
+| `onSuccess` | `(data: any) => void` | No | - | Callback fired when form is submitted successfully |
+| `onError` | `(error: string) => void` | No | - | Callback fired when an error occurs |
+| `className` | `string` | No | `''` | Additional CSS class names for the form container |
+
+## Features
+
+- ✅ Full form rendering with all field types
+- ✅ File upload support (images, PDFs, videos, audio)
+- ✅ Custom styling support (via embed styles from form settings)
+- ✅ TypeScript support
+- ✅ Error handling
+- ✅ Loading states
+
+## Requirements
+
+- React >= 16.8.0
+- React DOM >= 16.8.0
+
+## License
+
+MIT

package/dist/FormSnip.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormSnipProps } from './types';
+export declare const FormSnip: React.FC<FormSnipProps>;
+//# sourceMappingURL=FormSnip.d.ts.map

package/dist/FormSnip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSnip.d.ts","sourceRoot":"","sources":["../src/FormSnip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAQ,aAAa,EAAsB,MAAM,SAAS,CAAC;AAOlE,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4W5C,CAAC"}

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface FileUploadProps {
+    id: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    multiple?: boolean;
+    onFilesChange: (files: File[]) => void;
+    uploadedFiles?: string[];
+    uploading?: boolean;
+    error?: string;
+    className?: string;
+}
+export declare const FileUpload: React.FC<FileUploadProps>;
+export {};
+//# sourceMappingURL=FileUpload.d.ts.map

package/dist/components/FileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../src/components/FileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2NhD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+
+interface FormField {
+    id: string;
+    type: 'text' | 'email' | 'textarea' | 'number' | 'date' | 'checkbox' | 'radio' | 'file';
+    label: string;
+    placeholder?: string;
+    required: boolean;
+    position: number;
+    isActive: boolean;
+}
+interface Form {
+    _id: string;
+    name: string;
+    description?: string;
+    fields: FormField[];
+    submitButtonText: string;
+    embedStyles?: {
+        field?: {
+            backgroundColor?: string;
+            color?: string;
+            borderColor?: string;
+            borderRadius?: number;
+            paddingX?: number;
+            paddingY?: number;
+        };
+        button?: {
+            backgroundColor?: string;
+            color?: string;
+            borderColor?: string;
+            borderRadius?: number;
+            paddingX?: number;
+            paddingY?: number;
+        };
+    };
+}
+interface FormSnipProps {
+    formId: string;
+    baseUrl?: string;
+    onSuccess?: (data: any) => void;
+    onError?: (error: string) => void;
+    className?: string;
+}
+interface SubmissionResponse {
+    success: boolean;
+    data?: any;
+    message?: string;
+}
+
+declare const FormSnip: React.FC<FormSnipProps>;
+
+interface FileUploadProps {
+    id: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    multiple?: boolean;
+    onFilesChange: (files: File[]) => void;
+    uploadedFiles?: string[];
+    uploading?: boolean;
+    error?: string;
+    className?: string;
+}
+declare const FileUpload: React.FC<FileUploadProps>;
+
+declare const ALLOWED_FILE_EXTENSIONS = ".jpg,.jpeg,.png,.gif,.webp,.svg,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac";
+declare const MAX_TOTAL_FILE_SIZE: number;
+interface UploadResult {
+    success: boolean;
+    fileKey?: string;
+    error?: string;
+}
+interface UploadMultipleResult {
+    success: boolean;
+    fileKeys?: string[];
+    errors?: string[];
+}
+/**
+ * Upload a file to R2 via presigned URL
+ */
+declare function uploadFile(file: File, formId: string, baseUrl: string): Promise<UploadResult>;
+/**
+ * Upload multiple files to R2
+ */
+declare function uploadFiles(files: File[], formId: string, baseUrl: string): Promise<UploadMultipleResult>;
+
+export { ALLOWED_FILE_EXTENSIONS, FileUpload, FormSnip, MAX_TOTAL_FILE_SIZE, uploadFile, uploadFiles };
+export type { Form, FormField, FormSnipProps, SubmissionResponse, UploadMultipleResult, UploadResult };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}