MetaboHUB / PeakForest - Basal - Library

Metadata

• authors: [email protected], [email protected]
• creation date: 2023-05-26
• main usage: Vue.js webcomponents use for PeakForest V3 Web-Applications and MetaboHUB WebApp

Description

This project hosts webcomponents that can be re-used in any Vue3 libraries or WebApps. These webcomponents are designed to display basic information in web-pages.

Features

• :information_source: display property: display a key/value with a copy-to-clipboard option
• :link: display link: display a key/value with a web-link and a copy-to-clipboard option
• :card_file_box: display external identifier: display a key/value database identifier with a web-link and a copy-to-clipboard option
• :star: display scored value: display a scored value with stars
• :newspaper_roll: display publication: display a publication main information form its DOI or PubMed identifier
• :sunny: switch theme: switch from a theme in light-mode or dark-mode

Getting Started

This WebComponent library is compatible with projects using Vue.js 3 and TypeScript. This project is based on Vue.js, Vite and Vuetify frameworks.

Prerequisites

Note: this section is for developers who want to get involved into this project.

Before you begin, ensure you have met the following requirements:

• Programming Language: NodeJS version 20.19+ and npm version 11.7 or higher
• Frameworks: Vue.js version 3.4+, Vuetify.js version 3.5+

Installing

Note: this section is for developers who want to implement and use this library into their own project(s). To add the library to your Node.js project, please enter the following commands: npm i @metabohub/peakforest-basal-library

Then you must import the library in your src/main.ts file:

// import the library and its styles
import { MetabohubPeakForestBasalLibrary } from '@metabohub/peakforest-basal-library';
import '@metabohub/peakforest-basal-library/dist/mth-pforest-basal-lib-vue-ts.css';

const app = createApp(App);
registerPlugins(app); // <= import your plugin like vuetify, ...
app.use(MetabohubPeakForestBasalLibrary); // <= add this line!
app.mount('#app');

Finally you can add our WebComponent in you own Vue components:

<template>
  <div class="demo">
    <mth-pf-display-property property-label="Hello" property-value="World" />
  </div>
</template>

<script lang="ts">

// from Vue core
import { ref } from "vue";

export default {
  name: "Demo",
  setup() {};
};
</script>
<style lang="scss"></style>

Running the tests

You can run unit tests with the following commands:

# run unit tests
npm run test:unit
# run unit tests with coverage report
npm run test:coverage

You can run e2e tests with the following commands:

# launch the library as showcase mode in a first terminal...
npm run dev
# ... in a second terminal, run e2e tests
npm run test:e2e

Deployment

Build and publish the library

# install node modules listed into 'package.json' / 'package-lock.json' files
npm install
# build the library
npm run build:lib
npm pack
# publish the library
npm publish

:warning: you can update OpenAPI generated code with the following commands

# update EBI REST API client generated code
npm run openapi-generator:ebi
# update HAL REST API client generated code
npm run openapi-generator:hal

Library build and publish

Build and publish the library

# install node modules listed into 'package.json' / 'package-lock.json' files
npm install
# build the library
npm run build:lib
npm pack
# publish the library
npm publish

Notes:

• the publication registry is set into these files:
  • .npmrc.
  • package.json - key "publishConfig".
• the publication is automatic during CI/CD process; see .gitlab-ci.yml file.
• during the GitLab CI/CD pipeline, the previous package with the same version identifier is removed thanks:
  • curl commands - to get all published packages in targeted GitLab packages registry and remove a specific one
    (it require a GitLab API token with correct authorizations)

You can use non-stable version of the library using the GitLab npm package registry:

# if you already have installed the library, you must remove the previous one:
npm remove @metabohub/peakforest-basal-library
# config GitLab npm registry
npm config set @metabohub:registry https://forge.inrae.fr/api/v4/projects/11779/packages/npm/
# to install the library in your current Node.js project:
npm i --save @metabohub/peakforest-basal-library

Standalone showcase build

Build the standalone version with these commands

# install node modules listed into 'package.json' / 'package-lock.json' files
npm install
# either build the DEV standalone version
npm run build:dev
# or build the PROD standalone version
npm run build:prod

Please refer to .env, .env.development and .env.production files to see changes between PROD and DEV versions.

Note: you can run the standalone version into "dev mode" thanks npm run dev command.

Contributing

We welcome contributions! Please follow these steps:

How to Contribute

• create you own development branch
• before pushing it to the repository, please run the npm run lint command and check/ fix any error
• once your developments done, please create a merge request on gitlab

Development Guidelines

Please read Development Guidelines for details on our code of conduct, and the process for submitting pull requests to us.

Code Style

• Use Visual Studio Code IDE
• Use ESLint for JavaScript
• Use Prettier for code formatting
• Run npm run lint before committing

Changelog

All notable changes to this project will be documented in CHANGELOG.md. For the versions available, see the releases on this repository.

Authors

• Nils Paulhe - Initial work - MetaboHUB, INRAE, PFEM.
• Célian Barbe - Initial work - MetaboHUB, INRAE, PFEM.
• Franck Giacomoni - project management - MetaboHUB, INRAE, PFEM.

See also the list of contributors who participated in this project.

License

MetaboHUB / PeakForest - Basal library is distributed under the Apache 2 license.

Please refer to LICENSE.md file for further details.

Support & External resources

You can find installation procedure and code sample/snippet on this project's GitLab pages.

Acknowledgments

• MetaboHUB
• INRAE

Additional Resources

• Showcases - Library showcases and code snippets
• Coverage - code coverage reports