@feedlog-ai/webcomponents 0.0.1

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { FeedlogCard } from "./feedlog-card";
+const meta = {
+    title: 'Components/Card',
+    component: FeedlogCard,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (h("feedlog-card", { style: { width: '400px' } }, h("div", { slot: "header" }, h("h3", { style: { margin: '0 0 0.5rem 0' } }, "Card Title")), h("div", { slot: "content" }, h("p", { style: { margin: '0', color: '#666' } }, "This is the card content. You can put any content here.")))),
+};
+export const WithFooter = {
+    render: () => (h("feedlog-card", { style: { width: '400px' } }, h("div", { slot: "header" }, h("h3", { style: { margin: '0 0 0.5rem 0' } }, "Card with Footer")), h("div", { slot: "content" }, h("p", { style: { margin: '0', color: '#666' } }, "This card has a header, content, and footer section.")), h("div", { slot: "footer", style: { display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' } }, h("feedlog-button", { variant: "ghost" }, "Cancel"), h("feedlog-button", null, "Save")))),
+};
+export const HeaderOnly = {
+    render: () => (h("feedlog-card", { style: { width: '400px' } }, h("div", { slot: "header" }, h("h3", { style: { margin: '0' } }, "Simple Header Card"), h("p", { style: { margin: '0.5rem 0 0 0', color: '#666', fontSize: '0.875rem' } }, "This card only uses the header slot.")))),
+};
+export const IssueCard = {
+    render: () => (h("feedlog-card", { style: { width: '500px' } }, h("div", { slot: "header", style: { display: 'flex', alignItems: 'flex-start', gap: '1rem' } }, h("feedlog-button", { variant: "outline", size: "sm" }, "\uD83D\uDC4D 12"), h("div", null, h("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' } }, h("h3", { style: { margin: '0' } }, "Add dark mode support"), h("feedlog-badge", null, "Enhancement")), h("p", { style: { margin: '0', color: '#666', fontSize: '0.875rem' } }, "It would be great to have a dark mode option for the dashboard."))))),
+};

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

@@ -0,0 +1,69 @@
+: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-muted-foreground: #717182;
+  --feedlog-destructive: #d4183d;
+  --feedlog-padding: 2rem;
+}
+
+:host(.dark) {
+  /* Dark theme values */
+  --feedlog-background: oklch(0.145 0 0);
+  --feedlog-foreground: oklch(0.985 0 0);
+  --feedlog-muted-foreground: oklch(0.708 0 0);
+  --feedlog-destructive: oklch(0.637 0.237 25.331);
+}
+
+.github-issues-container {
+  min-height: 100vh;
+  background-color: var(--feedlog-background);
+  padding: var(--feedlog-padding);
+  margin: 0 auto;
+}
+
+.issues-header {
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.header-content {
+  flex: 1;
+}
+
+.issues-title {
+  color: var(--feedlog-foreground);
+  margin: 0 0 0.25rem 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.issues-subtitle {
+  color: var(--feedlog-muted-foreground);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.loading-state,
+.error-state {
+  padding: 2rem;
+  text-align: center;
+  color: var(--feedlog-muted-foreground);
+}
+
+.error-state {
+  color: var(--feedlog-destructive);
+}
+
+.load-more-container {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+  gap: 1rem;
+}

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

@@ -0,0 +1,308 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Sun icon SVG component
+ */
+const SunIcon = () => (h("svg", { 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("circle", { cx: "12", cy: "12", r: "4" }), h("path", { d: "M12 2v2" }), h("path", { d: "M12 20v2" }), h("path", { d: "m4.93 4.93 1.41 1.41" }), h("path", { d: "m17.66 17.66 1.41 1.41" }), h("path", { d: "M2 12h2" }), h("path", { d: "M20 12h2" }), h("path", { d: "m6.34 17.66-1.41 1.41" }), h("path", { d: "m19.07 4.93-1.41 1.41" })));
+/**
+ * Moon icon SVG component
+ */
+const MoonIcon = () => (h("svg", { 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: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })));
+/**
+ * Feedlog GitHub Issues Component
+ *
+ * Component for displaying GitHub issues with support for bugs and enhancements.
+ * This component handles the UI rendering and delegates to feedlog-issues-list for the actual list.
+ */
+export class FeedlogGithubIssues {
+    constructor() {
+        /**
+         * Array of issues to display
+         */
+        this.issues = [];
+        /**
+         * Maximum width of the container
+         */
+        this.maxWidth = '42rem';
+        /**
+         * Theme variant: 'light' or 'dark'
+         */
+        this.theme = 'light';
+        /**
+         * Loading state - shows loading indicator when true
+         */
+        this.loading = false;
+        /**
+         * Error message - shows error state when set
+         */
+        this.error = null;
+        /**
+         * Whether to show the theme toggle button
+         */
+        this.showThemeToggle = true;
+        /**
+         * Whether there are more issues to load
+         */
+        this.hasMore = false;
+        /**
+         * Whether more issues are currently loading
+         */
+        this.isLoadingMore = false;
+        /**
+         * Internal state for theme
+         */
+        this.currentTheme = 'light';
+        this.handleUpvote = (event) => {
+            this.feedlogUpvote.emit(event.detail);
+        };
+        this.toggleTheme = () => {
+            this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+            this.theme = this.currentTheme;
+            this.feedlogThemeChange.emit(this.currentTheme);
+        };
+        this.handleLoadMore = () => {
+            this.feedlogLoadMore.emit();
+        };
+    }
+    componentWillLoad() {
+        this.currentTheme = this.theme;
+    }
+    render() {
+        const containerStyle = {
+            maxWidth: this.maxWidth,
+        };
+        return (h(Host, { key: '8f238ab41f45799062270c84188596d770d6bde0', class: this.currentTheme === 'dark' ? 'dark' : '' }, h("div", { key: 'af0c2155ef3cdc12f228ec804ee906afd7d75477', class: "github-issues-container", style: containerStyle }, h("header", { key: 'ccf9a063df220f7a48e3600cb22df8203960a45b', class: "issues-header" }, h("div", { key: 'c261d6b0c8168a66faef9ec2fb381619f5175070', class: "header-content" }, h("h1", { key: '19203aa63dab0648b0a2865fe812233bfbbc225a', class: "issues-title" }, "GitHub Issues"), h("p", { key: 'e717a4e64cc747c81ad7a9e1cec234c247bfc329', class: "issues-subtitle" }, "Track bugs and enhancements for your project")), this.showThemeToggle && (h("feedlog-button", { key: '21057c7d384c53262e699e0384234077b0b36314', variant: "outline", size: "sm", onFeedlogClick: this.toggleTheme }, this.currentTheme === 'dark' ? h(SunIcon, null) : h(MoonIcon, null)))), this.loading && (h("div", { key: '2059c491247e0a48a81d802d9757d9fa97ac1a72', class: "loading-state" }, h("p", { key: '5654904e73b05bd5a05aa0243506e4bf074e5486' }, "Loading issues..."))), this.error && (h("div", { key: '7d2e09e0055e5d834aa870ed47bd4ebaba64dff1', class: "error-state" }, h("p", { key: 'd4cc2bb872c81234b4e81a4ec4ce21aff368ad74' }, "Error: ", this.error))), !this.loading && !this.error && (h("div", { key: 'e25eb90f7098416837a26a44e5811888530220a4' }, h("feedlog-issues-list", { key: 'a8e7ec5c5861cb31456738107b93f6e7adebbbe9', issues: this.issues, theme: this.currentTheme, onFeedlogUpvote: this.handleUpvote }), this.hasMore && (h("div", { key: '0d935e9247f44bff0700fce487d0bc4ccd104f2a', class: "load-more-container" }, h("feedlog-button", { key: '2858d701f5e3d219c39a6a28a7475c619464bc72', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
+    }
+    static get is() { return "feedlog-github-issues"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["feedlog-github-issues.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["feedlog-github-issues.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "issues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FeedlogIssue[]",
+                    "resolved": "FeedlogIssue[]",
+                    "references": {
+                        "FeedlogIssue": {
+                            "location": "import",
+                            "path": "@feedlog-ai/core",
+                            "id": "../core/dist/index.d.ts::FeedlogIssue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of issues to display"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "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": true,
+                "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'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state - shows loading indicator when true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message - shows error state when set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "null"
+            },
+            "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"
+            },
+            "hasMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether there are more issues to load"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-more",
+                "defaultValue": "false"
+            },
+            "isLoadingMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether more issues are currently loading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading-more",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentTheme": {}
+        };
+    }
+    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": "{\n    issueId: string;\n    currentUpvoted: boolean;\n    currentCount: number;\n  }",
+                    "resolved": "{ issueId: string; currentUpvoted: boolean; currentCount: 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": "feedlogLoadMore",
+                "name": "feedlogLoadMore",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted to load more issues"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,211 @@
+import { h } from "@stencil/core";
+import { FeedlogGithubIssues } from "./feedlog-github-issues";
+const sampleIssues = [
+    {
+        id: 'issue-1',
+        title: 'Add dark mode support',
+        body: 'It would be great to have a dark mode option for the dashboard.',
+        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() - 2 * 60 * 60 * 1000).toISOString(),
+        upvoteCount: 24,
+        hasUpvoted: false,
+    },
+    {
+        id: 'issue-2',
+        title: 'Charts not rendering on mobile',
+        body: 'The chart components are not properly responsive on smaller screens.',
+        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() - 5 * 60 * 60 * 1000).toISOString(),
+        upvoteCount: 0,
+        hasUpvoted: false,
+    },
+    {
+        id: 'issue-3',
+        title: 'Export data to CSV',
+        body: 'Add functionality to export chart data as CSV files.',
+        type: 'enhancement',
+        status: 'open',
+        pinnedAt: null,
+        revision: 1,
+        repository: {
+            id: 'repo-1',
+            name: 'feedlog-toolkit',
+            owner: 'feedlog',
+        },
+        updatedAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
+        createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+        upvoteCount: 15,
+        hasUpvoted: false,
+    },
+    {
+        id: 'issue-4',
+        title: 'Memory leak in real-time updates',
+        body: 'When leaving the dashboard open for extended periods, memory usage increases significantly.',
+        type: 'bug',
+        status: 'open',
+        pinnedAt: null,
+        revision: 1,
+        repository: {
+            id: 'repo-1',
+            name: 'feedlog-toolkit',
+            owner: 'feedlog',
+        },
+        updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
+        createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+        upvoteCount: 0,
+        hasUpvoted: false,
+    },
+    {
+        id: 'issue-5',
+        title: 'Custom color themes',
+        body: 'Allow users to customize the color palette for charts and UI elements.',
+        type: 'enhancement',
+        status: 'open',
+        pinnedAt: null,
+        revision: 1,
+        repository: {
+            id: 'repo-1',
+            name: 'feedlog-toolkit',
+            owner: 'feedlog',
+        },
+        updatedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1 week ago
+        createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+        upvoteCount: 8,
+        hasUpvoted: false,
+    },
+];
+const meta = {
+    title: 'Components/GitHub Issues',
+    component: FeedlogGithubIssues,
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        issues: {
+            control: 'object',
+            description: 'Array of GitHub issues to display',
+        },
+        maxWidth: {
+            control: 'text',
+            description: 'Maximum width of the container',
+        },
+        theme: {
+            control: 'select',
+            options: ['light', 'dark'],
+            description: 'Theme variant',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Loading state',
+        },
+        error: {
+            control: 'text',
+            description: 'Error message',
+        },
+    },
+    args: {
+        issues: sampleIssues,
+        maxWidth: '56rem',
+        theme: 'light',
+        loading: false,
+        error: null,
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        issues: sampleIssues,
+    },
+    render: props => h("feedlog-github-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};
+export const Loading = {
+    args: {
+        issues: [],
+        loading: true,
+    },
+    render: props => h("feedlog-github-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};
+export const Error = {
+    args: {
+        issues: [],
+        loading: false,
+        error: 'Failed to fetch issues from GitHub API',
+    },
+    render: props => h("feedlog-github-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};
+export const Empty = {
+    args: {
+        issues: [],
+        loading: false,
+        error: null,
+    },
+    render: props => h("feedlog-github-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};
+export const DarkTheme = {
+    args: {
+        issues: sampleIssues,
+        theme: 'dark',
+    },
+    render: props => h("feedlog-github-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};
+export const NarrowWidth = {
+    args: {
+        issues: sampleIssues.slice(0, 3),
+        maxWidth: '32rem',
+    },
+    render: props => h("feedlog-github-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-github-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+        }
+    },
+};