feat: use Bootstrap Italia design system (#287)

package.json

@@ -84,7 +84,7 @@
     "clean-deep": "^3.4.0",
     "copy-to-clipboard": "^3.3.3",
     "deepmerge": "^4.3.1",
-    "design-react-kit": "^5.0.0-0",
+    "design-react-kit": "^5.0.0-7",
     "dotenv": "^16.3.1",
     "draft-js": "^0.11.7",
     "i18next": "^23.2.2",

src/app/app.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { render } from "react-dom";
-import store from "./store/index";
 import { Provider } from "react-redux";
+
+import store from "./store/index";
 import "../i18n";
 import Layout from "./components/Layout";
 import { Editor } from "./components/Editor";

src/app/form/widgets/BaseInputWidget.js

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
 import Info from "../../components/Info";
 import { useController, useFormContext } from "react-hook-form";
 import { get } from "lodash";
+import { Input } from "design-react-kit";
 
 const BaseInputWidget = (props) => {
   const name = props.fieldName;
@@ -42,25 +42,26 @@ const BaseInputWidget = (props) => {
     defaultValue:
       props.schema.value || innerPropertyDefaultValue || defaultValue || "",
   });
-  const className = classNames(["form-group", { "has-error": invalid }]);
   const [count, setCount] = useState(0);
 
   return (
-    <div className={className}>
-      {props.showLabel && (
-        <label className="control-label" htmlFor={id}>
-          {props.label} {props.schema.language ? `(${props.schema.lang})` : ""}{" "}
-          {props.required ? "*" : ""}
-        </label>
-      )}
-
-      <input
+    <>
+      <Input
         {...inputProps}
+        label={
+          props.showLabel &&
+          `${props.label}${
+            props.schema.language ? ` (${props.schema.lang})` : ""
+          }${props.required ? " *" : ""}`
+        }
+        invalid={invalid}
+        validationText={
+          invalid ? get(formState.errors, name)?.message : undefined
+        }
         ref={ref}
         id={id}
         type={props.type}
         required={props.required}
-        className="form-control"
         placeholder={props.placeholder}
         maxLength={props.maxLength}
         minLength={props.minLength}
@@ -69,11 +70,6 @@ const BaseInputWidget = (props) => {
           setCount(val.target.value.length);
         }}
       />
-      {invalid && (
-        <span className="help-block">
-          {get(formState.errors, name) && get(formState.errors, name).message}
-        </span>
-      )}
       {props.maxLength && (
         <Info description={count + "/" + props.maxLength + " chars used"} />
       )}
@@ -83,7 +79,7 @@ const BaseInputWidget = (props) => {
         }
         description={props.schema.description}
       />
-    </div>
+    </>
   );
 };
 

src/asset/style.scss

@@ -1,6 +1,8 @@
 $foot-bar-h: 100px;
 $mq-size: 640px;
 
+@use "bootstrap-italia/src/scss/bootstrap-italia";
+
 // We import CSS here rather than SCSS to avoid an annoying deprecation warning
 // from dart-sass.
 // See https://github.com/jquense/react-widgets/issues/1143.