@feedlog-ai/react 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,238 @@
+# @feedlog-ai/react
+
+React bindings for Feedlog Toolkit web components. Auto-generated from Stencil components with full TypeScript support.
+
+## Features
+
+- **React Components**: Native React components with JSX support
+- **TypeScript Support**: Full type safety with TypeScript definitions
+- **Auto-generated**: Generated from Stencil web components for consistency
+- **Event Handling**: React-friendly event handling with proper typing
+- **Peer Dependencies**: React >=17.0.0 and React DOM >=17.0.0
+- **Tree Shakeable**: Only import the components you need
+
+## Installation
+
+```bash
+npm install @feedlog-ai/react
+```
+
+## Components
+
+### FeedlogGithubIssuesClient
+
+The main component for displaying GitHub issues with built-in SDK integration.
+
+**Props:**
+
+- `apiKey`: API key for Feedlog authentication (required)
+- `type?`: Filter by issue type - `'bug'` or `'enhancement'`
+- `limit?`: Maximum issues to fetch (1-100, default: 10)
+- `endpoint?`: Custom API endpoint
+- `maxWidth?`: Container max width (default: `'42rem'`)
+- `theme?`: Theme variant - `'light'` or `'dark'` (default: `'light'`)
+- `showThemeToggle?`: Show theme toggle button (default: `true`)
+
+**Events:**
+
+- `onFeedlogUpvote`: Called when an issue is upvoted
+- `onFeedlogThemeChange`: Called when theme changes
+- `onFeedlogError`: Called on errors
+
+## Usage
+
+```tsx
+import React from 'react';
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/react';
+
+function App() {
+  return (
+    <div>
+      <FeedlogGithubIssuesClient
+        apiKey="your-api-key"
+        type="bug"
+        limit={10}
+        theme="light"
+        maxWidth="42rem"
+        onFeedlogUpvote={event => {
+          console.log('Issue upvoted:', event.detail);
+          // event.detail contains: { issueId, upvoted, upvoteCount }
+        }}
+        onFeedlogThemeChange={event => {
+          console.log('Theme changed to:', event.detail); // 'light' or 'dark'
+        }}
+        onFeedlogError={event => {
+          console.error('Error occurred:', event.detail);
+          // event.detail contains: { error, code? }
+        }}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Event Handling
+
+```tsx
+import React, { useCallback } from 'react';
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/react';
+
+function IssuesComponent() {
+  const handleUpvote = useCallback((event: CustomEvent) => {
+    const { issueId, upvoted, upvoteCount } = event.detail;
+    console.log(`Issue ${issueId} ${upvoted ? 'upvoted' : 'unvoted'}`);
+    console.log(`New upvote count: ${upvoteCount}`);
+  }, []);
+
+  const handleThemeChange = useCallback((event: CustomEvent<'light' | 'dark'>) => {
+    console.log(`Theme changed to: ${event.detail}`);
+    // Update your app's theme state here
+  }, []);
+
+  const handleError = useCallback((event: CustomEvent) => {
+    const { error, code } = event.detail;
+    console.error(`Feedlog error (${code}):`, error);
+    // Handle error in your UI
+  }, []);
+
+  return (
+    <FeedlogGithubIssuesClient
+      apiKey="your-api-key"
+      onFeedlogUpvote={handleUpvote}
+      onFeedlogThemeChange={handleThemeChange}
+      onFeedlogError={handleError}
+    />
+  );
+}
+```
+
+### With State Management
+
+```tsx
+import React, { useState, useCallback } from 'react';
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/react';
+
+function IssuesWithState() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleThemeChange = useCallback((event: CustomEvent<'light' | 'dark'>) => {
+    setTheme(event.detail);
+  }, []);
+
+  const handleError = useCallback((event: CustomEvent) => {
+    setError(event.detail.error);
+    // Clear error after 5 seconds
+    setTimeout(() => setError(null), 5000);
+  }, []);
+
+  return (
+    <div>
+      {error && <div className="error-banner">Error: {error}</div>}
+
+      <FeedlogGithubIssuesClient
+        apiKey="your-api-key"
+        theme={theme}
+        onFeedlogThemeChange={handleThemeChange}
+        onFeedlogError={handleError}
+      />
+    </div>
+  );
+}
+```
+
+### Other Components
+
+The package also includes React bindings for additional UI components:
+
+```tsx
+import {
+  FeedlogBadge,
+  FeedlogButton,
+  FeedlogCard,
+  FeedlogGithubIssues,
+  FeedlogIssuesList
+} from '@feedlog-ai/react';
+
+// Badge component
+<FeedlogBadge variant="primary" text="New" />
+
+// Button component
+<FeedlogButton variant="primary" size="lg" onFeedlogClick={handleClick}>
+  Click me
+</FeedlogButton>
+
+// Card component
+<FeedlogCard>
+  <h3>Card Title</h3>
+  <p>Card content</p>
+</FeedlogCard>
+```
+
+## TypeScript Support
+
+All components are fully typed. Import types from the core package if needed:
+
+```tsx
+import { FeedlogIssue } from '@feedlog-ai/core';
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/react';
+
+// Type-safe event handling
+const handleUpvote = (
+  event: CustomEvent<{
+    issueId: string;
+    upvoted: boolean;
+    upvoteCount: number;
+  }>
+) => {
+  // Fully typed event detail
+  console.log(event.detail.issueId);
+  console.log(event.detail.upvoted);
+  console.log(event.detail.upvoteCount);
+};
+```
+
+## Requirements
+
+- React >= 17.0.0
+- React DOM >= 17.0.0
+- Modern browsers with Web Components support
+
+## Browser Support
+
+Same as the underlying web components:
+
+- Chrome 61+
+- Firefox 63+
+- Safari 11+
+- Edge 79+
+
+## Migration from Direct Web Components
+
+If you're migrating from using web components directly:
+
+```tsx
+// Before (direct web component)
+<feedlog-github-issues-client
+  api-key="key"
+  onFeedlogUpvote={(e) => console.log(e.detail)}
+/>
+
+// After (React component)
+<FeedlogGithubIssuesClient
+  apiKey="key"
+  onFeedlogUpvote={(e) => console.log(e.detail)}
+/>
+```
+
+**Key differences:**
+
+- `api-key` → `apiKey` (camelCase)
+- Event handlers follow React conventions
+- All props are properly typed
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedlog-ai/react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React bindings for Feedlog Toolkit Web Components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -28,7 +28,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@feedlog-ai/webcomponents": "*"
+    "@feedlog-ai/webcomponents": "workspace:*"
   },
   "devDependencies": {
     "@jest/test-sequencer": "^29.7.0",
@@ -51,5 +51,8 @@
     "components",
     "data-visualization"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/dist/index.d.ts

@@ -1,39 +0,0 @@
-/**
- * React bindings for Feedlog Toolkit Web Components
- *
- * This package provides React components that wrap the Stencil web components.
- * Components are manually created to avoid Stencil generation issues.
- */
-import React from 'react';
-import { FeedlogIssue } from '@feedlog-ai/core';
-export declare const FeedlogBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    variant?: string;
-} & React.RefAttributes<HTMLElement>>;
-export declare const FeedlogButton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    size?: string;
-    variant?: string;
-    disabled?: boolean;
-    type?: string;
-    onFeedlogClick?: (event: CustomEvent<MouseEvent>) => void;
-} & React.RefAttributes<HTMLElement>>;
-export declare const FeedlogCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export declare const FeedlogGithubIssues: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    issues?: FeedlogIssue[];
-    theme?: string;
-    loading?: boolean;
-    onFeedlogUpvote?: (event: CustomEvent<{
-        issueId: string;
-        currentUpvoted: boolean;
-        currentCount: number;
-    }>) => void;
-} & React.RefAttributes<HTMLElement>>;
-export declare const FeedlogGithubIssuesClient: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export declare const FeedlogIssuesList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    issues?: FeedlogIssue[];
-    onFeedlogUpvote?: (event: CustomEvent<{
-        issueId: string;
-        currentUpvoted: boolean;
-        currentCount: number;
-    }>) => void;
-} & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIhD,eAAO,MAAM,YAAY;cAEyB,MAAM;qCAGvD,CAAC;AAGF,eAAO,MAAM,aAAa;WAGf,MAAM;cACH,MAAM;eACL,OAAO;WACX,MAAM;qBACI,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,IAAI;qCAI5D,CAAC;AAGF,eAAO,MAAM,WAAW,uGAEvB,CAAC;AAGF,eAAO,MAAM,mBAAmB;aAGnB,YAAY,EAAE;YACf,MAAM;cACJ,OAAO;sBACC,CAChB,KAAK,EAAE,WAAW,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,cAAc,EAAE,OAAO,CAAC;QACxB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC,KACC,IAAI;qCAIZ,CAAC;AAGF,eAAO,MAAM,yBAAyB,uGAKrC,CAAC;AAGF,eAAO,MAAM,iBAAiB;aAGjB,YAAY,EAAE;sBACL,CAChB,KAAK,EAAE,WAAW,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,cAAc,EAAE,OAAO,CAAC;QACxB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC,KACC,IAAI;qCAIZ,CAAC"}

package/dist/index.js

@@ -1,26 +0,0 @@
-/**
- * React bindings for Feedlog Toolkit Web Components
- *
- * This package provides React components that wrap the Stencil web components.
- * Components are manually created to avoid Stencil generation issues.
- */
-import React from 'react';
-import { defineCustomElements } from '@feedlog-ai/webcomponents/loader';
-// Simple React wrappers for web components
-export const FeedlogBadge = React.forwardRef(({ children, ...props }, ref) => React.createElement('feedlog-badge', { ...props, ref }, children));
-FeedlogBadge.displayName = 'FeedlogBadge';
-export const FeedlogButton = React.forwardRef(({ children, ...props }, ref) => React.createElement('feedlog-button', { ...props, ref }, children));
-FeedlogButton.displayName = 'FeedlogButton';
-export const FeedlogCard = React.forwardRef(({ children, ...props }, ref) => React.createElement('feedlog-card', { ...props, ref }, children));
-FeedlogCard.displayName = 'FeedlogCard';
-export const FeedlogGithubIssues = React.forwardRef(({ children, ...props }, ref) => React.createElement('feedlog-github-issues', { ...props, ref }, children));
-FeedlogGithubIssues.displayName = 'FeedlogGithubIssues';
-export const FeedlogGithubIssuesClient = React.forwardRef(({ children, ...props }, ref) => React.createElement('feedlog-github-issues-client', { ...props, ref }, children));
-FeedlogGithubIssuesClient.displayName = 'FeedlogGithubIssuesClient';
-export const FeedlogIssuesList = React.forwardRef(({ children, ...props }, ref) => React.createElement('feedlog-issues-list', { ...props, ref }, children));
-FeedlogIssuesList.displayName = 'FeedlogIssuesList';
-// Auto-define custom elements when this module is imported
-if (typeof window !== 'undefined') {
-    defineCustomElements();
-}
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,2CAA2C;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAG1C,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAChC,KAAK,CAAC,aAAa,CAAC,eAAe,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,CAClE,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAS3C,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAChC,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,CACnE,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,CAClG,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAcjD,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAChC,KAAK,CAAC,aAAa,CAAC,uBAAuB,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,CAC1E,CAAC;AACF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,KAAK,CAAC,UAAU,CAGvD,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAChC,KAAK,CAAC,aAAa,CAAC,8BAA8B,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,CACjF,CAAC;AACF,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAC;AAEpE,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAY/C,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAChC,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,CAAC,CACxE,CAAC;AACF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD,2DAA2D;AAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,oBAAoB,EAAE,CAAC;AACzB,CAAC"}