npmpackage.info

Gathering detailed insights and metrics for @kirbydesign/designsystem

@kirbydesign/designsystem

Kirby Design System

10.1.3

MIT

TypeScript

607,110 3.7

Installations

npm install @kirbydesign/designsystem

Pull Requests

Open

8

Total

1,836

Closed

272

Merged

1,556

Issues

Open

199

Total

1,869

Closed

1,670

Releases

331

Extensions Angular v1.2.0

v1.2.0-extensions-angular

Published on 13 Nov 2024

v10.1.3

Published on 15 Oct 2024

v10.1.2

Published on 15 Oct 2024

v10.1.1

Published on 15 Oct 2024

Extensions Angular v1.1.0

v1.1.0-extensions-angular

Published on 14 Oct 2024

v9.7.2

Published on 10 Oct 2024

View all 331 releases

Developer

kirbydesign

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

20.17.0

NPM Version

10.8.2 Statistics

85 Stars

4,116 Commits

23 Forks

21 Watching

125 Branches

84 Contributors

Updated on 26 Nov 2024

Languages

TypeScript (74.93%)

HTML (14.54%)

SCSS (9.71%)

JavaScript (0.6%)

Swift (0.11%)

Java (0.05%)

Ruby (0.03%)

Perl (0.02%)

MDX (0.01%)

Total Downloads

Cumulative downloads

Total Downloads

607,110

Last day

-36.3%

242

Compared to previous day

Last week

-60.5%

1,534

Compared to previous week

Last month

11.8%

15,107

Compared to previous month

Last year

-18.2%

121,139

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Kirby Design System

About

Kirby Design System is a UX Component library implementing the Kirby Design Philosophy.

Kirby Components are built on top of Angular and can be used in Angular projects.

The Kirby Cookbook, containing samples, status of components etc. can be accessed from https://cookbook.kirby.design.

Kirby Design System
About
Table of Contents
Installation
Folder Structure
Scripts
Contributing

Installation

Install through npm:

1npm i @kirbydesign/designsystem

Include KirbyModule

NgModule based application

Import the KirbyModule in your AppModule :

1import { KirbyModule } from '@kirbydesign/designsystem';
2
3...
4
5@NgModule({
6    imports: [
7        ...,
8        KirbyModule
9    ],
10    ...
11})
12export class AppModule {}

Standalone application

Import providers from KirbyModule when bootstrapping your application:

1import { importProvidersFrom } from '@angular/core';
2import { KirbyModule } from '@kirbydesign/designsystem';
3
4...
5
6await bootstrapApplication(RootComponent, {
7  providers: [
8    ...,
9    importProvidersFrom(KirbyModule)
10  ]
11});

Sass

Include the Kirby global styles in your app, e.g., in src/styles.scss:

1@use '@kirbydesign/designsystem/scss/global-styles';

In each .scss file where you need to access the Sass utility functions from Kirby (e.g. colors or fonts) you must import the scss utilities:

1@use '@kirbydesign/designsystem/scss/utils';

Generic Print Styles (Optional)

Kirby also provides a generic print stylesheet. It includes the basics. You most likely have to add local print styles specific to your app as well.

Import it into your app, e.g., in src/styles.scss or in your local print stylesheet if you have one:

1@use '@kirbydesign/designsystem/scss/print';

Testing

To unit-test applications using Kirby's Components, we recommend importing one of the following modules:

When using jasmine: import { KirbyTestingModule } from '@kirbydesign/designsystem/testing-jasmine';
When using jest: import { KirbyTestingModule } from '@kirbydesign/designsystem/testing-jest';

Example:

1import { KirbyTestingModule } from '@kirbydesign/designsystem/testing-jasmine';
2
3describe('AppComponent', () => {
4  beforeEach(async(() => {
5    TestBed.configureTestingModule({
6      imports: [KirbyTestingModule],
7      declarations: [AppComponent]
8    }).compileComponents();
9  }));
10
11  ...
12
13});

For unit test performance reasons it's highly recommended to utilize these modules, since they provide a template-less implementation of the Kirby Components, but still translude content through <ng-content></ng-content> and provide @Input -decorated properties and @Output -decorated EventEmitter s, without having to reflow the DOM, execute component logic etc.

Icons

Kirby comes bundled with a default set of icons. Make sure the .svg files used by Kirby are copied to your output folder by adding the following to build > options > assets in angular.json :

1{
2  ...
3  "build": {
4    "options": {
5      "assets": [
6        ...,
7        {
8          "glob": "**/*.svg",
9          "input": "node_modules/@kirbydesign/designsystem/icons/svg",
10          "output": "./assets/kirby/icons/svg"
11        },
12        {
13          "glob": "close.svg",
14          "input": "node_modules/@kirbydesign/designsystem/icons/svg",
15          "output": "./svg"
16        },
17        ...
18      ],
19    }
20  }
21}

It is possible to configure the path that the built-in icons are loaded from by providing the BUILT_IN_ICONS_URL injection token:

1// In app providers:
2{
3  provide: BUILT_IN_ICONS_URL,
4  useValue: 'https://example.org/1.0.1/kirby/icons/svg/'
5}

Migration Guides

For details on migrating from earlier versions of Kirby see our Migration Guides.

Folder Structure

The folder structure of the repository is based on Nrwl's NX mono-repository project.

A basic walkthrough is outlined in the structure below:

@kirbydesign/designsystem
├── apps                    # Contains source code for applications
|  └── cookbook             # - Cookbook application (showcase and examples)
├── dist                    # Contains output files when building artifacts (for distribution)
|  ├── apps
|  └── libs
├── libs                    # Contains source code for libraries
|  └── designsystem         # - Actual implementation of library (designsystem)
├── scripts                 # Scripts for building artifacts
└── tools                   # Contains various tools
   ├── generate-mocks       # - CLI utility for generating mocks for `@kirbydesign/designsystem/testing-jasmine`
   |                        #   and `@kirbydesign/designsystem/testing-jest` entry points.
   ├── sass-to-ts           # - CLI and Webpack plugin for extract global variables from SASS to TS
   ├── schematics           # - Angular schematics

Scripts

Below is an overview of most widely used scripts, available for this project.
Use them in your terminal like: npm run <script> :

Command	Description
start	Starts the development server, providing a means of running the cookbook while developing
start:ios	Builds the flows app and deploys it to an iOS device (real or simulated) using Capacitor
start:android	Builds the flows app and deploys it to an Android device (real or simulated) using Capacitor
publish	When run locally it produces a set of npm packages in `dist/` that can be installed locally with npm install
storybook	Opens up Storybook where component states are set up for snapshot testing with Chromatic

We use nx to run common tasks like building, linting and testing projects. This is done with npx nx <target name> <project name>, e.g. npx nx lint designsystem preferrably from the root of the workspace to ensure config paths are resolved correctly.

Contributing

If you wish to contribute new features, bug fixes or something third to the project have a look at the contribution guidelines.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

9

Code-Review

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

9

Binary-Artifacts

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

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Dangerous-Workflow

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

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

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:135: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:148: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:159: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:226: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:239: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/chromatic.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/chromatic.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/chromatic.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/chromatic.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cleanup-branch-deployment.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/cleanup-branch-deployment.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cleanup-branch-deployment.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/cleanup-branch-deployment.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cleanup-branch-deployment.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/cleanup-branch-deployment.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/kirbydesign/designsystem/publish.yml/develop?enable=pin
Warn: containerImage not pinned by hash: Dockerfile:1: pin your Docker image by updating nginx to nginx@sha256:bc5eac5eafc581aeda3008b4b1f07ebba230de2f27d47767129a6a905c84f470
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 11 third-party GitHubAction dependencies pinned
Info: 0 out of 1 containerImage dependencies pinned

0

Branch-Protection

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

0

SAST

Determines if the project uses static code analysis.

Score

3.7

/10

Last Scanned on 2024-11-18

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

@kirbydesign/designsystem

Installations

Pull Requests

8

1,836

272

1,556

Issues

199

1,869

1,670

Releases

Developer

Developer Guide

ESM

No

20.17.0

10.8.2

Statistics

Languages

Total Downloads

607,110

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Kirby Design System

About

Table of Contents

Installation

Include KirbyModule

NgModule based application

Standalone application

Sass

Generic Print Styles (Optional)

Testing

Icons

Migration Guides

Folder Structure

Scripts

Contributing

10

10

9

9

8

0

0

0

0

0

0

0

0

3.7

/10