From f137ad835bcc44807e882d19000a3c99b6b9dd51 Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Wed, 26 Feb 2025 11:47:10 +0100 Subject: [PATCH] Revert Mercury documentation styling for node v22.13.1. --- projects/mercury/README.md | 36 ++++++++--------- projects/mercury/Structure.md | 74 +++++++++++++++++------------------ 2 files changed, 55 insertions(+), 55 deletions(-) diff --git a/projects/mercury/README.md b/projects/mercury/README.md index 848e6d5ea..af43f0b72 100644 --- a/projects/mercury/README.md +++ b/projects/mercury/README.md @@ -14,17 +14,17 @@ please read about the [project structure](Structure.md) first. Prerequisites: -- [nodejs and npm](https://www.npmjs.com/get-npm) -- [yarn](https://yarnpkg.com/lang/en/) -- docker -- Java 17 +- [nodejs and npm](https://www.npmjs.com/get-npm) +- [yarn](https://yarnpkg.com/lang/en/) +- docker +- Java 17 The Mercury frontend app needs a backend to communicate with. For convenience, there are a few scripts to use for local development: -- `yarn localdevelopment` starts Keycloak at port `5100`. -- `yarn saturn` starts the backend at port `8090`. -- `yarn pluto` starts a proxy server that also serves the frontend at port `8080`. -- `yarn start` starts the frontend and exposes it at port `3000`. +- `yarn localdevelopment` starts Keycloak at port `5100`. +- `yarn saturn` starts the backend at port `8090`. +- `yarn pluto` starts a proxy server that also serves the frontend at port `8080`. +- `yarn start` starts the frontend and exposes it at port `3000`. For the first run, execute the following command to install all dependencies locally: @@ -40,12 +40,12 @@ yarn dev This will start: -- Keycloak (http://localhost:5100) -- PostgreSQL (port `9432`) -- Saturn (JDK 17 required, port `8090`) -- Pluto (proxy, including Mercury frontend, http://localhost:8080) -- Mercury frontend in development mode (http://localhost:3000) -- a [backend proxy](src/setupProxy.js) for Mercury +- Keycloak (http://localhost:5100) +- PostgreSQL (port `9432`) +- Saturn (JDK 17 required, port `8090`) +- Pluto (proxy, including Mercury frontend, http://localhost:8080) +- Mercury frontend in development mode (http://localhost:3000) +- a [backend proxy](src/setupProxy.js) for Mercury The backend and frontend application will be available at http://localhost:8080/ @@ -58,10 +58,10 @@ In Keycloak, one setting needs to be configured manually: the permissions of the ### Libraries -- The UI uses many components from [Material UI](https://material-ui.com/). -- [axios](https://github.com/axios/axios) is used for http requests. -- [webdav](https://github.com/perry-mitchell/webdav-client) is used for connecting to WebDAV servers. -- [jsonld](https://github.com/digitalbazaar/jsonld.js) is used for unpacking JSON-LD responses. +- The UI uses many components from [Material UI](https://material-ui.com/). +- [axios](https://github.com/axios/axios) is used for http requests. +- [webdav](https://github.com/perry-mitchell/webdav-client) is used for connecting to WebDAV servers. +- [jsonld](https://github.com/digitalbazaar/jsonld.js) is used for unpacking JSON-LD responses. ### Code style diff --git a/projects/mercury/Structure.md b/projects/mercury/Structure.md index cd70e54a6..3a483810e 100644 --- a/projects/mercury/Structure.md +++ b/projects/mercury/Structure.md @@ -6,36 +6,36 @@ The project follows the [feature based approach](https://reactjs.org/docs/faq-st The feature folders (`collections`, `file`, `metadata`, `users`, `workspaces`) contain: -- \*API.js - - Service file to communicate with the backend. -- \*Page - - The main entry point for the feature/route -- Other specialized components specific to the feature +- \*API.js + - Service file to communicate with the backend. +- \*Page + - The main entry point for the feature/route +- Other specialized components specific to the feature ## Shared components and functions -- `/common` (Shared code) - - `/components` - - [CollectionInformationDrawer](src/collections/CollectionInformationDrawer.js) (Side panel contains collection info, collaborators/permissions and metadata for selected collection, directories or files) - - `/context` (shared/injected state/logic) [Read on React Context](https://reactjs.org/docs/context.html) - - `/hooks` (pure logic/state no UI) [Read on React Hooks](https://reactjs.org/docs/hooks-intro.html) - - [/services/Config.js](./src/common/services/Config.js) (configuration from backend) - - `/utils` (Utility files, pure functions) -- `/metadata` (could be renamed to linkeddata) - - Generic components (for metadata and vocabulary) are called LinkedData\*.js - - `/common` (shared components between Vocabulary and Metadata) - - values (the different form fields, text input, dates, dropdown etc.) - - [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) This component and its child components are probably the most complex areas in the frontend code. Some refactoring might be required in case there is any expected changes and in order to make the code easier to maintain. - - [LinkedDataContext](./src/metadata/LinkedDataContext.js) with a provider [LinkedDataMetadataProvider](./src/metadata/LinkedDataMetadataProvider.js) - - [LinkedDataWrapper](./src/metadata/LinkedDataWrapper.js) - - 2 Wrappers to provide needed values to either metadata or vocabulary - - [UseLinkedData](src/metadata/common/UseLinkedData.js) - - Fetches the entity whether it's part of the metadata or vocabulary, using the provided subject - - [UseFormData](src/metadata/common/UseFormData.js) - - Contains the currently loaded form/entity values, changes, validation state and form operations. - - [UseFormSubmission](src/metadata/common/UseFormSubmission.js) - - Submits form changes and handles submission errors -- `/permissions` +- `/common` (Shared code) + - `/components` + - [CollectionInformationDrawer](src/collections/CollectionInformationDrawer.js) (Side panel contains collection info, collaborators/permissions and metadata for selected collection, directories or files) + - `/context` (shared/injected state/logic) [Read on React Context](https://reactjs.org/docs/context.html) + - `/hooks` (pure logic/state no UI) [Read on React Hooks](https://reactjs.org/docs/hooks-intro.html) + - [/services/Config.js](./src/common/services/Config.js) (configuration from backend) + - `/utils` (Utility files, pure functions) +- `/metadata` (could be renamed to linkeddata) + - Generic components (for metadata and vocabulary) are called LinkedData\*.js + - `/common` (shared components between Vocabulary and Metadata) + - values (the different form fields, text input, dates, dropdown etc.) + - [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) This component and its child components are probably the most complex areas in the frontend code. Some refactoring might be required in case there is any expected changes and in order to make the code easier to maintain. + - [LinkedDataContext](./src/metadata/LinkedDataContext.js) with a provider [LinkedDataMetadataProvider](./src/metadata/LinkedDataMetadataProvider.js) + - [LinkedDataWrapper](./src/metadata/LinkedDataWrapper.js) + - 2 Wrappers to provide needed values to either metadata or vocabulary + - [UseLinkedData](src/metadata/common/UseLinkedData.js) + - Fetches the entity whether it's part of the metadata or vocabulary, using the provided subject + - [UseFormData](src/metadata/common/UseFormData.js) + - Contains the currently loaded form/entity values, changes, validation state and form operations. + - [UseFormSubmission](src/metadata/common/UseFormSubmission.js) + - Submits form changes and handles submission errors +- `/permissions` ## Metadata forms @@ -48,16 +48,16 @@ key/IRI is the list of values for this property. The forms components can be broken down as: -- [LinkedDataEntityFormContainer](./src/metadata/common/LinkedDataEntityFormContainer.js) - - Applies some specific logic according to the type of linked data (metadata or vocabulary) using [LinkedDataContext](./src/metadata/LinkedDataContext.js) - - This component fetches the linked data entity - - Keeps form values, changes and validations using useFormData - - Submits changes using useFormSubmission - - Supplies properties and callback functions to [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) -- [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) - - The main form view that provides each property and delegates actions to [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js) -- [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js) - - This is the one that is concerned with rendering each field. It uses the [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) which is coming from [LinkedDataContext](./src/metadata/LinkedDataContext.js) to pick the right edit and add component of the field. The [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) mainly uses the property datatype (plus a few attributes such as isRdfList) to the proper 'value' input component. There is a big list of value components, such as, [StringValue](./src/metadata/common/values/StringValue.js), [NumberValue](./src/metadata/common/values/NumberValue.js) and [SwitchValue](./src/metadata/common/values/SwitchValue.js) etc. that are found in the [/metadata/common/values](src/metadata/common/values) directory. Then depending on the property whether it's a relation shape (Relation shapes are reference values to other entities) or not the component will render either [LinkedDataRelationTable](./src/metadata/common/LinkedDataRelationTable.js) or [LinkedDataInputFieldsTable](./src/metadata/common/LinkedDataInputFieldsTable.js). +- [LinkedDataEntityFormContainer](./src/metadata/common/LinkedDataEntityFormContainer.js) + - Applies some specific logic according to the type of linked data (metadata or vocabulary) using [LinkedDataContext](./src/metadata/LinkedDataContext.js) + - This component fetches the linked data entity + - Keeps form values, changes and validations using useFormData + - Submits changes using useFormSubmission + - Supplies properties and callback functions to [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) +- [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) + - The main form view that provides each property and delegates actions to [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js) +- [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js) + - This is the one that is concerned with rendering each field. It uses the [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) which is coming from [LinkedDataContext](./src/metadata/LinkedDataContext.js) to pick the right edit and add component of the field. The [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) mainly uses the property datatype (plus a few attributes such as isRdfList) to the proper 'value' input component. There is a big list of value components, such as, [StringValue](./src/metadata/common/values/StringValue.js), [NumberValue](./src/metadata/common/values/NumberValue.js) and [SwitchValue](./src/metadata/common/values/SwitchValue.js) etc. that are found in the [/metadata/common/values](src/metadata/common/values) directory. Then depending on the property whether it's a relation shape (Relation shapes are reference values to other entities) or not the component will render either [LinkedDataRelationTable](./src/metadata/common/LinkedDataRelationTable.js) or [LinkedDataInputFieldsTable](./src/metadata/common/LinkedDataInputFieldsTable.js). ## Keep in mind