npmpackage.info

Gathering detailed insights and metrics for @lion/form-core

@lion/form-core

Fundamental white label web component features for your design system.

0.18.3

1,774

MIT

JavaScript

583,849 4.7

Installations

npm install @lion/form-core

Pull Requests

Open

32

Total

1,732

Closed

274

Merged

1,426

Issues

Open

84

Total

564

Closed

480

Releases

1,991

@lion/ui@0.8.8

Published on 28 Nov 2024

@lion/ui@0.8.7

Published on 25 Nov 2024

providence-analytics@0.17.2

Published on 13 Nov 2024

@lion/ui@0.5.7

Published on 12 Nov 2024

@lion/ui@0.8.5

Published on 12 Nov 2024

@lion/ui@0.8.4

Published on 06 Nov 2024

View all 1,991 releases

Developer

ing-bank

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

Yes

Node Version

16.17.0

NPM Version

8.15.0 Statistics

1,774 Stars

2,812 Commits

295 Forks

32 Watching

119 Branches

141 Contributors

Updated on 28 Nov 2024

Languages

JavaScript (97.04%)

TypeScript (2.5%)

HTML (0.46%)

Total Downloads

Cumulative downloads

Total Downloads

583,849

Last day

-10.8%

330

Compared to previous day

Last week

-8.3%

2,030

Compared to previous week

Last month

10.8%

9,295

Compared to previous month

Last year

-12%

136,222

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@lion/core @lion/localize

Versions

Lion

Website · Fundamentals · Guides · Components · Blog

Lion is a set of highly performant, accessible and flexible Web Components.!

They provide an unopinionated, white-label layer that can be extended to your own layer of components.

High Performance: Focused on great performance in all relevant browsers with a minimal number of dependencies.
Accessibility: Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
Flexibility: Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
Modern Code: Lion is distributes as pure es modules.
Exposes functions/classes and Web Components: Ships a functionality in it's most appropriate form.

Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.

Explore the Lion Guides ▶

How to install

1npm i @lion/ui

How to use

Extend a Web Component

This is the main use case for lion. To import component classes, and extend them for your own design system's components.

1import { css } from 'lit';
2import { LionInput } from '@lion/ui/input.js';
3
4class MyInput extends LionInput {
5  static get styles() {
6    return [
7      super.styles,
8      css`
9        /* your styles here */
10      `,
11    ];
12  }
13}
14customElements.define('my-input', MyInput);

Use a JavaScript system

There's a couple of "systems" in lion which have a JavaScript API. Examples are localize, overlays, ajax, etc.

1<script type="module">
2  import { ajax } from '@lion/ui/ajax.js';
3
4  ajax
5    .fetch('data.json')
6    .then(response => response.json())
7    .then(data => {
8      // do something with the data
9    });
10</script>

Use a Web Component

You can also use the lion elements directly, although this is likely not a common use case.

1<script type="module">
2  import '@lion/ui/define/lion-input.js';
3</script>
4
5<lion-input name="firstName"></lion-input>

Issues

If you encounter an issue with any of the packages we are offering please open a new bug issue. Be sure to include a description of the expected and the current behavior - additional adding a reproduction always helps.

Feature requests

When you have an idea on how we could improve, please check our discussions to see if there are similar ideas or feature requests. If there are none, please start your feature request as a new discussion topic. Add the title [Feature Request] My awesome feature and a description of what you expect from the improvement and what the use case is.

Content

Name	version	description
@lion/ui		Set of components
@lion/ajax		A small wrapper around fetch
Singleton-manager		A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton. Primarily useful if two major version of a package with a singleton is used.
Babel plugin extend docs		A plugin which rewrites imports and templates according to a configuration. This enables the reuse of existing documentation from source packages while still using your extensions code.
Providence analytics		Providence is the 'All Seeing Eye' that generates usage statistics by analyzing code. It measures the effectivity and popularity of your software. With just a few commands you can measure the impact for (breaking) changes, making your release process more stable and predictable.
Publish docs		A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
Remark extend		A plugin for remark to extend markdown by importing from source files.
Rocket preset extend lion docs		When maintaining your own extension layer of lion you most likely want to maintain a similar documentation. Copying and rewriting the markdown files works, but whenever something changes you need copy and rewrite again. To do this automatically you can use this preset for rocket.

Technologies

Lion Web Components aims to be future-proof and use well-supported proven technology. The stack we have chosen should reflect this.

Rationale

We know from experience that making high quality, accessible UI components is hard and time consuming: it takes many iterations, a lot of development time and a lot of testing to get a generic component that works in every context, supports many edge cases and is accessible in all relevant screen readers.

Lion aims to do the heavy lifting for you. This means you only have to apply your own Design System: by delivering styles, configuring components and adding a minimal set of custom logic on top.

Coding guidelines

Check out our coding guidelines for more detailed information.

How to contribute

Please note: This project uses Npm Workspaces. If you want to run all demos locally you need to get at least npm 7+ and install all dependencies by executing npm install.

Lion Web Components are only as good as its contributions. Read our contribution guide and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.

Contact

Feel free to create a github issue for any feedback or questions you might have.

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/verify-pr.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/ing-bank/lion/verify-pr.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/release.yml:30
Warn: npmCommand not pinned by hash: .github/workflows/verify-pr.yml:24
Warn: npmCommand not pinned by hash: .github/workflows/verify-pr.yml:46
Warn: npmCommand not pinned by hash: .github/workflows/verify-pr.yml:74
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned
Info: 0 out of 4 npmCommand dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.7

/10

Last Scanned on 2024-11-25

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