open-index/open-npm huggingface dataset:
npm package: @flywine93/ngx-imgclicker
Description: Angular displays the image when clicking on the image.
Author: flywine
Latest version: 1.0.1

# ngx-imgclicker [![npm version](https://badge.fury.io/js/%40flywine93%2Fngx-imgclicker.svg)](https://badge.fury.io/js/%40flywine93%2Fngx-imgclicker) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)

[![NPM](https://nodei.co/npm/@flywine93/ngx-imgclicker.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@flywine93/ngx-imgclicker/)

![logo](https://github.com/93Alliance/ngx-imgclicker/raw/master/logo.png)

## Installation

```
npm i @flywine93/ngx-imgclicker -S
npm i panzoom -S
```

## Usage

1.Import module into App Module.

```
import { NgxImgclickerModule } from '@flywine93/ngx-imgclicker';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CommonModule, // import
    NgxImgclickerModule // import
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
2.demo

```
<p style="text-align:center;">Test ngx-imgclicker</p>

<img src="https://img95.699pic.com/photo/50046/5562.jpg_wh300.jpg">

<ngx-imgclicker></ngx-imgclicker>
```

![logo](https://github.com/93Alliance/ngx-imgclicker/blob/master/demo.gif)
npm package: @flywire/flywire-js
Description: Flywire JavaScript client
Latest version: 0.0.6

# flywire-js &middot; [<img alt="Version" src="https://img.shields.io/npm/v/@flywire/flywire-js.svg">](https://www.npmjs.com/package/@flywire/flywire-js) [<img alt="Size" src="https://img.shields.io/bundlephobia/min/@flywire/flywire-js">](https://bundlephobia.com/result?p=@flywire/flywire-js)

Flywire JavaScript client.

## Installation

Add the dependency to your `package.json`:

```javascript
npm i @flywire/flywire-js
```

## Usage

```javascript
import Flywire from '@flywire/flywire-js';

const flywire = Flywire({ token: 'TOKEN' });
flywire.country.findAll();
```

### Config

| Key     | Description                                      |
| :------ | :----------------------------------------------- |
| `token` | Client token provided by Flywire. Default = null |
| `mock`  | Enable mock mode. Default = false                |

#### Mock mode

The `mock` mode returns fake data and does not query the API. It works in node
and browser, but a service worker is needed in the last case:

```bash
npx msw init <PUBLIC_DIR>
```

## Create a new release

To create a new release, make all the changes that you need and commit them,
then execute:

```bash
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
```

For example:

```bash
npm version patch
```

This will bump the `package.json` version, build a new bundle, commit, push the
changes tagging them to a new release and update the documentation.

Then create a PR and request the review from other project commiters. Once
accepted and merged to master, execute `npm publish` from master branch.
npm package: @flywire/react-headlessui
Description: Headless UI components
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @flywire/react-headlessui

A collection of unstyled and fully accessible UI components used in Flywire.

## Documentation

The documentation and examples are hosted in [https://flywire-ui-docs.flywire.com](https://flywire-ui-docs.flywire.com).

## Installation

Install dependencies with npm:

```bash
npm install @flywire/react-headlessui
```

## Run Locally

Clone the project

```bash
git clone git@git.gitlab.flywire.tech:flywire/development/react-headlessui.git
```

Go to the project directory

```bash
cd react-headlessui
```

Install dependencies

```bash
npm install
```

Start the server

```bash
npm run doc
```

## Running Tests

To run tests, run the following command

```bash
npm run test
```

## Releases

To create a new release, make all the changes that you need and commit them,
then execute:

```bash
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease]
```

For example:

```bash
npm version patch
npm publish
```

or for a beta:

```bash
npm version prepatch
npm publish --tag beta
```

This will bump the `package.json` version, build a new bundle, commit, push the
changes tagging them to a new release.

Then create a PR and request the review from other project commiters. Once
accepted and merged to master, execute `npm publish` from master branch.
npm package: @flyyer/goerr
Description: handle throwing errors in golang way.
Author: Idan Loo
Latest version: 3.0.0

# @flyyer/goerr

Internal utility function.

```sh
yarn add @flyyer/goerr
```

```ts
import { goerr } from "@flyyer/goerr";


const [res, error] = await goerr(fetch("..."));
if (error) {
  //...
} else if (res) {
  //...
} else {
  // Never will return both values.
}
```
npm package: @flyyer/parcel-commonjs
Description: Workaround to support Parcel 2 with TypeScript in CommonJS targets
Author: Patricio López Juri
Latest version: 0.1.1

# @flyyer/parcel-commonjs

TypeScript wrapper around Parcel 2 to prevent TypeScript compiler from transforming `await import()` to CommonJS imports in host project.

This is a workaround to support `.mjs` imports in TS projects targeting CommonJS.

```sh
yarn add @flyyer/parcel-commonjs
```

This project uses the latest `RC` (Release Candidate) version until 2.0.0 is finally released.
npm package: @flyyer/proxy
Description: Helper function to proxy images via Flyyer CDN network to bypass CORS
Author: Patricio López Juri
Latest version: 2.1.2

# @flyyer/proxy

Helper function to proxy images via flyyer network to bypass CORS with Typescript support.

We made this for [Flyyer.io](https://flyyer.io?ref=github) to enable developers to create content-aware marketing and social images. Beware this is intended to use inside flyyer templates created with [`create-flyyer-app`](https://github.com/useflyyer/create-flyyer-app).

**Note: This proxy service is only available and allowed for flyyer templates where bypassing CORS is necessary for images or data.**

## Usage

Install this dependency:

```sh
yarn add @flyyer/proxy
```

Common case usage:

```tsx
import { proxy } from "@flyyer/proxy";

export default function MainTemplate({ variables }) {
  const src = proxy(variables["image"]);
  return <img src={src} />
}
```

### Smartcrop

![example image](https://github.com/useflyyer/use-smartcrop/raw/main/.github/image.jpeg)

Usage with [`use-smartcrop`](https://github.com/useflyyer/use-smartcrop).

```tsx
import { proxy } from "@flyyer/proxy";
import { useSmartcrop } from "use-smartcrop";

export default function MainTemplate({ width, height, variables }) {
  const src = proxy(variables["image"]);
  const cropped = useSmartcrop(src, { width, height, minScale: 1 })
  return <img src={cropped.src} />
}
```
npm package: @flyyer/robotstxt
Description: Pure JS robots.txt parser and guard built with TypeScript and ESM support (tree-shaking).
Author: Patricio López Juri
Latest version: 3.0.1

# @flyyer/robotstxt

Pure JS robots.txt parser and guard built with TypeScript and ESM support (tree-shaking).

```sh
yarn add @flyyer/robotstxt
```

Works on Node.js, Browsers, ReactNative, and WebWorker environments.

## Usage

```ts
import * as robotstxt from "@flyyer/robotstxt";

const result = robotstxt.PARSE(`
  Sitemap: https://www.flyyer.io/api/sitemap.xml

  User-agent: googlebot
  Allow: /
  Disallow: /secret-page

  User-agent: *
  Allow: /
  Allow: /api/sitemap.xml
  Disallow: /api/
  Disallow: /dashboard/
`);

console.log(result)

const guard = GUARD(parsed.groups);
function isAllowed(path: string, userAgent?: string): boolean {
  const rule = guard.isAllowedBy(path, userAgent);
  if (rule) {
    // rule.allow // path is allowed or not.
    // rule.pattern.path // path from robots.txt (eg: "/api/sitemap.xml", "/", "/api/").
    // rule.pattern.regexp // regex version of rule.pattern.path.
    return rule.allow
  }
  // If not rule is found assume true.
  return true;
}

expect(isAllowed("/")).toBe(true);
expect(isAllowed("/about")).toBe(true);
expect(isAllowed("/api/sitemap.xml")).toBe(true);
expect(isAllowed("/dashboard")).toBe(true);
expect(isAllowed("/dashboard/flyyer")).toBe(false);
expect(isAllowed("/dashboard/flyyer/projects")).toBe(false);

expect(isAllowed("/secret-page")).toBe(true);
expect(isAllowed("/secret-page", "slackbot")).toBe(true);
expect(isAllowed("/secret-page", "Slackbot")).toBe(true);
expect(isAllowed("/secret-page/hello", "Slackbot")).toBe(true);
expect(isAllowed("/secret-page", "googlebot")).toBe(false);
expect(isAllowed("/secret-page", "Googlebot")).toBe(false);
expect(isAllowed("/secret-page/hello", "Googlebot")).toBe(false);
```

Prints:

```json5
{
  "groups": [
    {
      "agents": ["googlebot"],
      "rules": [
        {"path": "/","rule": "allow" },
        {"path": "/secret-page","rule": "disallow" },
      ],
    },
    {
      "agents": ["*"],
      "rules": [
        { "rule": "allow", "path": "/" },
        { "rule": "allow", "path": "/api/sitemap.xml" },
        { "rule": "disallow", "path": "/api/" },
        { "rule": "disallow", "path": "/dashboard/"  },
      ]
    }
  ],
  "extensions": [
    { "extension": "sitemap", "value": "https://www.flyyer.io/api/sitemap.xml" },
  ],
}
```

---

Kudos to [Woorank/robots-txt-guard](https://github.com/Woorank/robots-txt-guard)
npm package: @flyyer/stringify
Description: Just a wrapper around https://github.com/streamich/fastest-stable-stringify
Author: @streamich
Latest version: 0.2.0

# @flyyer/stringify

Just a wrapper around https://github.com/streamich/fastest-stable-stringify but with Typescript typing we use in some projects.

```sh
yarn add @flyyer/stringify
```

All credits to https://github.com/streamich/fastest-stable-stringify
npm package: @flyyer/use-googlefonts
Description: React hook to dynamically load Google Fonts v2 during execution.
Author: Patricio López Juri
Latest version: 0.4.2

# @flyyer/use-googlefonts

React hook to load Google Fonts v2 **when you can't define _a priori_ the expected font on the `<head />`.**

If you know what specific font you require on your project you should omit this library and insert the `<link />` tags directly in the `<head />` of your HTML via `react-helmet` or `next/head` if you are using Next.js.

We made this hook for [Flyyer.io](https://flyyer.io?ref=github) to enable developers to create templates with fonts _on the fly_ to match each user preferred font styling. Those tempates are used to create social and marketing images.

## Usage

Install this dependency:

```sh
yarn add @flyyer/use-googlefonts
```

Common case usage:

```tsx
import React from "react";
import { useGoogleFonts, GoogleFontsStatus } from "@flyyer/use-googlefonts";

function App() {
  const font = useGoogleFonts([
    {
      family: "Cabin", // Family Name
      styles: [
        "600..700", // Range, if family supports it.
        "100..200italic", // Range with italic
        "300italic", // Weight with italic
        "regular", // Shortcut to 400
        "italic", // Shortcut to 400 Italic
        "500", // Regular with weight
        444, // Regular weight for variable font
      ],
    },
    {
      family: "Roboto", // Family Name - Roboto doesn't support ranges
      styles: [
        "300italic", // Weight with italic
        "regular", // Shortcut to 400
        "italic", // Shortcut to 400 Italic
        "500",
        100,
      ],
    },
  ]);

  if (font.status === GoogleFontsStatus.FAILED) {
    console.log(font.error);
  } else {
    console.log(font.href);
    // https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,444;0,500;0,600..700;1,100..200;1,300;1,400;1,600..700&family=Roboto:ital,wght@0,100;0,400;0,500;1,300;1,400&display=auto
  }

  return (
    // Use .flyyer-wait class to prevent premature renders while the font is still loading.
    <div className={googleFont.status === GoogleFontsStatus.LOADING && "flyyer-wait"}>
      <p style={{ fontFamily: "'Cabin', sans-serif" }}>
        Almost before we knew it, we had left the ground.
      </p>
    </div>
  );
}
```

To improve performance and speed it is recommended to add the following pre-connection tags in the `<head />` of your HTML.

**This is done automatically if you are using [@flyyer/cli](https://github.com/useflyyer/flyyer-cli) so skip this section if you created your deck with [create-flyyer-app](https://github.com/useflyyer/create-flyyer-app)**

```html
<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  </head>
  <body>
    ...
  </body>
</html>
```

---

## References

* [adriano-tirloni/google-fonts-css2](https://github.com/adriano-tirloni/google-fonts-css2)