open-index/open-npm huggingface dataset:
npm package: @ks-digital/designsystem-angular
Description: > ⚠ This library is currently experimental. However, we actively use and test it in internal applications, and we strive to keep it stable at all times.
Latest version: 0.0.1-alpha.46

# KS Digital Designsystem for Angular

> ⚠ This library is currently experimental. However, we actively use and test it in internal applications, and we strive to keep it stable at all times.

This library provides Angular components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).

## Installation

Install the required packages using your preferred package manager:

```bash
pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
```

## Setup

### 1. Include the Inter Font

Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:

```html
<link href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
```

### 2. Import Base Styles and Themes

Import the base styles and the theme you want to use in your application:

```css
@import url('@ks-digital/designsystem-themes/base.css');
@import url('@ks-digital/designsystem-themes/forvaltning.css');
```

### 3. Use Components

```ts
import { Button } from '@ks-digital/designsystem-angular'

@Component({
  imports: [Button],
  template: `
  <button ksd-button>
    Click me
  </button>
  `,
})
```

## Example

A complete example setup is available in the `angular-demo` located under the `apps` folder.

## Development

`pnpm nx run @ks-digital/designsystem-angular:storybook`
npm package: @ks-digital/designsystem-react
Description: This library provides React components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
Latest version: 0.0.1-alpha.46

# KS Digital Designsystem for React

This library provides React components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).

## Installation (WIP)

Install the required packages using your preferred package manager:

```bash
pnpm add @ks-digital/designsystem-react @ks-digital/designsystem-themes
```

## Setup

### 1. Include the Inter Font

Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:

```html
<link href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter&display=swap" rel="stylesheet" />
```

### 2. Import Base Styles and Themes

Import the base styles and the theme you want to use in your application:

```javascript
import '@ks-digital/designsystem-themes/base.css'
import '@ks-digital/designsystem-themes/ledsagerbevis.css'
```

### 3. Use Components

Import and use the components you need. You can explore the available components at [Designsystemet.no](https://www.designsystemet.no/komponenter):

```javascript
import { Button } from '@ks-digital/designsystem-react'

function MyComponent() {
  return <Button data-size="lg">My Button</Button>
}
```

## Example

A complete example setup is available in the `react-demo` located under the `apps` folder.
npm package: @ks-digital/designsystem-themes
Description: This package provides prebuilt themes for use with Designsystemet at KS Digital. Themes are created using the [Theme Builder from Designsystemet](https://theme.designsystemet.no/)
Latest version: 0.0.1-alpha.46

# Designsystem Themes

This package provides prebuilt themes for use with Designsystemet at KS Digital. Themes are created using the [Theme Builder from Designsystemet](https://theme.designsystemet.no/)

## Supported Themes

The following themes are officially supported:

- **Ledsagerbevis**
- **Forvaltning**
- **Minkommune**
- **Tilskudd**

Additionally, a base style is provided and should be applied first. We aim to keep this base style as minimal as possible.

## Usage

To use the themes, include the base styles and one of the supported themes in your CSS or JavaScript/TypeScript files as shown below:

### In CSS Files

If your bundler (e.g., Vite) is configured to resolve npm packages in CSS imports:

```css
@import url('@ks-digital/designsystem-themes/base.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');
```

#### Tailwind

If you are using Tailwind with [Preflight](https://tailwindcss.com/docs/preflight), ensure that you load the Designsystemet styles first by importing `base.tailwind.css` instead of `base.css`. The `base.tailwind.css` file includes all of `base.css` along with some overrides to ensure smooth integration between Designsystemet and Tailwind.

The [theme].tailwind.css bridges the gap between Designsystemet and Tailwind, by mapping Tailwind-classes to the Designsystem-tokens! So import that as well.

##### v4

```css
@import url('@ks-digital/designsystem-themes/base.tailwind.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.tailwind.css');
@import url('tailwindcss');
```

##### v3 and older

> **Note:**  
> Tailwind versions earlier than v4 do **not** support mapping Tailwind utility classes directly to Designsystemet tokens.

```css
@import url('@ks-digital/designsystem-themes/base.tailwind.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');

@layer tailwind-base, ds;

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;
```

### In JavaScript/TypeScript Files

If you are building a JavaScript/TypeScript application, import the styles like this. If you are using React, please check the readme in the React-package.

```javascript
import '@ks-digital/designsystem-themes/base.css'
import '@ks-digital/designsystem-themes/ledsagerbevis.css'
```

## Adding new themes

1. Add theme to `designsystemet.config.json`. The color names must match the other themes.
2. Create design tokens for theme `pnpm run themes:create-tokens`
3. Build themes `pnpm run themes:build`
4. Add theme `exports`-field in `packages/themes/package.json`
5. Add theme to Storybook `tools/storybook/themes.ts`
6. Add theme to docs `apps/www/src/Temaer.mdx`
npm package: @ks-dilu/react-micro
Description: 的卢微前端子应用SDK
Author: ybbjegj
Latest version: 0.1.4

# `@ks-dilu/react-micro`

> 微前端 react 子应用 SDK，简化微前端子应用的接入的成本，同时优化了 qiankun update 子应用的逻辑

## Install

```bash
npm install -S @es/dilu-react-micro
```

## Usage

qiankun 的子应用都需要重复的实现 bootstrap, mount, unmount, update 的逻辑，使用 `@ks-dilu/react-micro` 大大简化了子应用的接入逻辑

```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { registerDLMicro, isDLRunEnvironment, DLMicroContext } from '@es/dilu-react-micro';

registerDLMicro({
  App: () => {
    return (
      <DLMicroContext.Consumer>
        {(value: any) => {
          console.log('gml', value);
          return <App user={value.user} sso={value.sso}></App>;
        }}
      </DLMicroContext.Consumer>
    );
  },
  rootNodeId: 'root',
});

!isDLRunEnvironment() &&
  ReactDOM.render(
    <React.StrictMode>
      <App user={{}} sso={{}} />
    </React.StrictMode>,
    document.getElementById('root'),
  );

export * from '@ks-dilu/react-micro';
```

## API

### registerDLMicro

- 参数：（options, isRenderByNonDLEnvironment）=> {mount, update, unmount, bootstrap}
- 描述：封装了 qiankun 子应用的逻辑，该方法收敛注册子应用的逻辑
- isRenderByNonDLEnvironment 是否在非的卢环境下自动挂载应用，默认 false
- options 参数说明

| 参数 | 类型 | 描述 | 必填 | 默认值 |
| --- | --- | --- | --- | --- |
| App | ReactElement、FunctionComponent 、React.FC<any> | 子应用的入口 | 必填 |  |
| rootNodeId | string | 子应用的根节点 Id | 必填 |  |
| vueAppCb | function | 实例化 vue 时的回调，用于挂载 vue 的插件等，vue2 和 vue3 有细微差别，可以查看相关 demo 的使用 | 选填 |  |

### DLMicroContext

用于获取从主应用透传的 props, 具体有什么内容，取决于主应用中的 extra;

### useDLMicroValue

获取主应用透传子应用 Props 的 hooks，

### isDLRunEnvironment

是否是在微前端的环境
npm package: @ks-dilu/vue-micro
Description: 的卢微前端Vue主应用SDK
Author: ybbjegj
Latest version: 0.0.2

# `@ks-dilu/vue-micro`

> 微前端 vue 子应用 SDK，简化微前端子应用的接入的成本，同时优化了 qiankun update 子应用的逻辑，其中针对 update 做了重点优化，实现可以通过 props 更新组件，而不是通过卸载再挂载的方式实现组件的更新；

## Install

如果业务是 Vue3

#### Vue3

```shell
$ npm install -S @ks-dilu/vue-micro
```

如果业务是 Vue2.7 版本的，需要安装 vue-demi; 2.7 以下的还需要安装 @vue/composition-api；

#### Vue2

```shell
$ npm install -S vue-demi @vue/composition-api @ks-dilu/vue-micro

```

## Usage

qiankun 的子应用都需要重复的实现 bootstrap, mount, unmount, update 的逻辑，使用 `@ks-dilu/react-micro` 大大简化了子应用的接入逻辑

#### Vue3

```js
import { registerDLMicro } from '@ks-dilu/vue-micro';
import { createRouter, createWebHistory } from 'vue-router';
import ViewUIPlus from 'view-ui-plus';
import 'view-ui-plus/dist/styles/viewuiplus.css';
import App, { NotFound } from './App';
import Demo from '@/components/Demo';
import { createApp, defineComponent } from 'vue';

registerDLMicro(
  {
    rootNodeId: 'app',
    vueAppCb: (app: any, props: any) => {
      const router = createRouter({
        history: createWebHistory(props?.basename || '/'),
        routes: [
          {
            path: '/1',
            component: Demo,
          },
          {
            path: '/:p(.*)*',
            component: NotFound,
          },
        ],
      });
      app.use(router);

      app.use(ViewUIPlus);
    },
    App: App,
  },
  true,
);

export * from '@ks-dilu/vue-micro';
```

#### Vue2

```tsx
import Vue from 'vue';
//@ts-ignore
import { registerDLMicro } from '@ks-dilu/vue-micro/v2';
import VueRouter from 'vue-router';
import App from './App.vue';
import Demo from './Demo.vue';
import Demo2 from './Demo2.vue';
import './index.less';
import { assign, isEmpty } from 'lodash';

Vue.use(VueRouter);

registerDLMicro(
  {
    rootNodeId: 'root_app',
    App: App,
    vueAppCb(props: { basename: any }) {
      const router = new VueRouter({
        mode: 'history',
        base: props?.basename || '/',
        routes: [
          {
            path: '/1',
            component: Demo,
          },
          {
            path: '/2',
            component: Demo2,
          },
        ],
      });
      return {
        router,
      };
    },
  },
  true,
);
//@ts-ignore
export * from '@ks-dilu/vue-micro/v2';
```

## API

### registerDLMicro

- 参数：（options, isRenderByNonDLEnvironment）=> {mount, update, unmount, bootstrap}
- 描述：封装了 qiankun 子应用的逻辑，该方法收敛注册子应用的逻辑
- isRenderByNonDLEnvironment 是否在非的卢环境下自动挂载应用，默认 false
- options 参数说明

| 参数 | 类型 | 描述 | 必填 | 默认值 |
| --- | --- | --- | --- | --- |
| App | ReactElement、FunctionComponent 、React.FC<any> | 子应用的入口 | 必填 |  |
| rootNodeId | string | 子应用的根节点 Id | 必填 |  |
| vueAppCb | function | 实例化 vue 时的回调，用于挂载 vue 的插件等，vue2 和 vue3 有细微差别，可以查看相关 demo 的使用 | 选填 |  |

### DLMicroContext

用于获取从主应用透传的 props, 具体有什么内容，取决于主应用中的 extra; 可以在组件中通过 `inject`获取到该值

### isDLRunEnvironment

是否是在微前端的环境
npm package: @ks-dilu/vue2-micro
Description: 的卢微前端Vue子应用SDK
Author: ybbjegj
Latest version: 0.1.4

# `@ks-dilu/vue-micro`

> 微前端 vue 子应用 SDK，简化微前端子应用的接入的成本，同时优化了 qiankun update 子应用的逻辑，其中针对 update 做了重点优化，实现可以通过 props 更新组件，而不是通过卸载再挂载的方式实现组件的更新；

## Install

如果业务是 Vue3

#### Vue3

```shell
$ npm install -S @ks-dilu/vue3-micro
```

#### Vue2

```shell
$ npm install -S  @ks-dilu/vue2-micro

```

## Usage

qiankun 的子应用都需要重复的实现 bootstrap, mount, unmount, update 的逻辑，使用 `@ks-dilu/react-micro` 大大简化了子应用的接入逻辑

#### Vue3

```js
import { registerDLMicro } from '@ks-dilu/vue-micro';
import { createRouter, createWebHistory } from 'vue-router';
import ViewUIPlus from 'view-ui-plus';
import 'view-ui-plus/dist/styles/viewuiplus.css';
import App, { NotFound } from './App';
import Demo from '@/components/Demo';
import { createApp, defineComponent } from 'vue';

registerDLMicro(
  {
    rootNodeId: 'app',
    vueAppCb: (app: any, props: any) => {
      const router = createRouter({
        history: createWebHistory(props?.basename || '/'),
        routes: [
          {
            path: '/1',
            component: Demo,
          },
          {
            path: '/:p(.*)*',
            component: NotFound,
          },
        ],
      });
      app.use(router);

      app.use(ViewUIPlus);
    },
    App: App,
  },
  true,
);

export * from '@ks-dilu/vue-micro';
```

#### Vue2

```tsx
import Vue from 'vue';
//@ts-ignore
import { registerDLMicro } from '@ks-dilu/vue-micro/v2';
import VueRouter from 'vue-router';
import App from './App.vue';
import Demo from './Demo.vue';
import Demo2 from './Demo2.vue';
import './index.less';
import { assign, isEmpty } from 'lodash';

Vue.use(VueRouter);

registerDLMicro(
  {
    rootNodeId: 'root_app',
    App: App,
    vueAppCb(props: { basename: any }) {
      const router = new VueRouter({
        mode: 'history',
        base: props?.basename || '/',
        routes: [
          {
            path: '/1',
            component: Demo,
          },
          {
            path: '/2',
            component: Demo2,
          },
        ],
      });
      return {
        router,
      };
    },
  },
  true,
);
//@ts-ignore
export * from '@ks-dilu/vue-micro/v2';
```

## API

### registerDLMicro

- 参数：（options, isRenderByNonDLEnvironment）=> {mount, update, unmount, bootstrap}
- 描述：封装了 qiankun 子应用的逻辑，该方法收敛注册子应用的逻辑
- isRenderByNonDLEnvironment 是否在非的卢环境下自动挂载应用，默认 false
- options 参数说明

| 参数 | 类型 | 描述 | 必填 | 默认值 |
| --- | --- | --- | --- | --- |
| App | ReactElement、FunctionComponent 、React.FC<any> | 子应用的入口 | 必填 |  |
| rootNodeId | string | 子应用的根节点 Id | 必填 |  |
| vueAppCb | function | 实例化 vue 时的回调，用于挂载 vue 的插件等，vue2 和 vue3 有细微差别，可以查看相关 demo 的使用 | 选填 |  |

### DLMicroContext

用于获取从主应用透传的 props, 具体有什么内容，取决于主应用中的 extra; 可以在组件中通过 `inject`获取到该值

### isDLRunEnvironment

是否是在微前端的环境
npm package: @ks-dilu/vue3-micro
Description: 的卢微前端Vue主应用SDK
Author: ybbjegj
Latest version: 0.1.4

# `@ks-dilu/vue-micro`

> 微前端 vue 子应用 SDK，简化微前端子应用的接入的成本，同时优化了 qiankun update 子应用的逻辑，其中针对 update 做了重点优化，实现可以通过 props 更新组件，而不是通过卸载再挂载的方式实现组件的更新；

## Install

如果业务是 Vue3

#### Vue3

```shell
$ npm install -S @ks-dilu/vue3-micro
```

#### Vue2

```shell
$ npm install -S  @ks-dilu/vue2-micro

```

## Usage

qiankun 的子应用都需要重复的实现 bootstrap, mount, unmount, update 的逻辑，使用 `@ks-dilu/react-micro` 大大简化了子应用的接入逻辑

#### Vue3

```js
import { registerDLMicro } from '@ks-dilu/vue-micro';
import { createRouter, createWebHistory } from 'vue-router';
import ViewUIPlus from 'view-ui-plus';
import 'view-ui-plus/dist/styles/viewuiplus.css';
import App, { NotFound } from './App';
import Demo from '@/components/Demo';
import { createApp, defineComponent } from 'vue';

registerDLMicro(
  {
    rootNodeId: 'app',
    vueAppCb: (app: any, props: any) => {
      const router = createRouter({
        history: createWebHistory(props?.basename || '/'),
        routes: [
          {
            path: '/1',
            component: Demo,
          },
          {
            path: '/:p(.*)*',
            component: NotFound,
          },
        ],
      });
      app.use(router);

      app.use(ViewUIPlus);
    },
    App: App,
  },
  true,
);

export * from '@ks-dilu/vue-micro';
```

#### Vue2

```tsx
import Vue from 'vue';
//@ts-ignore
import { registerDLMicro } from '@ks-dilu/vue-micro/v2';
import VueRouter from 'vue-router';
import App from './App.vue';
import Demo from './Demo.vue';
import Demo2 from './Demo2.vue';
import './index.less';
import { assign, isEmpty } from 'lodash';

Vue.use(VueRouter);

registerDLMicro(
  {
    rootNodeId: 'root_app',
    App: App,
    vueAppCb(props: { basename: any }) {
      const router = new VueRouter({
        mode: 'history',
        base: props?.basename || '/',
        routes: [
          {
            path: '/1',
            component: Demo,
          },
          {
            path: '/2',
            component: Demo2,
          },
        ],
      });
      return {
        router,
      };
    },
  },
  true,
);
//@ts-ignore
export * from '@ks-dilu/vue-micro/v2';
```

## API

### registerDLMicro

- 参数：（options, isRenderByNonDLEnvironment）=> {mount, update, unmount, bootstrap}
- 描述：封装了 qiankun 子应用的逻辑，该方法收敛注册子应用的逻辑
- isRenderByNonDLEnvironment 是否在非的卢环境下自动挂载应用，默认 false
- options 参数说明

| 参数 | 类型 | 描述 | 必填 | 默认值 |
| --- | --- | --- | --- | --- |
| App | ReactElement、FunctionComponent 、React.FC<any> | 子应用的入口 | 必填 |  |
| rootNodeId | string | 子应用的根节点 Id | 必填 |  |
| vueAppCb | function | 实例化 vue 时的回调，用于挂载 vue 的插件等，vue2 和 vue3 有细微差别，可以查看相关 demo 的使用 | 选填 |  |

### DLMicroContext

用于获取从主应用透传的 props, 具体有什么内容，取决于主应用中的 extra; 可以在组件中通过 `inject`获取到该值

### isDLRunEnvironment

是否是在微前端的环境
npm package: @ks-opdev/cli
Description: ksodev: A CLI based on the WPS Open Platform
Author: xiaoyefang
Latest version: 0.0.13

@ks-opdev/cli
=================

ksodev: A CLI based on the WPS Open Platform


<!-- toc -->
* [使用方法](#使用方法)
* [命令](#命令)
<!-- tocstop -->
# 使用方法
<!-- usage -->
```sh-session
$ npm install -g @ks-opdev/cli
$ ksodev COMMAND
running command...
$ ksodev (--version)
@ks-opdev/cli/0.0.1 darwin-arm64 node-v20.19.4
$ ksodev --help [COMMAND]
USAGE
  $ ksodev COMMAND
...
```
<!-- usagestop -->
# 命令
<!-- commands -->
- [@ks-opdev/cli](#ks-opdevcli)
- [使用方法](#使用方法)
- [命令](#命令)
  - [`ksodev login [CLUSTERURL]`](#ksodev-login-clusterurl)
  - [`ksodev logout [CLUSTERURL]`](#ksodev-logout-clusterurl)
  - [`ksodev switch`](#ksodev-switch)
  - [`ksodev whoami`](#ksodev-whoami)

## `ksodev login [CLUSTERURL]`

Login to open platform

```
USAGE
  $ ksodev login [CLUSTERURL] [-f]

ARGUMENTS
  CLUSTERURL  Cluster URL to login to

FLAGS
  -f, --force  Force re-login even if already logged in

DESCRIPTION
  Login to open platform
```

## `ksodev logout [CLUSTERURL]`

Logout from open platform

```
USAGE
  $ ksodev logout [CLUSTERURL] [-a]

ARGUMENTS
  CLUSTERURL  Cluster URL to logout from (optional, defaults to current cluster)

FLAGS
  -a, --all  Logout from all clusters and clear all configuration

DESCRIPTION
  Logout from open platform
```

## `ksodev switch`

Switch between available cluster environments

```
USAGE
  $ ksodev switch

DESCRIPTION
  Switch between available cluster environments
```

## `ksodev whoami`

Show current user and cluster information

```
USAGE
  $ ksodev whoami

DESCRIPTION
  Show current user and cluster information
```
<!-- commandsstop -->