@feedlog-ai/webcomponents 0.0.9 → 0.0.11

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

@@ -23,16 +23,29 @@ export class FeedlogGithubIssuesClient {
         this.hasMore = false;
         this.isLoadingMore = false;
         this.sdk = null;
+        /** Counter to track fetch operations and prevent stale updates */
+        this.fetchRequestId = 0;
+        /** Flag to prevent state updates after component disconnect */
+        this.isDisconnected = false;
+        /** Map to track the latest upvote request ID for each issue to handle race conditions */
+        this.upvoteRequestIds = new Map();
         this.handleUpvote = async (event) => {
-            if (!this.sdk) {
+            if (!this.sdk || this.isDisconnected) {
                 return;
             }
             const { issueId, currentUpvoted, currentCount } = event.detail;
+            // Track request to handle race conditions
+            const requestId = (this.upvoteRequestIds.get(issueId) || 0) + 1;
+            this.upvoteRequestIds.set(issueId, requestId);
             // 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);
+                // Ignore if component disconnected or request is stale
+                if (this.isDisconnected || this.upvoteRequestIds.get(issueId) !== requestId) {
+                    return;
+                }
                 // 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);
@@ -43,6 +56,10 @@ export class FeedlogGithubIssuesClient {
                 });
             }
             catch (err) {
+                // Ignore if component disconnected or request is stale
+                if (this.isDisconnected || this.upvoteRequestIds.get(issueId) !== requestId) {
+                    return;
+                }
                 // Revert optimistic update on error
                 this.issues = this.issues.map(issue => issue.id === issueId
                     ? Object.assign(Object.assign({}, issue), { hasUpvoted: currentUpvoted, upvoteCount: currentCount }) : issue);
@@ -57,11 +74,18 @@ export class FeedlogGithubIssuesClient {
         this.initializeSDK();
         this.fetchIssues();
     }
+    disconnectedCallback() {
+        // Prevent any pending async operations from updating state
+        this.isDisconnected = true;
+        this.fetchRequestId++;
+    }
     componentDidUpdate() {
         // Re-fetch if any props changed
         const typeChanged = this.previousType !== this.type;
         const limitChanged = this.previousLimit !== this.limit;
         if (typeChanged || limitChanged) {
+            // Invalidate any in-flight requests
+            this.fetchRequestId++;
             // Reset pagination when filters change
             this.cursor = null;
             this.hasMore = false;
@@ -89,6 +113,8 @@ export class FeedlogGithubIssuesClient {
         if (!this.sdk) {
             return;
         }
+        // Capture current request ID to detect stale responses
+        const currentRequestId = this.fetchRequestId;
         try {
             this.loading = true;
             this.error = null;
@@ -103,11 +129,19 @@ export class FeedlogGithubIssuesClient {
                 params.cursor = this.cursor;
             }
             const response = await this.sdk.fetchIssues(params);
+            // Ignore response if component disconnected or a newer request was made
+            if (this.isDisconnected || currentRequestId !== this.fetchRequestId) {
+                return;
+            }
             this.issues = response.issues;
             this.cursor = response.pagination.cursor;
             this.hasMore = response.pagination.hasMore;
         }
         catch (err) {
+            // Ignore errors from stale requests
+            if (this.isDisconnected || currentRequestId !== this.fetchRequestId) {
+                return;
+            }
             const errorMsg = err instanceof Error ? err.message : 'Failed to fetch issues';
             this.error = errorMsg;
             this.issues = [];
@@ -117,14 +151,19 @@ export class FeedlogGithubIssuesClient {
             });
         }
         finally {
-            this.loading = false;
-            this.isLoadingMore = false;
+            // Only update loading state if this is still the current request
+            if (!this.isDisconnected && currentRequestId === this.fetchRequestId) {
+                this.loading = false;
+                this.isLoadingMore = false;
+            }
         }
     }
     async loadMore() {
         if (!this.sdk || !this.hasMore || this.isLoadingMore || this.loading) {
             return;
         }
+        // Capture current request ID to detect stale responses
+        const currentRequestId = this.fetchRequestId;
         this.isLoadingMore = true;
         try {
             const params = {};
@@ -138,11 +177,19 @@ export class FeedlogGithubIssuesClient {
                 params.cursor = this.cursor;
             }
             const response = await this.sdk.fetchIssues(params);
+            // Ignore response if component disconnected or a newer request was made
+            if (this.isDisconnected || currentRequestId !== this.fetchRequestId) {
+                return;
+            }
             this.issues = [...this.issues, ...response.issues];
             this.cursor = response.pagination.cursor;
             this.hasMore = response.pagination.hasMore;
         }
         catch (err) {
+            // Ignore errors from stale requests
+            if (this.isDisconnected || currentRequestId !== this.fetchRequestId) {
+                return;
+            }
             const errorMsg = err instanceof Error ? err.message : 'Failed to load more issues';
             this.feedlogError.emit({
                 error: errorMsg,
@@ -150,11 +197,14 @@ export class FeedlogGithubIssuesClient {
             });
         }
         finally {
-            this.isLoadingMore = false;
+            // Only update loading state if this is still the current request
+            if (!this.isDisconnected && currentRequestId === this.fetchRequestId) {
+                this.isLoadingMore = false;
+            }
         }
     }
     render() {
-        return (h("feedlog-github-issues", { key: 'fe6a4397654075ddef24a3c28b2b1b0c515cfed1', issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
+        return (h("feedlog-github-issues", { key: 'bb63dd29e99dfd9418b6cb12a1f45dff086378ab', issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
     }
     static get is() { return "feedlog-github-issues-client"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedlog-issue/feedlog-issue.css

@@ -0,0 +1,205 @@
+: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);
+}
+
+.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;
+}

package/dist/collection/components/feedlog-issue/feedlog-issue.js

@@ -0,0 +1,137 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Heart icon SVG component (filled)
+ */
+const HeartFilledIcon = () => (h("svg", { class: "upvote-icon filled", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, h("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })));
+/**
+ * Heart icon SVG component (outline)
+ */
+const HeartOutlineIcon = () => (h("svg", { class: "upvote-icon outline", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })));
+/**
+ * Feedlog Issue Component
+ *
+ * A component for displaying a single GitHub issue.
+ */
+export class FeedlogIssueComponent {
+    constructor() {
+        /**
+         * Theme variant: 'light' or 'dark'
+         */
+        this.theme = 'light';
+        this.handleUpvote = (event) => {
+            event.stopPropagation();
+            this.feedlogUpvote.emit({
+                issueId: this.issue.id,
+                currentUpvoted: this.issue.hasUpvoted,
+                currentCount: this.issue.upvoteCount,
+            });
+        };
+    }
+    /**
+     * Format an ISO date string to a relative time string
+     */
+    formatDate(dateString) {
+        try {
+            const date = new Date(dateString);
+            const now = new Date();
+            const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+            if (seconds < 60)
+                return 'just now';
+            if (seconds < 3600)
+                return `${Math.floor(seconds / 60)}m ago`;
+            if (seconds < 86400)
+                return `${Math.floor(seconds / 3600)}h ago`;
+            if (seconds < 604800)
+                return `${Math.floor(seconds / 86400)}d ago`;
+            if (seconds < 2592000)
+                return `${Math.floor(seconds / 604800)}w ago`;
+            return date.toLocaleDateString();
+        }
+        catch (_a) {
+            return 'unknown date';
+        }
+    }
+    render() {
+        const { issue } = this;
+        if (!issue)
+            return null;
+        return (h(Host, { class: this.theme === 'dark' ? 'dark' : '' }, h("div", { class: "issue-card" }, h("div", { class: "issue-content" }, h("div", { class: "issue-header" }, h("div", { class: "issue-type-badge" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement" }, "Enhancement"))), issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue" }, "\uD83D\uDCCC"))), h("div", { class: "issue-main" }, h("div", { class: "issue-details" }, h("h3", { class: "issue-title" }, issue.title), h("p", { class: "issue-body" }, issue.body), h("div", { class: "issue-repository" }, h("span", { class: "repo-name" }, issue.repository.owner, "/", issue.repository.name))), issue.type !== 'bug' && (h("button", { class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, issue.hasUpvoted ? h(HeartFilledIcon, null) : h(HeartOutlineIcon, null), h("span", { class: "upvote-count" }, issue.upvoteCount)))), h("div", { class: "issue-footer" }, h("span", { class: "issue-date", title: `Updated: ${issue.updatedAt}` }, "Updated ", this.formatDate(issue.updatedAt)), h("span", { class: "issue-date", title: `Created: ${issue.createdAt}` }, "Created ", this.formatDate(issue.createdAt)))))));
+    }
+    static get is() { return "feedlog-issue"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["feedlog-issue.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["feedlog-issue.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "issue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FeedlogIssueType",
+                    "resolved": "FeedlogIssue",
+                    "references": {
+                        "FeedlogIssueType": {
+                            "location": "import",
+                            "path": "@feedlog-ai/core",
+                            "id": "../core/dist/index.d.ts::FeedlogIssue"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The issue to display"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "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'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "feedlogUpvote",
+                "name": "feedlogUpvote",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the issue is upvoted"
+                },
+                "complexType": {
+                    "original": "{\n    issueId: string;\n    currentUpvoted: boolean;\n    currentCount: number;\n  }",
+                    "resolved": "{ issueId: string; currentUpvoted: boolean; currentCount: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/feedlog-issue/feedlog-issue.stories.js

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+const sampleBugIssue = {
+    id: 'issue-bug-1',
+    title: 'Charts not rendering on mobile',
+    body: 'The chart components are not properly responsive on smaller screens. They overflow the container and break the layout.',
+    type: 'bug',
+    status: 'open',
+    pinnedAt: null,
+    revision: 1,
+    repository: {
+        id: 'repo-1',
+        name: 'feedlog-toolkit',
+        owner: 'feedlog',
+    },
+    updatedAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), // 5 hours ago
+    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1 week ago
+    upvoteCount: 3,
+    hasUpvoted: false,
+};
+const sampleEnhancementIssue = {
+    id: 'issue-enhancement-1',
+    title: 'Add dark mode support',
+    body: 'It would be great to have a dark mode option for the dashboard. This would reduce eye strain for users working late at night.',
+    type: 'enhancement',
+    status: 'open',
+    pinnedAt: null,
+    revision: 1,
+    repository: {
+        id: 'repo-1',
+        name: 'feedlog-toolkit',
+        owner: 'feedlog',
+    },
+    updatedAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2 hours ago
+    createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago
+    upvoteCount: 24,
+    hasUpvoted: false,
+};
+const sampleUpvotedEnhancementIssue = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-enhancement-upvoted', hasUpvoted: true });
+const samplePinnedIssue = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-enhancement-pinned', pinnedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() });
+const meta = {
+    title: 'Components/Issue',
+    component: 'feedlog-issue',
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        issue: {
+            control: 'object',
+            description: 'The issue to display',
+        },
+        theme: {
+            control: 'select',
+            options: ['light', 'dark'],
+            description: 'Theme variant',
+        },
+    },
+    args: {
+        issue: sampleEnhancementIssue,
+        theme: 'light',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        issue: sampleEnhancementIssue,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const Bug = {
+    args: {
+        issue: sampleBugIssue,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const Upvoted = {
+    args: {
+        issue: sampleUpvotedEnhancementIssue,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const Pinned = {
+    args: {
+        issue: samplePinnedIssue,
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const DarkTheme = {
+    args: {
+        issue: sampleEnhancementIssue,
+        theme: 'dark',
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const DarkThemeBug = {
+    args: {
+        issue: sampleBugIssue,
+        theme: 'dark',
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const DarkThemePinned = {
+    args: {
+        issue: samplePinnedIssue,
+        theme: 'dark',
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};
+export const HighUpvoteCount = {
+    args: {
+        issue: Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-high-upvote', upvoteCount: 156 }),
+    },
+    render: (props) => h("feedlog-issue", Object.assign({}, props)),
+};