Merge pull request IQSS#357 from IQSS/feature/336-dynamically-render-…

…form-fields

Feature/336 dynamically render form fields

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

packages/design-system/tests/component/form/form-group/FormGroup.spec.tsx

@@ -0,0 +1,19 @@
+import { FormGroup } from '../../../../src/lib/components/form/form-group/FormGroup'
+import { Form } from '../../../../src/lib/components/form/Form'
+
+describe('FormGroup', () => {
+  it('should render childrens correctly even trough react fragments', () => {
+    cy.mount(
+      <Form>
+        <FormGroup controlId="some-control-id">
+          <>
+            <label htmlFor="username">Username</label>
+            <input type="text" id="username" />
+          </>
+        </FormGroup>
+      </Form>
+    )
+
+    cy.findByText('Username').should('exist')
+  })
+})

src/metadata-block-info/domain/models/MetadataBlockInfo.ts

@@ -11,3 +11,104 @@ export interface MetadataFieldInfo {
 
 export const METADATA_FIELD_DISPLAY_FORMAT_PLACEHOLDER = '#VALUE'
 export const METADATA_FIELD_DISPLAY_FORMAT_NAME_PLACEHOLDER = '#NAME'
+
+// 👇👇 New types for #336
+
+export interface MetadataBlockInfo2 {
+  id: number
+  name: string
+  displayName: string
+  metadataFields: Record<string, MetadataField2>
+  displayOnCreate: boolean // If true, the block will be displayed on the create dataset form
+}
+
+export interface MetadataField2 {
+  name: string
+  displayName: string
+  title: string
+  type: TypeMetadataField
+  typeClass: TypeClassMetadataField
+  watermark: WatermarkMetadataField
+  description: string
+  multiple: boolean
+  isControlledVocabulary: boolean
+  displayFormat: string
+  isRequired: boolean
+  displayOrder: number
+  controlledVocabularyValues?: string[]
+  childMetadataFields?: Record<string, MetadataField2>
+  displayOnCreate: boolean // If true, the field will be displayed on the create metadata block
+}
+
+export const TypeMetadataFieldOptions = {
+  Date: 'DATE',
+  Email: 'EMAIL',
+  Float: 'FLOAT',
+  Int: 'INT',
+  None: 'NONE',
+  Text: 'TEXT',
+  Textbox: 'TEXTBOX',
+  URL: 'URL'
+} as const
+
+export type TypeMetadataField =
+  (typeof TypeMetadataFieldOptions)[keyof typeof TypeMetadataFieldOptions]
+
+// export enum TypeMetadataField {
+//   Date = 'DATE',
+//   Email = 'EMAIL',
+//   Float = 'FLOAT',
+//   Int = 'INT',
+//   None = 'NONE',
+//   Text = 'TEXT',
+//   Textbox = 'TEXTBOX',
+//   URL = 'URL'
+// }
+
+export const TypeClassMetadataFieldOptions = {
+  Compound: 'compound',
+  ControlledVocabulary: 'controlledVocabulary',
+  Primitive: 'primitive'
+} as const
+
+export type TypeClassMetadataField =
+  (typeof TypeClassMetadataFieldOptions)[keyof typeof TypeClassMetadataFieldOptions]
+
+// export enum TypeClassMetadataField {
+//   Compound = 'compound',
+//   ControlledVocabulary = 'controlledVocabulary',
+//   Primitive = 'primitive'
+// }
+
+export const WatermarkMetadataFieldOptions = {
+  Empty: '',
+  EnterAFloatingPointNumber: 'Enter a floating-point number.',
+  EnterAnInteger: 'Enter an integer.',
+  FamilyNameGivenNameOrOrganization: 'FamilyName, GivenName or Organization',
+  HTTPS: 'https://',
+  NameEmailXyz: '[email protected]',
+  OrganizationXYZ: 'Organization XYZ',
+  The1FamilyNameGivenNameOr2Organization: '1) FamilyName, GivenName or 2) Organization',
+  The1FamilyNameGivenNameOr2OrganizationXYZ: '1) Family Name, Given Name or 2) Organization XYZ',
+  WatermarkEnterAnInteger: 'Enter an integer...',
+  YYYYOrYYYYMMOrYYYYMMDD: 'YYYY or YYYY-MM or YYYY-MM-DD',
+  YyyyMmDD: 'YYYY-MM-DD'
+} as const
+
+export type WatermarkMetadataField =
+  (typeof WatermarkMetadataFieldOptions)[keyof typeof WatermarkMetadataFieldOptions]
+
+// export enum WatermarkMetadataField {
+//   Empty = '',
+//   EnterAFloatingPointNumber = 'Enter a floating-point number.',
+//   EnterAnInteger = 'Enter an integer.',
+//   FamilyNameGivenNameOrOrganization = 'FamilyName, GivenName or Organization',
+//   HTTPS = 'https://',
+//   NameEmailXyz = '[email protected]',
+//   OrganizationXYZ = 'Organization XYZ',
+//   The1FamilyNameGivenNameOr2Organization = '1) FamilyName, GivenName or 2) Organization',
+//   The1FamilyNameGivenNameOr2OrganizationXYZ = '1) Family Name, Given Name or 2) Organization XYZ',
+//   WatermarkEnterAnInteger = 'Enter an integer...',
+//   YYYYOrYYYYMMOrYYYYMMDD = 'YYYY or YYYY-MM or YYYY-MM-DD',
+//   YyyyMmDD = 'YYYY-MM-DD'
+// }

src/metadata-block-info/domain/repositories/MetadataBlockInfoRepository.ts

@@ -1,5 +1,6 @@
-import { MetadataBlockInfo } from '../models/MetadataBlockInfo'
+import { MetadataBlockInfo, MetadataBlockInfo2 } from '../models/MetadataBlockInfo'
 
 export interface MetadataBlockInfoRepository {
   getByName: (name: string) => Promise<MetadataBlockInfo | undefined>
+  getByColecctionId: (collectionId: string, create: boolean) => Promise<MetadataBlockInfo2[]>
 }

src/metadata-block-info/domain/useCases/getMetadataBlockInfoByCollectionId.ts

@@ -0,0 +1,14 @@
+import { MetadataBlockInfo2 } from '../models/MetadataBlockInfo'
+import { MetadataBlockInfoRepository } from '../repositories/MetadataBlockInfoRepository'
+
+export async function getMetadataBlockInfoByCollectionId(
+  metadataBlockInfoRepository: MetadataBlockInfoRepository,
+  collectionId: string,
+  create: boolean
+): Promise<MetadataBlockInfo2[]> {
+  return metadataBlockInfoRepository
+    .getByColecctionId(collectionId, create)
+    .catch((error: Error) => {
+      throw new Error(error.message)
+    })
+}

src/metadata-block-info/infrastructure/repositories/MetadataBlockInfoJSDataverseRepository.ts

@@ -1,11 +1,12 @@
 import { MetadataBlockInfoRepository } from '../../domain/repositories/MetadataBlockInfoRepository'
-import { MetadataBlockInfo } from '../../domain/models/MetadataBlockInfo'
+import { MetadataBlockInfo, MetadataBlockInfo2 } from '../../domain/models/MetadataBlockInfo'
 import {
   getMetadataBlockByName,
   MetadataBlock as JSMetadataBlockInfo,
   ReadError
 } from '@iqss/dataverse-client-javascript'
 import { JSMetadataBlockInfoMapper } from '../mappers/JSMetadataBlockInfoMapper'
+import { MetadataBlockInfoMother } from '../../../../tests/component/metadata-block-info/domain/models/MetadataBlockInfoMother'
 
 export class MetadataBlockInfoJSDataverseRepository implements MetadataBlockInfoRepository {
   getByName(name: string): Promise<MetadataBlockInfo | undefined> {
@@ -18,4 +19,12 @@ export class MetadataBlockInfoJSDataverseRepository implements MetadataBlockInfo
         throw new Error(error.message)
       })
   }
+
+  getByColecctionId(_collectionId: string, _create: boolean): Promise<MetadataBlockInfo2[]> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(MetadataBlockInfoMother.getByCollectionIdFullResponse())
+      }, 1_000)
+    })
+  }
 }

src/sections/create-dataset/CreateDatasetFactory.tsx

@@ -1,11 +1,20 @@
 import { CreateDatasetForm } from './CreateDatasetForm'
 import { ReactElement } from 'react'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
+import { MetadataBlockInfoJSDataverseRepository } from '../../metadata-block-info/infrastructure/repositories/MetadataBlockInfoJSDataverseRepository'
+import { MetadataBlockInfoMockRepository } from '../../stories/create-dataset/MetadataBlockInfoMockRepository'
 
 const repository = new DatasetJSDataverseRepository()
+const _metadataBlockInfoRepository = new MetadataBlockInfoJSDataverseRepository()
+const metadataBlockInfoMockRepository = new MetadataBlockInfoMockRepository()
 
 export class CreateDatasetFactory {
   static create(): ReactElement {
-    return <CreateDatasetForm repository={repository} />
+    return (
+      <CreateDatasetForm
+        repository={repository}
+        metadataBlockInfoRepository={metadataBlockInfoMockRepository}
+      />
+    )
   }
 }

src/sections/create-dataset/CreateDatasetForm.module.scss

@@ -0,0 +1,7 @@
+.header {
+  margin: 0.5em 0;
+}
+
+.container {
+  //   margin: 0.5rem 0;
+}