open-index/open-npm huggingface dataset:
npm package: @independent-software/typeui
Description: TypeUI
Author: Alexander van Oostenrijk
Latest version: 1.2.20

# TypeUI

Bootstrap getting old hat? SemanticUI too heavy? Prefer React and TypeScript? TypeUI is a suite of UI components built in 100% TypeScript. It's light-weight, and it uses styled-components to allow you to serve everything as a single JavaScript file.

## Installation 
```sh
npm install @independent-software/typeui --save
yarn add @independent-software/typeui
bower install @independent-software/typeui --save
```

## Documentation

Storybook available as [GitHub pages](https://henck.github.io/typeui/).

## Projects

You can see TypeUI in action on [recharts.online](http://recharts.online).

## Usage

This package has a built-in theme, which must be passed on to any controls your app uses. You can derive new themes from the default theme. The required imports are:

```jsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components'
import { Theme } from '@independent-software/typeui/styles/Theme'
```

This React app uses a single component `Button`:

```jsx
import { Button } from '@independent-software/typeui/controls/Button'

ReactDOM.render(
  (<React.Fragment>
    <ThemeProvider theme={Theme}>
      <Button>Click me!</Button>
    </ThemeProvider>
  </React.Fragment>),
  document.getElementById('root')
); 
```

Optionally, you can use the component `<StyleReset/>` to perform a global CSS reset, if your app is not already doing this. In addition, `<StyleBase>` sets up some optional base styles:

```jsx
import { StyleReset } from '@independent-software/typeui/styles/StyleReset'
import { StyleBase } from '@independent-software/typeui/styles/StyleBase'
import { Button } from '@independent-software/typeui/controls/Button'

ReactDOM.render(
  (<React.Fragment>
    <StyleReset/>
    <StyleBase/>
    <ThemeProvider theme={Theme}>
      <Button>Click me!</Button>
    </ThemeProvider>
  </React.Fragment>),
  document.getElementById('root')
);
```

This project was built in TypeScript and comes with TypeScript type definitions, so it's not necessary to install these separately.

## Notes

### Tree shaking

The ES2015 `import` statements in this package are structured in a way that promotes tree shaking in Webpack. If an application imports only a few components from this library, then (for production builds) Webpack will not include the unused components, which can greatly reduce the size of the application package. 

This `import` statement will import just the `Button` component:

```jsx
import { Button } from '@independent-software/typeui/controls/button'
```

For tree shaking to work, be sure to set the following in your Webpack config file:

```json
optimization: {
  usedExports: true
}
```

as well as `mode: 'production'`.
npm package: @independer/ng-tooltip
Description: Clickable angular tooltip popup ​ ## Online Demo (Stackblitz) https://independer-ng-tooltip-playground.stackblitz.io
Author: Hans Sebastian Tiono
Latest version: 2.1.4

# ng-tooltip
Clickable angular tooltip popup
​
## Online Demo (Stackblitz)
https://independer-ng-tooltip-playground.stackblitz.io

## Compatibility
Tested and published with Angular 9.1.1
​
## Installation
This package has a peer dependency on `@angular/cdk`, so you have to first install it by running:

```bash
$ npm install @angular/cdk@9.x --save
```

Install ng-tooltip via npm by running this command:
```bash
$ npm install @independer/ng-tooltip --save
```
 
## Usage
 
Add `TooltipModule` to your main `app.module.ts`
​
```ts
// app.module.ts
​
import { TooltipModule } from '@independer/ng-tooltip';
  
@NgModule({
  imports: [
    TooltipModule.forRoot() // This .forRoot() is necessary
  ]
})
export class AppModule { }
```
​
​
## Variations
​
### Default tooltip
By default, the tooltip trigger will be a question mark icon like this: ![tooltip icon](https://image.ibb.co/bL6Czc/question_mark.png)
<br />
<br />​
The icons are available in 3 different sizes sm, md, lg
```html
Tooltip with icon lg <ind-tooltip content="This is a simple tooltip which uses content attribute" size="lg"></ind-tooltip>
Tooltip with icon md <ind-tooltip content="This is a simple tooltip which uses content attribute" size="md"></ind-tooltip>
Tooltip with icon sm (default) <ind-tooltip content="This is a simple tooltip which uses content attribute" size="sm"></ind-tooltip>
```
### Custom tooltip trigger
You can replace the tooltip trigger (question-mark icon) with your own icons or custom HTML element.
```html
<ind-tooltip content="Tooltip without question mark">
  <a>Click this link!</a> 
</ind-tooltip>
```
​
### Tooltip with header and content
Inside the tooltip you can write optionally header and content separately.
```html
<ind-tooltip header="This is tooltip header" content="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."></ind-tooltip>
```
​
### Tooltip with HTML content
It is also possible to have custom HTML content inside the tooltip by declaring `<ng-template #tooltipContentTemplate></ng-template>` inside `<ind-tooltip></ind-tooltip>`. The hash `tooltipContentTemplate` will mark it as HTML content inside tooltip, so it msut be written exactly the same.
​
```html
<ind-tooltip header="This is a tooltip with HTML elements"> 
  <ng-template #tooltipContentTemplate> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum. 
    <h4>And a button</h4> 
    <button>A button</button>
  </ng-template>
</ind-tooltip>
```
npm package: @indepthwebsolutions/cache-layer
Description: Will temporary store values on server memory while the server is running.
Author: Asen Angelov contact@a-angelov.eu
Latest version: 1.0.5

# Indepth Solutions - Server Cache Layer

Will temporary store values on server memory while the server is running. 

## Usage


```javascript
import { default as cacheLayer } from '@indepthwebsolutions/cache-layer';
```

```javascript
cacheLayer.set('key-string', 'value-any');
```

```javascript
const cachedValue1 = cacheLayer.get('key-string'); // 'value-any'
const cachedValue2 = cacheLayer.get('not-existing'); // undefined
```
npm package: @indepthwebsolutions/config
Description: Scoped config and easy environment variables.
Author: Asen Angelov contact@a-angelov.eu
Latest version: 1.0.17

# Indepth Config

## Usage

This package can read environment variables and scopes some data across all @indepthwebsolutions packages.

## Installation

NPM
```bash
  npm i @indepthwebsolutions/config
```

YARN
```bash
  yarn add @indepthwebsolutions/config
```

## Usage

```js
  import config from '@indepthwebsolutions/config';

  const port = config.PORT || 3000;
```

.env
```
  PORT=3001
```
npm package: @indepthwebsolutions/generate-shopify-product-description
Description: Generate html template for shopify product description
Author: Asen Angelov contact@a-angelov.eu
Latest version: 1.0.3

# Generate Shopify Product Description

## Usage

This package helps format text into html suitable for shopify's product description.

## Installation

NPM
```bash
  npm i @indepthwebsolutions/shopify-product-description
```

YARN
```bash
  yarn add @indepthwebsolutions/shopify-product-description
```

## Usage

```js
  import generateShopifyProductDescription from '@indepthwebsolutions/generate-shopify-product-description';

  const validationResponse = generateShopifyProductDescription(req.body);

```

Pass the following parameters in the request body:
```js
  {
    description,
    parameters,
    linksAndImages
  }
```
npm package: @indepthwebsolutions/session-control
Description: Control express.js sessions
Author: Asen Angelov contact@a-angelov.eu
Latest version: 1.0.7

# Control Node Sessions

## Usage

This package is designed for Indepth Solutions LTD. for managing node sessions with a high level abstraction of express. It can be used for other purposes too.

## Installation

NPM
```bash
  npm i @indepthwebsolutions/session-control
```

YARN
```bash
  yarn add @indepthwebsolutions/session-control
```

On your server add this env variable:

.env
```
INDEPTH_AUTH_KEY=put_your_key_here
```

In your request body, you must include this security token:

```js
headers: {
  'Authorization': 'Indepth-Auth-Key put_your_key_here',
}
```

## Usage

```js
  import Session from '@indepthwebsolutions/session-control';

  const session = new Session({ req, requiredParams: [ 'text', 'source_lang', 'target_lang' ] });

  if(!session.isAuthorized()) return res.status(400).json({ error: "named error" });

  if (!session.hasRequiredParams()) return res.status(400).json({ error: "named error" });
```
npm package: @indepthwebsolutions/translate
Description: Translate anything with AI
Author: Asen Angelov contact@a-angelov.eu
Latest version: 1.0.5

# AI Translation for Node

## Usage

This is package for node. It uses DeepL AI to translate source language into target language.

You need to make a registration and get a token from DeepL to run this package.

We will go through all steps in the installation process.  

## Installation

NPM
```bash
  npm i @indepthwebsolutions/translate
```

YARN
```bash
  yarn add @indepthwebsolutions/translate
```

1. Sign up for DeepL's API [DeepL](https://www.deepl.com/)

2. Go to your account and copy Authentication Key for DeepL API.

3. In your .env file add DEEP_L_API_ADDRESS and DEEP_L_API_AUTH_KEY.

```
  DEEP_L_API_ADDRESS=https://api-free.deepl.com/v2/translate
  DEEP_L_API_AUTH_KEY=your_key
```

4. Use your key as a value to DEEP_L_API_AUTH_KEY and use the correct api address (there is a free and premium address - look at their docs).

5. Send text to your API using POST request with the following properties: text, source_lang, target_lang.

text and target_lang and mandatory. If you skip source_lang, the source language will be detected automatically.

## Usage

```js
  import zazaDescriptionValidation from '@indepthwebsolutions/zaza-description-validation';

  const translateResponse = await translate(req.body);
```
npm package: @indepthwebsolutions/zaza-description-validation
Description: Check for proper html syntax in shopify product description.
Author: Asen Angelov contact@a-angelov.eu
Latest version: 1.0.5

# Shopify Description Validation

## Usage

This is package for node.

## Installation

NPM
```bash
  npm i @indepthwebsolutions/zaza-description-validation
```

YARN
```bash
  yarn add @indepthwebsolutions/zaza-description-validation
```

## Usage

```js
  import zazaDescriptionValidation from '@indepthwebsolutions/zaza-description-validation';

  // req.body.text is where you should pass the shopify description.

  zazaDescriptionValidation(req.body);
```