@zauru-sdk/components 1.0.81 → 1.0.83

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.83](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.82...v1.0.83) (2024-08-01)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.82](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.81...v1.0.82) (2024-07-31)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.81](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.80...v1.0.81) (2024-07-31)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Form/RadioButtonGroup/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type RadioButtonProps = {
+    id?: string;
+    name?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    defaultValue?: string;
+    orientation?: "vertical" | "horizontal";
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    error?: string;
+    title?: string;
+    helpText?: string;
+    className?: string;
+};
+export declare const RadioButtonGroupWithoutValidation: (props: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButtonGroup: (props: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/index.d.ts

@@ -11,3 +11,4 @@ export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
+export * from "./RadioButtonGroup/index.js";

package/dist/cjs/Form/RadioButtonGroup/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButtonGroup = exports.RadioButtonGroupWithoutValidation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@zauru-sdk/icons");
+const redux_1 = require("@zauru-sdk/redux");
+const react_1 = require("react");
+const RadioButtonGroupWithoutValidation = (props) => {
+    const { id, name, options, defaultValue, orientation = "vertical", onChange, disabled = false, error, title, helpText, className, } = props;
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)(defaultValue);
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const handleChange = (event) => {
+        setSelectedValue(event.target.value);
+        onChange && onChange(event.target.value, event);
+    };
+    const containerClass = orientation === "vertical" ? "flex flex-col" : "flex flex-row space-x-5";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `radio-button-group ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), (0, jsx_runtime_1.jsx)("div", { className: containerClass, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: id ? `${id}-${option.value}` : undefined, name: name, value: option.value, checked: selectedValue === option.value, onChange: handleChange, disabled: disabled, className: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-700", children: option.label })] }, index))) }), helpText && ((0, jsx_runtime_1.jsxs)("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [(0, jsx_runtime_1.jsx)(icons_1.IdeaIconSVG, {}), showTooltip && ((0, jsx_runtime_1.jsx)("div", { className: "absolute mt-2 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] })), error && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-2 text-sm text-red-600", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
+};
+exports.RadioButtonGroupWithoutValidation = RadioButtonGroupWithoutValidation;
+const RadioButtonGroup = (props) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[props.name ?? "-1"];
+    props = { ...props, error };
+    return (0, jsx_runtime_1.jsx)(exports.RadioButtonGroupWithoutValidation, { ...props });
+};
+exports.RadioButtonGroup = RadioButtonGroup;

package/dist/cjs/Form/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./TextArea/index.js"), exports);
 __exportStar(require("./TextField/index.js"), exports);
 __exportStar(require("./TimePicker/index.js"), exports);
 __exportStar(require("./YesNo/index.js"), exports);
+__exportStar(require("./RadioButtonGroup/index.js"), exports);

package/dist/esm/Form/RadioButtonGroup/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+export const RadioButtonGroupWithoutValidation = (props) => {
+    const { id, name, options, defaultValue, orientation = "vertical", onChange, disabled = false, error, title, helpText, className, } = props;
+    const [selectedValue, setSelectedValue] = useState(defaultValue);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const handleChange = (event) => {
+        setSelectedValue(event.target.value);
+        onChange && onChange(event.target.value, event);
+    };
+    const containerClass = orientation === "vertical" ? "flex flex-col" : "flex flex-row space-x-5";
+    return (_jsxs("div", { className: `radio-button-group ${className}`, children: [title && (_jsx("label", { htmlFor: id, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), _jsx("div", { className: containerClass, children: options.map((option, index) => (_jsxs("label", { className: "flex items-center space-x-2", children: [_jsx("input", { type: "radio", id: id ? `${id}-${option.value}` : undefined, name: name, value: option.value, checked: selectedValue === option.value, onChange: handleChange, disabled: disabled, className: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" }), _jsx("span", { className: "text-sm text-gray-700", children: option.label })] }, index))) }), helpText && (_jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute mt-2 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] })), error && (_jsxs("p", { className: "mt-2 text-sm text-red-600", children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
+};
+export const RadioButtonGroup = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(RadioButtonGroupWithoutValidation, { ...props });
+};

package/dist/esm/Form/index.js

@@ -11,3 +11,4 @@ export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
+export * from "./RadioButtonGroup/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -33,11 +33,11 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^1.0.81",
-    "@zauru-sdk/hooks": "^1.0.81",
+    "@zauru-sdk/common": "^1.0.83",
+    "@zauru-sdk/hooks": "^1.0.83",
     "@zauru-sdk/icons": "^1.0.60",
-    "@zauru-sdk/types": "^1.0.81",
-    "@zauru-sdk/utils": "^1.0.81",
+    "@zauru-sdk/types": "^1.0.83",
+    "@zauru-sdk/utils": "^1.0.83",
     "framer-motion": "^11.0.8",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -47,5 +47,5 @@
     "react-select": "^5.8.0",
     "styled-components": "^5.3.5"
   },
-  "gitHead": "24f4eeb19473bf56b1681e21ca5d7db831429c4a"
+  "gitHead": "ee7c5a89327913cc2cb8755e215014e236e8799d"
 }

package/src/Form/RadioButtonGroup/index.tsx

@@ -0,0 +1,108 @@
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useState } from "react";
+
+type RadioButtonProps = {
+  id?: string;
+  name?: string;
+  options: { label: string; value: string }[];
+  defaultValue?: string;
+  orientation?: "vertical" | "horizontal";
+  onChange?: (
+    value: string,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  disabled?: boolean;
+  error?: string;
+  title?: string;
+  helpText?: string;
+  className?: string;
+};
+
+export const RadioButtonGroupWithoutValidation = (props: RadioButtonProps) => {
+  const {
+    id,
+    name,
+    options,
+    defaultValue,
+    orientation = "vertical",
+    onChange,
+    disabled = false,
+    error,
+    title,
+    helpText,
+    className,
+  } = props;
+
+  const [selectedValue, setSelectedValue] = useState<string | undefined>(
+    defaultValue
+  );
+
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedValue(event.target.value);
+    onChange && onChange(event.target.value, event);
+  };
+
+  const containerClass =
+    orientation === "vertical" ? "flex flex-col" : "flex flex-row space-x-5";
+
+  return (
+    <div className={`radio-button-group ${className}`}>
+      {title && (
+        <label
+          htmlFor={id}
+          className="block mb-1 text-sm font-medium text-gray-700"
+        >
+          {title}
+        </label>
+      )}
+      <div className={containerClass}>
+        {options.map((option, index) => (
+          <label key={index} className="flex items-center space-x-2">
+            <input
+              type="radio"
+              id={id ? `${id}-${option.value}` : undefined}
+              name={name}
+              value={option.value}
+              checked={selectedValue === option.value}
+              onChange={handleChange}
+              disabled={disabled}
+              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+            />
+            <span className="text-sm text-gray-700">{option.label}</span>
+          </label>
+        ))}
+      </div>
+      {helpText && (
+        <div
+          className="relative cursor-pointer"
+          onMouseEnter={() => setShowTooltip(true)}
+          onMouseLeave={() => setShowTooltip(false)}
+        >
+          <IdeaIconSVG />
+          {showTooltip && (
+            <div className="absolute mt-2 p-2 bg-white border rounded shadow text-black z-50">
+              {helpText}
+            </div>
+          )}
+        </div>
+      )}
+      {error && (
+        <p className="mt-2 text-sm text-red-600">
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const RadioButtonGroup = (props: RadioButtonProps) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <RadioButtonGroupWithoutValidation {...props} />;
+};

package/src/Form/index.ts

@@ -11,3 +11,4 @@ export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
+export * from "./RadioButtonGroup/index.js";