@uxf/form - npm Package Compare versions

Comparing version 1.0.0-beta.59 to 1.0.0-beta.60

combobox/combobox.stories.js

@@ -10,2 +10,3 @@ "use strict";
 const combobox_1 = require("./combobox");
+const button_1 = require("@uxf/ui/button");
 exports.default = {
@@ -21,8 +22,12 @@ title: "Form/Combobox",
 function Default() {
-    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form", name: "combobox1", control: control, placeholder: "placeholder", options: options, id: "form-combobox", helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED..." }),
-        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form required", name: "combobox-required", control: control, placeholder: "placeholder", options: options, id: "form-combobox", isRequired: true, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED..." }),
-        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form disabled", name: "combobox-disabled", control: control, placeholder: "placeholder", options: options, id: "form-combobox", isDisabled: true }),
-        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form with dropdown top", dropdownPlacement: "top", name: "select-dropdown-top", control: control, placeholder: "placeholder", options: options, id: "form-combobox" })))));
+    const storyFormComboboxes = (control) => (react_1.default.createElement("div", { className: "space-y-8" },
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form", name: "combobox1", control: control, placeholder: "Placeholder", options: options, id: "form-combobox", helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED..." }),
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form required", name: "combobox-required", control: control, placeholder: "Placeholder", options: options, id: "form-combobox", isRequired: true, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED..." }),
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form disabled", name: "combobox-disabled", control: control, placeholder: "Placeholder", options: options, id: "form-combobox", isDisabled: true }),
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form with dropdown top", dropdownPlacement: "top", name: "select-dropdown-top", control: control, placeholder: "Placeholder", options: options, id: "form-combobox" }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormComboboxes(control)),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
 }
 exports.Default = Default;

form/form.stories.js

@@ -18,6 +18,10 @@ "use strict";
     // eslint-disable-next-line no-console
-    react_1.default.createElement(form_1.Form, { onSubmit: async (values) => console.log(values) }, (control) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: control, isRequired: true }),
-        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")))));
+    react_1.default.createElement(form_1.Form, { onSubmit: async (values) => console.log(values) }, (control) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light mb-4 space-y-4 p-4" },
+            react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: control, isRequired: true }),
+            react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")),
+        react_1.default.createElement("div", { className: "dark space-y-4 bg-gray-900 p-4" },
+            react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: control, isRequired: true }),
+            react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))))));
 }
 exports.Default = Default;

number-input/number-input.stories.js

@@ -10,2 +10,3 @@ "use strict";
 const form_1 = require("../storybook/form");
+const button_1 = require("@uxf/ui/button");
 exports.default = {
@@ -16,7 +17,12 @@ title: "Form/NumberInput",
 function Default() {
-    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
+    const storyFormNumberInputs = (control) => (react_1.default.createElement("div", { className: "light mb-4 space-y-4 p-4" },
         react_1.default.createElement(number_input_1.NumberInput, { label: "Default input", name: "default", control: control }),
         react_1.default.createElement(number_input_1.NumberInput, { label: "Required input", name: "required", control: control, isRequired: true }),
-        react_1.default.createElement(number_input_1.NumberInput, { label: "Dec\u00EDmal input", name: "decimal", decimalPlaces: 3, control: control })))));
+        react_1.default.createElement(number_input_1.NumberInput, { label: "Dec\u00EDmal input", name: "decimal", decimalPlaces: 3, control: control }),
+        react_1.default.createElement(number_input_1.NumberInput, { label: "max50 input", name: "max50", max: 50, control: control }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormNumberInputs(control)),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormNumberInputs(control))))));
 }
 exports.Default = Default;

package.json

 {
   "name": "@uxf/form",
-  "version": "1.0.0-beta.59",
+  "version": "1.0.0-beta.60",
   "description": "",
@@ -16,5 +16,5 @@ "publishConfig": {
   "dependencies": {
-    "@uxf/ui": "^1.0.0-beta.59",
+    "@uxf/ui": "^1.0.0-beta.60",
     "react-hook-form": "latest"
   }
 }

select/select.stories.js

@@ -10,2 +10,3 @@ "use strict";
 const form_1 = require("../storybook/form");
+const button_1 = require("@uxf/ui/button");
 exports.default = {
@@ -21,8 +22,12 @@ title: "Form/Select",
 function Default() {
-    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
+    const storyFormSelects = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
         react_1.default.createElement(select_1.Select, { label: "Select form", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select" }),
         react_1.default.createElement(select_1.Select, { label: "Select form disabled", name: "select-disabled", control: control, placeholder: "placeholder", options: options, id: "form-select", isDisabled: true }),
         react_1.default.createElement(select_1.Select, { label: "Select form with helper text", name: "select-helper-text", control: control, placeholder: "placeholder", options: options, id: "form-select", helperText: "Choose one option" }),
-        react_1.default.createElement(select_1.Select, { label: "Select form with dropdown top", dropdownPlacement: "top", name: "select-dropdown-top", control: control, placeholder: "placeholder", options: options, id: "form-select" })))));
+        react_1.default.createElement(select_1.Select, { label: "Select form with dropdown top", dropdownPlacement: "top", name: "select-dropdown-top", control: control, placeholder: "placeholder", options: options, id: "form-select" }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormSelects(control)),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormSelects(control))))));
 }
 exports.Default = Default;

text-input/text-input.stories.js

@@ -10,2 +10,3 @@ "use strict";
 const form_1 = require("../storybook/form");
+const button_1 = require("@uxf/ui/button");
 exports.default = {
@@ -16,9 +17,13 @@ title: "Form/TextInput",
 function Default() {
-    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: control }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Required input", name: "required", control: control, isRequired: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "E-mail required input", name: "email", type: "email", control: control, isRequired: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Phone required input", name: "phone", type: "tel", control: control, isRequired: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Password input", name: "password", type: "password", control: control })))));
+    const storyFormTextInputs = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(text_input_1.TextInput, { placeholder: "Zadejte ...", label: "Default input", name: "default", control: control }),
+        react_1.default.createElement(text_input_1.TextInput, { placeholder: "Zadejte ...", label: "Required input", name: "required", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { placeholder: "Zadejte ...", label: "E-mail required input", name: "email", type: "email", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { placeholder: "Zadejte ...", label: "Phone required input", name: "phone", type: "tel", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { placeholder: "Zadejte ...", label: "Password input", name: "password", type: "password", control: control }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormTextInputs(control)),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormTextInputs(control))))));
 }
 exports.Default = Default;

textarea/textarea.stories.js

@@ -10,2 +10,3 @@ "use strict";
 const textarea_1 = require("./textarea");
+const button_1 = require("@uxf/ui/button");
 exports.default = {
@@ -16,5 +17,10 @@ title: "Form/Textarea",
 function Default() {
-    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(textarea_1.Textarea, { label: "Textarea", name: "textarea", control: control, placeholder: "placeholder", form: "form-textarea" })))));
+    const storyFormTextAreas = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(textarea_1.Textarea, { label: "Textarea", name: "textarea", control: control, placeholder: "placeholder", form: "form-textarea" }),
+        react_1.default.createElement(textarea_1.Textarea, { label: "Textarea required", name: "textarea-required", control: control, placeholder: "placeholder", form: "form-textarea", isRequired: true }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormTextAreas(control)),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyFormTextAreas(control))))));
 }
 exports.Default = Default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47059

increased by38.23%

Number of package files

53

increased by29.27%

Lines of code

850

increased by31.99%

Dependency changes

• Updated@uxf/ui@^1.0.0-beta.60