@isettingkit/business-rules 0.1.2

package/README.md

@@ -0,0 +1,38 @@
+# IDS - Starter
+
+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.
+
+## Readme
+
+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
+
+### Package.json
+
+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.
+
+### Environment variables
+
+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.
+
+### Pull Requests
+
+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).
+
+### Publishing
+
+Follow these steps to publish and release a new version of your package.
+
+Check that you're an admin in the repository (validate with your team leader) and **execute these scripts in a release branch**.
+
+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

package/dist/index.es.d.ts

@@ -0,0 +1,62 @@
+import { IRuleDecision } from '@isettingkit/input';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare const BusinessRuleCard: (props: IBusinessRuleCard) => JSX_2.Element;
+
+export declare const BusinessRuleView: (props: IBusinessRuleView) => JSX_2.Element;
+
+export declare interface IBusinessRuleCard {
+    children: React.ReactNode;
+    handleDelete: (id: string) => void;
+    handleView: (id: string) => void;
+    id: string;
+}
+
+export declare interface IBusinessRuleView {
+    decision: IRuleDecision;
+    textValues: {
+        selectOptions: string;
+        selectOption: string;
+        rangeMin: (label: string) => string;
+        rangeMax: (label: string) => string;
+        reasonForChange: string;
+        change: string;
+        changePlaceholder: string;
+        termStart: string;
+        termEnd: string;
+        cancel: string;
+        confirm: string;
+        none: string;
+        FactsThatConditionIt: string;
+        criteria: string;
+        Terms: string;
+    };
+}
+
+export declare interface IRulesForm {
+    decision: IRuleDecision;
+    onCloseModal: () => void;
+    onCancel: () => void;
+    onSubmitEvent: (dataDecision: IRuleDecision) => void;
+    portalId: string;
+    textValues: {
+        selectOptions: string;
+        selectOption: string;
+        rangeMin: (label: string) => string;
+        rangeMax: (label: string) => string;
+        reasonForChange: string;
+        change: string;
+        changePlaceholder: string;
+        termStart: string;
+        termEnd: string;
+        cancel: string;
+        confirm: string;
+        none: string;
+        FactsThatConditionIt: string;
+        criteria: string;
+    };
+}
+
+export declare const RulesForm: (prop: IRulesForm) => JSX_2.Element;
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,432 @@
+import { jsxs as o, jsx as e, Fragment as E } from "react/jsx-runtime";
+import { useState as D, useEffect as L } from "react";
+import { useFormik as U } from "formik";
+import { Divider as k } from "@inubekit/divider";
+import { Stack as a } from "@inubekit/stack";
+import { Text as b } from "@inubekit/text";
+import { Toggle as O } from "@inubekit/toggle";
+import { Textarea as $ } from "@inubekit/textarea";
+import { Date as V } from "@inubekit/date";
+import { Checkbox as N } from "@inubekit/checkbox";
+import { DecisionConditionRenderer as j, ValueValidationSchema as R, ValueHowToSetUp as F, ValueDataType as H } from "@isettingkit/input";
+import { DecisionViewConditionRenderer as S } from "@isettingkit/view";
+import { MdOutlineRemoveRedEye as I, MdOutlineDelete as q } from "react-icons/md";
+import { Icon as M } from "@inubekit/icon";
+import { inube as B } from "@inubekit/foundations";
+import A from "styled-components";
+const Q = (l) => {
+  const {
+    label: n,
+    labelText: r,
+    onHandleChange: i,
+    placeholder: h,
+    required: u,
+    value: d = ""
+  } = l, [c, g] = D(d);
+  return /* @__PURE__ */ o(a, { direction: "column", margin: "10px 4px", children: [
+    /* @__PURE__ */ e(b, { size: "large", appearance: "gray", weight: "bold", margin: "10px 0", children: r }),
+    /* @__PURE__ */ e(a, { margin: "10px 0", children: /* @__PURE__ */ e(
+      $,
+      {
+        id: "reasonChange",
+        label: n,
+        onChange: (p) => {
+          g(p.target.value), i(p);
+        },
+        placeholder: h,
+        required: u,
+        value: c,
+        maxLength: 120,
+        fullwidth: !0
+      }
+    ) })
+  ] });
+}, P = (l) => {
+  const {
+    checked: n,
+    children: r,
+    handleToggleChange: i,
+    id: h,
+    labelToggle: u,
+    name: d,
+    valueToggle: c = ""
+  } = l, [g, C] = D(n), p = (f) => {
+    C(f.target.checked), i(f);
+  };
+  return L(() => {
+    C(n);
+  }, [n]), /* @__PURE__ */ o(E, { children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        checked: g,
+        id: h,
+        margin: "10px",
+        name: d,
+        onChange: p,
+        size: "small",
+        value: c,
+        children: /* @__PURE__ */ e(b, { size: "medium", type: "label", weight: "bold", children: u })
+      }
+    ),
+    g && /* @__PURE__ */ e(E, { children: r })
+  ] });
+}, Z = (l) => {
+  const {
+    onHandleStartChange: n,
+    onHandleEndChange: r,
+    labelStart: i,
+    labelEnd: h,
+    checkedClosed: u = !1,
+    required: d = !1,
+    valueStart: c = "",
+    valueEnd: g = ""
+  } = l, [C, p] = D(u), [f, w] = D(c), [v, m] = D(g);
+  return /* @__PURE__ */ o(E, { children: [
+    /* @__PURE__ */ o(a, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+        b,
+        {
+          appearance: "gray",
+          margin: "10px 0",
+          size: "medium",
+          type: "title",
+          weight: "bold",
+          children: "Vigencia"
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          alignContent: "center",
+          justifyContent: "center",
+          wrap: "wrap",
+          gap: "4px",
+          children: /* @__PURE__ */ e(
+            N,
+            {
+              label: "Cerrada",
+              onChange: ({ target: x }) => {
+                p(x.checked);
+              },
+              checked: C,
+              value: ""
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(a, { justifyContent: "space-between", gap: "24px", children: [
+      /* @__PURE__ */ e(a, { width: "189px", children: /* @__PURE__ */ e(
+        V,
+        {
+          id: "dateStart",
+          label: i,
+          onChange: (x) => {
+            w(x.target.value), n(x);
+          },
+          value: f,
+          required: d,
+          size: "compact"
+        }
+      ) }),
+      C && /* @__PURE__ */ e(a, { width: "189px", children: /* @__PURE__ */ e(
+        V,
+        {
+          id: "dateEnd",
+          label: h,
+          onChange: (x) => {
+            m(x.target.value), r(x);
+          },
+          value: v,
+          required: d,
+          size: "compact"
+        }
+      ) })
+    ] })
+  ] });
+}, G = (l) => {
+  var m;
+  const {
+    decision: n,
+    formik: r,
+    onChangeCondition: i,
+    onChangeDecision: h,
+    onStartChange: u,
+    onEndChange: d,
+    textValues: c
+  } = l, [g, C] = D(!1), [, p] = D(!0), f = (t) => {
+    C(t.target.checked);
+  }, w = (t) => {
+    t.target.value ? p(!1) : p(!0);
+  }, v = (t, s) => t.errors[s] ? "invalid" : "pending";
+  return /* @__PURE__ */ o(a, { direction: "column", gap: "24px", children: [
+    /* @__PURE__ */ o(a, { direction: "column", gap: "16", children: [
+      /* @__PURE__ */ e(b, { weight: "bold", size: "medium", children: c.criteria }),
+      n.decision && /* @__PURE__ */ e(
+        j,
+        {
+          element: n.decision,
+          onDecision: h,
+          valueData: r.values[n.decision.name],
+          message: r.errors[n.decision.name],
+          status: v(r, n.decision.name),
+          textValues: {
+            selectOptions: "Select an option",
+            selectOption: "Option selected",
+            rangeMin: (t) => `Minimum ${t}`,
+            rangeMax: (t) => `Maximum ${t}`
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(k, { dashed: !0 }),
+    /* @__PURE__ */ o(a, { direction: "column", children: [
+      /* @__PURE__ */ o(a, { direction: "row", gap: "16px", justifyContent: "space-between", children: [
+        /* @__PURE__ */ e(b, { children: c.FactsThatConditionIt }),
+        /* @__PURE__ */ e(
+          O,
+          {
+            id: "toogleNone",
+            onChange: f,
+            checked: g,
+            size: "small",
+            children: /* @__PURE__ */ e(b, { size: "medium", type: "label", weight: "bold", children: c.none })
+          }
+        )
+      ] }),
+      n.conditions && n.conditions.map((t) => /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
+        P,
+        {
+          checked: !g,
+          handleToggleChange: (s) => {
+            s.target.checked || i(
+              {
+                value: "",
+                rangeTo: 0,
+                rangeFrom: 0,
+                list: t.possibleValue.list
+              },
+              t.name
+            );
+          },
+          id: t.name.replace(" ", ""),
+          labelToggle: t.name.split(/(?=[A-Z])/).join(" "),
+          name: t.name.replace(" ", ""),
+          children: /* @__PURE__ */ e(
+            j,
+            {
+              element: t,
+              onDecision: i,
+              valueData: r.values[t.name],
+              message: r.errors[t.name],
+              status: v(r, t.name),
+              textValues: {
+                selectOptions: "Select an option",
+                selectOption: "Option selected",
+                rangeMin: (s) => `Minimum ${s}`,
+                rangeMax: (s) => `Maximum ${s}`
+              }
+            }
+          )
+        }
+      ) }, t.name))
+    ] }),
+    /* @__PURE__ */ e(k, { dashed: !0 }),
+    /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
+      Q,
+      {
+        label: c.reasonForChange,
+        labelText: c.change,
+        onHandleChange: w,
+        placeholder: c.changePlaceholder,
+        required: !0
+      }
+    ) }),
+    /* @__PURE__ */ e(k, { dashed: !0 }),
+    /* @__PURE__ */ e(a, { direction: "column", children: n.decision && /* @__PURE__ */ e(
+      Z,
+      {
+        onHandleStartChange: (t) => u(t.target.value),
+        onHandleEndChange: (t) => d(t.target.value),
+        labelStart: c.termStart,
+        labelEnd: c.termEnd,
+        checkedClosed: !!n.decision.endDate,
+        valueStart: n.decision.startDate.toLocaleDateString(
+          "en-CA"
+        ),
+        valueEnd: ((m = n.decision.endDate) == null ? void 0 : m.toLocaleDateString("en-CA")) || ""
+      }
+    ) })
+  ] });
+}, T = (l, n, r) => ({
+  ...l,
+  decision: { ...l.decision, [n]: r }
+}), me = (l) => {
+  const { decision: n, onCancel: r, onSubmitEvent: i, textValues: h } = l, [u, d] = D(n), c = (m, t) => {
+    d((s) => {
+      var x;
+      const z = (x = s == null ? void 0 : s.conditions) == null ? void 0 : x.map((y) => y.name === t ? { ...y, value: m } : y);
+      return { ...s, conditions: z };
+    });
+  }, g = (m) => {
+    d(
+      (t) => T(t, "value", m)
+    );
+  }, C = (m) => {
+    d(
+      (t) => T(t, "startDate", new Date(m))
+    );
+  }, p = (m) => {
+    d(
+      (t) => T(t, "endDate", new Date(m))
+    );
+  }, { validationSchema: f, initialValues: w } = R(u), v = U({
+    initialValues: w,
+    validationSchema: f,
+    validateOnChange: !1,
+    onSubmit: async () => !0
+  });
+  return /* @__PURE__ */ e(
+    G,
+    {
+      formik: v,
+      decision: u,
+      onCancel: r,
+      onSubmit: () => i(u),
+      onChangeCondition: c,
+      onChangeDecision: g,
+      onStartChange: C,
+      onEndChange: p,
+      textValues: h
+    }
+  );
+}, ue = (l) => {
+  const { decision: n, textValues: r } = l;
+  return /* @__PURE__ */ o(a, { direction: "column", gap: "24px", children: [
+    /* @__PURE__ */ o(a, { direction: "column", gap: "16px", children: [
+      /* @__PURE__ */ e(b, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: r.criteria }),
+      /* @__PURE__ */ e(a, { justifyContent: "space-between", children: n.decisions && n.decisions.map((i) => /* @__PURE__ */ e(
+        S,
+        {
+          element: i,
+          valueData: String(i.value)
+        },
+        i.name
+      )) })
+    ] }),
+    /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ o(a, { direction: "column", gap: "16px", justifyContent: "space-between", children: [
+      /* @__PURE__ */ e(b, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: r.FactsThatConditionIt }),
+      n.conditions && n.conditions.map((i) => /* @__PURE__ */ e(a, { direction: "column", children: /* @__PURE__ */ e(
+        S,
+        {
+          element: i,
+          valueData: String(i.value)
+        }
+      ) }, i.name))
+    ] }) }),
+    /* @__PURE__ */ o(a, { direction: "column", gap: "12px", children: [
+      /* @__PURE__ */ e(b, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: r.Terms }),
+      /* @__PURE__ */ o(a, { justifyContent: "space-between", children: [
+        n.startDate && /* @__PURE__ */ e(
+          S,
+          {
+            element: {
+              name: "startDate",
+              label: r.termStart,
+              description: r.termStart,
+              value: String(n.startDate),
+              howToSetUp: F.EQUAL,
+              typeData: H.DATE
+            },
+            valueData: new Date(n.startDate).toLocaleDateString(
+              "en-CA"
+            )
+          },
+          "startDate"
+        ),
+        n.endDate && /* @__PURE__ */ e(
+          S,
+          {
+            element: {
+              name: "endDate",
+              label: r.termEnd,
+              description: r.termEnd,
+              value: String(n.endDate),
+              howToSetUp: F.EQUAL,
+              typeData: H.DATE
+            },
+            valueData: new Date(n.endDate).toLocaleDateString("en-CA")
+          },
+          "endDate"
+        )
+      ] })
+    ] })
+  ] });
+}, J = A.div`
+  border-radius: 8px;
+  border: 1px solid ${B.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);
+`, K = A.div`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #c1c7d0;
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #ebecf0;
+    border-radius: 8px;
+  }
+`, ge = (l) => {
+  const { children: n, handleDelete: r, handleView: i, id: h } = l;
+  return /* @__PURE__ */ o(J, { children: [
+    /* @__PURE__ */ e(a, { height: "282px", gap: "24px", direction: "column", children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(a, { direction: "column", margin: "10px", children: n }) }) }),
+    /* @__PURE__ */ o(a, { gap: "16px", direction: "column", margin: "2px 12px", children: [
+      /* @__PURE__ */ e(k, {}),
+      /* @__PURE__ */ o(a, { gap: "16px", justifyContent: "end", children: [
+        /* @__PURE__ */ e(
+          M,
+          {
+            appearance: "dark",
+            size: "24px",
+            cursorHover: !0,
+            icon: /* @__PURE__ */ e(I, {}),
+            onClick: () => {
+              i(h);
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          M,
+          {
+            cursorHover: !0,
+            appearance: "dark",
+            size: "24px",
+            icon: /* @__PURE__ */ e(q, {}),
+            onClick: () => {
+              r(h);
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  ge as BusinessRuleCard,
+  ue as BusinessRuleView,
+  me as RulesForm
+};

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@isettingkit/business-rules",
+  "homepage": "https://inubeds.vercel.app/",
+  "author": "inube",
+  "main": "dist/index.es.js",
+  "keywords": [
+    "inube",
+    "isetting",
+    "react"
+  ],
+  "description": "",
+  "private": false,
+  "version": "0.1.2",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js"
+    }
+  },
+  "files": [
+    "dist/index.es.js",
+    "dist/index.es.d.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky install",
+    "auto": "auto",
+    "changelog": "npm run auto changelog",
+    "version": "rm -rf dist && npm run build",
+    "release": "git push --follow-tags && npm run auto release",
+    "autorelease": "auto shipit"
+  },
+  "dependencies": {
+    "@inubekit/button": "^4.44.1",
+    "@inubekit/checkbox": "^0.2.2",
+    "@inubekit/divider": "^0.16.1",
+    "@inubekit/date": "^2.39.1",
+    "@inubekit/foundations": "^5.11.3",
+    "@inubekit/grid": "^2.14.1",
+    "@inubekit/icon": "^2.18.1",
+    "@inubekit/input": "^1.6.3",
+    "@inubekit/stack": "^3.8.1",
+    "@inubekit/text": "^2.17.0",
+    "@inubekit/textarea": "^2.45.0",
+    "@inubekit/toggle": "^3.8.1",
+    "@isettingkit/input": "^0.1.14",
+    "@isettingkit/view": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "styled-components": "^6.1.8",
+    "formik": "^2.4.6",
+    "yup": "^1.4.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
+    "@storybook/test": "^8.0.2",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "auto": "^11.0.4",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.1",
+    "storybook": "^8.0.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.2"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/selsa-inube/isettingkit-business-rules.git"
+  },
+  "auto": {
+    "plugins": [
+      "npm"
+    ]
+  }
+}