@codeperate/form-builder-react - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

FormBuilder/index.ts

@@ -6,2 +6,3 @@ import {
   MutableRefObject,
+  ReactElement,
 } from "react";
@@ -59,3 +60,3 @@ import { Columns } from "../utils/columns.utils";
 export type FormSchema = {
-  label?: string | false;
+  label?: string | ReactElement | false;
   items?: FormSchema;
@@ -62,0 +63,0 @@ widget: IWidget;

hooks/useFormWidget.ts

@@ -10,2 +10,3 @@ import {
   FormContext,
+  FormSchema,
   FormWidget,
@@ -24,3 +25,3 @@ FormWidgetOverride,
   const value = form.getValueByPath(valueSnap, path);
-  const schema = form.getSchema(schemaSnap, path);
+  const schema = form.getSchema(schemaSnap as FormSchema, path);
 
@@ -27,0 +28,0 @@ const overrideRef = useRef<FormWidgetOverride>();

ObjectWidget/ObjectWidget.stories.tsx

@@ -1,17 +0,16 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { fn } from '@storybook/test'
-import { FormBuilder } from '../FormBuilder/FormBuilder'
-import { FormWrapper } from '../FormWrapper'
-import { defineForm } from '../utils/defineForm.utils'
-import { NumberWidgetFn, ObjectWidgetFn, StringWidgetFn } from '../widgets'
+import { fn } from "@storybook/test";
+import { FormBuilder } from "../FormBuilder/FormBuilder";
+import { FormWrapper } from "../FormWrapper";
+import { defineForm } from "../utils/defineForm.utils";
+import { NumberWidgetFn, ObjectWidgetFn, StringWidgetFn } from "../widgets";
 const meta = {
   component: FormBuilder,
+} satisfies Meta<typeof FormBuilder>;
 
-} satisfies Meta<typeof FormBuilder>
+export default meta;
 
-export default meta
+type Story = StoryObj<typeof meta>;
 
-type Story = StoryObj<typeof meta>
-
 export const Default: Story = {
@@ -21,6 +20,13 @@ args: {
       widget: ObjectWidgetFn,
+      label: false,
       properties: {
         string: {
+          label: (
+            <div className="text-red-500">
+              <div>Hello</div>
+              <div>World</div>
+            </div>
+          ),
           widget: StringWidgetFn,
-          columns:12,
+          columns: 12,
           props: {
@@ -46,3 +52,2 @@ maxLength: 100,
   render: FormWrapper,
-
-}
+};

ObjectWidget/ObjectWidget.tsx

@@ -1,24 +0,34 @@
-import { memo } from 'react'
-import { FormWidgetProps } from '../FormBuilder'
-import { useFormWidget } from '../hooks/useFormWidget'
-import { columnClass } from '../utils/columns.utils'
-import { join } from '../utils/join.utils'
+import { memo } from "react";
+import { FormWidgetProps } from "../FormBuilder";
+import { useFormWidget } from "../hooks/useFormWidget";
+import { columnClass } from "../utils/columns.utils";
+import { join } from "../utils/join.utils";
 
-export const ObjectWidget = memo(function ObjectWidget({ path }: FormWidgetProps) {
-  const { schema } = useFormWidget<object>(path)
+export const ObjectWidget = memo(function ObjectWidget({
+  path,
+}: FormWidgetProps) {
+  const { schema } = useFormWidget<object>(path);
   return (
     <div className="grid grid-cols-12 max-md:grid-cols-2 gap-4">
-      { Object.entries(schema.properties ?? {}).map(([key, { columns, widget, label, required, props }]) => (
-        <div className={join('grid content-start', columnClass(columns ?? widget.columns ?? 6))} key={key}>
-          {label !== false && (
-            <label className="font-bold">
-              <span dangerouslySetInnerHTML={{ __html: label ?? key }}></span>
-              {required && <span className="text-red-600 ml-1">*</span>}
-            </label>
-          )}
-          <widget.component {...props} path={path.concat('.', key)} />
-        </div>
-      ))}
+      {Object.entries(schema.properties ?? {}).map(
+        ([key, { columns, widget, label, required, props }]) => (
+          <div
+            className={join(
+              "grid content-start",
+              columnClass(columns ?? widget.columns ?? 6)
+            )}
+            key={key}
+          >
+            {label !== false && (
+              <label className="font-bold">
+                <span>{label ?? key}</span>
+                {required && <span className="text-red-600 ml-1">*</span>}
+              </label>
+            )}
+            <widget.component {...props} path={path.concat(".", key)} />
+          </div>
+        )
+      )}
     </div>
-  )
-})
+  );
+});

package.json

 {
   "name": "@codeperate/form-builder-react",
   "private": false,
-  "version": "1.0.13",
+  "version": "1.0.14",
   "type": "module",
@@ -6,0 +6,0 @@ "module": "./index.ts",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47455

0.7%

Lines of code

1520

1.27%

No dependency changes