Dynamically render form field in Create Dataset Form + Fields Validations

.eslintrc.json

@@ -66,6 +66,14 @@
         "trailingComma": "none",
         "bracketSameLine": true
       }
+    ],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": {
+          "attributes": false
+        }
+      }
     ]
   },
   "overrides": [

.stylelintrc.json

@@ -14,7 +14,7 @@
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        "ignorePseudoClasses": ["export"]
+        "ignorePseudoClasses": ["export", "global"]
       }
     ],
     "property-no-unknown": [

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr132.dd49caf",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr141.2d54907",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -33,6 +33,7 @@
     "moment-timezone": "0.5.43",
     "react-bootstrap": "2.7.2",
     "react-bootstrap-icons": "1.10.3",
+    "react-hook-form": "7.51.2",
     "react-i18next": "12.1.5",
     "react-infinite-scroll-hook": "4.1.1",
     "react-loader-spinner": "5.3.4",

packages/design-system/src/lib/components/accordion/Accordion.tsx

@@ -1,18 +1,10 @@
-import { ReactNode } from 'react'
-import { Accordion as AccordionBS } from 'react-bootstrap'
+import { Accordion as AccordionBS, AccordionProps as AccordionPropsBS } from 'react-bootstrap'
 import { AccordionItem } from './AccordionItem'
 import { AccordionBody } from './AccordionBody'
 import { AccordionHeader } from './AccordionHeader'
-
-interface AccordionProps {
-  defaultActiveKey?: string[] | string
-  alwaysOpen?: boolean
-  children: ReactNode
-}
-
-function Accordion({ defaultActiveKey, children, alwaysOpen = false }: AccordionProps) {
+function Accordion({ alwaysOpen = false, children, ...rest }: AccordionPropsBS) {
   return (
-    <AccordionBS defaultActiveKey={defaultActiveKey} alwaysOpen={alwaysOpen}>
+    <AccordionBS alwaysOpen={alwaysOpen} {...rest}>
       {children}
     </AccordionBS>
   )

packages/design-system/src/lib/components/accordion/AccordionBody.tsx

@@ -1,10 +1,12 @@
-import { ReactNode } from 'react'
+import { ElementType, ReactNode } from 'react'
 import { Accordion as AccordionBS } from 'react-bootstrap'
 
-interface AccordionBodyProps {
+interface AccordionBodyProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode
+  bsPrefix?: string
+  as?: ElementType
 }
 
-export function AccordionBody({ children }: AccordionBodyProps) {
-  return <AccordionBS.Body>{children}</AccordionBS.Body>
+export function AccordionBody({ children, ...rest }: AccordionBodyProps) {
+  return <AccordionBS.Body {...rest}>{children}</AccordionBS.Body>
 }

packages/design-system/src/lib/components/accordion/AccordionHeader.tsx

@@ -1,10 +1,13 @@
-import { ReactNode } from 'react'
+import { ElementType, ReactNode } from 'react'
 import { Accordion as AccordionBS } from 'react-bootstrap'
 
-interface AccordionHeaderProps {
+interface AccordionHeaderProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode
+  onClick?: () => void
+  bsPrefix?: string
+  as?: ElementType
 }
 
-export function AccordionHeader({ children }: AccordionHeaderProps) {
-  return <AccordionBS.Header>{children}</AccordionBS.Header>
+export function AccordionHeader({ children, ...rest }: AccordionHeaderProps) {
+  return <AccordionBS.Header {...rest}>{children}</AccordionBS.Header>
 }

packages/design-system/src/lib/components/accordion/AccordionItem.tsx

@@ -1,11 +1,13 @@
-import { ReactNode } from 'react'
+import { ElementType, ReactNode } from 'react'
 import { Accordion as AccordionBS } from 'react-bootstrap'
 
-interface AccordionItemProps {
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLElement> {
   eventKey: string
   children: ReactNode
+  bsPrefix?: string
+  as?: ElementType
 }
 
-export function AccordionItem({ eventKey, children }: AccordionItemProps) {
-  return <AccordionBS.Item eventKey={eventKey}>{children}</AccordionBS.Item>
+export function AccordionItem({ children, ...rest }: AccordionItemProps) {
+  return <AccordionBS.Item {...rest}>{children}</AccordionBS.Item>
 }

packages/design-system/src/lib/components/form/form-checkbox-group/FormCheckboxGroup.module.scss

@@ -1,7 +1,7 @@
-@import "src/lib/assets/styles/design-tokens/typography.module";
+@import 'src/lib/assets/styles/design-tokens/typography.module';
 
 .title {
-  padding-top: calc(0.375rem + 1px);
-  padding-bottom: calc(0.375rem + 1px);
+  display: inline-block;
+  margin-bottom: 0.5rem;
   font-weight: $dv-font-weight-bold;
-}
+}

packages/design-system/src/lib/components/form/form-checkbox-group/FormCheckboxGroup.tsx

@@ -23,7 +23,7 @@ export function FormCheckboxGroup({
 }: PropsWithChildren<FormCheckboxGroupProps>) {
   const validationClass = isInvalid ? 'is-invalid' : isValid ? 'is-valid' : ''
   return (
-    <Row>
+    <Row className="mb-3">
       <Col sm={3}>
         <span className={styles.title}>
           {title} {required && <RequiredInputSymbol />}{' '}

packages/design-system/src/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.tsx

@@ -36,20 +36,21 @@ export function FormGroupWithMultipleFields({
         const isFirstField = index == 0
 
         return (
-          <Row key={index}>
+          <Row key={index} className="mb-3">
             <Col sm={3}>
               {isFirstField && <Title title={title} required={required} message={message} />}
             </Col>
-            <Col sm={6}>{field}</Col>
-            <Col sm={3}>
-              {withDynamicFields && (
+            <Col sm={withDynamicFields ? 6 : 9}>{field}</Col>
+
+            {withDynamicFields && (
+              <Col sm={3}>
                 <DynamicFieldsButtons
                   originalField={isFirstField}
                   onAddButtonClick={() => addField(field)}
                   onRemoveButtonClick={() => removeField(index)}
                 />
-              )}
-            </Col>
+              </Col>
+            )}
           </Row>
         )
       })}

packages/design-system/src/lib/components/form/form-group/FormGroup.tsx

@@ -25,12 +25,7 @@ function FormGroup({
   children,
   ...props
 }: PropsWithChildren<FormGroupProps>) {
-  const childrenWithRequiredProp = React.Children.map(children as JSX.Element, (child) => {
-    return React.cloneElement(child, {
-      required: required,
-      withinMultipleFieldsGroup: as === Col
-    })
-  })
+  const childrenWithRequiredProp = cloneThroughFragments(children, required, as)
 
   return (
     <FormBS.Group
@@ -42,6 +37,29 @@ function FormGroup({
     </FormBS.Group>
   )
 }
+function cloneThroughFragments(
+  children: React.ReactNode,
+  required?: boolean,
+  as?: typeof Col | typeof Row
+): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === React.Fragment) {
+        const hasChildren = (props: unknown): props is { children: React.ReactNode } =>
+          typeof props === 'object' && Object.hasOwnProperty.call(props, 'children')
+
+        if (hasChildren(child.props)) {
+          return cloneThroughFragments(child.props.children, required, as)
+        }
+      }
+      return React.cloneElement(child as React.ReactElement, {
+        required: required,
+        withinMultipleFieldsGroup: as === Col
+      })
+    }
+    return child
+  })
+}
 
 FormGroup.Label = FormLabel
 FormGroup.Input = FormInput