@stackshift-ui/image 1.0.0 → 6.0.3

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@stackshift-ui/image",
-  "version": "1.0.0",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "devDependencies": {
     "@testing-library/react": "^16.0.1",
@@ -26,12 +27,12 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "1.0.0",
-    "@stackshift-ui/typescript-config": "2.0.0"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
-    "@stackshift-ui/scripts": "1.0.0",
-    "@stackshift-ui/system": "2.0.0"
+    "@stackshift-ui/scripts": "6.0.2",
+    "@stackshift-ui/system": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/helper/index.ts

@@ -0,0 +1,14 @@
+import { Logo } from "../types";
+
+export const logoLink = (logo?: Logo) => {
+  if (logo?.internalLink && logo?.type === "linkInternal") {
+    if (logo?.internalLink?.toLowerCase()?.includes("home")) {
+      return "/";
+    }
+    return `/${logo.internalLink}`;
+  } else if (logo?.externalLink && logo?.type === "linkExternal") {
+    return logo?.externalLink ?? "/";
+  } else {
+    return "/";
+  }
+};

package/src/image.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Image } from "./image";
+
+describe.concurrent("image", () => {
+	afterEach(cleanup);
+
+	test("Dummy test - test if renders without errors", ({ expect }) => {
+		const clx = "my-class";
+		render(<Image className={clx} />);
+		expect(screen.getByTestId("image").classList).toContain(clx);
+	});
+});

package/src/image.tsx

@@ -0,0 +1,28 @@
+import { useStackShiftUIComponents } from "@stackshift-ui/system";
+import type { HTMLProps, ReactNode } from "react";
+
+export interface ImageProps extends HTMLProps<HTMLImageElement> {
+  children?: ReactNode;
+}
+
+/**
+ * Image component
+ *
+ * @example
+ * ```tsx
+ * <Image />
+ * ```
+ *
+ * @source - Source code
+ */
+const displayName = "Image";
+export const Image = ({ children, ...props }: ImageProps) => {
+  const components = useStackShiftUIComponents();
+  const { [displayName]: Component = "img" } = components;
+
+  return (
+    <Component {...props} data-testid="image">
+      {children}
+    </Component>
+  );
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./image";

package/src/types.ts

@@ -0,0 +1,11 @@
+export interface Logo extends ConditionalLink {
+  alt?: string;
+  linkTarget?: string;
+  image?: string;
+}
+
+export interface ConditionalLink {
+  type?: string;
+  internalLink?: string | null;
+  externalLink?: string | null;
+}