@isettingkit/business-rules 0.1.9 → 0.1.11

package/README.md

@@ -1,38 +1,173 @@
-# IDS - Starter
+# 📦 isettingkit-business-rules: Business Rule Components Library
 
-This project is a starter repository that can be used to develop and publish new Inube Design System components. With this repository the intention is that any design-system team member can start to develop a new component without starting from scratch.
+## Overview
 
-## Readme
+The **`isettingkit-business-rules`** library is designed to handle business rules and decision-making in frontend applications. It includes a variety of components to display, modify, and manage business rules, decisions, and conditions. This documentation covers the core components, their functionality, and how to integrate them.
 
-This readme contains the details of usage of the starter. Once you create a new repo based in this template in github, please change the content of the README and make it relatable to the component you are creating.
+---
 
-## Instructions of usage
+## 📚 Components
 
-### Package.json
+### 1. `getValueData`
 
-1. **name**: As you can see in the package.json file, the name of this package is "ids-starter". Please rename the name when you start your new project. Remember that all components are publish by the @inubekit organization in npm, so rename the package as @inubekit/{new-component-name}
-2. **description**: Complete the description about the component you are creating.
+#### Description
+The `getValueData` function extracts and formats the value data from a decision or condition element.
 
-### Environment variables
+#### Props
+- **element** (`IRuleDecision["decision"] | ICondition | undefined`): The decision or condition element to extract the value from.
 
-1. In order to control releases and package publishing, you will need to have a .env file with some environment variables.
-2. `GH_TOKEN`: Create this token in github.com, using your profile settings. This token requires the **repo** scope.
-3. `NPM_TOKEN`: Create this token in npmjs.com. You must ask the admin to add you as a organization admin prior to publish the package in npm.
+#### Usage Example
+```tsx
+const value = getValueData(decision.decision);
+```
 
-### Pull Requests
+### 2. BusinessRuleView
+#### Description
+BusinessRuleView renders a detailed view of a business rule, displaying decisions and conditions, along with their corresponding values.
 
-1. All PRs must have a semver label attached to it. This is the way the publishing and versioning process will use to know if a PR demands a major, minor or patch version to be created.
-2. To have these labels available, please run `npm run auto create-labels` to create them (you need to have already your `GH_TOKEN` in .env in order to make this command work).
+#### Props
+- **decision** (IRuleDecision): The business rule decision data.
+- **textValues** (IRulesFormTextValues): Text values for displaying labels and descriptions.
+#### Usage Example
+```tsx
+<BusinessRuleView
+  decision={ruleDecision}
+  textValues={textValues}
+/>
+```
 
-### Publishing
+### 3. BusinessRuleCard
+#### Description
+BusinessRuleCard is a card component used to display a business rule with options to view or delete the rule.
 
-Follow these steps to publish and release a new version of your package.
+#### Props
+- **children** (React.ReactNode): The content of the card.
+- **handleDelete** ((id: string) => void): Function to handle the deletion of a rule.
+- **handleView** ((id: string) => void): Function to handle viewing a rule.
+- **id (string)** : The ID of the business rule.
+#### Usage Example
+```tsx
+<BusinessRuleCard
+  id="rule1"
+  handleDelete={deleteRule}
+  handleView={viewRule}
+/>
+```
+### 4. RulesForm
+#### Description
+RulesForm is a form component for handling and submitting business rule decisions. It integrates with Formik for form validation and submission.
 
-Check that you're an admin in the repository (validate with your team leader) and **execute these scripts in a release branch**.
+#### Props
+- **id** (string): The unique ID for the form.
+- **decision** (IRuleDecision): The decision data for the form.
+- **onCloseModal** (() => void): Function to handle closing the modal.
+- **onCancel** (() => void): Function to handle cancelling the form.
+- **onSubmitEvent** ((dataDecision: IRuleDecision) => void): Function to handle submitting the form data.
+- **textValues** (IRulesFormTextValues): Text values for the form labels and descriptions.
+#### Usage Example
+```tsx
+<RulesForm
+  id="ruleForm1"
+  decision={ruleDecision}
+  onCloseModal={closeModal}
+  onCancel={cancelForm}
+  onSubmitEvent={submitDecision}
+/>
+```
 
-1. `npm run changelog`: this command will create a changelog for you, including in the document the changes that the current release will publish in the new version of the package and what should be the version number of the release. The number is calculated using the labels of all the PRs that are included in this new version (see the Pull Requests details above).
-2. `npm version <new-version>`: this command creates the new version (tag), deletes the /dist folder in your project and executes the build of the project and its files are stored in a new /dist folder.
-3. `git push -u origin <branch>`: this command pushes the commits of changelog and package.json with the new version to github.
-4. `npm run release`: this command executes a git push with the new version tag included and creates a new release in Github. **This step requires that you have your `GH_TOKEN` working**.
-5. `npm login`: you must be logged in with npm to continue the process.
-6. `npm publish`: with the new build already in /dist, you can now execute this command and the new package version will be published in npm. **This command requires tat you have you `NPM_TOKEN` working.** _Note_: if this first time you are publishing you should add `--access=public` flag to the command
+### 5. ReasonForChange
+#### Description
+ReasonForChange is a component that renders a textarea input to capture the reason for a change in a business rule.
+
+#### Props
+- **label** (string): The label for the textarea.
+- **labelText** (string): The label text to display.
+- **onHandleChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle textarea changes.
+- **placeholder** (string): The placeholder text for the textarea.
+- **required** (boolean): Indicates if the field is required.
+- **value** (string?): The value of the textarea (optional).
+#### Usage Example
+```tsx
+<ReasonForChange
+  label="Change Reason"
+  labelText="Reason for Change"
+  onHandleChange={handleChange}
+  placeholder="Enter reason for change"
+  required={true}
+/>
+```
+
+### 6. Term
+#### Description
+Term is a component used to handle the start and end dates of a business rule term. It allows for toggling between an open and closed term, and managing start and end dates.
+
+#### Props
+- **onHandleStartChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the change in start date.
+- **onHandleEndChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the change in end date.
+- **labelStart** (string): The label for the start date input.
+- **labelEnd** (string): The label for the end date input.
+- **checkedClosed** (boolean?): Whether the term is closed (optional).
+- **required** (boolean?): Whether the fields are required (optional).
+- **valueStart** (string?): The value for the start date (optional).
+- **valueEnd** (string?): The value for the end date (optional).
+#### Usage Example
+```tsx
+<Term
+  labelStart="Start Date"
+  labelEnd="End Date"
+  onHandleStartChange={handleStartChange}
+  onHandleEndChange={handleEndChange}
+/>
+```
+
+### 7. ToggleOption
+#### Description
+ToggleOption is a component that renders a toggle switch and displays additional content when the toggle is checked.
+
+#### Props
+- **checked** (boolean): The current checked state of the toggle.
+- **children** (React.ReactNode): The content to display when the toggle is checked.
+- **handleToggleChange** ((e: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the toggle change event.
+- **id** (string): The unique ID for the toggle.
+- **labelToggle** (string): The label for the toggle.
+- **name** (string): The name of the toggle input.
+- **valueToggle** (string?): The value of the toggle input (optional).
+#### Usage Example
+```tsx
+<ToggleOption
+  checked={isChecked}
+  handleToggleChange={handleToggleChange}
+  id="toggleOption1"
+  labelToggle="Enable Option"
+  name="optionToggle"
+/>
+```
+
+#### 🚀 How to Use
+#### 1. Installation
+Install the library using npm:
+
+```bash
+npm install isettingkit-business-rules
+```
+#### 2. Import Components
+Once installed, you can import and use the components like this:
+
+```tsx
+import { BusinessRuleView, BusinessRuleCard, RulesForm, ReasonForChange, Term, ToggleOption } from 'isettingkit-business-rules';
+```
+#### 3. Storybook Integration
+To visualize the components in action, we use Storybook. Storybook allows developers to interact with the components in isolation, view different states, and confirm that they behave as expected.
+
+You can run Storybook for this library by navigating to the project folder and using the following command:
+
+```bash
+npm run storybook
+```
+#### 📦 Available Components
+- **BusinessRuleView**: Displays a business rule's decision and conditions.
+- **BusinessRuleCard**: Displays a business rule in a card format with options to view or delete.
+- **RulesForm**: A form component for handling and submitting business rule decisions.
+- **ReasonForChange**: A textarea input for capturing the reason for a change.
+- **Term**: Manages the start and end dates for a business rule term.
+- **ToggleOption**: A toggle switch component with additional content.

package/dist/index.es.js

@@ -1,91 +1,92 @@
-import { jsxs as c, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { useFormik as N } from "formik";
-import { useState as D, useEffect as R } from "react";
-import { DecisionConditionRenderer as O, ValueValidationSchema as $, ValueHowToSetUp as T, ValueDataType as F } from "@isettingkit/input";
-import { Divider as y } from "@inubekit/divider";
-import { Stack as a } from "@inubekit/stack";
+import { jsxs as u, jsx as n, Fragment as A } from "react/jsx-runtime";
+import { useFormik as Q } from "formik";
+import { useState as v, useEffect as q } from "react";
+import { Divider as E } from "@inubekit/divider";
+import { Stack as i } from "@inubekit/stack";
 import { Text as x } from "@inubekit/text";
-import { Toggle as U } from "@inubekit/toggle";
-import { Textarea as _ } from "@inubekit/textarea";
-import { Date as A } from "@inubekit/date";
-import { Checkbox as q } from "@inubekit/checkbox";
-import { Button as L } from "@inubekit/button";
-import { DecisionViewConditionRenderer as E } from "@isettingkit/view";
-import { MdOutlineRemoveRedEye as B, MdOutlineDelete as Q } from "react-icons/md";
-import { Icon as H } from "@inubekit/icon";
-import { inube as G } from "@inubekit/foundations";
-import I from "styled-components";
-const P = (o) => {
+import { Toggle as $ } from "@inubekit/toggle";
+import { ValueHowToSetUp as C, DecisionConditionRenderer as j, ValueDataType as U } from "@isettingkit/input";
+import { Textarea as P } from "@inubekit/textarea";
+import { Date as z } from "@inubekit/date";
+import { Checkbox as Z } from "@inubekit/checkbox";
+import { Button as M } from "@inubekit/button";
+import { object as B, string as F, number as H } from "yup";
+import { DecisionViewConditionRenderer as V } from "@isettingkit/view";
+import { MdOutlineRemoveRedEye as J, MdOutlineDelete as K } from "react-icons/md";
+import { Icon as I } from "@inubekit/icon";
+import { inube as W } from "@inubekit/foundations";
+import G from "styled-components";
+const X = (t) => {
   const {
-    label: n,
-    labelText: i,
-    onHandleChange: l,
-    placeholder: d,
-    required: h,
-    value: u = ""
-  } = o, [r, g] = D(u);
-  return /* @__PURE__ */ c(a, { direction: "column", margin: "10px 4px", children: [
-    /* @__PURE__ */ e(x, { size: "large", appearance: "gray", weight: "bold", margin: "10px 0", children: i }),
-    /* @__PURE__ */ e(a, { margin: "10px 0", children: /* @__PURE__ */ e(
-      _,
+    label: e,
+    labelText: a,
+    onHandleChange: o,
+    placeholder: l,
+    required: m,
+    value: g = ""
+  } = t, [s, b] = v(g);
+  return /* @__PURE__ */ u(i, { direction: "column", margin: "10px 4px", children: [
+    /* @__PURE__ */ n(x, { size: "large", appearance: "gray", weight: "bold", margin: "10px 0", children: a }),
+    /* @__PURE__ */ n(i, { margin: "10px 0", children: /* @__PURE__ */ n(
+      P,
       {
         id: "reasonChange",
-        label: n,
+        label: e,
         onChange: (p) => {
-          g(p.target.value), l(p);
+          b(p.target.value), o(p);
         },
-        placeholder: d,
-        required: h,
-        value: r,
+        placeholder: l,
+        required: m,
+        value: s,
         maxLength: 120,
         fullwidth: !0
       }
     ) })
   ] });
-}, Z = (o) => {
+}, Y = (t) => {
   const {
-    checked: n,
-    children: i,
-    handleToggleChange: l,
-    id: d,
-    labelToggle: h,
-    name: u,
-    valueToggle: r = ""
-  } = o, [g, C] = D(n), p = (f) => {
-    C(f.target.checked), l(f);
+    checked: e,
+    children: a,
+    handleToggleChange: o,
+    id: l,
+    labelToggle: m,
+    name: g,
+    valueToggle: s = ""
+  } = t, [b, f] = v(e), p = (S) => {
+    f(S.target.checked), o(S);
   };
-  return R(() => {
-    C(n);
-  }, [n]), /* @__PURE__ */ c(j, { children: [
-    /* @__PURE__ */ e(
-      U,
+  return q(() => {
+    f(e);
+  }, [e]), /* @__PURE__ */ u(A, { children: [
+    /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(
+      $,
       {
-        checked: g,
-        id: d,
+        checked: b,
+        id: l,
         margin: "10px",
-        name: u,
+        name: g,
         onChange: p,
         size: "small",
-        value: r,
-        children: /* @__PURE__ */ e(x, { size: "medium", type: "label", weight: "bold", children: h })
+        value: s,
+        children: /* @__PURE__ */ n(x, { size: "medium", type: "label", weight: "bold", children: m })
       }
-    ),
-    g && /* @__PURE__ */ e(j, { children: i })
+    ) }),
+    b && /* @__PURE__ */ n(A, { children: a })
   ] });
-}, J = (o) => {
+}, ee = (t) => {
   const {
-    onHandleStartChange: n,
-    onHandleEndChange: i,
-    labelStart: l,
-    labelEnd: d,
-    checkedClosed: h = !1,
-    required: u = !1,
-    valueStart: r = "",
-    valueEnd: g = ""
-  } = o, [C, p] = D(h), [f, w] = D(r), [S, k] = D(g);
-  return /* @__PURE__ */ c(j, { children: [
-    /* @__PURE__ */ c(a, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
-      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+    onHandleStartChange: e,
+    onHandleEndChange: a,
+    labelStart: o,
+    labelEnd: l,
+    checkedClosed: m = !1,
+    required: g = !1,
+    valueStart: s = "",
+    valueEnd: b = ""
+  } = t, [f, p] = v(m), [S, k] = v(s), [T, w] = v(b);
+  return /* @__PURE__ */ u(A, { children: [
+    /* @__PURE__ */ u(i, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
+      /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(
         x,
         {
           appearance: "gray",
@@ -96,305 +97,385 @@ const P = (o) => {
           children: "Vigencia"
         }
       ) }),
-      /* @__PURE__ */ e(
-        a,
+      /* @__PURE__ */ n(
+        i,
         {
           alignContent: "center",
           justifyContent: "center",
           wrap: "wrap",
           gap: "4px",
-          children: /* @__PURE__ */ e(
-            q,
+          children: /* @__PURE__ */ n(
+            Z,
             {
               label: "Cerrada",
-              onChange: ({ target: t }) => {
-                p(t.checked);
+              onChange: ({ target: c }) => {
+                p(c.checked);
               },
-              checked: C,
+              checked: f,
               value: ""
             }
           )
         }
       )
     ] }),
-    /* @__PURE__ */ c(a, { justifyContent: "space-between", gap: "24px", children: [
-      /* @__PURE__ */ e(a, { width: "189px", children: /* @__PURE__ */ e(
-        A,
+    /* @__PURE__ */ u(i, { justifyContent: "space-between", gap: "24px", children: [
+      /* @__PURE__ */ n(i, { width: "189px", children: /* @__PURE__ */ n(
+        z,
         {
           id: "dateStart",
-          label: l,
-          onChange: (t) => {
-            w(t.target.value), n(t);
+          label: o,
+          onChange: (c) => {
+            k(c.target.value), e(c);
           },
-          value: f,
-          required: u,
+          value: S,
+          required: g,
           size: "compact"
         }
       ) }),
-      C && /* @__PURE__ */ e(a, { width: "189px", children: /* @__PURE__ */ e(
-        A,
+      f && /* @__PURE__ */ n(i, { width: "189px", children: /* @__PURE__ */ n(
+        z,
         {
           id: "dateEnd",
-          label: d,
-          onChange: (t) => {
-            k(t.target.value), i(t);
+          label: l,
+          onChange: (c) => {
+            w(c.target.value), a(c);
           },
-          value: S,
-          required: u,
+          value: T,
+          required: g,
           size: "compact"
         }
       ) })
     ] })
   ] });
-}, K = (o) => {
-  var m;
+}, _ = (t) => {
+  var l;
+  const e = t.possibleValue, a = typeof (e == null ? void 0 : e.rangeFrom) == "number" ? e.rangeFrom : 0, o = typeof (e == null ? void 0 : e.rangeTo) == "number" ? e.rangeTo : 1 / 0;
+  switch (t.howToSetUp) {
+    case C.LIST_OF_VALUES:
+      return {
+        schema: F(),
+        value: (l = e.listSelected) == null ? void 0 : l[0]
+      };
+    case C.LIST_OF_VALUES_MULTI:
+      return {
+        schema: F(),
+        value: ""
+      };
+    case C.RANGE:
+      return {
+        schema: B({
+          rangeFrom: H().required("Range From is required").max(
+            o,
+            "'Range From' cannot be greater than 'Range To'"
+          ).min(0, "'Range From' cannot be less than 0"),
+          rangeTo: H().required("Range To is required").min(a, "'Range To' cannot be less than 'Range From'").min(0, "'Range To' cannot be less than 0")
+        }),
+        value: {
+          rangeFrom: a,
+          rangeTo: o
+        }
+      };
+    case C.GREATER_THAN:
+    case C.LESS_THAN:
+    case C.EQUAL:
+      return {
+        schema: F().required("Required"),
+        value: e.value
+      };
+    default:
+      return {
+        schema: F(),
+        value: void 0
+      };
+  }
+}, ne = (t) => {
+  const e = {}, a = {};
+  if (t.decision) {
+    const o = _(t.decision);
+    o && (e[t.decision.name] = o.schema, a[t.decision.name] = o.value);
+  }
+  return t.conditions && t.conditions.forEach((o) => {
+    const l = _(o);
+    l && (e[o.name] = l.schema, a[o.name] = l.value);
+  }), { validationSchema: B().shape(e), initialValues: a };
+}, L = (t) => {
+  if (typeof t == "string")
+    return t;
+  if (typeof t == "object" && ("rangeFrom" in t || "rangeTo" in t))
+    return {
+      rangeFrom: t.rangeFrom || "",
+      rangeTo: t.rangeTo || ""
+    };
+  for (const e in t)
+    if (Object.prototype.hasOwnProperty.call(t, e)) {
+      const a = L(t[e]);
+      if (a) return a;
+    }
+  return "";
+}, te = (t) => {
+  var c;
   const {
-    decision: n,
-    formik: i,
-    onChangeCondition: l,
-    onChangeDecision: d,
-    onStartChange: h,
-    onEndChange: u,
-    textValues: r,
-    onCancel: g,
-    onSubmit: C
-  } = o, [p, f] = D(!1), [w, S] = D(!0), k = (t) => {
-    f(t.target.checked);
-  }, v = (t) => {
-    t.target.value ? S(!1) : S(!0);
-  }, s = (t, b) => t.errors[b] ? "invalid" : "pending";
-  return /* @__PURE__ */ c(a, { direction: "column", gap: "24px", children: [
-    /* @__PURE__ */ c(a, { direction: "column", gap: "16", children: [
-      /* @__PURE__ */ e(x, { weight: "bold", size: "medium", children: r.criteria }),
-      n.decision && /* @__PURE__ */ e(
-        O,
+    decision: e,
+    formik: a,
+    onChangeCondition: o,
+    onChangeDecision: l,
+    onStartChange: m,
+    onEndChange: g,
+    textValues: s,
+    onCancel: b,
+    onSubmit: f
+  } = t, [p, S] = v(!1), [k, T] = v(!0);
+  q(() => {
+    console.log("Updated formik.errors in RulesFormUI:", a.errors);
+  }, [a.errors]);
+  const w = (r) => {
+    S(r.target.checked);
+  }, y = (r) => {
+    r.target.value ? T(!1) : T(!0);
+  }, D = (r) => {
+    const h = L(a.errors[r] || {});
+    return typeof h == "string" ? h ? "invalid" : "pending" : h;
+  }, d = (r) => {
+    const h = L(a.errors[r] || {});
+    return h;
+  };
+  return /* @__PURE__ */ u(i, { direction: "column", gap: "24px", children: [
+    /* @__PURE__ */ u(i, { direction: "column", gap: "16", children: [
+      /* @__PURE__ */ n(x, { weight: "bold", size: "medium", children: s.criteria }),
+      e.decision && /* @__PURE__ */ n(
+        j,
         {
-          element: n.decision,
-          onDecision: d,
-          valueData: i.values[n.decision.name],
-          message: i.errors[n.decision.name],
-          status: s(i, n.decision.name),
+          element: e.decision,
+          onDecision: l,
+          valueData: a.values[e.decision.name],
+          message: a.errors[e.decision.name],
+          status: D(e.decision.name),
           textValues: {
             selectOptions: "Select an option",
             selectOption: "Option selected",
-            rangeMin: (t) => `Minimum ${t}`,
-            rangeMax: (t) => `Maximum ${t}`
+            rangeMin: (r) => `Minimum ${r}`,
+            rangeMax: (r) => `Maximum ${r}`
           }
         }
       )
     ] }),
-    /* @__PURE__ */ e(y, { dashed: !0 }),
-    /* @__PURE__ */ c(a, { direction: "column", children: [
-      /* @__PURE__ */ c(a, { direction: "row", gap: "16px", justifyContent: "space-between", children: [
-        /* @__PURE__ */ e(x, { children: r.factsThatConditionIt }),
-        /* @__PURE__ */ e(
-          U,
+    /* @__PURE__ */ n(E, { dashed: !0 }),
+    /* @__PURE__ */ u(i, { direction: "column", children: [
+      /* @__PURE__ */ u(i, { direction: "row", gap: "16px", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(x, { children: s.factsThatConditionIt }),
+        /* @__PURE__ */ n(
+          $,
           {
             id: "toogleNone",
-            onChange: k,
+            onChange: w,
             checked: p,
             size: "small",
-            children: /* @__PURE__ */ e(x, { size: "medium", type: "label", weight: "bold", children: r.none })
+            children: /* @__PURE__ */ n(x, { size: "medium", type: "label", weight: "bold", children: s.none })
           }
         )
       ] }),
-      n.conditions && n.conditions.map((t) => /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
-        Z,
+      e.conditions && e.conditions.map((r) => /* @__PURE__ */ n(i, { direction: "column", children: /* @__PURE__ */ n(
+        Y,
         {
           checked: !p,
-          handleToggleChange: (b) => {
-            b.target.checked || l(
+          handleToggleChange: (h) => {
+            h.target.checked || o(
               {
                 value: "",
                 rangeTo: 0,
                 rangeFrom: 0,
-                list: t.possibleValue.list
+                list: r.possibleValue.list
               },
-              t.name
+              r.name
             );
           },
-          id: t.name.replace(" ", ""),
-          labelToggle: t.name.split(/(?=[A-Z])/).join(" "),
-          name: t.name.replace(" ", ""),
-          children: /* @__PURE__ */ e(
-            O,
+          id: r.name.replace(" ", ""),
+          labelToggle: r.name.split(/(?=[A-Z])/).join(" "),
+          name: r.name.replace(" ", ""),
+          children: /* @__PURE__ */ n(
+            j,
             {
-              element: t,
-              onDecision: l,
-              valueData: i.values[t.name],
-              message: i.errors[t.name],
-              status: s(i, t.name),
+              element: r,
+              onDecision: o,
+              valueData: a.values[r.name],
+              message: d(r.name),
+              status: D(r.name),
               textValues: {
                 selectOptions: "Select an option",
                 selectOption: "Option selected",
-                rangeMin: (b) => `Minimum ${b}`,
-                rangeMax: (b) => `Maximum ${b}`
+                rangeMin: (h) => `Minimum ${h}`,
+                rangeMax: (h) => `Maximum ${h}`
               }
             }
           )
         }
-      ) }, t.name))
+      ) }, r.name))
     ] }),
-    /* @__PURE__ */ e(y, { dashed: !0 }),
-    /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
-      P,
+    /* @__PURE__ */ n(E, { dashed: !0 }),
+    /* @__PURE__ */ n(i, { direction: "column", children: /* @__PURE__ */ n(
+      X,
       {
-        label: r.reasonForChange,
-        labelText: r.change,
-        onHandleChange: v,
-        placeholder: r.changePlaceholder,
+        label: s.reasonForChange,
+        labelText: s.change,
+        onHandleChange: y,
+        placeholder: s.changePlaceholder,
         required: !0
       }
     ) }),
-    /* @__PURE__ */ e(y, { dashed: !0 }),
-    /* @__PURE__ */ e(a, { direction: "column", children: n.decision && /* @__PURE__ */ e(
-      J,
+    /* @__PURE__ */ n(E, { dashed: !0 }),
+    /* @__PURE__ */ n(i, { direction: "column", children: e.decision && /* @__PURE__ */ n(
+      ee,
       {
-        onHandleStartChange: (t) => h(t.target.value),
-        onHandleEndChange: (t) => u(t.target.value),
-        labelStart: r.termStart,
-        labelEnd: r.termEnd,
-        checkedClosed: !!n.decision.endDate,
-        valueStart: n.decision.startDate.toLocaleDateString(
+        onHandleStartChange: (r) => m(r.target.value),
+        onHandleEndChange: (r) => g(r.target.value),
+        labelStart: s.termStart,
+        labelEnd: s.termEnd,
+        checkedClosed: !!e.decision.endDate,
+        valueStart: e.decision.startDate.toLocaleDateString(
           "en-CA"
         ),
-        valueEnd: ((m = n.decision.endDate) == null ? void 0 : m.toLocaleDateString("en-CA")) || ""
+        valueEnd: ((c = e.decision.endDate) == null ? void 0 : c.toLocaleDateString("en-CA")) || ""
       }
     ) }),
-    /* @__PURE__ */ e(y, { dashed: !0 }),
-    /* @__PURE__ */ c(a, { direction: "row", justifyContent: "end", gap: "16px", children: [
-      /* @__PURE__ */ e(L, { appearance: "gray", onClick: g, children: r.cancel }),
-      /* @__PURE__ */ e(
-        L,
+    /* @__PURE__ */ n(E, { dashed: !0 }),
+    /* @__PURE__ */ u(i, { direction: "row", justifyContent: "end", gap: "16px", children: [
+      /* @__PURE__ */ n(M, { appearance: "gray", onClick: b, children: s.cancel }),
+      /* @__PURE__ */ n(
+        M,
         {
-          onClick: C,
-          disabled: w || !i.isValid,
+          onClick: f,
+          disabled: k || !a.isValid,
           type: "submit",
-          children: r.confirm
+          children: s.confirm
         }
       )
     ] })
   ] });
-}, Ce = (o) => {
-  const { id: n, decision: i, onCancel: l, onSubmitEvent: d, textValues: h } = o, [u, r] = D(i), g = (s, m) => {
-    r((t) => {
-      var z;
-      const b = (z = t == null ? void 0 : t.conditions) == null ? void 0 : z.map((V) => V.name === m ? { ...V, value: s } : V);
-      return { ...t, conditions: b };
+}, De = (t) => {
+  const { id: e, decision: a, onCancel: o, onSubmitEvent: l, textValues: m } = t, [g, s] = v(a), b = (d, c) => {
+    y.setFieldValue(d, c), y.validateField(d);
+  }, f = (d, c) => {
+    s((r) => {
+      var O;
+      const h = (O = r == null ? void 0 : r.conditions) == null ? void 0 : O.map((R) => R.name === c ? { ...R, value: d } : R);
+      return b(c, d), { ...r, conditions: h };
     });
-  }, C = (s) => {
-    r(
-      (m) => v(m, "value", s)
+  }, p = (d) => {
+    s(
+      (c) => D(c, "value", d)
     );
-  }, p = (s) => {
-    r(
-      (m) => v(m, "endDate", new Date(s))
+  }, S = (d) => {
+    s(
+      (c) => D(c, "endDate", new Date(d))
     );
-  }, f = (s) => {
-    r(
-      (m) => v(m, "startDate", new Date(s))
+  }, k = (d) => {
+    s(
+      (c) => D(c, "startDate", new Date(d))
     );
-  }, { validationSchema: w, initialValues: S } = $(u), k = N({
-    initialValues: S,
-    validationSchema: w,
-    validateOnChange: !1,
+  }, { validationSchema: T, initialValues: w } = ne(g);
+  T.validate(w, { abortEarly: !1 }).then(() => console.log("Validation passed")).catch((d) => console.log("Validation failed:", d.errors));
+  const y = Q({
+    initialValues: w,
+    validationSchema: T,
+    validateOnChange: !0,
+    validateOnBlur: !0,
     onSubmit: () => {
-      d(u);
+      l(g);
     }
-  }), v = (s, m, t) => ({
-    ...s,
-    decision: { ...s.decision, [m]: t }
+  }), D = (d, c, r) => ({
+    ...d,
+    decision: { ...d.decision, [c]: r }
   });
-  return /* @__PURE__ */ e(
-    K,
+  return /* @__PURE__ */ n(
+    te,
     {
-      id: n,
-      formik: k,
-      decision: u,
-      onCancel: l,
-      onSubmit: () => d(u),
-      onChangeCondition: g,
-      onChangeDecision: C,
-      onStartChange: f,
-      onEndChange: p,
-      textValues: h
+      id: e,
+      formik: y,
+      decision: g,
+      onCancel: o,
+      onSubmit: () => l(g),
+      onChangeCondition: f,
+      onChangeDecision: p,
+      onStartChange: k,
+      onEndChange: S,
+      textValues: m
     }
   );
-}, M = (o) => {
-  if (!o)
+}, N = (t) => {
+  if (!t)
     return;
-  const n = o.value || o.possibleValue;
-  if (!n)
+  const e = t.value || t.possibleValue;
+  if (!e)
     return;
-  if (((l) => typeof l == "object" && l !== null)(n))
-    switch (o.howToSetUp) {
-      case T.LIST_OF_VALUES_MULTI:
-        return n.listSelected;
-      case T.LIST_OF_VALUES:
-        return n.listSelected ?? n.list;
-      case T.RANGE:
+  if (((o) => typeof o == "object" && o !== null)(e))
+    switch (t.howToSetUp) {
+      case C.LIST_OF_VALUES_MULTI:
+        return e.listSelected;
+      case C.LIST_OF_VALUES:
+        return e.listSelected ?? e.list;
+      case C.RANGE:
         return {
-          rangeFrom: n.rangeFrom,
-          rangeTo: n.rangeTo
+          rangeFrom: e.rangeFrom,
+          rangeTo: e.rangeTo
         };
       default:
-        return n.value;
+        return e.value;
     }
-  return n;
-}, be = (o) => {
-  var l, d;
-  const { decision: n, textValues: i } = o;
-  return /* @__PURE__ */ c(a, { direction: "column", gap: "24px", children: [
-    /* @__PURE__ */ c(a, { direction: "column", gap: "16px", children: [
-      /* @__PURE__ */ e(x, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: i.criteria }),
-      /* @__PURE__ */ e(a, { justifyContent: "space-between", children: n.decision && /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
-        E,
+  return e;
+}, we = (t) => {
+  var o, l;
+  const { decision: e, textValues: a } = t;
+  return /* @__PURE__ */ u(i, { direction: "column", gap: "24px", children: [
+    /* @__PURE__ */ u(i, { direction: "column", gap: "16px", children: [
+      /* @__PURE__ */ n(x, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: a.criteria }),
+      /* @__PURE__ */ n(i, { justifyContent: "space-between", children: e.decision && /* @__PURE__ */ n(i, { direction: "column", children: /* @__PURE__ */ n(
+        V,
         {
-          element: n.decision,
-          valueData: M(n.decision)
+          element: e.decision,
+          valueData: N(e.decision)
         }
-      ) }, n.decision.name) })
+      ) }, e.decision.name) })
     ] }),
-    /* @__PURE__ */ c(a, { direction: "column", gap: "16px", justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(x, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: i.factsThatConditionIt }),
-      n.conditions && n.conditions.map((h) => /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
-        E,
+    /* @__PURE__ */ u(i, { direction: "column", gap: "16px", justifyContent: "space-between", children: [
+      /* @__PURE__ */ n(x, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: a.factsThatConditionIt }),
+      e.conditions && e.conditions.map((m) => /* @__PURE__ */ n(i, { direction: "column", children: /* @__PURE__ */ n(
+        V,
         {
-          element: h,
-          valueData: M(h)
+          element: m,
+          valueData: N(m)
         }
-      ) }, h.name))
+      ) }, m.name))
     ] }),
-    /* @__PURE__ */ c(a, { direction: "column", gap: "12px", children: [
-      /* @__PURE__ */ e(x, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: i.terms }),
-      /* @__PURE__ */ c(a, { justifyContent: "space-between", children: [
-        ((l = n == null ? void 0 : n.decision) == null ? void 0 : l.startDate) && /* @__PURE__ */ e(
-          E,
+    /* @__PURE__ */ u(i, { direction: "column", gap: "12px", children: [
+      /* @__PURE__ */ n(x, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: a.terms }),
+      /* @__PURE__ */ u(i, { justifyContent: "space-between", children: [
+        ((o = e == null ? void 0 : e.decision) == null ? void 0 : o.startDate) && /* @__PURE__ */ n(
+          V,
           {
             element: {
               name: "startDate",
-              description: i.termStart,
-              value: String(n.startDate),
-              howToSetUp: T.EQUAL,
-              typeData: F.DATE
+              description: a.termStart,
+              value: String(e.startDate),
+              howToSetUp: C.EQUAL,
+              typeData: U.DATE
             },
             valueData: new Date(
-              n.decision.startDate
+              e.decision.startDate
             ).toLocaleDateString("en-CA")
           },
           "startDate"
         ),
-        ((d = n == null ? void 0 : n.decision) == null ? void 0 : d.endDate) && /* @__PURE__ */ e(
-          E,
+        ((l = e == null ? void 0 : e.decision) == null ? void 0 : l.endDate) && /* @__PURE__ */ n(
+          V,
           {
             element: {
               name: "endDate",
-              description: i.termEnd,
-              value: String(n.endDate),
-              howToSetUp: T.EQUAL,
-              typeData: F.DATE
+              description: a.termEnd,
+              value: String(e.endDate),
+              howToSetUp: C.EQUAL,
+              typeData: U.DATE
             },
-            valueData: new Date(n.decision.endDate).toLocaleDateString(
+            valueData: new Date(e.decision.endDate).toLocaleDateString(
               "en-CA"
             )
           },
@@ -403,16 +484,16 @@ const P = (o) => {
       ] })
     ] })
   ] });
-}, W = I.div`
+}, ae = G.div`
   border-radius: 8px;
-  border: 1px solid ${G.palette.neutral.N30};
+  border: 1px solid ${W.palette.neutral.N30};
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   height: 340px;
   width: 332px;
   box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
-`, X = I.div`
+`, re = G.div`
   width: 100%;
   height: 100%;
   overflow-y: auto;
@@ -430,34 +511,34 @@ const P = (o) => {
     background-color: #ebecf0;
     border-radius: 8px;
   }
-`, xe = (o) => {
-  const { children: n, handleDelete: i, handleView: l, id: d } = o;
-  return /* @__PURE__ */ c(W, { children: [
-    /* @__PURE__ */ e(a, { height: "282px", gap: "24px", direction: "column", children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(a, { direction: "column", margin: "10px", children: n }) }) }),
-    /* @__PURE__ */ c(a, { gap: "16px", direction: "column", margin: "2px 12px", children: [
-      /* @__PURE__ */ e(y, {}),
-      /* @__PURE__ */ c(a, { gap: "16px", justifyContent: "end", children: [
-        /* @__PURE__ */ e(
-          H,
+`, ye = (t) => {
+  const { children: e, handleDelete: a, handleView: o, id: l } = t;
+  return /* @__PURE__ */ u(ae, { children: [
+    /* @__PURE__ */ n(i, { height: "282px", gap: "24px", direction: "column", children: /* @__PURE__ */ n(re, { children: /* @__PURE__ */ n(i, { direction: "column", margin: "10px", children: e }) }) }),
+    /* @__PURE__ */ u(i, { gap: "16px", direction: "column", margin: "2px 12px", children: [
+      /* @__PURE__ */ n(E, {}),
+      /* @__PURE__ */ u(i, { gap: "16px", justifyContent: "end", children: [
+        /* @__PURE__ */ n(
+          I,
           {
             appearance: "dark",
             size: "24px",
             cursorHover: !0,
-            icon: /* @__PURE__ */ e(B, {}),
+            icon: /* @__PURE__ */ n(J, {}),
             onClick: () => {
-              l(d);
+              o(l);
             }
           }
         ),
-        /* @__PURE__ */ e(
-          H,
+        /* @__PURE__ */ n(
+          I,
           {
             cursorHover: !0,
             appearance: "dark",
             size: "24px",
-            icon: /* @__PURE__ */ e(Q, {}),
+            icon: /* @__PURE__ */ n(K, {}),
             onClick: () => {
-              i(d);
+              a(l);
             }
           }
         )
@@ -466,7 +547,7 @@ const P = (o) => {
   ] });
 };
 export {
-  xe as BusinessRuleCard,
-  be as BusinessRuleView,
-  Ce as RulesForm
+  ye as BusinessRuleCard,
+  we as BusinessRuleView,
+  De as RulesForm
 };

package/package.json

@@ -10,7 +10,7 @@
   ],
   "description": "",
   "private": false,
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "exports": {
     ".": {
@@ -47,8 +47,8 @@
     "@inubekit/stack": "^3.8.1",
     "@inubekit/text": "^2.17.0",
     "@inubekit/textarea": "^2.45.0",
-    "@inubekit/toggle": "^3.8.1",
-    "@isettingkit/input": "^0.1.17",
+    "@inubekit/toggle": "^3.8.2",
+    "@isettingkit/input": "^0.1.21",
     "@isettingkit/view": "^0.1.9"
   },
   "peerDependencies": {