set up repo

Author: mismosmi

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# build output
+/dist/

README.md

@@ -0,0 +1,21 @@
+# next-image-from-file
+
+A wrapper around [next/image](https://nextjs.org/docs/api-reference/next/image) that automatically sets `width` and `height`.
+
+This is useful in testing and development-environments where `next-image-loader` is not available (e.G. [storybook](https://storybook.js.org/)).
+
+## Usage
+
+### Storybook
+```js
+// .storybook/preview.js
+import * as NextImage from 'next/image'
+import NextImageFromFile from 'next-image-from-file'
+
+const OriginalNextImage = NextImage.default
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: NextImageFromFile
+})
+```

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "next-image-from-file",
+  "version": "0.1.0",
+  "description": "A wrapper around next/image that automatically sets width and height.",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/farbenmeer/next-image-from-file.git"
+  },
+  "author": "farbenmeer GmbH",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/farbenmeer/next-image-from-file/issues"
+  },
+  "homepage": "https://github.com/farbenmeer/next-image-from-file#readme",
+  "peerDependencies": {
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.22",
+    "@types/react-dom": "^17.0.9",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.4.3"
+  }
+}

src/index.tsx

@@ -0,0 +1,34 @@
+import Image, { ImageProps } from "next/image";
+import React from "react";
+
+export default function NextImageFromFile(props: ImageProps) {
+  const [image, setImage] = React.useState<null | {
+    width: number;
+    height: number;
+  }>(null);
+
+  if (typeof props.src !== "string" || (props.width && props.height)) {
+    return <Image {...props} unoptimized />;
+  }
+
+  if (!image)
+    return (
+      <img
+        src={props.src}
+        onLoad={(event) => {
+          const target = event.target as HTMLImageElement;
+          setImage({ width: target.width, height: target.height });
+        }}
+      />
+    );
+
+  return (
+    <Image
+      {...props}
+      src={props.src}
+      width={image.width}
+      height={image.height}
+      unoptimized
+    />
+  );
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+		"outDir": "./dist/",
+		"strictNullChecks": true,
+		"moduleResolution": "node",
+		"module": "commonjs",
+		"jsx": "react",
+		"target": "ES6",
+		"allowJs": true,
+		"declaration": true,
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"noImplicitAny": true
+	},
+	"include": ["next-env.d.ts", "src/**/*"],
+	"exclude": ["dist", "node_modules"]
+}