@feedlog-ai/webcomponents 0.0.1

package/dist/collection/components/feedlog-github-issues-client/feedlog-github-issues-client.js

@@ -0,0 +1,395 @@
+import { h } from "@stencil/core";
+import { FeedlogSDK } from "@feedlog-ai/core";
+/**
+ * Feedlog GitHub Issues Client Component
+ *
+ * A component for displaying GitHub issues fetched using the Feedlog SDK.
+ * This component uses the SDK internally to fetch data and delegates to feedlog-github-issues for rendering.
+ */
+export class FeedlogGithubIssuesClient {
+    constructor() {
+        /**
+         * Maximum width of the container
+         */
+        this.maxWidth = '42rem';
+        /**
+         * Theme variant: 'light' or 'dark'
+         */
+        this.theme = 'light';
+        /**
+         * Whether to show the theme toggle button
+         */
+        this.showThemeToggle = true;
+        this.issues = [];
+        this.loading = true;
+        this.error = null;
+        this.cursor = null;
+        this.hasMore = false;
+        this.isLoadingMore = false;
+        this.sdk = null;
+        this.handleUpvote = async (event) => {
+            if (!this.sdk) {
+                return;
+            }
+            const { issueId, currentUpvoted, currentCount } = event.detail;
+            // Optimistic update
+            this.issues = this.issues.map(issue => issue.id === issueId
+                ? Object.assign(Object.assign({}, issue), { hasUpvoted: !currentUpvoted, upvoteCount: currentUpvoted ? currentCount - 1 : currentCount + 1 }) : issue);
+            try {
+                const result = await this.sdk.toggleUpvote(issueId);
+                // Update with server response
+                this.issues = this.issues.map(issue => issue.id === issueId
+                    ? Object.assign(Object.assign({}, issue), { hasUpvoted: result.upvoted, upvoteCount: result.upvoteCount }) : issue);
+                this.feedlogUpvote.emit({
+                    issueId,
+                    upvoted: result.upvoted,
+                    upvoteCount: result.upvoteCount,
+                });
+            }
+            catch (err) {
+                // Revert optimistic update on error
+                this.issues = this.issues.map(issue => issue.id === issueId
+                    ? Object.assign(Object.assign({}, issue), { hasUpvoted: currentUpvoted, upvoteCount: currentCount }) : issue);
+                const errorMsg = err instanceof Error ? err.message : 'Failed to toggle upvote';
+                this.feedlogError.emit({ error: errorMsg });
+            }
+        };
+        this.handleThemeChange = (event) => {
+            this.theme = event.detail;
+            this.feedlogThemeChange.emit(event.detail);
+        };
+    }
+    componentWillLoad() {
+        this.previousRepos = this.repos;
+        this.previousType = this.type;
+        this.previousLimit = this.limit;
+        this.initializeSDK();
+        this.fetchIssues();
+    }
+    componentDidUpdate() {
+        // Re-fetch if any props changed
+        const reposChanged = JSON.stringify(this.previousRepos) !== JSON.stringify(this.repos);
+        const typeChanged = this.previousType !== this.type;
+        const limitChanged = this.previousLimit !== this.limit;
+        if (reposChanged || typeChanged || limitChanged) {
+            // Reset pagination when filters change
+            this.cursor = null;
+            this.hasMore = false;
+            this.issues = [];
+            this.fetchIssues();
+            this.previousRepos = this.repos;
+            this.previousType = this.type;
+            this.previousLimit = this.limit;
+        }
+    }
+    initializeSDK() {
+        try {
+            this.sdk = new FeedlogSDK(Object.assign({}, (this.endpoint && { endpoint: this.endpoint })));
+            this.error = null;
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to initialize SDK';
+            this.error = errorMsg;
+            this.feedlogError.emit({ error: errorMsg });
+        }
+    }
+    parseRepos() {
+        if (!this.repos) {
+            return [];
+        }
+        if (typeof this.repos === 'string') {
+            try {
+                const parsed = JSON.parse(this.repos);
+                return Array.isArray(parsed) ? parsed : [this.repos];
+            }
+            catch (_a) {
+                // If not valid JSON, treat as single repo ID
+                return [this.repos];
+            }
+        }
+        return Array.isArray(this.repos) ? this.repos : [];
+    }
+    async fetchIssues() {
+        if (!this.sdk) {
+            return;
+        }
+        const repos = this.parseRepos();
+        if (repos.length === 0) {
+            this.error = 'At least one repository is required';
+            this.loading = false;
+            this.feedlogError.emit({ error: 'At least one repository is required' });
+            return;
+        }
+        try {
+            this.loading = true;
+            this.error = null;
+            const params = {
+                repositoryIds: repos,
+            };
+            if (this.type) {
+                params.type = this.type;
+            }
+            if (this.limit) {
+                params.limit = this.limit;
+            }
+            if (this.cursor) {
+                params.cursor = this.cursor;
+            }
+            const response = await this.sdk.fetchIssues(params);
+            this.issues = response.issues;
+            this.cursor = response.pagination.cursor;
+            this.hasMore = response.pagination.hasMore;
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to fetch issues';
+            this.error = errorMsg;
+            this.issues = [];
+            this.feedlogError.emit({
+                error: errorMsg,
+                code: err === null || err === void 0 ? void 0 : err.statusCode,
+            });
+        }
+        finally {
+            this.loading = false;
+            this.isLoadingMore = false;
+        }
+    }
+    async loadMore() {
+        if (!this.sdk || !this.hasMore || this.isLoadingMore || this.loading) {
+            return;
+        }
+        this.isLoadingMore = true;
+        try {
+            const repos = this.parseRepos();
+            const params = {
+                repositoryIds: repos,
+            };
+            if (this.type) {
+                params.type = this.type;
+            }
+            if (this.limit) {
+                params.limit = this.limit;
+            }
+            if (this.cursor) {
+                params.cursor = this.cursor;
+            }
+            const response = await this.sdk.fetchIssues(params);
+            this.issues = [...this.issues, ...response.issues];
+            this.cursor = response.pagination.cursor;
+            this.hasMore = response.pagination.hasMore;
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to load more issues';
+            this.feedlogError.emit({
+                error: errorMsg,
+                code: err === null || err === void 0 ? void 0 : err.statusCode,
+            });
+        }
+        finally {
+            this.isLoadingMore = false;
+        }
+    }
+    render() {
+        return (h("feedlog-github-issues", { key: '38b9e7ec8a5473acbab39df1d0476fcb357866bf', issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, showThemeToggle: this.showThemeToggle, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogThemeChange: this.handleThemeChange, onFeedlogLoadMore: async () => this.loadMore() }));
+    }
+    static get is() { return "feedlog-github-issues-client"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "repos": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of repository public IDs or single ID\nFormat: repository public ID (not owner/repo)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "repos"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bug' | 'enhancement'",
+                    "resolved": "\"bug\" | \"enhancement\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Filter issues by type: 'bug' or 'enhancement'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type"
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of issues to fetch (1-100, default 10)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "limit"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom API endpoint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "endpoint"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width of the container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'42rem'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme variant: 'light' or 'dark'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "showThemeToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the theme toggle button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-theme-toggle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "issues": {},
+            "loading": {},
+            "error": {},
+            "cursor": {},
+            "hasMore": {},
+            "isLoadingMore": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "feedlogUpvote",
+                "name": "feedlogUpvote",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an issue is upvoted"
+                },
+                "complexType": {
+                    "original": "{ issueId: string; upvoted: boolean; upvoteCount: number }",
+                    "resolved": "{ issueId: string; upvoted: boolean; upvoteCount: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "feedlogThemeChange",
+                "name": "feedlogThemeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when theme changes"
+                },
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                }
+            }, {
+                "method": "feedlogError",
+                "name": "feedlogError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on error"
+                },
+                "complexType": {
+                    "original": "{ error: string; code?: number }",
+                    "resolved": "{ error: string; code?: number | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.css

@@ -0,0 +1,218 @@
+:host {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  
+  /* Light theme defaults */
+  --feedlog-background: #ffffff;
+  --feedlog-foreground: oklch(0.145 0 0);
+  --feedlog-card: #ffffff;
+  --feedlog-card-foreground: oklch(0.145 0 0);
+  --feedlog-muted: #ececf0;
+  --feedlog-muted-foreground: #717182;
+  --feedlog-border: rgba(0, 0, 0, 0.1);
+  --feedlog-accent-color: #2563eb;
+  --feedlog-destructive: #d4183d;
+  --feedlog-blue-400: oklch(0.707 0.165 254.624);
+  --feedlog-blue-600: oklch(0.546 0.245 262.881);
+  --feedlog-blue-100: oklch(0.932 0.032 255.585);
+  --feedlog-red-100: #fce7f3;
+  --feedlog-red-400: #f472b6;
+  --feedlog-red-600: #db2777;
+  --feedlog-radius: 0.625rem;
+  --feedlog-gap: 0.5rem;
+}
+
+:host(.dark) {
+  /* Dark theme values */
+  --feedlog-background: oklch(0.145 0 0);
+  --feedlog-foreground: oklch(0.985 0 0);
+  --feedlog-card: oklch(0.145 0 0);
+  --feedlog-card-foreground: oklch(0.985 0 0);
+  --feedlog-muted: oklch(0.269 0 0);
+  --feedlog-muted-foreground: oklch(0.708 0 0);
+  --feedlog-border: oklch(0.269 0 0);
+  --feedlog-accent-color: #3b82f6;
+  --feedlog-destructive: oklch(0.396 0.141 25.723);
+  --feedlog-blue-400: oklch(0.707 0.165 254.624);
+  --feedlog-blue-600: oklch(0.546 0.245 262.881);
+  --feedlog-blue-900-30: color-mix(in oklab, oklch(0.379 0.146 265.522) 30%, transparent);
+  --feedlog-red-900-30: color-mix(in oklab, oklch(0.396 0.141 25.723) 30%, transparent);
+}
+
+.issues-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--feedlog-gap);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 1.5rem;
+  color: var(--feedlog-muted-foreground);
+  font-size: 0.875rem;
+}
+
+.issue-card {
+  background-color: var(--feedlog-card);
+  border: 1px solid var(--feedlog-border);
+  border-radius: var(--feedlog-radius);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.15s ease;
+  position: relative;
+}
+
+.issue-card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.issue-content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.issue-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.issue-type-badge {
+  width: fit-content;
+}
+
+.pinned-indicator {
+  font-size: 1rem;
+  opacity: 0.7;
+}
+
+.issue-main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.issue-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.issue-title {
+  color: var(--feedlog-card-foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.375rem 0;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.issue-body {
+  color: var(--feedlog-muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1.625;
+  margin: 0 0 0.75rem 0;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.issue-repository {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--feedlog-muted-foreground);
+  margin-bottom: 0.5rem;
+}
+
+.repo-name {
+  font-weight: 500;
+}
+
+.github-number {
+  color: var(--feedlog-blue-600);
+  font-weight: 600;
+}
+
+:host(.dark) .github-number {
+  color: var(--feedlog-blue-400);
+}
+
+.upvote-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--feedlog-muted);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.upvote-button:hover {
+  background-color: var(--feedlog-blue-100);
+  border-color: var(--feedlog-blue-400);
+}
+
+.upvote-button.upvoted {
+  background-color: var(--feedlog-red-100);
+  border-color: var(--feedlog-red-400);
+}
+
+.upvote-button.upvoted:hover {
+  background-color: var(--feedlog-red-100);
+  border-color: var(--feedlog-red-600);
+}
+
+:host(.dark) .upvote-button:hover {
+  background-color: var(--feedlog-blue-900-30);
+  border-color: var(--feedlog-blue-600);
+}
+
+:host(.dark) .upvote-button.upvoted {
+  background-color: var(--feedlog-red-900-30);
+  border-color: var(--feedlog-red-600);
+}
+
+.upvote-icon {
+  width: 1rem;
+  height: 1rem;
+  stroke-width: 2;
+}
+
+.upvote-icon.filled {
+  color: var(--feedlog-red-600);
+}
+
+.upvote-icon.outline {
+  color: var(--feedlog-blue-600);
+}
+
+:host(.dark) .upvote-icon.outline {
+  color: var(--feedlog-blue-400);
+}
+
+.upvote-count {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--feedlog-card-foreground);
+}
+
+.issue-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.issue-date {
+  color: var(--feedlog-muted-foreground);
+  cursor: help;
+}