Revert "Remove PNG imports"

.storybook/main.js

@@ -88,6 +88,11 @@ module.exports = {
       ],
     });
 
+    config.module.rules.push({
+      test: /\.png$/i,
+      type: 'asset/resource'
+    });
+
     config.resolve.alias = {
       ...config.resolve.alias,
       '@': AppSourceDir,

__mocks__/png.ts

@@ -0,0 +1,2 @@
+export default 'PngURL';
+export const ReactComponent = 'div';

custom.d.ts

@@ -11,3 +11,8 @@ declare module '*.css' {
   const styles: { [className: string]: string };
   export default styles;
 }
+
+declare module '*.png' {
+  const value: any;
+  export = value;
+}

jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
   moduleNameMapper: {
     '.(css|less|scss)$': 'identity-obj-proxy',
     '\\.svg$': '<rootDir>/__mocks__/svg.ts',
+    '\\.png$': '<rootDir>/__mocks__/png.ts',
     '^@/(.*)$': '<rootDir>/src/$1',
     '^@test/(.*)$': '<rootDir>/test/$1',
   },

package.json

@@ -38,6 +38,7 @@
     "@babel/core": "7.20.2",
     "@mdx-js/react": "2.1.5",
     "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-image": "3.0.1",
     "@rollup/plugin-json": "5.0.1",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@rollup/plugin-typescript": "9.0.2",

rollup.config.mjs

@@ -2,6 +2,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
+import image from '@rollup/plugin-image';
 import dts from 'rollup-plugin-dts';
 import postcss from 'rollup-plugin-postcss';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
@@ -44,6 +45,7 @@ export default [
       svgr({ exportType: 'named' }),
       postcss(),
       terser(),
+      image(),
     ],
   },
   {

src/components/Map/Map.tsx

@@ -1,3 +1,7 @@
+import UrlIcon from 'leaflet/dist/images/marker-icon.png';
+import RetinaUrlIcon from 'leaflet/dist/images/marker-icon-2x.png';
+import ShadowUrlIcon from 'leaflet/dist/images/marker-shadow.png';
+import { icon } from 'leaflet';
 import {
   AttributionControl,
   MapContainer,
@@ -90,8 +94,19 @@ export const Map = ({
 
 type LocationMarkerProps = Pick<MapProps, 'markerLocation'>;
 function LocationMarker({ markerLocation }: LocationMarkerProps) {
+  const markerIcon = icon({
+    iconUrl: UrlIcon,
+    iconRetinaUrl: RetinaUrlIcon,
+    shadowUrl: ShadowUrlIcon,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  });
+
   return markerLocation ? (
-    <Marker position={locationToTuple(markerLocation)} />
+    <Marker
+      position={locationToTuple(markerLocation)}
+      icon={markerIcon}
+    />
   ) : null;
 }
 

yarn.lock

@@ -23,6 +23,7 @@ __metadata:
     "@radix-ui/react-popover": ^1.0.0
     "@react-hookz/web": ^19.0.0
     "@rollup/plugin-commonjs": 23.0.2
+    "@rollup/plugin-image": 3.0.1
     "@rollup/plugin-json": 5.0.1
     "@rollup/plugin-node-resolve": 15.0.1
     "@rollup/plugin-typescript": 9.0.2
@@ -3359,6 +3360,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-image@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@rollup/plugin-image@npm:3.0.1"
+  dependencies:
+    "@rollup/pluginutils": ^5.0.1
+    mini-svg-data-uri: ^1.4.4
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: a48e35f482189d27c608fb9ccc69128a70210cd3fa3ddcfa249fd99a337c9518bfd8bfce9da97cf4ee8c37833bdbfde76806603628036af79e4ea1d60c2e49f4
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-json@npm:5.0.1":
   version: 5.0.1
   resolution: "@rollup/plugin-json@npm:5.0.1"
@@ -14797,6 +14813,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mini-svg-data-uri@npm:^1.4.4":
+  version: 1.4.4
+  resolution: "mini-svg-data-uri@npm:1.4.4"
+  bin:
+    mini-svg-data-uri: cli.js
+  checksum: 997f1fbd8d59a70f03761e18626d335197a3479cb9d1ff75678e4b64b864d32a0b8fc18115eabde035e5299b8b4a354a78e57dd6ac10f9d604162a6170898d09
+  languageName: node
+  linkType: hard
+
 "minimalistic-assert@npm:^1.0.0, minimalistic-assert@npm:^1.0.1":
   version: 1.0.1
   resolution: "minimalistic-assert@npm:1.0.1"