@metricshift/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MetricShift
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,323 @@
+# @metricshift/react
+
+The intelligent feedback SDK for React applications. Collect, store, and analyze user feedback with built-in AI insights — in minutes, not weeks.
+
+[![npm version](https://img.shields.io/npm/v/@metricshift/react.svg)](https://www.npmjs.com/package/@metricshift/react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🚀 **2-Minute Setup** - Add powerful feedback collection to your React app instantly
+- 🎨 **Fully Customizable** - Match your brand with custom colors, sizes, and styles
+- 🤖 **AI-Powered Insights** - Automatic sentiment analysis and theme detection with GPT-4
+- 📊 **Beautiful Dashboard** - View trends, export data, and discover insights
+- ♿ **Accessible** - WCAG compliant with keyboard navigation and ARIA labels
+- 📱 **Mobile-Ready** - Perfect experience on any device
+- 🔒 **Privacy-First** - GDPR compliant, you control your data
+- 🎯 **TypeScript** - Full type safety included
+
+## 📦 Installation
+```bash
+npm install @metricshift/react
+```
+
+or
+```bash
+yarn add @metricshift/react
+```
+
+## 🚀 Quick Start
+
+### 1. Sign up for MetricShift
+
+Create your free account at [metricshift.co](https://metricshift.co) to get your credentials.
+
+### 2. Add the Feedback Button
+```tsx
+import { FeedbackButton } from '@metricshift/react';
+
+function App() {
+  return (
+    <div>
+      <h1>My Awesome App</h1>
+      
+      {/* Feedback button in bottom-right corner */}
+      <FeedbackButton
+        projectId="your-project-id"
+        apiKey="your-api-key"
+      />
+    </div>
+  );
+}
+```
+
+### 3. View Feedback & Insights
+
+Log in to your [MetricShift dashboard] to:
+- View all feedback in real-time
+- See AI-generated sentiment analysis
+- Discover common themes automatically
+- Export data to CSV
+- Track trends over time
+
+That's it! 🎉
+
+## 📚 Usage Examples
+
+### Default Floating Button
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+/>
+```
+
+Perfect for most apps - floats in the bottom-right corner.
+
+### Custom Styled Button
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+  buttonText="Share Feedback"
+  buttonColor="#10b981"
+  buttonHoverColor="#059669"
+  size="large"
+  position="bottom-left"
+/>
+```
+
+Match your brand colors and position.
+
+### Inline Button
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+  position="inline"
+  buttonText="Help us improve"
+  showIcon={false}
+/>
+```
+
+Perfect for embedding in your UI, forms, or settings pages.
+
+### With Event Callbacks
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+  onSuccess={(feedbackId) => {
+    // Track in your analytics
+    analytics.track('Feedback Submitted', { feedbackId });
+    // Show thank you message
+    toast.success('Thanks for your feedback!');
+  }}
+  onError={(error) => {
+    // Handle errors gracefully
+    console.error('Feedback error:', error);
+  }}
+/>
+```
+
+Integrate with your existing analytics and notification systems.
+
+### Multiple Feedback Buttons
+```tsx
+function App() {
+  return (
+    <div>
+      {/* Bug report button in header */}
+      <header>
+        <FeedbackButton
+          projectId="your-project-id"
+          apiKey="your-api-key"
+          position="inline"
+          buttonText="Report Bug"
+          buttonColor="#ef4444"
+          size="small"
+        />
+      </header>
+      
+      {/* General feedback floating button */}
+      <FeedbackButton
+        projectId="your-project-id"
+        apiKey="your-api-key"
+        position="bottom-right"
+      />
+    </div>
+  );
+}
+```
+
+## 🎛️ Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `projectId` | `string` | **required** | Your MetricShift project ID |
+| `apiKey` | `string` | **required** | Your MetricShift API key |
+| `apiUrl` | `string` | `'https://api.metricshift.co'` | API endpoint (rarely needs changing) |
+| `buttonText` | `string` | `'Feedback'` | Text displayed on the button |
+| `showIcon` | `boolean` | `true` | Show/hide the 💬 icon |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'inline'` | `'bottom-right'` | Button position |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
+| `buttonColor` | `string` | `'#3b82f6'` | Button background color |
+| `buttonHoverColor` | `string` | `'#2563eb'` | Hover state color |
+| `buttonTextColor` | `string` | `'#ffffff'` | Text color |
+| `customStyles` | `CSSProperties` | `{}` | Additional CSS styles |
+| `customClassName` | `string` | `''` | Custom CSS class |
+| `disabled` | `boolean` | `false` | Disable the button |
+| `autoOpen` | `boolean` | `false` | Auto-open modal on mount |
+| `onOpen` | `() => void` | - | Callback when modal opens |
+| `onClose` | `() => void` | - | Callback when modal closes |
+| `onSuccess` | `(feedbackId: string) => void` | - | Callback on successful submission |
+| `onError` | `(error: Error) => void` | - | Callback on error |
+
+## 🎨 Styling Examples
+
+### Match Your Brand
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+  buttonColor="#FF6B6B"  // Your primary color
+  buttonHoverColor="#EE5A52"  // Slightly darker
+  buttonTextColor="#FFFFFF"
+  customStyles={{
+    fontFamily: 'YourCustomFont, sans-serif',
+    borderRadius: '12px',
+    boxShadow: '0 4px 12px rgba(255, 107, 107, 0.3)'
+  }}
+/>
+```
+
+### Minimal Style
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+  showIcon={false}
+  buttonColor="transparent"
+  buttonHoverColor="#f3f4f6"
+  buttonTextColor="#111827"
+  customStyles={{
+    border: '1px solid #e5e7eb',
+    fontWeight: '400'
+  }}
+/>
+```
+
+### Pill Shape
+```tsx
+<FeedbackButton
+  projectId="your-project-id"
+  apiKey="your-api-key"
+  customStyles={{
+    borderRadius: '999px',
+    padding: '12px 24px'
+  }}
+/>
+```
+
+## 📊 Dashboard Features
+
+Your MetricShift dashboard includes:
+
+- **Real-time Feedback Stream** - See submissions as they happen
+- **AI Sentiment Analysis** - Automatic positive/neutral/negative classification
+- **Theme Detection** - GPT-4 identifies common topics and patterns
+- **Advanced Filters** - Filter by type, sentiment, date, rating
+- **Export to CSV** - Download your data anytime
+- **Analytics & Trends** - Visualize feedback over time
+- **Search** - Find specific feedback instantly
+
+[View Dashboard →](https://metricshift.co/dashboard)
+
+## 💼 Pricing
+
+- **Free** - 100 feedback submissions/month
+- **Pro** - Starting at €19/month for growing teams
+- **Enterprise** - Custom solutions, self-hosted options available
+
+[View pricing →](https://metricshift.co/pricing)
+
+## 🔧 TypeScript Support
+
+Full TypeScript definitions included! Get autocomplete and type safety:
+```tsx
+import { FeedbackButton, FeedbackButtonProps } from '@metricshift/react';
+
+const props: FeedbackButtonProps = {
+  projectId: 'abc123',
+  apiKey: 'xyz789',
+  onSuccess: (id: string) => console.log(id)
+};
+
+<FeedbackButton {...props} />
+```
+
+## 🌍 Framework Support
+
+Works with any React framework:
+
+- ✅ **Create React App**
+- ✅ **Next.js** (App Router & Pages Router)
+- ✅ **Vite**
+- ✅ **Remix**
+- ✅ **Gatsby**
+
+## ❓ FAQ
+
+### Can I customize the feedback form?
+
+The form fields are standardized to ensure quality data collection and AI analysis. However, you can customize:
+- Button appearance and position
+- Colors and styling
+- Form behavior via callbacks
+
+### Where is my data stored?
+
+Data is securely stored on MetricShift's cloud infrastructure with regular backups. Enterprise customers can request self-hosted deployments.
+
+### Is this GDPR compliant?
+
+Yes! MetricShift is GDPR compliant. Email collection is optional, and users can request data deletion at any time.
+
+### Can I use this with multiple projects?
+
+Yes! Each project gets its own `projectId` and `apiKey`. Install the SDK in each project and use different credentials.
+
+### What's included in the free tier?
+
+- 100 feedback submissions per month
+- AI sentiment analysis
+- Theme detection
+- Full dashboard access
+- CSV export
+
+## 🤝 Support & Resources
+
+- 📧 **Email**: niklas@iamfrontend.com
+- 📖 **Documentation**: [docs.metricshift.co](https://metricshift.co/docs)
+- 🐛 **Issues**: Report bugs via email
+- 🌐 **Website**: [metricshift.co](https://metricshift.co)
+
+## 🚀 What's Next?
+
+After installing the SDK:
+
+1. **Customize the button** to match your brand
+2. **Test it out** by submitting feedback
+3. **Explore your dashboard** to see AI insights
+4. **Set up notifications** to get alerts for new feedback
+5. **Export data** and integrate with your workflow
+
+## 📝 License
+
+MIT © [MetricShift](https://metricshift.co)
+
+---
+
+**Built with ❤️ for product teams who care about their users**
+
+[Get Started Free](https://metricshift.co/signup) 

package/dist/components/FeedbackButton.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+
+export interface FeedbackButtonProps {
+    projectId: string;
+    apiKey?: string;
+    apiUrl?: string;
+    buttonText?: string;
+    showIcon?: boolean;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'inline';
+    size?: 'small' | 'medium' | 'large';
+    buttonColor?: string;
+    buttonHoverColor?: string;
+    buttonTextColor?: string;
+    customStyles?: React.CSSProperties;
+    customClassName?: string;
+    disabled?: boolean;
+    autoOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSuccess?: (feedbackId: string) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * FeedbackButton Component
+ *
+ * A customizable button that opens a feedback modal when clicked.
+ * Collects and submits user feedback to your MetricShift backend.
+ *
+ * @example
+ * ```tsx
+ * <FeedbackButton
+ *   projectId="your-project-id"
+ *   apiKey="your-api-key"
+ *   position="bottom-right"
+ *   size="medium"
+ *   buttonColor="#3b82f6"
+ * />
+ * ```
+ */
+export declare const FeedbackButton: React.FC<FeedbackButtonProps>;
+//# sourceMappingURL=FeedbackButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackButton.d.ts","sourceRoot":"","sources":["../../src/components/FeedbackButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;IAGhF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAGpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoLxD,CAAC"}

package/dist/components/FeedbackModal.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+interface FeedbackModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: FeedbackFormData) => Promise<void>;
+}
+export interface FeedbackFormData {
+    text: string;
+    rating?: number;
+    feedbackType: 'general' | 'bug' | 'feature_request' | 'question' | 'praise';
+    userEmail?: string;
+    userName?: string;
+}
+export declare const FeedbackModal: React.FC<FeedbackModalProps>;
+export {};
+//# sourceMappingURL=FeedbackModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackModal.d.ts","sourceRoot":"","sources":["../../src/components/FeedbackModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,SAAS,GAAG,KAAK,GAAG,iBAAiB,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgdtD,CAAC"}

package/dist/components/MetricShiftProvider.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { MetricShiftConfig } from '../types';
+
+export declare const useMetricShift: () => MetricShiftConfig;
+interface MetricShiftProviderProps {
+    config: MetricShiftConfig;
+    children: React.ReactNode;
+}
+/**
+ * MetricShiftProvider Component
+ *
+ * Provides MetricShift configuration to child components via React Context.
+ * Will be fully implemented in Week 2.
+ */
+export declare const MetricShiftProvider: React.FC<MetricShiftProviderProps>;
+export {};
+//# sourceMappingURL=MetricShiftProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricShiftProvider.d.ts","sourceRoot":"","sources":["../../src/components/MetricShiftProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,eAAO,MAAM,cAAc,yBAM1B,CAAC;AAEF,UAAU,wBAAwB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CASlE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export { FeedbackButton } from './components/FeedbackButton';
+export { FeedbackModal } from './components/FeedbackModal';
+export { MetricShiftProvider, useMetricShift } from './components/MetricShiftProvider';
+export type { FeedbackButtonProps } from './components/FeedbackButton';
+export type { FeedbackFormData } from './components/FeedbackModal';
+export { submitFeedback } from './utils/api';
+export interface MetricShiftConfig {
+    projectId: string;
+    apiKey?: string;
+    apiUrl?: string;
+}
+export declare const MetricShift: {
+    /**
+     * Initialize the MetricShift SDK
+     * @param config - SDK configuration
+     */
+    init: (config: MetricShiftConfig) => void;
+    /**
+     * Get current SDK configuration
+     */
+    getConfig: () => MetricShiftConfig | null;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvF,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,YAAY,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,eAAO,MAAM,WAAW;IACtB;;;OAGG;mBACY,iBAAiB;IAWhC;;OAEG;;CAEJ,CAAC"}