{open && (
)}
);
}// ———- Componentes UI ———-
const Button = ({ children, className = «», …props }) => (
);const Input = ({ className = «», …props }) => (
);const Select = ({ className = «», children, …props }) => (
);const TextArea = ({ className = «», …props }) => (
);// ———- App ———-
export default function RecipeBookApp() {
const [recipes, setRecipes] = useLocalStore(LS_KEY, [defaultRecipe()]);
const [selectedId, setSelectedId] = useState(recipes?.[0]?.id || null);
const [query, setQuery] = useState(«»);
const [categoryFilter, setCategoryFilter] = useState(«Todos»);
const fileInputRef = useRef(null);useEffect(() => {
if (!recipes.find((r) => r.id === selectedId)) {
setSelectedId(recipes[0]?.id || null);
}
}, [recipes, selectedId]);const categories = useMemo(() => {
const set = new Set([«Todos», …recipes.map((r) => r.category || «General»)]);
return Array.from(set);
}, [recipes]);const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
return recipes
.filter((r) => (categoryFilter === «Todos» ? true : r.category === categoryFilter))
.filter((r) =>
q
? [
r.name,
r.category,
r.tags?.join(» «) || «»,
r.ingredients.map((i) => i.name).join(» «),
]
.join(» «)
.toLowerCase()
.includes(q)
: true
)
.sort((a, b) => new Date(b.updatedAt) – new Date(a.updatedAt));
}, [recipes, query, categoryFilter]);const current = recipes.find((r) => r.id === selectedId) || null;// ——— Acciones de Recetas ———
const addRecipe = () => {
const rec = defaultRecipe();
setRecipes([rec, …recipes]);
setSelectedId(rec.id);
};const deleteRecipe = (id) => {
if (!confirm(«¿Eliminar receta? Esta acción no se puede deshacer.»)) return;
setRecipes(recipes.filter((r) => r.id !== id));
};const duplicateRecipe = (id) => {
const r = recipes.find((x) => x.id === id);
if (!r) return;
const copy = JSON.parse(JSON.stringify(r));
copy.id = uid();
copy.name = r.name + » (Copia)»;
copy.createdAt = nowISO();
copy.updatedAt = nowISO();
copy.ingredients = r.ingredients.map((i) => ({ …i, id: uid() }));
setRecipes([copy, …recipes]);
setSelectedId(copy.id);
};const saveField = (patch) => {
setRecipes((prev) =>
prev.map((r) => (r.id === selectedId ? { …r, …patch, updatedAt: nowISO() } : r))
);
};const saveIngredient = (ingId, patch) => {
setRecipes((prev) =>
prev.map((r) => {
if (r.id !== selectedId) return r;
return {
…r,
updatedAt: nowISO(),
ingredients: r.ingredients.map((i) => (i.id === ingId ? { …i, …patch } : i)),
};
})
);
};const addIngredient = () => {
if (!current) return;
const newIng = { id: uid(), name: «», qty: 0, unit: «g», note: «» };
saveField({ ingredients: […current.ingredients, newIng] });
};const removeIngredient = (ingId) => {
if (!current) return;
saveField({ ingredients: current.ingredients.filter((i) => i.id !== ingId) });
};const totalPercent = totalPercentOf(current?.ingredients || []);// % → peso
const calcFromPercent = () => {
if (!current) return;
const factor = Number(current.batchSize || 0);
const unit = current.batchUnit;
if (!factor || !unit) return alert(«Define el tamaño de lote (Batch)»);const newIngs = current.ingredients.map((i) => {
if (i.unit === «%») {
const qtyAbs = convertPercentToAbsolute(i.qty, factor);
const targetUnit = unit === «unidades» ? «g» : unit; // si el lote es por unidades, asumimos gramos
return { …i, unit: targetUnit, qty: Number(qtyAbs.toFixed(4)) };
}
return i;
});
saveField({ ingredients: newIngs });
};// peso → % (requiere lote en g o ml)
const calcToPercent = () => {
if (!current) return;
const factor = Number(current.batchSize || 0);
const unit = current.batchUnit;
if (!factor || !unit) return alert(«Define el tamaño de lote (Batch)»);
if (unit === «unidades») return alert(«Para convertir a % el lote debe estar en g o ml, no en unidades.»);const newIngs = current.ingredients.map((i) => {
if (i.unit !== «%») {
const pct = convertAbsoluteToPercent(i.qty, factor);
return { …i, unit: «%», qty: Number(pct.toFixed(4)) };
}
return i;
});
saveField({ ingredients: newIngs });
};const exportJSON = () => {
const dataStr =
«data:text/json;charset=utf-8,» + encodeURIComponent(JSON.stringify(recipes, null, 2));
const dl = document.createElement(«a»);
dl.setAttribute(«href», dataStr);
dl.setAttribute(
«download»,
`recetas_cosmetica_${new Date().toISOString().slice(0, 10)}.json`
);
dl.click();
};const importJSON = (file) => {
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const arr = JSON.parse(e.target.result);
if (!Array.isArray(arr)) throw new Error(«Formato inválido»);
const normalized = arr.map((r) => ({
…r,
id: r.id || uid(),
ingredients: (r.ingredients || []).map((i) => ({ …i, id: i.id || uid() })),
}));
setRecipes(normalized);
alert(«Importación completada ✔»);
} catch (err) {
alert(«Error importando: » + err.message);
}
};
reader.readAsText(file);
};const printRecipe = () => {
window.print();
};return (Pruebas: {passed}/{tests.length} OK
-
{tests.map((t, idx) => (
-
{t.pass ? «✔» : «✖»}{t.name}{!t.pass && (esperado: {String(t.expected)} • obtenido: {String(t.got)})}
))}
📒 Libro de Recetas – Cosmética Natural
Tus recetas quedan guardadas localmente en este navegador.
importJSON(e.target.files?.[0])}
/>
{/* Sidebar */}{/* Editor principal */}
{!current ? (
Selecciona o crea una receta.
) : (
{/* Encabezado */}{/* Lote */}
{/* Ingredientes */}
{/* Pasos y notas */}
saveField({ name: e.target.value })} />
saveField({ category: e.target.value })} />
saveField({
tags: e.target.value
.split(«,»)
.map((x) => x.trim())
.filter(Boolean),
})
}
/>
saveField({ batchSize: Number(e.target.value) })}
/>
saveField({ shelfLifeMonths: Number(e.target.value) })}
/>
saveField({ lot: e.target.value })} />
Ingredientes
Usa g, ml, %, gotas, cucharadas o cucharaditas. Total % actual: {totalPercent.toFixed(2)}%
| Ingrediente | Cant. | Unidad | Nota | |
|---|---|---|---|---|
| saveIngredient(i.id, { name: e.target.value })} /> | saveIngredient(i.id, { qty: Number(e.target.value) })} /> | saveIngredient(i.id, { note: e.target.value })} /> | ||
| No hay ingredientes. |