open-index/open-npm huggingface dataset:
npm package: @mg901/react-slot-fill
Description: ![Travis (.org) branch](https://img.shields.io/travis/mg901/react-slot-fill/master.svg?style=flat-square)
Author: Maxim Alyoshin
Latest version: 1.0.0

# React Slot Fill

![Travis (.org) branch](https://img.shields.io/travis/mg901/react-slot-fill/master.svg?style=flat-square)

## Install

You can install this library via `npm` or `yarn`.

**npm**

```bash
npm i @mg901/react-slot-fill
```

**yarn**

```bash
yarn add @mg901/react-slot-fill
```

## Use case

If you need to render a component from somepart of the DOM tree, but it needs to be visible in another part of the tree, this library solves it.

## Usage

The usage is really simple:

`toolbar.js`

```js
import React from 'react';
import { Slot, Fill } from '@mg901/react-slot-fill';

const Toolbar = (props) => (
  <div>
    <Slot name="Toolbar.Item" />
  </div>
);

export default Toolbar;

// single Fill
Toolbar.Item = (props) => (
  <Fill name="Toolbar.Item">
    <button>{props.label}</button>
  </Fill>
);

// or multiple Fill
Toolbar.Item = (props) => (
  <>
    <Fill name="Toolbar.Item">
      <button>{props.label}</button>
    </Fill>
    <Fill name="Toolbar.Item">
      <button>{props.label}</button>
    </Fill>
    <Fill name="Toolbar.Item">
      <button>{props.label}</button>
    </Fill>
  </>
);
```

`feature.js`

```js
import React from 'react';
import Toolbar from './Toolbar';

const Feature = () => <Toolbar.Item label="My Feature!" />;
```

`app.js`

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from '@mg901/react-slot-fill';

import Toolbar from './Toolbar';
import Feature from './Feature';

const App = () => (
  <Provider>
    <Toolbar />
    <Feature />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));
```

### Props

`Slot` and `Fill` components use the same props, which are the following ones:

| Properties | Types  | Default Value | Description                           |
| ---------- | ------ | ------------- | ------------------------------------- |
| name       | string | none          | Determines the name of the Slot/Fill. |

## License

MIT License

Copyright (c) 2018-2019 [Maxim Alyoshin](https://github.com/mg901).

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/mg901/react-slot-fill/blob/master/LICENCE) file for details.
npm package: @mg98/condition-js
Description: Filter JSONs using SQL-like conditional expression syntax!
Author: Marcel Gregoriadis
Latest version: 0.3.2

<h1 align="center">condition.js</h1>
<p align="center">
    Filter JSONs using SQL-like syntax!
</p>

<p align="center">
  <a href="https://github.com/mg98/condition-js/actions/workflows/test.yml">
    <img src="https://github.com/mg98/condition-js/actions/workflows/test.yml/badge.svg">
  </a>
  <a href="https://codecov.io/gh/mg98/condition-js">
    <img src="https://codecov.io/gh/mg98/condition-js/branch/main/graph/badge.svg?token=RNG38NX4WY">
  </a>
  <a href="https://deepscan.io/dashboard#view=project&tid=17510&pid=20859&bid=581033">
    <img src="https://deepscan.io/api/teams/17510/projects/20859/branches/581033/badge/grade.svg">
  </a>
  <a href="https://www.npmjs.com/package/@mg98/condition-js">
    <img src="https://img.shields.io/npm/v/@mg98/condition-js">
  </a>
  <a href="./LICENSE">
    <img src="https://img.shields.io/github/license/mg98/condition-js">
  </a>
</p>

<hr>

_condition.js_ is a lightweight JavaScript library that enables you to use a comprehensible string syntax to run complex filter operations on a set of JSONs (or only one for that matter).
The syntax is strongly inspired by the syntax for the expression of conditions in SQL and is meant to be simple and intuitive, even for non-technical people. [See a demo!](https://condition.js.org)

## Install

```
npm i @mg98/condition-js
```

## Example

```js
import { matchCondition } from 'condition-js';

const clients = [
    {
        name: 'Batu',
        age: 17,
        country: 'Turkey'
    },
    {
        name: 'Hai Dang',
        age: 24,
        country: 'Vietnam'
    },
    {
        name: 'Miles',
        age: 16,
        country: 'USA'
    },
    {
        name: 'Philipp',
        age: 58,
        country: 'Germany'
    }
]

const alcoholClients = data.filter(client => matchCondition(client, 
  "(age >= 18 and country in ('Germany', 'Turkey', 'Vietnam') or age >= 21 and country = 'USA') and country != 'Arabia'"
));

console.log(alcoholClients);
// [
//     {
//         name: 'Hai Dang',
//         age: 24,
//         country: 'Vietnam'
//     },
//     {
//         name: 'Philipp',
//         age: 58,
//         country: 'Germany'
//     }
// ]
```

## Features

The goal of _condition.js_ is to create a language that is not only a powerful tool, but also a convenient and fault-tolerant one.

✅ Basic comparison operators `=`, `!=`, `>`, `<`, `>=`, `<=`

✅ Operators `in` and `not in` in combination with array values (`('Apple', 'Peach', 'Banana')`)

✅ Supports value types string and number (including floating values)

✅ Supports operations on arrays (e.g. `hobbies > 3` is valid if `hobbies` in an array of length > 3)

✅ Logical operators `and` and `or` to combine expressions

✅ Deep property access (e.g. `address.street = 'Elm Str'`)

✅ Nested expressions using parantheses

**Not yet supported...**

❌ Boolean type
npm package: @mg98/filter-js
Description: Filter JSONs using SQL-like conditional expression syntax!
Author: Marcel Gregoriadis
Latest version: 0.4.1

<h1 align="center">filter.js</h1>
<p align="center">
    Filter JSONs using SQL-like syntax!
</p>

<p align="center">
  <a href="https://github.com/mg98/filter-js/actions/workflows/test.yml">
    <img src="https://github.com/mg98/filter-js/actions/workflows/test.yml/badge.svg">
  </a>
  <a href="https://codecov.io/gh/mg98/filter-js">
    <img src="https://codecov.io/gh/mg98/filter-js/branch/main/graph/badge.svg?token=RNG38NX4WY">
  </a>
  <a href="https://deepscan.io/dashboard#view=project&tid=17510&pid=20859&bid=581033">
    <img src="https://deepscan.io/api/teams/17510/projects/20859/branches/581033/badge/grade.svg">
  </a>
  <a href="https://www.npmjs.com/package/@mg98/filter-js">
    <img src="https://img.shields.io/npm/v/@mg98/filter-js">
  </a>
  <a href="./LICENSE">
    <img src="https://img.shields.io/github/license/mg98/filter-js">
  </a>
</p>

<hr>

_filter.js_ is a lightweight JavaScript library that enables you to use a comprehensible string syntax to run complex filter operations on a set of JSONs (or only one for that matter).
The syntax is strongly inspired by the syntax for the expression of conditions in SQL and is meant to be simple and intuitive, even for non-technical people. [See a demo!](https://filter.js.org)

## Install

```
npm i @mg98/filter-js
```

## Example

```js
import { matchCondition } from '@mg98/filter-js';

const clients = [
    {
        name: 'Batu',
        age: 17,
        country: 'Turkey'
    },
    {
        name: 'Hai Dang',
        age: 24,
        country: 'Vietnam'
    },
    {
        name: 'Miles',
        age: 16,
        country: 'USA'
    },
    {
        name: 'Philipp',
        age: 58,
        country: 'Germany'
    }
]

const alcoholClients = data.filter(client => matchCondition(client, 
  "(age >= 18 and country in ('Germany', 'Turkey', 'Vietnam') or age >= 21 and country = 'USA') and country != 'Arabia'"
));

console.log(alcoholClients);
// [
//     {
//         name: 'Hai Dang',
//         age: 24,
//         country: 'Vietnam'
//     },
//     {
//         name: 'Philipp',
//         age: 58,
//         country: 'Germany'
//     }
// ]
```

## Features

The goal of _filter.js_ is to create a language that is not only a powerful tool, but also a convenient and fault-tolerant one.

✅ Basic comparison operators `=`, `!=`, `>`, `<`, `>=`, `<=`

✅ Operators `in` and `not in` in combination with array values (`('Apple', 'Peach', 'Banana')`)

✅ Supports value types string and number (including floating values)

✅ Supports operations on arrays (e.g. `hobbies > 3` is valid if `hobbies` in an array of length > 3)

✅ Logical operators `and` and `or` to combine expressions

✅ Deep property access (e.g. `address.street = 'Elm Str'`)

✅ Nested expressions using parantheses

**Not yet supported...**

❌ Boolean type
npm package: @mgadev/macpaw-ui
Description: Install with npm:
Latest version: 6.3.0

# macpaw-ui

## Installation

Install with npm:

```bash
npm install --save @mgadev/macpaw-ui
```

or with yarn:

```bash
yarn add @mgadev/macpaw-ui
```

And import stylesheets manually:

```jsx
import '@mgadev/macpaw-ui/lib/ui.css';
```

## Adding new Component

- Add Component's JSX and styles to [src/%ComponentName%](/src) directory
- Import Component's JS, styles to [ui.js](/src/ui.js) and [ui.scss](/src/ui.scss) correspondingly
- Add document page in `/pages/%component-name%.mdx`

## Adding new Icons

- All common icons should have size 24x24px and dynamic (not hard-coded) `fill` attribute (so it can be changed / overridden later is CSS or React component)
- Add new SVG file icon to `src/Icons/svg/%name%_icon.svg`
- Run `yarn icons` CLI command

## Requirements

- Node 20+
- npm 7+ (lock file v2)

## Library Release Process

Our library release process is designed to ensure quality, consistency, and proper versioning. The process is broken down into multiple stages to ensure every change is tracked, reviewed, and integrated appropriately.
We use [changesets](https://github.com/changesets/changesets) for version and release management.

### Uploading Changes

Whenever you introduce a new change, run the command:

> You have to do this at least once per branch with some changes.

- The CLI will prompt you with questions regarding your changes. You'll need to specify the nature and level of the changes (options: patch, minor, major).
- After completing the CLI prompts, commit the changes with a commit message similar to `chore: update changesets`.

```bash
npm run changes:add
npm run changes:version
git add . && git commit -m "chore: update changesets"
git push
```

> Generate and upload tag release

```bash
npm run changes:release
git push --tags
```

> Publish

```bash
npm run changes:publish
```

## Host

- run `yarn build`
- serve `out` directory as public