open-index/open-npm huggingface dataset:
npm package: @sherl/sdk
Description: Sherl SDK for JavaScript
Author: Winzana
Latest version: 5.1.0

# @sherl/sdk

[![Release](https://github.com/Winzana/sherl-sdk-js/workflows/Release/badge.svg?branch=master&event=push)](https://github.com/Winzana/sherl-sdk-js/actions?query=workflow%3ARelease)
[![Version](https://img.shields.io/npm/v/@sherl/sdk)](https://www.npmjs.com/package/@sherl/sdk)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

Sherl SDK for JavaScript.

## Sherl

Sherl is a low-code platform created by [Winzana](https://winzana.com).

## Getting started

### Installation

#### Install as NPM package

```
npm install @sherl/sdk
```

#### Add script in browser

The script is available in the [releases section](https://github.com/Winzana/sherl-sdk-js/releases).

```html
<script type="text/javascript" src="sherl-sdk.min.js"></script>

<!-- or through a CDN like jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@sherl/sdk@latest/_bundles/sherl-sdk.min.js"></script>
```

### Configuration

Before calling any other methods, you need to initialize the SDK by calling `init`:

```js
// Import with require
const Sherl = require('@sherl/sdk');

// OR import syntax
import * as Sherl from '@sherl/sdk';

// OR `window.sherl` for browsers

Sherl.init({
  apiKey: 'YOUR_API_KEY',
  apiSecret: 'YOUR_API_SECRET',
});
```

## Contributions

See [CONTRIBUTING.md](CONTRIBUTING.md)
npm package: @sherlock-gmbh/node-red-contrib-ui-iframe-modal
Description: Use this node to display a given website in iframe overlay.
Author: Dirk Dresch
Latest version: 0.0.3

# node-red-contrib-dashboard-iframe-modal
Use this node to display a given website in iframe overlay.

![Node Properties](https://github.com/Sherlock-GmbH/node-red-contrib-ui-iframe-modal/blob/main/node-properties.png)

### Parameters
`url` is used for the source parameter of the iframe

`width` and `height` you can use to define the dimension of the iframe which is horizontally centered.

# License
MIT
npm package: @sherluok/vscode-problem-matcher
Description: Tasks and Problem Matchers for chrome, esbuild, wrangler...
Latest version: 0.3.6

```js
import { beginsPattern, endsPattern } from '@sherluok/vscode-problem-matcher/common';

console.log(beginsPattern);
console.log(endsPattern);
```

```js
import { logBeginsPattern, logEndsPattern } from '@sherluok/vscode-problem-matcher/node';

logBeginsPattern();
logEndsPattern();
```

## Integrations

Use bundler plugins to integrate with [sherluok.problem-matcher](https://marketplace.visualstudio.com/items?itemName=sherluok.problem-matcher) VS Code extension's `$common` problem matcher.

### Webpack

```js
import { VscodeTaskPlugin } from '@sherluok/vscode-problem-matcher/webpack';

webpack({
  plugins: [
    new VscodeTaskPlugin(),
  ],
});
```

### esbuild

```js
import { vscodeTaskPlugin } from '@sherluok/vscode-problem-matcher/esbuild';

esbuild.build({
  plugins: [
    vscodeTaskPlugin(),
  ],
});
```

### Rollup

```js
import { vscodeTaskPlugin } from '@sherluok/vscode-problem-matcher/rollup';

rollup.rollup({
  plugins: [
    vscodeTaskPlugin(),
  ],
});
```

For multiple Rollup config, `vscodeTaskPlugin()` will print to console multiple times each build. In this case, use `SharedVscodeTaskPluginFactory`, it will only print one time each build.

```js
import { SharedVscodeTaskPluginFactory } from '@sherluok/vscode-problem-matcher/rollup';

const vscodeTask = new SharedVscodeTaskPluginFactory();

rollup.watch([
  {
    plugins: [
      vscodeTask.buildPlugin(),
    ],
    output: [
      {
        format: 'cjs',
        entryFileNames: '[name].cjs',
        plugins: [vscodeTask.outputPlugin()],
      },
      {
        format: 'esm',
        entryFileNames: '[name].mjs',
        plugins: [vscodeTask.outputPlugin()],
      },
    ],
  },
  {
    plugins: [
      dts(),
      vscodeTask.buildPlugin(),
    ],
    output: [
      {
        format: 'esm',
        entryFileNames: '[name].d.ts',
        plugins: [vscodeTask.outputPlugin()],
      },
    ],
  }
]);
```
npm package: @sherlyrahma/styled-sherly-ds
Description: Reusable UI components for Next.js using styled-components
Latest version: 1.0.3

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
npm package: @sherotree/figma.css
Description: A CSS library for Figma Semantic Color Tokens
Latest version: 1.0.1

# figma.css

> A CSS library for [Figma Semantic Color Tokens](https://figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens) that converts them to CSS variables.

[![GitHub Workflow Status][github-actions-image]][github-actions-url]
[![codecov][codecov-image]][codecov-url]

[![npm][npm-image]][npm-url] [![license][license-image]][license-url]

## Features

- 🚀Convert Figma color tokens to CSS variables
- 💄 Support for light and dark themes
- 🍱 Easy to integrate with any CSS-in-JS library

## Usage

### Step1: Installation

```sh
npm install --save @sherotree/figma.css
```

### Step2: Importing the Library

Next, you need to import the library into your JavaScript or TypeScript file:

````sh

```js
import "@sherotree/figma.css";
````

This will make the CSS variables available in your project.

### Step3: Using the CSS Variables

You can now use the CSS variables in your CSS files. Here's an example:

```css
.my-element {
  background-color: var(--figma-color-bg);
  color: var(--figma-color-text-brand);
}
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](LICENSE.md)

[license-image]: https://img.shields.io/npm/l/@sherotree/figma.css.svg?style=flat-square
[license-url]: LICENSE.md
[npm-image]: https://img.shields.io/npm/v/@sherotree/figma.css.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@sherotree/figma.css