@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/dist/collection/components/rk-recipe-card/rk-recipe-card.js

@@ -0,0 +1,366 @@
+import { h } from "@stencil/core";
+/**
+ * The primary recipe tile used across discovery, favorites and search results.
+ *
+ * All data arrives as individual primitive properties rather than one object
+ * prop, so the component works with plain HTML attributes in any framework.
+ *
+ * @slot - Extra metadata rendered under the title (badges, tags, ratings).
+ * @slot actions - Buttons rendered in the card footer (e.g. "Add to plan").
+ */
+export class RkRecipeCard {
+    constructor() {
+        /** Recipe title. */
+        this.name = '';
+        /** Whether this recipe is currently favorited. */
+        this.favorite = false;
+        /** `custom` recipes are user-authored and get an "Owned" badge. */
+        this.origin = 'api';
+        /** Renders a compact horizontal layout, for dense lists and the planner. */
+        this.compact = false;
+        /** Hides the favorite button entirely (e.g. inside the planner). */
+        this.hideFavorite = false;
+        this.imageFailed = false;
+        this.hasExtra = false;
+        this.hasActions = false;
+        /**
+         * Slot content is optional, and an empty wrapper would still paint padding and
+         * a border. Tracking what was actually projected lets the card collapse those
+         * regions instead. Re-run on `slotchange` so framework-driven updates count.
+         */
+        this.syncSlots = () => {
+            const elements = Array.from(this.host.children);
+            this.hasActions = elements.some(node => node.getAttribute('slot') === 'actions');
+            this.hasExtra =
+                elements.some(node => !node.hasAttribute('slot')) ||
+                    Array.from(this.host.childNodes).some(node => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');
+        };
+        this.handleSelect = (event) => {
+            // Let the browser handle modified clicks so "open in new tab" keeps working.
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+                return;
+            }
+            event.preventDefault();
+            this.rkCardSelect.emit(this.detail);
+        };
+        this.handleFavorite = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.rkFavoriteToggle.emit({ ...this.detail, favorite: !this.favorite });
+        };
+    }
+    componentWillLoad() {
+        this.syncSlots();
+    }
+    get detail() {
+        return { recipeId: this.recipeId, name: this.name, origin: this.origin };
+    }
+    render() {
+        const showImage = this.image && !this.imageFailed;
+        const href = this.href ?? `#${this.recipeId}`;
+        return (h("article", { key: 'abc3f8de736b74b1446ced7f2745c5a60b489c24', class: { card: true, 'is-compact': this.compact }, part: "card" }, h("a", { key: 'c401e8d99a43bbc5b4a67f1b79d02a4afd17fefc', class: "media", part: "media", href: href, tabindex: -1, "aria-hidden": "true", onClick: this.handleSelect }, showImage ? (h("img", { src: this.image, alt: "", loading: "lazy", decoding: "async", onError: () => (this.imageFailed = true) })) : (h("span", { class: "media-fallback", "aria-hidden": "true" }, "\uD83C\uDF72")), this.origin === 'custom' && (h("span", { key: 'd73c90426f8727a313d047db677a92184e57d794', class: "owned", part: "owned-badge" }, "Yours"))), !this.hideFavorite && (h("button", { key: '2f8cbaec4403219b0d39529758ef52bf8cb1fb7a', class: { fav: true, 'is-on': this.favorite }, part: "favorite-button", type: "button", onClick: this.handleFavorite, "aria-pressed": String(this.favorite), "aria-label": this.favorite ? `Remove ${this.name} from favorites` : `Add ${this.name} to favorites`, title: this.favorite ? 'Remove from favorites' : 'Add to favorites' }, h("svg", { key: '5766d053203efbf14be2ef9c6f6e1e7d8fa72552', viewBox: "0 0 24 24", stroke: "currentColor", "stroke-width": "1.9", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '1eebb81f40253f26b3ea021dd08cd6fd67b6e2ea', d: "M12 20.5 4.6 13.3a4.7 4.7 0 0 1 0-6.7 4.7 4.7 0 0 1 6.7 0l.7.7.7-.7a4.7 4.7 0 0 1 6.7 0 4.7 4.7 0 0 1 0 6.7Z" })))), h("div", { key: '0dd0feccc789b188cecc42d920e44e39556a9134', class: "body", part: "body" }, h("h3", { key: '29739cf1838d2a2827985104da23e62498c00a00', class: "title", part: "title" }, h("a", { key: 'd42fa3f306da565f8a04179a699fc7b6092839d6', href: href, onClick: this.handleSelect }, this.name)), h("p", { key: '3a16c25552fab648854e3923d6f0a389f916b07f', class: "meta", part: "meta" }, this.category && h("span", { key: 'ea8788f2772055734cc6740fc073c48061ff7b1c', class: "meta-item" }, this.category), this.area && h("span", { key: 'b54bba9cd55cec0296a483efa8a865c8b50dab03', class: "meta-item" }, this.area), this.minutes > 0 && h("span", { key: '11c08808645b3dbd942d5374edf92bcd18af85a1', class: "meta-item" }, this.minutes, " min"), this.servings > 0 && h("span", { key: '28064d47688d06897a3b46ff039d66483e280803', class: "meta-item" }, "Serves ", this.servings)), h("div", { key: '3bf5b7ad91730f16697854287d3853b371d27cf4', class: { extra: true, 'is-empty': !this.hasExtra }, part: "extra" }, h("slot", { key: '1dfe7c29f1d350e85c4cd8122f6fe7e07c60f56f', onSlotchange: this.syncSlots }))), h("footer", { key: '56e115b1e6c46fc5de7a8df9ea005011787ecd51', class: { footer: true, 'is-empty': !this.hasActions }, part: "footer" }, h("slot", { key: 'd07e312d8486a7b761856f5137f24ab95a98c582', name: "actions", onSlotchange: this.syncSlots }))));
+    }
+    static get is() { return "rk-recipe-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-recipe-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-recipe-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stable identifier echoed back in every event payload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recipe title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Category, e.g. \"Dessert\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category"
+            },
+            "area": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cuisine / region, e.g. \"Italian\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "area"
+            },
+            "minutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Total time in minutes. Hidden when omitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minutes"
+            },
+            "servings": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of servings. Hidden when omitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "servings"
+            },
+            "favorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this recipe is currently favorited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favorite",
+                "defaultValue": "false"
+            },
+            "origin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'api' | 'custom'",
+                    "resolved": "\"api\" | \"custom\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`custom` recipes are user-authored and get an \"Owned\" badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "origin",
+                "defaultValue": "'api'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Real href used for accessibility, SEO and middle-click / open-in-new-tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a compact horizontal layout, for dense lists and the planner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "hideFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the favorite button entirely (e.g. inside the planner)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "imageFailed": {},
+            "hasExtra": {},
+            "hasActions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rkCardSelect",
+                "name": "rkCardSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on primary activation. The host app performs the navigation."
+                },
+                "complexType": {
+                    "original": "RkRecipeCardSelectDetail",
+                    "resolved": "RkRecipeCardSelectDetail",
+                    "references": {
+                        "RkRecipeCardSelectDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-recipe-card/rk-recipe-card.tsx",
+                            "id": "src/components/rk-recipe-card/rk-recipe-card.tsx::RkRecipeCardSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rkFavoriteToggle",
+                "name": "rkFavoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the favorite button is pressed."
+                },
+                "complexType": {
+                    "original": "RkFavoriteToggleDetail",
+                    "resolved": "RkFavoriteToggleDetail",
+                    "references": {
+                        "RkFavoriteToggleDetail": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-recipe-card/rk-recipe-card.tsx",
+                            "id": "src/components/rk-recipe-card/rk-recipe-card.tsx::RkFavoriteToggleDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=rk-recipe-card.js.map

package/dist/collection/components/rk-recipe-card/rk-recipe-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rk-recipe-card.js","sourceRoot":"","sources":["../../../src/components/rk-recipe-card/rk-recipe-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\n\nexport interface RkRecipeCardSelectDetail {\n  recipeId: string;\n  name: string;\n  origin: 'api' | 'custom';\n}\n\nexport interface RkFavoriteToggleDetail {\n  recipeId: string;\n  name: string;\n  origin: 'api' | 'custom';\n  /** The state the host app should move *to*. */\n  favorite: boolean;\n}\n\n/**\n * The primary recipe tile used across discovery, favorites and search results.\n *\n * All data arrives as individual primitive properties rather than one object\n * prop, so the component works with plain HTML attributes in any framework.\n *\n * @slot - Extra metadata rendered under the title (badges, tags, ratings).\n * @slot actions - Buttons rendered in the card footer (e.g. \"Add to plan\").\n */\n@Component({\n  tag: 'rk-recipe-card',\n  styleUrl: 'rk-recipe-card.css',\n  shadow: true,\n})\nexport class RkRecipeCard {\n  @Element() host!: HTMLElement;\n\n  /** Stable identifier echoed back in every event payload. */\n  @Prop() recipeId!: string;\n\n  /** Recipe title. */\n  @Prop() name = '';\n\n  /** Thumbnail URL. */\n  @Prop() image?: string;\n\n  /** Category, e.g. \"Dessert\". */\n  @Prop() category?: string;\n\n  /** Cuisine / region, e.g. \"Italian\". */\n  @Prop() area?: string;\n\n  /** Total time in minutes. Hidden when omitted. */\n  @Prop() minutes?: number;\n\n  /** Number of servings. Hidden when omitted. */\n  @Prop() servings?: number;\n\n  /** Whether this recipe is currently favorited. */\n  @Prop() favorite = false;\n\n  /** `custom` recipes are user-authored and get an \"Owned\" badge. */\n  @Prop() origin: 'api' | 'custom' = 'api';\n\n  /** Real href used for accessibility, SEO and middle-click / open-in-new-tab. */\n  @Prop() href?: string;\n\n  /** Renders a compact horizontal layout, for dense lists and the planner. */\n  @Prop() compact = false;\n\n  /** Hides the favorite button entirely (e.g. inside the planner). */\n  @Prop() hideFavorite = false;\n\n  /** Emitted on primary activation. The host app performs the navigation. */\n  @Event({ eventName: 'rkCardSelect' }) rkCardSelect!: EventEmitter<RkRecipeCardSelectDetail>;\n\n  /** Emitted when the favorite button is pressed. */\n  @Event({ eventName: 'rkFavoriteToggle' }) rkFavoriteToggle!: EventEmitter<RkFavoriteToggleDetail>;\n\n  @State() private imageFailed = false;\n  @State() private hasExtra = false;\n  @State() private hasActions = false;\n\n  componentWillLoad() {\n    this.syncSlots();\n  }\n\n  /**\n   * Slot content is optional, and an empty wrapper would still paint padding and\n   * a border. Tracking what was actually projected lets the card collapse those\n   * regions instead. Re-run on `slotchange` so framework-driven updates count.\n   */\n  private syncSlots = () => {\n    const elements = Array.from(this.host.children);\n    this.hasActions = elements.some(node => node.getAttribute('slot') === 'actions');\n    this.hasExtra =\n      elements.some(node => !node.hasAttribute('slot')) ||\n      Array.from(this.host.childNodes).some(node => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');\n  };\n\n  private get detail(): RkRecipeCardSelectDetail {\n    return { recipeId: this.recipeId, name: this.name, origin: this.origin };\n  }\n\n  private handleSelect = (event: MouseEvent) => {\n    // Let the browser handle modified clicks so \"open in new tab\" keeps working.\n    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {\n      return;\n    }\n    event.preventDefault();\n    this.rkCardSelect.emit(this.detail);\n  };\n\n  private handleFavorite = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.rkFavoriteToggle.emit({ ...this.detail, favorite: !this.favorite });\n  };\n\n  render() {\n    const showImage = this.image && !this.imageFailed;\n    const href = this.href ?? `#${this.recipeId}`;\n\n    return (\n      <article class={{ card: true, 'is-compact': this.compact }} part=\"card\">\n        <a class=\"media\" part=\"media\" href={href} tabindex={-1} aria-hidden=\"true\" onClick={this.handleSelect}>\n          {showImage ? (\n            <img src={this.image} alt=\"\" loading=\"lazy\" decoding=\"async\" onError={() => (this.imageFailed = true)} />\n          ) : (\n            <span class=\"media-fallback\" aria-hidden=\"true\">\n              🍲\n            </span>\n          )}\n\n          {this.origin === 'custom' && (\n            <span class=\"owned\" part=\"owned-badge\">\n              Yours\n            </span>\n          )}\n        </a>\n\n        {!this.hideFavorite && (\n          <button\n            class={{ fav: true, 'is-on': this.favorite }}\n            part=\"favorite-button\"\n            type=\"button\"\n            onClick={this.handleFavorite}\n            aria-pressed={String(this.favorite)}\n            aria-label={this.favorite ? `Remove ${this.name} from favorites` : `Add ${this.name} to favorites`}\n            title={this.favorite ? 'Remove from favorites' : 'Add to favorites'}\n          >\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M12 20.5 4.6 13.3a4.7 4.7 0 0 1 0-6.7 4.7 4.7 0 0 1 6.7 0l.7.7.7-.7a4.7 4.7 0 0 1 6.7 0 4.7 4.7 0 0 1 0 6.7Z\" />\n            </svg>\n          </button>\n        )}\n\n        <div class=\"body\" part=\"body\">\n          <h3 class=\"title\" part=\"title\">\n            <a href={href} onClick={this.handleSelect}>\n              {this.name}\n            </a>\n          </h3>\n\n          <p class=\"meta\" part=\"meta\">\n            {this.category && <span class=\"meta-item\">{this.category}</span>}\n            {this.area && <span class=\"meta-item\">{this.area}</span>}\n            {this.minutes > 0 && <span class=\"meta-item\">{this.minutes} min</span>}\n            {this.servings > 0 && <span class=\"meta-item\">Serves {this.servings}</span>}\n          </p>\n\n          <div class={{ extra: true, 'is-empty': !this.hasExtra }} part=\"extra\">\n            <slot onSlotchange={this.syncSlots} />\n          </div>\n        </div>\n\n        <footer class={{ footer: true, 'is-empty': !this.hasActions }} part=\"footer\">\n          <slot name=\"actions\" onSlotchange={this.syncSlots} />\n        </footer>\n      </article>\n    );\n  }\n}\n"]}