https://github.com/kit-data-manager/pid-component

The PID-Component is a web component that can be used to display PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.
https://github.com/kit-data-manager/pid-component

fair-data fair-do handle pid stenciljs storybook tailwindcss typescript webcomponents

Last synced: 3 months ago
JSON representation

The PID-Component is a web component that can be used to display PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.

• Host: GitHub
• URL: https://github.com/kit-data-manager/pid-component
• Owner: kit-data-manager
• License: apache-2.0
• Created: 2023-07-27T12:47:42.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-11T08:01:51.000Z (3 months ago)
• Last Synced: 2024-11-11T09:18:28.476Z (3 months ago)
• Topics: fair-data, fair-do, handle, pid, stenciljs, storybook, tailwindcss, typescript, webcomponents
• Language: TypeScript
• Homepage: https://kit-data-manager.github.io/pid-component/
• Size: 1.63 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Citation: CITATION.cff
  • Codemeta: codemeta.json

Awesome Lists containing this project

README

        
# PID Component

[![CodeQL](https://github.com/kit-data-manager/pid-component/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/kit-data-manager/pid-component/actions/workflows/github-code-scanning/codeql)

The `pid-component` is an easily extensible web component that can be used to display PIDs, ORCiDs, and possibly other

identifiers in a user-friendly way.

It is easily extensible to support other identifier types.

The `pid-component` dynamically renders a component based on the value of the `value` property.

Depending on the value, it decides which component to render, what priority to give it, and what props to pass to it.

It also renders itself recursively for all its children when unfolded.

You can set the maximum depth of recursion with the `level-of-subcomponents` property.

By default, it is set to 1, which means that it will only render the first level of children, but not their children.

You can prohibit unfolding of the component by setting the `current-level-of-subcomponents` to the same value as

the `level-of-subcomponents` property.

To use the component, import the [npm-package](https://www.npmjs.com/package/@kit-data-manager/pid-component) via [unpkg](https://unpkg.com/):

```html

  

```

Alternatively, you can install the package via npm:

```bash

npm install @kit-data-manager/pid-component

```

Then, you can use this component like this:

```html

```

You can try this web component in the [demo](https://kit-data-manager.github.io/pid-component).

**Only use the `pid-component` component! All the others are just for prototyping...**

There are detailed docs for the `pid-component` component

available [in the Storybook](https://kit-data-manager.github.io/pid-component) and in

the [source code](src/components/pid-component/readme.md).

**Please notice that you must use the hyphenated version of an attribute when using the component directly in HTML (

e.g. `currentLevelOfSubcomponents` -> `current-level-of-subcomponents`).

When using inside Stencil or with JSX/TSX syntax, you must use the camelCase version.**

## How to run when developing

1. Clone the repo

2. Run `npm install`

For running storybook in dev mode, run these commands in separate terminals:

- `npm run buildWatch`

- `npm run storybook`

Attention: Do **NOT** run `npm run start`. It will cause the storybook to not work properly.

If you did run `npm run start`, delete the following folders and run `npm install` again:

- `node_modules`

- `www`

- `dist`

- `loader`

- `.stencil`