Add fallback images

packages/core/package.json

@@ -1,16 +1,34 @@
 {
 	"name": "ipmc-core",
 	"packageManager": "[email protected]",
-	"main": "./dist",
 	"type": "module",
+	"main": "./dist/index.umd.cjs",
+	"module": "./dist/index.js",
+	"typings": "./dist/index.d.ts",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"require": "./dist/index.umd.cjs"
+		}
+	},
 	"scripts": {
-		"build": "tsc",
-		"watch": "tsc --watch"
+		"watch": "vite build --watch --mode dev",
+		"build": "vite build",
+		"test": "vitest run"
 	},
 	"devDependencies": {
 		"@types/react": "^18.3.1",
 		"@types/react-dom": "^18.3.0",
-		"typescript": "^5.4.5"
+		"terser": "^5.31.0",
+		"typescript": "^5.4.5",
+		"vite": "^5.2.11",
+		"vite-plugin-checker": "^0.6.4",
+		"vite-plugin-dts": "^3.9.1",
+		"vitest": "^1.6.0"
 	},
 	"dependencies": {
 		"@emotion/react": "^11.11.4",

packages/core/src/components/molecules/GridItems/MoviePosterGridItem.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import { IMovieMetaData } from "../../../service";
 import { Card, CardContent, CardMedia } from "@mui/material";
 import { useFileUrl } from "../../../hooks";
+import fallback from './no-poster.png';
 
 export function MoviePosterGridItem(props: { movie: IMovieMetaData }) {
-	const url = useFileUrl(props.movie.posters[0]?.cid);
+	const url = useFileUrl(props.movie.posters[0]?.cid, fallback);
 
 	return (
 		<Card sx={{ width: 240 }}>

packages/core/src/components/molecules/GridItems/MovieThumbnailGridItem.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import { Card, CardContent, CardMedia } from "@mui/material";
 import { IMovieMetaData } from "../../../service";
 import { useFileUrl } from "../../../hooks";
+import fallback from './no-thumbnail.png';
 
 export function MovieThumbnailGridItem(props: { movie: IMovieMetaData }) {
-	const url = useFileUrl(props.movie.thumbnails[0]?.cid);
+	const url = useFileUrl(props.movie.thumbnails[0]?.cid, fallback);
 
 	return (
 		<Card sx={{ width: 640 }}>

packages/core/src/hooks/useFileUrl.ts

@@ -1,7 +1,7 @@
 import { useApp } from "../components/pages/AppContext";
 
-export function useFileUrl(cid: string) {
+export function useFileUrl(cid?: string, fallback?: string): string | undefined {
 	const { ipfs } = useApp()
 
-	return ipfs.toUrl(cid);
+	return cid ? ipfs.toUrl(cid) : fallback ?? undefined;
 }

packages/core/src/types/index.d.ts

@@ -0,0 +1,2 @@
+declare module "*.jpg";
+declare module "*.png";

packages/core/tsconfig.json

@@ -1,37 +1,40 @@
 {
-  "compilerOptions": {
-    "allowJs": false,
-    "declaration": true,
-    "emitDecoratorMetadata": true,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",
-    "jsx": "react",
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable"
-    ],
-    "moduleResolution": "node",
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strictNullChecks": true,
-    "resolveJsonModule": true,
-    "module": "esnext",
-    "target": "ESNext",
-    "downlevelIteration": true,
-    "isolatedModules": true,
-  },
-  "include": [
-    "src",
-    "typings.d.ts",
-    "vite.config.ts",
-    ".eslintrc.js",
-    ".prettierrc.js"
-  ]
+	"compilerOptions": {
+		"sourceRoot": "./src",
+		"allowJs": false,
+		"declaration": true,
+		"emitDecoratorMetadata": true,
+		"emitDeclarationOnly": false,
+		"declarationMap": true,
+		"esModuleInterop": true,
+		"experimentalDecorators": true,
+		"forceConsistentCasingInFileNames": true,
+		"outDir": "./dist",
+		"jsx": "react",
+		"lib": [
+			"esnext",
+			"dom",
+			"dom.iterable"
+		],
+		"moduleResolution": "node",
+		"noImplicitAny": true,
+		"noImplicitReturns": true,
+		"noImplicitThis": true,
+		"noUnusedLocals": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strictNullChecks": true,
+		"resolveJsonModule": true,
+		"module": "esnext",
+		"target": "ESNext",
+		"downlevelIteration": true,
+		"isolatedModules": true,
+	},
+	"include": [
+		"src",
+		"typings.d.ts",
+		"vite.config.ts",
+		".eslintrc.js",
+		".prettierrc.js"
+	]
 }

packages/core/vite.config.ts

@@ -0,0 +1,43 @@
+/// <reference types="vitest" />
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import checker from 'vite-plugin-checker';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig(({ mode }) => ({
+	plugins: [
+		dts({
+			insertTypesEntry: true,
+		}),
+		checker({
+			typescript: { buildMode: true }
+		}),
+	],
+	build: {
+		lib: {
+			// Could also be a dictionary or array of multiple entry points
+			entry: resolve(__dirname, 'src/index.ts'),
+			name: 'Core',
+			fileName: 'index',
+		},
+		rollupOptions: {
+			preserveSymlinks: true,
+			external: ['helia', 'react', '@mui/material', '@mui/base', '@emotion/react'],
+			output: {
+				// Provide global variables to use in the UMD build
+				// for externalized deps
+				globals: {
+					helia: 'helia',
+					react: 'React',
+				},
+			},
+		},
+		emptyOutDir: mode !== 'dev',
+		sourcemap: mode == 'dev',
+		manifest: false,
+		minify: mode == 'dev' ? 'esbuild' : 'terser',
+	},
+	test: {
+		globals: true,
+	},
+}));