Merge pull request IQSS#433 from IQSS/feature/319-new-collection-page

Feature/319 new collection page

README.md

@@ -178,6 +178,8 @@ The environment is accessible through the following URLs:
 > did not reflect the user's current location within the site, our new SPA design now includes this feature in the breadcrumbs.
 > Additionally, we have aligned with best practices by positioning all breadcrumbs at the top, before anything else in the UI.
 >
+> We have also introduced action items as the last item of the breadcrumb, eg: Collection > Dataset Name > Edit Dataset Metadata
+>
 > This update gives users a clear indication of their current position within the application's hierarchy.
 >
 > ### Changes in Functionality & Behavior
@@ -200,11 +202,17 @@ The environment is accessible through the following URLs:
 > search, whose search facets are reduced compared to other in-application searches. Therefore, if we find evidence that
 > the assumption is incorrect, we will work on extending the search capabilities to support Solr.
 >
+> We have also introduced infinite scroll pagination here.
+>
 > #### Dataverses/Datasets list
 >
 > The original JSF Dataverses/Datasets list on the home page uses normal paging buttons at the bottom of the list.
 > We have implemented infinite scrolling in this list, replacing the normal paging buttons, but the goal would be to be
 > able to toggle between normal paging and infinite scrolling via a toggle setting or button.
+>
+> #### Create/Edit Collection Page Identifier Field
+>
+> A feature has been added to suggest an identifier to the user based on the collection name entered.
 
 </details>
 

packages/design-system/CHANGELOG.md

@@ -39,6 +39,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **Select Multiple:** add is-invalid classname if isInvalid prop is true.
 - **Card:** NEW card element to show header and body.
 - **ProgressBar:** NEW progress bar element to show progress.
+- **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.
+- **FormTextArea:** extend Props Interface to accept `autoFocus` prop.
+- **FormSelect:** extend Props Interface to accept `autoFocus` prop.
+- **Stack:** NEW Stack element to manage layouts.
 
 # [1.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2024-03-12)
 

packages/design-system/src/lib/components/button/Button.tsx

@@ -4,10 +4,12 @@ import { Button as ButtonBS } from 'react-bootstrap'
 import { IconName } from '../icon/IconName'
 import { Icon } from '../icon/Icon'
 
+type ButtonSize = 'sm' | 'lg'
 type ButtonVariant = 'primary' | 'secondary' | 'link'
 type ButtonType = 'button' | 'reset' | 'submit'
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  size?: ButtonSize
   variant?: ButtonVariant
   disabled?: boolean
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void
@@ -18,6 +20,7 @@ interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 export function Button({
+  size,
   variant = 'primary',
   disabled = false,
   onClick,
@@ -29,6 +32,7 @@ export function Button({
 }: ButtonProps) {
   return (
     <ButtonBS
+      size={size}
       className={withSpacing ? styles.spacing : ''}
       variant={variant}
       onClick={disabled ? undefined : onClick}

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

@@ -12,6 +12,7 @@ export interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
   disabled?: boolean
   value?: string | number
   required?: boolean
+  autoFocus?: boolean
 }
 
 export const FormInput = React.forwardRef(function FormInput(
@@ -24,6 +25,7 @@ export const FormInput = React.forwardRef(function FormInput(
     disabled,
     value,
     required,
+    autoFocus,
     ...props
   }: FormInputProps,
   ref
@@ -39,6 +41,7 @@ export const FormInput = React.forwardRef(function FormInput(
       disabled={disabled}
       value={value}
       required={required}
+      autoFocus={autoFocus}
       ref={ref as React.ForwardedRef<HTMLInputElement>}
       {...props}
     />

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

@@ -9,10 +9,19 @@ export interface FormSelectProps
   isInvalid?: boolean
   isValid?: boolean
   disabled?: boolean
+  autoFocus?: boolean
 }
 
 export const FormSelect = React.forwardRef(function FormSelect(
-  { value, isInvalid, isValid, disabled, children, ...props }: PropsWithChildren<FormSelectProps>,
+  {
+    value,
+    isInvalid,
+    isValid,
+    disabled,
+    autoFocus,
+    children,
+    ...props
+  }: PropsWithChildren<FormSelectProps>,
   ref
 ) {
   return (
@@ -21,6 +30,7 @@ export const FormSelect = React.forwardRef(function FormSelect(
       isInvalid={isInvalid}
       isValid={isValid}
       disabled={disabled}
+      autoFocus={autoFocus}
       ref={ref as React.ForwardedRef<HTMLSelectElement>}
       {...props}>
       {children}

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

@@ -8,10 +8,11 @@ export interface FormTextAreaProps extends Omit<React.HTMLAttributes<FormInputEl
   isValid?: boolean
   isInvalid?: boolean
   value?: string
+  autoFocus?: boolean
 }
 
 export const FormTextArea = React.forwardRef(function FormTextArea(
-  { name, disabled, isValid, isInvalid, value, ...props }: FormTextAreaProps,
+  { name, disabled, isValid, isInvalid, value, autoFocus, ...props }: FormTextAreaProps,
   ref
 ) {
   return (
@@ -23,6 +24,7 @@ export const FormTextArea = React.forwardRef(function FormTextArea(
       isValid={isValid}
       isInvalid={isInvalid}
       value={value}
+      autoFocus={autoFocus}
       ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
       {...props}
     />

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

@@ -2,8 +2,17 @@ import { ReactNode } from 'react'
 import { InputGroup } from 'react-bootstrap'
 import { FormInputGroupText } from './FormInputGroupText'
 
-function FormInputGroup({ children }: { children: ReactNode }) {
-  return <InputGroup className="mb-3">{children}</InputGroup>
+interface FormInputGroupProps {
+  children: ReactNode
+  hasValidation?: boolean
+}
+
+function FormInputGroup({ children, hasValidation }: FormInputGroupProps) {
+  return (
+    <InputGroup className="mb-3" hasValidation={hasValidation}>
+      {children}
+    </InputGroup>
+  )
 }
 
 FormInputGroup.Text = FormInputGroupText

packages/design-system/src/lib/components/navbar/navbar-dropdown/NavbarDropdownItem.tsx

@@ -1,20 +1,26 @@
 import { NavDropdown } from 'react-bootstrap'
-import { PropsWithChildren } from 'react'
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react'
 
-interface NavbarDropdownItemProps {
-  href: string
+type NavbarDropdownItemProps<T extends ElementType> = {
+  href?: string
   onClick?: () => void
   disabled?: boolean
-}
+  as?: T
+} & (T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : ComponentPropsWithoutRef<T>)
 
-export function NavbarDropdownItem({
+export function NavbarDropdownItem<T extends ElementType = 'a'>({
   href,
   onClick,
   disabled,
-  children
-}: PropsWithChildren<NavbarDropdownItemProps>) {
+  children,
+  as,
+  ...props
+}: PropsWithChildren<NavbarDropdownItemProps<T>>) {
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const Component: ElementType<any> | undefined = as
+
   return (
-    <NavDropdown.Item href={href} onClick={onClick} disabled={disabled}>
+    <NavDropdown.Item href={href} onClick={onClick} disabled={disabled} as={Component} {...props}>
       {children}
     </NavDropdown.Item>
   )

packages/design-system/src/lib/components/stack/Stack.tsx

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react'
+import { Stack as StackBS } from 'react-bootstrap'
+
+type StackProps<T extends ElementType> = {
+  direction?: 'horizontal' | 'vertical'
+  gap?: 0 | 1 | 2 | 3 | 4 | 5
+  as?: T
+  children: React.ReactNode
+} & (T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : ComponentPropsWithoutRef<T>)
+
+export function Stack<T extends ElementType = 'div'>({
+  direction = 'vertical',
+  gap = 3,
+  as,
+  children,
+  ...rest
+}: StackProps<T>) {
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const Component: ElementType<any> = as || 'div'
+
+  return (
+    <StackBS direction={direction} gap={gap} as={Component} {...rest}>
+      {children}
+    </StackBS>
+  )
+}

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

@@ -27,3 +27,4 @@ export { RequiredInputSymbol } from './components/form/required-input-symbol/Req
 export { SelectMultiple } from './components/select-multiple/SelectMultiple'
 export { Card } from './components/card/Card'
 export { ProgressBar } from './components/progress-bar/ProgressBar'
+export { Stack } from './components/stack/Stack'

packages/design-system/src/lib/stories/button/Button.stories.tsx

@@ -94,6 +94,20 @@ export const AllVariantsAtAGlance: Story = {
   )
 }
 
+export const AllSizesAtAGlance: Story = {
+  render: () => (
+    <>
+      <Button withSpacing size="sm">
+        Small
+      </Button>
+      <Button withSpacing>Default size</Button>
+      <Button withSpacing size="lg">
+        Large size
+      </Button>
+    </>
+  )
+}
+
 export const Disabled: Story = {
   render: () => (
     <>

packages/design-system/src/lib/stories/stack/Stack.stories.tsx

@@ -0,0 +1,120 @@
+import { CSSProperties } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Stack } from '../../components/stack/Stack'
+import { Col } from '../../components/grid/Col'
+
+/**
+ * ## Description
+ * Stacks are vertical by default and stacked items are full-width by default. Use the gap prop to add space between items.
+ *
+ * Use direction="horizontal" for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width.
+ *
+ * Use the gap prop to add space between items.
+ */
+const meta: Meta<typeof Stack> = {
+  tags: ['autodocs'],
+  title: 'Stack',
+  component: Stack
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+const inlineStyles: CSSProperties = {
+  backgroundColor: '#337AB7',
+  color: 'white',
+  padding: '0.5rem'
+}
+
+export const VerticalStack: Story = {
+  render: () => (
+    <Stack>
+      <div style={inlineStyles}>Item 1</div>
+      <div style={inlineStyles}>Item 2</div>
+      <div style={inlineStyles}>Item 3</div>
+    </Stack>
+  )
+}
+
+/**
+ * Use direction="horizontal" for horizontal layouts.
+ * Stacked items are vertically centered by default and only take up their necessary width.
+ */
+export const HorizontalStack: Story = {
+  render: () => (
+    <Stack direction="horizontal">
+      <div style={inlineStyles}>Item 1</div>
+      <div style={inlineStyles}>Item 2</div>
+      <div style={inlineStyles}>Item 3</div>
+    </Stack>
+  )
+}
+/**
+ * By using Columns as childrens of the Stack, you can create a layout with columns that are full-width by default.
+ */
+export const HorizontalStackWithColumns: Story = {
+  render: () => (
+    <Stack direction="horizontal">
+      <Col style={inlineStyles}>Item 1</Col>
+      <Col style={inlineStyles}>Item 2</Col>
+      <Col style={inlineStyles}>Item 3</Col>
+    </Stack>
+  )
+}
+/**
+ * Gap 0 = 0
+ *
+ * Gap 1 = 0.25rem (4px)
+ *
+ * Gap 2 = 0.5rem (8px)
+ *
+ * Gap 3 = 1rem (16px)
+ *
+ * Gap 4 = 1.5rem (24px)
+ *
+ * Gap 5 = 3rem (48px)
+ */
+export const AllGaps: Story = {
+  render: () => (
+    <Stack gap={4}>
+      <Stack direction="horizontal" gap={0}>
+        <Col style={inlineStyles}>Item 1</Col>
+        <Col style={inlineStyles}>Item 2</Col>
+      </Stack>
+      <Stack direction="horizontal" gap={1}>
+        <Col style={inlineStyles}>Item 1</Col>
+        <Col style={inlineStyles}>Item 2</Col>
+      </Stack>
+      <Stack direction="horizontal" gap={2}>
+        <Col style={inlineStyles}>Item 1</Col>
+        <Col style={inlineStyles}>Item 2</Col>
+      </Stack>
+      <Stack direction="horizontal" gap={3}>
+        <Col style={inlineStyles}>Item 1</Col>
+        <Col style={inlineStyles}>Item 2</Col>
+      </Stack>
+      <Stack direction="horizontal" gap={4}>
+        <Col style={inlineStyles}>Item 1</Col>
+        <Col style={inlineStyles}>Item 2</Col>
+      </Stack>
+      <Stack direction="horizontal" gap={5}>
+        <Col style={inlineStyles}>Item 1</Col>
+        <Col style={inlineStyles}>Item 2</Col>
+      </Stack>
+    </Stack>
+  )
+}
+
+/**
+ * Use `as` prop to render the Stack as a different element.
+ * If you inspect the rendered HTML, you will see that the Stack is rendered as a section element.
+ */
+export const StackAsSection: Story = {
+  render: () => (
+    <Stack as="section">
+      <div style={inlineStyles}>Item 1</div>
+      <div style={inlineStyles}>Item 2</div>
+      <div style={inlineStyles}>Item 3</div>
+    </Stack>
+  )
+}