Merge branch 'develop' into 126-add-error-handling-mechanism-to-the-ui

DEVELOPER_GUIDE.md

@@ -328,7 +328,7 @@ dataset/
     │   ├── Dataset.ts
     │   ├── DatasetFormFields.ts
     │   ├── DatasetPaginationInfo.ts
-    │   ├── DatasetPreview.ts
+    │   ├── DatasetItemTypePreview.ts
     │   ├── DatasetValidationResponse.ts
     │   └── TotalDatasetsCount.ts
     └── repositories/
@@ -655,11 +655,11 @@ This means:
 
 import { Home } from '../../../../src/sections/home/Home'
 import { DatasetRepository } from '../../../../src/dataset/domain/repositories/DatasetRepository'
-import { DatasetPreviewMother } from '../../dataset/domain/models/DatasetPreviewMother'
+import { DatasetItemTypePreviewMother } from '../../dataset/domain/models/DatasetItemTypePreviewMother'
 
 const datasetRepository: DatasetRepository = {} as DatasetRepository
 const totalDatasetsCount = 10
-const datasets = DatasetPreviewMother.createMany(totalDatasetsCount)
+const datasets = DatasetItemTypePreviewMother.createMany(totalDatasetsCount)
 describe('Home page', () => {
   beforeEach(() => {
     datasetRepository.getAll = cy.stub().resolves(datasets)

dev-env/docker-compose-dev.yml

@@ -66,8 +66,8 @@ services:
         -Ddataverse.files.s3.connection-pool-size=2048
         -Ddataverse.files.s3.custom-endpoint-region=us-east-1
         -Ddataverse.files.s3.custom-endpoint-url=https://s3.us-east-1.amazonaws.com
-    expose:
-      - '8080'
+    ports:
+      - '8080:8080'
     networks:
       - dataverse
     depends_on:

dev-env/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import istanbul from 'vite-plugin-istanbul'
+import * as path from 'path'
 
 export default defineConfig({
   plugins: [
@@ -20,5 +21,11 @@ export default defineConfig({
     hmr: {
       clientPort: 8000 // nginx reverse proxy port
     }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@tests': path.resolve(__dirname, 'tests')
+    }
   }
 })

packages/design-system/CHANGELOG.md

@@ -32,7 +32,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **FormSelect:** remove withinMultipleFieldsGroup prop.
 - **FormText:** remove withinMultipleFieldsGroup prop.
 - **FormTextArea:** remove withinMultipleFieldsGroup prop.
-- **FormInputGroup:** remove hasVisibleLabel prop.
+- **FormInputGroup:** remove hasVisibleLabel prop and accepts className prop.
 - **FormInputGroupText:** refactor type.
 - **Card:** NEW card element to show header and body.
 - **ProgressBar:** NEW progress bar element to show progress.
@@ -42,7 +42,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **NavbarDropdownItem:** Now accepts `as` prop and takes `as` Element props.
 - **FormInputGroup:** extend Props Interface to accept `hasValidation` prop to properly show rounded corners in an <InputGroup> with validation
 - **Button:** extend Props Interface to accept `size` prop.
-- **FormInput:** extend Props Interface to accept `autoFocus` prop.
+- **FormInput:** extend Props Interface to accept `autoFocus` and `type: 'search'` prop.
 - **FormTextArea:** extend Props Interface to accept `autoFocus` prop.
 - **FormSelect:** extend Props Interface to accept `autoFocus` prop.
 - **Stack:** NEW Stack element to manage layouts.
@@ -51,6 +51,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **Spinner:** New Spinner component.
 - **CloseButton:** NEW close button component.
 - **Tab:** extend Props Interface to accept `disabled` prop to disable the tab.
+- **Offcanvas:** NEW Offcanvas component.
+- **FormCheckbox:** modify Props Interface to allow any react node as `label` prop.
 
 # [1.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2024-03-12)
 

packages/design-system/src/lib/assets/styles/bootstrap-customized.scss

@@ -95,6 +95,9 @@ $tooltip-max-width: 500px;
 // Spinner
 @import 'bootstrap/scss/spinners';
 
+// OffCanvas
+@import 'bootstrap/scss/offcanvas';
+
 // Navbar
 
 $navbar-light-brand-color: $dv-brand-color;

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

@@ -4,7 +4,7 @@ import * as React from 'react'
 export interface FormCheckboxProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   id: string
-  label: string
+  label: React.ReactNode
   isValid?: boolean
   isInvalid?: boolean
   invalidFeedback?: string

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

@@ -4,7 +4,7 @@ import * as React from 'react'
 export type FormInputElement = HTMLInputElement | HTMLTextAreaElement
 
 export interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
-  type?: 'text' | 'email' | 'password'
+  type?: 'text' | 'email' | 'password' | 'search'
   readOnly?: boolean
   name?: string
   isValid?: boolean

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

@@ -5,11 +5,12 @@ import { FormInputGroupText } from './FormInputGroupText'
 interface FormInputGroupProps {
   children: ReactNode
   hasValidation?: boolean
+  className?: string
 }
 
-function FormInputGroup({ children, hasValidation }: FormInputGroupProps) {
+function FormInputGroup({ children, hasValidation, className = '' }: FormInputGroupProps) {
   return (
-    <InputGroup className="mb-3" hasValidation={hasValidation}>
+    <InputGroup className={`mb-3 ${className}`} hasValidation={hasValidation}>
       {children}
     </InputGroup>
   )

packages/design-system/src/lib/components/offcanvas/Offcanvas.tsx

@@ -0,0 +1,41 @@
+import { Offcanvas as OffcanvasBS } from 'react-bootstrap'
+import { OffcanvasHeader } from './OffcanvasHeader'
+import { OffcanvasTitle } from './OffcanvasTitle'
+import { OffcanvasBody } from './OffcanvasBody'
+
+// https://react-bootstrap.netlify.app/docs/components/offcanvas
+
+interface OffcanvasProps {
+  show: boolean
+  placement?: 'start' | 'end' | 'top' | 'bottom'
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  onShow?: () => void
+  onHide?: () => void
+  children: React.ReactNode
+}
+
+const Offcanvas = ({
+  show,
+  placement = 'start',
+  responsive,
+  onHide,
+  onShow,
+  children
+}: OffcanvasProps) => {
+  return (
+    <OffcanvasBS
+      show={show}
+      onHide={onHide}
+      onShow={onShow}
+      placement={placement}
+      responsive={responsive}>
+      {children}
+    </OffcanvasBS>
+  )
+}
+
+Offcanvas.Header = OffcanvasHeader
+Offcanvas.Title = OffcanvasTitle
+Offcanvas.Body = OffcanvasBody
+
+export { Offcanvas }

packages/design-system/src/lib/components/offcanvas/OffcanvasBody.tsx

@@ -0,0 +1,10 @@
+import { OffcanvasBody as OffcanvasBodyBS } from 'react-bootstrap'
+
+export interface OffcanvasBodyProps {
+  children: React.ReactNode
+  dataTestId?: string
+}
+
+export const OffcanvasBody = ({ children, dataTestId }: OffcanvasBodyProps) => {
+  return <OffcanvasBodyBS data-testid={dataTestId}>{children}</OffcanvasBodyBS>
+}

packages/design-system/src/lib/components/offcanvas/OffcanvasHeader.tsx

@@ -0,0 +1,19 @@
+import { OffcanvasHeader as OffcanvasHeaderBS } from 'react-bootstrap'
+
+export interface OffcanvasHeaderProps {
+  closeLabel?: string
+  closeButton?: boolean
+  children: React.ReactNode
+}
+
+export const OffcanvasHeader = ({
+  closeLabel = 'Close',
+  closeButton = true,
+  children
+}: OffcanvasHeaderProps) => {
+  return (
+    <OffcanvasHeaderBS closeButton={closeButton} closeLabel={closeLabel}>
+      {children}
+    </OffcanvasHeaderBS>
+  )
+}

packages/design-system/src/lib/components/offcanvas/OffcanvasTitle.tsx

@@ -0,0 +1,9 @@
+import { OffcanvasTitle as OffcanvasTitleBS } from 'react-bootstrap'
+
+export interface OffcanvasTitleProps {
+  children: React.ReactNode
+}
+
+export const OffcanvasTitle = ({ children }: OffcanvasTitleProps) => {
+  return <OffcanvasTitleBS>{children}</OffcanvasTitleBS>
+}

packages/design-system/src/lib/index.ts

@@ -31,3 +31,4 @@ export { Stack } from './components/stack/Stack'
 export { Spinner } from './components/spinner/Spinner'
 export { TransferList, type TransferListItem } from './components/transfer-list/TransferList'
 export { CloseButton } from './components/close-button/CloseButton'
+export { Offcanvas } from './components/offcanvas/Offcanvas'

packages/design-system/src/lib/stories/form/Form.stories.tsx

@@ -78,6 +78,15 @@ export const AllInputTypes: Story = {
           <Form.Group.Input type="password" placeholder="Password" />
         </Col>
       </Form.Group>
+
+      <Form.Group controlId="basic-form-search">
+        <Form.Group.Label column sm={3}>
+          Search something
+        </Form.Group.Label>
+        <Col sm={9}>
+          <Form.Group.Input type="search" placeholder="Search..." />
+        </Col>
+      </Form.Group>
     </Form>
   )
 }

packages/design-system/src/lib/stories/offcanvas/Offcanvas.stories.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Offcanvas } from '../../components/offcanvas/Offcanvas'
+import { Button } from '../../components/button/Button'
+
+const meta: Meta<typeof Offcanvas> = {
+  title: 'Offcanvas',
+  component: Offcanvas,
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof Offcanvas>
+
+const OffcanvasWithTrigger = ({
+  placement = 'start',
+  responsive
+}: {
+  placement?: 'start' | 'end' | 'top' | 'bottom'
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+}) => {
+  const [show, setShow] = useState(responsive ? true : false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+
+  return (
+    <div>
+      {!responsive && <Button onClick={handleShow}>Open Offcanvas</Button>}
+
+      <Offcanvas show={show} onHide={handleClose} placement={placement} responsive={responsive}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          {responsive ? (
+            <div>
+              <p>Resize your browser to show the responsive offcanvas toggle.</p>
+              <p>
+                Responsive offcanvas classes hide content outside the viewport from a specified
+                breakpoint and down. Above that breakpoint, the contents within will behave as
+                usual.
+              </p>
+            </div>
+          ) : (
+            <p>All the content goes here</p>
+          )}
+        </Offcanvas.Body>
+      </Offcanvas>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <OffcanvasWithTrigger />
+}
+
+export const TopPlacement: Story = {
+  render: () => <OffcanvasWithTrigger placement="top" />
+}
+
+export const EndPlacement: Story = {
+  render: () => <OffcanvasWithTrigger placement="end" />
+}
+
+export const BottomPlacement: Story = {
+  render: () => <OffcanvasWithTrigger placement="bottom" />
+}
+
+export const Responsive: Story = {
+  render: () => <OffcanvasWithTrigger placement="start" responsive="md" />
+}

packages/design-system/tests/component/off-canvas/Offcanvas.spec.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { Offcanvas } from '../../../src/lib/components/offcanvas/Offcanvas'
+
+const OffcanvasWithTrigger = ({
+  placement,
+  responsive,
+  withCloseButton
+}: {
+  placement?: 'start' | 'end' | 'top' | 'bottom'
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+  withCloseButton?: boolean
+}) => {
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+
+  return (
+    <div>
+      <button onClick={handleShow}>Open Offcanvas</button>
+
+      <Offcanvas show={show} onHide={handleClose} placement={placement} responsive={responsive}>
+        <Offcanvas.Header closeButton={withCloseButton}>
+          <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body dataTestId="off-canvas-body">
+          {responsive ? (
+            <div>
+              <p>Resize your browser to show the responsive offcanvas toggle.</p>
+              <p>
+                Responsive offcanvas classes hide content outside the viewport from a specified
+                breakpoint and down. Above that breakpoint, the contents within will behave as
+                usual.
+              </p>
+            </div>
+          ) : (
+            <p>All the content goes here</p>
+          )}
+        </Offcanvas.Body>
+      </Offcanvas>
+    </div>
+  )
+}
+
+describe('Offcanvas', () => {
+  it('opens and close correctly by a button', () => {
+    cy.viewport(375, 700)
+
+    cy.mount(<OffcanvasWithTrigger responsive="lg" placement="start" withCloseButton />)
+
+    cy.findByTestId('off-canvas-body').should('not.be.visible')
+
+    cy.findByRole('button', { name: /Open Offcanvas/i }).click()
+    cy.findByTestId('off-canvas-body').should('be.visible')
+
+    cy.findByLabelText(/Close/).click()
+    cy.findByTestId('off-canvas-body').should('not.be.visible')
+  })
+
+  it('is shown automatically after lg screens (992px)', () => {
+    cy.viewport(1200, 700)
+
+    cy.mount(<OffcanvasWithTrigger responsive="lg" placement="start" withCloseButton />)
+
+    cy.findByTestId('off-canvas-body').should('be.visible')
+  })
+
+  it('is not show an placement start as default props if not passed', () => {
+    cy.viewport(375, 700)
+
+    cy.mount(<OffcanvasWithTrigger responsive="lg" />)
+
+    cy.findByTestId('off-canvas-body').should('not.be.visible')
+
+    cy.findByRole('button', { name: /Open Offcanvas/i }).click()
+
+    cy.findByRole('dialog').should('have.class', 'offcanvas-start')
+  })
+})