\n \n \n\n",[],[357,364],{"_103":373,"_95":374,"_157":375,"_159":358,"_160":138,"_161":376,"_163":164,"_105":377,"_100":340,"_166":179,"_168":378,"_169":22,"_170":-5,"_171":379,"_98":380},"8784feb4-4d8d-11f0-9224-76b3cceeab13","index.tsx","0689c556-3e51-11f0-9b71-76b3cceeab13",202,["D",1750393070775],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport { LoginPage } from \"../ui-kit/src/components/LoginPage.tsx\";\nimport { Dashboard } from \"../ui-kit/src/components/Dashboard.tsx\";\n\nfunction App(): JSX.Element {\n const userData = (window as any).__USER_DATA__;\n return userData ? : ;\n}\n\n// Initialize the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();\n",[],[357,374],{"_103":382,"_95":383,"_157":384,"_159":358,"_160":138,"_161":385,"_163":164,"_105":386,"_100":32,"_166":189,"_168":387,"_169":22,"_170":-5,"_171":388,"_98":389},"e32b79b6-44e4-11f0-826e-76b3cceeab13","style.css","e32b7a7e-44e4-11f0-826e-76b3cceeab13",143,["D",1749441030294],"/* Base styles */\n:root {\n --primary-color: #3b82f6;\n --secondary-color: #1e40af;\n --background-color: #f3f4f6;\n --text-color: #1f2937;\n --border-color: #e5e7eb;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n}\n\n/* Button styles */\n.btn {\n display: inline-block;\n padding: 0.5rem 1rem;\n border-radius: 0.375rem;\n font-weight: 500;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: white;\n border: none;\n}\n\n.btn-primary:hover {\n background-color: var(--secondary-color);\n}\n\n/* Card styles */\n.card {\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n padding: 1rem;\n margin: 1rem 0;\n}\n\n/* Form styles */\n.form-input {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 0.375rem;\n margin-bottom: 1rem;\n}\n\n/* Layout styles */\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n/* Text styles */\n.text-center {\n text-align: center;\n}\n\n.text-lg {\n font-size: 1.125rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n/* Margin and padding utilities */\n.m-4 {\n margin: 1rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n/* Grid styles */\n.grid {\n display: grid;\n gap: 1rem;\n}\n\n.grid-cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n@media (max-width: 768px) {\n .grid-cols-2 {\n grid-template-columns: 1fr;\n }\n}\n",[],[357,383],[357],{"_103":392,"_95":393,"_157":394,"_159":-5,"_160":138,"_161":118,"_163":164,"_105":395,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":396,"_98":406},"a527b656-3c43-11f0-baed-9e149126039e","shared","f51258e7-ba5a-41ab-9356-127b9178fe98",["D",1748492167939],[397],{"_103":398,"_95":399,"_157":400,"_159":394,"_160":138,"_161":401,"_163":164,"_105":402,"_100":298,"_166":179,"_168":403,"_169":22,"_170":-5,"_171":404,"_98":405},"e383317e-44e4-11f0-859b-76b3cceeab13","types.ts","1a5b951a-c8ee-4136-bd84-5ec6d4f79ce1",157,["D",1749441030861],"export interface Memory {\n id: string;\n date: string;\n text: string;\n tags: string | null;\n\n // New fields from schema\n createdBy?: string;\n createdDate?: number;\n}\n\n// Kroger OAuth and User types\nexport interface KrogerUser {\n id: string;\n krogerProfileId: string;\n accessToken: string;\n refreshToken: string;\n tokenExpiresAt: number;\n preferredLocationId?: string;\n createdAt: number;\n updatedAt: number;\n}\n\nexport interface Location {\n locationId: string;\n name: string;\n storeNumber: string;\n phone: string;\n address: {\n addressLine1: string;\n addressLine2?: string;\n city: string;\n state: string;\n zipCode: string;\n };\n}\n\nexport interface UserData {\n id: string;\n createdAt: number;\n krogerProfileId: string;\n preferredLocationId?: string;\n preferredLocation?: Location;\n}\n\nexport interface KrogerTokenResponse {\n access_token: string;\n token_type: string;\n expires_in: number;\n refresh_token: string;\n}\n\nexport interface KrogerProfileResponse {\n data: {\n id: string;\n };\n meta: {\n pagination: {\n total: number;\n start: number;\n limit: number;\n };\n warnings: string[];\n };\n}\n\nexport interface Guidance {\n id: string;\n userId: string;\n itemName: string;\n guidance: string;\n createdAt: number;\n updatedAt: number;\n}\n\nexport interface Selection {\n id: string;\n userId: string;\n itemName: string;\n upc: string;\n productName: string;\n createdAt: number;\n updatedAt: number;\n}\n\n// Kroger Location types\nexport interface KrogerLocation {\n locationId: string;\n name: string;\n chain: string;\n storeNumber: string;\n divisionNumber: string;\n address: {\n addressLine1: string;\n addressLine2?: string;\n city: string;\n county: string;\n state: string;\n zipCode: string;\n };\n phone: string;\n geolocation: {\n latLng: string;\n latitude: number;\n longitude: number;\n };\n hours: {\n Open24: boolean;\n gmtOffset: string;\n timezone: string;\n monday?: DayHours;\n tuesday?: DayHours;\n wednesday?: DayHours;\n thursday?: DayHours;\n friday?: DayHours;\n saturday?: DayHours;\n sunday?: DayHours;\n };\n departments: Department[];\n}\n\nexport interface DayHours {\n open: string;\n close: string;\n open24: boolean;\n}\n\nexport interface Department {\n departmentId: string;\n name: string;\n phone: string;\n hours: {\n Open24: boolean;\n monday?: DayHours;\n tuesday?: DayHours;\n wednesday?: DayHours;\n thursday?: DayHours;\n friday?: DayHours;\n saturday?: DayHours;\n sunday?: DayHours;\n };\n}\n\nexport interface KrogerLocationsResponse {\n data: KrogerLocation[];\n meta: {\n pagination: {\n total: number;\n start: number;\n limit: number;\n };\n warnings: string[];\n };\n}\n\nexport interface KrogerLocationResponse {\n data: KrogerLocation;\n}\n\nexport interface IKrogerAuthService {\n isConfigured(): boolean;\n getAuthorizationUrl(state?: string): string;\n exchangeCodeForToken(code: string): Promise;\n refreshToken(refreshToken: string): Promise;\n getUserProfile(accessToken: string): Promise;\n isTokenExpired(expiresAt: number): boolean;\n getValidAccessToken(\n currentToken: string,\n refreshToken: string,\n expiresAt: number\n ): Promise<{\n accessToken: string;\n refreshToken: string;\n expiresIn: number;\n } | null>;\n searchLocationsByZipCode(\n accessToken: string,\n zipCode: string,\n radiusInMiles?: number,\n limit?: number\n ): Promise;\n getLocationById(\n accessToken: string,\n locationId: string\n ): Promise;\n}\n",[],[393,399],[393],{"_103":408,"_95":409,"_157":410,"_159":-5,"_160":138,"_161":411,"_163":164,"_105":412,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":413,"_98":730},"868eda70-4d8d-11f0-b958-76b3cceeab13","ui-kit","868edb7e-4d8d-11f0-b958-76b3cceeab13",166,["D",1750393069165],[414,438,640,649,658,667,676,685,694,703,712,721],{"_103":415,"_95":156,"_157":416,"_159":410,"_160":138,"_161":417,"_163":164,"_105":418,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":419,"_98":437},"86a4ae2c-4d8d-11f0-8a7d-76b3cceeab13","86a4aeea-4d8d-11f0-8a7d-76b3cceeab13",167,["D",1750393069309],[420,428],{"_103":421,"_95":175,"_157":422,"_159":416,"_160":138,"_161":423,"_163":164,"_105":424,"_100":32,"_166":179,"_168":425,"_169":22,"_170":-5,"_171":426,"_98":427},"87635386-4d8d-11f0-b1c5-76b3cceeab13","87635426-4d8d-11f0-b1c5-76b3cceeab13",195,["D",1750393070242],"import type { StorybookConfig } from \"@storybook/react-vite\";\n\nconst config: StorybookConfig = {\n stories: [\"../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-interactions\",\n ],\n framework: {\n name: \"@storybook/react-vite\",\n options: {},\n },\n docs: {\n autodocs: \"tag\",\n },\n typescript: {\n check: false,\n reactDocgen: \"react-docgen-typescript\",\n reactDocgenTypescriptOptions: {\n shouldExtractLiteralValuesFromEnum: true,\n propFilter: (prop) =>\n prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,\n },\n },\n};\n\nexport default config;\n",[],[409,156,175],{"_103":429,"_95":430,"_157":431,"_159":416,"_160":138,"_161":432,"_163":164,"_105":433,"_100":32,"_166":179,"_168":434,"_169":22,"_170":-5,"_171":435,"_98":436},"873835d4-4d8d-11f0-863f-76b3cceeab13","preview.ts","87383728-4d8d-11f0-863f-76b3cceeab13",187,["D",1750393070243],"import type { Preview } from '@storybook/react';\nimport '../src/styles/globals.css';\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: '^on[A-Z].*' },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n layout: 'centered',\n backgrounds: {\n default: 'light',\n values: [\n {\n name: 'light',\n value: '#ffffff',\n },\n {\n name: 'dark',\n value: '#1f2937',\n },\n {\n name: 'gray',\n value: '#f3f4f6',\n },\n ],\n },\n },\n globalTypes: {\n theme: {\n description: 'Global theme for components',\n defaultValue: 'light',\n toolbar: {\n title: 'Theme',\n icon: 'circlehollow',\n items: ['light', 'dark'],\n dynamicTitle: true,\n },\n },\n },\n};\n\nexport default preview;\n",[],[409,156,430],[409,156],{"_103":439,"_95":440,"_157":441,"_159":410,"_160":138,"_161":442,"_163":164,"_105":443,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":444,"_98":639},"86b5ccfc-4d8d-11f0-9d77-76b3cceeab13","src","86b5cd92-4d8d-11f0-9d77-76b3cceeab13",168,["D",1750393069421],[445,605,622,630],{"_103":446,"_95":447,"_157":448,"_159":441,"_160":138,"_161":449,"_163":164,"_105":450,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":451,"_98":604},"86d7223a-4d8d-11f0-bcd0-76b3cceeab13","components","86d722f8-4d8d-11f0-bcd0-76b3cceeab13",170,["D",1750393069638],[452,461,471,480,489,498,507,516,525,534,543,552,561,570,579,588,596],{"_103":453,"_95":454,"_157":455,"_159":448,"_160":138,"_161":456,"_163":164,"_105":457,"_100":118,"_166":179,"_168":458,"_169":22,"_170":-5,"_171":459,"_98":460},"871ee804-4d8d-11f0-a392-76b3cceeab13","CurrentLocationIndicator.stories.tsx","e2e22996-44e4-11f0-b914-76b3cceeab13",181,["D",1750393070091],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { CurrentLocationIndicator } from \"./CurrentLocationIndicator\";\n\nconst meta = {\n title: \"Components/CurrentLocationIndicator\",\n component: CurrentLocationIndicator,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const NoLocation: Story = {\n args: {\n location: null,\n onClick: () => alert(\"Location indicator clicked!\"),\n },\n};\n\nexport const WithLocation: Story = {\n args: {\n location: {\n locationId: \"123\",\n name: \"Kroger Marketplace\",\n storeNumber: \"123\",\n phone: \"555-0123\",\n address: {\n addressLine1: \"123 Main St\",\n addressLine2: \"Suite 100\",\n city: \"Cincinnati\",\n state: \"OH\",\n zipCode: \"45202\",\n },\n },\n onClick: () => alert(\"Location indicator clicked!\"),\n },\n};\n",[],[409,440,447,454],{"_103":462,"_95":463,"_157":464,"_159":448,"_160":138,"_161":465,"_163":164,"_105":466,"_100":467,"_166":179,"_168":468,"_169":22,"_170":-5,"_171":469,"_98":470},"1bc8544a-4d8e-11f0-a161-76b3cceeab13","CurrentLocationIndicator.tsx","e31b244e-44e4-11f0-b4ed-76b3cceeab13",212,["D",1750393319485],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { CurrentLocationIndicatorProps } from \"./types\";\n\nexport function CurrentLocationIndicator({\n location,\n onClick,\n}: CurrentLocationIndicatorProps): JSX.Element {\n if (!location) {\n return (\n \n

\n \n \n \n

\n No store location selected\n

Click to select a store

\n \n );\n }\n\n const address = `${location.address.addressLine1}, ${location.address.city}, ${location.address.state} ${location.address.zipCode}`;\n\n return (\n \n

\n \n \n \n

{location.name}

{address}

\n \n \n \n

\n \n );\n}\n",[],[409,440,447,463],{"_103":472,"_95":473,"_157":474,"_159":448,"_160":138,"_161":475,"_163":164,"_105":476,"_100":467,"_166":179,"_168":477,"_169":22,"_170":-5,"_171":478,"_98":479},"1be61d40-4d8e-11f0-b221-76b3cceeab13","Dashboard.tsx","e2f7ebfa-44e4-11f0-b4e2-76b3cceeab13",217,["D",1750393319387],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { DashboardProps } from \"./types\";\nimport { Location } from \"../../../shared/types\";\nimport { Navbar } from \"./Navbar\";\nimport { DashboardCard } from \"./DashboardCard\";\nimport { LocationSearch } from \"./LocationSearch\";\nimport { CurrentLocationIndicator } from \"./CurrentLocationIndicator\";\nimport { ShoppingListCreator } from \"./ShoppingListCreator\";\n\nexport function Dashboard({ userData }: DashboardProps): JSX.Element {\n const [guidanceCount, setGuidanceCount] = useState(\"Loading...\");\n const [selectionsCount, setSelectionsCount] = useState(\"Loading...\");\n const [currentLocation, setCurrentLocation] = useState(\n userData.preferredLocation || null\n );\n const [showLocationPicker, setShowLocationPicker] = useState(\n !userData.preferredLocation\n );\n\n useEffect(() => {\n const loadCounts = async (): Promise => {\n try {\n const [guidanceResponse, selectionsResponse] = await Promise.all([\n fetch(\"/api/guidance\"),\n fetch(\"/api/selections\"),\n ]);\n\n const guidance = await guidanceResponse.json();\n const selections = await selectionsResponse.json();\n\n setGuidanceCount(guidance.length.toString());\n setSelectionsCount(selections.length.toString());\n } catch (error) {\n console.error(\"Error loading counts:\", error);\n setGuidanceCount(\"Error\");\n setSelectionsCount(\"Error\");\n }\n };\n\n const loadCurrentLocation = async (): Promise => {\n if (\n userData.preferredLocationId !== userData.preferredLocation?.locationId\n ) {\n try {\n const response = await fetch(\n `/api/locations/${userData.preferredLocationId}`\n );\n if (response.ok) {\n const data = await response.json();\n setCurrentLocation(data.data);\n }\n } catch (error) {\n console.error(\"Error loading current location details:\", error);\n }\n }\n };\n\n loadCounts();\n loadCurrentLocation();\n }, [userData.preferredLocationId, userData.preferredLocation?.locationId]);\n\n const handleLocationIndicatorClick = (): void => {\n setShowLocationPicker(!showLocationPicker);\n };\n\n const handleLocationSelected = (): void => {\n setShowLocationPicker(false);\n };\n\n return (\n

\n \n

\n {/* Location indicator - always visible */}\n

\n \n

\n\n {/* Location picker - only show when no location selected OR when clicked */}\n {showLocationPicker && (\n

\n \n

\n )}\n\n {/* Shopping List Creator - Full Width */}\n

\n \n

\n\n {/* Dashboard Cards */}\n

\n \n \n \n \n }\n actionText=\"Manage preferences\"\n onAction={() => alert(\"Guidance management coming soon!\")}\n />\n \n \n \n }\n actionText=\"View selections\"\n onAction={() => alert(\"Selections management coming soon!\")}\n />\n

\n );\n}\n",[],[409,440,447,473],{"_103":481,"_95":482,"_157":483,"_159":448,"_160":138,"_161":484,"_163":164,"_105":485,"_100":118,"_166":179,"_168":486,"_169":22,"_170":-5,"_171":487,"_98":488},"87020e0a-4d8d-11f0-a41f-76b3cceeab13","DashboardCard.stories.tsx","e30ee620-44e4-11f0-9f8f-76b3cceeab13",175,["D",1750393069754],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { DashboardCard } from \"./DashboardCard\";\n\nconst meta = {\n title: \"Components/DashboardCard\",\n component: DashboardCard,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {\n title: \"Preferences\",\n count: \"5 items\",\n icon: (\n \n \n \n \n ),\n actionText: \"Manage preferences\",\n onAction: () => alert(\"Action clicked!\"),\n },\n};\n\nexport const WithZeroCount: Story = {\n args: {\n ...Default.args,\n count: \"0 items\",\n },\n};\n\nexport const WithLargeCount: Story = {\n args: {\n ...Default.args,\n count: \"1,234 items\",\n },\n};\n",[],[409,440,447,482],{"_103":490,"_95":491,"_157":492,"_159":448,"_160":138,"_161":493,"_163":164,"_105":494,"_100":467,"_166":179,"_168":495,"_169":22,"_170":-5,"_171":496,"_98":497},"1bd09556-4d8e-11f0-b6ad-76b3cceeab13","DashboardCard.tsx","e3093d88-44e4-11f0-8fe0-76b3cceeab13",213,["D",1750393319388],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { DashboardCardProps } from \"./types\";\n\nexport function DashboardCard({\n title,\n count,\n icon,\n actionText,\n onAction,\n}: DashboardCardProps): JSX.Element {\n return (\n

{icon}

\n {title}\n: {count}

\n \n {actionText} →\n \n

\n );\n}\n",[],[409,440,447,491],{"_103":499,"_95":500,"_157":501,"_159":448,"_160":138,"_161":502,"_163":164,"_105":503,"_100":467,"_166":179,"_168":504,"_169":22,"_170":-5,"_171":505,"_98":506},"1bdce838-4d8e-11f0-a3a0-76b3cceeab13","LocationSearch.tsx","e32edf16-44e4-11f0-91f2-76b3cceeab13",215,["D",1750393319654],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { LocationSearchProps } from \"./types\";\nimport { Location } from \"../../shared/types\";\n\nexport function LocationSearch({\n onLocationSelected,\n}: LocationSearchProps): JSX.Element {\n const [zipCode, setZipCode] = useState(\"\");\n const [locations, setLocations] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [showResults, setShowResults] = useState(false);\n\n const handleSearch = async (): Promise => {\n if (!zipCode.trim()) {\n alert(\"Please enter a zip code\");\n return;\n }\n\n setIsLoading(true);\n setShowResults(false);\n\n try {\n const response = await fetch(\n `/api/locations/search?zipCode=${encodeURIComponent(\n zipCode\n )}&radius=25&limit=10`\n );\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to search locations\");\n }\n\n setLocations(data.data);\n setShowResults(true);\n } catch (error) {\n console.error(\"Error searching locations:\", error);\n alert(`Error searching for locations: ${(error as Error).message}`);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleSelectLocation = async (location: Location): Promise => {\n try {\n const response = await fetch(\"/api/user/location\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ locationId: location.locationId }),\n });\n\n if (response.ok) {\n setZipCode(\"\");\n setShowResults(false);\n alert(\"Store location updated successfully!\");\n if (onLocationSelected) {\n onLocationSelected();\n }\n window.location.reload(); // Refresh to update the current location display\n } else {\n const data = await response.json();\n alert(`Failed to update location: ${data.error || \"Unknown error\"}`);\n }\n } catch (error) {\n console.error(\"Error updating location:\", error);\n alert(`Error updating location: ${(error as Error).message}`);\n }\n };\n\n return (\n

\n Store Location\n

Search for your preferred Kroger store location by zip code.

\n\n

\n \n Search by Zip Code\n \n

\n ) =>\n setZipCode(e.target.value)\n }\n placeholder=\"Enter zip code (e.g., 45044)\"\n className=\"flex-1 block border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n />\n \n \n \n \n Search\n \n

\n\n {isLoading && (\n

\n \n \n \n \n \n Searching for locations...\n \n

\n )}\n\n {showResults && (\n

\n Search Results\n

\n {locations.length === 0 ? (\n

\n \n \n \n \n

No locations found for this zip code

\n ) : (\n locations.map((location) => (\n handleSelectLocation(location)}\n >\n

\n {location.name}\n

\n {location.address.addressLine1}\n {location.address.addressLine2\n ? `, ${location.address.addressLine2}`\n : \"\"}\n

\n {location.address.city}, {location.address.state}{\" \"}\n {location.address.zipCode}\n

\n Store #{location.storeNumber} • {location.phone}\n

\n \n

\n ))\n )}\n

\n )}\n

\n \n );\n}\n",[],[409,440,447,500],{"_103":508,"_95":509,"_157":510,"_159":448,"_160":138,"_161":511,"_163":164,"_105":512,"_100":118,"_166":179,"_168":513,"_169":22,"_170":-5,"_171":514,"_98":515},"870b78b4-4d8d-11f0-b1c5-76b3cceeab13","LoginPage.stories.tsx","e2e5deec-44e4-11f0-937c-76b3cceeab13",177,["D",1750393069981],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { LoginPage } from \"./LoginPage\";\n\nconst meta = {\n title: \"Components/LoginPage\",\n component: LoginPage,\n parameters: {\n layout: \"fullscreen\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {},\n};\n",[],[409,440,447,509],{"_103":517,"_95":518,"_157":519,"_159":448,"_160":138,"_161":520,"_163":164,"_105":521,"_100":467,"_166":179,"_168":522,"_169":22,"_170":-5,"_171":523,"_98":524},"1bc0d12a-4d8e-11f0-8ebd-76b3cceeab13","LoginPage.tsx","e2fb376a-44e4-11f0-819e-76b3cceeab13",211,["D",1750393319386],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function LoginPage(): JSX.Element {\n return (\n

\n Personal Shopper\n

\n AI-powered grocery shopping with Kroger\n

\n Sign in with Kroger\n

\n Connect your Kroger account to start building your personalized\n shopping experience.\n

\n (window.location.href = \"/auth/login\")}\n className=\"group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n >\n \n \n \n Connect with Kroger\n \n

\n );\n}\n",[],[409,440,447,518],{"_103":526,"_95":527,"_157":528,"_159":448,"_160":138,"_161":529,"_163":164,"_105":530,"_100":118,"_166":179,"_168":531,"_169":22,"_170":-5,"_171":532,"_98":533},"8706fe24-4d8d-11f0-be1b-76b3cceeab13","Navbar.stories.tsx","e3270b88-44e4-11f0-afb0-76b3cceeab13",176,["D",1750393069936],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Navbar } from \"./Navbar\";\n\nconst meta = {\n title: \"Components/Navbar\",\n component: Navbar,\n parameters: {\n layout: \"fullscreen\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {\n userData: {\n id: \"user-123\",\n createdAt: 1640995200000,\n krogerProfileId: \"12345\",\n preferredLocationId: \"67890\",\n preferredLocation: {\n locationId: \"67890\",\n name: \"Kroger Marketplace\",\n storeNumber: \"123\",\n phone: \"555-0123\",\n address: {\n addressLine1: \"123 Main St\",\n addressLine2: \"Suite 100\",\n city: \"Cincinnati\",\n state: \"OH\",\n zipCode: \"45202\",\n },\n },\n },\n },\n};\n",[],[409,440,447,527],{"_103":535,"_95":536,"_157":537,"_159":448,"_160":138,"_161":538,"_163":164,"_105":539,"_100":467,"_166":179,"_168":540,"_169":22,"_170":-5,"_171":541,"_98":542},"1bb91ebc-4d8e-11f0-bab5-76b3cceeab13","Navbar.tsx","e3a69f4c-44e4-11f0-9b0b-76b3cceeab13",210,["D",1750393319420],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { NavbarProps } from \"./types\";\n\nexport function Navbar({ userData }: NavbarProps): JSX.Element {\n const handleLogout = async (): Promise => {\n try {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.reload();\n } catch (error) {\n console.error(\"Logout failed:\", error);\n }\n };\n\n return (\n \n );\n}\n",[],[409,440,447,536],{"_103":544,"_95":545,"_157":546,"_159":448,"_160":138,"_161":547,"_163":164,"_105":548,"_100":32,"_166":179,"_168":549,"_169":22,"_170":-5,"_171":550,"_98":551},"8766d808-4d8d-11f0-9224-76b3cceeab13","ProductCard.stories.tsx","8766d8e4-4d8d-11f0-9224-76b3cceeab13",196,["D",1750393070567],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ProductCard, ProductCardProps } from \"./ProductCard\";\n\nconst meta: Meta = {\n title: \"Components/ProductCard\",\n component: ProductCard,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst baseProduct: ProductCardProps[\"product\"] = {\n productId: \"0001111041700\",\n description: \"Kroger 2% Reduced Fat Milk\",\n brand: \"Kroger\",\n items: [\n {\n itemId: \"0001111041700\",\n inventory: {\n stockLevel: \"HIGH\",\n },\n favorite: true,\n fulfillment: {\n curbside: true,\n delivery: true,\n instore: true,\n shiptohome: true,\n },\n price: {\n regular: 1.99,\n promo: 1.59,\n regularPerUnitEstimate: 1.99,\n promoPerUnitEstimate: 1.59,\n },\n nationalPrice: {\n regular: 1.99,\n promo: 1.59,\n regularPerUnitEstimate: 1.99,\n promoPerUnitEstimate: 1.59,\n },\n size: \"1 gal\",\n soldBy: \"unit\",\n },\n ],\n images: [\n {\n id: \"front\",\n perspective: \"front\",\n default: true,\n sizes: [\n {\n id: \"medium\",\n size: \"medium\",\n url: \"https://www.kroger.com/product/images/medium/front/0001111041700\",\n },\n ],\n },\n ],\n};\n\nexport const Default: Story = {\n args: {\n product: baseProduct,\n },\n};\n\nexport const NoPromoPrice: Story = {\n args: {\n product: {\n ...baseProduct,\n items: [\n {\n ...baseProduct.items[0],\n price: {\n regular: 2.99,\n },\n },\n ],\n },\n },\n};\n\nexport const NoImage: Story = {\n args: {\n product: {\n ...baseProduct,\n images: [],\n },\n },\n};\n\nexport const Chosen: Story = {\n args: {\n product: baseProduct,\n chosen: true,\n },\n};\n\nexport const WithQuantity: Story = {\n args: {\n product: baseProduct,\n quantity: 2,\n onQuantityChange: () => alert(\"Quantity changed!\"),\n },\n};\n\nexport const ChosenWithQuantity: Story = {\n args: {\n product: baseProduct,\n chosen: true,\n quantity: 3,\n onQuantityChange: () => alert(\"Quantity changed!\"),\n },\n};\n\nexport const Minimal: Story = {\n args: {\n product: {\n productId: \"0000000000000\",\n description: \"Generic Product\",\n items: [\n {\n itemId: \"0000000000000\",\n price: { regular: 0.99 },\n },\n ],\n },\n },\n};\n",[],[409,440,447,545],{"_103":553,"_95":554,"_157":555,"_159":448,"_160":138,"_161":556,"_163":164,"_105":557,"_100":118,"_166":179,"_168":558,"_169":22,"_170":-5,"_171":559,"_98":560},"1bb314ea-4d8e-11f0-a161-76b3cceeab13","ProductCard.tsx","875d137c-4d8d-11f0-a41f-76b3cceeab13",209,["D",1750393319381],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Types adapted from Kroger Products API response.\n * Extend or adjust as needed for your app.\n */\ntype Fulfillment = {\n curbside?: boolean;\n delivery?: boolean;\n instore?: boolean;\n shiptohome?: boolean;\n};\n\ntype Price = {\n regular: number;\n promo?: number;\n regularPerUnitEstimate?: number;\n promoPerUnitEstimate?: number;\n};\n\ntype Inventory = {\n stockLevel?: \"HIGH\" | \"LOW\" | \"TEMPORARILY_OUT_OF_STOCK\";\n};\n\ntype Item = {\n itemId: string;\n inventory?: Inventory;\n favorite?: boolean;\n fulfillment?: Fulfillment;\n price?: Price;\n nationalPrice?: Price;\n size?: string;\n soldBy?: string;\n};\n\ntype ImageSize = {\n id: string;\n size: string;\n url: string;\n};\n\ntype Image = {\n id: string;\n perspective: string;\n default: boolean;\n sizes: ImageSize[];\n};\n\nexport type Product = {\n productId: string;\n description: string;\n brand?: string;\n items: Item[];\n images?: Image[];\n};\n\nexport interface ProductCardProps {\n product: Product;\n className?: string;\n /**\n * Current quantity of this product.\n */\n quantity?: number;\n /**\n * Called with new quantity when user clicks +/-\n */\n onQuantityChange?: (newQuantity: number) => void;\n}\n\n/**\n * ProductCard component displays a single product result from the Kroger API.\n */\nexport function ProductCard({\n product,\n className = \"\",\n quantity = 0,\n onQuantityChange,\n}: ProductCardProps): JSX.Element {\n const item = product.items[0];\n const price = item?.price;\n\n // Chosen state is derived from quantity\n const chosen = quantity > 0;\n\n // Handle card click: if quantity is 0, set to 1\n const handleCardClick = (e: React.MouseEvent) => {\n // Prevent click if it originated from a button inside the card\n if (\n (e.target as HTMLElement).closest(\"button\") ||\n (e.target as HTMLElement).getAttribute(\"role\") === \"button\"\n ) {\n return;\n }\n if (quantity === 0 && onQuantityChange) {\n onQuantityChange(1);\n }\n };\n const image =\n product.images?.[0]?.sizes.find((s) => s.size === \"medium\") ||\n product.images?.[0]?.sizes[0];\n\n return (\n \n {image && (\n \n \n \n )}\n

\n \n {product.description}\n

\n {product.brand && (\n

\n {product.brand}\n

\n )}\n

\n {item?.size && (\n \n {item.size}\n \n )}\n {item?.soldBy && (\n \n Sold by: {item.soldBy}\n \n )}\n

\n {price && (\n <>\n \n ${price.promo?.toFixed(2) ?? price.regular.toFixed(2)}\n \n {price.promo && (\n \n ${price.regular.toFixed(2)}\n \n )}\n \n )}\n

\n {/* Quantity controls */}\n {typeof quantity === \"number\" && onQuantityChange && (\n

\n onQuantityChange(Math.max(0, quantity - 1))}\n disabled={quantity <= 0}\n tabIndex={0}\n >\n –\n \n \n {quantity}\n \n onQuantityChange(quantity + 1)}\n tabIndex={0}\n >\n +\n \n

\n )}\n {/* Badges for fulfillment and stock level removed */}\n \n \n );\n}\n",[],[409,440,447,554],{"_103":562,"_95":563,"_157":564,"_159":448,"_160":138,"_161":565,"_163":164,"_105":566,"_100":32,"_166":179,"_168":567,"_169":22,"_170":-5,"_171":568,"_98":569},"876ccf4c-4d8d-11f0-ade6-76b3cceeab13","ProductResultsList.stories.tsx","876cd01e-4d8d-11f0-ade6-76b3cceeab13",197,["D",1750393070588],"/** @jsxImportSource react */\nimport React, { useState } from \"react\";\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport { ProductResultsList } from \"./ProductResultsList\";\nimport { Product } from \"./ProductCard\";\n\nexport default {\n title: \"Components/ProductResultsList\",\n component: ProductResultsList,\n} as Meta;\n\n// --- Sample Data ---\nconst sampleProducts: Product[] = [\n {\n productId: \"milk-1\",\n description: \"Whole Milk\",\n brand: \"DairyPure\",\n items: [\n {\n itemId: \"milk-1-item\",\n price: { regular: 3.49 },\n size: \"1 gal\",\n soldBy: \"each\",\n },\n ],\n images: [\n {\n id: \"milk-img\",\n perspective: \"front\",\n default: true,\n sizes: [\n {\n id: \"milk-img-med\",\n size: \"medium\",\n url: \"https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=crop&w=200&q=80\",\n },\n ],\n },\n ],\n },\n {\n productId: \"milk-2\",\n description: \"2% Reduced Fat Milk\",\n brand: \"Kroger\",\n items: [\n {\n itemId: \"milk-2-item\",\n price: { regular: 3.19, promo: 2.99 },\n size: \"1 gal\",\n soldBy: \"each\",\n },\n ],\n images: [\n {\n id: \"milk2-img\",\n perspective: \"front\",\n default: true,\n sizes: [\n {\n id: \"milk2-img-med\",\n size: \"medium\",\n url: \"https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=200&q=80\",\n },\n ],\n },\n ],\n },\n];\n\nconst sampleEggs: Product[] = [\n {\n productId: \"eggs-1\",\n description: \"Large Brown Eggs\",\n brand: \"Eggland's Best\",\n items: [\n {\n itemId: \"eggs-1-item\",\n price: { regular: 2.99 },\n size: \"12 ct\",\n soldBy: \"dozen\",\n },\n ],\n images: [\n {\n id: \"eggs-img\",\n perspective: \"front\",\n default: true,\n sizes: [\n {\n id: \"eggs-img-med\",\n size: \"medium\",\n url: \"https://images.unsplash.com/photo-1519864600265-abb23847ef2c?auto=format&fit=crop&w=200&q=80\",\n },\n ],\n },\n ],\n },\n];\n\nconst sampleBread: Product[] = [\n {\n productId: \"bread-1\",\n description: \"Whole Wheat Bread\",\n brand: \"Nature's Own\",\n items: [\n {\n itemId: \"bread-1-item\",\n price: { regular: 2.49 },\n size: \"20 oz\",\n soldBy: \"loaf\",\n },\n ],\n images: [\n {\n id: \"bread-img\",\n perspective: \"front\",\n default: true,\n sizes: [\n {\n id: \"bread-img-med\",\n size: \"medium\",\n url: \"https://images.unsplash.com/photo-1502741338009-cac2772e18bc?auto=format&fit=crop&w=200&q=80\",\n },\n ],\n },\n ],\n },\n {\n productId: \"bread-2\",\n description: \"Sourdough Bread\",\n brand: \"San Francisco Bakery\",\n items: [\n {\n itemId: \"bread-2-item\",\n price: { regular: 3.99 },\n size: \"24 oz\",\n soldBy: \"loaf\",\n },\n ],\n images: [\n {\n id: \"bread2-img\",\n perspective: \"front\",\n default: true,\n sizes: [\n {\n id: \"bread2-img-med\",\n size: \"medium\",\n url: \"https://images.unsplash.com/photo-1464306076886-debca5e8a6b0?auto=format&fit=crop&w=200&q=80\",\n },\n ],\n },\n ],\n },\n];\n\n// --- Story ---\nconst results = {\n milk: sampleProducts,\n eggs: sampleEggs,\n bread: sampleBread,\n \"empty search\": [],\n};\n\nconst allTerms = Object.keys(results);\n\nexport const Default: StoryObj = {\n render: (args) => {\n const [activeTerm, setActiveTerm] = useState(\"milk\");\n const [quantities, setQuantities] = useState>({});\n\n // Simulate ShoppingListCreator cursor movement\n return (\n

\n {allTerms.map((term) => (\n setActiveTerm(term)}\n style={{\n fontWeight: activeTerm === term ? \"bold\" : \"normal\",\n background: activeTerm === term ? \"#dbeafe\" : \"#fff\",\n border: \"1px solid #888\",\n borderRadius: 4,\n padding: \"2px 8px\",\n cursor: \"pointer\",\n }}\n data-testid={`term-btn-${term}`}\n >\n {term}\n \n ))}\n

\n \n setQuantities((q) => ({\n ...q,\n [product.productId]: newQty,\n }))\n }\n />\n

\n );\n },\n args: {},\n parameters: {\n layout: \"centered\",\n docs: {\n description: {\n story:\n \"A scrollable list of product results grouped by search term, with sticky headers. Click the buttons above to scroll to each section.\",\n },\n },\n },\n};\n",[],[409,440,447,563],{"_103":571,"_95":572,"_157":573,"_159":448,"_160":138,"_161":574,"_163":164,"_105":575,"_100":118,"_166":179,"_168":576,"_169":22,"_170":-5,"_171":577,"_98":578},"1bd504c4-4d8e-11f0-8f26-76b3cceeab13","ProductResultsList.tsx","8773c090-4d8d-11f0-ad37-76b3cceeab13",214,["D",1750393319588],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Product, ProductCardProps, ProductCard } from \"./ProductCard\";\n\ntype ProductResultsListProps = {\n /**\n * Mapping of search term to array of products.\n * Example: { \"milk\": [Product, ...], \"eggs\": [Product, ...] }\n */\n results: Record;\n /**\n * The currently active search term (for scroll-to-view).\n */\n activeTerm?: string;\n /**\n * Optional: map of productId to quantity (for highlighting/selection).\n */\n quantities?: Record;\n /**\n * Optional: called when a product's quantity changes.\n */\n onQuantityChange?: (product: Product, newQuantity: number) => void;\n /**\n * Optional: called when a product card is clicked.\n */\n onProductClick?: (product: Product) => void;\n /**\n * Optional: className for the scroll container.\n */\n className?: string;\n};\n\n/**\n * ProductResultsList\n * - Scrollable list of product results, grouped by search term.\n * - Sticky headers for each search term.\n * - Scrolls to activeTerm when it changes.\n */\nexport function ProductResultsList({\n results,\n activeTerm,\n quantities,\n onQuantityChange,\n onProductClick,\n className = \"\",\n}: ProductResultsListProps) {\n // Refs for each term header\n const termRefs = useRef>({});\n\n // Scroll to activeTerm when it changes\n useEffect(() => {\n if (activeTerm && termRefs.current[activeTerm]) {\n termRefs.current[activeTerm]!.scrollIntoView({\n behavior: \"smooth\",\n block: \"start\",\n });\n }\n }, [activeTerm]);\n\n // Render\n return (\n \n {Object.entries(results).map(([term, products]) => (\n

\n (termRefs.current[term] = el)}\n className=\"sticky top-0 z-20 px-4 py-2 border-b-4 border-black\"\n style={{\n background: \"#000\",\n color: \"#FFD600\",\n fontFamily: \"monospace\",\n fontWeight: \"bold\",\n fontSize: \"1.25rem\",\n textTransform: \"uppercase\",\n borderTop: \"4px solid #FFD600\",\n borderBottom: \"4px solid #000\",\n borderLeft: \"none\",\n borderRight: \"none\",\n marginBottom: 0,\n letterSpacing: \"0.03em\",\n }}\n data-testid={`results-header-${term}`}\n >\n RESULTS FOR:{\" \"}\n \n {term}\n \n

\n \n {products.length === 0 ? (\n \n NO RESULTS FOUND.\n \n ) : (\n products.map((product, idx) => (\n \n onQuantityChange(product, newQty)\n : undefined\n }\n className=\"w-full\"\n />\n \n ))\n )}\n \n \n ))}\n \n );\n}\n",[],[409,440,447,572],{"_103":580,"_95":581,"_157":582,"_159":448,"_160":138,"_161":583,"_163":164,"_105":584,"_100":32,"_166":179,"_168":585,"_169":22,"_170":-5,"_171":586,"_98":587},"87784f20-4d8d-11f0-a7ec-76b3cceeab13","ShoppingListCreator.stories.tsx","87784ff2-4d8d-11f0-a7ec-76b3cceeab13",200,["D",1750393070695],"import React from \"react\";\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport { ShoppingListCreator } from \"./ShoppingListCreator\";\n\nconst meta: Meta = {\n title: \"Components/ShoppingListCreator\",\n component: ShoppingListCreator,\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Default: Story = {\n render: () => {\n const [items, setItems] = React.useState([]);\n const [cursorLine, setCursorLine] = React.useState(null);\n\n return (\n

\n {\n setItems(value);\n // eslint-disable-next-line no-console\n console.log(\"onChange:\", value);\n }}\n onCursorLineChange={(line) => {\n setCursorLine(line);\n // eslint-disable-next-line no-console\n console.log(\"onCursorLineChange: line\", line);\n }}\n />\n

\n Current items:\n

\n              {JSON.stringify(items, null, 2)}\n

History for .eslintrc.cjs