npmpackage.info

Gathering detailed insights and metrics for @utrecht/component-library-formio

@utrecht/component-library-formio - 1.0.0-alpha.555 | npmpackage.info

@utrecht/component-library-formio

Work in Progress: Utrecht Design System based on the NL Design System architecture. Storybook: https://nl-design-system.github.io/utrecht/storybook/

1.0.0-alpha.555

EUPL-1.2

TypeScript

1.81 kB

141,467 5.8

Installations

npm install @utrecht/component-library-formio

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.12.1

NPM Version

lerna/1.17.0/node@v18.12.1+x64 (linux)

Score

72.4

Supply Chain

Quality

79.9

Maintenance

100

Vulnerability

93.6

License

Pull Requests

Open

95

Total

2,549

Closed

1,177

Merged

1,277

Issues

Open

231

Total

274

Closed

43

Releases

905

@utrecht/youtube-video-react@1.0.0

Updated on May 07, 2025

@utrecht/component-library-css@7.2.0

Updated on May 07, 2025

@utrecht/youtube-video-css@1.0.0

Updated on May 07, 2025

@utrecht/textbox-react@1.0.8

Updated on May 07, 2025

@utrecht/radio-button-react@1.0.7

Updated on May 07, 2025

@utrecht/root-react@1.0.6

Updated on May 07, 2025

View All 905 releases

Languages

TypeScript

SCSS

HTML

JavaScript

MDX

CSS

Vue

Shell

TypeScript (73.04%)

SCSS (12.27%)

HTML (5.88%)

JavaScript (4.44%)

MDX (2.36%)

CSS (1.15%)

Vue (0.85%)

Developer

nl-design-system

Download Statistics

Total Downloads

141,467

Last Day

Last Week

Last Month

1,646

Last Year

7,101

GitHub Statistics

EUPL-1.2 License

29 Stars

3,687 Commits

22 Forks

7 Watchers

259 Branches

47 Contributors

Updated on May 09, 2025

Bundle Size

8.10 kB

Minified

1.81 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 47 Contributors

Package Meta Information

Latest Version

1.0.0-alpha.555

Package Id

@utrecht/component-library-formio@1.0.0-alpha.555

Unpacked Size

38.65 kB

Size

11.04 kB

File Count

NPM Version

lerna/1.17.0/node@v18.12.1+x64 (linux)

Node Version

18.12.1

Published on

Nov 16, 2023

Total Downloads

Cumulative downloads

Total Downloads

141,467

Last Day

Compared to previous day

Last Week

-95.1%

Compared to previous week

Last Month

-6.9%

1,646

Compared to previous month

Last Year

-91.1%

7,101

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@utrecht/web-component-library-stencil formiojs npm-run-all react react-dom react-formio rimraf typescript

Form.io Components

The @utrecht/component-library-formio package contains implementations of various form related components. It currently is a mix of CSS components and Web components. This means you need to install the following three packages:

Installation

1npm install --save-dev --save-exact \
2  @utrecht/component-library-css \
3  @utrecht/component-library-formio \
4  @utrecht/web-component-library-stencil

Additionally, having the core Form.io packages installed is a prerequisite:

1npm install --save-dev --save-exact formiojs react-formio

Configure Form.io to use our custom components instead by including the following code in your app once:

1import { Formio, Templates } from "react-formio";
2import { components, templates } from "@utrecht/component-library-formio";
3
4Formio.use({ components });
5Templates.current = templates;

Since the implementation of the web components needs to be loaded in the browser, include the following effect to import web component library from @utrecht/web-component-library-stencil, in Next.js this would be in _app.ts:

1useEffect(() => {
2  import("@utrecht/web-component-library-stencil/dist/utrecht/utrecht.esm.js");
3}, []);

Create a form

Because the components use Web components internally, it is important to include the web components in the allow list of DOMPurify, which would otherwise remove these essential custom elements as part of the cross-site scripting mitigations:

1import { Form } from 'react-formio';
2import { sanitizeConfig } from "@utrecht/component-library-formio";
3
4export const Page () => (<Form options={{ sanitizeConfig }}/>)

Every <Form> element must be configured with the correct sanitizeConfig settings, otherwise the form inputs cannot be displayed.

Theming

To use the Utrecht theme for the components, include the design tokens CSS in your angular.json:

1npm install --save-dev --save-exact @utrecht/design-tokens

Include the CSS variables in your page, and apply the utrecht-theme class name.

1import "@utrecht/design-tokens/dist/index.css";

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

7

SAST

Determines if the project uses static code analysis.

4

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

73 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-593m-55hh-j8gv
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-gp8f-8m3g-qvj9
Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
Warn: Project is vulnerable to: GHSA-f82v-jwr5-mffw
Warn: Project is vulnerable to: GHSA-fr5h-rqp8-mj6g
Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-wgrm-67xf-hhpq
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-pqhp-25j4-6hq9
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-3787-6prv-h9w3
Warn: Project is vulnerable to: GHSA-9f24-jqhm-jfcw
Warn: Project is vulnerable to: GHSA-9qxr-qj54-h672
Warn: Project is vulnerable to: GHSA-m4v8-wqvr-p9f7
Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
Warn: Project is vulnerable to: GHSA-rcw3-wmx7-cphr
Warn: Project is vulnerable to: GHSA-963h-3v39-3pqf
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

5.8

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More