@recipe-book/react 0.0.1 → 0.0.2

package/dist/chunk-BW4DYFBO.mjs

@@ -0,0 +1,36 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-MGBEDCLT.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    const _recipe = RecipeUtils.create(finalConfig);
+    return {
+      ..._recipe,
+      ingredients: _recipe.ingredients.map((ingredient) => {
+        var _a;
+        return {
+          ...ingredient,
+          quantity: (_a = ingredient.quantity) != null ? _a : 0
+        };
+      })
+    };
+  }, [globalConfig, props.recipe]);
+  return /* @__PURE__ */ jsx(RecipeContextProvider, { recipe, children: props.children });
+}
+
+export {
+  Root
+};

package/dist/chunk-CDQFOSWR.mjs

@@ -0,0 +1,34 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-MGBEDCLT.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const [servings, setServings] = useState(1);
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    const _recipe = RecipeUtils.create(finalConfig);
+    return {
+      ..._recipe,
+      ingredients: _recipe.ingredients.map((ingredient) => ({
+        ...ingredient,
+        quantity: ingredient.amount * serving
+      }))
+    };
+  }, [globalConfig, props.recipe]);
+  return /* @__PURE__ */ jsx(RecipeContextProvider, { recipe, children: props.children });
+}
+
+export {
+  Root
+};

package/dist/chunk-CRQVP6PW.mjs

@@ -0,0 +1,20 @@
+import {
+  useRecipeContext
+} from "./chunk-A5JAKCMG.mjs";
+
+// src/components/ingredients/ingredients-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function IngredientList(props) {
+  const { ingredients, activeConversionKey } = useRecipeContext();
+  return /* @__PURE__ */ jsx("ul", { "recipe-ingredient-list": "", className: props.className, children: ingredients.map((ingredient, i) => /* @__PURE__ */ jsxs("li", { "recipe-ingredient": "", children: [
+    ingredient.name,
+    " \u2014 ",
+    ingredient.amount.value,
+    " ",
+    ingredient.amount.unit
+  ] }, i)) });
+}
+
+export {
+  IngredientList
+};

package/dist/chunk-CY27OHOG.mjs

@@ -0,0 +1 @@
+import{b as r}from"./chunk-QOCKR2HO.mjs";import{b as i}from"./chunk-YZMVAQQG.mjs";import{useMemo as n}from"react";import{jsx as p}from"react/jsx-runtime";function m(o){let{config:e}=r(),t=n(()=>({...e,...o.recipe}),[e,o.recipe]);return p(i,{recipe:t,children:o.children})}export{m as a};

package/dist/chunk-DACFJWGN.mjs

@@ -0,0 +1,14 @@
+import {
+  useRecipeContext
+} from "./chunk-BOG5DA6M.mjs";
+
+// src/components/instructions/instruction-list.tsx
+import { jsx } from "react/jsx-runtime";
+function InstructionList(props) {
+  const { instructions } = useRecipeContext();
+  return /* @__PURE__ */ jsx("ol", { "recipe-instruction-list": "", className: props.className, children: instructions.map((instruction, i) => /* @__PURE__ */ jsx("li", { "recipe-instruction": i + 1, children: instruction }, i)) });
+}
+
+export {
+  InstructionList
+};

package/dist/chunk-DE5GUZKO.mjs

@@ -0,0 +1,46 @@
+import {
+  useRecipeContext
+} from "./chunk-A5JAKCMG.mjs";
+
+// src/components/ingredients/ingredients-list.tsx
+import {
+  IngredientUtils
+} from "@recipe-book/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getIngredientAmount(ingredient, conversionKey) {
+  var _a;
+  const conversion = (_a = ingredient.conversion) == null ? void 0 : _a[conversionKey];
+  if (!conversion) {
+    console.warn(
+      `No conversion found for ingredient "${ingredient.name}" with key "${conversionKey}"`
+    );
+    const coerced = IngredientUtils.convert(
+      ingredient,
+      conversionKey
+    );
+    if (coerced) {
+      return coerced.amount;
+    }
+    return ingredient.amount;
+  }
+  return conversion;
+}
+function IngredientList(props) {
+  const { ingredients, activeConversionKey } = useRecipeContext();
+  console.log("INGEDIENTS LIST:", activeConversionKey);
+  const ingredientsWithAmounts = ingredients.map((ingredient) => ({
+    ...ingredient,
+    amount: getIngredientAmount(ingredient, activeConversionKey)
+  }));
+  return /* @__PURE__ */ jsx("ul", { "recipe-ingredient-list": "", className: props.className, children: ingredientsWithAmounts.map((ingredient, i) => /* @__PURE__ */ jsxs("li", { "recipe-ingredient": "", children: [
+    ingredient.name,
+    " \u2014 ",
+    ingredient.amount.value,
+    " ",
+    ingredient.amount.unit
+  ] }, i)) });
+}
+
+export {
+  IngredientList
+};

package/dist/chunk-DNZAFS5G.mjs

@@ -0,0 +1,48 @@
+import {
+  useRecipeContext
+} from "./chunk-7SBP7DC5.mjs";
+
+// src/components/ingredients/ingredients-list.tsx
+import {
+  IngredientUtils
+} from "@recipe-book/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getIngredientAmount(ingredient, conversionKey) {
+  var _a;
+  if (!conversionKey) {
+    return ingredient.amount;
+  }
+  const conversion = (_a = ingredient.conversion) == null ? void 0 : _a[conversionKey];
+  if (!conversion) {
+    console.warn(
+      `No conversion found for ingredient "${ingredient.name}" with key "${conversionKey}"`
+    );
+    const coerced = IngredientUtils.convert(
+      ingredient,
+      conversionKey
+    );
+    if (coerced) {
+      return coerced.amount;
+    }
+    return ingredient.amount;
+  }
+  return conversion;
+}
+function IngredientList(props) {
+  const { ingredients, activeConversionKey } = useRecipeContext();
+  const ingredientsWithAmounts = ingredients.map((ingredient) => ({
+    ...ingredient,
+    amount: getIngredientAmount(ingredient, activeConversionKey)
+  }));
+  return /* @__PURE__ */ jsx("ul", { "recipe-ingredient-list": "", className: props.className, children: ingredientsWithAmounts.map((ingredient, i) => /* @__PURE__ */ jsxs("li", { "recipe-ingredient": "", children: [
+    ingredient.name,
+    " \u2014 ",
+    ingredient.amount.value,
+    " ",
+    ingredient.amount.unit
+  ] }, i)) });
+}
+
+export {
+  IngredientList
+};

package/dist/chunk-DS3O5PAR.mjs

@@ -0,0 +1,20 @@
+import {
+  useRecipeContext
+} from "./chunk-BOG5DA6M.mjs";
+
+// src/components/ingredients/ingredients-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function IngredientList(props) {
+  const { ingredients } = useRecipeContext();
+  return /* @__PURE__ */ jsx("ul", { "recipe-ingredient-list": "", className: props.className, children: ingredients.map((ingredient, i) => /* @__PURE__ */ jsxs("li", { "recipe-ingredient": "", children: [
+    ingredient.name,
+    " \u2014 ",
+    ingredient.amount.value,
+    " ",
+    ingredient.amount.unit
+  ] }, i)) });
+}
+
+export {
+  IngredientList
+};

package/dist/chunk-ENGJXHYU.mjs

@@ -0,0 +1,42 @@
+// src/recipe-context.tsx
+import { createContext, useContext, useState, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var recipeContext = createContext({});
+function useRecipeContext() {
+  const ctx = useContext(recipeContext);
+  if (!ctx) {
+    throw new Error("Missing recipe context. Are you using <Recipe.Root />?");
+  }
+  return ctx;
+}
+function RecipeContextProvider({
+  children,
+  recipe,
+  servings,
+  setServings
+}) {
+  const [activeConversionKey, setActiveConversionKey] = useState(recipe.measurements);
+  const recipeContextValue = useMemo(() => {
+    return {
+      ...recipe,
+      activeConversionKey,
+      setConversionKey: (key) => {
+        setActiveConversionKey(key);
+      },
+      servings,
+      setServings
+    };
+  }, [
+    recipe,
+    activeConversionKey,
+    setActiveConversionKey,
+    servings,
+    setServings
+  ]);
+  return /* @__PURE__ */ jsx(recipeContext.Provider, { value: recipeContextValue, children });
+}
+
+export {
+  useRecipeContext,
+  RecipeContextProvider
+};

package/dist/chunk-FIFGRJKD.mjs

@@ -0,0 +1,26 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-MGBEDCLT.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    return RecipeUtils.create(finalConfig);
+  }, [globalConfig, props.recipe]);
+  return /* @__PURE__ */ jsx(RecipeContextProvider, { recipe, children: props.children });
+}
+
+export {
+  Root
+};

package/dist/chunk-FWOMIZEF.mjs

@@ -0,0 +1,46 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-A5JAKCMG.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const [servings, setServings] = useState(1);
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    const _recipe = RecipeUtils.create(finalConfig);
+    return {
+      ..._recipe,
+      ingredients: _recipe.ingredients.map((ingredient) => ({
+        ...ingredient,
+        amount: {
+          ...ingredient.amount,
+          // scale the amount by the number of servings
+          value: ingredient.amount.value * servings
+        }
+      }))
+    };
+  }, [globalConfig, props.recipe, servings]);
+  return /* @__PURE__ */ jsx(
+    RecipeContextProvider,
+    {
+      recipe,
+      servings,
+      setServings,
+      children: props.children
+    }
+  );
+}
+
+export {
+  Root
+};

package/dist/{chunk-T6BBQT4K.mjs → chunk-G7XD4VBW.mjs}

@@ -1,14 +1,14 @@
 import {
   useRecipeContext
-} from "./chunk-CB36WMX5.mjs";
+} from "./chunk-7SBP7DC5.mjs";
 
 // src/components/thumbnail.tsx
 import { AspectRatio } from "@radix-ui/react-aspect-ratio";
 import { jsx } from "react/jsx-runtime";
 function Thumbnail(props) {
   var _a, _b;
-  const { config } = useRecipeContext();
-  if (!config.thumbnail) {
+  const { thumbnail, name } = useRecipeContext();
+  if (!thumbnail) {
     throw new Error("Missing thumbnail image. Did you forget to set one?");
   }
   const propStyle = (_a = props.style) != null ? _a : {};
@@ -31,8 +31,8 @@ function Thumbnail(props) {
             width: "100%",
             height: "100%"
           },
-          src: config.thumbnail,
-          alt: (_b = props.alt) != null ? _b : config.name
+          src: thumbnail,
+          alt: (_b = props.alt) != null ? _b : name
         }
       )
     }

package/dist/chunk-GBU6MVZL.mjs

@@ -0,0 +1,14 @@
+import {
+  useRecipeContext
+} from "./chunk-7SBP7DC5.mjs";
+
+// src/components/instructions/instruction-list.tsx
+import { jsx } from "react/jsx-runtime";
+function InstructionList(props) {
+  const { instructions } = useRecipeContext();
+  return /* @__PURE__ */ jsx("ol", { "recipe-instruction-list": "", className: props.className, children: instructions.map((instruction, i) => /* @__PURE__ */ jsx("li", { "recipe-instruction": i + 1, children: instruction }, i)) });
+}
+
+export {
+  InstructionList
+};

package/dist/chunk-GM5F7IUT.mjs

@@ -0,0 +1,2 @@
+import{a as s}from"./chunk-PBENQR7Y.mjs";import{IngredientUtils as u}from"@recipe-book/core";import{useMemo as a}from"react";import{jsx as p,jsxs as l}from"react/jsx-runtime";function c(e,n){var r;if(!n)return e.amount;let t=(r=e.conversion)==null?void 0:r[n];if(!t){console.warn(`No conversion found for ingredient "${e.name}" with key "${n}"
+Attempting conversion table lookup...`);let i=u.convert(e,n);return i?i.amount:e.amount}return t}function N(e){let{ingredients:n,activeConversionKey:t,measurements:r}=s(),i=a(()=>t===r?n:n.map(o=>({...o,amount:c(o,t)})),[n,t,r]);return p("ul",{"recipe-ingredient-list":"",className:e.className,children:i.map((o,m)=>l("li",{"recipe-ingredient":"",children:[o.name," \u2014 ",o.amount.value," ",o.amount.unit]},m))})}export{N as a};

package/dist/chunk-GSGRXRJP.mjs

@@ -0,0 +1,38 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-MGBEDCLT.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const [servings, setServings] = useState(1);
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    const _recipe = RecipeUtils.create(finalConfig);
+    return {
+      ..._recipe,
+      ingredients: _recipe.ingredients.map((ingredient) => ({
+        ...ingredient,
+        amount: {
+          ...ingredient.amount,
+          // scale the amount by the number of servings
+          value: ingredient.amount.value * servings
+        }
+      }))
+    };
+  }, [globalConfig, props.recipe]);
+  return /* @__PURE__ */ jsx(RecipeContextProvider, { recipe, children: props.children });
+}
+
+export {
+  Root
+};

package/dist/chunk-GZRNU24M.mjs

@@ -0,0 +1,46 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-7SBP7DC5.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const [servings, setServings] = useState(1);
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    const _recipe = RecipeUtils.create(finalConfig);
+    return {
+      ..._recipe,
+      ingredients: _recipe.ingredients.map((ingredient) => ({
+        ...ingredient,
+        amount: {
+          ...ingredient.amount,
+          // scale the amount by the number of servings
+          value: ingredient.amount.value * servings
+        }
+      }))
+    };
+  }, [globalConfig, props.recipe, servings]);
+  return /* @__PURE__ */ jsx(
+    RecipeContextProvider,
+    {
+      recipe,
+      servings,
+      setServings,
+      children: props.children
+    }
+  );
+}
+
+export {
+  Root
+};

package/dist/{chunk-J5PZAYLW.mjs → chunk-HNDXCSZY.mjs}

@@ -1,14 +1,14 @@
 import {
   useRecipeContext
-} from "./chunk-CB36WMX5.mjs";
+} from "./chunk-MGBEDCLT.mjs";
 
 // src/components/thumbnail.tsx
 import { AspectRatio } from "@radix-ui/react-aspect-ratio";
 import { jsx } from "react/jsx-runtime";
 function Thumbnail(props) {
   var _a, _b;
-  const { config } = useRecipeContext();
-  if (!config.thumbnail) {
+  const { thumbnail, name } = useRecipeContext();
+  if (!thumbnail) {
     throw new Error("Missing thumbnail image. Did you forget to set one?");
   }
   const propStyle = (_a = props.style) != null ? _a : {};
@@ -16,7 +16,6 @@ function Thumbnail(props) {
     AspectRatio,
     {
       "recipe-thumbnail": "",
-      ref,
       className: props.className,
       style: {
         width: "100%",
@@ -32,8 +31,8 @@ function Thumbnail(props) {
             width: "100%",
             height: "100%"
           },
-          src: config.thumbnail,
-          alt: (_b = props.alt) != null ? _b : config.name
+          src: thumbnail,
+          alt: (_b = props.alt) != null ? _b : name
         }
       )
     }

package/dist/chunk-HXTUDCO2.mjs

@@ -0,0 +1,49 @@
+import {
+  useRecipeContext
+} from "./chunk-7SBP7DC5.mjs";
+
+// src/components/ingredients/ingredients-list.tsx
+import {
+  IngredientUtils
+} from "@recipe-book/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getIngredientAmount(ingredient, conversionKey) {
+  var _a;
+  if (!conversionKey) {
+    return ingredient.amount;
+  }
+  const conversion = (_a = ingredient.conversion) == null ? void 0 : _a[conversionKey];
+  if (!conversion) {
+    console.warn(
+      `No conversion found for ingredient "${ingredient.name}" with key "${conversionKey}"`
+    );
+    const coerced = IngredientUtils.convert(
+      ingredient,
+      conversionKey
+    );
+    if (coerced) {
+      return coerced.amount;
+    }
+    return ingredient.amount;
+  }
+  return conversion;
+}
+function IngredientList(props) {
+  const { ingredients, activeConversionKey } = useRecipeContext();
+  console.log("INGEDIENTS LIST:", activeConversionKey);
+  const ingredientsWithAmounts = ingredients.map((ingredient) => ({
+    ...ingredient,
+    amount: getIngredientAmount(ingredient, activeConversionKey)
+  }));
+  return /* @__PURE__ */ jsx("ul", { "recipe-ingredient-list": "", className: props.className, children: ingredientsWithAmounts.map((ingredient, i) => /* @__PURE__ */ jsxs("li", { "recipe-ingredient": "", children: [
+    ingredient.name,
+    " \u2014 ",
+    ingredient.amount.value,
+    " ",
+    ingredient.amount.unit
+  ] }, i)) });
+}
+
+export {
+  IngredientList
+};

package/dist/chunk-IXRYSEMS.mjs

@@ -0,0 +1,30 @@
+import {
+  useRecipeContext
+} from "./chunk-ENGJXHYU.mjs";
+
+// src/components/servings-select.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SERVINGS = [0.5, 1, 2, 3];
+function ServingsSelect(props) {
+  const { servings, setServings } = useRecipeContext();
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      className: props.className,
+      "recipe-servings-select": "",
+      value: servings,
+      onChange: (event) => {
+        setServings(Number(event.target.value));
+      },
+      children: DEFAULT_SERVINGS.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
+        size,
+        " serving",
+        size !== 1 ? "s" : ""
+      ] }, size))
+    }
+  );
+}
+
+export {
+  ServingsSelect
+};

package/dist/chunk-J5Q2Z2JG.mjs

@@ -0,0 +1,38 @@
+import {
+  useGlobalContext
+} from "./chunk-SEXTT3NJ.mjs";
+import {
+  RecipeContextProvider
+} from "./chunk-KNXMYQVO.mjs";
+
+// src/components/root.tsx
+import { RecipeUtils } from "@recipe-book/core";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function Root(props) {
+  const [servings, setServings] = useState(1);
+  const { config: globalConfig } = useGlobalContext();
+  const recipe = useMemo(() => {
+    const finalConfig = {
+      ...globalConfig,
+      ...props.recipe
+    };
+    const _recipe = RecipeUtils.create(finalConfig);
+    return {
+      ..._recipe,
+      ingredients: _recipe.ingredients.map((ingredient) => ({
+        ...ingredient,
+        amount: {
+          ...ingredient.amount,
+          // scale the amount by the number of servings
+          value: ingredient.amount.value * servings
+        }
+      }))
+    };
+  }, [globalConfig, props.recipe]);
+  return /* @__PURE__ */ jsx(RecipeContextProvider, { recipe, children: props.children });
+}
+
+export {
+  Root
+};

package/dist/chunk-JBAAWEV6.mjs

@@ -0,0 +1 @@
+import{a as s}from"./chunk-YZMVAQQG.mjs";import{jsx as i}from"react/jsx-runtime";function e(n){let{instructions:o}=s();return i("ol",{"recipe-instruction-list":"",className:n.className,children:o.map((r,t)=>i("li",{"recipe-instruction":t+1,children:r},t))})}export{e as a};