@contember/echo 0.0.18

package/README.md

@@ -0,0 +1,101 @@
+# Echo Widget
+
+A lightweight feedback widget built with Solid.js that allows users to capture screenshots, annotate them, and submit feedback.
+
+## Usage
+
+### Using as an NPM Package
+
+```typescript
+import { initEcho } from '@contember/echo';
+
+initEcho({
+  // Optional: widget position (default: 'bottom-right')
+  position: 'bottom-right',
+  
+  // Optional: primary color for buttons and UI elements
+  primaryColor: '#007AFF',
+
+  // Optional: customize all text elements in the widget
+  textConfig: {
+    welcomeMessage: {
+      text: 'Click here to leave feedback',
+      closeAriaLabel: 'Close welcome message',
+    },
+    feedbackForm: {
+      title: 'Send Feedback',
+      placeholder: "What's on your mind? We'd love to hear your feedback...",
+      screenshotAlt: 'Screenshot Preview',
+      submitButton: 'Send Feedback',
+      minimizeTitle: 'Minimize',
+      expandTitle: 'Expand',
+      closeTitle: 'Close',
+      showFormTitle: 'Show Feedback Form',
+    },
+    notification: {
+      successTitle: 'Thank you for your feedback!',
+      errorTitle: 'Something went wrong.',
+      errorMessage: 'Failed to send feedback. Please try again.',
+      hideTitle: 'Hide notification',
+    },
+    drawingTooltip: {
+      text: 'Click & drag to draw',
+    },
+  },
+  
+  // Required: callback function when feedback is submitted
+  onSubmit: async (data) => {
+    console.log('Feedback submitted:', data);
+    // Handle the feedback data (send to server, etc.)
+  }
+});
+```
+
+### Using Directly in HTML
+
+```html
+<script type="module">
+  import { initEcho } from "https://esm.sh/@contember/echo";
+
+  initEcho({
+    // Optional: widget position (default: 'bottom-right')
+    position: 'bottom-right',
+    
+    // Optional: primary color for buttons and UI elements
+    primaryColor: '#007AFF',
+
+    // Optional: customize all text elements in the widget
+    textConfig: {
+      welcomeMessage: {
+        text: 'Click here to leave feedback',
+        closeAriaLabel: 'Close welcome message',
+      },
+      feedbackForm: {
+        title: 'Send Feedback',
+        placeholder: "What's on your mind? We'd love to hear your feedback...",
+        screenshotAlt: 'Screenshot Preview',
+        submitButton: 'Send Feedback',
+        minimizeTitle: 'Minimize',
+        expandTitle: 'Expand',
+        closeTitle: 'Close',
+        showFormTitle: 'Show Feedback Form',
+      },
+      notification: {
+        successTitle: 'Thank you for your feedback!',
+        errorTitle: 'Something went wrong.',
+        errorMessage: 'Failed to send feedback. Please try again.',
+        hideTitle: 'Hide notification',
+      },
+      drawingTooltip: {
+        text: 'Click & drag to draw',
+      },
+    },
+
+    // Required: callback function when feedback is submitted
+    onSubmit: async (data) => {
+      console.log('Feedback submitted:', data);
+      // Handle the feedback data (send to server, etc.)
+    }
+  });
+</script>
+```

package/dist/components/Echo.d.ts

@@ -0,0 +1,3 @@
+import { type Component } from 'solid-js';
+import type { EchoOptions } from '~/types';
+export declare const Echo: Component<EchoOptions>;

package/dist/components/EchoLayout.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'solid-js';
+import type { Position } from '~/types';
+interface EchoLayoutProps {
+    position?: Position;
+}
+export declare const EchoLayout: Component<EchoLayoutProps>;
+export {};

package/dist/components/Launcher.d.ts

@@ -0,0 +1,6 @@
+import type { Component, JSXElement } from 'solid-js';
+interface LauncherProps {
+    children: JSXElement;
+}
+export declare const Launcher: Component<LauncherProps>;
+export {};

package/dist/components/Overlay.d.ts

@@ -0,0 +1,4 @@
+import type { Component, JSX } from 'solid-js';
+export declare const Overlay: Component<{
+    children: JSX.Element;
+}>;

package/dist/components/atoms/Button.d.ts

@@ -0,0 +1,9 @@
+import type { Component, JSX } from 'solid-js';
+import type { EnrichedStylesConfig } from '~/types';
+type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'secondary';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+export declare const Button: Component<ButtonProps>;
+export declare const buttonStyles: (config: EnrichedStylesConfig) => string;
+export {};

package/dist/components/atoms/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/icons/CheckCircleIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const CheckCircleIcon: Component<IconProps>;

package/dist/components/icons/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const ChevronRightIcon: Component<IconProps>;

package/dist/components/icons/ContemberIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const ContemberIcon: Component<IconProps>;

package/dist/components/icons/ExternalLinkIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const ExternalLinkIcon: Component<IconProps>;

package/dist/components/icons/HighlightIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const HighlightIcon: Component<IconProps>;

package/dist/components/icons/MessageIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const MessageIcon: Component<IconProps>;

package/dist/components/icons/PenIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const PenIcon: Component<IconProps>;

package/dist/components/icons/TrashIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const TrashIcon: Component<IconProps>;

package/dist/components/icons/XCircleIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const XCircleIcon: Component<IconProps>;

package/dist/components/icons/XIcon.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IconProps } from '~/types';
+export declare const XIcon: Component<IconProps>;

package/dist/components/icons/index.d.ts

@@ -0,0 +1,9 @@
+export * from './MessageIcon';
+export * from './ChevronRightIcon';
+export * from './ContemberIcon';
+export * from './HighlightIcon';
+export * from './PenIcon';
+export * from './TrashIcon';
+export * from './CheckCircleIcon';
+export * from './XCircleIcon';
+export * from './XIcon';

package/dist/config/defaultText.d.ts

@@ -0,0 +1,2 @@
+import type { TextConfig } from '~/types';
+export declare const defaultText: TextConfig;

package/dist/config/drawingConfig.d.ts

@@ -0,0 +1,18 @@
+import type { DrawingTool } from '~/types';
+interface ToolConfig {
+    id: DrawingTool;
+    label: string;
+    cursor: string;
+    strokeWidth: {
+        active: number;
+        normal: number;
+        selected: number;
+    };
+    opacity: {
+        active: number;
+        normal: number;
+    };
+    hysteresis?: number;
+}
+export declare const drawingConfig: Record<DrawingTool, ToolConfig>;
+export {};

package/dist/contexts/EchoContext.d.ts

@@ -0,0 +1,12 @@
+import { type Component } from 'solid-js';
+import { type EchoStore } from '~/stores';
+import type { FeedbackData, TextConfig } from '~/types';
+interface EchoProviderProps {
+    primaryColor: string;
+    onSubmit: (data: FeedbackData) => Promise<void>;
+    textConfig?: Partial<TextConfig>;
+    children: any;
+}
+export declare const EchoProvider: Component<EchoProviderProps>;
+export declare const useEchoStore: () => EchoStore;
+export {};

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './EchoContext';