116 - Publish npm package for the design system

[MellyGray]

What this PR does / why we need it:

This PR publishes the Dataverse Design System to the npm registry. It includes the necessary changes and configurations to publish the design system components and make them available as an npm package.

Which issue(s) this PR closes:

Closes #116

Special notes for your reviewer:

The automation of the publishing will be developed in this other issue:

• Automate the publication of the @iqss/dataverse-design-system package #140

The creation of a test registry will be developed in this other issue:

• Create test registry for the @iqss/dataverse-design-system package #144

To publish a new version of the package you need to be registered in the npmjs.com IQSS organization. Contact me via slack so I can send you the invite!

Suggestions on how to test this:

Test the published package

To test the package:

1. Create a new React application. I'll go with the first option which is running npx create-next-app in your machine (ensure you have node installed in your machine)
2. In your app root folder run npm i to install all the packages of the demo app
3. Follow the instructions from the README of the package @iqss/dataverse-design-system
4. If you're using npx create-next-app then go to the src/app/page.tsx file
5. Place the imports at the top of the file with the other imports import { Col, Container, Form, Row} from "@iqss/dataverse-design-system";. If you are using next-js you'll need to set 'use client' at the top of the file since the design system components are client components
6. Now copy the example code in the usage section of the package README and paste it somewhere inside the Home function of the src/app/page.tsx file
7. Run the application using npm run dev and go to http://localhost:3000 to see the application using the design system components

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

None

Is there a release notes update needed for this change?:

Published first version of the Dataverse Design System to the npm registry @iqss/dataverse-design-system

Additional documentation:

Lerna publishing

[GPortas]

I created the test app and imported the package following the steps and it works great!

page.tsx code:

'use client'

import { Container, Navbar } from '@iqss/dataverse-design-system'

const brand = {
  logoImgSrc: '',
  title: 'Dataverse',
  href: '/home'
}

export default function Home() {
    return (
      <Container>
        <Navbar brand={brand}>
        <Navbar.Link href="/link-1">Link 1</Navbar.Link>
        <Navbar.Link href="/link-2">Link 2</Navbar.Link>
        <Navbar.Dropdown title="Dropdown" id="dropdown">
          <Navbar.Dropdown.Item href="/sublink-1">Sublink 1</Navbar.Dropdown.Item>
          <Navbar.Dropdown.Item href="/sublink-2">Sublink 2</Navbar.Dropdown.Item>
        </Navbar.Dropdown>
      </Navbar>
      </Container>
    )
}

[GPortas]

Why downgrade?

[MellyGray]

The rest of the workflows are using node 18, and the lint workflow was failing, so I thought that could be the issue. But it wasn't. So we can go back to 19, although I think that all workflows should run on the same node version. And also I'm running node 18 in my machine

[GPortas]

Looks good and works great!