open-index/open-npm huggingface dataset:
npm package: @medamine7/react-shadow-dom-retarget-events
Description: Retargets event in a shadow root to react
Author: Lukas Bombach
Latest version: 1.0.0

# react-shadow-dom-retarget-events

## What it does

Fixes events for react components rendered in a `shadow dom`.

## Why

When you render a react component inside `shadow dom` events will not be dispatched to react. 
I.e. when a user clicks in your react component nothing happens. This happens (or does not happen) with any events.
 
A bug is filed at [#10422](https://github.com/facebook/react/issues/10422).

## How to fix it

Luckily someone wrote [a workaround on Stack Overflow](https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom).
It works by adding vanilla JS event listeners and dispatching events to React.

This repo is based on his answer in an npm module.

## Installation

`yarn add react-shadow-dom-retarget-events` or

`npm install react-shadow-dom-retarget-events --save`

## Usage

import `retargetEvents` and call it with the `shadowRoot`:

```jsx
import React from 'react';
import retargetEvents from 'react-shadow-dom-retarget-events';

class App extends React.Component {
  render() {
  	return <div onClick={() => alert('I have been clicked')}>Click me</div>;
  }
}

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      const shadowRoot = this.createShadowRoot();
      shadowRoot.appendChild(mountPoint);
      ReactDOM.render(<App/>, mountPoint);
      retargetEvents(shadowRoot);
    }
  }
});
document.registerElement('my-custom-element', {prototype: proto});
```
## History

* v1.08 Support for cancelBubble and FireFox's composedPath
* v1.07 Support for onBlur
* v1.06 Support von React 16, Added Events, Code Cleanup
* v1.05 Initial commits and basic functionality
npm package: @medanat/lint
Description: Opinionated eslint configuration
Author: Yazan Medanat
Latest version: 3.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# eslint-config-medanat

## Installation

```
npm i --save-dev eslint @medanat/eslint-config
```

## Usage

In your `.eslintrc`:

### For plain JS environments
```
{
  "extends": ["@medanat"]
}
```

### For React environments
```
npm i --save-dev eslint @medanat/eslint-config @medanat/eslint-config-react
```

```
{
  "extends": ["@medanat", "@medanat/react"]
}
```

### For Flow environments
```
npm i --save-dev eslint @medanat/eslint-config @medanat/eslint-config-flow
```

```
{
  "extends": ["@medanat", "@medanat/flow"]
}
```

### All together now
```
npm i --save-dev eslint @medanat/eslint-config @medanat/eslint-config-flow @medanat/eslint-config-react
```

```
{
  "extends": ["@medanat", "@medanat/react", "@medanat/flow"]
}
```
npm package: @medanosol/package-usage-check
Description: A command-line utility that helps you identify and list unused npm packages in your project's source code.
Author: David Díaz
Latest version: 0.0.4

# @medanosol/package-usage-check

`@medanosol/package-usage-check` is a command-line utility that helps you identify and list unused npm packages in your project's source code.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [How it Works](#how-it-works)

## Installation

Before using `@medanosol/package-usage-check`, you need to install it globally via npm:

```bash
npm install -g @medanosol/package-usage-check
```

or

```bash
npx @medanosol/package-usage-check
```

## Usage

To check for unused npm packages in your project, follow these steps:

1. Open your terminal.
2. Navigate to the root directory of your project.
3. Run the following command:

```bash
npx @medanosol/package-usage-check
```

or

```bash
npx @medanosol/package-usage-check  #(If you haven't installed it globally)
```

4. The tool will prompt you to enter the source directory of your project. The default value is "src," but you can change it to the path where your source code is located.
5. Wait for the tool to analyze your source code. It will identify and list any unused npm packages.
6. If any unused packages are found, the tool will display them in a table format, listing the unused package names.
7. If no unused packages are found, the tool will display a message indicating that there are no unused packages.

## How it Works

The `@medanosol/package-usage-check` utility works by analyzing your project's source code to find
import statements of npm packages in your .js, .ts, .tsx or .jsx files. It checks the
dependencies specified in your project's package.json and identifies which packages are not
used in your codebase.

## Command Line Options

- `--include-dev`: Include development dependencies when checking for unused packages. By default, only regular dependencies are considered.
npm package: @medanosol/react-feedback-report
Description: A small React package that lets you to take a screenshot of your website and report issues with that specific part.
Latest version: 0.0.3

# React Capture Feedback Component

This is a React component that allows users to capture a section of a website, provide feedback, and report bugs. The captured section is displayed in a frame that can be resized and moved around. Users can enter their feedback in a text area and submit it along with the captured image, the date and the URL.

## Installation

You can install the package from npm using the following command:

```bash
npm i @medanosol/react-feedback-report
```

```base
yarn add @medanosol/react-feedback-report
```

## Usage

To use the component, follow these steps:

1. Import the component into your React application:

```javascript
import { FeedbackReporter } from "@medanosol/react-feedback-report";
```

2. Render the component in your application, passing the necessary props:

```tsx
const App = () => {
  const handleCapture = (captureFeedback) => {
    // Handle the captured feedback data
    console.log(captureFeedback);
  };

  return (
    <div>
      <FeedbackReporter onCapture={handleCapture} />
    </div>
  );
};

export default App;
```

3. Customize the trigger button and feedback input appearance by providing appropriate classes. You can use the feedbackInputClassName prop to add custom classes to the feedback input field.

```tsx
<FeedbackReporter
  trigger={<button className="custom-trigger-button">Capture Feedback</button>}
  feedbackInputClassName="custom-feedback-input"
/>
```

## Props

The component accepts the following props:

```ts
interface CaptureFeedback {
  image: string;
  feedback: string;
  date: Date;
  path: string;
}

interface Props {
  trigger: React.ReactElement<
    React.DetailedHTMLProps<
      React.ButtonHTMLAttributes<HTMLButtonElement>,
      HTMLButtonElement
    >
  >;
  onCapture: (captureFeedback: CaptureFeedback) => void;
  initialPosition?: {
    width: string;
    height: string;
    x: number;
    y: number;
  };
  inputClassName?: string;
  inputPlaceholder?: string;
  buttonClassName?: string;
  captureSectionClassName?: string;
  buttonIcon?: React.ReactNode;
}
```

## Example

Here's an example of how you can use the component:

```tsx
import { FeedbackReporter } from "@medanosol/react-feedback-report";

const App = () => {
  const handleCapture = (FeedbackReporter) => {
    console.log(FeedbackReporter);
  };

  return (
    <div>
      <FeedbackReporter
        trigger={<button>Capture Feedback</button>}
        onCapture={handleCapture}
        feedbackInputClassName="custom-feedback-input"
      />
    </div>
  );
};

export default App;
```
npm package: @medanosol/translation-tool
Description: @medanosol/translation-tool is a tool that allows you to translate your i18n files in a simple and fast way. You can manually translate the files or use the Deepl API to translate them automatically.
Author: Medano Solution S.L.
Latest version: 0.0.8

<div align="center"><img src="https://github.com/medanosol/translation-tool/assets/71669730/fa23f864-de8f-4de1-8c93-1d341b87078e" alt="translation-tool cover"/></div>

<div align="center"><strong>@medanosol/translation-tool</strong></div>
<div align="center">The easiest way to translate your i18n files<br /></div>
<br />
<div align="center">
<a href="https://github.com/medanosol/translation-tool">Website (Coming Soon)</a> 
<span> · </span>
<a href="https://github.com/medanosol/translation-tool">GitHub</a> 
</div>

## Introduction

translation-tool is a tool that allows you to translate your i18n files in a simple and fast way. You can manually translate the files or use the Deepl API to translate them automatically.

## Why

The idea of this tool is to facilitate the translation of i18n files, since it is a tedious task to do it manually. As devs, we are always looking for ways to automate tasks and this is one of them.

## Install

Install the package using your favorite package manager.

#### With yarn

```sh
yarn add @medanosol/translation-tool --dev
```

#### With npm

```sh
npm install @medanosol/translation-tool -D
```

## Getting started

Once you have installed the package, add the following command to your package.json file.

```json
"scripts": {
  "translate": "translation-tool"
}
```

Then, when you run the command `yarn translate` or `npm run translate`, the tool will start at port 3000 by default. You can change the port by adding the following command to your package.json file.

```json
"scripts": {
  "translate": "translation-tool --port 3001"
}
```

## Setting up the Deepl API

To use the Deepl API, you need to create an account on their website and get an API key. You can create an account here: [Deepl API](https://www.deepl.com/pro.html?cta=header-prices/). Their free plan allows you to translate 500,000 characters per month, so for most projects it will be more than enough.

## How to use

You just need to add the API key before you start trasnlating your files. If you want to skip doing this every time you open the tool, we added a way to save your API key in the browser's local storage. To do this, just click on the "Save API Key" button and the next time you open the tool, it will automatically load your API key. It's encrypted, so don't worry about security. If you still don't feel safe, you can always delete it from the local storage and add it manually every time you open the tool.

![demo-image](https://github.com/medanosol/translation-tool/assets/47543076/9526b559-0146-4e75-8d45-9b05537eaad6)

## Supported languages

Manually, you can translate your i18n files to any language you want. But if you want to use the Deepl API, you can only translate languages listed on the Deepl API Documentation: [Deepl API Docs](https://www.deepl.com/docs-api/translate-text/translate-text/)

## License

MIT License
npm package: @medapps/react-native-in-app-browser
Description: Wraps react-native-webview in a modal for in-app browsing.
Author: Mike James
Latest version: 1.0.10

# react-native-in-app-browser
Wraps react-native-webview in a modal for in-app browsing.

`yarn add @medapps/react-native-in-app-browser`

Cookies cannot be set with react-native-inappbrowser-reborn. This component was created to replace it.

set cookies before a url has been opened using: https://github.com/react-native-cookies/cookies

# API

This component wraps [WebView](https://github.com/react-native-webview/react-native-webview/blob/HEAD/docs/Reference.md), props are passed down to this component

### Non React Context

```js
import {InAppBrowserProvider} from '@medapps/react-native-in-app-browser';

function MyApp() {
  return (
    <InAppBrowserProvider
      ErrorState={CustomErrorStateComponent} // optional ({error, onGoBack}) =>
      LoadingComponent={CustomLoadingComponent} // optional
      theme={customTheme} // optional {color, backgroundColor}
    >
      <Example />
    </InAppBrowserProvider>
  );
}

function Example() {
  const {open, close, url, isOpen} = useInAppBrowser();
  return <Text onPress={() => open({url: 'https://med.app'})}>Open Url!</Text>;
}
```

### React Context

```js
import {useInAppBrowser} from '@medapps/react-native-in-app-browser';

function ExampleComponent() {
  const {open, close, url, isOpen} = useInAppBrowser();

  return (
    <Touchable onPress={() => open({url})}>
      <Text>Open!</Text>
    </Touchable>
  );
}
```


# Contributing


 `git clone https://github.com/medappsau/react-native-in-app-browser`
 
 `yarn`
 
 `yarn setup:example`
 
 `open ios/example.xcworkspace`
 
 press the play button
 
 before committing to master run: 
 
 `yarn setup:main`
 
 then commit and submit a PR :tada: