open-index/open-npm huggingface dataset:
npm package: @sakartvelosoft/types-metadata
Description: Generic library to manage types metadata without decorators
Author: Sakartvelosoft LTD
Latest version: 0.0.9

# Framework for metadata bound to types and properties

This an experimental package to provide functionality of binding arbitrary metadata to types and properties.
Package done as much generic as possible, almost without binding to specific use cases.

Package done intentionally without decorators as decorators API is still experimental and not so tests-friendly 
due to usage of global context

# Usage

## Binding alias to types

```typescript

import {createTypesRegistry} from "@sakartvelosoft/types-metadata";

class TestClass {
    prop1: string;
    prop2: boolean;
    prop3: number;
    prop4: Date;
}
let registry = createTypesRegistry();
registry.bindTypeAlias(TestClass, 'test-class');
expect(registry.getTypeAlias(TestClass)).eq('test-class');
expect(registry.resolveType('test-class').alias).eq('test-class');
expect(registry.resolveType('test-class').name).eq(TestClass.name);
expect(registry.resolveType('TestClass')).equal(registry.resolveType('test-class'));

```

## Binding default fixed values to properties

```typescript

        class TestClass2 {
            text: string;
        }

        let registry = createTypesRegistry();
        registry.configureType(TestClass2, api => api.withDefaultValues({
            text: 'DEFAULT TEXT'
        }));
        let instance = registry.forType(TestClass2).createEmpty();
        expect(instance.text).to.be.eq("DEFAULT TEXT");

```

## Adding generated properties

```typescript

        class TestRecord {
            timestamp: Date;
            id: string;
            text: string
        }

        let registry = createTypesRegistry();
        registry.configureType(TestRecord, api => api.withPropertyGenerator('timestamp', () => new Date())
            .withPropertyGenerator('id', () => randomBytes(32).toString('base64url')));
        let rec = registry.create<TestRecord>(TestRecord, {
            text: 'Testing'
        });
        expect(rec).instanceof(TestRecord);
        expect(typeof rec.id).is.eq('string');
        expect(rec.timestamp).instanceof(Date);
        expect(rec.text).eq('Testing');

```
npm package: @sakes/randomid-generator-app
Description: * [General info](#general-info) * [Setup](#setup)
Author: Piotr Sakowski
Latest version: 1.0.1

# @sakes/randomid-generator
* [General info](#general-info)
* [Setup](#setup)

## General Info
This package provides a simple function for generating random IDs. The generated IDs can contain uppercase and lowercase letters and numbers, and the length of the ID can be specified as an argument when calling the randomID function.

## Setup
To use this package, you can install it using npm or yarn:

```
$ npm install @sakes/randomid-generator
$ yarn add @sakes/randomid-generator
```

You can then import the randomID function and use it to generate random IDs:

```
$ const randomID = require('@sakes/randomid-generator');
$ 
$ console.log(randomID(10));
$ // Output: "aBcDeFgHiJ"
```
npm package: @sakit-sa/countdown-timer
Description: This is a countdown-timer library for React
Author: Saeed Abdilar
Latest version: 1.1.4

# @sakit-sa/countdown-timer

> Simple, easy countdown timer for React

[![NPM](https://img.shields.io/npm/v/@sakit-sa/countdown-timer.svg)](https://www.npmjs.com/package/@sakit-sa/countdown-timer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Countdown timer

![Spinner gif](https://raw.githubusercontent.com/Abdilar/countdown-timer/master/src/asset/images/react-countdown-timer.gif)

## Live Playground
For examples of the countdown-timer in action, go to https://abdilar.github.io/countdown-timer.

OR

To run that demo on your own computer:
* Clone this repository
* `npm install`
* `npm run storybook`
* Visit http://localhost:6006/

## Getting Started
### Install

```sh
npm install @sakit-sa/countdown-timer
```

### Usage
```jsx
import CountdownTimer from '@sakit-sa/countdown-timer';

<CountdownTimer 
  time={90}
  format="[hh]:[mm]:[ss]"
  onComplete={() => console.log("The timer completed")} 
/>
```

### Props
Name | Type | Default | Description
-----|------|-------|-----
**id**|`string`|`countdown-timer-[random-number]`|The unique identifier for the component.
**className**|`object`|`{}`|Apply a className to the control
**time**|`number`|`required`|The value of the timer base on second.
**format**|`string`|`HH:MM:SS`|Formats a time value.
**onComplete**|`function`|`-`|Trigger when timer is zero.

### Format Token
Token | Description
-----|-----
**HH**|`Hours` leading zero for single-digit hours.
**hh**|`Hours` *no* leading zero for single-digit hours.
**MM**|`Minute` leading zero for single-digit minute.
**mm**|`Minute` *no* leading zero for single-digit minute.
**SS**|`Second` leading zero for single-digit second.
**ss**|`Second` *no* leading zero for single-digit second.

### className Token
`wrapperClass` `symbolClass` `digitClass` `hourClass` `minuteClass` `secondClass` `hourWrapperClass` `minuteWrapperClass` `secondWrapperClass`

See examples for more information (go to https://abdilar.github.io/countdown-timer/?path=/story/theme--class-name)


### License

MIT Licensed. © Copyright [Saeed Abdilar](https://github.com/Abdilar)
npm package: @sakit-sa/react-authorize
Description: This component helps to show an element, if you have a permission. It's based on React.
Author: Abdilar
Latest version: 1.3.1

# @sakit-sa/react-authorize

> This component helps to show an element, if you have a permission. It's based on React.

[![NPM](https://img.shields.io/npm/v/@sakit-sa/react-authorize.svg)](https://www.npmjs.com/package/@sakit-sa/react-authorize) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Live Playground

To run that demo on your own computer:
* Clone this repository
* `cd example/`
* `npm run start`
* Visit http://localhost:3000/

## Getting Started
### Install

```sh
npm install @sakit-sa/react-authorize
```

### Usage
```jsx
import React from 'react';
import Authozie from '@sakit-sa/react-authorize';

const App = () => (
    <Authozie
        check={"permission_1"}
        permissions={['permission_0', 'permission_1']}
    >
        The content
    </Authozie>
);
```

### Props
Name | Type | Default | Description
-----|-------------|-----------|-----
**check**|`string, array`|`[]`| This value must be exist in permissions prop. this is can a string or strings as array.
**children**|`element`|`-`|Specifies a content that must be show, if you have a permission.
**fallback**|`element`|`-`|If you have any permission, it shows instead of children prop.
**isViceVersa**|`boolean`|`false`|Specifies a boolean value. If the value is false, check prop must be exist in permissions prop and If the value is true, check prop must not be exist in permissions props and actually in this case, children are shown.
**permissionKey**|`string`|``|Specifies a localStorage's key. It gets permissions from localStorage.
**permissions**|`array`|`[]`|List of permission as string. note: if permissionKey has a value, permissions are ineffective.

### License

MIT Licensed. © Copyright [Saeed Abdilar](https://github.com/Abdilar)
npm package: @sakit-sa/react-lottie
Description: Simple lottie component for react
Author: Abdilar
Latest version: 1.0.10

# @sakit-sa/react-lottie

> Simple lottie component for react

[![NPM](https://img.shields.io/npm/v/@sakit-sa/react-lottie.svg)](https://www.npmjs.com/package/@sakit-sa/react-lottie) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @sakit-sa/react-lottie
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from '@sakit-sa/react-lottie'
import '@sakit-sa/react-lottie/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [Abdilar](https://github.com/Abdilar)
npm package: @sakit-sa/react-spinner
Description: This is a master-detail component for React
Author: Saeed Abdilar
Latest version: 1.0.1

# @sakit-sa/react-spinner

> Simple, easy spinner for React

[![NPM](https://img.shields.io/npm/v/@sakit-sa/react-spinner.svg)](https://www.npmjs.com/package/@sakit-sa/react-spinner) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Spinner

![Spinner gif](https://raw.githubusercontent.com/Abdilar/react-spinner/master/src/asset/images/spinner.gif)

## Live Playground
For examples of the react-spinner in action, go to https://abdilar.github.io/react-spinner.

OR

To run that demo on your own computer:
* Clone this repository
* `npm install`
* `npm run storybook`
* Visit http://localhost:6006/

## Getting Started
### Install

```sh
npm install @sakit-sa/react-spinner
```

### Usage
```jsx
import React from 'react';

import Spinner, {POSITIONS, MODE, NAME} from '@sakit-sa/react-spinner';
import '@sakit-sa/react-spinner/dist/index.css';

const App = () => (
  <Spinner
    isLoading={true}
    name={NAME.PUFF}
    mode={MODE.INSIDE}
    position={POSITIONS.CENTER}
  />
);
```

### Props
Name | Type | Default | Description
-----|------|-------|-----
**isLoading**|`boolean`|`false`|Boolean value to control whether the spinner is shown.
**name**|`string`|`uikit`|Specifies the name of the spinner (name includes: `uikit`, `puff`, `grid`, `oval`, `rings`, `ball-triangle`, `tail-spin`, `three-dots`).
**mode**|`string`|`inside`|Specifies the mode of the spinner (mode includes: `inside`, `full`).
**className**|`object`|`{}`|Apply a className to the control
**overlay**|`boolean`|`false`|Boolean value to control whether the spinner has an overlay.
**blur**|`boolean`|`false`|Boolean value to set the blur of the spinner background.
**dark**|`boolean`|`false`|Boolean value to set the darkness of the spinner background.
**id**|`string`|`spinner-[randomNumber(10000)]`|The unique identifier for the component.
**ratio**|`number`|`1`|Specifies the size of the spinner.
**color**|`string`|`''`|Specifies the color of the spinner (color format: `#ff00bb`, `rgb(124, 100, 0)`, `rgb(100%, 2.5%, 0%)`, `rgba(255, 0, 0, 0.5)`, `hsl(140, 2%, 50%)`, `hsla(140, 2%, 50%, 0.5)`).
**position**|`string`|`CENTER`|Specifies the position of the spinner (position includes: `BOTTOM`, `CENTER`, `LEFT`, `RIGHT`, `TOP`).

### className Token
`wrapper` `spinner`

See examples for more information (go to https://abdilar.github.io/react-spinner/?path=/story/theme-prop--class-name)

### License

MIT © [Saeed Abdilar](https://github.com/Abdilar)