sodas-validation-ui

React components for SODAS validation rules editing.

Installation

npm install sodas-validation-ui bootstrap react-bootstrap

Peer dependencies: This library requires Bootstrap 5 and react-bootstrap. Ensure your app imports Bootstrap CSS:

// main.jsx or App.jsx
import 'bootstrap/dist/css/bootstrap.min.css';

Usage

import { ValidationRulesEditor } from 'sodas-validation-ui';
import 'sodas-validation-ui/style.css';

function App() {
  const [rules, setRules] = useState([]);
  return <ValidationRulesEditor validationRules={rules} />;
}

Customization with CSS Variables

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.

:root {
  /* Typography */
  --sodas-validation-ui-font-family: system-ui, -apple-system, sans-serif;
  --sodas-validation-ui-font-size: 14px;
  --sodas-validation-ui-font-size-sm: 12px;
  --sodas-validation-ui-font-size-xs: 13px;

  /* Colors */
  --sodas-validation-ui-text-color: #333;
  --sodas-validation-ui-text-muted: #666;
  --sodas-validation-ui-text-emphasis: #444;
  --sodas-validation-ui-error-color: #c00;
  --sodas-validation-ui-border-color: #ccc;
  --sodas-validation-ui-border-color-light: #e0e0e0;
  --sodas-validation-ui-bg-color: #fff;
  --sodas-validation-ui-bg-secondary: #f9f9f9;
  --sodas-validation-ui-bg-hover: #f0f0f0;

  /* Borders */
  --sodas-validation-ui-border-radius: 4px;
  --sodas-validation-ui-border-radius-lg: 8px;
}

Dark mode example

.my-theme-dark {
  --sodas-validation-ui-text-color: #e0e0e0;
  --sodas-validation-ui-text-muted: #a0a0a0;
  --sodas-validation-ui-text-emphasis: #f0f0f0;
  --sodas-validation-ui-error-color: #ff6b6b;
  --sodas-validation-ui-border-color: #444;
  --sodas-validation-ui-border-color-light: #333;
  --sodas-validation-ui-bg-color: #2a2a2a;
  --sodas-validation-ui-bg-secondary: #222;
  --sodas-validation-ui-bg-hover: #333;
}

<div className="my-theme-dark">
  <ValidationRulesEditor ... />
</div>

Development

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled in this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

For production applications, we recommend TypeScript with type-aware lint rules. Check out the TS template and typescript-eslint.