open-index/open-npm huggingface dataset:
npm package: @merged/react-solid
Description: use solid-js Components inside react
Author: Torsten Blindert
Latest version: 1.0.1

# @merged/react-solid

A way to use Solid components inside React

Also this package comes with a configured [vite](https://www.npmjs.com/package/vite) plugin, that uses [vite-plugin-solid](https://www.npmjs.com/package/vite-plugin-solid)
internally but can be restricted to a folder / pattern, so that React and Solid can life in the same codebase.

## Limitation

* Solid component children will be wrapped in an extra `<div />` by default (can be configured via `childrenContainer` prop)

## Example 

*App.tsx (Solid)*
```tsx
import type { Component } from 'solid-js'

interface AppProps {
  onClick: (event: MouseEvent) => void
}

export const App: Component = ({ onClick, children }) => (
  <div>
    <button type="button" onClick={onClick}>Click me!</button>
    <p>
      {children}
    </p>
  </div>
)
```

*main.tsx (React)*
```jsx
import React from 'react'
import { Solid } from '@merged/react-solid'
import { App } from './App.tsx' // this is a Solid component

export const ReactComponent = () => {
  const handleClick = (event: MouseEvent) => {
    console.log('clicked!')
  }

  return (
    <Solid
        component={App}
        onClick={handleClick}
    >
      <span>I'm a child!</span>
    </Solid>
  )
}
```

## Using the vite plugin

Lets assume, we have all our solid Components in the folder `src/solid`:

*vite.config.ts*
```ts
import { defineConfig } from "vite";
import jsxRefresh from "@vitejs/plugin-react-refresh"
import { narrowSolidPlugin } from "react-solid-bridge/plugin"

export default defineConfig({
  plugins: [narrowSolidPlugin({ include: /\/src\/solid/ }), jsxRefresh({exclude: /\/src\/solid\//})],
});
```

That way, all *.tsx files inside `src/solid` will be handled by the solid plugin, while everything else will still be handled by react.

## Bonus tip: Telling vscode how to handle both react and solid with typescript

Configure your `tsconfig.json` like for every other react propect.

In `src/solid` place another `tsconfig.json` that looks someting like this:

*tsconfig.json*
```json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
  }
}
```
npm package: @mergehez/barke
Description: an automated cli tool for deployment or anything you want!
Author: mergehez
Latest version: 0.1.1

[![NPM Version](https://img.shields.io/npm/v/%40mergehez%2Fbarke)](https://www.npmjs.com/package/@mergehez/barke)
![NPM Downloads](https://img.shields.io/npm/d18m/%40mergehez%2Fbarke)



# Barke

An automation utilities library and cli tool.

I built it for myself but now we are using it in our company as well. It is usefull for deployment. It has some predefined methods like "findNewFiles". This example method finds files inside your remote folder, compares them with the local ones and gives you a list of modified files. You can then use the predefined method "uploadFiles" to upload this files to the server. 

For all available predefined methods check the code.

The library also has a cli command: "barke", which parses your barke.yml file and executes the steps defined in it. see the example: [barke.laravel.yml](./yaml/barke.laravel.yml)
You can run `npx barke` in the directory where yout barke.yml file is. The script will run from that directory. Or you can specify the config file using the '--config' argument like this: `npx barke --config='barke.prod.yml'`


# Installation
```bash
bun i -g @mergehez/barke
```
*or with any other package manager like 'npm'*:
```bash
npm i -g @mergehez/barke
```

# CLI usage
```bash
bunx barke
```
*or with any other package runner like 'npx'*:
```bash
npx barke
```

When running `barke` without arguments, it looks for the config file named `barke.yml`. If you want to execute it using another config file, you can use the `--config` argument. This is useful for separating deployments to your staging and production enviroments.

```bash
bunx barke --config='barke.staging.yml'
```

## Examples

This one is using SSH and some built-in laravel methods
![](./doc/barke-ssh.png)

This one uses FTP to deploy the site. Maybe they don't have SSH-Access, but FTP...
![](./doc/barke-ftp.png)

# Library usage (Example)

```typescript
import { useExecuter } from "./src/index.ts";

const executer = useExecuter({
    targetOS: 'windows',
    sourceBasePath: './bin/publish',
    targetBasePath: 'C:/inetpub/wwwroot/mysite',
});

const sshConn = await executer.sshConnect({
    host: process.env.WIN_SERVER_HOST,
    username: process.env.WIN_SSH_USERNAME,
    password: process.env.WIN_SSH_PASSWORD,
    port: parseInt(process.env.WIN_SSH_PORT),
});
const iis = executer.useIISHelpers(sshConn);

// STEPS:
executer.exec({
    command: 'dotnet publish -c Staging -r win-x86 -f net9.0 -o "./bin/publish"',
    message: 'Building project...',
})
const newFiles = await sshConn.findNewFiles({
    ignorePatterns: [
        '/toIgnore',
        '*.txt',
    ],
    ignoreFn: (path, stats) => {
        return !stats.isDirectory() && !path.includes('/');
    }
});

const zip = executer.compressFiles(newFiles, [
    'MailTemplates', // print like 'MailTemplates/**'
]);

await sshConn.uploadFile(zip.path);
iis.stopSite('mysite', 'mysite');
await zip.unzipOnServer(sshConn);
await zip.deleteOnServer(sshConn);
iis.startSite('mysite', 'mysite');
zip.deleteLocally();

sshConn.dispose();
executer.finish();
```
npm package: @mergehez/cli
Description: personal productivity tools for laravel/vue/.net development!
Author: mergehez
Latest version: 0.0.61


##  Install

```bash
npm i --global @mergehez/cli

# yarn 
yarn global add @mergehez/cli

# pnpm 
pnpm add -g @mergehez/cli
```

## Command Docs

- [ftp-deploy](docs/ftp-deploy.md)
- [git-switch](docs/git-switch.md)
- [img-resize](docs/img-resize.md)
- [rename](docs/rename.md)
- [phpmin](docs/phpmin.md)

## License

[MIT](./LICENSE) License &copy; 2023-PRESENT [Mazlum Ozdogan](https://github.com/mergehez)
npm package: @mergehez/vue-color-picker
Description: a lightweight vue 3 color picker component
Author: mergehez
Latest version: 0.0.5

[![NPM Version](https://img.shields.io/npm/v/%40mergehez%2Fvue-color-picker)](https://www.npmjs.com/package/@mergehez/vue-color-picker)

# Lightweight Vue Color Picker Component

Since all color pickers I found were too large or too complex, I decided to create my own.

The bundle size of the component is **9.6 KB** (minified) and **3.9 KB** (gzipped).

### [live demo](https://color-picker.mergesoft.dev/)

## Installation

```bash
npm install @mergehez/vue-color-picker
```
```bash
bun install @mergehez/vue-color-picker
```
```bash
pnpm install @mergehez/vue-color-picker
```

## Usage

```vue
<script setup>
  import ColorPicker from '@mergehez/vue-color-picker';
  import '@mergehez/vue-color-picker/styles.css';

  const color = ref('#ff0000');
</script>
<template>
  <div>
    <ColorPicker v-model="color" />
  </div>
</template>
```

> [!NOTE]
> Go to [ColorPicker.vue](https://github.com/mergehez/vue-color-picker/blob/main/src/components/ColorPicker.vue) for available props.
npm package: @mergehez/vue-emoji-picker
Description: A lightweight vue 3 emoji picker component
Author: mergehez
Latest version: 0.0.1

[![NPM Version](https://img.shields.io/npm/v/%40mergehez%2Fvue-emoji-picker)](https://www.npmjs.com/package/@mergehez/vue-emoji-picker)

# Lightweight Vue Emoji Picker Component

This repository is a fork of [serebrov/emoji-mart-vue](https://github.com/serebrov/emoji-mart-vue) with the following changes:

- complete rewrite in TypeScript
- used Vue 3 `<script setup>` with Composition API and TypeScript
- used composables and objects instead of classes
- used Vite for development
- removed unnecessary dependencies. The single dependency is `vue.
- optimized for bundle size (from [47 KB](https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/dist/emoji-mart.js) to **33 KB**)
- optimized JSON files (e.g. twitter.json is now **480 KB** instead of [754 KB](https://github.com/serebrov/emoji-mart-vue/blob/1db68aeff40f8df4db791715d3be1361bf3960b7/data/twitter.json))
- included only one emoji set (twemoji), which is the most popular. To reduce the total bundle size. You can easily download other sets from [data](htps://github.com/mergehez/vue-emoji-picker/tree/main/public/data) folder.
- improved keyboard navigation

## Installation

```bash
npm install @mergehez/vue-emoji-picker
```

```bash
bun install @mergehez/vue-emoji-picker
```

## Simple Usage

```vue
<script setup>
  import EmojiPicker, {useEmojiIndex} from '@mergehez/vue-emoji-picker';
  import emojiSet from '@mergehez/vue-emoji-picker/emoji-set.json';
  import '@mergehez/vue-emoji-picker/styles.css';

  const emojiIndex = useEmojiIndex(emojiSet);
  const emoji = ref('😀');
</script>

<template>
  <EmojiPicker v-model="emoji" :data="emojiIndex" />
</template>
npm package: @mergestat/blocks
Description: Set of UI components for MergeStat project
Latest version: 1.5.80

# MergeStat Blocks Library

MergeStat Blocks is a set of React components and hooks used to build pages MergeStat project.

## Setup

Instal the package by run command bellow

```sh
npm i @mergestat/blocks
```

import css assets into top level of component project.

```js
import '@mergestat/blocks/styles/main.css'
```

## How to use the Blocks

If you want to use components from the Blocks, check the [Storybook documentation](https://624b441a141307004a094f09-iskoqummxn.chromatic.com/)
npm package: @mergestat/icons
Description: Set of Icon for MergeStat project
Latest version: 1.2.18

# MergeStat UI Icon Library

MergeStat UI Icon is a set of React components and hooks used to build pages MergeStat project.

## Setup

Instal the package by run this command:

```sh
npm i @mergestat/icons
```

import css assets into top level of component project.

```js
import '@mergestat/icons/styles/main.css'
```

import the icon like other common package. example.

```js
import { Github } form '@mergestat/icons'

export const Example = () => (
  <div>
    <Github />
  <div>
)
```

## Available Icons

Check this docs to see the available icons [Storybook documentation]()