open-index/open-npm huggingface dataset:
npm package: @sayll/canvas_x
Description: canvas绘制工具库
Latest version: 0.0.6

# canvas_x
canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。
> 默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。

## 使用方法

### npm 下载使用
```
npm i -S @sayll/canvas_x
// js 片段
import canvas_x from '@sayll/canvas_x'
// TODO
canvas_x.makeImage({...})
```

### 直接引用
可直接通过script标签引入`lib/canvas_x.js`，也可当第三方模块引入。
> 通过script引入，可通过全局变量`canvas_x`直接使用。详情可见demo。

![预览](./demo/assets/doc.png "预览")

## 接口
|函数|描述|
|----|----|
|[makeImage](#makeImage)(options, ...)|绘制一个图片|
|[renderEditor](#renderEditor)(container, options, callback)|创建编辑节点DOM| 

## makeImage
高阶合成图片
> 可以接受三个类型：图片，文字，二维码

|参数|类型|描述|
|---|---|---|
|options|object|[MakeImageOptions](#MakeImageOptions)（详情请见，核心配置项）|
|callback|function|回调参数：(error?: string, data?: string) => void|

## renderEditor
生成编辑界面
> 可以接受三个类型：图片，文字，二维码

|参数|类型|描述|
|---|---|---|
|container|HTMLElement|一个容器元素节点|
|options|object|[MakeImageOptions](#MakeImageOptions)（详情请见，核心配置项|
|callback|function|回调参数：(base64: string) => void|

## MakeImageOptions
绘图核心配置项

|参数|类型|描述|
|---|---|---|
|parts|array|各组成部分([ImageEntry](#ImageEntry) , [TextEntry](#TextEntry) , [QRCodeEntry](#QRCodeEntry)): 详细见基础类型参数|
|width|number|最终图片宽度，建议为显示容器的二倍|
|height|number|最终图片高度，建议为显示容器的二倍|
|background|string|画布底色|
|buttonText|string|编辑模式下，绘制画布按钮文案：null时，隐藏按钮。默认：'绘制画布'|
|resetButtonText|string|编辑模式下，重新编辑按钮文案：为空或null时，隐藏按钮。默认：'重新编辑'|
|compress|number|最终图片压缩比，默认0.8|

## 基础类型参数

### ImageEntry 
表示一个图片部分。

|参数|类型|描述|
|---|---|---|
|type|string|指定为图片类型：'image'|
|url|string|要绘制的图片地址，可以是 http: 或 data: 格式|
|radius|number|半径率，0-1之间|
|padding|number|内边距。通过background控制边框颜色，默认为'#fff'|
|background|string|默认为'#fff'|
|width|number|绘制的宽度|
|height|number|绘制的高度|
|editable|boolean|能否编辑，编辑模式下使用|
|selectImage|function|如需替换自己的资源为替换图片，可使用此参数； 参数返回一个 callback 接受你替换的图片 (base64或url) 注：当 editable 设置为 true 时，selectImage 将阻止默认 input[type=file]选取图片的默认行为|
|x|number|相对于左上角的水平坐标|
|y|number|相对于左上角的垂直坐标|
|opacity|number|透明度。0-1 之间|
|clipOptions|object|详细见[ClipOptions](#ClipOptions)参数|

#### ClipOptions
图片剪切所需参数

|参数|类型|描述|
|---|---|---|
|x|number|相对于左上角的水平坐标|
|y|number|相对于左上角的垂直坐标|
|zoom|boolean|等比缩放图片|
|align|string|目前只支持'center';图片正中间；|

### TextEntry
表示一个文本部分。

|参数|类型|描述|
|---|---|---|
|type|string|指定为文本类型：'text'|
|text|string|要绘制的内容。使用 \n 换行|
|size|string|字体大小|
|color|string|字体颜色|
|bold|boolean|是否加粗|
|textAlign|string|文本对齐方式，"center"、"left"、"right"，根据基准点（x,y）水平对齐。默认：'left'|
|lineAlign|string|文本对齐方式，"top"、"middle"、"bottom"，根据基准点（x,y）垂直对齐。默认：'top'|
|editable|boolean|能否编辑，编辑模式下使用|
|x|number|相对于左上角的水平坐标|
|y|number|相对于左上角的垂直坐标|
|opacity|number|透明度。0-1 之间|

### QRCodeEntry
表示一个二维码部分

|参数|类型|描述|
|---|---|---|
|type|string|指定为二维码类型：'qrcode'|
|text|string|要绘制的内容。网址需要使用 http: 开头|
|padding|number|内边距。通过background控制边框颜色，默认为'#fff'|
|background|string|默认为'#fff'|
|level|number|容错等级。1-5，数值越大容错越高|
|logo|string|二维码logo的地址,可以是 http: 或 data: 格式|
|width|number|绘制的宽度|
|height|number|绘制的高度|
|x|number|相对于左上角的水平坐标|
|y|number|相对于左上角的垂直坐标|
|opacity|number|透明度。0-1 之间|

## 开发命令
|`npm run <script>`|note|
|------------------|-----------|
|`build`|打包文件|
|`build:dev`|监听修改|
|`browse`|启动server|
|`start`|start 整个项目server服务|
npm package: @saylo/react
Description: Saylo Feedback Widget is a React library for embedding a customizable feedback widget into your website or application. It allows users to provide feedback, report issues, or suggest ideas effortlessly. Built with React, the widget integrates seamlessly i
Latest version: 1.0.7

# Saylo Feedback Widget

Saylo Feedback Widget is a React library for embedding a customizable feedback widget into your website or application. It allows users to provide feedback, report issues, or suggest ideas effortlessly. Built with React, the widget integrates seamlessly into your frontend application.

---

## Features

- **Customizable UI:** Adapt the widget's look and feel to match your brand.
- **Multiple Feedback Types:** Supports "Issue", "Idea", and "Other" feedback categories.
- **File Attachments:** Users can attach files to their feedback.
- **Client-Side Rendering:** Designed to work seamlessly with React frameworks like Vite and Next.js.
- **API Integration:** Fetch widget configuration and submit feedback via API.

---

## Installation

### Using npm:

```bash
npm install @saylo/react
```

### Using pnpm:

```bash
pnpm add @saylo/react
```

---

## Usage

To use the Saylo Feedback Widget in your application, follow these steps:

### 1. Import and Render the Component

Ensure your file starts with the `"use client"` directive if you're using Next.js.

```tsx
"use client";

import SayloFeedback from "@saylo/react";

export default function App() {
  return (
      <SayloFeedback apiKey="your-api-key-here" />
  );
}
```

### 2. Provide Your API Key

Replace `"your-api-key-here"` with your actual API key obtained from [Saylo.io](https://www.saylo.io).

---

## Widget Trigger Customization

If you're using our Floating Button, no additional elements are required. 

For a more customized approach, add the `data-saylo-widget-trigger` attribute to any HTML element that should trigger the widget when clicked:

```html
<button data-saylo-widget-trigger>
  Give Feedback
</button>
```

---

## Props

### `SayloFeedback`

| Prop     | Type   | Required | Description                                                                 |
|----------|--------|----------|-----------------------------------------------------------------------------|
| `apiKey` | string | Yes      | Your unique API key for fetching widget configuration and submitting data. |

---

## Customization

The widget can be customized via the Saylo API. The following options can be configured dynamically:

| Property          | Description                                      |
|-------------------|--------------------------------------------------|
| `button_position` | Position of the widget button (e.g., `bottom-left`, `bottom-right`). |
| `shape`           | Shape of the button (`rounded` or `square`).     |
| `theme`           | Theme of the widget (`light` or `dark`).         |

Customization is managed in your Saylo dashboard, and changes are automatically fetched via the API.

---
npm package: @saymondamasio/eslint-config
Description: My config eslint and prettier.
Author: Saymon Damásio
Latest version: 1.2.2

# Rocketseat ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

### React (with Next.js)

Install dependencies:
```
npm i -D eslint @rocketseat/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": [
    "@rocketseat/eslint-config/next", 
    "next/core-web-vitals"
  ]
}
```

### React (without Next.js)

Install dependencies:
```
npm i -D eslint @rocketseat/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@rocketseat/eslint-config/react"
}
```

### Node.js

Install dependencies:
```
npm i -D eslint @rocketseat/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@rocketseat/eslint-config/node"
}
```