\n \n \n\n",[],[356,363],{"_102":372,"_95":373,"_156":374,"_158":357,"_159":137,"_160":375,"_162":163,"_104":376,"_99":339,"_165":178,"_167":377,"_168":22,"_169":-5,"_170":378,"_98":379},"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",[],[356,373],{"_102":381,"_95":382,"_156":383,"_158":357,"_159":137,"_160":384,"_162":163,"_104":385,"_99":32,"_165":188,"_167":386,"_168":22,"_169":-5,"_170":387,"_98":388},"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",[],[356,382],[356],{"_102":391,"_95":392,"_156":393,"_158":-5,"_159":137,"_160":117,"_162":163,"_104":394,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":395,"_98":405},"a527b656-3c43-11f0-baed-9e149126039e","shared","f51258e7-ba5a-41ab-9356-127b9178fe98",["D",1748492167939],[396],{"_102":397,"_95":398,"_156":399,"_158":393,"_159":137,"_160":400,"_162":163,"_104":401,"_99":297,"_165":178,"_167":402,"_168":22,"_169":-5,"_170":403,"_98":404},"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",[],[392,398],[392],{"_102":407,"_95":408,"_156":409,"_158":-5,"_159":137,"_160":410,"_162":163,"_104":411,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":412,"_98":729},"868eda70-4d8d-11f0-b958-76b3cceeab13","ui-kit","868edb7e-4d8d-11f0-b958-76b3cceeab13",166,["D",1750393069165],[413,437,639,648,657,666,675,684,693,702,711,720],{"_102":414,"_95":155,"_156":415,"_158":409,"_159":137,"_160":416,"_162":163,"_104":417,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":418,"_98":436},"86a4ae2c-4d8d-11f0-8a7d-76b3cceeab13","86a4aeea-4d8d-11f0-8a7d-76b3cceeab13",167,["D",1750393069309],[419,427],{"_102":420,"_95":174,"_156":421,"_158":415,"_159":137,"_160":422,"_162":163,"_104":423,"_99":32,"_165":178,"_167":424,"_168":22,"_169":-5,"_170":425,"_98":426},"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",[],[408,155,174],{"_102":428,"_95":429,"_156":430,"_158":415,"_159":137,"_160":431,"_162":163,"_104":432,"_99":32,"_165":178,"_167":433,"_168":22,"_169":-5,"_170":434,"_98":435},"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",[],[408,155,429],[408,155],{"_102":438,"_95":439,"_156":440,"_158":409,"_159":137,"_160":441,"_162":163,"_104":442,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":443,"_98":638},"86b5ccfc-4d8d-11f0-9d77-76b3cceeab13","src","86b5cd92-4d8d-11f0-9d77-76b3cceeab13",168,["D",1750393069421],[444,604,621,629],{"_102":445,"_95":446,"_156":447,"_158":440,"_159":137,"_160":448,"_162":163,"_104":449,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":450,"_98":603},"86d7223a-4d8d-11f0-bcd0-76b3cceeab13","components","86d722f8-4d8d-11f0-bcd0-76b3cceeab13",170,["D",1750393069638],[451,460,470,479,488,497,506,515,524,533,542,551,560,569,578,587,595],{"_102":452,"_95":453,"_156":454,"_158":447,"_159":137,"_160":455,"_162":163,"_104":456,"_99":117,"_165":178,"_167":457,"_168":22,"_169":-5,"_170":458,"_98":459},"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",[],[408,439,446,453],{"_102":461,"_95":462,"_156":463,"_158":447,"_159":137,"_160":464,"_162":163,"_104":465,"_99":466,"_165":178,"_167":467,"_168":22,"_169":-5,"_170":468,"_98":469},"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",[],[408,439,446,462],{"_102":471,"_95":472,"_156":473,"_158":447,"_159":137,"_160":474,"_162":163,"_104":475,"_99":466,"_165":178,"_167":476,"_168":22,"_169":-5,"_170":477,"_98":478},"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",[],[408,439,446,472],{"_102":480,"_95":481,"_156":482,"_158":447,"_159":137,"_160":483,"_162":163,"_104":484,"_99":117,"_165":178,"_167":485,"_168":22,"_169":-5,"_170":486,"_98":487},"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",[],[408,439,446,481],{"_102":489,"_95":490,"_156":491,"_158":447,"_159":137,"_160":492,"_162":163,"_104":493,"_99":466,"_165":178,"_167":494,"_168":22,"_169":-5,"_170":495,"_98":496},"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",[],[408,439,446,490],{"_102":498,"_95":499,"_156":500,"_158":447,"_159":137,"_160":501,"_162":163,"_104":502,"_99":466,"_165":178,"_167":503,"_168":22,"_169":-5,"_170":504,"_98":505},"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",[],[408,439,446,499],{"_102":507,"_95":508,"_156":509,"_158":447,"_159":137,"_160":510,"_162":163,"_104":511,"_99":117,"_165":178,"_167":512,"_168":22,"_169":-5,"_170":513,"_98":514},"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",[],[408,439,446,508],{"_102":516,"_95":517,"_156":518,"_158":447,"_159":137,"_160":519,"_162":163,"_104":520,"_99":466,"_165":178,"_167":521,"_168":22,"_169":-5,"_170":522,"_98":523},"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",[],[408,439,446,517],{"_102":525,"_95":526,"_156":527,"_158":447,"_159":137,"_160":528,"_162":163,"_104":529,"_99":117,"_165":178,"_167":530,"_168":22,"_169":-5,"_170":531,"_98":532},"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",[],[408,439,446,526],{"_102":534,"_95":535,"_156":536,"_158":447,"_159":137,"_160":537,"_162":163,"_104":538,"_99":466,"_165":178,"_167":539,"_168":22,"_169":-5,"_170":540,"_98":541},"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",[],[408,439,446,535],{"_102":543,"_95":544,"_156":545,"_158":447,"_159":137,"_160":546,"_162":163,"_104":547,"_99":32,"_165":178,"_167":548,"_168":22,"_169":-5,"_170":549,"_98":550},"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",[],[408,439,446,544],{"_102":552,"_95":553,"_156":554,"_158":447,"_159":137,"_160":555,"_162":163,"_104":556,"_99":117,"_165":178,"_167":557,"_168":22,"_169":-5,"_170":558,"_98":559},"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",[],[408,439,446,553],{"_102":561,"_95":562,"_156":563,"_158":447,"_159":137,"_160":564,"_162":163,"_104":565,"_99":32,"_165":178,"_167":566,"_168":22,"_169":-5,"_170":567,"_98":568},"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",[],[408,439,446,562],{"_102":570,"_95":571,"_156":572,"_158":447,"_159":137,"_160":573,"_162":163,"_104":574,"_99":117,"_165":178,"_167":575,"_168":22,"_169":-5,"_170":576,"_98":577},"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",[],[408,439,446,571],{"_102":579,"_95":580,"_156":581,"_158":447,"_159":137,"_160":582,"_162":163,"_104":583,"_99":32,"_165":178,"_167":584,"_168":22,"_169":-5,"_170":585,"_98":586},"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

Key	Description
SESSION_SECRET	secret key used to sign cookies
KROGER_REDIRECT_URI
KROGER_CLIENT_SECRET
KROGER_CLIENT_ID	Kroger client ID

bgschiller

personalShopper

Environment variables