@isettingkit/business-rules 2.2.37 โ 3.0.0
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 +34 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
# isettingkit
|
|
2
|
+
|
|
2
3
|
isettingkit is a modular UI toolkit designed to streamline the creation and management of business rule-driven interfaces. It offers a suite of reusable components, utilities, and type definitions to facilitate the development of dynamic, rule-based forms and configurations.
|
|
3
4
|
|
|
4
5
|
## ๐ Project Structure
|
|
6
|
+
|
|
5
7
|
The src directory is organized into the following primary modules:
|
|
6
8
|
|
|
7
9
|
### 1. businessRules
|
|
10
|
+
|
|
8
11
|
Contains components and utilities for managing business rules:
|
|
9
12
|
|
|
10
13
|
Cards/: Components like BusinessRuleCard for visual representation of individual rules.
|
|
@@ -16,6 +19,7 @@ Modal/: Modal components for rule creation and editing workflows.
|
|
|
16
19
|
BusinessRuleView.tsx: A comprehensive view component to display business rules.
|
|
17
20
|
|
|
18
21
|
### 2. Filter
|
|
22
|
+
|
|
19
23
|
Provides components to filter and search through business rules:
|
|
20
24
|
|
|
21
25
|
FilterModal/: Modal components for applying filters.
|
|
@@ -25,6 +29,7 @@ FilterTag/: Tag components representing active filters.
|
|
|
25
29
|
FormFilter/: Form components to define filter criteria.
|
|
26
30
|
|
|
27
31
|
### 3. types
|
|
32
|
+
|
|
28
33
|
Defines TypeScript interfaces and types to ensure type safety across components:
|
|
29
34
|
|
|
30
35
|
businessRules/: Types related to business rule components.
|
|
@@ -32,30 +37,38 @@ businessRules/: Types related to business rule components.
|
|
|
32
37
|
Filter/: Types associated with filtering functionalities.
|
|
33
38
|
|
|
34
39
|
## ๐ Getting Started
|
|
40
|
+
|
|
35
41
|
Installation
|
|
36
42
|
Install the package using npm:
|
|
37
|
-
|
|
43
|
+
|
|
44
|
+
```bash
|
|
38
45
|
npm install @isettingkit/business-rules
|
|
39
46
|
```
|
|
47
|
+
|
|
40
48
|
Usage
|
|
41
49
|
Import and use the components in your project:
|
|
42
|
-
|
|
50
|
+
|
|
51
|
+
```bash
|
|
43
52
|
import { BusinessRuleCard, RulesForm } from '@isettingkit/business-rules';
|
|
44
53
|
```
|
|
45
|
-
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
46
56
|
function App() {
|
|
47
|
-
return (
|
|
48
|
-
<div>
|
|
49
|
-
<BusinessRuleCard rule={ruleData} />
|
|
50
|
-
<RulesForm onSubmit={handleSubmit} />
|
|
51
|
-
</div>
|
|
52
|
-
);
|
|
57
|
+
return (
|
|
58
|
+
<div>
|
|
59
|
+
<BusinessRuleCard rule={ruleData} />
|
|
60
|
+
<RulesForm onSubmit={handleSubmit} />
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
53
63
|
}
|
|
54
64
|
```
|
|
65
|
+
|
|
55
66
|
## Theming
|
|
67
|
+
|
|
56
68
|
isettingkit utilizes styled-components for styling. Ensure your application is wrapped with a ThemeProvider and the appropriate theme is provided.
|
|
57
69
|
|
|
58
70
|
## ๐ Documentation
|
|
71
|
+
|
|
59
72
|
Each component is fully typed with TypeScript. Refer to the types directory for detailed type definitions:
|
|
60
73
|
|
|
61
74
|
IBusinessRuleCard: Props for BusinessRuleCard component.
|
|
@@ -65,23 +78,31 @@ IRulesForm: Props for RulesForm component.
|
|
|
65
78
|
IFilterTag: Props for FilterTag component.
|
|
66
79
|
|
|
67
80
|
## ๐ Development
|
|
81
|
+
|
|
68
82
|
To contribute or run the library locally:
|
|
69
83
|
|
|
70
84
|
Clone the repository:
|
|
71
|
-
|
|
85
|
+
|
|
86
|
+
```bash
|
|
72
87
|
git clone https://github.com/selsa-inube/isettingkit.git
|
|
73
88
|
```
|
|
89
|
+
|
|
74
90
|
Navigate to the project directory:
|
|
75
91
|
|
|
76
92
|
cd isettingkit
|
|
77
93
|
|
|
78
94
|
Install dependencies:
|
|
79
|
-
|
|
95
|
+
|
|
96
|
+
```bash
|
|
80
97
|
npm install
|
|
81
98
|
```
|
|
99
|
+
|
|
82
100
|
Run the development server:
|
|
83
|
-
|
|
101
|
+
|
|
102
|
+
```bash
|
|
84
103
|
npm run storybook
|
|
85
104
|
```
|
|
105
|
+
|
|
86
106
|
## ๐งช Testing
|
|
87
|
-
|
|
107
|
+
|
|
108
|
+
The project uses Storybook for component development and visualization. Run Storybook to view and test components in isolation..
|