Nutrition library

A React block (a whole screen) in Beamline's Salon & fitness app.

A nutrition practice's library. Recipes: ingredients with grams and servings, nutrients per serving summed (energy, protein, carbohydrate, fat, fibre), a food without nutrient data marked and left out of the totals with a sentence; Save recipe and Log for a date are two named results; a log keeps the nutrients the recipe had when logged, so editing the recipe never rewrites it, and a log that fails after the recipe saved is retried alone (no second recipe). Handouts: each file says in positive words whether clients can view and download it, both off said as "only you see this file", a file that can't show in the app said as download only, the order set with move up and down, and what a client sees following every rule; each client has their own copy, the copies saying whose version they are and whether the client edited them, updating the original never changes a copy, and replacing an edited copy first lists the edits it would lose.

Use it for

A nutritionist's or dietitian's recipes, logged into a client's journal by date.
Handouts shared with clients as their own copies, with who can view and download each file.

Not for

A client's own journal of meals and goals (client-journal).
A protocol of foods and supplements (protocol-builder).
General file storage (file-manager).

Anatomy

header: the product's mark and title; tabs Recipes and Handouts
recipes: the recipes; the open recipe as a card: its name (changed in place) and servings, each ingredient's food (changed from a pencil), grams (read as text, changed in place) and its energy per serving as a bar split by protein, carbohydrate and fat (no data hatched), remove, Add an ingredient, Save recipe while changed; beside it a serving's nutrients (energy large, the energy split, each macronutrient with its share) with what was left out; logging in the client's journal: meal, date, servings eaten, Log for this date (or Save the recipe and log it, or Try logging again), the entries logged with their numbers as they were
handouts: each file with its format and version, Clients can view, Clients can download, move up and down, download only said, only you said; the open file's client copies with their version, edits and Replace; what a client sees

States

recipe: changed, saving, saved (entries keep their numbers), refused (kept); a food without data
log: logging, logged, refused, refused after the recipe saved (retry logs only)
file: viewable and downloadable, download only (can't show inline), view only, only you; a rule refused (put back)
copy: up to date, behind, edited by the client; replacing (edits listed first), replaced, refused
phone: one column; the ingredients keep their grams and energy figures, the bars drop
right to left: mirrors

Keyboard

Tab through the tabs, the recipes, each ingredient's food, grams and remove, Save, the log's fields and Log; each file's switches and moves, each copy's Replace; the replace dialog starts on Keep their copy

Motion

None of its own.

Props

Prop	Type	Default	Description
`recipes` (required)	`Recipe[]`	—
`foods` (required)	`Food[]`	—
`logs`	`RecipeLog[]`	—
`client` (required)	`string`	—	The client entries are logged for.
`today` (required)	`string`	—	Today as an ISO date: the log's starting date.
`handouts`	`Handout[]`	—
`copies`	`HandoutCopy[]`	—
`onSaveRecipe`	`((recipe: Recipe) => Promise<Recipe>)`	—
`onLog`	`((log: Omit<RecipeLog, "id">) => Promise<RecipeLog>)`	—
`onReplaceCopy`	`((copyId: string) => Promise<HandoutCopy>)`	—
`onRulesChange`	`((handouts: Handout[]) => Promise<void>)`	—
`defaultTab`	`"handouts" \| "recipes"`	—
`defaultRecipe`	`string`	—
`defaultHandout`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { NutritionLibrary } from "@beamline/nutrition-library";

Get it

Nutrition library is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent