@stackshift-ui/input-file 6.0.2 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/input-file",
   "description": "",
-  "version": "6.0.2",
+  "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"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,13 +29,13 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.2",
-    "@stackshift-ui/eslint-config": "6.0.2"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/scripts": "6.0.2"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

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

package/src/input-file.test.tsx

@@ -0,0 +1,15 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { InputFile } from "./input-file";
+
+describe.concurrent("input-file", () => {
+  afterEach(cleanup);
+
+  test("Common: Input File - test if renders without errors", ({ expect }) => {
+    const clx = "inputfile-class";
+    render(
+      <InputFile className={clx} name="stackshift-inputfile" ariaLabel="stackshift input file" />,
+    );
+    expect(screen.getByTestId("inputfile").classList).toBeDefined();
+  });
+});

package/src/input-file.tsx

@@ -0,0 +1,81 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import cn from "classnames";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import { useState } from "react";
+
+type StyleVariants<T extends string> = Record<T, string>;
+type Variant = "primary" | "outline";
+
+export interface InputFileProps extends Omit<HTMLProps<HTMLInputElement>, "as"> {
+  required?: boolean;
+  variant?: Variant;
+  name: string;
+  ariaLabel: string;
+  [key: string]: any;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "InputFile";
+
+export const InputFile: React.FC<InputFileProps> = ({
+  required = false,
+  variant = "primary",
+  name,
+  ariaLabel,
+  children,
+  className,
+  as,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const [filename, setFilename] = useState("");
+
+  const commonStyle =
+    "my-1 ml-auto cursor-pointer rounded px-4 py-3 text-xs font-semibold leading-none transition duration-200";
+  const primary = `${commonStyle} bg-primary-foreground hover:bg-primary`;
+  const outline = `${commonStyle} text-primary-foreground border border-solid border-primary-foreground hover:bg-slate-100`;
+
+  const variants: StyleVariants<Variant> = {
+    primary,
+    outline,
+  };
+
+  const variantClass = variants[variant] ?? primary;
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setFilename(file.name);
+    } else {
+      setFilename("");
+    }
+  };
+
+  return (
+    <div
+      className={"relative rounded bg-white px-2 w-full"}
+      data-testid={displayName?.toLowerCase()}>
+      <input
+        aria-label={ariaLabel ?? "Attach file"}
+        className="absolute w-full h-full opacity-0 cursor-pointer"
+        type="file"
+        name={name}
+        required={required}
+        id={name}
+        onChange={handleFileChange}
+        {...props}
+      />
+      <div className="flex">
+        <span className="px-2 py-4 text-xs font-semibold leading-none">{filename}</span>
+        <label htmlFor={name} className={cn(variantClass, className)}>
+          {name}
+        </label>
+      </div>
+    </div>
+  );
+};
+
+InputFile.displayName = displayName;