@fluidattacks/design 1.0.0 → 1.1.0

package/package.json

@@ -4,6 +4,18 @@
     "url": "https://gitlab.com/fluidattacks/universe/issues"
   },
   "description": "Fluidattacks core components library",
+  "dependencies": {
+    "@cloudinary/react": "1.13.0",
+    "@cloudinary/url-gen": "1.21.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "6.1.13"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "typescript": "5.6.2"
+  },
   "homepage": "https://gitlab.com/fluidattacks/universe#readme",
   "keywords": [
     "components",
@@ -19,5 +31,5 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.0.0"
+  "version": "1.1.0"
 }

package/src/components/cloud-image/index.tsx

@@ -0,0 +1,38 @@
+import type { Plugins } from "@cloudinary/html";
+import { AdvancedImage, lazyload, placeholder } from "@cloudinary/react";
+import React from "react";
+
+import { useCloudinaryImage } from "hooks";
+
+interface IImageProps {
+  alt?: string;
+  height?: number | string;
+  publicId: string;
+  width?: number | string;
+  plugins?: Plugins;
+}
+
+const CloudImage = ({
+  alt,
+  height,
+  publicId,
+  width,
+  plugins = [lazyload(), placeholder()],
+}: Readonly<IImageProps>): JSX.Element => {
+  const image = useCloudinaryImage({ publicId });
+
+  return (
+    <AdvancedImage
+      alt={alt ?? "img"}
+      cldImg={image}
+      height={height ?? ""}
+      plugins={plugins}
+      width={width ?? ""}
+    />
+  );
+};
+
+const MemoizedImage = React.memo(CloudImage);
+
+export type { IImageProps };
+export { MemoizedImage as CloudImage };

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+import { useCloudinaryImage } from "./use-cloudinary-image";
+
+export {useCloudinaryImage}

package/src/hooks/use-cloudinary-image.ts

@@ -0,0 +1,27 @@
+import type { CloudinaryImage } from "@cloudinary/url-gen";
+import { Cloudinary } from "@cloudinary/url-gen";
+import { useMemo } from "react";
+
+interface IUseCloudinaryImageProps {
+  publicId: string;
+  format?: string;
+}
+
+export const useCloudinaryImage = ({
+  publicId,
+  format = "webp",
+}: IUseCloudinaryImageProps): CloudinaryImage => {
+  const cloudinaryInstance = useMemo((): Cloudinary => {
+    return new Cloudinary({
+      cloud: {
+        cloudName: "fluid-attacks",
+      },
+    });
+  }, []);
+
+  const image = useMemo((): CloudinaryImage => {
+    return cloudinaryInstance.image(publicId).format(format);
+  }, [cloudinaryInstance, publicId, format]);
+
+  return image;
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["dom", "es2023"],
+    "paths": {
+      "components/*": [ "components/*" ],
+      "hooks/*": [ "hooks/*" ],
+    }
+  }
+}