sodas-validation-ui 0.2.0 → 0.3.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 +87 -5
- package/dist/sodas-validation-ui.css +1 -1
- package/dist/sodas-validation-ui.js +589 -469
- package/dist/sodas-validation-ui.umd.cjs +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,4 +1,86 @@
|
|
|
1
|
-
#
|
|
1
|
+
# sodas-validation-ui
|
|
2
|
+
|
|
3
|
+
React components for SODAS validation rules editing.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install sodas-validation-ui bootstrap react-bootstrap
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Peer dependencies:** This library requires Bootstrap 5 and react-bootstrap. Ensure your app imports Bootstrap CSS:
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
// main.jsx or App.jsx
|
|
15
|
+
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```jsx
|
|
21
|
+
import { ValidationRulesEditor } from 'sodas-validation-ui';
|
|
22
|
+
import 'sodas-validation-ui/style.css';
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
const [rules, setRules] = useState([]);
|
|
26
|
+
return <ValidationRulesEditor validationRules={rules} />;
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Customization with CSS Variables
|
|
31
|
+
|
|
32
|
+
You can customize the appearance by setting CSS custom properties. Define these on `:root` for global theming, or on a wrapper element for scoped styling.
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
:root {
|
|
36
|
+
/* Typography */
|
|
37
|
+
--sodas-validation-ui-font-family: system-ui, -apple-system, sans-serif;
|
|
38
|
+
--sodas-validation-ui-font-size: 14px;
|
|
39
|
+
--sodas-validation-ui-font-size-sm: 12px;
|
|
40
|
+
--sodas-validation-ui-font-size-xs: 13px;
|
|
41
|
+
|
|
42
|
+
/* Colors */
|
|
43
|
+
--sodas-validation-ui-text-color: #333;
|
|
44
|
+
--sodas-validation-ui-text-muted: #666;
|
|
45
|
+
--sodas-validation-ui-text-emphasis: #444;
|
|
46
|
+
--sodas-validation-ui-error-color: #c00;
|
|
47
|
+
--sodas-validation-ui-border-color: #ccc;
|
|
48
|
+
--sodas-validation-ui-border-color-light: #e0e0e0;
|
|
49
|
+
--sodas-validation-ui-bg-color: #fff;
|
|
50
|
+
--sodas-validation-ui-bg-secondary: #f9f9f9;
|
|
51
|
+
--sodas-validation-ui-bg-hover: #f0f0f0;
|
|
52
|
+
|
|
53
|
+
/* Borders */
|
|
54
|
+
--sodas-validation-ui-border-radius: 4px;
|
|
55
|
+
--sodas-validation-ui-border-radius-lg: 8px;
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Dark mode example
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
.my-theme-dark {
|
|
63
|
+
--sodas-validation-ui-text-color: #e0e0e0;
|
|
64
|
+
--sodas-validation-ui-text-muted: #a0a0a0;
|
|
65
|
+
--sodas-validation-ui-text-emphasis: #f0f0f0;
|
|
66
|
+
--sodas-validation-ui-error-color: #ff6b6b;
|
|
67
|
+
--sodas-validation-ui-border-color: #444;
|
|
68
|
+
--sodas-validation-ui-border-color-light: #333;
|
|
69
|
+
--sodas-validation-ui-bg-color: #2a2a2a;
|
|
70
|
+
--sodas-validation-ui-bg-secondary: #222;
|
|
71
|
+
--sodas-validation-ui-bg-hover: #333;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
<div className="my-theme-dark">
|
|
75
|
+
<ValidationRulesEditor ... />
|
|
76
|
+
</div>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Development
|
|
82
|
+
|
|
83
|
+
### React + Vite
|
|
2
84
|
|
|
3
85
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
86
|
|
|
@@ -7,10 +89,10 @@ Currently, two official plugins are available:
|
|
|
7
89
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
|
8
90
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
91
|
|
|
10
|
-
|
|
92
|
+
### React Compiler
|
|
11
93
|
|
|
12
|
-
The React Compiler is not enabled
|
|
94
|
+
The React Compiler is not enabled in this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
|
13
95
|
|
|
14
|
-
|
|
96
|
+
### Expanding the ESLint configuration
|
|
15
97
|
|
|
16
|
-
|
|
98
|
+
For production applications, we recommend TypeScript with type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) and [`typescript-eslint`](https://typescript-eslint.io).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.validation-
|
|
1
|
+
.sodas-validation-ui__panel{min-height:0}.sodas-validation-ui__panel[hidden]{display:none}.sodas-validation-ui__toolbar{display:flex;align-items:center;gap:.5rem}.sodas-validation-ui__add-select{min-width:180px}.sodas-validation-ui__sections,.sodas-validation-ui__list{display:flex;flex-direction:column;gap:1rem}.sodas-validation-ui__rule-card{--sodas-validation-ui-font-family: var(--sodas-validation-ui-font-family, inherit);--sodas-validation-ui-font-size: var(--sodas-validation-ui-font-size, inherit)}.sodas-validation-ui__rule-fields-row{overflow-x:auto;padding-bottom:.25rem}.sodas-validation-ui__field{min-width:100px;flex-shrink:0}.sodas-validation-ui__field--checkbox{min-width:auto}.sodas-validation-ui__section-title-editable:hover{background:var(--sodas-validation-ui-bg-hover, rgba(0, 0, 0, .04))}.template-editor__rules,.quality-requirement-editor__nodes,.quality-requirement-editor__node-rules{border-top-color:var(--sodas-validation-ui-border-color-light, #dee2e6)}
|