open-index/open-npm huggingface dataset:
npm package: @gravitylabs/css-calc-transform
Description: Transform CSS properties with calc() values to pixels based on window and element dimensions.
Author: Krister Kari
Latest version: 1.0.0

# CSS calc() to pixels transform

[![NPM version](http://img.shields.io/npm/v/css-calc-transform.svg)](https://www.npmjs.org/package/css-calc-transform)
[![Build Status](https://github.com/kristerkari/css-calc-transform/workflows/Tests/badge.svg)](https://github.com/kristerkari/css-calc-transform/actions?workflow=Tests)
![Size](https://img.shields.io/bundlephobia/minzip/css-calc-transform.svg)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

Tiny Javascript library to transform CSS properties with [CSS calc() function](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) values to pixels based on window and element dimensions.

## Install

```sh
yarn add --save css-calc-transform
```

or

```sh
npm install --save css-calc-transform
```

## Usage

### Pixels

```js
import { transform } from "css-calc-transform";

transform({
  prop: "width",
  value: "calc(10px + (100px / 3.5))"
});

↓ ↓ ↓ ↓ ↓ ↓

38.57142857142857
```

### Percentages

```js
import { transform } from "css-calc-transform";

const parentElementDimensions = {
  width: 480,
  height: 100
};

transform({
  prop: "width",
  value: "calc(100% - 10px)",
  parent: parentElementDimensions
});

↓ ↓ ↓ ↓ ↓ ↓

470
```

### Viewport units

```js
import { transform } from "css-calc-transform";

const windowDimensions = {
  width: 480,
  height: 640
};

transform({
  prop: "height",
  value: "calc(50vh + 10px)",
  win: windowDimensions
});

↓ ↓ ↓ ↓ ↓ ↓

330
```

### rem unit

```js
import { transform } from "css-calc-transform";

transform({
  prop: "fontSize",
  value: "calc(2rem + 1px)",
});

↓ ↓ ↓ ↓ ↓ ↓

33
```

### em unit

> When em units are used on font-size, the size is relative to the font-size of the parent.
>
> When used on other properties, it’s relative to the font-size of the element itself.
>
> https://www.digitalocean.com/community/tutorials/css-rem-vs-em-units

```js
import { transform } from "css-calc-transform";

transform({
  prop: "fontSize",
  value: "calc(2em + 1px)",
  parent: {
    font: {
      size: 16
    }
  }
});

↓ ↓ ↓ ↓ ↓ ↓

33
```

```js
import { transform } from "css-calc-transform";

transform({
  prop: "height",
  value: "calc(10px + 2em)",
  font: {
    size: 16
  }
});

↓ ↓ ↓ ↓ ↓ ↓

42
```

## min(), max(), clamp()

```js
import { transform } from "css-calc-transform";

transform({
  prop: "height",
  value: "calc(min(2px, 3px) + clamp(100px, 150px, 200px) + max(1px, 2px))",
});

↓ ↓ ↓ ↓ ↓ ↓

154
```

### More examples

For more examples, please have a look at [the tests](__tests__/index.spec.js).

## Dependencies

- None
npm package: @gravitylabs/css-viewport-units-transform
Description: Transform CSS viewport units of a style object to pixels based on window dimensions
Author: Krister Kari
Latest version: 0.10.3

# css-viewport-units-transform

[![Build Status](https://github.com/kristerkari/css-viewport-units-transform/workflows/Tests/badge.svg)](https://github.com/kristerkari/css-viewport-units-transform/actions?workflow=Tests)
[![Coverage Status](https://coveralls.io/repos/github/kristerkari/css-viewport-units-transform/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/css-viewport-units-transform?branch=master)
![Size](https://img.shields.io/bundlephobia/minzip/css-viewport-units-transform.svg)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

Transform CSS viewport units of a Javascript style object to pixels based on window dimensions.

Supports `vw`, `vh`, `vmin` and `vmax` units.

```js
import { transform } from "css-viewport-units-transform";
// or const transform = require("css-viewport-units-transform").transform;

transform(
  {
    fontSize: "10vw"
  },
  {
    width: 480,
    height: 100
  }
);
```

↓ ↓ ↓ ↓ ↓ ↓

```js
{
  fontSize: 48;
}
```

or

```js
transform(
  {
    myClass: {
      fontSize: "10vh"
    }
  },
  {
    width: 480,
    height: 100
  }
);
```

↓ ↓ ↓ ↓ ↓ ↓

```js
{
  myClass: {
    fontSize: 10,
  }
}
```

## Dependencies

- None
npm package: @gravitywelluk/environment
Description: Environment variable and secret validation utility
Author: GravitywellUK
Latest version: 2.0.5

<h1 align="center">Gravitywell Environment Validation</h1>
<p align="center">Library to handle environment variable and secret validation</p>
<p align="center">
  <img src="https://img.shields.io/github/workflow/status/GravitywellUK/packages/CI/master" alt="CI" />
  <img src="https://img.shields.io/github/license/gravitywelluk/packages" alt="License" />
  <img src="https://img.shields.io/npm/dm/@gravitywelluk/environment" alt="Downloads" />
  <img src="https://img.shields.io/npm/v/@gravitywelluk/environment" alt="Version" />
</p>
<br />

## Usage

Use at a convenient entry point to check that your environment is setup correctly (Webpack config, Serverless Stack deployment etc.)

```typescript
import { validateAppEnvironment } from "@gravitywelluk/environment";

await validateAppEnvironment(process.env.ENVIRONMENT, {
  variables: [
    // sequelize (local dev)
    "DB_DATABASE",
    "DB_HOST",
    "DB_PORT",
    "DB_ENGINE",
    "DB_USERNAME",
    "DB_PASSWORD",
    // aws
    "REGION",
    // external apis
    "SOME_API_KEY"
  ],
  // put AWS Secret ARNs here for backend projects
  awsSecrets: [
    "DB_SECRET_ARN"
  ]
});
```

This validation function will throw an error if required variables are not found. Secrets will also be checked to see if they exist in AWS Secrets Manager.
npm package: @gravitywelluk/error
Description: > Base error class for better error handling
Author: GravitywellUK
Latest version: 1.0.2

<h1 align="center">Gravitywell Error classes</h1>
<p align="center">Library to handle JSON API specification errors</p>
<p align="center">
  <img src="https://img.shields.io/github/workflow/status/GravitywellUK/packages/CI/master" alt="CI" />
  <img src="https://img.shields.io/github/license/gravitywelluk/packages" alt="License" />
  <img src="https://img.shields.io/npm/dm/@gravitywelluk/error" alt="Downloads" />
  <img src="https://img.shields.io/npm/v/@gravitywelluk/error" alt="Version" />
</p>
<br />

## Usage

Within your project you can specify the more project specific error codes, (see the example below)

```typescript
import { ApiError } from "@gravitywelluk/error";

import APIError from "./ApiError";
import { ErrorType } from "./ApiError";

export enum ErrorCode {
  UserNotAllowed = "user_not_allowed",
}

export default class DecarbError extends APIError<ErrorCode> {}
```

Then you can use this class across your project for more consistant error handling:

```typescript
throw new DecarbError(
  "User is not permitted to access that resource",
  ErrorType.Forbidden,
  ErrorCode.UserNotAllowed
);
```

## Example error api response format

```json
{
  "statusCode": 404,
  "body": {
    "error": {
      "message": "User not found",
      "type": "NOT_FOUND_ERROR"
    }
  }
}
```
npm package: @gravitywelluk/react-native-hooks
Description: Library of commonly used React-Native hooks
Author: Luke Baker
Latest version: 1.0.2

<h1 align="center">Gravitywell React-Native Hooks</h1>
<p align="center">Library of commonly used React-Native hooks</p>
<p align="center">
  <img src="https://img.shields.io/github/workflow/status/GravitywellUK/packages/CI/master" alt="CI" />
  <img src="https://img.shields.io/github/license/gravitywelluk/packages" alt="License" />
  <img src="https://img.shields.io/npm/dm/@gravitywelluk/react-native-hooks" alt="Downloads" />
  <img src="https://img.shields.io/npm/v/@gravitywelluk/react-native-hooks" alt="Version" />
</p>
<br />

## Usage

```typescript
import { <LIB_NAME_HERE> } from "@gravitywelluk/react-native-hooks";
```

## Table of Contents
- [Usage](#usage)
- [Table of Contents](#table-of-contents)
- [`useAssetLoader`](#useassetloader)

## `useAssetLoader`

A hook that loads each asset into cache.

```typescript
import { useAssetLoader } from "@gravitywelluk/react-native-hooks";

const [ assetsLoaded ] = useAssetLoader([
  require("./path/to/file/example.png"),
  require("./path/to/file/example.jpg")
]);

/* Output:

[ true, null ]

*/
```
npm package: @gravitywelluk/regex
Description: Library of commonly used Regular Expressions
Author: Luke Baker
Latest version: 1.0.29

<h1 align="center">Gravitywell Regex</h1>
<p align="center">Library of commonly used Regular Expressions</p>
<p align="center">
  <img src="https://img.shields.io/github/workflow/status/GravitywellUK/packages/CI/master" alt="CI" />
  <img src="https://img.shields.io/github/license/gravitywelluk/packages" alt="License" />
  <img src="https://img.shields.io/npm/dm/@gravitywelluk/regex" alt="Downloads" />
  <img src="https://img.shields.io/npm/v/@gravitywelluk/regex" alt="Version" />
</p>
<br />

## Usage

```typescript
import { <REGEX_NAME_HERE> } from "@gravitywelluk/regex";
```

## Table of Contents
- [Usage](#usage)
- [Table of Contents](#table-of-contents)
- [Email regex](#email-regex)
  - [`globalEmailRegex`](#globalemailregex)
- [Phone number regex](#phone-number-regex)
  - [`phoneInternationalE164Regex`](#phoneinternationale164regex)
  - [`phoneUkBasedRegex`](#phoneukbasedregex)

## Email regex

### `globalEmailRegex`

Regex for a global email address `conner.o'brian@example.com`

```typescript
import { globalEmailRegex } from "@gravitywelluk/regex";
```

## Phone number regex

### `phoneInternationalE164Regex`

Regex for an international (E.164) phone number `+14155552671`

```typescript
import { phoneInternationalE164Regex } from "@gravitywelluk/regex";
```

### `phoneUkBasedRegex`

Regex for a UK based phone number `+447847584310` or `07847584310`

```typescript
import { phoneUkBasedRegex } from "@gravitywelluk/regex";
```
npm package: @gravitywelluk/sequelize-utils
Description: Sequelize utilities
Author: GravitywellUK
Latest version: 2.0.4

<h1 align="center">Gravitywell Sequelize Utilities</h1>
<p align="center">Library of sequelize helpers</p>
<p align="center">
  <img src="https://img.shields.io/github/workflow/status/GravitywellUK/packages/CI/master" alt="CI" />
  <img src="https://img.shields.io/github/license/gravitywelluk/packages" alt="License" />
  <img src="https://img.shields.io/npm/dm/@gravitywelluk/lambda-utils" alt="Downloads" />
  <img src="https://img.shields.io/npm/v/@gravitywelluk/lambda-utils" alt="Version" />
</p>
<br />

## Usage

```typescript
import { BaseModel } from "sequelize-utils"

```