open-index/open-npm huggingface dataset:
npm package: @lindeneg/browser-cache
Description: Hook for caching data in localStorage.
Author: lindeneg
Latest version: 1.2.6

### @lindeneg/browser-cache

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/browser-cache@1.2.3) ![license](https://badgen.net/npm/license/@lindeneg/browser-cache)

[Sandbox](https://codesandbox.io/s/lindeneg-browser-cache-q502j)

---

React hook for caching data in [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

### Installation

`yarn add @lindeneg/browser-cache`

### Usage

```tsx
import useBrowserCache from '@lindeneg/browser-cache';

type SomeCacheType = {
  ...
}

function SomeComponent() {
  const { cache } = useBrowserCache<SomeCacheType>(config);

  // set item
  cache.set('id', 1);

  // get item
  cache.value('id');

  // listen to event
  cache.on('trim', (removed) => {
    console.log('trim removed these keys from cache: ', removed);
  });

  // and so on
}
```

Or with `React.Context` for a shared cache to be used by multiple components.

```tsx
import {
  BrowserCacheContextProvider,
  useCacheContext,
} from '@lindeneg/browser-cache';

function ProviderComponent({ children }: { children: React.ReactNode }) {
  return (
    <BrowserCacheContextProvider config={config}>
      {children}
    </BrowserCacheContextProvider>
  );
}

function ConsumerComponent() {
  const { cache } = useCacheContext<SomeCacheType>();

  // set item
  cache.set('id', 1);

  // and so on

  return <div></div>;
}
```

The documentation [here](https://github.com/Lindeneg/lindeneg-npm-packages/tree/master/packages/ls-cache) can be used.
npm package: @lindeneg/core-search
Description: Utility for filtering and optionally sorting objects against a query.
Author: lindeneg
Latest version: 1.1.9

### @lindeneg/core-search

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/core-search@1.1.6) ![license](https://badgen.net/npm/license/@lindeneg/core-search)

---

Filter and optionally sort objects by nested values against a query

### Installation

`yarn add @lindeneg/core-search`

### Usage

The documentation [here](https://github.com/Lindeneg/lindeneg-npm-packages/tree/master/packages/search) can be used.
npm package: @lindeneg/funkallero-auth-service
Description: Default implementations of Funkallero auth service interfaces
Author: Christian Lindeneg
Latest version: 0.0.5

# funkallero-auth-service

A default implementation of these [authentication](https://github.com/Lindeneg/funkallero/blob/master/packages/funkallero-core/src/service/authentication-service.ts), [authorization](https://github.com/Lindeneg/funkallero/blob/master/packages/funkallero-core/src/service/authorization-service.ts) and [token](https://github.com/Lindeneg/funkallero/blob/master/packages/funkallero-core/src/service/token-service.ts) service interfaces. The implementation is using `jsonwebtoken` and `bcryptjs`.

Take a look at [documentation](https://lindeneg.github.io/funkallero/) or an example [here](https://github.com/Lindeneg/funkallero/tree/master/example).

##### Install

`yarn add @lindeneg/funkallero-auth-service`
npm package: @lindeneg/funkallero-core
Description: Funkallero core interfaces, enums and types
Author: Christian Lindeneg
Latest version: 0.0.5

# funkallero-core

This package includes core interfaces, classes, enums, decorators and types for [Funkallero](https://github.com/lindeneg/funkallero/tree/master/packages/funkallero).

##### Install

`yarn add @lindeneg/funkallero-core`
npm package: @lindeneg/logger
Description: Very simple utility for logging messages to console.
Author: lindeneg
Latest version: 1.2.5

### @lindeneg/logger

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/logger) ![license](https://badgen.net/npm/license/@lindeneg/logger)

---

Very simple utility for logging messages to console.

### Installation

`yarn add @lindeneg/logger`
npm package: @lindeneg/ls-cache
Description: Utility class interacting with localStorage.
Author: lindeneg
Latest version: 2.0.7

### @lindeneg/ls-cache

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/ls-cache@2.0.4) ![license](https://badgen.net/npm/license/@lindeneg/ls-cache)

---

Utility class for interacting with [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

### Installation

`yarn add @lindeneg/ls-cache`

### Usage

```ts
import LSCache from '@lindeneg/ls-cache';

// default usage
const cache = new LSCache();

// async usage
const cache = new LSCache({
  delayInit: true,
});

await cache.initialize();
```

#### Config

```ts
type Config = {
  /* prefix localStorage keys to avoid collisions
     default: '__cl_ls_cache__' */
  prefix?: string;

  /* delay localStorage initialization
     default: false */
  delayInit?: boolean;

  /* trimming interval in seconds 
     default: 600 */
  trim?: number;

  /* time-to-live in seconds 
     default: 3600 */
  ttl?: number;
};
```

#### Methods

The documentation [here](https://github.com/Lindeneg/lindeneg-npm-packages/tree/master/packages/cache#methods) can be used.
npm package: @lindeneg/memory-cache
Description: Hook for caching data in memory.
Author: lindeneg
Latest version: 1.1.10

### @lindeneg/memory-cache

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/memory-cache@1.1.7) ![license](https://badgen.net/npm/license/@lindeneg/memory-cache)

[Sandbox](https://codesandbox.io/s/lindeneg-memory-cache-5ygvx)

---

React hook for caching data in-memory. If you'd like to make the cache persistent, take a look at [@lindeneg/browser-cache](https://github.com/lindeneg/lindeneg-npm-packages/tree/master/packages/browser-cache).

### Installation

`yarn add @lindeneg/memory-cache`

### Usage

```tsx
import useMemoryCache from '@lindeneg/memory-cache';

function SomeComponent() {
  const { cache } = useMemoryCache<{ id: number }>();

  // set item
  cache.set('id', 1);

  // get item
  cache.get('id');

  // listen to event
  cache.on('trim', (removed) => {
    console.log('trim removed these keys from cache: ', removed);
  });

  // and so on
}
```

The documentation [here](https://github.com/Lindeneg/lindeneg-npm-packages/tree/master/packages/cache) can be used.
npm package: @lindeneg/on-key
Description: Hook to listen for key-strokes and then do something.
Author: lindeneg
Latest version: 1.1.4

### @lindeneg/on-key

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/on-key) ![license](https://badgen.net/npm/license/@lindeneg/on-key)

[Sandbox](https://codesandbox.io/s/lindeneg-on-key-m99cq)

---

React hook to listen for key-strokes and then do something

### Installation

`yarn add @lindeneg/on-key`

---

#### Arguments

| Name     | Required | Default     | Type                                | Description                                                                                                        |
| -------- | -------- | ----------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| key      | Y        | -           | `string`                            | [KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) to listen after |
| callback | Y        | -           | `(event: KeyboardEvent) => void`    | function to be called when desired event is dispatched                                                             |
| type     | N        | `"keydown"` | `"keydown" \| "keyup" \| "pressed"` | event type to listen after                                                                                         |

#### Usage

```tsx
import useOnKey from '@lindeneg/on-key';

function SomeComponent() {
  useOnKey('ArrowRight', (event) => console.log('ArrowRight: keydown', event));
}
```
npm package: @lindeneg/query-params
Description: Hook for query-strings using URLSearchParams.
Author: lindeneg
Latest version: 1.1.4

### @lindeneg/query-params

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![bundle-size](https://badgen.net/bundlephobia/min/@lindeneg/query-params) ![license](https://badgen.net/npm/license/@lindeneg/query-params)

[Sandbox](https://codesandbox.io/s/lindeneg-query-params-rnmi9)

---

React hook using [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

### Installation

`yarn add @lindeneg/query-params`

---

#### Arguments

| Name   | Required | Ref | Type                     | Description                                        |
| ------ | -------- | --- | ------------------------ | -------------------------------------------------- |
| params | Y        | T   | `Record<string, string>` | object with param keys and optional default values |

#### Return

Object with properties:

| Name          | Type                                      | Description                      |
| ------------- | ----------------------------------------- | -------------------------------- |
| values        | `T`                                       | object with current param values |
| onParamChange | `(type: keyof T, value: string) => void;` | change param value               |

#### Usage

```tsx
function SomeComponent() {
  const { values, onParamChange } = useQueryParams({
    id: '',
    context: '',
    // optional default value
    sort: 'desc',
  });
}
```

This will result in `window.location.search` having the value `?sort=desc`. If `sort` also was an empty string, then `window.location.search` would be empty.

Update param as follows:

```ts
onParamChange('context', 'products');
```

Now `window.location.search` will be `?context=products&sort=desc`

To remove it, use an empty string:

```ts
onParamChange('context', '');
```

Now `window.location.search` will be `?sort=desc`

If default values are specified, an empty string will not remove the key but rather use the default value instead.

So, if `sort` is changed

```ts
onParamChange('sort', 'asc');
```

Then `window.location.search` will of course be `?sort=asc`

However, if the key is removed

```ts
onParamChange('sort', '');
```

The default value will be used and `window.location.search` will be `?sort=desc`
npm package: @lindeneg/types
Description: Utility types.
Author: lindeneg
Latest version: 1.1.6

### @lindeneg/types

![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) ![license](https://badgen.net/npm/license/@lindeneg/types)

Utility types.

### Installation

`yarn add -D @lindeneg/types`

### Usage

We'll use the this `User` type in the following examples:

```ts
type User = {
  id: number;
  name: {
    first: string;
    last: string;
  };
  address: {
    street: string;
    city: string;
  };
};
```

#### RecursivePartialObj

`Partial` but recursive.

```ts
import type { RecursivePartialObj } from '@lindeneg/types';

type PartialUser = RecursivePartialObj<User>;
// becomes:
{
  id?: number;
  name?: {
    first?: string;
    last?: string;
  };
  address?: {
    street?: string;
    city?: string;
  };
};
```

#### Substitute

Substitute types in an object.

```ts
import type { Substitute } from '@lindeneg/types';

type SubstitutedUser = Substitute<User, { name: [string, string] }>;
// becomes:
{
  id: number;
  name: [string, string];
  address: {
    street: string;
    city: string;
  }
}
```

#### UniqueArray

Substitute a keys type in an object with another type.

```ts
import type { UniqueArray } from '@lindeneg/types';

type Arr = UniqueArray<[1, 1, 2, 3, 4, 4, 5, 5, 5, 6, 7]>;

// becomes:
[1, 2, 3, 4, 5, 6, 7];
```

#### SafeOmit

`Omit` but with enhanced type-safety.

```ts
import type { SafeOmit } from '@lindeneg/types';

type OmittedUser = SafeOmit<User, 'name' | 'address'>;

// becomes:
{
  id: string;
}
```
npm package: @lindgr3n/lindgr3n-ds
Description: Lindgr3n design-system
Author: Lindgr3n
Latest version: 0.4.18

# lindgr3n-ds

Base design system built when following [learn storybook design-system](https://www.learnstorybook.com/design-systems-for-developers/react/en/test/) built in Vue.

## Project setup

```bash
yarn install
```

### Compiles and hot-reloads for development

```bash
yarn run serve
```

### Compiles and minifies for production

```bash
yarn run build
```

### Run your tests

```bash
yarn run test
```

### Lints and fixes files

```bash
yarn run lint
```

## Storybook

### Run storybook

```bash
yarn run storybook
```

### Build storybook

```bash
yarn run build-storybook
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## Resource

https://www.learnstorybook.com/intro-to-storybook/vue/en/get-started/

The design system is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more at [Learn Storybook](https://learnstorybook.com).
npm package: @lindon88/npm-ensure-id
Description: Ensures that all specified html elements has id attribute.
Author: Lindon Camaj
Latest version: 1.0.0

# NPM Ensure Id

Ensures that all specified html elements has id attribute.

Example
```
ensureId({
check: 'id',
elements : [
    'a',
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'table',
    'tbody',
    'thead',
    'md-table-container',
    'button',
],
attrs: [],
autofix: true,
platform: 'web'
}, 'filepath');
```

NPM variant of https://github.com/ezraroi/grunt-ensure-id