open-index/open-npm huggingface dataset:
npm package: @kjanat/dprint-zig
Description: Wasm module for dprint-plugin-zig.
Author: Kaj Kowalski
Latest version: 0.2.1

# dprint-plugin-zig

[![Release][badge:ci:release]][actions:release] [![JSR][badge:jsr]][jsr]
[![npm][badge:npm]][npm]

A [dprint][dprint] formatting plugin for Zig, written in Zig.

Wraps Zig's built-in `std.zig.Ast` formatter in a tiny (~140KB) WebAssembly
module, giving you the official Zig formatting style through dprint's unified
interface.

## Installation

```bash
dprint config add kjanat/zig
```

Or manually add to your `dprint.json`:

```json
{
  "zig": {},
  "plugins": [
    "https://plugins.dprint.dev/kjanat/zig-0.2.1.wasm"
  ]
}
```

## Usage

```bash
dprint fmt "**/*.zig"
```

## Why?

- **Consistent formatting** - Same output as `zig fmt`
- **Unified tooling** - One formatter for Zig, TypeScript, JSON, Markdown, etc.
- **Fast** - Native Wasm execution, no external process spawning
- **Tiny** - ~140KB plugin size

## File Types

- `.zig` - Zig source files
- `.zon` - Zig Object Notation (build.zig.zon, etc.)

## Configuration

Currently uses Zig's default formatting rules with no configuration options.\
The formatter produces identical output to `zig fmt`.

## Contributing

See [CONTRIBUTING][contributing] for build instructions and development info.

## License

[MIT][license]

<!-- link definitions -->

[actions:release]: https://github.com/kjanat/dprint-plugin-zig/actions/workflows/release.yml
[badge:ci:release]: https://img.shields.io/github/actions/workflow/status/kjanat/dprint-plugin-zig/release.yml?logo=githubactions&logoColor=2088FF&logoSize=auto&label=Release&labelColor=181717
[badge:jsr]: https://img.shields.io/jsr/v/@kjanat/dprint-zig?logo=jsr&logoColor=black&logoSize=auto&label=&labelColor=F7DF1E&color=black
[badge:npm]: https://img.shields.io/npm/v/@kjanat/dprint-zig?logo=npm&logoColor=white&logoSize=auto&label=&labelColor=CB3837&color=black
[contributing]: https://github.com/kjanat/dprint-plugin-zig/blob/master/CONTRIBUTING.md
[dprint]: https://dprint.dev/
[jsr]: https://jsr.io/@kjanat/dprint-zig
[license]: https://github.com/kjanat/dprint-plugin-zig/blob/master/LICENSE
[npm]: https://www.npmjs.com/package/@kjanat/dprint-zig
npm package: @kjartanm/cf-pages-authjs
Description: This plugin lets you use Auth.js (https://authjs.dev/) together with Cloudflare Pages for authentication. You can already use Auth.js with Next.js, Solid or SvelteKit -- which all is supported by Cloudflare Pages directly, but if you for example want to a
Author: https://github.com/kjartanm
Latest version: 0.0.5

# Authjs plugin for Cloudflare Pages

This plugin lets you use Auth.js (https://authjs.dev/) together with Cloudflare Pages for authentication. You can already use Auth.js with Next.js, Solid or SvelteKit -- which all is supported by Cloudflare Pages directly, but if you for example want to add authentication to a single page application or some static site built by SSG (like Eleventy), then this plugin will help you do that.

How to install:

`npm i @kjartanm/cf-pages-authjs`

## How to use:
You initialize the plugin by providing a config object or config function, according to Auth.js documentation, then add it as middleware in your pages application.

```
# functions/_middleware.js
import CFPagesAuth from "@kjartanm/cf-pages-authjs";
import GitHub from "@auth/core/providers/github";

const { authPlugin } = CFPagesAuth({
  providers: [GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET })],
});

export const onRequest = [authPlugin];
```

You can also use a function as config argument:

```
const { authPlugin } = CFPagesAuth(
    ({ env }) => {
        return { providers: [GitHub({ clientId: env.GITHUB_ID, clientSecret: env.GITHUB_SECRET })],}
});
```
The plugin also exports additional methods and middleware that can be used. `getSession`can be used to get session info, `setSession` adds session object to context.data, and this again can be used for authorizing different routes:

```
# functions/_middleware.js

const {authPlugin, getSession, setSession } = CFPagesAuth(authConfig);

const doSomethingWithSession = async (context) => {
    const session = await getSession(context);

    ...

    return context.next();
}

export const onRequest = [authPlugin, doSomethingWithSession, setSession];

#####

# functions/protected/_middleware.js

const protectRoute = async ({ next, data }) => {
    if (!data.session) {
        return new Response("No access", { status: 401 })
    }
    return next();
}

export const onRequest = [protectRoute];
```

It also exports middleware to add login-form to your app based on HTMLWriter (it reqires that `data.session` is set). 

```
const { authPlugin, setSession, createLoginMiddleware } = CFPagesAuth(getAuthConfig);


const addLoginComponent = createLoginMiddleware(
    ({env}) => {
        return `<div class="cf-pages-authjs-login-link"><a href="/auth/signin?callbackUrl=${env.CALLBACK_URL}">Log in</a></div>`
    },
    ({data}) => {
        return `
        <div>${ data.session.user.name }</div>
        <div class="cf-pages-authjs-login-link"><a href="/auth/signout">Log out</a></div>`
    }
);

export const onRequest = [authPlugin, setSession, addLoginComponent];

```
npm package: @kjartanm/feide-authjs
Description: This adds Feide (https://www.feide.no/) to the list of providers for Authjs (https://authjs.dev/)
Author: https://github.com/kjartanm
Latest version: 0.0.4

# Feide as provider for Authjs

This adds Feide (https://www.feide.no/) to the list of providers for Authjs (https://authjs.dev/)

## How to install:

`npm i @kjartanm/feide-authjs`

## Setup

### Callback URL

```
https://example.com/api/auth/callback/feide
```

### Configuration

```js
import { Auth } from "@auth/core";
import Feide from "@kjartanm/feide-authjs";

const request = new Request(origin);
const response = await Auth(request, {
    providers: [
        Feide({
            clientId: env.FEIDE_ID,
            clientSecret: env.FEIDE_SECRET,
        }),
    ],
    session: {
        maxAge: 27000,
    },
});
```

See documentation for how to use the Feide-provider with frameworks like Next.js, SvelteKit and SolidStart:

https://authjs.dev/


### Group information

If you for example want to add group information from the core API to the session, you need to make sure the access token is available:

```js
import { Auth } from "@auth/core";
import Feide from "@kjartanm/feide-authjs";

const request = new Request(origin);
const response = await Auth(request, {
    providers: [
        Feide({
            clientId: env.FEIDE_ID,
            clientSecret: env.FEIDE_SECRET,
        }),
    ],
    session: {
        maxAge: 27000,
    },
    callbacks: {
        async jwt({ token, account }) {
            if (account) {
                token.access_token = account.access_token
            }
            return token
        },
        async session({ session, token }) {
            if (token.access_token) {
                const groups = await fetch("https://groups-api.dataporten.no/groups/me/groups", {
                    headers: { Authorization: `Bearer ${token.access_token}` },
                }).then(async (res) => await res.json());
                session.access_token = token.access_token
                session.groups = groups
            }
            return session
        }
    },
});
```
npm package: @kjellmorten/prismock
Description: Fork of prismock, a mock for PrismaClient, dedicated to unit testing.
Author: Teddy Morin
Latest version: 1.36.2

# prismock (forked version)

> [!NOTE]
> This is a fork of the excellent [prismock](https://github.com/morintd/prismock)
> package. The fork adds support for `nanoid()` as default id type, and a crude
> and limited implementation of extending with the `$extends` method. It's not
> intended for public use, and we encourage you to use the original package
> instead.
npm package: @kjerandp/linear-algebra
Description: Math library for doing basic linear algebra operations
Author: Kjerand Pedersen
Latest version: 1.0.5

# Linear algebra

Math library for doing basic linear algebra operations, inspired by GLSL.

## Installation
```
npm install --save @kjerandp/linear-algebra
```
## Usage

The package exports an object containing all types and functions. 

```js
// es6
import { vec3, mat3, ... } from '@kjerandp/linear-algebra';

// commonjs
const lib = require('@kjerandp/linear-algebra');

const vec3 = lib.vec3;
const mat3 = lib.mat3;
(...)
```

See this [live sample](https://observablehq.com/@kjerandp/affine-transformations) of usage or refer to the [docs](https://kjerandp.github.io/linear-algebra/) and tests for more details.

## License
MIT
npm package: @kjetil-hoel/design-system-svelte
Description: WIP Component library for Statsforvalternes Fellesorganisasjon
Latest version: 0.0.121

WIP Component library for Statsforvalternes Fellesorganisasjon

### Adding or updating dependencies

0. In the terminal, navigate to the /packages/svelte folder
1. Run `yarn install`

### Creating new component

0. Examine the React code of the equivalent React component
   0a. If there is no React code, use your own intuition on how to implement the component and skip to step 4.
1. You will have to understand the React implementation in order to create an equivalent implementation in Svelte. You might not be able to use the exact same markup or Javascript logic.
2. In the conversion process, ensure to allow for the same props except those props which are React-specific or otherwise not possible/sensible to implement in a Svelte component
3. The ComponentName.module.css from the React-equivalent can be directly copy-pasted into the Svelte component's style block
4. Add your component's information in the package.json file in the /packages/svelte folder, under the "exports" key. Looking at existing exported components should be enough to understand the pattern to follow.
5. Ensure your component is exported from the index.js inside /lib/components

### Testing your component

0. Add your component to the homepage or a route of your choosing
1. Navigate to the /packages/svelte folder
2. Run `npm run dev`
3. In your browser, navigate to the route you placed the component
4. You should now be able to iterate over and test your component as you would in a regular Svelte application

### Publishing to NPM

0. Navigate to the /packages/svelte folder.
1. Bump the version number of the package in package.json: `0.0.x + 1`.
2. Commit and push your changes.
3. Use this terminal command to publish: `npm publish --access public`. (This step requires you to be logged in with NPM credentials if you haven't already done so)

### Build & Publish Design Tokens

0. Navigate to the root folder
1. Run `yarn build`
   1a. You may get errors related to yarn.lock file. You can try to remove the yarn.lock file, and/or run `yarn install`
2. In the /packages/tokens folder, bump the version number of the package in package.json: `0.0.x + 1`.
3. Navigate to the /packages/tokens folder
4. Use this terminal command to publish: `npm publish --access public`. (This step requires you to be logged in with NPM credentials if you haven't already done so)
npm package: @kjetil-hoel/design-system-tokens
Description: Transformed design tokens from the Digdir Common Designsystem to work in code.
Latest version: 0.0.9

# @digdir/design-system-tokens

Transformed design tokens from the Digdir Common Designsystem to work in code.

## Installation

```sh
npm|yarn|pnpm install @digdir/design-system-tokens
```

If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:

```sh
npm install typescript --save-dev
```

## Usage

This package provides tokens for each of our supported brands.

Currently supported brands:

- `altinn`
- `digdir`
- `tilsynet`
- `brreg`

When importing the package make sure to specify which brand tokens you want to import. By default the `digdir` is imported if you don't specify a brand.

```tsx
import '@digdir/design-system-tokens/brand/<brand>/tokens';

// This imports Digdir brand css tokens
import '@digdir/design-system-tokens';

//  This imports Altinn css tokens
import '@digdir/design-system-tokens/brand/altinn/tokens.css';
```

## File formats

All tokens files have the same name, `tokens`, separated by file extension for desired format.

Currently supported token formats are `css` and `js`.

### CSS

When importing css tokens a set of [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are added to your `:root {}`.
You only need to import this once in your application, preferably somewhere in your "root" html.

All variables are prefixed with `fds` as to not polute your namespace.

```js
import '@digdir/design-system-tokens/brand/altinn/tokens.css';
```

```css
div {
  padding: var(--fds-spacing-1);
}
```

### Javascript

#### ⚠️ Warning

Typography and spacing tokens are static for javascript tokens. This is due to limitations in CSS with nested `calc()` only being supported using css-variables. Since js tokens can be scoped to only import one, this might lead to unintended bugs are referenced css-variables might not be present/imported.

#### Usage

When importing tokens as javascript/typescript you can omit the file extension as your module resolves should be able to pick the correct one. We also provide a `d.ts` file for typescript types.

It's important to know that the values from javascript tokens are css values, as they are intended to be used with either `style` or other CSS-in-JS libraries.

```jsx
import tokens from '@digdir/design-system-tokens/brand/altinn/tokens';

const Foo = () => <div style={{ padding: tokens.spacing_1 }}>Hi</div>;
```
npm package: @kjgl77/datav-vue3
Description: Datav for vue3+vite
Author: kjgl77
Latest version: 1.7.4

# DataV Vue3+TS+Vite版

[![Author](https://img.shields.io/badge/Author-kjgl77-red.svg "Author")](https://github.com/vaemusic "Author")       [![LICENSE](https://img.shields.io/github/license/vaemusic/datav-vue3 "LICENSE")](https://github.com/vaemusic/datav-vue3/blob/master/LICENSE "LICENSE")

[![NPM](https://nodei.co/npm/@kjgl77/datav-vue3.png?mini=true)](https://www.npmjs.com/package/@kjgl77/datav-vue3)

由于之前大佬写的 [DataV](http://datav.jiaminghi.com/) 不支持Vue3 Vite2.x，现部分代码用Vue3+TS重构。

[文档地址](https://datav-vue3.netlify.app)：https://datav-vue3.netlify.app

[Gitee地址](https://gitee.com/kjgl77/datav-vue3)：https://gitee.com/kjgl77/datav-vue3

[Github地址](https://github.com/vaemusic/datav-vue3)：https://github.com/vaemusic/datav-vue3

[Demo预览地址](https://datav-vue3-demo.netlify.app/)：https://datav-vue3-demo.netlify.app/

[Demo Gitee地址](https://gitee.com/kjgl77/electronic-file)：https://gitee.com/kjgl77/electronic-file

[Demo Github地址](https://github.com/vaemusic/electronic-file)：https://github.com/vaemusic/electronic-file

## 使用方法
- 安装，此处使用pnpm工具，也可以yarn,npm等
```shell
pnpm install @kjgl77/datav-vue3
```
### 全局引入

```ts
// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'

const app = createApp(App)

app.use(DataVVue3)
app.mount('#app')
```
引入后在.vue文件中可以直接使用
```html
<dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
```

### 局部引入
```html
<!-- 在.vue文件的script中import部分组件 -->
<script lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
<template>
  <!-- 引入之后就可以在vue的template中直接使用 -->
  <decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
  <decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>
```

新的组件库开发根据大佬的 [MY-Kit](https://github.com/jrainlau/MY-Kit) 开发。支持脚本生成基础文件，文档，可使用Markdown一边开发源码一边写文档。详情可见MY-Kit文档。
npm package: @kjgl77/datav-vue3-dev
Description: Datav for vue3+vite
Author: kjgl77
Latest version: 1.2.1

# DataV Vue3+TS+Vite版

[![Author](https://img.shields.io/badge/Author-kjgl77-red.svg "Author")](https://github.com/vaemusic "Author")       [![LICENSE](https://img.shields.io/github/license/vaemusic/datav-vue3 "LICENSE")](https://github.com/vaemusic/datav-vue3/blob/master/LICENSE "LICENSE")

[![NPM](https://nodei.co/npm/@kjgl77/datav-vue3.png?mini=true)](https://www.npmjs.com/package/@kjgl77/datav-vue3)

由于之前大佬写的 [DataV](http://datav.jiaminghi.com/) 不支持Vue3 Vite2.x，现部分代码用Vue3+TS重构。

[文档地址](https://datav-vue3.netlify.app)：https://datav-vue3.netlify.app

[Gitee地址](https://gitee.com/kjgl77/datav-vue3)：https://gitee.com/kjgl77/datav-vue3

[Github地址](https://github.com/vaemusic/datav-vue3)：https://github.com/vaemusic/datav-vue3

[Demo预览地址](https://datav-vue3-demo.netlify.app/)：https://datav-vue3-demo.netlify.app/

[Demo Gitee地址](https://gitee.com/kjgl77/electronic-file)：https://gitee.com/kjgl77/electronic-file

[Demo Github地址](https://github.com/vaemusic/electronic-file)：https://github.com/vaemusic/electronic-file

## 使用方法
- 安装，此处使用pnpm工具，也可以yarn,npm等
```shell
pnpm install @kjgl77/datav-vue3
```
### 全局引入

```ts
// main.ts中全局引入
import DataVVue3 from '@kjgl77/datav-vue3'
Vue.use(DataVVue3)
```
引入后在.vue文件中可以直接使用
```html
<dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
```

### 局部引入
```html
<!-- 在.vue文件的script中import部分组件 -->
<script lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
<template>
  <!-- 引入之后就可以在vue的template中直接使用 -->
  <decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
  <decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>
```

新的组件库开发根据大佬的 [MY-Kit](https://github.com/jrainlau/MY-Kit) 开发。支持脚本生成基础文件，文档，可使用Markdown一边开发源码一边写文档。详情可见MY-Kit文档。
npm package: @kjgxlib/jquery
Description: JavaScript library for DOM operations
Author: JS Foundation and other contributors
Latest version: 0.0.1

# jQuery

> jQuery is a fast, small, and feature-rich JavaScript library.

For information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).
For source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).

If upgrading, please see the [blog post for ](https://blog.jquery.com/2017/03/20/jquery-now-available/). This includes notable differences from the previous version and a more readable changelog.

## Including jQuery

Below are some of the most common ways to include jQuery.

### Browser

#### Script tag

```html
<script src="https://code.jquery.com/jquery.min.js"></script>
```

#### Babel

[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.

```js
import $ from "jquery";
```

#### Browserify/Webpack

There are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...

```js
var $ = require("jquery");
```

#### AMD (Asynchronous Module Definition)

AMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).

```js
define(["jquery"], function($) {

});
```

### Node

To include jQuery in [Node](nodejs.org), first install with npm.

```sh
npm install jquery
```

For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.

```js
require("jsdom").env("", function(err, window) {
	if (err) {
		console.error(err);
		return;
	}

	var $ = require("jquery")(window);
});
```
npm package: @kjgxlib/react-native-viewpager
Description: ViewPager componnent for React Native
Author: Race604
Latest version: 0.0.9

# react-native-viewpager

[![npm version](https://img.shields.io/npm/v/react-native-viewpager.svg?style=flat-square)](https://www.npmjs.com/package/react-native-viewpager)
[![npm downloads](https://img.shields.io/npm/dm/react-native-viewpager.svg?style=flat-square)](https://www.npmjs.com/package/react-native-viewpager)

> @Deprecated This repo is no more maintenance.

This is the `ViewPager` componnent in React Native both for Android and iOS.
This is a JavaScript-only implementation of pager for React Native. Like `ListView`,
this can render hundreds of pages without performance issue. Better than the one in
Android, this `ViewPager` can **auto play** -- turn page automaticly, **loop** -- make infinite scrolling.

## Demo
![](./art/demo.jpg)
![](./art/anim.gif)

Demo project is [here](./Sample).

## Usage

1. Run `npm install react-native-viewpager --save`
2. Code like this:

```
var ViewPager = require('react-native-viewpager');
<ViewPager
    dataSource={this.state.dataSource}
    renderPage={this._renderPage}/>
```

## More configuration

* **`dataSource`**: this is require to provide pages data,
* **`renderPage`**: this is require to render page view,
* **`autoPlay`**: `true` to turn page automatically,
* **`initialPage`**: to set the index of the first page to load,
* **`isLoop`**: `true` to run in infinite scroll mode,
* **`locked`**: `true` to disable touch scroll,
* **`onChangePage`**: page change callback,
* **`renderPageIndicator`**: render custom ViewPager indicator.
* **`initialPage`**: show initially some other page than first page.

## Page Transition Animation Controls

* **`animation`**: function that returns a React Native Animated configuration.

Example:
```
var ViewPager = require('react-native-viewpager');
<ViewPager
    dataSource={this.state.dataSource}
    renderPage={this._renderPage}
    animation = {(animatedValue, toValue, gestureState) => {
    // Use the horizontal velocity of the swipe gesture
    // to affect the length of the transition so the faster you swipe
    // the faster the pages will transition
    var velocity = Math.abs(gestureState.vx);
    var baseDuration = 300;
    var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;

    return Animated.timing(animatedValue,
    {
      toValue: toValue,
      duration: duration,
      easing: Easing.out(Easing.exp)
    });
  }}
/>
```

## Licensed

MIT License
npm package: @kjirou/utils
Description: Node.js miscellaneous utilities for myself
Author: kjirou
Latest version: 0.0.3

# @kjirou/utils

[![npm version](https://badge.fury.io/js/%40kjirou%2Futils.svg)](https://badge.fury.io/js/%40kjirou%2Futils)

Node.js miscellaneous utilities for myself


## Installation

```bash
npm install --save @kjirou/utils
```

Ref) https://docs.npmjs.com/getting-started/scoped-packages
npm package: @kjn/vite-plugin-tsc-typecheck
Description: Vite plugin that tests for typescript type errors on `vite build`
Author: Kishan Nirghin
Latest version: 1.0.3

# @kjn/vite-plugin-tsc-typecheck

[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

[![npm version](https://badge.fury.io/js/@kjn%2Fvite-plugin-tsc-typecheck.svg)](https://www.npmjs.com/package/@kjn/vite-plugin-tsc-typecheck)

The repo holds the vite plugin for typechecking with typescript.

## How to use

```sh
npm i @kjn/vite-plugin-tsc-typecheck
```

```ts
import { tscTypecheck } from "@kjn/vite-plugin-tsc-typecheck";

export default defineConfig({
  plugins: [tscTypecheck()],

  /**
   * ...
   * ...
   * The rest of your config
   */
});
```

Output you'll see in your terminal

```sh
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
🕵️‍♂️ [tsc-typecheck] Testing for type errors
✅ [tsc-typecheck] All good
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
```

Now when autobuilding using `vite build --watch` an additional typechecking step will be executed. You'll see if there are typescript type errors.

Now when building using `vite build` the additional typechecking step will be executed. You'll see if there are typescript type errors.

# Release

This repo uses `semantic-release` to auto-release new versions. The semver version number is based on the conventional-commit messages.

- patches: `fix: $MSG` will increment the patch version
- minor: `feat: $MSG` will increment the minor version
- major: `feat: $MSG \n\n BREAKING CHANGE` will increment the major version

Pushing the changes to the main-branch will kick of deployment. The semantic-release bot will add a new commit directly to the repo with the new semver version number in `package.json`. Therefore after every push, you'd need to pull the repo again.
npm package: @kjojs/eventbus
Description: universal and light(1kb) event bus module
Author: devjaewon
Latest version: 1.1.4

# `@kjojs/eventbus`

- universal and light(1kb) event bus module
- no dependencies
- typescript type inference supports.
- simple and light implementation
    - [source](./src/EventBus.ts)

## Installation

```sh
npm install @kjojs/eventbus --save
```

## Getting Started

```ts
import EventBus from '@kjojs/eventbus';

const eventBus = new EventBus();

eventBus.on('a', console.log);
eventBus.on({
  b: console.log,
  c: console.log,
});

eventBus.emit('a', 2);
eventBus.emit('b', 'p');
eventBus.emit('c', { n: 1 });
```

## Type Inference Support

```ts
interface EventDefinition {
  a: 1 | 2 | 3;
  b: 'p';
}

const eventBus = new EventBus<EventDefinition>().on({
  a: console.log,
  b: console.log,
});

/**
 * or
 *
 * new EventBus<{
 *   a: 1 | 2 | 3;
 *   b: 'p';
 * }>();
 */
```

<img src="./assets/readme_typeinference_1.png" width="600">

<img src="./assets/readme_typeinference_2.png" width="600">

## Specifications

- [spec code](./src/EventBus.spec.ts)
- `.on(eventName, eventHandler, life?)`
- `.on(eventSpecification)`
- `.once(eventName, eventHandler)`
- `.once(eventSpecification)`
- `.off()`
- `.off(eventName)`
- `.off(eventName, eventHandler)`
- `.has()`
- `.has(eventName)`
- `.has(eventName, eventHandler)`
- `.emit(eventName, eventPayload?)`
npm package: @kjojs/idom
Description: provides a concise and intuitive dom manipulation API
Author: devjaewon
Latest version: 1.5.3

# `@kjojs/idom`

- provides a concise and intuitive dom manipulation API
- like jquery, but only partial features
- not support cross browsing and use native api, so small and fast
- small size (6kb)

## Installation

```sh
npm install @kjojs/idom --save
```

## Getting Started

```js
import idom from '@kjojs/idom';

const popupDom = idom(document.getElementById('id')); // or idom('#id')

popupDom.css({
  'position': 'fixed',
  'top': 0,
  'right': 0,
  'bottom': 0,
  'left': 0,
  'background-color': 'rgba(0, 0, 0, 0.8)',
}).transition(
  'transform',
  'translateX(100px)',
  {
    duration: 1000,
    timingFunction: 'ease-in-out',
  },
).on({
  'click': () => {
    console.log('clicked!');
  },
});
```

## Features

- Events
    - `.on(eventName, eventHandler, life?)`
    - `.on(eventSpecification)`
    - `.once(eventName, eventHandler)`
    - `.once(eventSpecification)`
    - `.off()`
    - `.off(eventName)`
    - `.off(eventName, eventHandler)`
- Styles and Attributes
    - `.css(cssProperty)`
    - `.css(cssProperty, cssValue)`
    - `.css(cssMap)`
    - `.attr(attrName)`
    - `.attr(attrName, attrValue)`
    - `.attr(attrMap)`
    - `.data(dataKey)`
    - `.data(dataKey, dataValue)`
    - `.data(dataMap)`
- DOM Tree
    - `.get(index)`
    - `.find(selector)`
    - `.first()`
    - `.last()`
    - `.rect()`
    - `.text()`
    - `.text(innerText)`
    - `.html()`
    - `.html(innerHTML)`
- Animation
    - `.transition(cssProperty, cssValue, transitionOption)`
npm package: @kjojs/input
Description: recognizes mouse, pointer, and touch-based events and delivers refined data
Author: devphilip21
Latest version: 0.1.0

# `@kjojs/input`

The module recognizes mouse, pointer, and touch-based various input events and delivers refined input data.
It didn't try to have too many features, supports only the minimum necessary functions to enable free handling.
It has no dependencies on other libraries and is a lightweight and fast.
npm package: @kjoonas1/react-native-biometrics
Description: Simple biometrics library
Author: Joonas Kallinen
Latest version: 0.5.0

# @kjoonas1/react-native-biometrics
![Build Status](https://github.com/kjoonas1/react-native-biometrics/actions/workflows/ci.yml/badge.svg)

A simple, lightweight biometrics API for React Native apps **with zero runtime dependencies**. Uses native BiometricPrompt (Android) and LocalAuthentication (iOS) directly.

This library requries that your app is using the **New React Native Architecture** and **TurboModules** enabled.

## Installation

```sh
npm install @kjoonas1/react-native-biometrics
```

## Usage

### iOS Permissions
Add the following key to your Info.plist to allow Face ID authentication on iOS:

```xml
<key>NSFaceIDUsageDescription</key>
<string>This app uses Face ID to authenticate you.</string>
```

### Example (Simple local authentication)

```js
import { authenticate, isBiometricAvailable, BiometricAuthStatus } from '@kjoonas1/react-native-biometrics';

const available = isBiometricAvailable()
if (available) {
    const result = await authenticate('reason for auth')
    if (result.status === BiometricAuthStatus.SUCCESS) {
        // ...
    }
    // ...
}
```

### Example (Authenticate with challenge)
```js
import { 
    authenticate,
    isBiometricAvailable,
    BiometricAuthStatus,
    generateKeyPair,
    getPublicKey,
} from '@kjoonas1/react-native-biometrics'
import { useEffect } from 'react'

// On first startup, generate keys and store the public key on your server
useEffect(() => {
    if (!getPublicKey()) {
        const publicKey = generateKeyPair()
        // Store publicKey on server
    }
}, [])

const handleAuthenticate = async () => {
    if (isBiometricAvailable()) {
        // Request challenge from server
        const challenge = /* get challenge from server */

        // Authenticate user and sign challenge
        const { status, signature } = authenticate('Authenticate to proceed', challenge)
        if (status === BiometricAuthStatus.SUCCESS) {
            // Send signature to server for verification
        }
    }
}

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @kjossendal/fns
Description: React-pdf helper functions
Author: Diego Muracciole
Latest version: 2.2.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/fns

> React-pdf helper functions

## How to install

```sh
yarn add @kjossendal/fns
```
npm package: @kjossendal/font
Description: Register font and emoji source for react-pdf document
Author: Diego Muracciole
Latest version: 2.4.4

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/font
npm package: @kjossendal/image
Description: Parses the images in png or jpeg format for react-pdf document
Author: Diego Muracciole
Latest version: 2.3.4

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/image
npm package: @kjossendal/layout
Description: Resolve overall document component's layout
Author: Diego Muracciole
Latest version: 3.11.2

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/layout
npm package: @kjossendal/pdfkit
Description: A PDF generation library for Node.js
Author: Devon Govett
Latest version: 3.1.7

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/pdfkit

A JavaScript PDF generation library for Node and the browser.

## Acknowledges

This project is a fork of [pdfkit](https://github.com/foliojs/pdfkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Description

PDFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy.
It's written in CoffeeScript, but you can choose to use the API in plain 'ol JavaScript if you like. The API embraces
chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API
is designed to be simple, so generating complex documents is often as simple as a few function calls.

Check out some of the [documentation and examples](http://pdfkit.org/docs/getting_started.html) to see for yourself!
You can also read the guide as a [self-generated PDF](http://pdfkit.org/docs/guide.pdf) with example output displayed inline.
If you'd like to see how it was generated, check out the README in the [docs](https://github.com/devongovett/pdfkit/tree/master/docs)
folder.

You can also try out an interactive in-browser demo of PDFKit [here](http://pdfkit.org/demo/browser.html).

## Installation

Installation uses the [npm](http://npmjs.org/) package manager. Just type the following command after installing npm.

    npm install @kjossendal/pdfkit

## Features

- Vector graphics
  - HTML5 canvas-like API
  - Path operations
  - SVG path parser for easy path creation
  - Transformations
  - Linear and radial gradients
- Text
  - Line wrapping
  - Text alignments
  - Bulleted lists
- Font embedding
  - Supports TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collections (.ttc), and Datafork TrueType (.dfont) fonts
  - Font subsetting
  - See [fontkit](http://github.com/devongovett/fontkit) for more details on advanced glyph layout support.
- Image embedding
  - Supports JPEG and PNG files (including indexed PNGs, and PNGs with transparency)
- Annotations
  - Links
  - Notes
  - Highlights
  - Underlines
  - etc.

## Coming soon!

- Patterns fills
- Outlines
- PDF Security
- Higher level APIs for creating tables and laying out content
- More performance optimizations
- Even more awesomeness, perhaps written by you! Please fork this repository and send me pull requests.

## Documentation

For complete API documentation and more examples, see the [PDFKit website](http://pdfkit.org/).

## License

PDFKit is available under the MIT license.
npm package: @kjossendal/png-js
Description: A PNG decoder in JS
Author: Devon Govett
Latest version: 2.3.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/png-js

A PNG decoder in JS for the canvas element or Node.js.

## Acknowledges

This project is a fork of [png.js](https://github.com/foliojs/png.js) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## About this fork

> Updated to 977b857a11676c1e720e79ed8d9178a005a9abd6

- Build node and browser specific bundles
- Uses rollup for build

## Browser Usage

Simply include png.js and zlib.js on your HTML page, create a canvas element, and call PNG.load to load an image.

    <canvas></canvas>
    <script src="zlib.js"></script>
    <script src="png.js"></script>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        PNG.load('some.png', canvas);
    </script>

The source code for the browser version resides in `png.js` and also supports loading and displaying animated PNGs.

## Node.js Usage

Install the module using npm

    sudo npm install png-js

Require the module and decode a PNG

    var PNG = require('png-js');
    PNG.decode('some.png', function(pixels) {
        // pixels is a 1d array (in rgba order) of decoded pixel data
    });

You can also call `PNG.load` if you want to load the PNG (but not decode the pixels) synchronously. If you already
have the PNG data in a buffer, simply use `new PNG(buffer)`. In both of these cases, you need to call `png.decode`
yourself which passes your callback the decoded pixels as a buffer. If you already have a buffer you want the pixels
copied to, call `copyToImageData` with your buffer and the decoded pixels as returned from `decodePixels`.
npm package: @kjossendal/primitives
Description: Define uninitialized elements
Author: Diego Muracciole
Latest version: 3.1.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/primitives
npm package: @kjossendal/stylesheet
Description: A styles engine for Node and the browser
Author: Diego Muracciole
Latest version: 4.2.4

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/stylesheet

> React-pdf styles engine

## How to install

```sh
yarn add @kjossendal/stylesheet
```

## How it works

```js
const stylesheet = require('@kjossendal/stylesheet');

const container = {
  width: 400,
  height: 600,
  orientation: 'portrait',
};

const style = {
  margin: 20,
  width: '50vw',
  height: '20vh',
  borderRadius: 5,
  fontWeight: 'semibold',
  borderBottom: '2 solid yellow',
  '@media max-width: 500': {
    backgroundColor: 'rgb(255, 0, 0)',
  },
};

const computed = stylesheet(container, style);

// Computed
// {
//   width: 200,
//   height: 120,
//   marginTop: 20,
//   marginLeft: 20,
//   marginRight: 20,
//   marginBottom: 20,
//   marginBottom: 20,
//   borderTopLeftRadius: 5,
//   borderTopRightRadius: 5,
//   borderBottomLeftRadius: 5,
//   borderBottomRightRadius: 5,
//   fontWeight: 600,
//   borderBottomWidth: 2,
//   borderBottomStyle: 'solid',
//   borderBottomColor: 'yellow',
//   backgroundColor: '#FF0000'
// }
```

This library exports a `stylesheet` function that takes two arguments:

- _container_: Container where the styles are being computed into. It specifies the `width` and `height` in points (needed for media queries and unit conversions), and optionally the container `orientation` (needed for certain media queries).
- _style_: Style to be computed. JS object with raw styles that you would like to get in a normalized format.

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @kjossendal/svgkit
Description: A SVG generation library for Node.js and browser
Latest version: 2.3.6

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/svgkit

A SVG generation library for Node.js and browser.

Has a `pdfkit` compatible API

## TODOs:

- Gradients
- Default fonts
- Embeded fonts (in progress)
npm package: @kjossendal/textkit
Description: An advanced text layout framework
Latest version: 4.4.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/textkit

## Acknowledges

This project is a fork of [textkit](https://github.com/foliojs/textkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Layout process

1. split into paragraphs
2. get bidi runs and paragraph direction
3. font substitution - map to resolved font runs
4. script itemization
5. font shaping - text to glyphs
6. line breaking
7. bidi reordering
8. justification
9. get a list of rectangles by intersecting path, line, and exclusion paths
10. perform line breaking to get acceptable break points for each fragment
11. ellipsize line if necessary
12. bidi reordering
13. justification
npm package: @kjossendal/types
Description: React-pdf TypeScript definitions
Author: Diego Muracciole
Latest version: 2.4.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @kjossendal/types

> React-pdf TypeScript definitions

## How to install

```sh
yarn add @kjossendal/types
```

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @kjosul-dev/prettier-config
Description: Kjosul's Prettier config.
Author: kjosul-dev
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @kjosul-dev/prettier-config

Kjosul's [Prettier](https://prettier.io) config.

## Installation

```sh
npm i -D @kjosul-dev/prettier-config
```

## Usage

Based on your requirements, select either the [default configuration](#default-configuration) or the [custom configuration](#custom-configuration).

### Default configuration

If the default configuration meets your requirements, simply modify `package.json`:

```jsonc
{
    // ...
    "prettier": "@kjosul-dev/prettier-config"
}
```

### Custom configuration

If you need to override certain properties, utilize a `.prettierrc.cjs` file instead:

```js
const prettierConfig = require('@kjosul-dev/prettier-config');

module.exports = {
    ...prettierConfig,

    plugins: ['prettier-plugin-tailwindcss'],
    tailwindConfig: './tailwind.config.ts',
};
```

> ⚠️ We utilize a `.cjs` configuration for Prettier due to `"type": "module"` declaration in `package.json`.