@fluidattacks/design 1.1.0 → 1.2.1

package/dist/src/components/cloud-image/index.d.ts

@@ -0,0 +1,12 @@
+import { Plugins } from '@cloudinary/html';
+import { default as React } from 'react';
+interface IImageProps {
+    alt?: string;
+    height?: number | string;
+    publicId: string;
+    width?: number | string;
+    plugins?: Plugins;
+}
+declare const MemoizedImage: React.MemoExoticComponent<({ alt, height, publicId, width, plugins, }: Readonly<IImageProps>) => JSX.Element>;
+export type { IImageProps };
+export default MemoizedImage;

package/dist/src/hooks/index.d.ts

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

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

@@ -0,0 +1,7 @@
+import { CloudinaryImage } from '@cloudinary/url-gen';
+interface IUseCloudinaryImageProps {
+    publicId: string;
+    format?: string;
+}
+export declare const useCloudinaryImage: ({ publicId, format, }: IUseCloudinaryImageProps) => CloudinaryImage;
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { default as CloudImage } from './components/cloud-image';

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+import { UserConfigExport } from 'vite';
+declare const viteConfig: UserConfigExport;
+export default viteConfig;

package/package.json

@@ -14,8 +14,12 @@
   "devDependencies": {
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
-    "typescript": "5.6.2"
+    "@vitejs/plugin-react-swc": "3.7.1",
+    "typescript": "5.6.2",
+    "vite-plugin-dts": "4.2.3",
+    "vite": "5.4.8"
   },
+  "files": ["dist"],
   "homepage": "https://gitlab.com/fluidattacks/universe#readme",
   "keywords": [
     "components",
@@ -23,13 +27,21 @@
     "fluidattacks"
   ],
   "license": "MPL-2.0",
+  "main": "dist/design.js",
+  "module": "dist/design.mjs",
+  "types": "dist/src/index.d.ts",
   "name": "@fluidattacks/design",
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://gitlab.com/fluidattacks/universe.git"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
-  "version": "1.1.0"
+  "version": "1.2.1"
 }

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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
-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

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