@stackshift-ui/form-field 6.0.13 → 7.0.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/form-field",
   "description": "",
-  "version": "6.0.13",
+  "version": "7.0.0-beta.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -13,7 +13,9 @@
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -33,32 +35,33 @@
     "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
-    "@stackshift-ui/checkbox": "6.0.11",
-    "@stackshift-ui/input-file": "6.0.12",
-    "@stackshift-ui/radio": "6.0.11",
-    "@stackshift-ui/input": "6.0.12",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/checkbox-group": "6.0.11",
-    "@stackshift-ui/select": "6.0.12",
-    "@stackshift-ui/radio-group": "6.0.11",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/textarea": "6.0.12"
+    "@stackshift-ui/input": "7.0.0-beta.0",
+    "@stackshift-ui/label": "1.0.0-beta.1",
+    "@stackshift-ui/checkbox-group": "7.0.0-beta.0",
+    "@stackshift-ui/input-file": "7.0.0-beta.0",
+    "@stackshift-ui/checkbox": "7.0.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/select": "7.0.0-beta.0",
+    "@stackshift-ui/radio": "7.0.0-beta.0",
+    "@stackshift-ui/textarea": "7.0.0-beta.0",
+    "@stackshift-ui/radio-group": "7.0.0-beta.0"
   },
   "peerDependencies": {
+    "@stackshift-ui/checkbox": ">=7.0.0-beta.0",
+    "@stackshift-ui/checkbox-group": ">=7.0.0-beta.0",
+    "@stackshift-ui/input": ">=7.0.0-beta.0",
+    "@stackshift-ui/input-file": ">=7.0.0-beta.0",
+    "@stackshift-ui/radio": ">=7.0.0-beta.0",
+    "@stackshift-ui/radio-group": ">=7.0.0-beta.0",
+    "@stackshift-ui/scripts": ">=6.1.0-beta.0",
+    "@stackshift-ui/select": ">=7.0.0-beta.0",
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@stackshift-ui/textarea": ">=7.0.0-beta.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/scripts": ">=6.0.10",
-    "@stackshift-ui/system": ">=6.0.11",
-    "@stackshift-ui/checkbox": ">=6.0.11",
-    "@stackshift-ui/checkbox-group": ">=6.0.11",
-    "@stackshift-ui/input": ">=6.0.12",
-    "@stackshift-ui/input-file": ">=6.0.12",
-    "@stackshift-ui/radio": ">=6.0.11",
-    "@stackshift-ui/radio-group": ">=6.0.11",
-    "@stackshift-ui/select": ">=6.0.12",
-    "@stackshift-ui/textarea": ">=6.0.12"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/form-field.test.tsx

@@ -1,4 +1,5 @@
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { afterEach, describe, test } from "vitest";
 import { FormField } from "./form-field";
 
@@ -7,7 +8,44 @@ describe.concurrent("form-field", () => {
 
   test("Common: Form Field - test if renders without errors", ({ expect }) => {
     const clx = "formfield-class";
-    render(<FormField className={clx} name="stackshift-formfield" />);
+    const { unmount } = render(
+      <FormField data-testid="textarea" className={clx} name="stackshift-formfield" />,
+    );
     expect(screen.getByTestId("textarea").classList).toContain(clx);
+    unmount();
+  });
+
+  test("Common: Form Field - test if renders with correct type", ({ expect }) => {
+    const { unmount } = render(
+      <FormField data-testid="inputText" type="inputText" name="stackshift-inputtext" />,
+    );
+    expect(screen.getByTestId("inputText").tagName.toLowerCase()).toBe("input");
+    unmount();
+  });
+
+  test("Common: Form Field - test if renders with correct label", ({ expect }) => {
+    const { unmount } = render(
+      <FormField
+        data-testid="inputText"
+        type="inputText"
+        name="stackshift-inputtext"
+        label="Stackshift Input Text"
+      />,
+    );
+    expect(screen.getByText("Stackshift Input Text")).toBeInTheDocument();
+    unmount();
+  });
+
+  test("Common: Form Field - test if renders with correct placeholder", ({ expect }) => {
+    const { unmount } = render(
+      <FormField
+        data-testid="inputText"
+        type="inputText"
+        name="stackshift-inputtext"
+        placeholder="Stackshift Input Text"
+      />,
+    );
+    expect(screen.getByPlaceholderText("Stackshift Input Text")).toBeInTheDocument();
+    unmount();
   });
 });

package/src/form-field.tsx

@@ -2,9 +2,15 @@ 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 { Label } from "@stackshift-ui/label";
+import { RadioGroup, RadioGroupItem } from "@stackshift-ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@stackshift-ui/select";
 import { Textarea } from "@stackshift-ui/textarea";
 import { FormTypes, Variant } from "./types";
 
@@ -49,31 +55,42 @@ export const FormField = ({
   switch (type) {
     case "inputRadio":
       return (
-        <RadioGroup noLabel={noLabel} label={label} name={name}>
+        <RadioGroup name={name} {...props}>
+          <Label>{label}</Label>
           {items?.map(item => (
-            <Radio key={item} ariaLabel={name} name={name} item={item} {...props} />
+            <div className="flex items-center gap-3">
+              {/* // <Radio key={item} ariaLabel={name} name={name} item={item} {...props} /> */}
+              <RadioGroupItem id={item} key={item} value={item} />
+              <Label htmlFor={item}>{item}</Label>
+            </div>
           ))}
         </RadioGroup>
       );
 
     case "inputSelect":
       return (
-        <Select
-          items={items}
-          label={label}
-          ariaLabel={label}
-          name={name}
-          required={required}
-          noLabel={noLabel}
-          {...props}
-        />
+        <Select name={name} {...props}>
+          <SelectTrigger>
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {items?.map(item => (
+              <SelectItem key={item} value={item}>
+                {item}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       );
 
     case "inputCheckbox":
       return (
-        <CheckboxGroup noLabel={noLabel} name={name} label={label}>
+        <CheckboxGroup noLabel={noLabel} name={name} label={label} {...props}>
           {items?.map(item => (
-            <Checkbox key={item} label={item} ariaLabel={name} name={name} item={item} {...props} />
+            <div className="flex flex-col gap-2 items-start">
+              <Checkbox id={item} key={item} name={item} {...props} />
+              <Label htmlFor={item}>{label}</Label>
+            </div>
           ))}
         </CheckboxGroup>
       );
@@ -83,32 +100,47 @@ export const FormField = ({
 
     case "textarea":
       return (
-        <Textarea
-          noLabel={noLabel}
-          ariaLabel={placeholder ?? name}
-          placeholder={placeholder}
-          name={name}
-          variant={variant}
-          required={required}
-          label={label}
-          {...props}
-        />
+        // <Textarea
+        //   noLabel={noLabel}
+        //   ariaLabel={placeholder ?? name}
+        //   placeholder={placeholder}
+        //   name={name}
+        //   variant={variant}
+        //   required={required}
+        //   label={label}
+        //   {...props}
+        // />
+        <div>
+          {!noLabel ? <Label htmlFor={name}>{label}</Label> : null}
+          <Textarea id={name} name={name} placeholder={placeholder} {...props}></Textarea>
+        </div>
       );
 
     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}
-        />
+        <div className="flex flex-col gap-2 items-start">
+          {!noLabel ? <Label htmlFor={name}>{label}</Label> : null}
+          <Input
+            id={name}
+            name={name}
+            placeholder={placeholder}
+            type={formType as "number" | "text" | "email" | "password"}
+            required={required}
+            {...props}
+          />
+        </div>
+        // <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/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+

package/dist/chunk-A7CS32FD.mjs

@@ -1 +0,0 @@
-import{Checkbox as x}from"@stackshift-ui/checkbox";import{CheckboxGroup as s}from"@stackshift-ui/checkbox-group";import{Input as d}from"@stackshift-ui/input";import{InputFile as f}from"@stackshift-ui/input-file";import{Radio as F}from"@stackshift-ui/radio";import{RadioGroup as k}from"@stackshift-ui/radio-group";import{Select as y}from"@stackshift-ui/select";import{Textarea as L}from"@stackshift-ui/textarea";import{jsx as e}from"react/jsx-runtime";var P=({type:l="textarea",items:a=[],name:r,label:t="",required:p,placeholder:n,textSize:b,noLabel:u,variant:m,...i})=>{let c={inputText:"text",inputEmail:"email",inputPassword:"password",inputNumber:"number",textarea:"textarea",inputFile:"file",inputRadio:"radio",inputCheckbox:"checkbox",inputSelect:"select"}[l];switch(l){case"inputRadio":return e(k,{noLabel:u,label:t,name:r,children:a==null?void 0:a.map(o=>e(F,{ariaLabel:r,name:r,item:o,...i},o))});case"inputSelect":return e(y,{items:a,label:t,ariaLabel:t,name:r,required:p,noLabel:u,...i});case"inputCheckbox":return e(s,{noLabel:u,name:r,label:t,children:a==null?void 0:a.map(o=>e(x,{label:o,ariaLabel:r,name:r,item:o,...i},o))});case"inputFile":return e(f,{ariaLabel:r,name:r,required:p,...i});case"textarea":return e(L,{noLabel:u,ariaLabel:n!=null?n:r,placeholder:n,name:r,variant:m,required:p,label:t,...i});default:return e(d,{noLabel:u,textSize:b,label:t||r,ariaLabel:t||r,required:p,name:r,placeholder:n,type:c,variant:m,...i})}};export{P as a};