Richie
e78d88b2f3
Introduces a full Google-Maps-backed provider map for the arrangement wizard's ProvidersStep. Clicking a pin morphs it into a MapPopup at the same coord; pins within 70px of each other collapse into a cluster (ceiling at zoom 13) that opens a ClusterPopup list on click. Row clicks pan + zoom the map to the provider and open their MapPopup. Map-background click routes through an exit transition that fades the popup out before reappearing the pin, via a matching fade-in keyframe on the atom markers. Key additions: - @vis.gl/react-google-maps + @googlemaps/markerclusterer deps - ClusterMarker atom (count badge; verified / unverified palettes) - ClusterPopup molecule (image-free rows; verified icon aligned to name; right-aligned "From $X" column; verified-first sort) - ProviderMap organism (APIProvider + Map + imperative AdvancedMarker layer via createRoot for clusterer compatibility) Component changes: - MapPin: promoted verified palette (brand-700); name now required; name-only and price-only variants dropped; active prop removed in favour of organism-level state; SVG nub with fill+stroke replaces the CSS border-triangle trick so the outline is continuous - MapPopup: `exiting` prop drives close animation; click events stop propagation so the map's onClick can't clear state mid-interaction - ProviderData type gains optional `coords`; demo fixtures populated with real NSW/QLD lat/lng for all 7 providers - ProvidersStep demo route wires ProviderMap into the mapPanel slot Memory: - docs/memory/component-registry updated (ClusterMarker, ClusterPopup, ProviderMap added; MapPin + MapPopup refined; MapCard retired) - docs/memory/session-log captures arc across 2026-04-21/22 and flags next-session work: ProvidersStep polish, mobile layout for list-map WizardLayout, and demo deploy Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
79 lines
2.5 KiB
JSON
79 lines
2.5 KiB
JSON
{
|
|
"name": "fa-design-system",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"description": "Funeral Arranger Design System — React + MUI + Storybook",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc && vite build",
|
|
"preview": "vite preview",
|
|
"storybook": "storybook dev -p 6006",
|
|
"build:storybook": "storybook build",
|
|
"build:tokens": "node style-dictionary/config.js",
|
|
"type-check": "tsc --noEmit",
|
|
"lint": "eslint src/",
|
|
"lint:fix": "eslint src/ --fix",
|
|
"format": "prettier --write 'src/**/*.{ts,tsx}'",
|
|
"format:check": "prettier --check 'src/**/*.{ts,tsx}'",
|
|
"test": "vitest run --passWithNoTests",
|
|
"test:watch": "vitest",
|
|
"chromatic": "chromatic --exit-zero-on-changes --build-script-name=build:storybook",
|
|
"demo:dev": "vite -c vite.demo.config.ts",
|
|
"demo:build": "vite build -c vite.demo.config.ts",
|
|
"demo:publish": "npm run demo:build -- --mode arrangement && ./scripts/deploy-demo.sh arrangement",
|
|
"prepare": "husky"
|
|
},
|
|
"dependencies": {
|
|
"@emotion/react": "^11.13.0",
|
|
"@emotion/styled": "^11.13.0",
|
|
"@googlemaps/markerclusterer": "^2.6.2",
|
|
"@mui/icons-material": "^5.16.0",
|
|
"@mui/material": "^5.16.0",
|
|
"@mui/system": "^5.16.0",
|
|
"@vis.gl/react-google-maps": "^1.8.3",
|
|
"react": "^18.3.0",
|
|
"react-dom": "^18.3.0",
|
|
"react-router-dom": "^7.14.1",
|
|
"zustand": "^5.0.12"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.39.4",
|
|
"@playwright/mcp": "^0.0.68",
|
|
"@storybook/addon-a11y": "^8.6.14",
|
|
"@storybook/addon-designs": "^8.0.0",
|
|
"@storybook/addon-essentials": "^8.4.0",
|
|
"@storybook/addon-storysource": "^8.6.14",
|
|
"@storybook/blocks": "^8.4.0",
|
|
"@storybook/react": "^8.4.0",
|
|
"@storybook/react-vite": "^8.4.0",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@types/react": "^18.3.0",
|
|
"@types/react-dom": "^18.3.0",
|
|
"@vitejs/plugin-react": "^4.3.0",
|
|
"chromatic": "^11.29.0",
|
|
"eslint": "^9.39.4",
|
|
"eslint-config-prettier": "^10.1.8",
|
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
"eslint-plugin-react": "^7.37.5",
|
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
"husky": "^9.1.7",
|
|
"jsdom": "^29.0.1",
|
|
"lint-staged": "^16.4.0",
|
|
"prettier": "^3.8.1",
|
|
"storybook": "^8.4.0",
|
|
"style-dictionary": "^4.2.0",
|
|
"typescript": "^5.5.0",
|
|
"typescript-eslint": "^8.57.2",
|
|
"vite": "^5.4.0",
|
|
"vitest": "^4.1.2"
|
|
},
|
|
"lint-staged": {
|
|
"src/**/*.{ts,tsx}": [
|
|
"eslint --fix",
|
|
"prettier --write"
|
|
]
|
|
}
|
|
}
|