@recipeplanner/ui-kit

Framework-agnostic web component library for the Recipe Finder & Meal Planner app, built with StencilJS.

Install

npm install @recipeplanner/ui-kit

Usage (SvelteKit / any framework)

// hooks.client.ts or root layout
import { defineCustomElements } from '@recipeplanner/ui-kit/loader';
defineCustomElements();

<recipe-card
  title="Spaghetti Carbonara"
  image="/carbonara.jpg"
  time="30 mins"
  favorited={isFav}
  on:favoriteToggle={(e) => handleFav(e.detail)}
>
  <button slot="footer-action">View</button>
</recipe-card>

Components

| Tag | Description | Key props | Emits | |---|---|---|---| | <recipe-card> | Displays a recipe summary | recipeId, title, image, time, tags, favorited | favoriteToggle, cardClick | | <rating-stars> | 1-5 star rating input | value, readonly | ratingChange | | <search-bar> | Debounced search input | placeholder, value | searchChange | | <filter-panel> | Category / tag filter chips | options, selected | filterChange | | <modal-dialog> | Accessible modal with header/footer slots | open, heading | dialogClose | | <recipe-form> | Add/edit recipe form with validation | recipe | formSubmit, formCancel | | <day-slot> | A single weekday's meal plan cell | day, meals (JSON) | mealRemove, mealDrop |

Publishing

npm run build
npm version patch   # or minor / major
npm publish --access public

Versioning

Semantic versioning is followed:

• patch — bug fixes, style tweaks
• minor — new components / new optional props, backwards compatible
• major — breaking prop/event renames