Recipe Components

Reusable Web Components built with StencilJS for the Recipe Finder & Meal Planner application.

Installation

npm install @shivamjayara/ui-packages

Component Imports

Components can be imported directly from the package:

import '@shivamjayara/ui-packages/recipe-card';
import '@shivamjayara/ui-packages/filter-chip';
import '@shivamjayara/ui-packages/search-bar';
import '@shivamjayara/ui-packages/toast-container';
import '@shivamjayara/ui-packages/rc-modal';
import '@shivamjayara/ui-packages/rc-day-column';

Components are consumed through the published npm package using package subpath imports.

Components

| Component | Description | | ----------------- | ----------------------------------------------------------------- | | recipe-card | Displays recipe information with favorite and click interactions. | | search-bar | Recipe search input with search interaction. | | filter-chip | Selectable filter chip for filtering recipes. | | toast-container | Displays application notifications/toasts. | | rc-modal | Reusable modal dialog. | | rc-day-column | Displays and manages meals for a day in the weekly planner. |

Recipe Card API

Usage

<recipe-card
  card-title="Chicken Tikka Masala"
  image="https://example.com/recipe.jpg"
  area="Indian"
  country="India"
  is-favorite="false"
>
  <button>View Recipe</button>
</recipe-card>

Properties

| Property | Type | Default | | ------------ | --------- | ------- | | cardTitle | string | — | | image | string | — | | isFavorite | boolean | false | | area | string | '' | | country | string | '' |

Events

• favoriteToggle — emitted when the favorite state changes.
• cardClick — emitted when the card is clicked.

recipeCard.addEventListener('favoriteToggle', (event) => {
  console.log(event.detail);
});

Slots

recipe-card provides a default slot for footer content.

<recipe-card card-title="Pasta">
  <button>View Recipe</button>
</recipe-card>

Styling

The component supports CSS custom properties such as:

recipe-card {
  --rc-accent: #2f7a5f;
  --rc-image-height: 180px;
}

Filter Chip

filter-chip displays a recipe filter option and supports an active state.

Usage

<filter-chip
  name="Indian"
  active="true"
></filter-chip>

Properties

| Property | Type | Default | Description | | -------- | --------- | ------- | ------------------------------------------------------------------ | | name | string | — | Text displayed inside the filter chip. | | active | boolean | false | Controls whether the filter chip is displayed in its active state. |

Styling

The active state uses the --rc-accent CSS custom property:

filter-chip {
  --rc-accent: #2f7a5f;
}

Parts

The chip exposes a chip CSS part for optional styling from the host application:

filter-chip::part(chip) {
  /* custom styles */
}

RC Modal

rc-modal provides a reusable modal dialog with support for a title, slotted content, backdrop closing, and Escape-key closing.

Usage

<rc-modal
  open={true}
  modal-title="Delete Recipe"
>
  <p>Are you sure you want to delete this recipe?</p>
  <button>Delete</button>
</rc-modal>

Properties

| Property | Type | Default | Description | | ------------ | --------- | ------- | -------------------------------------- | | open | boolean | false | Controls whether the modal is visible. | | modalTitle | string | — | Title displayed in the modal header. |

Events

• close — emitted when the close button, backdrop, or Escape key is used.

modal.addEventListener('close', () => {
  // Close the modal in the application
});

Slots

The default slot is used for modal content.

<rc-modal open={true} modal-title="Recipe Details">
  <p>Recipe content goes here.</p>
</rc-modal>

Styling

The component supports CSS custom properties for customization:

rc-modal {
  --rc-modal-radius: 14px;
  --rc-modal-bg: #ffffff;
  --rc-modal-backdrop: rgba(20, 20, 18, 0.5);
  --rc-modal-max-width: 560px;
}

Search Bar

search-bar provides a reusable recipe search input with configurable placeholder text, disabled state, value-change events, and a clear action.

Usage

<search-bar
  placeholder="Search recipes..."
></search-bar>

Properties

| Property | Type | Default | Description | | ------------- | --------- | --------------------- | ------------------------------------------- | | placeholder | string | "Search recipes..." | Placeholder text displayed in the input. | | disabled | boolean | false | Disables the search input and clear button. |

Events

• valueChange — emitted whenever the search value changes. The event payload is the current search value.
• clear — emitted when the search input is cleared.

searchBar.addEventListener('valueChange', (event) => {
  console.log(event.detail);
});

searchBar.addEventListener('clear', () => {
  console.log('Search cleared');
});

Styling

The search bar is responsive and supports customization through the --accent CSS custom property:

search-bar {
  --accent: #2f7a5f;
}

Toast Container

toast-container displays application notifications with support for success, error, and informational messages. Toasts can be dismissed individually through the toastDismiss event.

Usage

<toast-container
  toasts={toasts}
></toast-container>

Toast Data

Each toast should contain the following properties:

| Property | Type | Description | | ---------- | -------------------------------- | --------------------------------------------- | | id | string | Unique identifier for the toast. | | message | string | Notification message. | | type | 'success' \| 'error' \| 'info' | Visual and semantic type of the notification. | | duration | number | Duration associated with the toast. |

Example:

const toasts = [
  {
    id: '1',
    message: 'Recipe added to favorites',
    type: 'success',
    duration: 3000
  }
];

Properties

| Property | Type | Default | Description | | -------- | --------- | ------- | --------------------------------- | | toasts | Toast[] | [] | List of notifications to display. |

Events

• toastDismiss — emitted when a toast is dismissed. The event payload is the id of the dismissed toast.

toastContainer.addEventListener('toastDismiss', (event) => {
  console.log(event.detail);
  // Remove the toast with this ID
});

Accessibility

Notifications use status for informational/success messages and alert for error messages. The container also uses aria-live to announce notification changes to assistive technologies.

RC Day Column

rc-day-column displays a single day in the weekly meal planner, including breakfast, lunch, and dinner slots. It supports adding and removing planned meals.

Usage

<rc-day-column
  day-name="Monday"
  day-number="24"
  date="2026-08-24"
  is-today={true}
  meals={meals}
></rc-day-column>

Properties

| Property | Type | Default | Description | | ----------- | --------------- | ------- | --------------------------------------------------- | | dayName | string | — | Name of the day. | | dayNumber | number | — | Day number displayed in the header. | | date | string | — | Date associated with the day. | | isToday | boolean | false | Highlights the column and displays a "Today" label. | | meals | DayMealChip[] | [] | Meals assigned to the day. |

Each meal contains:

{
  id: string;
  title: string;
  thumb?: string;
  slot: 'breakfast' | 'lunch' | 'dinner';
}

Events

• addMeal — emitted when an empty meal slot is selected. The payload contains the date and meal slot.
• removeMeal — emitted when a planned meal is removed. The payload contains the meal id.

dayColumn.addEventListener('addMeal', (event) => {
  console.log(event.detail);
  // { date: '2026-08-24', slot: 'breakfast' }
});

dayColumn.addEventListener('removeMeal', (event) => {
  console.log(event.detail);
  // { id: 'meal-123' }
});

Styling

The component supports CSS custom properties for customization:

rc-day-column {
  --accent: #2f7a5f;
  --muted-color: #6f6f6c;
  --title-color: #201f1d;
}

Development

npm install
npm start
npm run build

Versioning

This package follows Semantic Versioning:

• PATCH — bug fixes
• MINOR — new backward-compatible features/components
• MAJOR — breaking API changes

Example:

0.1.0 → Initial release
0.2.0 → Added new component
0.2.1 → Bug fix
1.0.0 → Breaking API change

License

MIT