open-index/open-npm huggingface dataset:
npm package: @kpmck/ag-grid-core
Description: Framework-agnostic AG Grid DOM helpers for Node-based test tooling
Author: Kerry McKeever
Latest version: 1.0.0

# @kpmck/ag-grid-core

Framework-agnostic AG Grid helpers shared by the adapter packages in this monorepo.

Planned responsibilities:

- DOM traversal and extraction
- AG Grid animation waiting helpers
- Shared types and selectors

Framework-specific command registration and assertions stay in adapter packages such as `cypress-ag-grid` and `playwright-ag-grid`.
npm package: @kpn-style/cra-template-kpn-style-react
Description: The base template for Create React App with KPN Styles components.
Latest version: 1.0.2

# CRA Template for KPN Style

This templates includes:

- `kpn-style`
- `kpn-style-react`
- `reach-router`
- `react-testing-library`

The Layout is already defined, and ready to be used with some examples
which can be used or removed.

The functionality for the menu is also implemented.

There are some examples for the routes.

## Usage

Initialize your project just by running any of the following commands

### yarn

```bash
yarn create react-app my-app --template @kpn-style/cra-template-kpn-style-react
```

### npm

```bash
npm init react-app my-app --template @kpn-style/cra-template-kpn-style-react
```

## Meaning of folders

`components`: Any shared component or component that don't belong to the screens
can stay here.

`screens`: Components living in this folder should map to a url.

The following components will be match to the urls `/` and `info`

```bash
screens/
├── Home.js
└── Information.js
```

Of course folder modules can be used inside the `screen` folder, specially
for nested routes `info/locations` could be

```bash
screens/
├── Home.js
└── info/
    ├── Information.js
    └── Location.js
```
npm package: @kpn-style/react
Description: ui React components for kpn-styles
Latest version: 1.2.2

# KPN STYLE REACT

> Lightweight, easy to use, react components for kpn-style

[![Github Actions](https://github.com/kpn/kpn-style-react/workflows/Test%20React%20App/badge.svg?style=flat-square)](https://github.com/kpn/kpn-style-react/actions)
[![npm package][npm-badge]][npm]
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)
![GitHub](https://img.shields.io/github/license/kpn/kpn-style-react?style=flat-square)

```js
import { Button } from "@kpn-style/react";

<Button>KPN</Button>;
```

--------------

**Documentation for react components**: [https://kpn.github.io/kpn-style-react/](https://kpn.github.io/kpn-style-react/?path=/story/welcome--to-kpn-style-react)

**Documentation for styles**: [https://style.kpn.com/](https://kpn.github.io/kpn-style/)

--------------

## Installation

```bash
yarn add @kpn-style/bundle @kpn-style/react
```

This components require [kpn-style](https://github.com/kpn/kpn-style) in order to
properly display the components.

## Configuration

You'll need to import the css or the scss from `kpn-style`.

In your main scss file import:

```scss
@import "~@kpn-style/bundle/bundle";
@include font-face(
  "kpn-ui-icons",
  normal,
  400,
  "~@kpn-style/bundle/base/ui-icon",
  "kpn-ui-icons"
);
```

Read more in the [official docs](https://style.kpn.com/getting-started/quick-start)

## Usage

Import components as you go

```js
import {
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  CardList,
  CardTitle
} from "@kpn-style/react";

<Button>KPN</Button>;

<Card>
  <CardHeader>
    <CardTitle>Lorem ipsum</CardTitle>
  </CardHeader>
  <CardBody>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor. Nemo enim ipsam voluptatem quia, voluptas sit
    aspernatur aut, odit aut fugit.
  </CardBody>
</Card>
```

## Documentation

Each component is documented in a storybook.
Running the storybook locally:

```bash
yarn start
```

## TODO

- [ ] Add more components

## Contributing

All contributions are welcome

1. Fork this repository
2. Clone your fork
3. Install deps: `yarn install`
4. Commit changes using conventional commits
5. Push changes

Notes:

- This repo uses [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/)
- Conventional commits and prettier are enforced in git hooks.
- Run your tests and eslint before pushing in order to avoid problems.

```bash
yarn run test
yarn run lint
```

### Creating a new component

All components follow the same approach, they must receive `tag` and `className`
as a `prop`.
You can use a script to create the backbone of your component:

```bash
./scripts/new-component Card
```

[npm-badge]: https://img.shields.io/npm/v/@kpn-style/react?style=flat-square
[npm]: https://www.npmjs.org/package/@kpn-style/react
npm package: @kpoint/podcast-player
Description: A modular, accessible web component audio player powered by KPoint
Latest version: 2.0.1

# @kpoint/podcast-player

A modular, accessible web component audio player powered by KPoint. Works with any framework — React, Angular, Vue, Svelte, or plain HTML.

## Installation

Via CDN (recommended for quick setup):

```html
<script type="module" src="https://cdn.kpoint.com/podcast/player.js"></script>
```

Or via npm:

```bash
npm install @kpoint/podcast-player
```

```js
import '@kpoint/podcast-player'
```

## Quick Start

```html
<kp-player host="your-domain.kpoint.com" video-id="gcc-your-video-id">
  <kp-default-layout></kp-default-layout>
</kp-player>
```

That's it. Title, cover image, and duration are auto-fetched from KPoint.

## Attributes

| Attribute | Default | Description |
|---|---|---|
| `host` | — | Your KPoint domain (required) |
| `video-id` | — | KPoint video ID (required) |
| `player-type` | `bitsy` | `bitsy` or `silk` |
| `auto-play` | `false` | Auto-play on load |
| `initial-volume` | `1` | Starting volume (0–1) |
| `initial-playback-rate` | `1` | Starting speed |

## Responsive Behavior

The default layout adapts automatically:

- **Desktop (>= 768px):** Full horizontal strip with all controls
- **Mobile (< 768px):** Minimized cover + title + play button; expands on play

## Theming

Override CSS custom properties on `kp-player` to match your brand:

```css
kp-player {
  --kp-player-bg: #1a1a2e;
  --kp-player-text: #ffffff;
  --kp-player-accent: #e94560;
  --kp-player-progress-bg: #333;
  --kp-player-buffered-bg: #555;
  --kp-player-radius: 8px;
  --kp-player-spacing: 12px;
  --kp-player-font-family: 'Inter', sans-serif;
}
```

## Works Everywhere

Plain HTML, Angular, Vue, React, Svelte — any framework. No dependencies required.

## License

MIT
npm package: @kporten/intl-message-check
Description: CLI tool to check if messages are unused or missing
Author: Kevin Porten
Latest version: 1.1.1

![intl-message-check](./assets/logo.png)

This CLI tool can help you detect missing or unused `react-intl` messages (https://formatjs.io/docs/react-intl/api#formatmessage).

Run `npx @kporten/intl-message-check` in your JavaScript or TypeScript project to check your message definitions.

## Requirements

- Node.js LTS 14.x

## Modes

- Find missing -> Messages used in the code but not defined in the definition.
- Find unused -> Messages not used in the code, but defined in the definition.

## Example to find missing messages

### Your JSON file with intl message definitions

```json
{
  "language": "Language",
  "menu": "Menu",
  "notfound.back": "Back"
}
```

### Your JS(X) or TS(X) code with formatMessage()

```jsx
<div>{intl.formatMessage({ id: 'message' })}</div>
```

or

```jsx
<div>
  {condition
    ? intl.formatMessage({ id: 'message1' })
    : intl.formatMessage({ id: 'message2' })}
</div>
```

or

```jsx
<div>
  {intl.formatMessage(
    condition
      ? { id: 'message1' }
      : { id: 'message2' },
  )}
</div>
```

### Run the tool

```sh
npx @kporten/intl-message-check
```

```sh
[1/3] What kind of messages do you want to find?

Find missing

[2/3] Please enter the path to your JS/TS project directory:

/path/to/your/project
✓ Path is valid

[3/3] Please enter the path to your JSON file with message definitions:

/path/to/your/project/src/i18n/en.json

languages.de
languages.en
```

Now you know that you should add the two missing messages to your definition file.

> Note: Currently only static message IDs will be supported (id property and message string must be in the same line).

---

MIT License

Copyright (c) 2020 Kevin Porten