@isettingkit/business-rules 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +159 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,38 +1,173 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 📦 isettingkit-business-rules: Business Rule Components Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Overview
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
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.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
---
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## 📚 Components
|
|
10
10
|
|
|
11
|
-
###
|
|
11
|
+
### 1. `getValueData`
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
#### Description
|
|
14
|
+
The `getValueData` function extracts and formats the value data from a decision or condition element.
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
#### Props
|
|
17
|
+
- **element** (`IRuleDecision["decision"] | ICondition | undefined`): The decision or condition element to extract the value from.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
#### Usage Example
|
|
20
|
+
```tsx
|
|
21
|
+
const value = getValueData(decision.decision);
|
|
22
|
+
```
|
|
21
23
|
|
|
22
|
-
###
|
|
24
|
+
### 2. BusinessRuleView
|
|
25
|
+
#### Description
|
|
26
|
+
BusinessRuleView renders a detailed view of a business rule, displaying decisions and conditions, along with their corresponding values.
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
#### Props
|
|
29
|
+
- **decision** (IRuleDecision): The business rule decision data.
|
|
30
|
+
- **textValues** (IRulesFormTextValues): Text values for displaying labels and descriptions.
|
|
31
|
+
#### Usage Example
|
|
32
|
+
```tsx
|
|
33
|
+
<BusinessRuleView
|
|
34
|
+
decision={ruleDecision}
|
|
35
|
+
textValues={textValues}
|
|
36
|
+
/>
|
|
37
|
+
```
|
|
26
38
|
|
|
27
|
-
###
|
|
39
|
+
### 3. BusinessRuleCard
|
|
40
|
+
#### Description
|
|
41
|
+
BusinessRuleCard is a card component used to display a business rule with options to view or delete the rule.
|
|
28
42
|
|
|
29
|
-
|
|
43
|
+
#### Props
|
|
44
|
+
- **children** (React.ReactNode): The content of the card.
|
|
45
|
+
- **handleDelete** ((id: string) => void): Function to handle the deletion of a rule.
|
|
46
|
+
- **handleView** ((id: string) => void): Function to handle viewing a rule.
|
|
47
|
+
- **id (string)** : The ID of the business rule.
|
|
48
|
+
#### Usage Example
|
|
49
|
+
```tsx
|
|
50
|
+
<BusinessRuleCard
|
|
51
|
+
id="rule1"
|
|
52
|
+
handleDelete={deleteRule}
|
|
53
|
+
handleView={viewRule}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
### 4. RulesForm
|
|
57
|
+
#### Description
|
|
58
|
+
RulesForm is a form component for handling and submitting business rule decisions. It integrates with Formik for form validation and submission.
|
|
30
59
|
|
|
31
|
-
|
|
60
|
+
#### Props
|
|
61
|
+
- **id** (string): The unique ID for the form.
|
|
62
|
+
- **decision** (IRuleDecision): The decision data for the form.
|
|
63
|
+
- **onCloseModal** (() => void): Function to handle closing the modal.
|
|
64
|
+
- **onCancel** (() => void): Function to handle cancelling the form.
|
|
65
|
+
- **onSubmitEvent** ((dataDecision: IRuleDecision) => void): Function to handle submitting the form data.
|
|
66
|
+
- **textValues** (IRulesFormTextValues): Text values for the form labels and descriptions.
|
|
67
|
+
#### Usage Example
|
|
68
|
+
```tsx
|
|
69
|
+
<RulesForm
|
|
70
|
+
id="ruleForm1"
|
|
71
|
+
decision={ruleDecision}
|
|
72
|
+
onCloseModal={closeModal}
|
|
73
|
+
onCancel={cancelForm}
|
|
74
|
+
onSubmitEvent={submitDecision}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
32
77
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
78
|
+
### 5. ReasonForChange
|
|
79
|
+
#### Description
|
|
80
|
+
ReasonForChange is a component that renders a textarea input to capture the reason for a change in a business rule.
|
|
81
|
+
|
|
82
|
+
#### Props
|
|
83
|
+
- **label** (string): The label for the textarea.
|
|
84
|
+
- **labelText** (string): The label text to display.
|
|
85
|
+
- **onHandleChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle textarea changes.
|
|
86
|
+
- **placeholder** (string): The placeholder text for the textarea.
|
|
87
|
+
- **required** (boolean): Indicates if the field is required.
|
|
88
|
+
- **value** (string?): The value of the textarea (optional).
|
|
89
|
+
#### Usage Example
|
|
90
|
+
```tsx
|
|
91
|
+
<ReasonForChange
|
|
92
|
+
label="Change Reason"
|
|
93
|
+
labelText="Reason for Change"
|
|
94
|
+
onHandleChange={handleChange}
|
|
95
|
+
placeholder="Enter reason for change"
|
|
96
|
+
required={true}
|
|
97
|
+
/>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### 6. Term
|
|
101
|
+
#### Description
|
|
102
|
+
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.
|
|
103
|
+
|
|
104
|
+
#### Props
|
|
105
|
+
- **onHandleStartChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the change in start date.
|
|
106
|
+
- **onHandleEndChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the change in end date.
|
|
107
|
+
- **labelStart** (string): The label for the start date input.
|
|
108
|
+
- **labelEnd** (string): The label for the end date input.
|
|
109
|
+
- **checkedClosed** (boolean?): Whether the term is closed (optional).
|
|
110
|
+
- **required** (boolean?): Whether the fields are required (optional).
|
|
111
|
+
- **valueStart** (string?): The value for the start date (optional).
|
|
112
|
+
- **valueEnd** (string?): The value for the end date (optional).
|
|
113
|
+
#### Usage Example
|
|
114
|
+
```tsx
|
|
115
|
+
<Term
|
|
116
|
+
labelStart="Start Date"
|
|
117
|
+
labelEnd="End Date"
|
|
118
|
+
onHandleStartChange={handleStartChange}
|
|
119
|
+
onHandleEndChange={handleEndChange}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 7. ToggleOption
|
|
124
|
+
#### Description
|
|
125
|
+
ToggleOption is a component that renders a toggle switch and displays additional content when the toggle is checked.
|
|
126
|
+
|
|
127
|
+
#### Props
|
|
128
|
+
- **checked** (boolean): The current checked state of the toggle.
|
|
129
|
+
- **children** (React.ReactNode): The content to display when the toggle is checked.
|
|
130
|
+
- **handleToggleChange** ((e: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the toggle change event.
|
|
131
|
+
- **id** (string): The unique ID for the toggle.
|
|
132
|
+
- **labelToggle** (string): The label for the toggle.
|
|
133
|
+
- **name** (string): The name of the toggle input.
|
|
134
|
+
- **valueToggle** (string?): The value of the toggle input (optional).
|
|
135
|
+
#### Usage Example
|
|
136
|
+
```tsx
|
|
137
|
+
<ToggleOption
|
|
138
|
+
checked={isChecked}
|
|
139
|
+
handleToggleChange={handleToggleChange}
|
|
140
|
+
id="toggleOption1"
|
|
141
|
+
labelToggle="Enable Option"
|
|
142
|
+
name="optionToggle"
|
|
143
|
+
/>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
#### 🚀 How to Use
|
|
147
|
+
#### 1. Installation
|
|
148
|
+
Install the library using npm:
|
|
149
|
+
|
|
150
|
+
```bash
|
|
151
|
+
npm install isettingkit-business-rules
|
|
152
|
+
```
|
|
153
|
+
#### 2. Import Components
|
|
154
|
+
Once installed, you can import and use the components like this:
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
import { BusinessRuleView, BusinessRuleCard, RulesForm, ReasonForChange, Term, ToggleOption } from 'isettingkit-business-rules';
|
|
158
|
+
```
|
|
159
|
+
#### 3. Storybook Integration
|
|
160
|
+
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.
|
|
161
|
+
|
|
162
|
+
You can run Storybook for this library by navigating to the project folder and using the following command:
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
npm run storybook
|
|
166
|
+
```
|
|
167
|
+
#### 📦 Available Components
|
|
168
|
+
- **BusinessRuleView**: Displays a business rule's decision and conditions.
|
|
169
|
+
- **BusinessRuleCard**: Displays a business rule in a card format with options to view or delete.
|
|
170
|
+
- **RulesForm**: A form component for handling and submitting business rule decisions.
|
|
171
|
+
- **ReasonForChange**: A textarea input for capturing the reason for a change.
|
|
172
|
+
- **Term**: Manages the start and end dates for a business rule term.
|
|
173
|
+
- **ToggleOption**: A toggle switch component with additional content.
|