[
{
"path": ".gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": ".husky/.gitignore",
"content": "_\n"
},
{
"path": ".husky/pre-commit",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n"
},
{
"path": ".prettierignore",
"content": "**/node_modules\n**/dist\n**/package.json\n**/yarn.lock\n**/package-lock.json\n**/.eslintrc.json\n**/tsconfig.json"
},
{
"path": ".prettierrc",
"content": "{\n \"arrowParens\": \"avoid\",\n \"singleQuote\": true,\n \"semi\": false,\n \"printWidth\": 80\n} "
},
{
"path": ".vscode/settings.json",
"content": "{\n \"editor.formatOnPaste\": true,\n \"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n} "
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2021 Vladimir Angelov\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
},
{
"path": "README.md",
"content": "\n \n \n
\nCalories-In \n\n\n\n
A web-based meal plan editor for people who prepare all of their food. \n \n\n \n \n \n #da532c \n \n \n \n"
},
{
"path": "public/index.html",
"content": "\n\n \n Calories-In \n \n \n You need to enable JavaScript to run this app. \n
\n \n \n\n"
},
{
"path": "public/robots.txt",
"content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "public/site.webmanifest",
"content": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/android-chrome-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"theme_color\": \"#319795\",\n \"background_color\": \"#319795\",\n \"display\": \"standalone\"\n}\n"
},
{
"path": "src/App.tsx",
"content": "import { ChakraProvider } from '@chakra-ui/react'\nimport { MainLayout } from 'layout'\nimport 'focus-visible/dist/focus-visible'\nimport theme from 'theme'\nimport { FoodsStoreProvider } from 'foods'\nimport { loadFoods } from 'foods/persistence'\nimport { OneTimeCheckStoreProvider, ScreenSizeProvider } from 'general'\nimport { DietEditor } from 'diets'\nimport { useState } from 'react'\nimport { PortionsStoreProvider } from 'portions'\n\nimport 'scroll-polyfill/auto'\n\nfunction App() {\n const [foods] = useState(loadFoods)\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default App\n"
},
{
"path": "src/diets/DietEditor/DndContextProvider.tsx",
"content": "import { useDietFormActions } from 'diets'\nimport { ReactNode } from 'react'\n\nimport { DragDropContext, DropResult } from 'react-beautiful-dnd'\n\ntype Props = {\n children: ReactNode\n}\n\nfunction DndContextProvider({ children }: Props) {\n const dietFormActions = useDietFormActions()\n\n const onDragEnd = (dropResult: DropResult) => {\n const { source, destination, type } = dropResult\n\n if (!destination) {\n return\n }\n\n if (type === 'variantsList') {\n dietFormActions.moveVariantForm(source.index, destination.index)\n } else if (type === 'mealsList') {\n dietFormActions.moveMealForm(source.index, destination.index)\n } else if (type === 'ingredientsList') {\n dietFormActions.moveIngredientForm(\n source.droppableId,\n source.index,\n destination.droppableId,\n destination.index\n )\n }\n }\n\n return {children} \n}\n\nexport default DndContextProvider\n"
},
{
"path": "src/diets/DietEditor/Form/About.tsx",
"content": "import {\n Modal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n Button,\n Text,\n ListItem,\n List,\n ListIcon,\n} from '@chakra-ui/react'\nimport { CheckCircle } from 'react-feather'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n}\n\nfunction About({ isOpen, onClose }: Props) {\n return (\n \n \n About \n \n \n Hi, I'm Vladimir, the person behind this project. \n \n \n Calories-In\n {' '}\n is made for people who follow meal plans that involve preparing\n everything by yourself and gives them full control to fine tune\n the nutritional values.\n \n \n The idea was born out of my experience of trying to find a better\n alternative to Google Sheets for calculating the macros of my own\n meal plans. I wanted to be able to do this on desktop as it's more\n convenient but nothing really felt fast and simple enough.\n \n The main differences to other apps in this space are: \n \n \n \n Faster search\n \n \n There are actually not that many foods you need when you\n prepare everything yourself. This means all of the food data\n can be downloaded beforehand which makes the search super\n fast. Of course you can add your own foods if you'd like.{' '}\n \n \n \n \n Undo/Redo\n \n \n Building a plan from scratch or updating an existing one\n involves some back and forth choosing the right foods and\n adjusting their amounts. This is especially true if you want\n to be as close as possible to a specific calorie limit and\n have your macros be a certain percentages split.\n \n \n \n \n Faster export\n \n \n Creating the PDF file for your meal plan is done entirely\n inside the browser. It does not involve generating and\n downloading it from a server. This means I can keep the cost\n of running the website low and you get your file in just a few\n seconds.\n \n \n \n \n Simpler\n \n\n \n There are no other pages except the editor. Most of the other\n tools are bloated with additional features for professionals,\n such as managing clients, creating invoices, etc.\n \n \n \n \n Fully mobile\n \n \n You can use your phone or tablet to build your meal plans\n right from your browser. If you add the app to your home\n screen it will look and feel almost like a native one.\n \n \n
\n \n \n\n \n \n Close\n \n \n \n \n )\n}\n\nexport default About\n"
},
{
"path": "src/diets/DietEditor/Form/Controls/ExportButton.tsx",
"content": "import { ScreenSize, useScreenSize } from 'general'\nimport { Button, ButtonProps, IconButton } from '@chakra-ui/react'\nimport { Share } from 'react-feather'\nimport { canExportDietForm } from 'diets/persistence'\nimport { useDietForm } from 'diets'\n\ntype Props = {} & ButtonProps\n\nfunction ExportButton({ ...rest }: Props) {\n const screenSize = useScreenSize()\n const dietForm = useDietForm()\n const canExport = canExportDietForm(dietForm)\n\n const commonProps: ButtonProps = {\n isDisabled: !canExport,\n ...rest,\n }\n\n if (screenSize >= ScreenSize.Medium) {\n return (\n (null)\n const focusedForDietFieldIdMap = useRef>(\n {}\n )\n\n useEffect(() => {\n if (\n !canExportDietForm(dietForm) &&\n editablePreviewRef.current &&\n !focusedForDietFieldIdMap.current[dietForm.fieldId]\n ) {\n editablePreviewRef.current.focus()\n focusedForDietFieldIdMap.current[dietForm.fieldId] = true\n }\n }, [dietForm])\n\n function onNameChange(event: ChangeEvent) {\n const { value } = event.target\n dietFormActions.updateDietForm({ name: value })\n }\n\n const boxShadowColor = getComputedColorFromChakra('teal.400')\n\n return (\n \n \n \n \n\n \n \n\n \n \n\n \n )\n}\n\nexport default Controls\n"
},
{
"path": "src/diets/DietEditor/Form/Footer.tsx",
"content": "import { Box, HStack, Button, Divider, Link, BoxProps } from '@chakra-ui/react'\n\ntype Props = {\n onAbout: () => void\n} & BoxProps\n\nfunction Footer({ onAbout, ...rest }: Props) {\n return (\n \n \n \n About\n \n\n \n Terms\n \n\n \n Disclaimer\n \n \n \n )\n}\n\nexport default Footer\n"
},
{
"path": "src/diets/DietEditor/Form/index.tsx",
"content": "import { useDietForm, useScrollManager } from 'diets'\nimport { DietFormVersionsStoreProvider } from 'undoRedo'\nimport { useRef } from 'react'\nimport { Page, PageHeader, PageBody } from 'layout'\nimport { MealsList } from 'meals'\nimport useDietFormEvents from './useDietFormEvents'\nimport { Box, useDisclosure, Flex } from '@chakra-ui/react'\nimport { ScreenSize, useElementHeight, useScreenSize } from 'general'\nimport Controls from './Controls'\nimport { FoodsDrawer } from 'foods'\nimport { VariantsList, VariantStats } from 'variants'\nimport useVariantFormEvents from './useVariantFormActions'\nimport About from './About'\nimport Footer from './Footer'\n\nfunction Form() {\n const horizontalScrollRef = useRef(null)\n const dietForm = useDietForm()\n const { variantsForms } = dietForm\n const selectedVariantForm = variantsForms[dietForm.selectedVariantFormIndex]\n\n const scrollManager = useScrollManager({\n selectedVariantForm,\n horizontalScrollRef,\n })\n\n const foodsDrawerDisclosure = useDisclosure()\n const dietFormEvents = useDietFormEvents({\n scrollManager,\n foodsDrawerDisclosure,\n })\n\n const {\n elementHeight: headerHeight,\n elementRef: headerRef,\n } = useElementHeight()\n const variantFormEvents = useVariantFormEvents({ scrollManager })\n\n const screenSize = useScreenSize()\n\n const aboutModalDisclosure = useDisclosure()\n\n return (\n \n \n \n \n \n \n\n \n \n \n\n \n\n \n \n \n )\n}\n\nexport default Form\n"
},
{
"path": "src/diets/DietEditor/Form/useDietFormEvents.ts",
"content": "import { UseDisclosureReturn } from '@chakra-ui/hooks'\nimport { DietForm, useDietFormActions, ScrollManager } from 'diets'\nimport { Food } from 'foods'\nimport { getIngredient } from 'ingredients'\nimport { getMealForm } from 'meals'\nimport { AppLocation } from 'undoRedo'\n\ntype Params = {\n scrollManager: ScrollManager\n foodsDrawerDisclosure: UseDisclosureReturn\n}\n\nfunction useDietFormEvents({ scrollManager, foodsDrawerDisclosure }: Params) {\n const dietFormActions = useDietFormActions()\n const { setScrollState } = scrollManager\n\n function onMealAdded(foods: Food[], mealName?: string) {\n foodsDrawerDisclosure.onClose()\n const ingredients = foods.map(getIngredient)\n const mealForm = getMealForm({ name: mealName as string, ingredients })\n dietFormActions.appendMealForm(mealForm)\n }\n\n function onUndoOrRedo(\n form: DietForm,\n { scrollTop, scrollLeft, variantIndex }: AppLocation\n ) {\n const finalVariantIndex = form.variantsForms[variantIndex]\n ? variantIndex\n : form.selectedVariantFormIndex\n\n dietFormActions.updateDietForm({\n ...form,\n selectedVariantFormIndex: finalVariantIndex,\n })\n\n setScrollState({ top: scrollTop, left: scrollLeft })\n }\n\n return {\n onUndoOrRedo,\n onMealAdded,\n }\n}\n\nexport default useDietFormEvents\n"
},
{
"path": "src/diets/DietEditor/Form/useVariantFormActions.ts",
"content": "import { VariantForm } from 'variants'\nimport { useCallback } from 'react'\nimport { ScrollManager } from 'diets/useScrollManager'\n\ntype Params = {\n scrollManager: ScrollManager\n}\n\nfunction useVariantFormEvents({ scrollManager }: Params) {\n const { setScrollState, getCachedScrollTop } = scrollManager\n\n const onVariantFormSelect = useCallback(\n (variantForm: VariantForm) => {\n setScrollState({ top: getCachedScrollTop(variantForm.fieldId) })\n },\n [setScrollState, getCachedScrollTop]\n )\n\n const onVariantFormCopy = useCallback(() => {\n setScrollState({ top: 0 })\n }, [setScrollState])\n\n return {\n onVariantFormCopy,\n onVariantFormSelect,\n }\n}\n\nexport default useVariantFormEvents\n"
},
{
"path": "src/diets/DietEditor/index.tsx",
"content": "import { DietFormStoreProvider } from 'diets'\nimport Form from './Form'\nimport { useOneTimeCheckActions } from 'general'\nimport DndContextProvider from './DndContextProvider'\nimport { MealsStatsStoreProvider } from 'stats'\nimport { useState } from 'react'\nimport { loadLastOrDefaultDietForm } from 'diets/persistence'\n\nfunction DietEditor() {\n const oneTimeCheckActions = useOneTimeCheckActions()\n const [dietForm] = useState(loadLastOrDefaultDietForm)\n\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}\n\nexport default DietEditor\n"
},
{
"path": "src/diets/PdfDietEditor.tsx",
"content": "import ReactPDF, {\n Document,\n Page,\n Font,\n StyleSheet,\n View,\n} from '@react-pdf/renderer'\nimport { Food } from 'foods'\nimport { Portion } from 'portions'\nimport { ReactElement } from 'react'\nimport { StatsTree } from 'stats/calculations/getStatsTree'\nimport getComputedColorFromChakra from 'theme/getComputedColorFromChakra'\nimport PdfVariantItem from 'variants/PdfVariantsList/PdfVariantItem'\nimport { DietForm } from './dietForm'\n\ntype Props = {\n dietForm: DietForm\n foodsById: Record\n portionsById: Record\n\n dietFormStatsTree: StatsTree\n} & ReactPDF.DocumentProps\n\nfunction PdfDietEditor({\n dietForm,\n foodsById,\n portionsById,\n dietFormStatsTree,\n ...rest\n}: Props) {\n const { variantsForms } = dietForm\n\n const variantItemsElements: ReactElement[] = []\n\n variantsForms.forEach((variantForm, index) => {\n const { mealsForms } = variantForm\n const { stats, subtrees } = dietFormStatsTree.subtrees[index]\n\n if (mealsForms.length > 0) {\n variantItemsElements.push(\n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n page: {\n fontFamily: 'Roboto',\n paddingBottom: 12,\n },\n})\n\nFont.register({\n family: 'Roboto',\n fonts: [\n {\n src:\n 'https://fontlibrary.org/assets/fonts/roboto/4f8c3c9bbdde908a86daabfe666d2f61/ac3f799d5bbaf5196fab15ab8de8431c/RobotoRegular.ttf',\n fontWeight: 'normal',\n },\n\n {\n src:\n 'https://fontlibrary.org/assets/fonts/roboto/4f8c3c9bbdde908a86daabfe666d2f61/fe13e4170719c2fc586501e777bde143/RobotoMedium.ttf',\n fontWeight: 'medium',\n },\n\n {\n src:\n 'https://fontlibrary.org/assets/fonts/roboto/4f8c3c9bbdde908a86daabfe666d2f61/d329cc8b34667f114a95422aaad1b063/RobotoBold.ttf',\n fontWeight: 'bold',\n },\n ],\n})\n\nexport default PdfDietEditor\n"
},
{
"path": "src/diets/dietForm.ts",
"content": "import { Diet } from 'diets'\nimport { getVariantForm, VariantForm } from 'variants'\nimport { v4 as uuidv4 } from 'uuid'\n\ntype DietForm = {\n fieldId: string\n name: string\n selectedVariantFormIndex: number\n variantsForms: VariantForm[]\n}\n\nfunction getDietForm(diet?: Diet): DietForm {\n const variantsForms = [getVariantForm('Day 1')]\n const fieldId = uuidv4()\n\n if (diet) {\n return {\n fieldId,\n name: diet.name,\n variantsForms,\n selectedVariantFormIndex: 0,\n }\n }\n\n return {\n fieldId,\n name: 'Untitled',\n variantsForms,\n selectedVariantFormIndex: 0,\n }\n}\n\nexport type { DietForm }\n\nexport { getDietForm }\n"
},
{
"path": "src/diets/index.ts",
"content": "export * from './dietForm'\nexport { default as useDietFormStore } from './useDietFormStore'\nexport * from './useDietFormStore'\nexport { default as DietEditor } from './DietEditor'\nexport * from './types'\nexport { default as useGetDietFormStatsTree } from './useGetDietFormStatsTree'\nexport { default as useScrollManager } from './useScrollManager'\nexport * from './useScrollManager'\n"
},
{
"path": "src/diets/persistence/ExportModal/Content/Exporter/index.tsx",
"content": "import { Loader } from 'general'\nimport {\n Alert,\n AlertIcon,\n AlertTitle,\n AlertDescription,\n} from '@chakra-ui/react'\nimport usePdfExport from './usePdfExport'\n\ntype Props = {\n onUpdate: (blob: Blob, url: string) => void\n}\n\nfunction Exporter({ onUpdate }: Props) {\n const { isLoading, error } = usePdfExport({ onUpdate })\n\n if (isLoading) {\n return \n \n {error\n ? 'Something went wrong while creating your pdf file'\n : 'Your PDF file is ready'}\n \n {!error && (\n \n Downloading this plan will allow you to import it later if you need to\n update it.\n \n )}\n \n )\n}\n\nexport default Exporter\n"
},
{
"path": "src/diets/persistence/ExportModal/Content/Exporter/usePdfExport.ts",
"content": "import { useDietForm, useGetDietFormStatsTree } from 'diets'\nimport { useFoods } from 'foods'\nimport { usePortions } from 'portions'\nimport { useEffect, useState } from 'react'\nimport Worker from './worker'\nimport { minDelay, useRunIfNotUnmounted } from 'general'\n\nconst worker = new Worker()\n\ntype Params = {\n onUpdate: (blob: Blob, url: string) => void\n}\n\nfunction usePdfExport({ onUpdate }: Params) {\n const dietForm = useDietForm()\n const { foodsById } = useFoods()\n const { portionsById } = usePortions()\n const getDietFormStatsTree = useGetDietFormStatsTree()\n const [isLoading, setIsLoading] = useState(false)\n const [error, setError] = useState()\n\n const runIfNotUnmounted = useRunIfNotUnmounted()\n\n useEffect(() => {\n async function run() {\n const dietFormStatsTree = getDietFormStatsTree(dietForm)\n const startDate = new Date()\n\n try {\n setIsLoading(true)\n const blob = await worker.getDietPdfBlob({\n dietForm,\n dietFormStatsTree,\n foodsById,\n portionsById,\n })\n\n await minDelay(startDate)\n\n runIfNotUnmounted(() => {\n setIsLoading(false)\n const url = URL.createObjectURL(blob)\n onUpdate(blob, url)\n })\n } catch (error) {\n await minDelay(startDate)\n\n runIfNotUnmounted(() => {\n setIsLoading(false)\n setError(error)\n })\n }\n }\n run()\n }, [\n dietForm,\n foodsById,\n portionsById,\n getDietFormStatsTree,\n onUpdate,\n runIfNotUnmounted,\n ])\n\n return {\n isLoading,\n error,\n }\n}\n\nexport default usePdfExport\n"
},
{
"path": "src/diets/persistence/ExportModal/Content/Exporter/worker/custom.d.ts",
"content": "declare module 'comlink-loader!*' {\n import { Params } from './types'\n\n class WebpackWorker extends Worker {\n constructor()\n\n getDietPdfBlob(data: Params): Promise\n }\n\n export = WebpackWorker\n}\n"
},
{
"path": "src/diets/persistence/ExportModal/Content/Exporter/worker/index.ts",
"content": "// eslint-disable-next-line\nimport Worker from 'comlink-loader!./worker'\n\nexport default Worker\n"
},
{
"path": "src/diets/persistence/ExportModal/Content/Exporter/worker/types.ts",
"content": "import { DietForm } from 'diets/dietForm'\nimport { Food } from 'foods/types'\nimport { Portion } from 'portions/types'\nimport { StatsTree } from 'stats/calculations'\n\ntype Params = {\n dietForm: DietForm\n foodsById: Record\n portionsById: Record\n dietFormStatsTree: StatsTree\n}\n\nexport type { Params }\n"
},
{
"path": "src/diets/persistence/ExportModal/Content/Exporter/worker/worker.tsx",
"content": "import { pdf } from '@react-pdf/renderer'\n\nif (process.env.NODE_ENV !== 'production') {\n const t: any = global\n t.$RefreshReg$ = () => {}\n t.$RefreshSig$ = () => () => {}\n}\n\nasync function getDietPdfBlob(data: any) {\n const PdfDietEditor = require('diets/PdfDietEditor').default\n\n const document = (\n ()\n const [url, setUrl] = useState()\n const dietForm = useDietForm()\n\n const onUpdate = useCallback((blob: Blob, url: string) => {\n setBlob(blob)\n setUrl(url)\n }, [])\n\n function onViewInBrowser() {\n window.open(url, '_blank')\n }\n\n return (\n \n \n Export{' '}\n \n {dietForm.name}\n \n \n \n \n\n \n \n {blob && url && (\n \n View in browser\n \n )}\n\n \n Close\n \n \n \n \n )\n}\n\nexport default Content\n"
},
{
"path": "src/diets/persistence/ExportModal/index.tsx",
"content": "import { Modal, ModalOverlay } from '@chakra-ui/react'\nimport Content from './Content'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n}\n\nfunction ExportModal({ isOpen, onClose }: Props) {\n return (\n \n \n )\n}\n\nexport default ExportModal\n"
},
{
"path": "src/diets/persistence/canExportDietForm.ts",
"content": "import { DietForm } from 'diets'\n\nfunction canExportDietForm(dietForm: DietForm) {\n const { variantsForms } = dietForm\n\n return variantsForms.some(({ mealsForms }) => {\n return mealsForms.length > 0\n })\n}\n\nexport default canExportDietForm\n"
},
{
"path": "src/diets/persistence/hasMissingFoods.ts",
"content": "import { DietForm } from 'diets'\nimport { Food, FoodId } from 'foods'\n\nfunction hasMissingFoods(dietForm: DietForm, foodsById: Record) {\n const { variantsForms } = dietForm\n\n for (const variantForm of variantsForms) {\n const { mealsForms } = variantForm\n\n for (const mealForm of mealsForms) {\n const { ingredientsForms } = mealForm\n\n for (const ingredientForm of ingredientsForms) {\n const food = foodsById[ingredientForm.foodId]\n\n if (!food) {\n return true\n }\n }\n }\n }\n\n return false\n}\n\nexport default hasMissingFoods\n"
},
{
"path": "src/diets/persistence/index.ts",
"content": "export { default as ExportModal } from './ExportModal'\nexport { default as useImportDietForm } from './useImportDietForm'\nexport { default as parseDietForm } from './parseDietForm'\nexport { default as hasMissingFoods } from './hasMissingFoods'\nexport { default as loadLastOrDefaultDietForm } from './loadLastOrDefaultDietForm'\nexport { default as canExportDietForm } from './canExportDietForm'\n"
},
{
"path": "src/diets/persistence/loadLastOrDefaultDietForm.ts",
"content": "import { getDietForm } from 'diets'\n\nfunction loadLastOrDefaultDietForm() {\n const savedValue = localStorage.getItem('lastDietForm')\n\n if (savedValue) {\n try {\n return JSON.parse(savedValue)\n } catch (error) {\n return getDietForm()\n }\n }\n\n return getDietForm()\n}\n\nexport default loadLastOrDefaultDietForm\n"
},
{
"path": "src/diets/persistence/parseDietForm.ts",
"content": "import { DietForm } from 'diets'\nimport { fixWhiteSpace } from 'persistence'\n\nfunction getLocation(text: string) {\n const subject = '/Subject'\n const startIndex = text.indexOf('/Subject')\n const endIndex = text.indexOf('R', startIndex)\n\n if (startIndex < 0 || endIndex < 0) {\n throw new SyntaxError()\n }\n const locatioPrefix = text.slice(startIndex + subject.length, endIndex).trim()\n return `${locatioPrefix} obj`\n}\n\nfunction getData(location: string, text: string) {\n const startIndex = text.indexOf(location)\n const endIndex = text.indexOf('endobj', startIndex)\n\n if (startIndex < 0 || endIndex < 0) {\n throw new SyntaxError()\n }\n\n return text.slice(startIndex + location.length + 2, endIndex - 2)\n}\n\nfunction parseDietForm(text: string) {\n const location = getLocation(text)\n const data = getData(location, text)\n const dietForm = JSON.parse(data, (key: string, value) => {\n if (key === 'notes') {\n return fixWhiteSpace(value)\n }\n\n return value\n }) as DietForm\n\n return dietForm\n}\n\nexport default parseDietForm\n"
},
{
"path": "src/diets/persistence/useDietImportErrors.tsx",
"content": "import { useToast } from '@chakra-ui/toast'\nimport { Text, Button, UseDisclosureReturn } from '@chakra-ui/react'\n\ntype Params = {\n missingFoodsModalDisclosure: UseDisclosureReturn\n}\n\nfunction useDietImportErrors({ missingFoodsModalDisclosure }: Params) {\n const toast = useToast()\n\n function onLearnAboutMissingFoods() {\n toast.closeAll()\n missingFoodsModalDisclosure.onOpen()\n }\n\n function onMissingFoods() {\n toast({\n isClosable: true,\n position: 'top',\n title: 'File imported',\n description: (\n \n Warning: Foods missing.{' '}\n \n Learn more\n \n \n ),\n status: 'warning',\n duration: null,\n })\n }\n\n return {\n onMissingFoods,\n missingFoodsModalDisclosure,\n }\n}\n\nexport default useDietImportErrors\n"
},
{
"path": "src/diets/persistence/useImportDietForm.ts",
"content": "import { selectFile, readFile } from 'persistence'\nimport { useFoods } from 'foods'\nimport { useDietFormActions } from 'diets'\nimport { hasMissingFoods, parseDietForm } from 'diets/persistence'\nimport useFileImportError from 'persistence/useImportFileError'\nimport { useToast } from '@chakra-ui/toast'\nimport useDietImportErrors from './useDietImportErrors'\nimport { UseDisclosureReturn } from '@chakra-ui/hooks'\n\ntype Params = {\n missingFoodsModalDisclosure: UseDisclosureReturn\n}\n\nfunction useImportDietForm({ missingFoodsModalDisclosure }: Params) {\n const { foodsById } = useFoods()\n const dietFormActions = useDietFormActions()\n const fileImportError = useFileImportError()\n const dietImportErrors = useDietImportErrors({ missingFoodsModalDisclosure })\n const toast = useToast()\n\n async function onLoadFromFile() {\n const file = await selectFile('application/pdf')\n\n try {\n const text = await readFile(file)\n const dietForm = parseDietForm(text)\n\n if (hasMissingFoods(dietForm, foodsById)) {\n dietImportErrors.onMissingFoods()\n } else {\n toast({\n status: 'success',\n position: 'top',\n title: 'Meal plan imported',\n duration: 2000,\n isClosable: true,\n })\n }\n dietFormActions.setDietForm(dietForm)\n } catch (error: any) {\n fileImportError.onError({ error, file })\n }\n }\n\n return {\n onLoadFromFile,\n missingFoodsModalDisclosure: dietImportErrors.missingFoodsModalDisclosure,\n }\n}\n\nexport default useImportDietForm\n"
},
{
"path": "src/diets/types.ts",
"content": "import { Meal } from 'meals'\n\ntype Diet = {\n id: number\n name: string\n meals: Meal[]\n}\n\nexport type { Diet }\n"
},
{
"path": "src/diets/useDietFormStore.ts",
"content": "import { useCallback, useState } from 'react'\nimport { DietForm } from './dietForm'\nimport { useVariantsFormsActions, VariantsFormsActions } from 'variants'\nimport { useMealsFormsActions, MealsFormsActions } from 'meals'\nimport { useCallbacksMemo, makeStoreProvider } from 'general'\nimport {\n useIngredientsFormsActions,\n IngredientsFormsActions,\n} from 'ingredients'\nimport { OneTimeCheckActions } from 'general'\nimport { useSaveValue } from 'persistence'\n\nexport type Params = {\n initialDietForm: DietForm\n oneTimeCheckActions: OneTimeCheckActions\n}\n\ntype Actions = VariantsFormsActions &\n MealsFormsActions &\n IngredientsFormsActions\n\nfunction useDietFormStore({\n initialDietForm,\n\n oneTimeCheckActions,\n}: Params) {\n const [dietForm, setDietForm] = useState(initialDietForm)\n\n useSaveValue({ value: dietForm, key: 'lastDietForm' })\n\n const variantsFormsActions = useVariantsFormsActions({\n setDietForm,\n oneTimeCheckActions,\n })\n\n const mealsFormsActions = useMealsFormsActions({\n setDietForm,\n oneTimeCheckActions,\n })\n\n const ingredientsFormsActions = useIngredientsFormsActions({\n setDietForm,\n oneTimeCheckActions,\n })\n\n const updateDietForm = useCallback(\n (partialDietForm: Partial) => {\n setDietForm(dietForm => {\n return {\n ...dietForm,\n ...partialDietForm,\n }\n })\n },\n [setDietForm]\n )\n\n const ownActions = {\n setDietForm,\n updateDietForm,\n }\n\n const actions: Actions & typeof ownActions = useCallbacksMemo({\n ...ownActions,\n ...mealsFormsActions,\n ...variantsFormsActions,\n ...ingredientsFormsActions,\n })\n\n return [dietForm, actions] as const\n}\n\nconst [\n DietFormStoreProvider,\n useDietForm,\n useDietFormActions,\n] = makeStoreProvider(useDietFormStore)\n\nexport { DietFormStoreProvider, useDietForm, useDietFormActions }\n\nexport default useDietFormStore\n"
},
{
"path": "src/diets/useGetDietFormStatsTree.ts",
"content": "import { StatsTree, getStatsTree } from 'stats'\nimport { DietForm } from './dietForm'\nimport { useGetVariantFormStatsTree } from 'variants'\nimport { useCallback } from 'react'\n\nfunction useGetDietFormStatsTree() {\n const getVariantFormStatsTree = useGetVariantFormStatsTree()\n\n const getDietFormStatsTree2 = useCallback(\n (dietForm: DietForm): StatsTree => {\n const subtrees = dietForm.variantsForms.map(variantForm =>\n getVariantFormStatsTree(variantForm)\n )\n\n return getStatsTree({\n id: dietForm.fieldId,\n subtrees,\n calculateAvg: true,\n })\n },\n [getVariantFormStatsTree]\n )\n\n return getDietFormStatsTree2\n}\n\nexport default useGetDietFormStatsTree\n"
},
{
"path": "src/diets/useScrollManager.ts",
"content": "import { VariantForm } from 'variants'\nimport { useState, useRef, useEffect, RefObject, useCallback } from 'react'\n\ntype ScrollState = {\n top?: number\n left?: number\n}\n\ntype Params = {\n selectedVariantForm: VariantForm\n horizontalScrollRef: RefObject\n}\n\nfunction useScrollManager({\n selectedVariantForm,\n horizontalScrollRef,\n}: Params) {\n const scrollTopCacheRef = useRef>({})\n const [scrollState, setScrollState] = useState({\n top: 0,\n left: 0,\n })\n\n const getCachedScrollTop = useCallback((variantFormFieldId: string) => {\n return scrollTopCacheRef.current[variantFormFieldId] || 0\n }, [])\n\n useEffect(() => {\n function onScroll() {\n scrollTopCacheRef.current[selectedVariantForm.fieldId] = window.scrollY\n }\n window.addEventListener('scroll', onScroll)\n\n return () => {\n window.removeEventListener('scroll', onScroll)\n }\n }, [selectedVariantForm.fieldId])\n\n useEffect(() => {\n const { top, left } = scrollState\n\n if (top !== undefined) {\n window.scroll({ top })\n }\n\n if (left !== undefined && horizontalScrollRef.current) {\n horizontalScrollRef.current.scrollLeft = left\n }\n }, [scrollState, horizontalScrollRef])\n\n return {\n setScrollState,\n getCachedScrollTop,\n }\n}\n\ntype ScrollManager = ReturnType\n\nexport type { ScrollManager }\n\nexport default useScrollManager\n"
},
{
"path": "src/dom/animateScrollLeft.ts",
"content": "import { animate } from 'framer-motion'\nimport { RefObject } from 'react'\n\nfunction animateScrollLeft(nodeRef: RefObject, delta: number) {\n if (!nodeRef.current) {\n return\n }\n\n const node = nodeRef.current\n\n animate(node.scrollLeft, node.scrollLeft + delta, {\n duration: 0.2,\n onUpdate: value => {\n node.scrollLeft = value\n },\n })\n}\n\nexport default animateScrollLeft\n"
},
{
"path": "src/dom/index.ts",
"content": "export { default as animateScrollLeft } from './animateScrollLeft'\nexport { default as isElementInViewport } from './isElementInViewport'\nexport { default as useGetRefForId } from './useGetRefForId'\nexport { default as useScrollTo } from './useScrollTo'\n"
},
{
"path": "src/dom/isElementInViewport.ts",
"content": "function isElementInViewport(element: Element) {\n const { top, left, bottom, right } = element.getBoundingClientRect()\n\n return (\n top >= 0 &&\n left >= 0 &&\n bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n right <= (window.innerWidth || document.documentElement.clientWidth)\n )\n}\n\nexport default isElementInViewport\n"
},
{
"path": "src/dom/useGetRefForId.ts",
"content": "import { createRef, RefObject, useCallback, useRef } from 'react'\n\ntype RefsCache = {\n [id: number]: RefObject\n [id: string]: RefObject\n}\n\nfunction useGetRefForId() {\n const cacheRef = useRef>({})\n\n const getRef = useCallback((id: number | string) => {\n if (!cacheRef.current[id]) {\n cacheRef.current[id] = createRef()\n }\n\n return cacheRef.current[id]\n }, [])\n\n return getRef\n}\n\nexport default useGetRefForId\n"
},
{
"path": "src/dom/useScrollTo.ts",
"content": "import { useEffect, useRef, useCallback } from 'react'\n\nfunction useScrollTo() {\n const scrollTimeoutRef = useRef()\n const didScrollCheckTimeoutRef = useRef()\n\n useEffect(() => {\n return () => {\n window.clearTimeout(scrollTimeoutRef.current)\n }\n }, [])\n\n const scrollTo = useCallback((node: HTMLElement) => {\n return new Promise(resolve => {\n const resolveWihoutScrollTimeout = window.setTimeout(() => {\n window.clearTimeout(didScrollCheckTimeoutRef.current)\n\n window.removeEventListener('scroll', listener)\n resolve()\n }, 100)\n\n function listener() {\n window.clearTimeout(scrollTimeoutRef.current)\n window.clearTimeout(resolveWihoutScrollTimeout)\n\n scrollTimeoutRef.current = window.setTimeout(() => {\n window.removeEventListener('scroll', listener)\n resolve()\n }, 50)\n }\n\n window.addEventListener('scroll', listener)\n\n node.scrollIntoView({\n behavior: 'smooth',\n block: 'center',\n })\n })\n }, [])\n\n return scrollTo\n}\n\nexport default useScrollTo\n"
},
{
"path": "src/foods/FoodInfo.tsx",
"content": "import { Text, Box, Flex, BoxProps, Link } from '@chakra-ui/react'\nimport { Food } from 'foods'\nimport { ReactNode } from 'react'\nimport { DEFAULT_SERVING_SIZE_IN_GRAMS } from './foodForm'\n\ntype Props = {\n food: Food\n nameNoOfLines?: number\n canBeLink?: boolean\n notes?: string\n\n energy?: number\n children?: ReactNode\n} & BoxProps\n\nfunction FoodInfo({\n food,\n\n fontSize,\n nameNoOfLines,\n energy,\n notes,\n children,\n canBeLink = false,\n ...rest\n}: Props) {\n return (\n \n \n {food.url && canBeLink ? (\n \n {food.name}\n \n )}\n\n {energy !== undefined && (\n \n \n {`${Math.round(energy as number)}kcal`}\n {' '}\n / {food.servingSizeInGrams || DEFAULT_SERVING_SIZE_IN_GRAMS}g\n \n )}\n\n {children}\n \n \n )\n}\n\nexport default FoodInfo\n"
},
{
"path": "src/foods/FoodModal/Content/DeleteConfirmationModal.tsx",
"content": "import {\n Modal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n Button,\n Text,\n} from '@chakra-ui/react'\n\ntype Props = {\n isOpen: boolean\n onCancel: () => void\n onConfirm: () => void\n text: string\n confirmButtonLabel: String\n}\n\nfunction DeleteConfirmationModal({\n isOpen,\n onCancel,\n onConfirm,\n text,\n confirmButtonLabel,\n}: Props) {\n return (\n \n \n Delete food \n \n {text} \n This action cannot be undone. \n \n\n \n \n Cancel\n \n \n {confirmButtonLabel}\n \n \n \n \n )\n}\n\nexport default DeleteConfirmationModal\n"
},
{
"path": "src/foods/FoodModal/Content/FoodFormProvider.tsx",
"content": "import { useForm } from 'react-hook-form'\nimport { yupResolver } from '@hookform/resolvers/yup'\nimport { ReactNode } from 'react'\nimport { FormProvider } from 'react-hook-form'\nimport {\n Food,\n FoodForm,\n foodFormSchema,\n FoodFormSchemaContext,\n getFoodForm,\n useFoods,\n} from 'foods'\n\ntype Props = {\n food?: Food\n children: ReactNode\n}\n\nfunction FoodFormProvider({ food, children }: Props) {\n const defaultValues = getFoodForm(food)\n const { allFoods } = useFoods()\n\n const formMethods = useForm({\n defaultValues,\n resolver: yupResolver(foodFormSchema),\n context: {\n allFoods,\n food,\n },\n mode: 'onChange',\n })\n\n return {children} \n}\n\nexport default FoodFormProvider\n"
},
{
"path": "src/foods/FoodModal/Content/Form/Footer.tsx",
"content": "import { ModalFooter, Button, HStack } from '@chakra-ui/react'\n\ntype Props = {\n onClose: () => void\n onSubmit: () => void\n isEditing: boolean\n}\n\nfunction Footer({ onClose, onSubmit, isEditing }: Props) {\n return (\n \n \n Close \n {isEditing && (\n \n Save food\n \n )}\n \n \n )\n}\n\nexport default Footer\n"
},
{
"path": "src/foods/FoodModal/Content/Form/Header.tsx",
"content": "import { ModalHeader, Button } from '@chakra-ui/react'\n\ntype Props = {\n onClose: () => void\n title: string\n canEdit: boolean\n onToggleEdit: () => void\n isEditing: boolean\n}\n\nfunction Header({ title, canEdit, isEditing, onToggleEdit }: Props) {\n return (\n \n {title}\n {canEdit && (\n \n {isEditing ? 'Back to preview' : 'Edit food'}\n \n )}\n \n )\n}\n\nexport default Header\n"
},
{
"path": "src/foods/FoodModal/Content/Form/Tabs/NutritionFactsFormFields.tsx",
"content": "import { Box, FlexProps, VStack } from '@chakra-ui/react'\nimport { RefObject } from 'react'\nimport { StatsFormFields, StatFormField } from 'stats'\n\ntype Props = {\n nameInputRef: RefObject\n canEdit: boolean\n} & FlexProps\n\nfunction NutritionFactsFormFields({ nameInputRef, canEdit, ...rest }: Props) {\n return (\n \n \n \n \n\n \n \n )\n}\n\nexport default NutritionFactsFormFields\n"
},
{
"path": "src/foods/FoodModal/Content/Form/Tabs/UrlField.tsx",
"content": "import {\n Flex,\n FormControl,\n FormLabel,\n Link,\n Alert,\n AlertIcon,\n} from '@chakra-ui/react'\nimport { Input } from '@chakra-ui/react'\nimport { Food, FoodForm } from 'foods'\nimport { useFormContext } from 'react-hook-form'\n\ntype Props = {\n canEdit: boolean\n food?: Food\n}\n\nfunction UrlField({ canEdit, food }: Props) {\n const { register } = useFormContext()\n\n return (\n \n {canEdit && (\n \n \n )}\n\n \n \n \n Link:\n \n {canEdit ? (\n \n {food?.url}\n \n )}\n \n \n \n )\n}\n\nexport default UrlField\n"
},
{
"path": "src/foods/FoodModal/Content/Form/Tabs/VolumeFormFields.tsx",
"content": "import { Flex, Text, HStack, Alert, AlertIcon } from '@chakra-ui/react'\nimport { Food, FoodForm } from 'foods'\nimport { PortionsSelect, usePortions } from 'portions'\nimport { Controller, useFormContext } from 'react-hook-form'\nimport { AmountInput } from 'stats'\n\ntype Props = {\n canEdit: boolean\n food?: Food\n}\n\nfunction VolumeFields({ canEdit, food }: Props) {\n const { register } = useFormContext()\n const { portionsById, volumeBasedPortions } = usePortions()\n const portion = food?.volume ? portionsById[food.volume.portionId] : undefined\n\n return (\n \n {canEdit && (\n \n \n )}\n\n \n {canEdit && 1 x }\n {canEdit ? (\n \n 1 x {`${portion?.singular} (${portion?.millilitersPerAmount} ml)`}\n \n )}\n\n = \n \n {canEdit ? (\n (\n {food?.volume?.weightInGrams}g \n )}\n {canEdit && g }\n \n \n \n )\n}\n\nexport default VolumeFields\n"
},
{
"path": "src/foods/FoodModal/Content/Form/Tabs/index.tsx",
"content": "import { Food } from 'foods'\nimport NutritionFactsFormFields from './NutritionFactsFormFields'\nimport { RefObject } from 'react'\nimport {\n Tabs as TabsBase,\n TabList,\n TabPanels,\n Tab,\n TabPanel,\n} from '@chakra-ui/react'\nimport VolumeFormFields from './VolumeFormFields'\nimport UrlField from './UrlField'\nimport { useFormContext } from 'react-hook-form'\n\ntype TabName = 'nutrition' | 'volume' | 'link'\n\ntype Props = {\n nameInputRef: RefObject\n food?: Food\n isEditing: boolean\n selectedTabName: TabName\n tabNames: TabName[]\n onTabNameChange: (name: TabName) => void\n}\n\nfunction Tabs({\n nameInputRef,\n food,\n isEditing,\n selectedTabName,\n tabNames,\n onTabNameChange,\n}: Props) {\n const { formState } = useFormContext()\n const tabIndex = tabNames.indexOf(selectedTabName)\n\n function onTabIndexChange(index: number) {\n onTabNameChange(tabNames[index])\n }\n\n return (\n \n \n \n Nutrition Facts\n \n\n {tabNames.includes('volume') && Volume }\n {tabNames.includes('link') && Link }\n \n\n \n \n \n {tabNames.includes('volume') && (\n \n \n )}\n\n {tabNames.includes('link') && (\n \n \n )}\n \n \n )\n}\n\nexport type { TabName }\n\nexport default Tabs\n"
},
{
"path": "src/foods/FoodModal/Content/Form/index.tsx",
"content": "import {\n ModalContent,\n ModalCloseButton,\n ModalBody,\n Button,\n Divider,\n Box,\n VStack,\n Text,\n} from '@chakra-ui/react'\nimport { Food } from 'foods'\nimport { RefObject } from 'react'\nimport useSubmitFoodForm from './useSubmitFoodForm'\nimport { StatFormField } from 'stats'\nimport Footer from './Footer'\nimport Header from './Header'\nimport Tabs from './Tabs'\nimport useTabs from './useTabs'\n\ntype Props = {\n onClose: () => void\n title: string\n nameInputRef: RefObject\n food?: Food\n canEdit: boolean\n isEditing: boolean\n onToggleEdit: () => void\n onDelete: () => void\n onFoodCreatedOrUpdated?: (newFood: Food, oldFood?: Food) => void\n}\n\nfunction Form({\n onClose,\n nameInputRef,\n title,\n food,\n canEdit,\n onFoodCreatedOrUpdated,\n isEditing,\n onToggleEdit,\n onDelete,\n}: Props) {\n const { onSubmit } = useSubmitFoodForm({\n onComplete: (newOrUpdatedFood: Food) => {\n onFoodCreatedOrUpdated && onFoodCreatedOrUpdated(newOrUpdatedFood, food)\n onClose()\n },\n })\n\n const { tabNames, onTabNameChange, selectedTabName } = useTabs({\n isEditing,\n food,\n })\n\n return (\n \n )\n}\n\nexport type { Props }\n\nexport default Form\n"
},
{
"path": "src/foods/FoodModal/Content/Form/useSubmitFoodForm.ts",
"content": "import { objectFromNutritionDataKeys } from 'stats'\nimport { Food, FoodForm } from 'foods'\nimport { useOneTimeCheckActions } from 'general'\nimport { useFormContext } from 'react-hook-form'\nimport { useFoodsActions } from 'foods'\nimport { v4 as uuidv4 } from 'uuid'\n\ntype Params = {\n onComplete: (food: Food) => void\n}\n\nfunction withProtocol(url: string) {\n return !/^https?:\\/\\//i.test(url) ? `http://${url}` : url\n}\n\nfunction useSubmitFoodForm({ onComplete }: Params) {\n const { handleSubmit } = useFormContext()\n const foodsActions = useFoodsActions()\n const oneTimeCheckActions = useOneTimeCheckActions()\n\n const onSubmit = handleSubmit((foodForm: FoodForm) => {\n const food: Food = {\n id: foodForm.id !== undefined ? foodForm.id : uuidv4(),\n name: foodForm.name,\n categoryId: foodForm.categoryId,\n addedByUser: true,\n servingSizeInGrams: Number(foodForm.servingSizeInGrams),\n url: foodForm.url ? withProtocol(foodForm.url) : undefined,\n ...objectFromNutritionDataKeys(key => Number(foodForm[key])),\n }\n\n const { volumeForm } = foodForm\n const volumeWeightInGrams = Number(volumeForm.weightInGrams)\n\n if (volumeWeightInGrams > 0) {\n food.volume = {\n portionId: volumeForm.portionId,\n weightInGrams: volumeWeightInGrams,\n }\n }\n\n if (foodForm.id === undefined) {\n oneTimeCheckActions.set(`food-appear-${food.id}`)\n }\n oneTimeCheckActions.set(`food-flash-${food.id}`)\n\n foodsActions.setFoods([food])\n onComplete(food)\n })\n\n return {\n onSubmit,\n }\n}\n\nexport default useSubmitFoodForm\n"
},
{
"path": "src/foods/FoodModal/Content/Form/useTabs.tsx",
"content": "import { Food } from 'foods'\nimport { useEffect, useState } from 'react'\nimport { TabName } from './Tabs'\n\ntype Params = {\n food?: Food\n isEditing: boolean\n}\n\nfunction getTabNames(isEditing: boolean, food?: Food): TabName[] {\n if (isEditing) {\n return ['nutrition', 'volume', 'link']\n }\n\n const result: TabName[] = ['nutrition']\n\n if (food?.volume) {\n result.push('volume')\n }\n\n if (food?.url) {\n result.push('link')\n }\n\n return result\n}\n\nfunction useTabs({ food, isEditing }: Params) {\n const [selectedTabName, setSelectedTabName] = useState('nutrition')\n\n function onTabNameChange(newTabName: TabName) {\n setSelectedTabName(newTabName)\n }\n\n const tabNames = getTabNames(isEditing, food)\n\n useEffect(() => {\n if (!tabNames.includes(selectedTabName)) {\n setSelectedTabName('nutrition')\n }\n }, [food, isEditing, selectedTabName, tabNames])\n\n return {\n onTabNameChange,\n selectedTabName,\n tabNames,\n }\n}\n\nexport default useTabs\n"
},
{
"path": "src/foods/FoodModal/Content/index.tsx",
"content": "import { Food } from 'foods'\nimport { RefObject, useState } from 'react'\nimport DeleteConfirmationModal from './DeleteConfirmationModal'\nimport useDeleteFood from './useDeleteFood'\nimport Form from './Form'\nimport FoodFormProvider from './FoodFormProvider'\n\ntype Props = {\n onClose: () => void\n title: string\n nameInputRef: RefObject\n food?: Food\n onFoodCreatedOrUpdated?: (newFood: Food, oldFood?: Food) => void\n onFoodDeleted?: (food: Food) => void\n}\n\nfunction Content({\n onClose,\n nameInputRef,\n title,\n food,\n onFoodCreatedOrUpdated,\n onFoodDeleted,\n}: Props) {\n const canEdit = Boolean(food && food.addedByUser)\n const deleteFood = useDeleteFood({ food, onClose, onFoodDeleted })\n const [isEditing, setIsEditing] = useState(!food)\n\n function onToggleEdit() {\n setIsEditing(!isEditing)\n }\n\n return (\n \n \n )\n}\n\nexport type { Props }\n\nexport default Content\n"
},
{
"path": "src/foods/FoodModal/Content/useDeleteFood.ts",
"content": "import { useDisclosure } from '@chakra-ui/hooks'\nimport { useFoodsActions } from 'foods'\nimport { Food } from 'foods'\nimport { useToast } from '@chakra-ui/react'\n\ntype Params = {\n food?: Food\n onClose: () => void\n onFoodDeleted?: (food: Food) => void\n}\n\nfunction useDeleteFood({ food, onClose, onFoodDeleted }: Params) {\n const deleteConfirmationDisclosure = useDisclosure()\n const foodsActions = useFoodsActions()\n const toast = useToast()\n\n function onDelete() {\n deleteConfirmationDisclosure.onOpen()\n }\n\n function onConfirmDelete() {\n if (food) {\n foodsActions.removeFood(food.id)\n toast({\n position: 'top',\n title: 'Food deleted',\n status: 'success',\n duration: 2000,\n isClosable: true,\n })\n deleteConfirmationDisclosure.onClose()\n onFoodDeleted && onFoodDeleted(food)\n onClose()\n }\n }\n\n return {\n deleteConfirmationDisclosure,\n onDelete,\n onConfirmDelete,\n }\n}\n\nexport default useDeleteFood\n"
},
{
"path": "src/foods/FoodModal/index.tsx",
"content": "import { Modal, ModalOverlay } from '@chakra-ui/react'\nimport { Food } from 'foods'\nimport { useRef } from 'react'\nimport Content from './Content'\n\ntype Props = {\n onClose: () => void\n isOpen: boolean\n food?: Food\n onFoodCreatedOrUpdated?: (newFood: Food, oldFood?: Food) => void\n onFoodDeleted?: (food: Food) => void\n}\n\nfunction FoodModal({\n onClose,\n isOpen,\n food,\n onFoodCreatedOrUpdated,\n onFoodDeleted,\n}: Props) {\n const nameInputRef = useRef(null)\n const title = food ? 'Food Details' : 'Create Food'\n\n return (\n \n \n {titlePrefix}\n\n {mealName && (\n \n {mealName}\n \n )}\n \n )\n}\n\nexport default Header\n"
},
{
"path": "src/foods/FoodsDrawer/Content/MenuButtons.tsx",
"content": "import { chakra, IconButton } from '@chakra-ui/react'\nimport { MoreHorizontal, Download, Share } from 'react-feather'\nimport { Menu, MenuItem } from 'general'\n\nconst DownloadStyled = chakra(Download)\nconst ShareStyled = chakra(Share)\nconst MoreHorizontalStyled = chakra(MoreHorizontal)\n\ntype Props = {\n onImport: () => void\n onExport: () => void\n}\n\nfunction MenuButtons({ onImport, onExport }: Props) {\n return (\n \n \n \n \n \n )\n}\n\nexport default MenuButtons\n"
},
{
"path": "src/foods/FoodsDrawer/Content/SelectedFoodsList/SelectedFoodItem.tsx",
"content": "import { Tag, TagLabel, TagCloseButton, Fade } from '@chakra-ui/react'\nimport { Food } from 'foods'\n\ntype Props = {\n food: Food\n onUnselect: (food: Food) => void\n}\n\nfunction SelectedFoodItem({ food, onUnselect }: Props) {\n return (\n \n \n {food.name} \n onUnselect(food)} />\n \n \n )\n}\n\nexport default SelectedFoodItem\n"
},
{
"path": "src/foods/FoodsDrawer/Content/SelectedFoodsList/index.tsx",
"content": "import { Flex, Text, Wrap } from '@chakra-ui/react'\nimport { Selection } from 'general'\nimport SelectedFoodItem from './SelectedFoodItem'\nimport { Food, useFoods } from 'foods'\n\ntype Props = {\n selection: Selection\n}\n\nfunction SelectedFoods({ selection }: Props) {\n const { selectedItems: selectedFoods } = selection\n const { foodsById } = useFoods()\n\n return (\n \n {selectedFoods.length > 0 ? (\n \n {selectedFoods.map(({ id }) => (\n \n ) : (\n Select one or more foods \n )}\n \n )\n}\n\nexport default SelectedFoods\n"
},
{
"path": "src/foods/FoodsDrawer/Content/index.tsx",
"content": "import {\n DrawerContent,\n DrawerCloseButton,\n DrawerBody,\n DrawerFooter,\n Flex,\n Button,\n VStack,\n Text,\n HStack,\n useDisclosure,\n} from '@chakra-ui/react'\nimport { RefObject, useRef, useState } from 'react'\nimport { FoodsList, FoodsListMethods, FoodModal, Food } from 'foods'\nimport { useSelection, Tooltip } from 'general'\nimport SelectedFoodsList from './SelectedFoodsList'\nimport Header from './Header'\nimport MenuButtons from './MenuButtons'\nimport { useImportFoods, FoodsListModal } from 'foods/persistence'\nimport { FoodsFilterStoreProvider } from 'foods-filters'\nimport { loadFoodsFilter } from 'foods-filters/persistence'\nimport useFoodEvents from './useFoodEvents'\nimport { MealForm } from 'meals'\n\ntype Props = {\n onClose: () => void\n mealName?: string\n mealForm?: MealForm\n searchInputRef: RefObject\n onSelectedFoods?: (foods: Food[], mealName?: string) => void\n\n canSelect: boolean\n}\n\nfunction Content({\n onClose,\n mealName,\n mealForm,\n searchInputRef,\n onSelectedFoods,\n canSelect,\n}: Props) {\n const selection = useSelection()\n const listRef = useRef(null)\n const foodEvents = useFoodEvents({ listRef, selection })\n\n const foodsListModalDisclosure = useDisclosure()\n const importFoods = useImportFoods({ foodsListModalDisclosure })\n const [foodsFilter] = useState(loadFoodsFilter)\n\n function onAdd() {\n onSelectedFoods && onSelectedFoods(selection.selectedItems, mealName)\n }\n\n return (\n \n \n \n \n \n Need more foods?\n \n \n Create a new food\n \n \n\n {canSelect && \n \n \n \n\n \n {!canSelect && (\n \n \n Close\n \n {canSelect && (\n \n \n {mealForm ? 'Add selected foods' : 'Select foods'}\n \n \n )}\n \n \n\n \n )\n}\n\nexport default Content\n"
},
{
"path": "src/foods/FoodsDrawer/Content/useFoodEvents.ts",
"content": "import { useDisclosure } from '@chakra-ui/react'\nimport { Food } from 'foods'\nimport { useState, RefObject } from 'react'\nimport { FoodsListMethods } from 'foods'\nimport { Selection } from 'general'\n\ntype Params = {\n listRef: RefObject\n selection: Selection\n}\n\nfunction useFoodEvents({ listRef, selection }: Params) {\n const foodModalDisclosure = useDisclosure()\n const [food, setFood] = useState()\n\n function onCreateFood() {\n setFood(undefined)\n foodModalDisclosure.onOpen()\n }\n\n function onPreviewFood(food: Food) {\n setFood(food)\n foodModalDisclosure.onOpen()\n }\n\n function onFoodDeleted(food: Food) {\n selection.removeItem(food)\n }\n\n function onFoodCreatedOrUpdated(newFood: Food, oldFood?: Food) {\n if (!listRef.current) {\n return\n }\n\n if (!oldFood || (oldFood && newFood.categoryId !== oldFood.categoryId)) {\n listRef.current.scrollToFood(newFood)\n }\n }\n\n return {\n onCreateFood,\n onPreviewFood,\n onFoodCreatedOrUpdated,\n food,\n foodModalDisclosure,\n onFoodDeleted,\n }\n}\n\nexport default useFoodEvents\n"
},
{
"path": "src/foods/FoodsDrawer/index.tsx",
"content": "import { Drawer, DrawerOverlay } from '@chakra-ui/react'\nimport { Food } from 'foods'\nimport { MealForm } from 'meals'\nimport { useRef } from 'react'\nimport { isMobile } from 'react-device-detect'\nimport Content from './Content'\n\ntype Props = {\n onClose: () => void\n isOpen: boolean\n mealName?: string\n mealForm?: MealForm\n canSelect?: boolean\n onSelectedFoods?: (foods: Food[], mealName?: string) => void\n}\n\nfunction FoodsDrawer({\n onClose,\n isOpen,\n mealName,\n mealForm,\n canSelect = true,\n onSelectedFoods,\n}: Props) {\n const searchInputRef = useRef(null)\n\n return (\n \n \n {children}\n \n )\n}\n\nexport default AnimateAppear\n"
},
{
"path": "src/foods/FoodsList/VirtualizedList/FoodItem/DisappearingBox.tsx",
"content": "import { Box } from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\n\ntype Props = {\n shouldAnimate: boolean\n}\n\nfunction DisappearingBox({ shouldAnimate }: Props) {\n const [opacity, setOpacity] = useState(shouldAnimate ? 1 : 0)\n\n useEffect(() => {\n if (shouldAnimate) {\n setOpacity(0)\n }\n }, [shouldAnimate])\n\n return (\n ) {\n event.stopPropagation()\n onPreview(food)\n }\n\n const oneTimeCheckActions = useOneTimeCheckActions()\n const shouldAnimateAppear = oneTimeCheckActions.checkAndReset(\n `food-appear-${food.id}`\n )\n const shouldAnimateFlash = oneTimeCheckActions.checkAndReset(\n `food-flash-${food.id}`\n )\n\n return (\n {\n if (usageType === 'previewOnly') {\n onPreview(food)\n } else if (usageType === 'selectOrPreview') {\n onChoose(food)\n }\n }}\n {...rest}\n >\n \n \n {shouldAnimateFlash && (\n \n \n )}\n \n \n \n )\n}\n\nexport type { UsageType }\n\nexport default FoodItem\n"
},
{
"path": "src/foods/FoodsList/VirtualizedList/FoodItemRenderer.tsx",
"content": "import { Food } from 'foods'\nimport FoodItem, { UsageType } from './FoodItem'\nimport { TOP_PADDING } from './Inner'\n\ntype Data = {\n getFood: (index: number) => Food\n isFoodSelected: (food: Food) => boolean\n onFoodSelect: (food: Food) => void\n onFoodPreview: (food: Food) => void\n usageType: UsageType\n}\n\ntype Props = {\n style: any\n index: number\n data: Data\n}\n\nfunction FoodItemRenderer({ style, index, data }: Props) {\n const {\n getFood,\n onFoodSelect,\n onFoodPreview,\n isFoodSelected,\n usageType,\n } = data\n const food = getFood(index)\n\n return (\n (({ style, ...rest }, ref) => (\n \n itemUsageType: UsageType\n}\n\nfunction VirtualizedList({\n getFood,\n isFoodSelected,\n onFoodSelect,\n onFoodPreview,\n foodsCount,\n forwardRef,\n itemUsageType,\n}: Props) {\n const { elementHeight, elementRef } = useElementHeight()\n\n return (\n \n \n {FoodItemRenderer}\n \n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n selection?: Selection\n onFoodPreview?: (food: Food) => void\n forwardedRef?: ForwardedRef\n allowsFiltering?: boolean\n itemUsageType?: UsageType\n} & FlexProps\n\nfunction FoodsList({\n selection,\n searchInputRef,\n onFoodPreview,\n forwardedRef,\n allowsFiltering = true,\n itemUsageType = 'selectOrPreview',\n ...rest\n}: Props) {\n const { allFoods, userFoods } = useFoods()\n const listRef = useRef(null)\n\n const filter = useFoodsFilter()\n const foodsFilterActions = useFoodsFilterActions()\n const filteredFoods = useFilterFoods(allFoods, userFoods, filter)\n\n useEffect(() => {\n if (filter.categoryId) {\n listRef.current?.scrollToItem(0, 'start')\n }\n }, [filter.categoryId])\n\n useImperativeHandle(forwardedRef, () => ({\n scrollToFood: (food: Food) => {\n foodsFilterActions.resetCategoryIdAndQuery()\n\n if (listRef.current) {\n const foods = filter.onlyFoodsAddedByUser ? userFoods : allFoods\n const index = foods.map(({ id }) => id).indexOf(food.id)\n listRef.current.scrollToItem(index, 'center')\n }\n },\n }))\n\n function onFoodSelect(food: Food) {\n if (selection) {\n selection.toggleItem(food)\n const input = searchInputRef?.current\n\n if (input && !isMobile) {\n input.focus()\n input.setSelectionRange(0, input.value.length)\n }\n }\n }\n\n return (\n \n \n {allowsFiltering && (\n \n \n )}\n\n \n ) =>\n foodsFilterActions.updateFilter({ query: event.target.value })\n }\n placeholder=\"Search\"\n />\n \n \n\n \n selection ? selection.isIdSelected(food.id) : false\n }\n getFood={index => filteredFoods[index]}\n onFoodSelect={onFoodSelect}\n onFoodPreview={onFoodPreview || (() => {})}\n itemUsageType={itemUsageType}\n />\n ) : (\n \n No foods found \n \n )}\n \n )\n}\n\nexport type { FoodsListMethods }\n\nexport default forwardRef((props, ref) => (\n \n\nconst DEFAULT_SERVING_SIZE_IN_GRAMS = 100\n\nfunction getFoodForm(food?: Food) {\n const volumeForm = getFoodVolumeForm(food?.volume)\n\n if (food) {\n const servingSizeInGrams =\n food.servingSizeInGrams || DEFAULT_SERVING_SIZE_IN_GRAMS\n\n return {\n id: food.id,\n name: food.name,\n categoryId: food.categoryId,\n servingSizeInGrams: servingSizeInGrams.toString(),\n volumeForm,\n url: food.url,\n ...objectFromNutritionDataKeys(key => food[key].toString()),\n }\n }\n\n return {\n name: '',\n categoryId: 0,\n servingSizeInGrams: DEFAULT_SERVING_SIZE_IN_GRAMS.toString(),\n ...objectFromNutritionDataKeys(() => '0'),\n energy: '',\n volumeForm,\n }\n}\n\ntype FoodFormSchemaContext = {\n allFoods: Food[]\n food?: Food\n}\n\nconst foodFormSchema = object().shape({\n name: string()\n .required('Please add a name')\n .test(\n 'uniqueName',\n 'This name has already been used',\n (currentName, { options }) => {\n if (currentName === undefined) {\n return true\n }\n\n const { allFoods, food } = options.context as FoodFormSchemaContext\n\n const sameFoodExists = allFoods.some(({ name, id }) => {\n const haveSameNames = currentName.toLowerCase() === name.toLowerCase()\n return food ? id !== food.id && haveSameNames : haveSameNames\n })\n\n return !sameFoodExists\n }\n ),\n categoryId: number()\n .notOneOf([0], 'Please select category')\n .typeError('Please select category'),\n energy: string().required('Please enter energy'),\n servingSizeInGrams: string().required('Please enter a value'),\n})\n\nfunction useFoodForm(foodForm: FoodForm) {\n const formMethods = useForm({\n defaultValues: foodForm,\n })\n\n return formMethods\n}\n\nexport type { FoodForm, FoodFormSchemaContext }\n\nexport {\n useFoodForm,\n getFoodForm,\n foodFormSchema,\n DEFAULT_SERVING_SIZE_IN_GRAMS,\n}\n"
},
{
"path": "src/foods/foodVolumeForm.ts",
"content": "import { FoodVolume } from 'foods'\n\ntype FoodVolumeForm = {\n portionId: string\n weightInGrams: string\n}\n\nfunction getFoodVolumeForm(foodVolume?: FoodVolume): FoodVolumeForm {\n if (foodVolume) {\n return {\n portionId: foodVolume.portionId,\n weightInGrams: foodVolume.weightInGrams.toString(),\n }\n }\n\n return {\n portionId: 'milliliters',\n weightInGrams: '',\n }\n}\n\nexport type { FoodVolumeForm }\n\nexport { getFoodVolumeForm }\n"
},
{
"path": "src/foods/index.ts",
"content": "export * from './foodForm'\nexport * from './useFoodsStore'\nexport { default as FoodInfo } from './FoodInfo'\nexport { default as FoodModal } from './FoodModal'\nexport * from './FoodModal'\nexport { default as FoodsList } from './FoodsList'\nexport * from './FoodsList'\nexport { default as FoodsDrawer } from './FoodsDrawer'\nexport * from './types'\nexport { default as builtInFoods } from './builtIn'\n"
},
{
"path": "src/foods/persistence/FoodsListModal/Content.tsx",
"content": "import {\n ModalContent,\n ModalHeader,\n ModalCloseButton,\n ModalFooter,\n ModalBody,\n Button,\n HStack,\n} from '@chakra-ui/react'\nimport { FoodsList, useFoods } from 'foods'\nimport { DownloadButton, getUntitledFileName } from 'persistence'\nimport { useState } from 'react'\n\ntype Action = 'import' | 'export'\n\ntype Props = {\n onClose: () => void\n title: string\n onImport: () => void\n action: Action\n}\n\nfunction Content({ onClose, title, onImport, action }: Props) {\n const { allFoods } = useFoods()\n\n const [blob] = useState(() => {\n const allFoodsString = JSON.stringify(allFoods)\n return new Blob([allFoodsString])\n })\n\n return (\n \n {title} \n \n \n\n \n \n Close \n\n {action === 'import' ? (\n \n {allFoods.length > 0\n ? `Import ${allFoods.length} ${\n allFoods.length === 1 ? 'food' : 'foods'\n }`\n : 'Import'}\n \n ) : (\n \n \n \n )\n}\n\nexport type { Props }\n\nexport default Content\n"
},
{
"path": "src/foods/persistence/FoodsListModal/index.tsx",
"content": "import { Modal, ModalOverlay, useToast } from '@chakra-ui/react'\nimport { Food, FoodsStoreProvider, useFoods, useFoodsActions } from 'foods'\nimport { DEFAULT_FILTER, FoodsFilterStoreProvider } from 'foods-filters'\nimport Content from './Content'\n\ntype Props = {\n onClose: () => void\n isOpen: boolean\n foodsToImport?: Food[]\n}\n\nfunction FoodsListModal({ onClose, isOpen, foodsToImport }: Props) {\n const title = foodsToImport ? 'Import Foods' : 'Export Foods'\n const { userFoods } = useFoods()\n const foodsActions = useFoodsActions()\n const toast = useToast()\n const foods = foodsToImport || userFoods\n\n function onImport() {\n if (foodsToImport) {\n foodsActions.setFoods(foodsToImport)\n toast({\n position: 'top',\n status: 'success',\n title: 'Foods imported',\n isClosable: true,\n })\n onClose()\n }\n }\n\n return (\n \n \n \n \n \n \n )\n}\n\nexport type { Props }\n\nexport default FoodsListModal\n"
},
{
"path": "src/foods/persistence/MissingFoodsModal.tsx",
"content": "import {\n Modal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n Button,\n Text,\n} from '@chakra-ui/react'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n onImport: () => void\n}\n\nfunction MissingFoodsModal({ isOpen, onClose, onImport }: Props) {\n return (\n \n \n Missing foods \n \n \n The meal plan you contains foods that are not part of your list.\n \n \n You can try to import the missing foods or continue without them.\n \n \n\n \n \n Continue\n \n\n {\n onImport()\n onClose()\n }}\n >\n Import foods\n \n \n \n \n )\n}\n\nexport default MissingFoodsModal\n"
},
{
"path": "src/foods/persistence/index.ts",
"content": "export { default as MissingFoodsModal } from './MissingFoodsModal'\nexport { default as useImportFoods } from './useImportFoods'\nexport { default as FoodsListModal } from './FoodsListModal'\nexport * from './FoodsListModal'\nexport { default as loadFoods } from './loadFoods'\n"
},
{
"path": "src/foods/persistence/loadFoods.ts",
"content": "import { builtInFoods } from 'foods'\n\nfunction loadFoods() {\n const userFoodsString = localStorage.getItem('userFoods')\n\n if (userFoodsString) {\n const userFoods = JSON.parse(userFoodsString)\n return [...userFoods, ...builtInFoods]\n }\n\n return builtInFoods\n}\n\nexport default loadFoods\n"
},
{
"path": "src/foods/persistence/useImportFoods.ts",
"content": "import { UseDisclosureReturn } from '@chakra-ui/hooks'\nimport { Food } from 'foods'\nimport { selectFile, readFile, useFileImportError } from 'persistence'\nimport { useState } from 'react'\n\ntype Params = {\n foodsListModalDisclosure: UseDisclosureReturn\n}\n\nfunction useImportFoods({ foodsListModalDisclosure }: Params) {\n const fileImportError = useFileImportError()\n const [foodsToImport, setFoodsToImport] = useState()\n\n async function onImport() {\n const file = await selectFile('text/json')\n\n try {\n const text = await readFile(file)\n const foodsToImport = JSON.parse(text) as Food[]\n setFoodsToImport(foodsToImport)\n foodsListModalDisclosure.onOpen()\n } catch (error: any) {\n fileImportError.onError({ error, file })\n }\n }\n\n return {\n onImport,\n foodsToImport,\n }\n}\n\nexport default useImportFoods\n"
},
{
"path": "src/foods/types.ts",
"content": "import { NutritionData } from 'stats'\n\ntype FoodId = string | number\n\ntype FoodVolume = {\n portionId: string\n weightInGrams: number\n}\n\ntype Food = {\n id: FoodId\n categoryId: number\n name: string\n addedByUser?: boolean\n servingSizeInGrams?: number\n volume?: FoodVolume\n url?: string\n} & NutritionData\n\nexport type { Food, FoodId, FoodVolume }\n"
},
{
"path": "src/foods/useFoodsStore.ts",
"content": "import { Food, FoodId } from 'foods'\nimport { useState, useCallback, useMemo } from 'react'\nimport produce from 'immer'\nimport { makeStoreProvider, useCallbacksMemo } from 'general'\nimport { useSaveValue } from 'persistence'\n\ntype Params = {\n initialFoods: Food[]\n}\n\nfunction sortedFoods(foods: Food[]) {\n return [...foods].sort((food1, food2) => {\n if (food1.categoryId === food2.categoryId) {\n return food1.name.localeCompare(food2.name)\n }\n\n return food1.categoryId - food2.categoryId\n })\n}\n\nfunction useFoodsStore({ initialFoods }: Params) {\n const [foodsById, setFoodsById] = useState>(() => {\n const initialMap: Record = {}\n\n for (const food of initialFoods) {\n initialMap[food.id] = food\n }\n\n return initialMap\n })\n\n const setFoods = useCallback(\n (foods: Food[]) =>\n setFoodsById(\n produce(draftFoodsById => {\n for (const food of foods) {\n draftFoodsById[food.id] = food\n }\n })\n ),\n []\n )\n\n const removeFood = useCallback(\n (foodId: FoodId) =>\n setFoodsById(\n produce(draftFoodsById => {\n delete draftFoodsById[foodId]\n })\n ),\n []\n )\n\n const allFoods = useMemo(() => sortedFoods(Object.values(foodsById)), [\n foodsById,\n ])\n\n const userFoods = useMemo(\n () => sortedFoods(allFoods.filter(food => food.addedByUser)),\n [allFoods]\n )\n\n useSaveValue({ value: userFoods, key: 'userFoods' })\n\n const actions = useCallbacksMemo({ setFoods, removeFood })\n\n const state = useCallbacksMemo({\n allFoods,\n userFoods,\n foodsById,\n })\n\n return [state, actions] as const\n}\n\nconst [FoodsStoreProvider, useFoods, useFoodsActions] = makeStoreProvider(\n useFoodsStore\n)\n\nexport { FoodsStoreProvider, useFoods, useFoodsActions }\n\nexport default useFoodsStore\n"
},
{
"path": "src/foods-categories/FoodCategoriesSelect.tsx",
"content": "import { SelectProps, Select } from '@chakra-ui/select'\nimport foodCategories from './categories.json'\nimport { ForwardedRef, forwardRef } from 'react'\n\ntype Props = { forwardedRef?: ForwardedRef } & SelectProps\n\nfunction FoodCategoriesSelect({ children, forwardedRef, ...rest }: Props) {\n return (\n \n {children}\n {foodCategories.map(category => (\n \n {category.name}\n \n ))}\n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n}\n\nfunction Content({ selectRef }: Props) {\n const filter = useFoodsFilter()\n const foodsFilterActions = useFoodsFilterActions()\n\n function onSelectChange(event: ChangeEvent) {\n const { value } = event.target\n foodsFilterActions.updateFilter({ categoryId: Number(value) })\n }\n\n function onCheckboxChange(event: ChangeEvent) {\n const { checked } = event.target\n foodsFilterActions.updateFilter({ onlyFoodsAddedByUser: checked })\n }\n\n return (\n \n \n All categories \n \n\n \n Only items added by me\n \n \n )\n}\n\nexport default Content\n"
},
{
"path": "src/foods-filters/FoodsFilterPopoverOrModal/Footer.tsx",
"content": "import { HStack, Button } from '@chakra-ui/react'\nimport {\n nonQueryChangesCount,\n useFoodsFilter,\n useFoodsFilterActions,\n} from 'foods-filters'\n\ntype Props = {\n onClose: () => void\n}\n\nfunction Footer({ onClose }: Props) {\n const filter = useFoodsFilter()\n const foodsFilterActions = useFoodsFilterActions()\n\n const changesCount = nonQueryChangesCount(filter)\n\n function onReset() {\n foodsFilterActions.resetFilter()\n onClose()\n }\n\n return (\n \n \n Reset\n \n \n Close\n \n \n )\n}\n\nexport default Footer\n"
},
{
"path": "src/foods-filters/FoodsFilterPopoverOrModal/Modal.tsx",
"content": "import {\n Modal as ModalBase,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n} from '@chakra-ui/react'\nimport { useRef } from 'react'\nimport Content from './Content'\nimport Footer from './Footer'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n}\n\nfunction Modal({ isOpen, onClose }: Props) {\n const selectRef = useRef(null)\n\n return (\n \n \n Filters \n \n \n\n \n \n \n \n \n )\n}\n\nexport default Modal\n"
},
{
"path": "src/foods-filters/FoodsFilterPopoverOrModal/Popover.tsx",
"content": "import {\n Popover as PopoverBase,\n PopoverTrigger,\n PopoverContent,\n PopoverHeader,\n PopoverBody,\n PopoverFooter,\n PopoverArrow,\n PopoverCloseButton,\n} from '@chakra-ui/react'\nimport { useRef } from 'react'\nimport Content from './Content'\nimport Trigger from './Trigger'\nimport Footer from './Footer'\n\nfunction Popover() {\n const selectRef = useRef(null)\n\n return (\n \n {({ onClose }) => {\n return (\n <>\n \n \n\n \n Filters \n\n \n \n\n \n \n \n \n \n )\n }}\n \n )\n}\n\nexport default Popover\n"
},
{
"path": "src/foods-filters/FoodsFilterPopoverOrModal/Trigger.tsx",
"content": "import { Badge } from 'general'\nimport { IconButton } from '@chakra-ui/react'\nimport { Filter } from 'react-feather'\nimport { nonQueryChangesCount, useFoodsFilter } from 'foods-filters'\nimport { ForwardedRef, forwardRef } from 'react'\n\ntype Props = {\n onClick?: () => void\n forwardedRef?: ForwardedRef\n}\n\nfunction Trigger({ onClick, forwardedRef }: Props) {\n const filter = useFoodsFilter()\n\n const changesCount = nonQueryChangesCount(filter)\n\n return (\n \n \n )\n}\nexport default forwardRef((props, ref) => (\n = {}\n\n for (const food of foods) {\n const { categoryId } = food\n\n if (!foodsByCategoryIdMap[categoryId]) {\n foodsByCategoryIdMap[categoryId] = []\n }\n\n foodsByCategoryIdMap[categoryId].push(food)\n }\n\n return foodsByCategoryIdMap\n}\n\nfunction useFilterFoods(\n allFoods: Food[],\n userFoods: Food[],\n filter: FoodsFilter\n) {\n const foodsToFilter = filter.onlyFoodsAddedByUser ? userFoods : allFoods\n\n const fuse = useMemo(() => new Fuse(foodsToFilter, OPTIONS), [foodsToFilter])\n const foodsByCategoryId = useMemo(\n () => groupFoodsByCategoryId(foodsToFilter),\n [foodsToFilter]\n )\n\n const { query, categoryId } = filter\n if (!query) {\n return categoryId ? foodsByCategoryId[categoryId] || [] : foodsToFilter\n }\n\n const foodsForQuery = fuse.search(query, { limit: 5 }).map(({ item }) => item)\n if (!categoryId) {\n return foodsForQuery\n }\n\n return foodsForQuery.filter(food => food.categoryId === categoryId)\n}\n\nexport type { FoodsFilter }\n\nexport default useFilterFoods\n"
},
{
"path": "src/foods-filters/useFoodsFilterStore.ts",
"content": "import { useCallback, useState } from 'react'\nimport { FoodsFilter, DEFAULT_FILTER } from './foodsFilter'\nimport { makeStoreProvider, useCallbacksMemo } from 'general'\nimport { useSaveValue } from 'persistence'\n\ntype Params = {\n initialFilter: FoodsFilter\n shouldSaveFilter?: boolean\n}\n\nfunction filterWithoutQuery(filter: FoodsFilter) {\n return { ...filter, query: '' }\n}\n\nfunction useFoodsFilterStore({\n initialFilter,\n shouldSaveFilter = true,\n}: Params) {\n const [filter, setFilter] = useState(initialFilter)\n\n useSaveValue({\n value: filterWithoutQuery(filter),\n key: 'foodsFilter',\n isEnabled: shouldSaveFilter,\n })\n\n const updateFilter = useCallback(\n (partialFilter: Partial) =>\n setFilter(filter => {\n return { ...filter, ...partialFilter }\n }),\n []\n )\n\n const resetFilter = useCallback(() => {\n setFilter({ ...DEFAULT_FILTER })\n }, [])\n\n const resetCategoryIdAndQuery = useCallback(() => {\n setFilter(filter => ({\n ...DEFAULT_FILTER,\n onlyFoodsAddedByUser: filter.onlyFoodsAddedByUser,\n }))\n }, [])\n\n const actions = useCallbacksMemo({\n updateFilter,\n resetFilter,\n resetCategoryIdAndQuery,\n })\n\n return [filter, actions] as const\n}\n\nconst [\n FoodsFilterStoreProvider,\n useFoodsFilter,\n useFoodsFilterActions,\n] = makeStoreProvider(useFoodsFilterStore)\n\nexport { FoodsFilterStoreProvider, useFoodsFilter, useFoodsFilterActions }\n\nexport default useFoodsFilterStore\n"
},
{
"path": "src/form/duplicate.ts",
"content": "import { deepCopy } from 'general'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Form } from './types'\n\nfunction duplicate(originalForm: T) {\n const copiedForm = deepCopy(originalForm, (key: string, value: any) => {\n if (key === 'fieldId') {\n return uuidv4()\n }\n\n return value\n }) as T\n\n return copiedForm\n}\n\nexport default duplicate\n"
},
{
"path": "src/form/index.ts",
"content": "export { default as duplicate } from './duplicate'\nexport * from './names'\nexport { default as useFormError } from './useFormError'\nexport { default as useSelectInputText } from './useSelectInputText'\n"
},
{
"path": "src/form/names.ts",
"content": "import { Form } from './types'\n\nfunction getDuplicatedName(index: number, forms: Form[]) {\n const form = forms[index]\n const originalNameOrUntitled = form.name || 'Untitled'\n return getEnumeratedName(`Copy of ${originalNameOrUntitled}`, forms)\n}\n\nfunction getEnumeratedName(currentName: string, forms: Form[]) {\n const presentCount = forms.filter(({ name }) => name === currentName).length\n\n if (presentCount > 0) {\n return `${currentName} (${presentCount})`\n }\n\n return currentName\n}\n\nexport { getDuplicatedName, getEnumeratedName }\n"
},
{
"path": "src/form/types.ts",
"content": "type Form = {\n fieldId: string\n name: string\n}\n\nexport type { Form }\n"
},
{
"path": "src/form/useFormError.ts",
"content": "import { useFormContext } from 'react-hook-form'\n\nfunction useFormError(name: string) {\n const { formState } = useFormContext()\n const { errors, touchedFields } = formState\n\n const isInvalid =\n errors[name] && (touchedFields[name] || formState.isSubmitted)\n\n const errorMessage = isInvalid ? errors[name]?.message : undefined\n\n return {\n isInvalid,\n errorMessage,\n }\n}\n\nexport default useFormError\n"
},
{
"path": "src/form/useSelectInputText.ts",
"content": "import { RefObject, useEffect } from 'react'\n\nfunction useSelectInputText(inputRef: RefObject) {\n useEffect(() => {\n const input = inputRef.current\n\n if (input) {\n input.setSelectionRange(0, input.value.length)\n }\n }, [inputRef])\n}\n\nexport default useSelectInputText\n"
},
{
"path": "src/general/Badge.tsx",
"content": "import { ForwardedRef, ReactNode } from 'react'\nimport { Box, BoxProps, Center, Fade, Text } from '@chakra-ui/react'\nimport { forwardRef } from 'react'\nimport { useSameOrPreviousValue } from 'general'\n\ntype Props = {\n children: ReactNode\n count: number\n forwardedRef?: ForwardedRef\n} & BoxProps\n\nfunction Badge({ children, count, forwardedRef, ...rest }: Props) {\n const prevCount = useSameOrPreviousValue(count)\n\n return (\n \n {children}\n\n 0}>\n \n \n {count === 0 ? prevCount : count}\n \n \n \n \n )\n}\n\nexport default forwardRef((props, ref) => (\n []\n menuOrDrawerItems?: ReactElement[]\n forwardedRef?: ForwardedRef\n} & FlexProps\n\nfunction ContextMenuFlex({\n menuItems,\n menuOrDrawerItems = [],\n children,\n forwardedRef,\n ...rest\n}: Props) {\n const [isOpen, setOpen] = useState(false)\n const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 })\n\n return (\n {\n const { target, clientX, clientY } = event\n\n if (\n !isDesktop ||\n (target as HTMLElement).tagName?.toLowerCase() === 'input'\n ) {\n return\n }\n\n event.preventDefault()\n setAnchorPoint({ x: clientX, y: clientY })\n setOpen(true)\n }}\n >\n {isDesktop && (\n setOpen(false)}\n >\n {getMenuItems(menuOrDrawerItems)}\n \n )}\n {children}\n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n {children}\n \n )\n}\n\nexport default FadeBox\n"
},
{
"path": "src/general/HFadeScroll/ScrollContainer.tsx",
"content": "import { Flex } from '@chakra-ui/react'\nimport styled from '@emotion/styled'\n\nconst ScrollContainer = styled(Flex)`\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n`\n\nexport default ScrollContainer\n"
},
{
"path": "src/general/HFadeScroll/index.tsx",
"content": "import {\n ForwardedRef,\n ReactNode,\n forwardRef,\n useRef,\n useEffect,\n useState,\n} from 'react'\nimport ScrollContainer from './ScrollContainer'\nimport FadeBox from './FadeBox'\nimport { useMergeRefs } from '@chakra-ui/hooks'\n\ntype Props = {\n children: ReactNode\n forwardedRef?: ForwardedRef\n onScrollStateChange: (\n isScrollable: boolean,\n canScrollLeft: boolean,\n canScrollRight: boolean\n ) => void\n}\n\nconst HFadeScroll = ({\n children,\n forwardedRef,\n onScrollStateChange,\n}: Props) => {\n const [hasStartFade, setHasStartFade] = useState(false)\n const [hasEndFade, setHasEndFade] = useState(false)\n const scrollContainerRef = useRef(null)\n const timeoutRef = useRef()\n\n function onMousewheel(event: WheelEvent) {\n const { deltaX } = event\n\n if ((deltaX < 0 && !hasStartFade) || (deltaX > 0 && !hasEndFade)) {\n event.preventDefault()\n }\n }\n\n function onScroll() {\n if (scrollContainerRef.current) {\n const {\n scrollWidth,\n scrollLeft,\n offsetWidth,\n } = scrollContainerRef.current\n\n setHasStartFade(scrollLeft > 0)\n setHasEndFade(scrollLeft + offsetWidth + 1 < scrollWidth)\n }\n }\n\n useEffect(() => {\n onScroll()\n\n window.clearTimeout(timeoutRef.current)\n timeoutRef.current = window.setTimeout(onScroll, 300)\n\n const scrollContainerNode = scrollContainerRef.current\n\n scrollContainerNode?.addEventListener('scroll', onScroll)\n scrollContainerNode?.addEventListener('wheel', onMousewheel)\n window.addEventListener('resize', onScroll)\n\n return () => {\n window.removeEventListener('resize', onScroll)\n scrollContainerNode?.removeEventListener('scroll', onScroll)\n scrollContainerNode?.removeEventListener('wheel', onMousewheel)\n\n window.clearTimeout(timeoutRef.current)\n }\n })\n\n useEffect(() => {\n if (scrollContainerRef.current) {\n const { scrollWidth, offsetWidth } = scrollContainerRef.current\n onScrollStateChange(offsetWidth < scrollWidth, hasStartFade, hasEndFade)\n }\n })\n\n const finalScrollContainerRef = useMergeRefs(scrollContainerRef, forwardedRef)\n\n return (\n \n \n {children}\n \n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n \n \n {label}\n \n \n \n )\n}\n\nexport default Loader\n"
},
{
"path": "src/general/Menu.tsx",
"content": "import styled from '@emotion/styled'\nimport {\n Menu as MenuBase,\n MenuButton,\n MenuItem,\n ControlledMenu as ControlledMenuBase,\n MenuDivider,\n MenuHeader,\n} from '@szhsin/react-menu'\nimport '@szhsin/react-menu/dist/index.css'\n\nconst bowShadow =\n 'box-shadow: 0 3px 7px rgb(0 0 0 / 13%), 0 0.6px 2px rgb(0 0 0 / 10%) !important'\n\nconst Menu = styled(MenuBase)`\n ${bowShadow}\n`\n\nconst ControlledMenu = styled(ControlledMenuBase)`\n ${bowShadow}\n`\n\nexport { MenuButton, MenuItem, ControlledMenu, MenuDivider, MenuHeader }\n\nexport default Menu\n"
},
{
"path": "src/general/MenuOrDrawer/Drawer/getDrawerButtons.tsx",
"content": "import { cloneElement, ReactElement, Children } from 'react'\nimport { Button, Divider } from '@chakra-ui/react'\nimport MenuOrDrawerItem from '../MenuOrDrawerItem'\nimport MenuOrDrawerSeparator from '../MenuOrDrawerSeparator'\n\nfunction getDrawerButtons(\n children: ReactElement | ReactElement[],\n onClose: () => void\n) {\n return Children.map(children, child => {\n if (child.type === MenuOrDrawerItem) {\n const icon = cloneElement(child.props.icon, {\n size: 20,\n })\n\n return (\n {\n const { onClick } = child.props\n onClick && onClick()\n onClose()\n }}\n isFullWidth={true}\n leftIcon={icon}\n isDisabled={child.props.isDisabled}\n >\n {child.props.children}\n \n )\n } else if (child.type === MenuOrDrawerSeparator) {\n return \n \n {title} \n\n \n \n {getDrawerButtons(children, onClose)}\n \n \n \n \n )\n}\n\nexport { getDrawerButtons }\n\nexport default Drawer\n"
},
{
"path": "src/general/MenuOrDrawer/Menu/getMenuItems.tsx",
"content": "import {\n MenuItem,\n MenuOrDrawerItem,\n MenuOrDrawerSeparator,\n MenuDivider,\n} from 'general'\nimport { cloneElement, ReactElement, Children } from 'react'\n\nfunction getMenuItems(children: ReactElement | ReactElement[]) {\n return Children.map(children, (child: ReactElement) => {\n if (child.type === MenuOrDrawerItem) {\n const icon = cloneElement(child.props.icon, { size: 16, mr: 3 })\n\n return (\n \n {icon}\n {child.props.children}\n \n )\n } else if (child.type === MenuOrDrawerSeparator) {\n return {title} \n {getMenuItems(children)}\n \n )\n}\n\nexport { getMenuItems }\n\nexport default Menu\n"
},
{
"path": "src/general/MenuOrDrawer/MenuOrDrawerItem.tsx",
"content": "import { ReactElement, ReactNode } from 'react'\n\ntype Props = {\n onClick?: () => void\n children: ReactNode\n icon: ReactElement\n isDisabled?: boolean\n}\n\nfunction MenuItem(props: Props) {\n return null\n}\n\nexport default MenuItem\n"
},
{
"path": "src/general/MenuOrDrawer/MenuOrDrawerSeparator.tsx",
"content": "function MenuOrDrawerSeparator() {\n return null\n}\n\nexport default MenuOrDrawerSeparator\n"
},
{
"path": "src/general/MenuOrDrawer/Trigger.tsx",
"content": "import { IconButton, ButtonProps } from '@chakra-ui/react'\nimport { MoreHorizontal } from 'react-feather'\nimport { ForwardedRef, forwardRef } from 'react'\n\ntype Props = {\n forwardedRef?: ForwardedRef\n} & ButtonProps\n\nfunction Trigger({ forwardedRef, ...rest }: Props) {\n return (\n ((props, ref) => (\n \n {children}\n \n \n )\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport { default as MenuOrDrawerItem } from './MenuOrDrawerItem'\nexport { default as MenuOrDrawerSeparator } from './MenuOrDrawerSeparator'\nexport * from './Menu'\nexport * from './Drawer'\n\nexport default MenuOrDrawer\n"
},
{
"path": "src/general/ResponsiveButton.tsx",
"content": "import { Button, ButtonProps } from '@chakra-ui/react'\nimport { useScreenSize, ScreenSize } from 'general'\nimport { ForwardedRef, forwardRef } from 'react'\n\ntype Props = {\n forwardedRef?: ForwardedRef\n} & ButtonProps\n\nfunction ResponsiveButton({ forwardedRef, ...rest }: Props) {\n const screenSize = useScreenSize()\n const size = screenSize >= ScreenSize.Medium ? 'sm' : 'sm'\n\n return ((props, ref) => (\n \n tooltip?: string\n} & IconButtonProps\n\nfunction ResponsiveIconButton({\n forwardedRef,\n\n ...rest\n}: Props) {\n const screenSize = useScreenSize()\n const size = screenSize >= ScreenSize.Medium ? 'sm' : 'sm'\n\n return ((props, ref) => (\n \n {children}\n \n )\n}\n\nexport default RightAligned\n"
},
{
"path": "src/general/ScreenSizeProvider/context.ts",
"content": "import { createContext, useContext } from 'react'\n\nenum ScreenSize {\n Base = 0,\n Small,\n Medium,\n Large,\n ExtraLarge,\n}\n\nconst ScreenSizeContext = createContext(undefined)\n\nfunction useScreenSize() {\n const screenSize = useContext(ScreenSizeContext)\n\n if (screenSize === undefined) {\n throw new Error('Provider missing')\n }\n\n return screenSize\n}\n\nexport { useScreenSize, ScreenSizeContext, ScreenSize }\n"
},
{
"path": "src/general/ScreenSizeProvider/index.tsx",
"content": "import { useBreakpointValue } from '@chakra-ui/media-query'\nimport { ReactNode } from 'react'\nimport { ScreenSizeContext, ScreenSize } from './context'\n\ntype Props = {\n children: ReactNode\n}\n\nfunction ScreenSizeProvider({ children }: Props) {\n const screenSize = useBreakpointValue({\n base: ScreenSize.Base,\n sm: ScreenSize.Small,\n md: ScreenSize.Medium,\n lg: ScreenSize.Large,\n xl: ScreenSize.ExtraLarge,\n })\n\n if (screenSize === undefined) {\n return null\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport * from './context'\n\nexport default ScreenSizeProvider\n"
},
{
"path": "src/general/Tooltip.tsx",
"content": "import { ReactElement, useState, cloneElement, useRef, ReactNode } from 'react'\nimport { Tooltip as TooltipBase } from '@chakra-ui/react'\n\ntype Props = {\n children: ReactElement\n delay?: number\n label?: ReactNode\n isActive?: boolean\n}\n\nfunction Tooltip({ children, label, isActive = true, delay = 500 }: Props) {\n const [isHovered, setIsHovered] = useState(false)\n const timeoutIdRef = useRef()\n\n function onMouseEnter() {\n window.clearTimeout(timeoutIdRef.current)\n timeoutIdRef.current = window.setTimeout(() => setIsHovered(true), delay)\n }\n\n function hideTooltip() {\n window.clearTimeout(timeoutIdRef.current)\n setIsHovered(false)\n }\n\n function onMouseLeave() {\n hideTooltip()\n }\n\n function onClick(...rest: any) {\n children.props.onClick && children.props.onClick(...rest)\n hideTooltip()\n }\n\n if (!isActive) {\n return children\n }\n\n return (\n \n {cloneElement(children, {\n onMouseEnter,\n onMouseLeave,\n onClick,\n })}\n \n )\n}\n\nexport default Tooltip\n"
},
{
"path": "src/general/TooltipCommandLabel.tsx",
"content": "import { Text } from '@chakra-ui/react'\n\ntype Props = {\n command: string\n kbdCombo: string\n}\n\nfunction TooltipCommandLabel({ command, kbdCombo }: Props) {\n return (\n \n {command}{' '}\n \n {kbdCombo}\n \n \n )\n}\n\nexport default TooltipCommandLabel\n"
},
{
"path": "src/general/deepCopy.ts",
"content": "const deepCopy = (value: any, replacer?: (key: string, value: any) => any) =>\n JSON.parse(JSON.stringify(value, replacer))\n\nexport default deepCopy\n"
},
{
"path": "src/general/getCtrlKeyName.ts",
"content": "function isMac() {\n return navigator.platform.indexOf('Mac') > -1\n}\n\nfunction getCtrlKeyName() {\n if (isMac()) {\n return 'Cmd'\n }\n\n return 'Ctrl'\n}\n\nexport default getCtrlKeyName\n"
},
{
"path": "src/general/index.ts",
"content": "export { default as HFadeScroll } from './HFadeScroll'\nexport * from './HFadeScroll'\nexport { default as Badge } from './Badge'\nexport { default as deepCopy } from './deepCopy'\nexport { default as Menu } from './Menu'\nexport * from './Menu'\nexport { default as ResponsiveButton } from './ResponsiveButton'\nexport { default as ResponsiveIconButton } from './ResponsiveIconButton'\nexport { default as RightAligned } from './RightAligned'\nexport * from './stores'\nexport { default as useSelection } from './useSelection'\nexport * from './useSelection'\nexport { default as useSameOrPreviousValue } from './useSameOrPreviousValue'\nexport { default as ContextMenuFlex } from './ContextMenuFlex'\nexport { default as Loader } from './Loader'\nexport { default as useElementHeight } from './useElementHeight'\nexport { default as Tooltip } from './Tooltip'\nexport { default as getCtrlKeyName } from './getCtrlKeyName'\nexport { default as TooltipCommandLabel } from './TooltipCommandLabel'\nexport { default as ScreenSizeProvider } from './ScreenSizeProvider'\nexport * from './ScreenSizeProvider'\nexport * from './useOneTimeCheckStore'\nexport { default as MenuOrDrawer } from './MenuOrDrawer'\nexport * from './MenuOrDrawer'\nexport { default as minDelay } from './minDelay'\nexport { default as useRunIfNotUnmounted } from './useRunIfNotUnmounted'\n"
},
{
"path": "src/general/minDelay.ts",
"content": "function minDelay(startDate: Date, minDelayInMs = 500) {\n return new Promise(resolve => {\n const endDate = new Date()\n const timeDiffInMs = endDate.getTime() - startDate.getTime()\n\n if (timeDiffInMs >= minDelayInMs) {\n resolve(true)\n } else {\n setTimeout(() => resolve(true), minDelayInMs - timeDiffInMs)\n }\n })\n}\n\nexport default minDelay\n"
},
{
"path": "src/general/stores.tsx",
"content": "import {\n Context,\n useContext,\n createContext,\n ReactNode,\n useMemo,\n Provider,\n} from 'react'\n\nfunction guard(value: unknown): value is object {\n return value !== undefined\n}\n\nfunction makeUseContext(context: Context) {\n function useCustomContext() {\n const value = useContext(context)\n\n if (!guard(value)) {\n throw new Error('Missing store context provider')\n }\n\n return value\n }\n\n return useCustomContext\n}\n\nfunction makeProvider() {\n const Context = createContext(undefined)\n const useContext = makeUseContext(Context)\n\n return [Context.Provider, useContext] as const\n}\n\nfunction makeStoreProvider(\n useStore: (params: StoreParams) => readonly [State, Actions],\n ...selectors: ((state: State) => any)[]\n) {\n const [StateProvider, useState] = makeProvider()\n const [ActionsProvider, useActions] = makeProvider()\n\n const selectorProviders: Provider[] = []\n const useSelectorHooks: any[] = []\n\n selectors.forEach(() => {\n const [SelectorProvider, useSelector] = makeProvider()\n selectorProviders.push(SelectorProvider)\n useSelectorHooks.push(useSelector)\n })\n\n function StoreProvider(props: StoreParams & { children: ReactNode }) {\n const { children, ...storeParams } = props\n const [state, methods] = useStore(storeParams as StoreParams)\n\n let finalChildren = children\n\n selectorProviders.forEach((SelectorProvider, index) => {\n const selector = selectors[index]\n const value = selector(state)\n finalChildren = (\n {finalChildren} \n )\n })\n\n return (\n \n {finalChildren} \n \n )\n }\n\n return [StoreProvider, useState, useActions, ...useSelectorHooks] as const\n}\n\nfunction useCallbacksMemo(methods: T) {\n return useMemo(() => methods, Object.values(methods)) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport { makeStoreProvider, useCallbacksMemo }\n"
},
{
"path": "src/general/useElementHeight.ts",
"content": "import { useRef, useState } from 'react'\nimport useResizeObserver from '@react-hook/resize-observer'\n\nfunction useElementHeight() {\n const elementRef = useRef(null)\n const [elementHeight, setElementHeight] = useState(0)\n\n useResizeObserver(elementRef, entry =>\n setElementHeight(entry.contentRect.height)\n )\n\n return {\n elementRef,\n elementHeight,\n }\n}\n\nexport default useElementHeight\n"
},
{
"path": "src/general/useOneTimeCheckStore.ts",
"content": "import { makeStoreProvider, useCallbacksMemo } from 'general'\nimport { useRef, useCallback } from 'react'\n\ntype KeysMap = {\n [key: string]: boolean | undefined\n}\n\nfunction useOneTimeCheckStore() {\n const keysMapRef = useRef({})\n\n const checkAndReset = useCallback((key: string) => {\n if (keysMapRef.current[key] === true) {\n setTimeout(() => {\n keysMapRef.current[key] = undefined\n }, 0)\n\n return true\n }\n\n return false\n }, [])\n\n const set = useCallback((key: string) => {\n keysMapRef.current[key] = true\n }, [])\n\n const actions = useCallbacksMemo({\n checkAndReset,\n set,\n })\n\n return [keysMapRef, actions] as const\n}\n\nconst [\n OneTimeCheckStoreProvider,\n useOneTimeCheck,\n useOneTimeCheckActions,\n] = makeStoreProvider(useOneTimeCheckStore)\n\ntype OneTimeCheckActions = ReturnType\n\nexport { OneTimeCheckStoreProvider, useOneTimeCheck, useOneTimeCheckActions }\n\nexport type { OneTimeCheckActions }\n\nexport default useOneTimeCheckStore\n"
},
{
"path": "src/general/useRunIfNotUnmounted.ts",
"content": "import { useCallback, useEffect, useRef } from 'react'\n\nfunction useRunIfNotUnmounted() {\n const isUnmountedRef = useRef(false)\n\n useEffect(() => {\n return () => {\n isUnmountedRef.current = true\n }\n }, [])\n\n const callIfNotUnmounted = useCallback((callback: Function) => {\n if (!isUnmountedRef.current) {\n callback()\n }\n }, [])\n\n return callIfNotUnmounted\n}\n\nexport default useRunIfNotUnmounted\n"
},
{
"path": "src/general/useSameOrPreviousValue.ts",
"content": "import { useEffect, useRef } from 'react'\n\nfunction useSameOrPreviousValue(value: T) {\n const previous = useRef(value)\n\n useEffect(() => {\n previous.current = value\n }, [value])\n\n return previous.current\n}\n\nexport default useSameOrPreviousValue\n"
},
{
"path": "src/general/useSelection.ts",
"content": "import { useState } from 'react'\n\ntype Id = number | string\ntype Item = { id: Id }\ntype SelectionMap = { [id in Id]: boolean | undefined }\n\ntype Selection = {\n isIdSelected: (id: Id) => boolean\n toggleItem: (item: T) => void\n addItem: (item: T) => void\n removeItem: (item: T) => void\n selectedItems: T[]\n selectionMap: SelectionMap\n}\n\nfunction useSelection(): Selection {\n const [selectionMap, setSelectionMap] = useState({})\n const [selectedItems, setSelectedItems] = useState([])\n\n function toggleItem(item: T) {\n const { id } = item\n const isSelected = Boolean(selectionMap[id])\n\n if (isSelected) {\n removeItem(item)\n } else {\n addItem(item)\n }\n\n setSelectionMap({ ...selectionMap, [id]: !isSelected })\n }\n\n function removeItem(item: T) {\n setSelectedItems(selectedItems.filter(({ id }) => item.id !== id))\n }\n\n function addItem(item: T) {\n setSelectedItems([...selectedItems, item])\n }\n\n function isIdSelected(id: Id) {\n const isSelected = Boolean(selectionMap[id])\n return isSelected\n }\n\n return {\n isIdSelected,\n toggleItem,\n selectionMap,\n selectedItems,\n removeItem,\n addItem,\n }\n}\n\nexport type { Selection, Item }\n\nexport default useSelection\n"
},
{
"path": "src/icons/CalendarPlus.tsx",
"content": "import { chakra } from '@chakra-ui/react'\n\nfunction CalendarPlus({ size = 24, ...rest }) {\n return (\n \n \n )\n}\n\nexport default chakra(CalendarPlus)\n"
},
{
"path": "src/icons/index.ts",
"content": "export { default as CalendarPlus } from './CalendarPlus'\n"
},
{
"path": "src/index.tsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n \n ,\n document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"
},
{
"path": "src/ingredients/IngredientsList/EmptyList.tsx",
"content": "import { Flex, Text, Button } from '@chakra-ui/react'\n\ntype Props = {\n onAddIngredients: () => void\n}\n\nfunction EmptyList({ onAddIngredients }: Props) {\n return (\n \n \n You haven't added any foods\n \n\n \n Add foods\n \n \n )\n}\n\nexport default EmptyList\n"
},
{
"path": "src/ingredients/IngredientsList/IngredientItem/MenuOrDrawer.tsx",
"content": "import { RightAligned } from 'layout'\nimport { MenuOrDrawer as MenuOrDrawerBase } from 'general'\nimport { ReactElement } from 'react'\n\ntype Props = {\n children: ReactElement[]\n}\n\nfunction MenuOrDrawer({ children }: Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nexport default MenuOrDrawer\n"
},
{
"path": "src/ingredients/IngredientsList/IngredientItem/MissingStatsLayout.tsx",
"content": "import { Flex, Text, Button } from '@chakra-ui/react'\nimport { Trash2 } from 'react-feather'\n\ntype Props = {\n onRemoveRequest: () => void\n}\n\nfunction MissingStatsLayout({ onRemoveRequest }: Props) {\n return (\n \n \n Food not found\n \n\n \n )\n}\n\nexport default MissingStatsLayout\n"
},
{
"path": "src/ingredients/IngredientsList/IngredientItem/Notes.tsx",
"content": "import PresenceAnimation from './PresenceAnimation'\nimport { Box, Text } from '@chakra-ui/react'\nimport { NotesEvents } from './useNotesEvents'\nimport { IngredientForm } from 'ingredients'\n\ntype Props = {\n notesEvents: NotesEvents\n ingredientForm: IngredientForm\n}\n\nfunction Notes({ notesEvents, ingredientForm }: Props) {\n return (\n \n \n \n {ingredientForm.notes}\n \n \n \n )\n}\n\nexport default Notes\n"
},
{
"path": "src/ingredients/IngredientsList/IngredientItem/PresenceAnimation.tsx",
"content": "import { ReactNode } from 'react'\nimport { motion } from 'framer-motion'\n\ntype Props = {\n children: ReactNode\n shouldAnimate: boolean\n onAnimationComplete: () => void\n isVisible: boolean\n isDraggingOver?: boolean\n}\n\nconst variants = {\n open: {\n opacity: 1,\n height: 'auto',\n },\n collapsed: { opacity: 0, height: 0 },\n}\n\nfunction PresenceAnimation({\n shouldAnimate,\n onAnimationComplete,\n isVisible,\n children,\n isDraggingOver = false,\n}: Props) {\n return (\n \n {children}\n \n )\n}\n\nexport default PresenceAnimation\n"
},
{
"path": "src/ingredients/IngredientsList/IngredientItem/StatsLayout.tsx",
"content": "import { IngredientForm } from 'ingredients'\nimport { Food, FoodInfo } from 'foods'\nimport { StatsLayout as StatsLayoutBase, Stat, AmountInput } from 'stats'\nimport { ChangeEvent, ReactElement, ReactNode } from 'react'\nimport { Portion, PortionsMenuOrDrawer } from 'portions'\nimport { Flex } from '@chakra-ui/react'\n\ntype Props = {\n energy: number\n protein: number\n carbs: number\n fat: number\n ingredientForm: IngredientForm\n onAmountChange: (event: ChangeEvent) => void\n onPortionChange: (portion: Portion) => void\n menuElement: ReactElement\n food: Food\n notes?: string\n children: ReactNode\n}\n\nfunction StatsLayout({\n energy,\n protein,\n carbs,\n fat,\n ingredientForm,\n onAmountChange,\n onPortionChange,\n menuElement,\n food,\n notes,\n children,\n}: Props) {\n const acceptsFractions = ['teaspoons', 'tablespoons', 'cups'].includes(\n ingredientForm.portionId\n )\n\n return (\n \n {children}\n \n }\n amountElement={\n \n \n \n }\n energyElement={\n {(provided, { isDragging }) => (\n \n \n {food ? (\n {menuOrDrawerItems}}\n food={food}\n notes={ingredientForm.notes}\n >\n {ingredientForm.notes && (\n ) {\n const { value } = event.target\n\n dietFormActions.updateIngredientForm(variantIndex, mealIndex, index, {\n amount: value,\n })\n }\n\n function onPortionChange(newPortion: Portion) {\n const newAmount = getAmountFromPortionToPortion(\n amountAsNumber(ingredientForm.amount),\n ingredientForm.portionId,\n newPortion.id,\n food\n )\n\n dietFormActions.updateIngredientForm(variantIndex, mealIndex, index, {\n portionId: newPortion.id,\n amount: formatAmount(newAmount, newPortion.id),\n })\n }\n\n function onAnimationComplete() {\n if (!isVisible) {\n onRemove(variantIndex, mealIndex, index)\n }\n }\n\n function onFoodUpdated() {\n toast({\n position: 'top',\n title: 'Food updated',\n status: 'success',\n duration: 2000,\n isClosable: true,\n })\n }\n\n function onRemoveRequest() {\n setIsVisible(false)\n }\n\n return {\n onAmountChange,\n onAnimationComplete,\n onRemoveRequest,\n isVisible,\n shouldAnimate,\n onFoodUpdated,\n onPortionChange,\n }\n}\n\nexport default useIngredientsEvents\n"
},
{
"path": "src/ingredients/IngredientsList/IngredientItem/useNotesEvents.tsx",
"content": "import { useDietFormActions } from 'diets'\nimport { useOneTimeCheckActions } from 'general'\nimport { IngredientForm } from 'ingredients'\nimport { useRef, useState } from 'react'\n\ntype Params = {\n variantIndex: number\n mealIndex: number\n index: number\n ingredientForm: IngredientForm\n}\n\nfunction useNotesEvents({\n variantIndex,\n mealIndex,\n index,\n ingredientForm,\n}: Params) {\n const [areNotesVisible, setAreNotesVisible] = useState(true)\n const dietFormActions = useDietFormActions()\n const oneTimeCheckActions = useOneTimeCheckActions()\n const ref = useRef()\n\n const shouldAnimateNotes = oneTimeCheckActions.checkAndReset(\n `notes-${ingredientForm.fieldId}`\n )\n\n function onEditNotes(notes?: string) {\n if (ingredientForm.notes) {\n ref.current = notes\n setAreNotesVisible(false)\n } else {\n if (notes) {\n dietFormActions.updateIngredientForm(variantIndex, mealIndex, index, {\n notes,\n })\n }\n setAreNotesVisible(Boolean(notes))\n }\n }\n\n function onNotesAnimationComplete() {\n if (!areNotesVisible) {\n dietFormActions.updateIngredientForm(variantIndex, mealIndex, index, {\n notes: ref.current,\n })\n ref.current = undefined\n\n setAreNotesVisible(true)\n }\n }\n\n return {\n areNotesVisible,\n shouldAnimateNotes,\n onEditNotes,\n onNotesAnimationComplete,\n }\n}\n\ntype NotesEvents = ReturnType\n\nexport type { NotesEvents }\n\nexport default useNotesEvents\n"
},
{
"path": "src/ingredients/IngredientsList/index.tsx",
"content": "import { Box, Fade } from '@chakra-ui/react'\nimport IngredientItem from './IngredientItem'\nimport { Droppable } from 'react-beautiful-dnd'\nimport EmptyList from './EmptyList'\nimport { useDietFormActions } from 'diets'\nimport { IngredientForm } from 'ingredients'\nimport { memo } from 'react'\nimport { Stats } from 'stats'\n\ntype Props = {\n mealIndex: number\n variantIndex: number\n mealFormFieldId: string\n onAddIngredients: () => void\n ingredientsForms: IngredientForm[]\n ingredientsStats: Stats[]\n shouldAddRadiusToLastBottomBorder?: boolean\n}\n\nfunction IngredientsList({\n variantIndex,\n mealIndex,\n mealFormFieldId,\n onAddIngredients,\n ingredientsForms,\n ingredientsStats,\n shouldAddRadiusToLastBottomBorder,\n}: Props) {\n const dietFormActions = useDietFormActions()\n\n return (\n \n {(provided, snapshot) => (\n \n {ingredientsForms.map((ingredientForm, index) => {\n const { energy, protein, carbs, fat } = ingredientsStats[index]\n\n return (\n \n \n )}\n \n )}\n \n )\n}\n\nexport default memo(IngredientsList)\n"
},
{
"path": "src/ingredients/PdfIngredientsList/PdfIngredientItem/FoodName.tsx",
"content": "import { Text, StyleSheet, View, Link } from '@react-pdf/renderer'\nimport { Food, FoodId } from 'foods'\nimport { IngredientForm } from 'ingredients'\nimport { Portion } from 'portions'\nimport getComputedColorFromChakra from 'theme/getComputedColorFromChakra'\nimport getIngredientPortionDescription from 'portions/getIngredientPortionDescription'\ntype Props = {\n ingredientForm: IngredientForm\n foodsById: Record\n portionsById: Record\n}\n\nfunction Name({ ingredientForm, foodsById, portionsById }: Props) {\n const { foodId } = ingredientForm\n const food = foodsById[foodId]\n\n const text = (\n <>\n \n {getIngredientPortionDescription(\n ingredientForm,\n foodsById,\n portionsById\n )}\n {' '}\n {food.name}\n \n )\n\n return (\n \n {food.url ? (\n \n {text}\n \n ) : (\n \n {text}\n \n )}\n\n {ingredientForm.notes && (\n \n {ingredientForm.notes}\n \n )}\n \n )\n}\n\nconst styles = StyleSheet.create({\n root: { marginLeft: 12 },\n nameText: {\n fontSize: 14,\n },\n nameLink: {\n fontSize: 14,\n textDecoration: 'none',\n },\n notes: {\n marginTop: 3,\n fontSize: 12,\n },\n})\n\nexport default Name\n"
},
{
"path": "src/ingredients/PdfIngredientsList/PdfIngredientItem/index.tsx",
"content": "import { StyleSheet, View } from '@react-pdf/renderer'\nimport { Food, FoodId } from 'foods'\nimport { IngredientForm } from 'ingredients'\nimport { Portion } from 'portions'\nimport { Stats } from 'stats'\nimport PdfStat from 'stats/PdfStat'\nimport PdfStatsLayout from 'stats/PdfStatsLayout'\nimport FoodName from './FoodName'\n\ntype Props = {\n ingredientForm: IngredientForm\n stats: Stats\n foodsById: Record\n portionsById: Record\n isLast: boolean\n}\n\nfunction PdfIngredientItem({\n ingredientForm,\n stats,\n foodsById,\n portionsById,\n isLast,\n}: Props) {\n return (\n \n \n portionsById: Record\n}\n\nfunction PdfIngredientsList({\n ingredientsForms,\n ingredientsFormsStats,\n foodsById,\n portionsById,\n}: Props) {\n const filteredIngredientsForms = ingredientsForms.filter(\n ({ foodId }) => foodsById[foodId]\n )\n\n return (\n \n {filteredIngredientsForms.map((ingredientForm, index) => {\n const stats = ingredientsFormsStats[index]\n\n return (\n \n You haven't added any foods\n \n )}\n \n )\n}\n\nconst styles = StyleSheet.create({\n emptyListText: {\n backgroundColor: 'white',\n padding: 12,\n fontSize: 14,\n borderBottomLeftRadius: 7,\n borderBottomRightRadius: 7,\n },\n})\n\nexport default PdfIngredientsList\n"
},
{
"path": "src/ingredients/getIngredient.ts",
"content": "import { DEFAULT_SERVING_SIZE_IN_GRAMS, Food } from 'foods'\nimport { Ingredient } from './types'\n\nfunction getIngredient(food: Food): Ingredient {\n const { volume } = food\n\n if (\n volume &&\n ['tablespoons', 'teaspoons', 'cups'].includes(volume.portionId)\n ) {\n const { portionId } = volume\n\n return {\n foodId: food.id,\n amount: 1,\n portionId,\n }\n }\n\n return {\n foodId: food.id,\n amount: food.servingSizeInGrams || DEFAULT_SERVING_SIZE_IN_GRAMS,\n portionId: 'grams',\n }\n}\n\nexport default getIngredient\n"
},
{
"path": "src/ingredients/index.ts",
"content": "export { default as IngredientsList } from './IngredientsList'\nexport * from './ingredientForm'\nexport { default as useIngredientsFormsActions } from './useIngredientsFormsActions'\nexport * from './useIngredientsFormsActions'\nexport * from './types'\nexport { default as useGetIngredientFormStatsTree } from './useGetIngredientFormStatsTree'\nexport { default as getIngredient } from './getIngredient'\n"
},
{
"path": "src/ingredients/ingredientForm.ts",
"content": "import { Ingredient } from './types'\nimport { v4 as uuidv4 } from 'uuid'\nimport { FoodId } from 'foods'\nimport { formatAmount } from 'portions'\n\ntype IngredientForm = {\n fieldId: string\n foodId: FoodId\n amount: string\n notes?: string\n portionId: string\n}\n\nfunction getIngredientForm(ingredient: Ingredient): IngredientForm {\n const fieldId = uuidv4()\n\n return {\n fieldId,\n foodId: ingredient.foodId,\n amount: formatAmount(ingredient.amount, ingredient.portionId),\n portionId: ingredient.portionId,\n }\n}\n\nfunction getInsertIngredientFormAnimationKey(fieldId: string) {\n return `insert-ingredient-animation-${fieldId}`\n}\n\nexport type { IngredientForm }\n\nexport { getIngredientForm, getInsertIngredientFormAnimationKey }\n"
},
{
"path": "src/ingredients/types.ts",
"content": "import { FoodId } from 'foods'\n\ntype Ingredient = {\n foodId: FoodId\n amount: number\n portionId: string\n}\n\nexport type { Ingredient }\n"
},
{
"path": "src/ingredients/useGetIngredientFormStatsTree.ts",
"content": "import { useFoods } from 'foods'\nimport { IngredientForm } from './ingredientForm'\nimport { StatsTree, objectFromNutritionDataKeys, Stats } from 'stats'\nimport { DEFAULT_SERVING_SIZE_IN_GRAMS } from 'foods'\nimport { useGetAmount } from 'portions'\nimport { useCallback } from 'react'\nimport amountAsNumber from 'stats/amountAsNumber'\n\nfunction useGetIngredientFormStatsTree() {\n const { foodsById } = useFoods()\n const { getAmountFromPortionToGrams } = useGetAmount()\n\n const getIngredientFormStatsTree = useCallback(\n (ingredientForm: IngredientForm): StatsTree => {\n const food = foodsById[ingredientForm.foodId]\n let stats: Stats\n\n if (food) {\n const amountInGrams = getAmountFromPortionToGrams(\n amountAsNumber(ingredientForm.amount),\n ingredientForm.portionId,\n food\n )\n const servingSizeInGrams =\n food.servingSizeInGrams || DEFAULT_SERVING_SIZE_IN_GRAMS\n const scale = amountInGrams / servingSizeInGrams\n\n stats = {\n amountInGrams,\n ...objectFromNutritionDataKeys(key => Math.round(scale * food[key])),\n }\n } else {\n stats = {\n amountInGrams: 0,\n ...objectFromNutritionDataKeys(() => 0),\n }\n }\n\n return {\n id: ingredientForm.fieldId,\n stats,\n subtrees: [],\n }\n },\n [foodsById, getAmountFromPortionToGrams]\n )\n\n return getIngredientFormStatsTree\n}\n\nexport default useGetIngredientFormStatsTree\n"
},
{
"path": "src/ingredients/useIngredientsFormsActions.ts",
"content": "import { useCallback, SetStateAction } from 'react'\nimport { DietForm } from 'diets'\nimport produce from 'immer'\nimport {\n getIngredientForm,\n getInsertIngredientFormAnimationKey,\n IngredientForm,\n} from './ingredientForm'\nimport { OneTimeCheckActions } from 'general'\nimport { Food } from 'foods'\nimport { getIngredient } from 'ingredients'\n\ntype Params = {\n setDietForm: (action: SetStateAction) => void\n oneTimeCheckActions: OneTimeCheckActions\n}\n\nfunction useIngredientsFormsActions({\n setDietForm,\n\n oneTimeCheckActions,\n}: Params) {\n const appendIngredientsForms = useCallback(\n (variantFormIndex: number, mealFormIndex: number, foods: Food[]) => {\n setDietForm(dietForm =>\n produce(dietForm, draftDietForm => {\n const ingredients = foods.map(getIngredient)\n const ingredientForms = ingredients.map(getIngredientForm)\n\n ingredientForms.forEach(({ fieldId }) => {\n oneTimeCheckActions.set(\n getInsertIngredientFormAnimationKey(fieldId)\n )\n })\n const { variantsForms } = draftDietForm\n const { mealsForms } = variantsForms[variantFormIndex]\n const { ingredientsForms } = mealsForms[mealFormIndex]\n ingredientsForms.push(...ingredientForms)\n })\n )\n },\n [setDietForm, oneTimeCheckActions]\n )\n\n const removeIngredientForm = useCallback(\n (\n variantFormIndex: number,\n mealFormIndex: number,\n ingredientFormIndex: number\n ) => {\n setDietForm(dietForm =>\n produce(dietForm, draftDietForm => {\n const { variantsForms } = draftDietForm\n const { mealsForms } = variantsForms[variantFormIndex]\n const { ingredientsForms } = mealsForms[mealFormIndex]\n\n ingredientsForms.splice(ingredientFormIndex, 1)\n })\n )\n },\n [setDietForm]\n )\n\n const updateIngredientForm = useCallback(\n (\n variantFormIndex: number,\n mealFormIndex: number,\n ingredinetFormIndex: number,\n partialIngredientForm: Partial\n ) => {\n setDietForm(dietForm =>\n produce(dietForm, draftDietForm => {\n const { variantsForms } = draftDietForm\n const { mealsForms } = variantsForms[variantFormIndex]\n const { ingredientsForms } = mealsForms[mealFormIndex]\n const ingredientForm = ingredientsForms[ingredinetFormIndex]\n\n ingredientsForms[ingredinetFormIndex] = {\n ...ingredientForm,\n ...partialIngredientForm,\n }\n })\n )\n },\n [setDietForm]\n )\n\n const moveIngredientForm = useCallback(\n (\n sourceMealFormId: string,\n sourceIngredientFormIndex: number,\n destinationMealFormId: string,\n destinationIngredientFormIndex: number\n ) => {\n setDietForm(dietForm =>\n produce(dietForm, draftDietForm => {\n const { selectedVariantFormIndex } = dietForm\n\n const { mealsForms } = draftDietForm.variantsForms[\n selectedVariantFormIndex\n ]\n const sourceMealForm = mealsForms.find(\n ({ fieldId }) => fieldId === sourceMealFormId\n )\n let ingredientForm\n\n if (sourceMealForm) {\n ingredientForm =\n sourceMealForm.ingredientsForms[sourceIngredientFormIndex]\n sourceMealForm.ingredientsForms.splice(sourceIngredientFormIndex, 1)\n }\n\n const destinationMealForm = mealsForms.find(\n ({ fieldId }) => fieldId === destinationMealFormId\n )\n\n if (destinationMealForm && ingredientForm) {\n destinationMealForm.ingredientsForms.splice(\n destinationIngredientFormIndex,\n 0,\n ingredientForm\n )\n }\n })\n )\n },\n [setDietForm]\n )\n\n return {\n appendIngredientsForms,\n removeIngredientForm,\n updateIngredientForm,\n moveIngredientForm,\n }\n}\n\ntype IngredientsFormsActions = ReturnType\n\nexport type { IngredientsFormsActions }\n\nexport default useIngredientsFormsActions\n"
},
{
"path": "src/layout/MainLayout.tsx",
"content": "import {\n createContext,\n ReactElement,\n ReactNode,\n RefObject,\n useRef,\n} from 'react'\nimport { Box } from '@chakra-ui/react'\nimport useHasSideNavigation from './useHasSideNavigation'\n\nexport type MainLayoutProps = {\n sidebarElement?: ReactElement\n children: ReactNode\n}\n\nconst ContentBoxRefContext = createContext>({\n current: null,\n})\n\nfunction MainLayout({ children }: MainLayoutProps) {\n const hasSideNavigation = useHasSideNavigation()\n const contentBoxRef = useRef(null)\n\n return (\n \n {hasSideNavigation && (\n \n \n {children}\n \n \n \n )\n}\n\nexport { ContentBoxRefContext }\n\nexport default MainLayout\n"
},
{
"path": "src/layout/Page/ElementContainer.tsx",
"content": "import { Box, BoxProps } from '@chakra-ui/react'\nimport { ForwardedRef, ReactNode, forwardRef } from 'react'\n\ntype Props = {\n children: ReactNode\n forwardedRef?: ForwardedRef\n} & BoxProps\n\nfunction ElementContainer({ children, forwardedRef, ...rest }: Props) {\n return (\n \n {children}\n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n {children} \n \n )\n}\n\nexport default PageBody\n"
},
{
"path": "src/layout/Page/PageFooter.tsx",
"content": "import { Box } from '@chakra-ui/react'\nimport { ReactNode, RefObject } from 'react'\nimport ElementContainer from './ElementContainer'\n\ntype Props = {\n children: ReactNode\n footerContainerRef?: RefObject\n}\n\nfunction PageFooter({ children, footerContainerRef }: Props) {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nexport default PageFooter\n"
},
{
"path": "src/layout/Page/PageHeader.tsx",
"content": "import { Box, Flex } from '@chakra-ui/react'\nimport { ForwardedRef, forwardRef, ReactNode } from 'react'\nimport ElementContainer from './ElementContainer'\n\ntype Props = {\n children: ReactNode\n forwardedRef?: ForwardedRef\n}\n\nfunction PageHeader({ children, forwardedRef }: Props) {\n return (\n \n \n {children} \n \n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n \n {children}\n \n \n )\n}\n\nexport { default as PageHeader } from './PageHeader'\nexport { default as PageBody } from './PageBody'\nexport { default as PageFooter } from './PageFooter'\n\nexport default Page\n"
},
{
"path": "src/layout/RightAligned.tsx",
"content": "import { Flex, FlexProps } from '@chakra-ui/react'\nimport { ReactNode } from 'react'\n\ntype Props = {\n children: ReactNode\n} & FlexProps\n\nfunction RightAligned({ children, ...rest }: Props) {\n return (\n \n {children}\n \n )\n}\n\nexport default RightAligned\n"
},
{
"path": "src/layout/index.tsx",
"content": "export { default as Page } from './Page'\nexport * from './Page'\nexport { default as MainLayout } from './MainLayout'\nexport * from './MainLayout'\nexport { default as RightAligned } from './RightAligned'\n"
},
{
"path": "src/layout/useHasSideNavigation.ts",
"content": "// import { useScreenSize } from 'general'\n\nfunction useHasSideNavigation() {\n /*const screenSize = useScreenSize()\n return screenSize >= ScreenSize.Large*/\n\n return false\n}\n\nexport default useHasSideNavigation\n"
},
{
"path": "src/meals/MealsList/EmptyList.tsx",
"content": "import { Text, Center, chakra, Button, VStack } from '@chakra-ui/react'\nimport { Plus } from 'react-feather'\n\nconst PlusStyled = chakra(Plus)\n\ntype Props = {\n onAddMeal: () => void\n}\n\nfunction EmptyList({ onAddMeal }: Props) {\n return (\n \n \n \n You haven't added any meals to this day yet\n \n \n Days can be specific weekdays or just types of days. For example: a\n training or a rest day.\n \n \n \n )\n}\n\nexport default EmptyList\n"
},
{
"path": "src/meals/MealsList/MealItem/Header/MenuOrDrawer.tsx",
"content": "import { RightAligned } from 'layout'\nimport { MenuOrDrawer as MenuOrDrawerBase } from 'general'\nimport { ReactElement } from 'react'\n\ntype Props = {\n children: ReactElement[]\n}\n\nfunction MenuOrDrawer({ children }: Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nexport default MenuOrDrawer\n"
},
{
"path": "src/meals/MealsList/MealItem/Header/Name.tsx",
"content": "import { BoxProps, Input, Flex } from '@chakra-ui/react'\nimport { useDietFormActions } from 'diets'\nimport { MealForm } from 'meals'\nimport { RefObject, ChangeEvent } from 'react'\n\ntype Props = {\n variantIndex: number\n mealForm: MealForm\n index: number\n getMealNameInputRefById: (id: string) => RefObject\n} & BoxProps\n\nfunction Name({\n variantIndex,\n mealForm,\n index,\n getMealNameInputRefById,\n ...rest\n}: Props) {\n const dietFormActions = useDietFormActions()\n\n function onNameChange(event: ChangeEvent) {\n const { value } = event.target\n\n dietFormActions.updateMealForm(variantIndex, index, {\n name: value,\n })\n }\n\n return (\n \n \n )\n}\n\nexport default Name\n"
},
{
"path": "src/meals/MealsList/MealItem/Header/getMenuOrDrawerItems.tsx",
"content": "import { chakra } from '@chakra-ui/react'\nimport { Plus, Trash2, Copy, Edit } from 'react-feather'\nimport { MealForm } from 'meals'\nimport { MenuOrDrawerItem, MenuOrDrawerSeparator } from 'general'\n\nconst PlusStyled = chakra(Plus)\nconst Trash2Styled = chakra(Trash2)\nconst CopyStyled = chakra(Copy)\nconst EditStyled = chakra(Edit)\n\ntype Params = {\n onRemove: () => void\n onEditNotes: () => void\n onAddIngredient: () => void\n onClone: () => void\n mealForm: MealForm\n}\n\nfunction getMenuOrDrawerItems({\n onRemove,\n onAddIngredient,\n onClone,\n onEditNotes,\n mealForm,\n}: Params) {\n return [\n \n ingredientsStatsSum: Stats\n} & BoxProps\n\nfunction Header({\n mealForm,\n variantIndex,\n index,\n onRemove,\n onClone,\n onAddIngredient,\n onEditNotes,\n getMealNameInputRefById,\n ingredientsStatsSum,\n ...rest\n}: Props) {\n const menuOrDrawerItems = getMenuOrDrawerItems({\n onAddIngredient,\n onRemove,\n onClone,\n onEditNotes,\n mealForm,\n })\n\n return (\n \n {menuOrDrawerItems} }\n />\n \n )\n}\n\nexport default Header\n"
},
{
"path": "src/meals/MealsList/MealItem/Notes.tsx",
"content": "import { Box, Text } from '@chakra-ui/react'\n\ntype Props = {\n notes: string\n}\n\nfunction Notes({ notes }: Props) {\n return (\n \n \n {notes}\n \n \n )\n}\n\nexport default Notes\n"
},
{
"path": "src/meals/MealsList/MealItem/PresenceAnimation.tsx",
"content": "import { ReactNode } from 'react'\nimport { motion } from 'framer-motion'\n\ntype Props = {\n children: ReactNode\n shouldAnimate: boolean\n onAnimationComplete: () => void\n isVisible: boolean\n isDragging: boolean\n}\n\nconst variants = {\n open: {\n opacity: 1,\n height: 'auto',\n },\n\n collapsed: { opacity: 0, height: 0, x: 0 },\n}\n\nfunction PresenceAnimation({\n children,\n onAnimationComplete,\n shouldAnimate,\n isVisible,\n isDragging,\n}: Props) {\n return (\n \n {children}\n \n )\n}\n\nexport default PresenceAnimation\n"
},
{
"path": "src/meals/MealsList/MealItem/index.tsx",
"content": "import { MealForm } from 'meals'\nimport { Flex, FlexProps, useDisclosure, Divider, Box } from '@chakra-ui/react'\nimport Header from './Header'\nimport { RefObject, memo } from 'react'\nimport { Draggable } from 'react-beautiful-dnd'\nimport { IngredientsList } from 'ingredients'\nimport { FoodsDrawer } from 'foods'\nimport PresenceAnimation from './PresenceAnimation'\nimport useMealFormEvents from './useMealFormEvents'\nimport { EditNotesModal } from 'notes'\nimport Notes from './Notes'\nimport useGetAndUpdateStats from './useGetAndUpdateStats'\n\ntype Props = {\n mealForm: MealForm\n index: number\n variantIndex: number\n onRemove: (variantIndex: number, index: number) => void\n getMealNameInputRefById: (id: string) => RefObject\n onFirstAppear: (mealForm: MealForm) => void\n selectedVariantFormFieldId: string\n isDragging: boolean\n} & FlexProps\n\nfunction MealItem({\n mealForm,\n index,\n onRemove,\n getMealNameInputRefById,\n variantIndex,\n selectedVariantFormFieldId,\n onFirstAppear,\n isDragging,\n ...rest\n}: Props) {\n const foodsDrawerDisclosure = useDisclosure()\n const mealFormEvents = useMealFormEvents({\n mealForm,\n variantIndex,\n index,\n onFirstAppear,\n onRemove,\n foodsDrawerDisclosure,\n })\n const editNotesModalDisclosure = useDisclosure()\n\n const { mealFormStatsTree, ingredientsStats } = useGetAndUpdateStats({\n mealForm,\n index,\n selectedVariantFormFieldId,\n })\n\n return (\n \n {(provided, snapshot) => (\n \n \n \n \n\n \n \n )\n}\n\nexport default MealsControls\n"
},
{
"path": "src/meals/MealsList/index.tsx",
"content": "import { BoxProps, Flex, Box } from '@chakra-ui/react'\nimport MealItem from './MealItem'\nimport { useRef, memo } from 'react'\nimport { useGetRefForId } from 'dom'\nimport { Droppable } from 'react-beautiful-dnd'\nimport { useDietFormActions } from 'diets'\nimport { MealForm } from 'meals'\nimport useScrollToAndFocusMeal from './useScrollToAndFocusMeal'\nimport EmptyList from './EmptyList'\nimport MealsControls from './MealsControls'\n\ntype Props = {\n mealsForms: MealForm[]\n selectedVariantFormIndex: number\n selectedVariantFormFieldId: string\n headerHeight: number\n onAddMeal: () => void\n} & BoxProps\n\nfunction MealsList({\n mealsForms,\n selectedVariantFormIndex,\n selectedVariantFormFieldId,\n headerHeight,\n onAddMeal,\n ...rest\n}: Props) {\n const getMealNameInputRefById = useGetRefForId()\n const scrollTargetRef = useRef(null)\n\n const { onScrollToMeal } = useScrollToAndFocusMeal({\n scrollTargetRef,\n getMealNameInputRefById,\n })\n\n const dietFormActions = useDietFormActions()\n\n return (\n \n {(provided, snapshot) => (\n \n {mealsForms.length > 0 ? (\n mealsForms.map((mealForm, index) => (\n \n )}\n \n )\n}\n\nexport default memo(MealsList)\n"
},
{
"path": "src/meals/MealsList/useScrollToAndFocusMeal.ts",
"content": "import { MealForm } from 'meals'\nimport { useScrollTo } from 'dom'\nimport { RefObject, useCallback } from 'react'\nimport { isMobile } from 'react-device-detect'\n\ntype Params = {\n getMealNameInputRefById: (id: string) => RefObject\n scrollTargetRef: RefObject\n}\n\nfunction useScrollToAndFocusMeal({ getMealNameInputRefById }: Params) {\n const scrollTo = useScrollTo()\n\n const onScrollToMeal = useCallback(\n async (mealForm: MealForm) => {\n const mealNameInputRef = getMealNameInputRefById(mealForm.fieldId)\n\n if (mealNameInputRef.current) {\n await scrollTo(mealNameInputRef.current)\n }\n\n if (mealNameInputRef.current && !isMobile) {\n mealNameInputRef.current.setSelectionRange(\n 0,\n mealNameInputRef.current.value.length\n )\n mealNameInputRef.current.focus()\n }\n },\n [getMealNameInputRefById, scrollTo]\n )\n\n return { onScrollToMeal }\n}\n\nexport default useScrollToAndFocusMeal\n"
},
{
"path": "src/meals/PdfMealsList/Notes.tsx",
"content": "import { Text, StyleSheet, View } from '@react-pdf/renderer'\nimport getComputedColorFromChakra from 'theme/getComputedColorFromChakra'\n\ntype Props = {\n notes: string\n}\n\nfunction Notes({ notes }: Props) {\n return (\n \n \n {notes}\n \n \n )\n}\n\nconst styles = StyleSheet.create({\n root: {\n padding: 12,\n borderTopWidth: 1,\n fontSize: 14,\n },\n text: {\n flexDirection: 'row',\n flex: 1,\n },\n})\n\nexport default Notes\n"
},
{
"path": "src/meals/PdfMealsList/PdfMealItem.tsx",
"content": "import { Text, StyleSheet, View } from '@react-pdf/renderer'\nimport { MealForm } from 'meals'\nimport { Style } from '@react-pdf/types/style'\nimport getComputedColorFromChakra from 'theme/getComputedColorFromChakra'\nimport { Stats } from 'stats'\nimport PdfStat from 'stats/PdfStat'\nimport PdfStatsLayout from 'stats/PdfStatsLayout'\nimport { Food } from 'foods'\nimport PdfIngredientsList from 'ingredients/PdfIngredientsList'\nimport { Portion } from 'portions'\nimport Notes from './Notes'\n\ntype Props = {\n mealForm: MealForm\n style?: Style\n stats: Stats\n ingredientsFormsStats: Stats[]\n foodsById: Record\n portionsById: Record\n}\n\nfunction PdfMealItem({\n mealForm,\n stats,\n ingredientsFormsStats,\n style = {},\n foodsById,\n portionsById,\n}: Props) {\n const { ingredientsForms } = mealForm\n\n return (\n \n \n \n {mealForm.name || 'Untitled meal'}\n \n }\n energyElement={\n \n\n \n \n portionsById: Record\n}\n\nfunction PdfMealsList({\n mealsForms,\n mealsFormsStatsTrees,\n foodsById,\n portionsById,\n}: Props) {\n return (\n \n {mealsForms.map((mealForm, index) => {\n const { stats, subtrees } = mealsFormsStatsTrees[index]\n\n return (\n stats)}\n foodsById={foodsById}\n portionsById={portionsById}\n />\n )\n })}\n \n )\n}\n\nexport default PdfMealsList\n"
},
{
"path": "src/meals/index.ts",
"content": "export { default as MealsList } from './MealsList'\nexport { default as useMealsFormsActions } from './useMealsFormsActions'\nexport * from './useMealsFormsActions'\nexport * from './mealForm'\nexport * from './types'\nexport { default as useGetMealFormStatsTree } from './useGetMealFormStatsTree'\n"
},
{
"path": "src/meals/mealForm.ts",
"content": "import { Meal } from './types'\nimport { getIngredientForm, IngredientForm } from 'ingredients'\nimport { v4 as uuidv4 } from 'uuid'\n\ntype MealForm = {\n fieldId: string\n name: string\n notes?: string\n ingredientsForms: IngredientForm[]\n}\n\nfunction getMealForm(meal?: Meal): MealForm {\n const fieldId = uuidv4()\n\n if (meal) {\n return {\n fieldId,\n name: meal.name,\n ingredientsForms: meal.ingredients.map(ingredient =>\n getIngredientForm(ingredient)\n ),\n }\n }\n\n return {\n fieldId,\n name: '',\n ingredientsForms: [],\n }\n}\n\nfunction getInsertMealFormAnimationKey(fieldId: string) {\n return `insert-meal-animmation-${fieldId}`\n}\n\nexport type { MealForm }\n\nexport { getMealForm, getInsertMealFormAnimationKey }\n"
},
{
"path": "src/meals/types.ts",
"content": "import { Ingredient } from 'ingredients'\n\ntype Meal = {\n name: string\n ingredients: Ingredient[]\n}\n\nexport type { Meal }\n"
},
{
"path": "src/meals/useGetMealFormStatsTree.ts",
"content": "import { getStatsTree, StatsTree } from 'stats'\nimport { useGetIngredientFormStatsTree } from 'ingredients'\nimport { MealForm } from 'meals'\nimport { useCallback } from 'react'\n\nfunction useGetMealFormStatsTree() {\n const getIngredientFormStatsTree = useGetIngredientFormStatsTree()\n\n const getMealFormStatsTree = useCallback(\n (mealForm: MealForm): StatsTree => {\n return getStatsTree({\n id: mealForm.fieldId,\n subtrees: mealForm.ingredientsForms.map(ingredientForm =>\n getIngredientFormStatsTree(ingredientForm)\n ),\n })\n },\n [getIngredientFormStatsTree]\n )\n\n return getMealFormStatsTree\n}\n\nexport default useGetMealFormStatsTree\n"
},
{
"path": "src/meals/useMealsFormsActions.ts",
"content": "import { useCallback, SetStateAction } from 'react'\nimport { DietForm } from 'diets'\nimport produce from 'immer'\nimport {\n getInsertMealFormAnimationKey,\n getMealForm,\n MealForm,\n} from './mealForm'\nimport { OneTimeCheckActions } from 'general'\nimport { duplicate } from 'form'\nimport { getDuplicatedName } from 'form/names'\n\ntype Params = {\n setDietForm: (action: SetStateAction) => void\n oneTimeCheckActions: OneTimeCheckActions\n}\n\nfunction useMealsFormsActions({ setDietForm, oneTimeCheckActions }: Params) {\n const appendMealForm = useCallback(\n (mealForm?: MealForm) =>\n setDietForm(\n produce(draftDietForm => {\n const mealFormToAppend = mealForm || getMealForm()\n const { selectedVariantFormIndex, variantsForms } = draftDietForm\n\n oneTimeCheckActions.set(\n getInsertMealFormAnimationKey(mealFormToAppend.fieldId)\n )\n\n variantsForms[selectedVariantFormIndex].mealsForms.push(\n mealFormToAppend\n )\n })\n ),\n [setDietForm, oneTimeCheckActions]\n )\n\n const removeMealForm = useCallback(\n (variantIndex: number, mealFormIndex: number) =>\n setDietForm(\n produce(draftDietForm => {\n draftDietForm.variantsForms[variantIndex].mealsForms.splice(\n mealFormIndex,\n 1\n )\n })\n ),\n [setDietForm]\n )\n\n const moveMealForm = useCallback(\n (fromIndex: number, toIndex: number) =>\n setDietForm(\n produce(draftDietForm => {\n const { variantsForms, selectedVariantFormIndex } = draftDietForm\n const mealsForms = variantsForms[selectedVariantFormIndex].mealsForms\n\n const mealForm = mealsForms[fromIndex]\n mealsForms.splice(fromIndex, 1)\n mealsForms.splice(toIndex, 0, mealForm)\n })\n ),\n [setDietForm]\n )\n\n const updateMealForm = useCallback(\n (\n variantFormIndex: number,\n mealFormIndex: number,\n partialMealForm: Partial\n ) => {\n setDietForm(\n produce(draftDietForm => {\n const { mealsForms } = draftDietForm.variantsForms[variantFormIndex]\n const mealForm = mealsForms[mealFormIndex]\n mealsForms[mealFormIndex] = {\n ...mealForm,\n ...partialMealForm,\n } as MealForm\n })\n )\n },\n [setDietForm]\n )\n\n const duplicateMealForm = useCallback(\n (variantFormIndex: number, mealFormIndex: number) =>\n setDietForm(\n produce(draftDietForm => {\n const { mealsForms } = draftDietForm.variantsForms[variantFormIndex]\n const mealForm = mealsForms[mealFormIndex]\n const newMealForm = {\n ...duplicate(mealForm),\n name: getDuplicatedName(mealFormIndex, mealsForms),\n }\n appendMealForm(newMealForm)\n })\n ),\n [setDietForm, appendMealForm]\n )\n\n return {\n appendMealForm,\n removeMealForm,\n moveMealForm,\n updateMealForm,\n duplicateMealForm,\n }\n}\n\ntype MealsFormsActions = ReturnType\n\nexport type { MealsFormsActions }\n\nexport default useMealsFormsActions\n"
},
{
"path": "src/notes/EditNotesModal/Content/Form/Header.tsx",
"content": "import { ModalHeader, Text } from '@chakra-ui/react'\n\ntype Props = {\n ownerName: string\n notes?: string\n}\n\nfunction Header({ ownerName, notes }: Props) {\n const titlePrefix = notes ? 'Edit notes of' : 'Add notes to'\n\n return (\n \n {titlePrefix}{' '}\n \n {ownerName}\n \n \n )\n}\n\nexport default Header\n"
},
{
"path": "src/notes/EditNotesModal/Content/Form/index.tsx",
"content": "import {\n ModalFooter,\n ModalBody,\n Button,\n FormControl,\n Textarea,\n FormLabel,\n FormErrorMessage,\n ModalContent,\n ModalCloseButton,\n Collapse,\n Box,\n} from '@chakra-ui/react'\nimport { RefObject } from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { useMergeRefs } from '@chakra-ui/react'\nimport { useFormError } from 'form'\nimport { NotesForm } from 'notes'\nimport { useOneTimeCheckActions } from 'general'\nimport Header from './Header'\n\ntype Props = {\n onClose: () => void\n initialRef: RefObject\n onEditNotes: (notes?: string) => void\n fieldId: string\n ownerName: string\n notes?: string\n textAreaHeight?: string | number\n}\n\nfunction Form({\n ownerName,\n notes,\n onClose,\n initialRef,\n onEditNotes,\n fieldId,\n textAreaHeight,\n}: Props) {\n const { register, handleSubmit } = useFormContext()\n const notesRegister = register('notes')\n const notesInputRef = useMergeRefs(notesRegister.ref, initialRef)\n const oneTimeCheckActions = useOneTimeCheckActions()\n\n const onSubmit = handleSubmit((form: NotesForm) => {\n oneTimeCheckActions.set(`notes-${fieldId}`)\n onEditNotes(form.notes || undefined)\n onClose()\n })\n\n const { errorMessage, isInvalid } = useFormError('name')\n\n return (\n \n )\n}\n\nexport default Form\n"
},
{
"path": "src/notes/EditNotesModal/Content/NotesFormProvider.tsx",
"content": "import { FormProvider, useForm } from 'react-hook-form'\nimport { yupResolver } from '@hookform/resolvers/yup'\nimport { ReactNode } from 'react'\nimport { getNotesForm, NotesForm, notesFormSchema } from 'notes'\n\ntype Props = {\n children: ReactNode\n notes?: string\n}\n\nfunction NotesFormProvider({ children, notes }: Props) {\n const defaultValues = getNotesForm(notes)\n\n const formMethods = useForm({\n defaultValues,\n mode: 'onChange',\n\n resolver: yupResolver(notesFormSchema),\n })\n\n return {children} \n}\n\nexport default NotesFormProvider\n"
},
{
"path": "src/notes/EditNotesModal/Content/index.tsx",
"content": "import { RefObject } from 'react'\nimport NotesFormProvider from './NotesFormProvider'\nimport Form from './Form'\n\ntype Props = {\n onClose: () => void\n initialRef: RefObject\n onEditNotes: (notes?: string) => void\n fieldId: string\n ownerName: string\n notes?: string\n textAreaHeight?: string | number\n}\n\nfunction Content({\n ownerName,\n onClose,\n initialRef,\n onEditNotes,\n fieldId,\n notes,\n textAreaHeight,\n}: Props) {\n return (\n \n \n )\n}\n\nexport default Content\n"
},
{
"path": "src/notes/EditNotesModal/Content/notesForm.ts",
"content": "import { object, string } from 'yup'\n\ntype NotesForm = {\n notes: string\n}\n\nfunction getNotesForm(notes?: string): NotesForm {\n return {\n notes: notes || '',\n }\n}\n\nconst notesFormSchema = object().shape({\n name: string(),\n})\n\nexport { getNotesForm, notesFormSchema }\n\nexport type { NotesForm }\n"
},
{
"path": "src/notes/EditNotesModal/index.tsx",
"content": "import { Modal, ModalOverlay, ModalProps } from '@chakra-ui/react'\nimport { useRef } from 'react'\nimport Content from './Content'\n\ntype Props = {\n onClose: () => void\n isOpen: boolean\n notes?: string\n onEditNotes: (notes?: string) => void\n fieldId: string\n ownerName: string\n textAreaHeight?: string | number\n} & Omit\n\nfunction EditNotesModal({\n onClose,\n isOpen,\n notes,\n onEditNotes,\n fieldId,\n ownerName,\n textAreaHeight,\n ...rest\n}: Props) {\n const initialRef = useRef(null)\n const finalFocusRef = useRef(null)\n\n return (\n \n \n {blob === undefined || rest.isDisabled\n ? label\n : `${label} (${prettyBytes(blob.size)})`}\n \n )\n}\n\nexport default DownloadButton\n"
},
{
"path": "src/persistence/file.ts",
"content": "function createFileInput(accept: string) {\n const input = document.createElement('input')\n input.type = 'file'\n input.multiple = false\n input.accept = accept\n\n return input\n}\n\nfunction selectFile(accept: string) {\n return new Promise(resolve => {\n const input = createFileInput(accept)\n\n input.addEventListener('change', function onChange(this: HTMLInputElement) {\n const { files } = this\n\n if (files && files.length > 0) {\n resolve(files[0])\n }\n })\n input.dispatchEvent(new MouseEvent('click'))\n })\n}\n\nfunction readFile(file: File) {\n return new Promise((resolve, reject) => {\n const fileReader = new FileReader()\n\n fileReader.onload = () => {\n const { result } = fileReader\n resolve(result as string)\n }\n\n fileReader.onerror = () => {\n const { error } = fileReader\n fileReader.abort()\n reject(error)\n }\n\n fileReader.readAsText(file)\n })\n}\n\nexport { selectFile, readFile }\n"
},
{
"path": "src/persistence/fixWhiteSpace.tsx",
"content": "function fixWhiteSpace(text: string) {\n return text.replace(/\\\\n/g, '\\n').replace(/\\r/g, '\\r').replace(/\\t/g, '\\t')\n}\n\nexport default fixWhiteSpace\n"
},
{
"path": "src/persistence/getUntitledFileName.ts",
"content": "type Params = {\n prefix?: string\n}\n\nfunction getUntitledFileName({ prefix = 'Untitled' }: Params = {}) {\n const date = new Date()\n const dateString = date.toISOString()\n const dateStringParts = dateString.split('.')\n\n return `${prefix}-${dateStringParts[0]}`\n}\n\nexport default getUntitledFileName\n"
},
{
"path": "src/persistence/index.ts",
"content": "export { default as useSaveValue } from './useSaveValue'\nexport * from './file'\nexport { default as useBlobUrl } from './useBlobUrl'\nexport { default as DownloadButton } from './DownloadButton'\nexport { default as getUntitledFileName } from './getUntitledFileName'\nexport { default as useFileImportError } from './useImportFileError'\nexport { default as fixWhiteSpace } from './fixWhiteSpace'\n"
},
{
"path": "src/persistence/useBlobUrl.ts",
"content": "import { useEffect, useState } from 'react'\n\ntype Params = {\n blob?: Blob\n}\n\nfunction useBlobUrl({ blob }: Params) {\n const [url, setUrl] = useState()\n\n useEffect(() => {\n if (blob) {\n const blobUrl = URL.createObjectURL(blob)\n setUrl(blobUrl)\n\n return () => {\n URL.revokeObjectURL(blobUrl)\n }\n }\n }, [blob])\n\n return {\n url,\n }\n}\n\nexport default useBlobUrl\n"
},
{
"path": "src/persistence/useImportFileError.ts",
"content": "import { useToast, UseToastOptions } from '@chakra-ui/toast'\n\nconst COMMON_TOAST_OPTIONS: UseToastOptions = {\n isClosable: true,\n position: 'top',\n duration: null,\n status: 'error',\n}\n\ntype OnErrorParams = {\n file: File\n error: any\n}\n\nfunction useFileImportError() {\n const toast = useToast()\n\n function showCouldNotLoadFileToast(file: File) {\n toast({\n ...COMMON_TOAST_OPTIONS,\n title: `File ${file.name} could not be loaded`,\n })\n }\n\n function showCouldNotParseFileToast(file: File) {\n toast({\n ...COMMON_TOAST_OPTIONS,\n title: `File ${file.name} contains invalid data`,\n })\n }\n\n function showErrorToast(file: File, error: any) {\n const { message } = error\n\n toast({\n ...COMMON_TOAST_OPTIONS,\n title: `File ${file.name} could not be imported`,\n description: message,\n })\n }\n\n function onError({ error, file }: OnErrorParams) {\n if (error instanceof DOMException) {\n showCouldNotLoadFileToast(file)\n } else if (error instanceof SyntaxError) {\n showCouldNotParseFileToast(file)\n } else {\n showErrorToast(file, error)\n }\n }\n\n return {\n onError,\n }\n}\n\nexport default useFileImportError\n"
},
{
"path": "src/persistence/useSaveValue.ts",
"content": "import { useEffect } from 'react'\n\nconst TIMEOUT = 150\n\ntype Params = {\n value: any\n key: string\n isEnabled?: boolean\n}\n\nfunction useSaveValue({ value, key, isEnabled = true }: Params) {\n useEffect(() => {\n if (isEnabled) {\n const timeoutId = window.setTimeout(() => {\n try {\n const valueString = JSON.stringify(value)\n localStorage.setItem(key, valueString)\n } catch (error) {\n // Do nothing\n }\n }, TIMEOUT)\n\n return () => {\n window.clearTimeout(timeoutId)\n }\n }\n }, [value, key, isEnabled])\n}\n\nexport default useSaveValue\n"
},
{
"path": "src/portions/PortionsMenuOrDrawer/Drawer/PortionItem.tsx",
"content": "import { Box, BoxProps, Flex, Text } from '@chakra-ui/react'\nimport { Portion, getPortionDescription } from 'portions'\nimport { Check } from 'react-feather'\n\ntype Props = {\n portion: Portion\n isSelected: boolean\n} & BoxProps\n\nfunction PortionItem({ portion, isSelected, ...rest }: Props) {\n const { unit } = portion\n\n return (\n \n \n \n {unit}{' '}\n \n {getPortionDescription(portion)}\n \n \n {isSelected && (\n \n \n )}\n \n \n )\n}\n\nexport default PortionItem\n"
},
{
"path": "src/portions/PortionsMenuOrDrawer/Drawer/index.tsx",
"content": "import {\n Drawer as DrawerBase,\n DrawerBody,\n DrawerHeader,\n DrawerOverlay,\n DrawerContent,\n DrawerCloseButton,\n} from '@chakra-ui/react'\nimport { Portion } from 'portions'\nimport PortionItem from './PortionItem'\n\ntype Props = {\n isOpen: boolean\n onClose: () => void\n onChange: (portion: Portion) => void\n selectedPortionId: string\n portions: Portion[]\n}\n\nfunction Drawer({\n portions,\n isOpen,\n onClose,\n onChange,\n selectedPortionId,\n}: Props) {\n return (\n \n \n Portions \n\n \n {portions.map(portion => {\n const { id } = portion\n const isSelected = id === selectedPortionId\n\n return (\n {\n onClose()\n onChange(portion)\n }}\n />\n )\n })}\n \n \n \n )\n}\n\nexport default Drawer\n"
},
{
"path": "src/portions/PortionsMenuOrDrawer/Menu.tsx",
"content": "import { chakra, Text } from '@chakra-ui/react'\nimport { Check } from 'react-feather'\nimport { Menu as MenuBase, MenuItem } from 'general'\nimport Trigger from './Trigger'\nimport { getPortionDescription, Portion } from 'portions'\n\nconst CheckStyled = chakra(Check)\n\ntype Props = {\n selectedPortionId: string\n onChange: (portion: Portion) => void\n portions: Portion[]\n}\n\nfunction Menu({ portions, onChange, selectedPortionId }: Props) {\n return (\n onChange(portion)}>\n \n {unit}{' '}\n \n {getPortionDescription(portion)}\n \n \n \n )\n })}\n \n )\n}\n\nexport default Menu\n"
},
{
"path": "src/portions/PortionsMenuOrDrawer/Trigger.tsx",
"content": "import { ForwardedRef, forwardRef } from 'react'\nimport { Button } from '@chakra-ui/react'\nimport { usePortions } from 'portions'\n\ntype Props = {\n selectedPortionId: string\n forwardedRef?: ForwardedRef\n onClick?: () => void\n}\n\nfunction Trigger({ forwardedRef, selectedPortionId, ...rest }: Props) {\n const { portionsById } = usePortions()\n const portion = portionsById[selectedPortionId]\n\n return (\n \n {portion.unit}\n \n )\n}\nexport default forwardRef((props, ref) => (\n \n portions: Portion[]\n} & SelectProps\n\nfunction PortionsSelect({ children, forwardedRef, portions, ...rest }: Props) {\n return (\n \n {children}\n {portions.map(({ id, singular, millilitersPerAmount }) => (\n \n {singular}\n {id !== 'milliliters' && ` (${millilitersPerAmount} ml)`}\n \n ))}\n \n )\n}\n\nexport default forwardRef((props, ref) => (\n \n) {\n const portion = portionsById[portionId]\n const factor = getToGramsConversionFactor(portion, food, portionsById)\n return amountInGrams * factor\n}\n\nexport default getAmountFromPortionToGrams\n"
},
{
"path": "src/portions/getIngredientPortionDescription.ts",
"content": "import { Food, FoodId } from 'foods'\nimport { IngredientForm } from 'ingredients'\nimport amountAsNumber from 'stats/amountAsNumber'\nimport { Portion } from './types'\nimport getAmountFromPortionToGrams from './getAmountFromPortionsToGrams'\n\nconst UNITS_WITH_DISTANCE = ['oz', 'tsp', 'tbsp', 'fl oz', 'cup']\n\nfunction getIngredientPortionDescription(\n ingredientForm: IngredientForm,\n foodsById: Record,\n portionsById: Record\n) {\n const { portionId, foodId, amount } = ingredientForm\n const portion = portionsById[portionId]\n\n const distance = UNITS_WITH_DISTANCE.includes(portion.unit) ? ' ' : ''\n const mainPart = `${amount || 0}${distance}${portion.unit}`\n const { gramsPerAmount, millilitersPerAmount } = portion\n\n if (gramsPerAmount !== 1 || millilitersPerAmount) {\n const weightInGrams = Math.round(\n getAmountFromPortionToGrams(\n amountAsNumber(amount),\n portion.id,\n foodsById[foodId],\n portionsById\n )\n )\n\n return `${mainPart} (${weightInGrams}g)`\n }\n\n return mainPart\n}\n\nexport default getIngredientPortionDescription\n"
},
{
"path": "src/portions/getPortionDescription.ts",
"content": "import { Portion } from 'portions'\n\nfunction getPortionDescription(portion: Portion) {\n const { id, millilitersPerAmount } = portion\n\n if (millilitersPerAmount && id !== 'milliliters') {\n return `(${millilitersPerAmount} ml)`\n }\n\n return ''\n}\n\nexport default getPortionDescription\n"
},
{
"path": "src/portions/getToGramsConversionFactor.ts",
"content": "import { Food } from 'foods'\nimport { Portion } from 'portions'\n\nfunction getToGramsConversionFactor(\n portion: Portion,\n food: Food,\n portionsById: Record\n): number {\n const { gramsPerAmount, millilitersPerAmount } = portion\n\n if (gramsPerAmount) {\n return gramsPerAmount\n }\n\n if (millilitersPerAmount && food.volume) {\n const { portionId, weightInGrams } = food.volume\n const portion = portionsById[portionId]\n\n if (portion.millilitersPerAmount) {\n const gramsPerMilliliter = weightInGrams / portion.millilitersPerAmount\n\n return millilitersPerAmount * gramsPerMilliliter\n }\n }\n\n throw new Error()\n}\n\nexport default getToGramsConversionFactor\n"
},
{
"path": "src/portions/index.ts",
"content": "export * from './types'\nexport * from './usePortionsStore'\nexport { default as PortionsMenuOrDrawer } from './PortionsMenuOrDrawer'\nexport { default as formatAmount } from './formatAmount'\nexport { default as PortionsSelect } from './PortionsSelect'\nexport { default as useGetAmount } from './useGetAmount'\nexport { default as getPortionDescription } from './getPortionDescription'\nexport { default as getIngredientPortionDescription } from './getIngredientPortionDescription'\n"
},
{
"path": "src/portions/types.ts",
"content": "type Portion = {\n id: string\n unit: string\n singular: string\n description?: string\n gramsPerAmount?: number\n millilitersPerAmount?: number\n}\n\nexport type { Portion }\n"
},
{
"path": "src/portions/useGetAmount.ts",
"content": "import { Food } from 'foods'\nimport { useCallbacksMemo } from 'general'\nimport { usePortions } from 'portions'\nimport { useCallback } from 'react'\nimport useGetToGramsConversionFactor from './useGetToGramsConversionFactor'\nimport getAmountFromPortionToGramsInternal from './getAmountFromPortionsToGrams'\n\nfunction useGetAmount() {\n const { portionsById } = usePortions()\n const getToGramsConversionFactor = useGetToGramsConversionFactor()\n\n const getAmountFromPortionToGrams = useCallback(\n (amountInGrams: number, portionId: string, food: Food) =>\n getAmountFromPortionToGramsInternal(\n amountInGrams,\n portionId,\n food,\n portionsById\n ),\n [portionsById]\n )\n\n const getAmountFromGramsToPortion = useCallback(\n (amountInPortion: number, portionId: string, food: Food) => {\n const portion = portionsById[portionId]\n const factor = getToGramsConversionFactor(portion, food)\n return amountInPortion / factor\n },\n [portionsById, getToGramsConversionFactor]\n )\n\n const getAmountFromPortionToPortion = useCallback(\n (\n amount: number,\n fromPortionId: string,\n toPortionId: string,\n food: Food\n ) => {\n const amountInGrams = getAmountFromPortionToGrams(\n amount,\n fromPortionId,\n food\n )\n return getAmountFromGramsToPortion(amountInGrams, toPortionId, food)\n },\n [getAmountFromPortionToGrams, getAmountFromGramsToPortion]\n )\n\n const callbacks = useCallbacksMemo({\n getAmountFromPortionToPortion,\n getAmountFromPortionToGrams,\n getAmountFromGramsToPortion,\n })\n\n return callbacks\n}\n\nexport default useGetAmount\n"
},
{
"path": "src/portions/useGetToGramsConversionFactor.ts",
"content": "import { Food } from 'foods'\nimport { Portion, usePortions } from 'portions'\nimport { useCallback } from 'react'\nimport getToGramsConversionFactor from './getToGramsConversionFactor'\n\nfunction useGetToGramsConversionFactor() {\n const { portionsById } = usePortions()\n\n const getToGramsConversionFactorCallback = useCallback(\n (portion: Portion, food: Food) =>\n getToGramsConversionFactor(portion, food, portionsById),\n [portionsById]\n )\n\n return getToGramsConversionFactorCallback\n}\n\nexport default useGetToGramsConversionFactor\n"
},
{
"path": "src/portions/usePortionsStore.ts",
"content": "import { makeStoreProvider, useCallbacksMemo } from 'general'\nimport { useMemo, useState } from 'react'\nimport { Portion } from './types'\nimport defaultPortions from './defaultPortions'\n\ntype PortionsMap = Record\n\nfunction usePortionsStore() {\n const [portionsById, setPortionsById] = useState(() => {\n const initialMap: PortionsMap = {}\n\n for (const portion of defaultPortions) {\n initialMap[portion.id] = portion\n }\n\n return initialMap\n })\n\n const allPortions = useMemo(() => Object.values(portionsById), [portionsById])\n\n const weightBasedPortions = useMemo(\n () =>\n allPortions.filter(({ gramsPerAmount }) => gramsPerAmount !== undefined),\n [allPortions]\n )\n\n const volumeBasedPortions = useMemo(\n () =>\n allPortions.filter(\n ({ millilitersPerAmount }) => millilitersPerAmount !== undefined\n ),\n [allPortions]\n )\n\n const state = useCallbacksMemo({\n portionsById,\n allPortions,\n volumeBasedPortions,\n weightBasedPortions,\n })\n\n return [state, setPortionsById] as const\n}\n\nconst [\n PortionsStoreProvider,\n usePortions,\n usePortionsActions,\n] = makeStoreProvider(usePortionsStore)\n\nexport { PortionsStoreProvider, usePortions, usePortionsActions }\n\nexport default usePortionsStore\n"
},
{
"path": "src/react-app-env.d.ts",
"content": "/// ) {\n const input = event.target as HTMLInputElement\n\n if (document.activeElement !== input) {\n event.preventDefault()\n const length = input.value.length\n input.focus()\n\n input.type = 'text'\n input.setSelectionRange(length, length)\n input.type = 'number'\n }\n }\n\n function onWheel(event: WheelEvent) {\n const target = event.target as HTMLInputElement\n target.blur()\n }\n\n const numProps = acceptsFractions\n ? {}\n : {\n type: 'number',\n pattern: '\\\\d*',\n onMouseDown,\n onWheel,\n }\n\n return (\n \n {\n const { value } = event.target\n const valueAsNumber = amountAsNumber(value)\n\n if (valueAsNumber >= 0 && valueAsNumber < MAX_AMOUNT_EXCLUDING) {\n rest.onChange && rest.onChange(event)\n }\n }}\n />\n\n {children}\n \n )\n}\n\nexport default AmountInput\n"
},
{
"path": "src/stats/EnergyStat.tsx",
"content": "import Stat, { StatProps } from './Stat'\nimport { ArrowUpCircle, ArrowDownCircle } from 'react-feather'\nimport { useSameOrPreviousValue } from 'general'\nimport StatValueDetail from './StatValueDetail'\n\ntype Props = {\n energy: number\n energyDiff: number\n} & StatProps\n\nfunction EnergyStat({ energy, energyDiff, ...rest }: Props) {\n const energyValueDetail = `${Math.abs(energyDiff)}kcal`\n const previousOrSameEnergyValueDetail = useSameOrPreviousValue(\n energyValueDetail\n )\n\n return (\n 0 ? (\n \n {isForDiet(variant) && (\n \n {label}\n \n )}\n \n {value}\n {isForEnergy(variant) ? 'kcal' : unit} \n \n\n {valueDetail && {valueDetail} }\n \n )\n}\n\nconst styles = StyleSheet.create({\n root: {\n textAlign: 'right',\n flex: 1,\n },\n label: {\n fontSize: 10,\n marginBottom: 2,\n },\n unit: {\n fontSize: 12,\n },\n value: {\n fontSize: 14,\n },\n valueDetail: {\n marginTop: '2px',\n fontSize: 12,\n },\n line: {\n position: 'absolute',\n top: '2px',\n bottom: '2px',\n right: '-10px',\n width: '1px',\n },\n})\n\nexport default PdfStat\n"
},
{
"path": "src/stats/PdfStatsLayout.tsx",
"content": "import { View, StyleSheet } from '@react-pdf/renderer'\nimport { ReactElement } from 'react'\n\ntype Props = {\n nameElement: ReactElement\n\n energyElement: ReactElement\n proteinElement: ReactElement\n carbsElement: ReactElement\n fatElement: ReactElement\n}\n\nfunction PdfStatsLayout({\n nameElement,\n\n energyElement,\n proteinElement,\n carbsElement,\n fatElement,\n}: Props) {\n return (\n \n {nameElement} \n {energyElement} \n {proteinElement} \n {carbsElement} \n {fatElement} \n \n )\n}\n\nconst NAME_WIDTH = '50%'\nconst MACROS_COUNT = 4\nconst MACRO_WIDTH = `${(100 - parseInt(NAME_WIDTH, 10)) / MACROS_COUNT}%`\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n },\n name: {\n width: NAME_WIDTH,\n justifyContent: 'center',\n },\n macro: {\n width: MACRO_WIDTH,\n marginRight: 12,\n },\n})\n\nexport default PdfStatsLayout\n"
},
{
"path": "src/stats/Stat.tsx",
"content": "import { Text, Box, FlexProps } from '@chakra-ui/react'\nimport { cloneElement, ReactElement } from 'react'\nimport { RightAligned } from 'layout'\nimport {\n isForDiet,\n isForEnergy,\n StatVariant,\n getValueFontWeight,\n getValueTextColor,\n getLabelColor,\n} from './statsVariants'\n\ntype Props = {\n value?: number\n\n label?: string\n type?: StatVariant\n valueDetailElement?: ReactElement\n isLarge?: boolean\n isDisabled?: boolean\n} & FlexProps\n\nfunction Stat({\n value,\n label,\n type = 'ingredient',\n isLarge = false,\n valueDetailElement,\n isDisabled = false,\n ...rest\n}: Props) {\n return (\n \n {isForDiet(type) && (\n \n {label}\n \n )}\n\n {value !== undefined && (\n \n {value}\n \n {isForEnergy(type) ? 'kcal' : 'g'}\n \n \n )}\n\n {valueDetailElement && cloneElement(valueDetailElement, { isLarge })}\n \n )\n}\n\nexport type { Props as StatProps }\n\nexport default Stat\n"
},
{
"path": "src/stats/StatValueDetail.tsx",
"content": "import { HStack, Text } from '@chakra-ui/react'\nimport { Tooltip } from 'general'\nimport { ReactNode } from 'react'\n\ntype Props = {\n label: string\n tooltipLabel?: string\n leftIcon?: ReactNode\n isLarge?: boolean\n}\n\nfunction StatValueDetail({\n label,\n tooltipLabel,\n leftIcon,\n isLarge = false,\n}: Props) {\n return (\n \n {leftIcon}\n\n \n \n {label}\n \n \n \n )\n}\n\nexport default StatValueDetail\n"
},
{
"path": "src/stats/StatsFormFields/MacrosFormFields.tsx",
"content": "import { VStack } from '@chakra-ui/react'\nimport StatFormField from './StatFormField'\nimport useGetDailyValuePercent from './useGetDailyValuePercent'\n\ntype Props = {\n canEdit: boolean\n showsEnergyPercentFromFats?: boolean\n}\n\nfunction MacrosFormFields({\n canEdit,\n showsEnergyPercentFromFats = false,\n}: Props) {\n const getDailyValuePercent = useGetDailyValuePercent()\n\n return (\n \n \n )\n}\n\nexport default MacrosFormFields\n"
},
{
"path": "src/stats/StatsFormFields/ReavealButton.tsx",
"content": "import { Button, ButtonProps, chakra } from '@chakra-ui/react'\nimport { ChevronDown, ChevronUp } from 'react-feather'\n\nconst ChevronDownStyled = chakra(ChevronDown)\nconst ChevronUpStyled = chakra(ChevronUp)\n\ntype Props = {\n isContentShown: boolean\n showContentLabel: string\n hideContentLabel: string\n} & ButtonProps\n\nfunction RevealButton({\n isContentShown,\n showContentLabel,\n hideContentLabel,\n ...rest\n}: Props) {\n return (\n \n {isContentShown ? (\n \n )\n}\n\nexport default RevealButton\n"
},
{
"path": "src/stats/StatsFormFields/StatFormField/ReadOnlyInput.tsx",
"content": "import { Text } from '@chakra-ui/react'\nimport { Controller } from 'react-hook-form'\nimport { foodCategories } from 'foods-categories'\nimport { InputType } from './types'\n\ntype Props = {\n name: string\n inputType: InputType\n nutritionValueUnit: string\n isBold?: boolean\n}\n\nfunction formatNutritionValue(value: string) {\n const number = Number(value)\n\n if (Number.isInteger(number)) {\n return value\n }\n\n return number.toFixed(2)\n}\n\nfunction ReadOnlyInput({\n name,\n inputType,\n nutritionValueUnit,\n isBold = false,\n}: Props) {\n return (\n {\n let { value } = field\n\n if (inputType === 'foodCategory') {\n const foodCategory = foodCategories.find(({ id }) => id === value)\n if (foodCategory) {\n value = foodCategory.name\n }\n }\n\n return (\n \n {inputType === 'nutritionValue'\n ? `${formatNutritionValue(value)}${nutritionValueUnit}`\n : value}\n \n )\n }}\n />\n )\n}\n\nexport default ReadOnlyInput\n"
},
{
"path": "src/stats/StatsFormFields/StatFormField/index.tsx",
"content": "import {\n FormControl,\n Flex,\n FormLabel,\n Text,\n VStack,\n Divider,\n FormErrorMessage,\n FormControlProps,\n Box,\n Collapse,\n DividerProps,\n FormLabelProps,\n} from '@chakra-ui/react'\nimport { useFormError } from 'form'\nimport { ReactNode, RefObject } from 'react'\nimport useGetInputElement, { InputType } from './useGetInputElement'\n\ntype Props = {\n name: string\n label?: string\n labelElement?: ReactNode\n labelDetail?: string\n inputType: InputType\n nutritionValueUnit?: string\n isIdented?: boolean\n textInputRef?: RefObject\n isReadOnly?: boolean\n isEmphasized?: Boolean\n isCaption?: boolean\n children?: ReactNode\n isValueBold?: boolean\n dividerProps?: DividerProps\n hasDivider?: boolean\n dailyValuePercent?: number\n formLabelProps?: FormLabelProps\n} & FormControlProps\n\nfunction StatFormField(props: Props) {\n const {\n name,\n label,\n inputType,\n isIdented = false,\n nutritionValueUnit = 'g',\n textInputRef,\n isReadOnly = false,\n isEmphasized = false,\n isValueBold = false,\n isCaption = false,\n isRequired,\n children,\n labelDetail,\n dividerProps = {},\n hasDivider = true,\n dailyValuePercent,\n labelElement,\n formLabelProps,\n ...rest\n } = props\n const { errorMessage, isInvalid } = useFormError(name)\n\n const inputElement = useGetInputElement({\n isInvalid,\n name,\n inputType,\n textInputRef,\n isReadOnly,\n nutritionValueUnit,\n isBold: isValueBold,\n })\n\n const labelDetailElement = labelDetail ? (\n \n {labelDetail}\n \n ) : null\n\n const isValueNextToLabel = isReadOnly && !(isCaption || isEmphasized)\n\n return (\n \n \n {hasDivider && \n \n \n {label || labelElement}\n {isReadOnly && labelDetailElement}\n \n {!isReadOnly && labelDetailElement}\n {isValueNextToLabel && {inputElement} }\n \n\n \n {!isValueNextToLabel && inputElement}\n\n {dailyValuePercent !== undefined && isValueNextToLabel && (\n {`${dailyValuePercent}%`} \n )}\n\n {!isReadOnly && inputType === 'nutritionValue' && (\n \n {nutritionValueUnit} \n \n )}\n \n \n \n\n \n \n {errorMessage} \n \n \n\n {children}\n \n )\n}\n\nexport type { Props as StatFormFieldProps }\n\nexport default StatFormField\n"
},
{
"path": "src/stats/StatsFormFields/StatFormField/types.ts",
"content": "type InputType = 'text' | 'nutritionValue' | 'foodCategory'\n\nexport type { InputType }\n"
},
{
"path": "src/stats/StatsFormFields/StatFormField/useGetInputElement.tsx",
"content": "import { Input, useMergeRefs } from '@chakra-ui/react'\nimport { cloneElement, ReactElement, RefObject } from 'react'\nimport { useFormContext, Controller } from 'react-hook-form'\nimport { FoodCategoriesSelect } from 'foods-categories'\nimport { InputType } from './types'\nimport ReadOnlyInput from './ReadOnlyInput'\nimport { AmountInput } from 'stats'\n\ntype Params = {\n name: string\n inputType: InputType\n isInvalid: boolean\n textInputRef?: RefObject\n nutritionValueUnit: string\n isReadOnly: boolean\n isBold?: boolean\n}\n\nfunction useGetInputElement({\n inputType,\n name,\n isInvalid,\n nutritionValueUnit,\n isReadOnly,\n textInputRef,\n isBold = false,\n}: Params) {\n const { register } = useFormContext()\n let result: ReactElement | null = null\n const textInputRegister = register(name)\n const finalTextInputRef = useMergeRefs(textInputRegister.ref, textInputRef)\n\n if (isReadOnly) {\n result = (\n \n \n Select category\n \n \n )\n } else if (inputType === 'nutritionValue') {\n result = (\n (\n \n {!canEdit && (\n <>\n \n \n % Daily Value *\n \n \n \n )}\n\n \n \n * The % Daily Value (DV) tells you how much a nutrient in a serving\n of food contributes to a daily diet. 2000 calories a day is used for\n general nutrition advise.{' '}\n \n \n )}\n \n )\n}\n\nexport { default as StatFormField } from './StatFormField'\n\nexport default StatsFormFields\n"
},
{
"path": "src/stats/StatsFormFields/useGetDailyValuePercent.ts",
"content": "import { getDailyValuePercent, NutritionData } from 'stats'\nimport useGetValue from './useGetValue'\n\nfunction useGetDailyValuePercent() {\n const getValue = useGetValue()\n\n function get(name: keyof NutritionData) {\n const value = getValue(name)\n return getDailyValuePercent(name, value)\n }\n\n return get\n}\n\nexport default useGetDailyValuePercent\n"
},
{
"path": "src/stats/StatsFormFields/useGetValue.ts",
"content": "import { FoodForm } from 'foods'\nimport { useFormContext } from 'react-hook-form'\nimport { NutritionData } from 'stats'\n\nfunction useGetValue() {\n const { getValues } = useFormContext()\n const values = getValues()\n\n function get(name: keyof NutritionData) {\n const valueAsNumber = Number(values[name])\n return valueAsNumber\n }\n\n return get\n}\n\nexport default useGetValue\n"
},
{
"path": "src/stats/StatsLayout.tsx",
"content": "import { Grid, GridItem, GridProps } from '@chakra-ui/react'\nimport { useScreenSize, ScreenSize } from 'general'\nimport { ForwardedRef, ReactElement, forwardRef } from 'react'\n\ntype Props = {\n nameElement: ReactElement\n amountElement?: ReactElement\n energyElement: ReactElement\n proteinElement: ReactElement\n carbsElement: ReactElement\n fatElement: ReactElement\n menuElement: ReactElement\n forwardedRef?: ForwardedRef\n prefersAmount?: boolean\n} & GridProps\n\nfunction StatsLayout({\n nameElement,\n amountElement,\n energyElement,\n proteinElement,\n carbsElement,\n fatElement,\n menuElement,\n forwardedRef,\n prefersAmount = false,\n ...rest\n}: Props) {\n const screenSize = useScreenSize()\n\n if (screenSize >= ScreenSize.Medium) {\n return (\n \n {amountElement && {amountElement} }\n\n {nameElement} \n {energyElement} \n {proteinElement} \n {carbsElement} \n {fatElement} \n {menuElement} \n \n )\n }\n\n if (screenSize === 1) {\n return (\n \n {amountElement && {amountElement} }\n\n {nameElement} \n {energyElement} \n {menuElement} \n \n )\n }\n\n return (\n \n {prefersAmount && {amountElement} }\n {nameElement} \n {!prefersAmount && {energyElement} }\n {menuElement} \n \n )\n}\n\nexport default forwardRef((props, ref) => (\n >\n\n// From: https://www.fda.gov/food/new-nutrition-facts-label/daily-value-new-nutrition-and-supplement-facts-labels\nconst DAILY_VALUES_RECORD: DailyValuesRecord = {\n calcium: 1300,\n fiber: 28,\n magnesium: 420,\n manganese: 2.3,\n phosphorus: 1250,\n potassium: 4700,\n vitaminA: 900,\n vitaminB1: 1.5,\n vitaminB2: 1.3,\n vitaminB5: 5,\n vitaminB6: 1.7,\n vitaminB12: 2.4,\n vitaminC: 90,\n vitaminD: 20,\n vitaminE: 15,\n vitaminK: 120,\n copper: 0.9,\n selenium: 55,\n sodium: 2300,\n cholesterol: 300,\n iron: 18,\n saturatedFat: 20,\n choline: 550,\n}\n\nfunction getDailyValuePercent(name: keyof NutritionData, value: number) {\n const dailyValue = DAILY_VALUES_RECORD[name]\n\n if (dailyValue === undefined) {\n return undefined\n }\n\n return Math.round((100 * value) / dailyValue)\n}\n\nexport default getDailyValuePercent\n"
},
{
"path": "src/stats/calculations/getEnergiesEstimates.ts",
"content": "import { Stats } from 'stats/types'\n\nconst CALORIES_PER_GRAM_PROTEIN = 4\nconst CALORIES_PER_GRAM_CARBS = 4\nconst CALORIES_PER_GRAM_FAT = 9\n\nfunction getProteinEnergyEstimate(gramsProtein: number) {\n return gramsProtein * CALORIES_PER_GRAM_PROTEIN\n}\n\nfunction getCarbsEnergyEstimate(gramsCarbs: number) {\n return gramsCarbs * CALORIES_PER_GRAM_CARBS\n}\n\nfunction getFatEnergyEstimate(gramsFat: number) {\n return gramsFat * CALORIES_PER_GRAM_FAT\n}\n\nfunction getStatsEnergiesEstimates(stats: Stats) {\n const { protein, carbs, fat } = stats\n\n const proteinEnergyEstimate = getProteinEnergyEstimate(protein)\n const carbsEnergyEstimate = getCarbsEnergyEstimate(carbs)\n const fatEnergyEstimate = getFatEnergyEstimate(fat)\n\n const energyEstimate =\n proteinEnergyEstimate + carbsEnergyEstimate + fatEnergyEstimate\n\n return {\n energyEstimate,\n proteinEnergyEstimate,\n carbsEnergyEstimate,\n fatEnergyEstimate,\n }\n}\n\nexport {\n getProteinEnergyEstimate,\n getCarbsEnergyEstimate,\n getFatEnergyEstimate,\n getStatsEnergiesEstimates,\n}\n"
},
{
"path": "src/stats/calculations/getMacrosPercents.ts",
"content": "import { Stats } from '../types'\nimport { getStatsEnergiesEstimates } from './getEnergiesEstimates'\n\ntype MacrosPercents = {\n proteinPercent: number\n carbsPercent: number\n fatPercent: number\n}\n\nfunction getMacroEnergyPercent(energyFromMacro: number, energyTotal: number) {\n return energyFromMacro === 0 ? 0 : (energyFromMacro / energyTotal) * 100\n}\n\nfunction getMacrosPercents(stats: Stats): MacrosPercents {\n const {\n energyEstimate,\n proteinEnergyEstimate,\n carbsEnergyEstimate,\n fatEnergyEstimate,\n } = getStatsEnergiesEstimates(stats)\n\n return {\n proteinPercent: getMacroEnergyPercent(\n proteinEnergyEstimate,\n energyEstimate\n ),\n carbsPercent: getMacroEnergyPercent(carbsEnergyEstimate, energyEstimate),\n fatPercent: getMacroEnergyPercent(fatEnergyEstimate, energyEstimate),\n }\n}\n\nexport type { MacrosPercents }\n\nexport { getMacroEnergyPercent }\n\nexport default getMacrosPercents\n"
},
{
"path": "src/stats/calculations/getStatsTree.ts",
"content": "import { sumStats, avgStats } from './aggregateStats'\nimport { Stats } from '../types'\n\ntype StatsTree = {\n id: string\n stats: Stats\n avg?: Stats\n subtrees: StatsTree[]\n}\n\ntype Params = {\n id: string\n subtrees: StatsTree[]\n calculateAvg?: boolean\n}\n\nfunction getStatsTree({ id, subtrees, calculateAvg = false }: Params) {\n const subtreesStats = subtrees.map(({ stats }) => stats)\n\n const result: StatsTree = {\n id,\n stats: sumStats(subtreesStats),\n subtrees,\n }\n\n if (calculateAvg) {\n result.avg = avgStats(subtreesStats)\n }\n\n return result\n}\n\nexport type { StatsTree }\n\nexport default getStatsTree\n"
},
{
"path": "src/stats/calculations/index.ts",
"content": "export { default as roundMacrosPercents } from './roundMacrosPercents'\nexport { default as getMacrosPercents } from './getMacrosPercents'\nexport * from './getMacrosPercents'\nexport * from './getStatsTree'\nexport { default as getStatsTree } from './getStatsTree'\nexport * from './aggregateStats'\nexport * from './getEnergiesEstimates'\nexport { default as getDailyValuePercent } from './getDailyValuePercent'\n"
},
{
"path": "src/stats/calculations/roundMacrosPercents.ts",
"content": "import { MacrosPercents } from './getMacrosPercents'\n\ntype RoundedMacroPercent = {\n value: number\n type: 'protein' | 'fat' | 'carbs'\n}\n\nfunction getDiff(macroPercents: MacrosPercents) {\n return (\n 100 -\n Object.values(macroPercents)\n .map(percent => Math.floor(percent))\n .reduce((sumSoFar, percent) => percent + sumSoFar, 0)\n )\n}\n\nfunction getRoundedMacroPercents(\n macroPercents: MacrosPercents,\n diff: number\n): RoundedMacroPercent[] {\n const { proteinPercent, carbsPercent, fatPercent } = macroPercents\n\n const initialRoundedMacroPercents: RoundedMacroPercent[] = [\n { value: proteinPercent, type: 'protein' },\n { value: carbsPercent, type: 'carbs' },\n { value: fatPercent, type: 'fat' },\n ]\n\n return initialRoundedMacroPercents\n .sort(({ value }) => value - Math.floor(value))\n .map(({ value, type }, index) =>\n index < diff\n ? {\n type,\n value: Math.floor(value) + 1,\n }\n : {\n type,\n value: Math.floor(value),\n }\n )\n}\n\nfunction getMacrosPercents(\n roundedMacroPercents: RoundedMacroPercent[]\n): MacrosPercents {\n let roundedProteinPercent = 0\n let roundedCarbsPercent = 0\n let roundedFatPercent = 0\n\n for (const { type, value } of roundedMacroPercents) {\n if (type === 'protein') {\n roundedProteinPercent = value\n } else if (type === 'carbs') {\n roundedCarbsPercent = value\n } else {\n roundedFatPercent = value\n }\n }\n\n return {\n proteinPercent: roundedProteinPercent,\n carbsPercent: roundedCarbsPercent,\n fatPercent: roundedFatPercent,\n }\n}\n\nfunction roundMacrosPercents(macroPercents: MacrosPercents): MacrosPercents {\n const { proteinPercent, carbsPercent, fatPercent } = macroPercents\n\n if (proteinPercent === 0 && carbsPercent === 0 && fatPercent === 0) {\n return macroPercents\n }\n\n const diff = getDiff(macroPercents)\n const roundedMacroPercents = getRoundedMacroPercents(macroPercents, diff)\n\n return getMacrosPercents(roundedMacroPercents)\n}\n\nexport default roundMacrosPercents\n"
},
{
"path": "src/stats/getUnit.ts",
"content": "import { NutritionData } from 'stats'\n\ntype Unit = 'mcg' | 'mg' | 'g'\ntype UnitsRecord = Record\n\nconst unitsRecord: UnitsRecord = {\n energy: 'g',\n\n fat: 'g',\n saturatedFat: 'g',\n monounsaturatedFat: 'g',\n polyunsaturatedFat: 'g',\n\n carbs: 'g',\n sugar: 'g',\n fiber: 'g',\n\n protein: 'g',\n\n sodium: 'mg',\n cholesterol: 'mg',\n\n vitaminA: 'mcg',\n vitaminB1: 'mg',\n vitaminB2: 'mg',\n vitaminB3: 'mg',\n vitaminB5: 'mg',\n vitaminB6: 'mg',\n vitaminB9: 'mcg',\n vitaminB12: 'mcg',\n vitaminC: 'mg',\n vitaminD: 'mcg',\n vitaminE: 'mg',\n vitaminK: 'mcg',\n\n magnesium: 'mg',\n calcium: 'mg',\n phosphorus: 'mg',\n potassium: 'mg',\n iron: 'mg',\n selenium: 'mcg',\n zinc: 'mcg',\n manganese: 'mg',\n copper: 'mg',\n choline: 'g',\n}\n\nfunction getUnit(name: keyof NutritionData) {\n const unit = unitsRecord[name]\n\n return unit\n}\n\nexport default getUnit\n"
},
{
"path": "src/stats/index.ts",
"content": "export * from './types'\nexport * from './useMealsStatsStore'\nexport { default as useUpdateMealStats } from './useUpdateMealStats'\nexport { default as useVariantStats } from './useVariantStats'\nexport * from './calculations'\nexport { default as Stat } from './Stat'\nexport { default as StatsLayout } from './StatsLayout'\nexport { default as objectFromNutritionDataKeys } from './objectFromNutritionDataKeys'\nexport * from './objectFromNutritionDataKeys'\nexport { default as StatsFormFields } from './StatsFormFields'\nexport * from './StatsFormFields'\nexport { default as AmountInput } from './AmountInput'\nexport { default as EnergyStat } from './EnergyStat'\nexport { default as getUnit } from './getUnit'\nexport { default as StatValueDetail } from './StatValueDetail'\n"
},
{
"path": "src/stats/objectFromNutritionDataKeys.ts",
"content": "import { NutritionData } from './types'\n\ntype MappedNutritionData = { [k in keyof NutritionData]: T }\n\nconst NUTRITION_STATS_KEYS: (keyof NutritionData)[] = [\n 'protein',\n 'carbs',\n 'fat',\n 'saturatedFat',\n 'monounsaturatedFat',\n 'polyunsaturatedFat',\n 'energy',\n 'sugar',\n 'fiber',\n 'sodium',\n 'cholesterol',\n\n 'vitaminA',\n 'vitaminD',\n 'vitaminE',\n 'vitaminK',\n 'vitaminB1',\n 'vitaminB12',\n 'vitaminB2',\n 'vitaminB5',\n 'vitaminB6',\n 'vitaminB3',\n 'vitaminB9',\n 'vitaminC',\n 'vitaminD',\n 'vitaminE',\n 'vitaminK',\n\n 'magnesium',\n 'calcium',\n 'phosphorus',\n 'potassium',\n 'iron',\n 'selenium',\n 'zinc',\n 'manganese',\n 'copper',\n 'choline',\n]\n\nfunction objectFromNutritionDataKeys(\n f: (key: keyof NutritionData) => T\n): MappedNutritionData {\n const entries = NUTRITION_STATS_KEYS.map(key => {\n return [key, f(key)]\n })\n\n return Object.fromEntries(entries)\n}\n\nexport { NUTRITION_STATS_KEYS }\n\nexport type { MappedNutritionData }\n\nexport default objectFromNutritionDataKeys\n"
},
{
"path": "src/stats/statsVariants.ts",
"content": "type StatVariant =\n | 'ingredient'\n | 'ingredientAmount'\n | 'ingredientEnergy'\n | 'meal'\n | 'mealEnergy'\n | 'diet'\n | 'dietEnergy'\n\nfunction isForDiet(statVariant: StatVariant) {\n return statVariant.startsWith('diet')\n}\n\nfunction isForEnergy(statVariant: StatVariant) {\n return statVariant.endsWith('Energy')\n}\n\nfunction isForIngredient(statVaraint: StatVariant) {\n return statVaraint.startsWith('ingredient')\n}\n\nfunction isForMeal(statVaraint: StatVariant) {\n return statVaraint.startsWith('meal')\n}\n\nfunction getValueTextColor(statVariant: StatVariant) {\n if (isForIngredient(statVariant)) {\n return 'gray.500'\n }\n\n return 'gray.800'\n}\n\nfunction getValueFontWeight(statVariant: StatVariant) {\n if (statVariant === 'dietEnergy') {\n return 'bold'\n }\n\n if (statVariant === 'diet' || statVariant === 'mealEnergy') {\n return 'medium'\n }\n\n return undefined\n}\n\nfunction getLabelColor(statVariant: StatVariant) {\n if (isForDiet(statVariant)) {\n return 'gray.800'\n }\n\n return 'gray.500'\n}\n\nexport {\n getValueTextColor,\n getValueFontWeight,\n isForDiet,\n isForEnergy,\n isForIngredient,\n isForMeal,\n getLabelColor,\n}\n\nexport type { StatVariant }\n"
},
{
"path": "src/stats/types.ts",
"content": "type NutritionData = {\n energy: number\n\n fat: number\n saturatedFat: number\n monounsaturatedFat: number\n polyunsaturatedFat: number\n\n carbs: number\n sugar: number\n fiber: number\n\n protein: number\n\n sodium: number\n cholesterol: number\n\n vitaminA: number\n vitaminB1: number\n vitaminB2: number\n vitaminB3: number\n vitaminB5: number\n vitaminB6: number\n vitaminB9: number\n vitaminB12: number\n vitaminC: number\n vitaminD: number\n vitaminE: number\n vitaminK: number\n\n magnesium: number\n calcium: number\n phosphorus: number\n potassium: number\n iron: number\n selenium: number\n zinc: number\n manganese: number\n copper: number\n choline: number\n}\n\ntype Stats = {\n amountInGrams: number\n} & NutritionData\n\nexport type { Stats, NutritionData }\n"
},
{
"path": "src/stats/useMealsStatsStore.ts",
"content": "import { Stats } from './types'\nimport { useState, useCallback } from 'react'\nimport produce from 'immer'\nimport { makeStoreProvider, useCallbacksMemo } from 'general'\n\ntype MealsStats = Record | undefined>\n\nfunction useMealsStatsStore() {\n const [mealsStats, setMealsStats] = useState({})\n\n const setMealStats = useCallback(\n (variantFormFieldId: string, index: number, stats: Stats) =>\n setMealsStats(\n produce(draftMealsStats => {\n let variantMealsStats = draftMealsStats[variantFormFieldId]\n\n if (!variantMealsStats) {\n variantMealsStats = {}\n draftMealsStats[variantFormFieldId] = variantMealsStats\n }\n\n variantMealsStats[index] = stats\n })\n ),\n []\n )\n\n const deleteMealStats = useCallback(\n (variantFormFieldId: string, index: number) =>\n setMealsStats(\n produce(draftMealsStats => {\n let variantMealsStats = draftMealsStats[variantFormFieldId]\n\n if (variantMealsStats) {\n delete variantMealsStats[index]\n }\n })\n ),\n []\n )\n\n const actions = useCallbacksMemo({ setMealStats, deleteMealStats })\n\n return [mealsStats, actions] as const\n}\n\nconst [\n MealsStatsStoreProvider,\n useMealsStats,\n useMealsStatsActions,\n] = makeStoreProvider(useMealsStatsStore)\n\nexport { MealsStatsStoreProvider, useMealsStatsActions, useMealsStats }\n\nexport default useMealsStatsStore\n"
},
{
"path": "src/stats/useUpdateMealStats.ts",
"content": "import { Stats } from './types'\nimport { useEffect } from 'react'\nimport { useMealsStatsActions } from './useMealsStatsStore'\n\ntype Params = {\n stats: Stats\n selectedVariantFormFieldId: string\n index: number\n}\n\nfunction useUpdateMealStats({\n stats,\n selectedVariantFormFieldId,\n index,\n}: Params) {\n const mealsStatsActions = useMealsStatsActions()\n\n useEffect(() => {\n mealsStatsActions.setMealStats(selectedVariantFormFieldId, index, stats)\n\n return () => {\n mealsStatsActions.deleteMealStats(selectedVariantFormFieldId, index)\n }\n }, [stats, mealsStatsActions, index, selectedVariantFormFieldId])\n}\n\nexport default useUpdateMealStats\n"
},
{
"path": "src/stats/useVariantStats.ts",
"content": "import { useMemo, useRef } from 'react'\nimport { getMacrosPercents, roundMacrosPercents } from './calculations'\nimport { sumStats } from 'stats'\nimport { useMealsStats } from './useMealsStatsStore'\nimport { useDietForm } from 'diets'\n\ntype Params = {\n variantFormFieldId: string\n}\n\nfunction useVariantStats({ variantFormFieldId }: Params) {\n const mealsStats = useMealsStats()\n const dietForm = useDietForm()\n const energyCacheRef = useRef>({})\n\n const variantForm = dietForm.variantsForms.find(\n ({ fieldId }) => fieldId === variantFormFieldId\n )\n\n const shouldSetEnergyToZero =\n variantForm && variantForm.mealsForms.length === 0\n\n const variantStats = useMemo(() => {\n const mealsStatsForVariant = mealsStats[variantFormFieldId]\n const finalStats = mealsStatsForVariant\n ? Object.values(mealsStatsForVariant)\n : []\n const statsSum = sumStats(finalStats)\n\n if (shouldSetEnergyToZero) {\n energyCacheRef.current[variantFormFieldId] = 0\n } else if (\n mealsStatsForVariant &&\n energyCacheRef.current[variantFormFieldId] === undefined\n ) {\n energyCacheRef.current[variantFormFieldId] = statsSum.energy\n }\n\n return statsSum\n }, [mealsStats, variantFormFieldId, shouldSetEnergyToZero])\n\n const { proteinPercent, carbsPercent, fatPercent } = useMemo(() => {\n return roundMacrosPercents(getMacrosPercents(variantStats))\n }, [variantStats])\n\n const cachedEnergy = energyCacheRef.current[variantFormFieldId]\n const energyDiff =\n cachedEnergy !== undefined && cachedEnergy > 0\n ? variantStats.energy - cachedEnergy\n : 0\n\n return {\n variantStats,\n proteinPercent,\n carbsPercent,\n fatPercent,\n energyDiff,\n }\n}\n\nexport default useVariantStats\n"
},
{
"path": "src/theme/colors.ts",
"content": "const colors = {\n custom: {\n '50': '#74CFD1',\n\n '500': '#74CFD1',\n '600': '#38a8aa',\n },\n}\n\nexport default colors\n"
},
{
"path": "src/theme/components/Alert.ts",
"content": "const Alert = {\n variants: {\n subtle: {\n container: {\n bg: 'gray.100',\n borderRadius: 6,\n },\n },\n },\n}\n\nexport default Alert\n"
},
{
"path": "src/theme/components/Button.ts",
"content": "const Button = {}\n\nexport default Button\n"
},
{
"path": "src/theme/components/Divider.ts",
"content": "const Divider = {\n sizes: {\n md: {\n borderBottomWidth: '8px',\n },\n lg: {\n borderBottomWidth: '12px',\n },\n },\n}\n\nexport default Divider\n"
},
{
"path": "src/theme/components/Input.ts",
"content": "const Input = {\n defaultProps: {\n focusBorderColor: 'teal.400',\n },\n}\n\nexport default Input\n"
},
{
"path": "src/theme/components/Textarea.ts",
"content": "const Textarea = {\n defaultProps: {\n focusBorderColor: 'teal.400',\n },\n}\n\nexport default Textarea\n"
},
{
"path": "src/theme/components/index.ts",
"content": "export { default as Input } from './Input'\nexport { default as Button } from './Button'\nexport { default as Divider } from './Divider'\nexport { default as Textarea } from './Textarea'\nexport { default as Alert } from './Alert'\n"
},
{
"path": "src/theme/getComputedColorFromChakra.ts",
"content": "/* React-pdf does not have access to the Chakra context so we\n use the css variables to get the actual color values*/\n\nconst map: Record = {\n 'gray.50': '#F7FAFC',\n 'teal.500': '#319795',\n 'teal.400': '#38B2AC',\n 'gray.400': '#A0AEC0',\n 'gray.600': '#4A5568',\n 'gray.500': '#718096',\n 'gray.100': '#EDF2F7',\n 'gray.200': '#E2E8F0',\n 'gray.300': '#CBD5E0',\n 'teal.600': '#2C7A7B',\n}\nfunction getComputedColorFromChakra(chakraColor: string) {\n return map[chakraColor]\n}\n\nexport default getComputedColorFromChakra\n"
},
{
"path": "src/theme/index.ts",
"content": "import { extendTheme } from '@chakra-ui/react'\nimport styles from './styles'\nimport colors from './colors'\nimport { Input, Button, Divider, Textarea, Alert } from './components'\n\nconst theme = extendTheme({\n styles,\n colors,\n config: { initialColorMode: 'light', useSystemColorMode: false },\n components: {\n Input,\n Button,\n Divider,\n Textarea,\n Alert,\n },\n})\n\nexport { default as getComputedColorFromChakra } from './getComputedColorFromChakra'\n\nexport default theme\n"
},
{
"path": "src/theme/styles.ts",
"content": "const styles = {\n global: {\n body: {\n overflowX: 'hidden',\n fontFamily: 'Roboto',\n background: 'gray.50',\n },\n '.js-focus-visible :focus:not([data-focus-visible-added])': {\n outline: 'none',\n boxShadow: 'none',\n },\n '.rc-menu__item--hover': {\n backgroundColor: '#EDF2F7',\n },\n '.rc-menu__item--active': {\n color: 'black',\n backgroundColor: '#E2E8F0',\n },\n },\n}\n\nexport default styles\n"
},
{
"path": "src/undoRedo/UndoRedoButtons/RedoButton.tsx",
"content": "import { chakra, IconButton, Button } from '@chakra-ui/react'\nimport { useDietFormVersionsActions, useDietFormVersions } from 'undoRedo'\nimport { RotateCw } from 'react-feather'\nimport {\n getCtrlKeyName,\n TooltipCommandLabel,\n Tooltip,\n useScreenSize,\n ScreenSize,\n} from 'general'\n\nconst RotateCwStyled = chakra(RotateCw)\nconst ctrlKeyName = getCtrlKeyName()\n\nfunction RedoButton() {\n const { redo } = useDietFormVersionsActions()\n const { canRedo } = useDietFormVersions()\n const screenSize = useScreenSize()\n\n if (screenSize >= ScreenSize.Medium) {\n return (\n \n \n )\n}\n\nexport default UndoRedoButtons\n"
},
{
"path": "src/undoRedo/appLocation.ts",
"content": "import { DietForm } from 'diets'\nimport { RefObject } from 'react'\n\ntype AppLocation = {\n scrollTop: number\n scrollLeft: number\n variantIndex: number\n}\n\ntype Params = {\n horizontalScrollRef: RefObject\n dietForm: DietForm\n}\n\nfunction getAppLocation({\n horizontalScrollRef,\n dietForm,\n}: Params): AppLocation {\n return {\n scrollTop: window.scrollY,\n scrollLeft: horizontalScrollRef.current\n ? horizontalScrollRef.current.scrollLeft\n : 0,\n variantIndex: dietForm.selectedVariantFormIndex,\n }\n}\n\nexport type { AppLocation }\n\nexport default getAppLocation\n"
},
{
"path": "src/undoRedo/deltasStack.ts",
"content": "import { Delta } from 'jsondiffpatch'\nimport { AppLocation } from './appLocation'\n\ntype DeltaNode = {\n delta: Delta\n appLocation: AppLocation\n nextNode?: DeltaNode\n prevNode?: DeltaNode\n}\n\nconst MAX_SIZE = 100\nclass DeltasStack {\n startNode?: DeltaNode = undefined\n pointerNode?: DeltaNode = undefined\n size: number = 0\n canUnpatch: boolean = false\n canPatch: boolean = false\n\n getNextNodeToUnpatch(): DeltaNode | null {\n if (!this.canUnpatch) {\n return null\n }\n\n if (!this.pointerNode) {\n this.pointerNode = this.startNode\n } else {\n this.pointerNode = this.pointerNode.nextNode\n }\n\n if (this.pointerNode) {\n this.canUnpatch = this.pointerNode.nextNode !== undefined\n this.canPatch = true\n\n // jsondiffpatch sometimes modifies this delta for some reason\n return this.pointerNode\n }\n\n this.canUnpatch = false\n\n return null\n }\n\n getNextNodeToPatch(): DeltaNode | null {\n if (this.pointerNode) {\n const result = this.pointerNode\n this.pointerNode = this.pointerNode.prevNode\n\n this.canPatch = this.pointerNode !== undefined\n this.canUnpatch = true\n\n return result\n }\n\n return null\n }\n\n keepOnlyLast(n: number) {\n let node: DeltaNode | undefined = this.startNode\n let index = 0\n\n while (node) {\n if (index + 1 === n) {\n this.size = n\n node.nextNode = undefined\n break\n }\n\n node = node.nextNode\n index++\n }\n }\n\n push(delta: Delta, appLocation: AppLocation) {\n if (this.pointerNode) {\n this.startNode = this.pointerNode.nextNode\n this.pointerNode = undefined\n }\n\n const node: DeltaNode = {\n delta,\n appLocation,\n }\n\n if (!this.startNode) {\n this.startNode = node\n } else {\n node.nextNode = this.startNode\n this.startNode.prevNode = node\n this.startNode = node\n }\n\n this.size++\n\n if (this.size >= MAX_SIZE) {\n this.keepOnlyLast(Math.floor(MAX_SIZE / 2))\n }\n\n this.canUnpatch = true\n this.canPatch = false\n }\n}\n\nexport default DeltasStack\n"
},
{
"path": "src/undoRedo/index.ts",
"content": "export * from './useDietFormVersionsStore'\nexport { default as useKeyboard } from './useKeyboard'\nexport { default as UndoRedoButtons } from './UndoRedoButtons'\nexport * from './appLocation'\n"
},
{
"path": "src/undoRedo/useDietFormVersionsStore.ts",
"content": "import { useCallback, useRef, useState, RefObject, useEffect } from 'react'\nimport * as jsondiffpatch from 'jsondiffpatch'\nimport { Delta } from 'jsondiffpatch'\nimport DeltasStack from './deltasStack'\nimport { makeStoreProvider, useCallbacksMemo, deepCopy } from 'general'\nimport { DietForm } from 'diets'\nimport getAppLocation, { AppLocation } from './appLocation'\n\ntype Params = {\n form: DietForm\n horizontalScrollRef: RefObject\n onUndo: (form: DietForm, appLocation: AppLocation) => void\n onRedo: (form: DietForm, appLocation: AppLocation) => void\n}\n\nconst patcher = jsondiffpatch.create({\n objectHash: (item: any) => item.fieldId,\n})\n\nconst TIMEOUT_IN_MS = 200\n\ntype UndoRedoState = {\n canUndo: boolean\n canRedo: boolean\n}\n\nfunction shouldSaveDelta(delta: Delta) {\n const onlySelectedFormIndexChanged =\n Object.keys(delta).length === 1 &&\n delta.selectedVariantFormIndex !== undefined\n\n return false === onlySelectedFormIndexChanged\n}\n\nfunction useDietFormVersionsStore({\n form,\n horizontalScrollRef,\n onUndo,\n onRedo,\n}: Params) {\n const deltasStackRef = useRef(new DeltasStack())\n const lastFormRef = useRef(form)\n const timeoutIdRef = useRef()\n const [state, setState] = useState({\n canUndo: false,\n canRedo: false,\n })\n\n const undo = useCallback(() => {\n const result = deltasStackRef.current.getNextNodeToUnpatch()\n\n if (result) {\n const { delta, appLocation } = result\n lastFormRef.current = patcher.unpatch(\n lastFormRef.current,\n deepCopy(delta)\n )\n\n setState({\n canUndo: deltasStackRef.current.canUnpatch,\n canRedo: deltasStackRef.current.canPatch,\n })\n\n onUndo(deepCopy(lastFormRef.current), appLocation)\n }\n }, [onUndo])\n\n const redo = useCallback(() => {\n const result = deltasStackRef.current.getNextNodeToPatch()\n\n if (result) {\n const { delta, appLocation } = result\n lastFormRef.current = patcher.patch(lastFormRef.current, deepCopy(delta))\n\n setState({\n canUndo: deltasStackRef.current.canUnpatch,\n canRedo: deltasStackRef.current.canPatch,\n })\n\n onRedo(deepCopy(lastFormRef.current), appLocation)\n }\n }, [onRedo])\n\n const pushForm = useCallback(\n form => {\n if (timeoutIdRef.current) {\n clearTimeout(timeoutIdRef.current)\n }\n\n //console.log('push', form, lastFormRef.current)\n\n timeoutIdRef.current = window.setTimeout(() => {\n if (form !== lastFormRef.current) {\n const delta = patcher.diff(lastFormRef.current, form)\n //console.log('d', delta)\n if (delta && shouldSaveDelta(delta)) {\n lastFormRef.current = deepCopy(form)\n\n deltasStackRef.current.push(\n delta,\n getAppLocation({ horizontalScrollRef, dietForm: form })\n )\n\n setState({\n canUndo: deltasStackRef.current.canUnpatch,\n canRedo: deltasStackRef.current.canPatch,\n })\n }\n }\n }, TIMEOUT_IN_MS)\n },\n [horizontalScrollRef]\n )\n\n useEffect(() => {\n pushForm(form)\n }, [pushForm, form])\n\n const methods = useCallbacksMemo({ undo, redo })\n\n return [state, methods] as const\n}\n\nconst [\n DietFormVersionsStoreProvider,\n useDietFormVersions,\n useDietFormVersionsActions,\n] = makeStoreProvider(useDietFormVersionsStore)\n\nexport {\n DietFormVersionsStoreProvider,\n useDietFormVersions,\n useDietFormVersionsActions,\n}\n\nexport default useDietFormVersionsStore\n"
},
{
"path": "src/undoRedo/useKeyboard.ts",
"content": "import { useContext, useEffect } from 'react'\nimport { ContentBoxRefContext } from 'layout'\nimport { useDietFormVersionsActions } from './useDietFormVersionsStore'\n\nfunction useKeyboard() {\n const formVersionsActions = useDietFormVersionsActions()\n const contentBoxRef = useContext(ContentBoxRefContext)\n const node = contentBoxRef.current\n\n useEffect(() => {\n if (!node) {\n return\n }\n\n function onNodeKeyDown(event: KeyboardEvent) {\n const { ctrlKey, metaKey, shiftKey, code } = event\n\n if (code === 'KeyZ' && (ctrlKey || metaKey)) {\n event.preventDefault()\n\n if (shiftKey) {\n formVersionsActions.redo()\n } else {\n formVersionsActions.undo()\n }\n }\n }\n\n function onBodyKeyDown(event: KeyboardEvent) {\n if (event.target === document.body) {\n onNodeKeyDown(event)\n }\n }\n\n node.addEventListener('keydown', onNodeKeyDown)\n document.body.addEventListener('keydown', onBodyKeyDown)\n\n return () => {\n node.removeEventListener('keydown', onNodeKeyDown)\n document.body.removeEventListener('keydown', onBodyKeyDown)\n }\n }, [formVersionsActions, node])\n}\n\nexport default useKeyboard\n"
},
{
"path": "src/variants/PdfVariantsList/PdfVariantItem.tsx",
"content": "import { Text, StyleSheet, View } from '@react-pdf/renderer'\nimport { Stats, StatsTree } from 'stats'\nimport PdfStat from 'stats/PdfStat'\nimport PdfStatsLayout from 'stats/PdfStatsLayout'\nimport { VariantForm } from 'variants'\nimport { Food } from 'foods'\nimport getComputedColorFromChakra from 'theme/getComputedColorFromChakra'\nimport PdfMealsList from 'meals/PdfMealsList'\nimport { useMemo } from 'react'\nimport { Portion } from 'portions'\nimport getMacrosPercents from 'stats/calculations/getMacrosPercents'\nimport roundMacrosPercents from 'stats/calculations/roundMacrosPercents'\n\ntype Props = {\n variantForm: VariantForm\n stats: Stats\n mealsFormsStatsTrees: StatsTree[]\n foodsById: Record\n portionsById: Record\n index: number\n}\n\nfunction PdfVariantItem({\n variantForm,\n stats,\n mealsFormsStatsTrees,\n foodsById,\n portionsById,\n index,\n}: Props) {\n const { mealsForms } = variantForm\n\n const { proteinPercent, carbsPercent, fatPercent } = useMemo(\n () => roundMacrosPercents(getMacrosPercents(stats)),\n [stats]\n )\n\n return (\n 0}>\n \n {variantForm.name || 'Untitled variant'}\n \n }\n energyElement={\n \n )\n}\n\nconst styles = StyleSheet.create({\n root: {\n paddingLeft: 24,\n paddingRight: 24,\n },\n name: {\n fontWeight: 'semibold',\n fontSize: 20,\n },\n separator: {\n height: 1,\n marginTop: 12,\n },\n})\n\nexport default PdfVariantItem\n"
},
{
"path": "src/variants/PdfVariantsList/index.tsx",
"content": "import { Food } from 'foods'\nimport { Portion } from 'portions'\nimport { ReactElement } from 'react'\nimport { StatsTree } from 'stats'\nimport { VariantForm } from 'variants/variantForm'\nimport PdfVariantItem from './PdfVariantItem'\n\ntype Props = {\n variantsForms: VariantForm[]\n variantsFormsStatsTrees: StatsTree[]\n foodsById: Record\n portionsById: Record\n}\n\nfunction PdfVariantsList({\n variantsForms,\n variantsFormsStatsTrees,\n foodsById,\n portionsById,\n}: Props) {\n const variantItemsElements: ReactElement[] = []\n\n variantsForms.forEach((variantForm, index) => {\n const { mealsForms } = variantForm\n const { stats, subtrees } = variantsFormsStatsTrees[index]\n\n if (mealsForms.length > 0) {\n variantItemsElements.push(\n \n \n {label}{' '}\n {detail !== undefined && (\n \n \n {`(${detail})`}\n \n \n )}\n \n \n {value}\n {type === 'energy' ? 'kcal' : 'g'}\n \n \n )\n}\n\nexport default VariantStat\n"
},
{
"path": "src/variants/VariantStats/index.tsx",
"content": "import {\n VStack,\n BoxProps,\n Divider,\n Button,\n useDisclosure,\n Text,\n} from '@chakra-ui/react'\nimport { useDietForm } from 'diets'\nimport {\n getFatEnergyEstimate,\n getMacroEnergyPercent,\n getStatsEnergiesEstimates,\n useVariantStats,\n} from 'stats'\nimport VariantStat from './VariantStat'\nimport EnergyStat from './EnergyStat'\nimport { VariantsDetailsModal } from 'variants'\nimport { Info } from 'react-feather'\n\ntype Props = {} & BoxProps\n\nfunction VariantStats({ ...rest }: Props) {\n const dietForm = useDietForm()\n const { variantsForms, selectedVariantFormIndex } = dietForm\n const selectedVariantForm = variantsForms[selectedVariantFormIndex]\n const variantsDetailsModalDisclosure = useDisclosure()\n\n const {\n variantStats,\n proteinPercent,\n carbsPercent,\n fatPercent,\n energyDiff,\n } = useVariantStats({ variantFormFieldId: selectedVariantForm.fieldId })\n\n const { saturatedFat } = variantStats\n const saturatedFatEnergyEstimate = getFatEnergyEstimate(saturatedFat)\n const { energyEstimate } = getStatsEnergiesEstimates(variantStats)\n const saturatedFatPercent = Math.round(\n getMacroEnergyPercent(saturatedFatEnergyEstimate, energyEstimate)\n )\n\n const hasAtLeastOneMeal = selectedVariantForm.mealsForms.length > 0\n\n return (\n \n \n Daily totals\n \n ) {\n const { value } = event.target\n variantFormEvents.onVariantFormFieldIdChange(value)\n }\n\n const { proteinPercent, carbsPercent, fatPercent } = useMemo(\n () => roundMacrosPercents(getMacrosPercents(variantStats)),\n [variantStats]\n )\n\n const screenSize = useScreenSize()\n const isLarge = screenSize >= ScreenSize.Medium\n\n return (\n \n \n {variantsForms.length > 1 && (\n \n \n Average across all days\n \n {variantsForms.map(variantForm => (\n \n {variantForm.name}\n \n ))}\n \n )}\n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n )\n}\n\nexport default FormFields\n"
},
{
"path": "src/variants/VariantsDetailsModal/Content/VariantsDetailsFormProvider.tsx",
"content": "import { FormProvider, useForm } from 'react-hook-form'\nimport { ReactNode } from 'react'\nimport {\n getVariantsDetailsForm,\n VariantsDetailsForm,\n} from './variantsDetailsForm'\nimport { VariantForm } from 'variants'\nimport { Stats } from 'stats'\n\ntype Props = {\n children: ReactNode\n initialVariantForm: VariantForm\n initialVariantStats: Stats\n}\n\nfunction VariantsDetailsFormProvider({\n children,\n initialVariantForm,\n initialVariantStats,\n}: Props) {\n const defaultValues = getVariantsDetailsForm(\n initialVariantForm.fieldId,\n initialVariantStats\n )\n\n const formMethods = useForm({\n defaultValues,\n })\n\n return {children} \n}\n\nexport default VariantsDetailsFormProvider\n"
},
{
"path": "src/variants/VariantsDetailsModal/Content/index.tsx",
"content": "import {\n ModalContent,\n ModalHeader,\n ModalCloseButton,\n ModalFooter,\n ModalBody,\n Button,\n} from '@chakra-ui/react'\nimport FormFields from './FormFields'\nimport { VariantForm } from 'variants'\nimport { StatsTree } from 'stats'\nimport VariantsDetailsFormProvider from './VariantsDetailsFormProvider'\nimport { useDietForm, useGetDietFormStatsTree } from 'diets'\n\ntype Props = {\n onClose: () => void\n\n initialVariantForm: VariantForm\n}\n\nfunction Content({ onClose, initialVariantForm }: Props) {\n const dietForm = useDietForm()\n const { variantsForms } = dietForm\n\n const getDietFormStatsTree = useGetDietFormStatsTree()\n const dietFormStatsTree = getDietFormStatsTree(dietForm)\n const initialVariantStatsTree = dietFormStatsTree.subtrees.find(\n (statsTree: StatsTree) => statsTree.id === initialVariantForm.fieldId\n )\n\n if (!initialVariantStatsTree) {\n throw new Error()\n }\n\n return (\n \n Day Details \n \n \n \n \n \n\n \n Close \n \n \n )\n}\n\nexport type { Props }\n\nexport default Content\n"
},
{
"path": "src/variants/VariantsDetailsModal/Content/useVariantFormEvents.ts",
"content": "import { useFormContext, useWatch } from 'react-hook-form'\nimport { getVariantsDetailsForm } from './variantsDetailsForm'\nimport { Stats, StatsTree } from 'stats'\n\ntype Params = {\n dietFormStatsTree: StatsTree\n}\n\nfunction useVariantFormEvents({ dietFormStatsTree }: Params) {\n const { reset } = useFormContext()\n const variantFormFieldId = useWatch({ name: 'variantFormFieldId' })\n\n function getVariantStatsForForFieldId(value: string) {\n if (value) {\n const stats = dietFormStatsTree.subtrees.find(({ id }) => id === value)\n\n if (!stats) {\n throw new Error()\n }\n\n return stats.stats\n }\n\n return dietFormStatsTree.avg as Stats\n }\n\n const variantStats = getVariantStatsForForFieldId(variantFormFieldId)\n\n function onVariantFormFieldIdChange(value: string) {\n const variantStats = getVariantStatsForForFieldId(value)\n const newVaraintsDetailsForm = getVariantsDetailsForm(value, variantStats)\n reset(newVaraintsDetailsForm)\n }\n\n return { onVariantFormFieldIdChange, variantStats }\n}\n\nexport default useVariantFormEvents\n"
},
{
"path": "src/variants/VariantsDetailsModal/Content/variantsDetailsForm.ts",
"content": "import {\n getFatEnergyEstimate,\n getMacroEnergyPercent,\n getStatsEnergiesEstimates,\n MappedNutritionData,\n objectFromNutritionDataKeys,\n Stats,\n} from 'stats'\n\ntype VariantsDetailsForm = {\n variantFormFieldId: string\n saturatedFatEnergyPercent: string\n} & MappedNutritionData\n\nfunction getVariantsDetailsForm(\n variantFormFieldId: string,\n variantStats: Stats\n) {\n const { saturatedFat } = variantStats\n const saturatedFatEnergyEstimate = getFatEnergyEstimate(saturatedFat)\n const { energyEstimate } = getStatsEnergiesEstimates(variantStats)\n\n return {\n variantFormFieldId,\n saturatedFatEnergyPercent: Math.round(\n getMacroEnergyPercent(saturatedFatEnergyEstimate, energyEstimate)\n ).toString(),\n ...objectFromNutritionDataKeys(key => variantStats[key].toString()),\n }\n}\n\nexport type { VariantsDetailsForm }\n\nexport { getVariantsDetailsForm }\n"
},
{
"path": "src/variants/VariantsDetailsModal/index.tsx",
"content": "import { Modal, ModalOverlay } from '@chakra-ui/react'\nimport { VariantForm } from 'variants'\nimport Content from './Content'\n\ntype Props = {\n onClose: () => void\n isOpen: boolean\n initialVariantForm: VariantForm\n}\n\nfunction VariantsDetailsModal({ onClose, isOpen, initialVariantForm }: Props) {\n return (\n \n \n showsButtons: boolean\n canScrollLeft: boolean\n canScrollRight: boolean\n}\n\nconst SCROLL_DELTA = 100\n\nfunction ScrollButtons({\n showsButtons,\n scrollNodeRef,\n canScrollLeft,\n canScrollRight,\n}: Props) {\n function onTest() {\n animateScrollLeft(scrollNodeRef, SCROLL_DELTA)\n }\n\n function onTest2() {\n animateScrollLeft(scrollNodeRef, -SCROLL_DELTA)\n }\n\n return (\n \n \n )\n}\n\nexport default ScrollButtons\n"
},
{
"path": "src/variants/VariantsList/VariantItem/PresenceAnimation.tsx",
"content": "import { ReactNode } from 'react'\nimport { motion } from 'framer-motion'\n\ntype Props = {\n children: ReactNode\n shouldAnimate: boolean\n onAnimationComplete: () => void\n isVisible: boolean\n}\n\nconst variants = {\n open: {\n opacity: 1,\n width: 'auto',\n x: 0,\n },\n collapsed: { opacity: 0, width: 0, x: 0 },\n}\n\nfunction PresenceAnimation({\n shouldAnimate,\n isVisible,\n onAnimationComplete,\n children,\n}: Props) {\n return (\n \n {children}\n \n )\n}\n\nexport default PresenceAnimation\n"
},
{
"path": "src/variants/VariantsList/VariantItem/getMenuOrDrawerItems.tsx",
"content": "import { chakra } from '@chakra-ui/react'\nimport { Trash2, Edit, Copy, Info } from 'react-feather'\nimport { MenuOrDrawerItem, MenuOrDrawerSeparator } from 'general'\n\nconst Trash2Styled = chakra(Trash2)\nconst EditStyled = chakra(Edit)\nconst CopyStyled = chakra(Copy)\nconst InfoStyled = chakra(Info)\n\ntype Props = {\n onClone: () => void\n onEditName: () => void\n onDelete: () => void\n onViewDetails: () => void\n canRemove: boolean\n}\n\nfunction getMenuOrDrawerItems({\n onClone,\n onEditName,\n canRemove,\n onDelete,\n onViewDetails,\n}: Props) {\n return [\n \n} & LayoutProps &\n SpaceProps\n\nfunction VariantItem({\n onClone,\n onEditName,\n onDelete,\n children,\n isSelected,\n onSelect,\n onViewDetails,\n variantForm,\n canRemove,\n index,\n forwardedRef,\n ...rest\n}: Props) {\n const ref = useRef ![\"Devices](\"devices-preview.png\")
\n \n