@stackshift-ui/form-field 6.0.2 → 6.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/form-field",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "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": {
@@ -32,16 +33,16 @@
     "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
+    "@stackshift-ui/checkbox-group": "6.0.3",
+    "@stackshift-ui/checkbox": "6.0.3",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/checkbox-group": "6.0.2",
-    "@stackshift-ui/checkbox": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/input": "6.0.2",
-    "@stackshift-ui/input-file": "6.0.2",
-    "@stackshift-ui/radio": "6.0.2",
-    "@stackshift-ui/select": "6.0.2",
-    "@stackshift-ui/radio-group": "6.0.2",
-    "@stackshift-ui/textarea": "6.0.2"
+    "@stackshift-ui/input": "6.0.4",
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/radio": "6.0.3",
+    "@stackshift-ui/input-file": "6.0.3",
+    "@stackshift-ui/textarea": "6.0.3",
+    "@stackshift-ui/radio-group": "6.0.3",
+    "@stackshift-ui/select": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/form-field.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { FormField } from "./form-field";
+
+describe.concurrent("form-field", () => {
+  afterEach(cleanup);
+
+  test("Common: Form Field - test if renders without errors", ({ expect }) => {
+    const clx = "formfield-class";
+    render(<FormField className={clx} name="stackshift-formfield" />);
+    expect(screen.getByTestId("textarea").classList).toContain(clx);
+  });
+});

package/src/form-field.tsx

@@ -0,0 +1,114 @@
+import { Checkbox } from "@stackshift-ui/checkbox";
+import { CheckboxGroup } from "@stackshift-ui/checkbox-group";
+import { Input } from "@stackshift-ui/input";
+import { InputFile } from "@stackshift-ui/input-file";
+import { Radio } from "@stackshift-ui/radio";
+import { RadioGroup } from "@stackshift-ui/radio-group";
+import { Select } from "@stackshift-ui/select";
+import { Textarea } from "@stackshift-ui/textarea";
+import { FormTypes, Variant } from "./types";
+
+type FormFieldProps = {
+  type?: FormTypes;
+  items?: string[];
+  variant?: Variant;
+  name: string;
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+  textSize?: "sm" | "md" | "lg";
+  noLabel?: boolean;
+  [key: string]: any;
+};
+
+export const FormField = ({
+  type = "textarea",
+  items = [],
+  name,
+  label = "",
+  required,
+  placeholder,
+  textSize,
+  noLabel,
+  variant,
+  ...props
+}: FormFieldProps) => {
+  const formType = {
+    inputText: "text",
+    inputEmail: "email",
+    inputPassword: "password",
+    inputNumber: "number",
+    textarea: "textarea",
+    inputFile: "file",
+    inputRadio: "radio",
+    inputCheckbox: "checkbox",
+    inputSelect: "select",
+  }[type];
+
+  switch (type) {
+    case "inputRadio":
+      return (
+        <RadioGroup noLabel={noLabel} label={label} name={name}>
+          {items?.map(item => (
+            <Radio key={item} ariaLabel={name} name={name} item={item} {...props} />
+          ))}
+        </RadioGroup>
+      );
+
+    case "inputSelect":
+      return (
+        <Select
+          items={items}
+          label={label}
+          ariaLabel={label}
+          name={name}
+          required={required}
+          noLabel={noLabel}
+          {...props}
+        />
+      );
+
+    case "inputCheckbox":
+      return (
+        <CheckboxGroup noLabel={noLabel} name={name} label={label}>
+          {items?.map(item => (
+            <Checkbox key={item} label={item} ariaLabel={name} name={name} item={item} {...props} />
+          ))}
+        </CheckboxGroup>
+      );
+
+    case "inputFile":
+      return <InputFile ariaLabel={name} name={name} required={required} {...props} />;
+
+    case "textarea":
+      return (
+        <Textarea
+          noLabel={noLabel}
+          ariaLabel={placeholder ?? name}
+          placeholder={placeholder}
+          name={name}
+          variant={variant}
+          required={required}
+          label={label}
+          {...props}
+        />
+      );
+
+    default:
+      return (
+        <Input
+          noLabel={noLabel}
+          textSize={textSize}
+          label={label || name}
+          ariaLabel={label || name}
+          required={required}
+          name={name}
+          placeholder={placeholder}
+          type={formType as "number" | "text" | "email" | "password"}
+          variant={variant}
+          {...props}
+        />
+      );
+  }
+};

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,12 @@
+export type Variant = "primary" | "secondary" | "outline";
+
+export type FormTypes =
+  | "inputText"
+  | "inputEmail"
+  | "inputPassword"
+  | "inputNumber"
+  | "textarea"
+  | "inputFile"
+  | "inputRadio"
+  | "inputCheckbox"
+  | "inputSelect";