open-index/open-npm huggingface dataset:
npm package: @feuer/react-tabs
Description: This component use compound components concept to create a simple tabs component
Author: yazanaabed
Latest version: 0.1.8

# Demo
- For quick demo please checkout this [storybook](https://feuer-ui.netlify.app/).
- For quick code usage pelase checkout this [codesandbox](https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js)

# React Tabs
Simple React Tabs using the new react ContextAPI to manage changes active tabs or not. And there is no need to add tabs container you just add a tab component.

## Introduction
This project done using ReactJS and normal styling to add a small react-tabs component to your project without a huge library.

## Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

### Yarn
```
yarn add @feuer/react-tabs
```

### Npm
```
npm install @feuer/react-tabs
```

This package also depends on `react`, `tslib` only esm for umd its already included, `react-dom`, `prop-types`. Please make sure you have it installed as well.

## Usage

### [Try it out in the browser](https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js)

```jsx
import React from "react";
import { Tabs } from "@feuer/react-tabs";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const LeftTabs = () => (
  <div style={styles}>
    <Tabs
      activeTab={{
        id: "tab1"
      }}
    >
      <Tabs.Tab id="tab1" title="Tab 1">
        <div style={{ padding: 10 }}>
          This is tab 1
        </div>
      </Tabs.Tab>
      <Tabs.Tab id="tab2" title="Tab 2">
        <div style={{ padding: 10 }}>
          This is tab 2
        </div>
      </Tabs.Tab>
    </Tabs>
  </div>
);
```

## Basic Props
This is the list of props that you should probably know about when using react-tabs.

### Tabs Component Props

```javascript
Tabs.propTypes = {
  activeTab: {
    id: PropTypes.string.isRequired,
  },
  children: PropTypes.arrayOf(PropTypes.node).isRequired,
  tabsProps: {
    style: PropTypes.object,
    className: PropTypes.string
  }
};
```

### Tab Component Props

```javascript
Tab.propTypes = {
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  tabIndex: PropTypes.oneOf([PropTypes.string, PropTypes.number])
};
```

## Contributing

Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). 

## Authors

* **Yazan Aabed**
* See also the list of [contributors](https://github.com/yazaabed/react-tabs/graphs/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
npm package: @feugene/laravel-mix-notifier
Description: Custom Notifications for Laravel Mix
Author: Eugene Fureev
Latest version: 1.0.3

# Custom Notifications for Laravel Mix

![npm](https://img.shields.io/npm/v/@feugene/laravel-mix-notifier?style=flat-square)
![img](./assets/img1.png)


Laravel Mix extension to display notifications from Mix when your project will build.

The package uses webpack-plugin `webpack-notifier`

## Install

```bash
npm install @feugene/laravel-mix-notifier --save-dev
```

## Usage

```javascript
const mix = require('laravel-mix')
require('laravel-mix-notifier')

mix.notify()
mix.notify({
  title: 'Hello!',
  contentImage: 'assets/logo.png',
  version: '12.2.2-dev',
  showVersion: false,
})
```

* `title` - Notification's title. Default: load from your `package.json` from `description` field
* `contentImage` - Image that show in notifications
* `version` - Version. Default: load from your `package.json` from `version` field
* `showVersion` - Show version in the `title`. Default: `true`
npm package: @feugene/mu
Description: Helpful TS utilities without dependencies
Author: Eugene Fureev
Latest version: 5.0.2

![](https://badgen.net/github/tag/efureev/mu)
![CI: µ](https://github.com/efureev/mu/workflows/CI:%20%C2%B5/badge.svg)
[![Build Status](https://travis-ci.org/efureev/mu.svg?branch=master)](https://travis-ci.org/efureev/mu)
[![Maintainability](https://api.codeclimate.com/v1/badges/0279a1deefdae66f9e66/maintainability)](https://codeclimate.com/github/efureev/mu/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/0279a1deefdae66f9e66/test_coverage)](https://codeclimate.com/github/efureev/mu/test_coverage)
[![codecov](https://codecov.io/gh/efureev/mu/branch/master/graph/badge.svg)](https://codecov.io/gh/efureev/mu)
[![codecov](https://codecov.io/gh/efureev/mu/branch/master/graph/badge.svg)](https://codecov.io/gh/efureev/mu)

![](https://badgen.net/github/last-commit/efureev/mu)
![](https://badgen.net/github/dependents-pkg/efureev/mu)
![](https://badgen.net/npm/dependents/@feugene/mu)
![](https://badgen.net/github/commits/efureev/mu)
![](https://badgen.net/badge/ES6%20modules/yes/orange)
![](https://badgen.net/badge/TS/yes/blue)
![](https://badgen.net/npm/dt/@feugene/mu)

# µ

> A modern JavaScript collection of utilities designed for modularity & performance without dependencies.

## Install

`yarn add @feugene/mu`

## Links

- [Documentation](https://efureev.github.io/mu)

## Features

- TypeScript
- Bundles for
  - ES
  - CommonJS
  - UMD
- Simple and lightweight

## Contents

- Common helpers
- Array helpers
- Date helpers
- Format helpers
- Is-like helpers
- Number helpers
- Object helpers
- String helpers
- Structures
- Transform To
- Other Utils
  - Base64
- Etc
npm package: @feugene/request
Description: Request wrapper
Latest version: 0.2.1

# request-wrapper

## Basic usage

Response wrapper with no data-key. All response data is in native `response.data` scope.
It's used to get content of a response. Example: content of a file. 
```js
request({ responseWrapper: { dataKey: null } })
.get('download', { params: { disk, path } })
    .then(response=>{
      console.log(response.data())
    })
```

Response wrapper with data-key. By default, data-key is `data`.
It's used to get data from json response. Example json:
```json
{
  "data": {
    "id": 1,
    "name": "test"
  }
}
```
```js
request().get('list')
.then(response=>{
  console.log(response.data()
)})
```

## Use in package

`<package>/request/index.js`:

```js
const fmApiPath = process.env.VUE_APP_LFM_PATH || 'file-manager'

const wrapRequest = axiosInstance => {
  return axiosInstance.reconfigure(
    instance => {
      instance.config.baseURL += `/${fmApiPath}`
      instance.registerRequestInterceptors(LoadingRequestInterceptor)
      instance.registerResponseInterceptors(LoadingResponseInterceptor, ResponseNoticeInterceptor)
    }
  )
}

const request = config => {
  return wrapRequest(Vue.prototype.$request(config))
}

export default request
```

use package's request in application

`<app>/request/index.js`:

```js
import buildBaseRequest from '@feugene/request'

const basePath = process.env.VUE_APP_BASE_PATH

const request = store => (config = {}) => {
  const headers = {
    ...(isObject(config.headers) ? config.headers : {}),
  }

  const mergedConfig = {
    baseURL: basePath,
    ...config,
    headers,
  }

  mergedConfig.store = store

  return buildBaseRequest(mergedConfig)
}

export default request

```

`<aap>/main.js`

```js
import Vue from 'vue'
import Vuex from 'vuex'
import request from './request'
Vue.use(Vuex)

const store = new Vuex.Store()
Vue.prototype.$request = request(store)
```
npm package: @feugene/request-interceptors
Description: Interceptors for axios
Latest version: 1.0.10

# interceptors for the Axios

## List of request interceptor

- AuthInterceptor

## List of response interceptor

- WrapperInterceptor
- ActionInterceptor

### WrapperInterceptor

Wraps axios-response to `ResponseWrapper` wrapper. Wraps success and error responses.

### ActionInterceptor

Execute some action by attributes from response.
Actions:
- Redirect
- Download file by link
- Blob download

Response must have following structure:

For redirect
```json
{
  "status": {
    "type": "redirect",
    "url": "https://google.com"  
  }
}
```

For download by url
```json
{
  "status": {
    "type": "download",
    "url": "https://google.com/file.pdf",  
    "name": "ExampleFile.pdf"  
  }
}
```
For download blob-file
headers:
```json
{
  "Access-Control-Expose-Headers" : "Content-Disposition",
  "x-filename": "test2.pdf"
}
```

Sample for Server side (Laravel Controler):
```php
return Storage::disk('public')->download(
    $user->avatar,
    "avater.{$ext}",
    [
        'Access-Control-Expose-Headers' => 'Content-Disposition',
        'x-filename'                    => "test2.{$ext}",
    ]
);
```

## Basic usage

```js
import buildRequest from '@feugene/layer-request'

const apiHost = process.env.VUE_APP_API_HOST || ''

export const createRequest = (store, config) => {
  const request = buildRequest({ extra: { store } })

  request.manager.addLayer((cm) => {
    return cm.new({
      requestConfig: {
        headers: {
          ...(isObject(config.headers) ? config.headers : {}),
          'X-Requested-With': 'XMLHttpRequest',
        },
        baseURL: `${apiHost}/api`,
      },
      interceptors: {
        request: [(config) => (rConfig) => {
          console.info(`\t🌐 ${rConfig.baseURL}/${rConfig.url}`)
          return rConfig
        }],
        response: [
          (config) => (response) => {
            console.info(`\t✅ ${response.request.responseURL}`)
            return response
          },
          Interceptor(),
          ActionInterceptorBuild({
            actionAttributeName: 'status',
          }),
        ],
      },
    })
  }, 'api')

  return request
}
```
npm package: @feugene/webpack-plugin-server-push
Description: Create Nginx conf for assets bundle for Server Push (http2)
Latest version: 0.0.6

# Server Push Webpack Plugin

This plugin creates configs for HTTP/2 Server Push for Nginx and other web-server.

## Install

```sh
yarn add -D @feugene/webpack-plugin-server-push
# or 
npm install -D @feugene/webpack-plugin-server-push
```


## Using

### Example #1: webpack.config.js

```js
// vue.config.js
const ServerPushWebpackPlugin = require('@feugene/webpack-plugin-server-push')

const vueConfig = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false,
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src'),
            },
        },
        plugins: [
            new ServerPushWebpackPlugin({
              target: 'nginx',
              omitLocation: true,
              filename: 'nginx.server-push.conf',
            })
        ],
    }
}

module.exports = vueConfig
```

This will generate a file dist/nginx.server-push.conf containing the following:
```conf
    http2_push /static/css/app.f908c0a3.css;
    http2_push /static/js/app.20460db2.js;
    http2_push /static/css/chunk-elementUI.5e0028e4.css;
    http2_push /static/js/chunk-elementUI.0911e193.js;
    http2_push /static/js/chunk-libs.06f73890.js;
```

Include the generated `nginx.server-push.conf` into your nginx config. For example:
```conf
server {
    server_name mockery.dev;

	listen 443 ssl http2;

	ssl_certificate /usr/share/cert/server/servercert.pem;
    ssl_certificate_key /usr/share/cert/server/serverkey.pem;
		
    location / {
		include nginx.server-push.conf;

        proxy_pass http://127.0.0.1:1115;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 60s;
        proxy_connect_timeout 60s;
    }
}

```

### Example #2: webpack.config.js

```js
// webpack.config.js
const ServerPushWebpackPlugin = require('@feugene/webpack-plugin-server-push')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'index_bundle.js'
  },
  plugins: [
    new ServerPushWebpackPlugin({ target:'nginx', index: 'index.html' })
  ]
}
```

This will generate a file dist/nginx.push.conf containing the following:
```conf

location = / {
  http2_push /index_bundle.js;
}
```

Include the generated `nginx.push.conf` in main `nginx.conf` as below:
```conf
server {
    # listen on port 433 with https
    listen 443 ssl http2;

    server_name example.com;

    # ssl cert
    ssl_certificate /usr/share/cert/server/servercert.pem;
    ssl_certificate_key /usr/share/cert/server/serverkey.pem;

    # where the root here
    root /usr/share/app;

    # what file to server as index
    index index.html;

    # include nginx push conf to enable HTTP/2 server push
    include nginx.push.conf;
}
```
npm package: @feusefultools/prettier-config-useful
Description: A shareable Prettier configuration for Useful projects
Author: kingmui
Latest version: 1.0.0

# @feusefultools/prettier-config-useful

A shareable Prettier configuration for Useful projects

## Install

This repository uses [PNPM](https://pnpm.io/)

```shell
$ pnpm install @feusefultools/prettier-config-useful --save-dev
```

## Usage

This config can be used one of two ways:

### package.json

```json
{
  "name": "useful-template",
  "prettier": "@feusefultools/prettier-config-useful",
}
```

### .prettierrc.js

```javascript
module.exports = require("@feusefultools/prettier-config-useful");
```

> Note: This method does not offer a way to extend the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a .prettierrc.js file and export the modifications, e.g:

```javascript
module.exports = {
  ...require("@feusefultools/prettier-config-useful"),
  semi: false,
};
```

## License

[LICENSE (MIT)](./LICENSE)
npm package: @feutopia/http
Description: HTTP Request Library, base on Axios
Author: David Zheng
Latest version: 0.0.8

# @feutopia/http

**中文** | [English](./README.md)

一个基于 Axios 的强大 HTTP 请求库，提供增强功能和更便捷的 API。

## 特性

- 🚀 基于 Axios 构建，具有增强功能
- 🎯 内置 TypeScript 支持
- 🔄 请求/响应拦截器
- ⚡ 基于 Promise 的 API
- 📁 支持文件上传及进度跟踪
- ⬇️ 支持文件下载
- ❌ 请求取消功能
- 🎨 可自定义请求/响应处理器
- 🔍 全面的错误处理

## 安装

```bash
pnpm install @feutopia/http
```

## 基础用法

```ts
import { HttpClient } from "@feutopia/http";

class MyHttpClient extends HttpClient {
  constructor() {
    super({
      config: {
        baseURL: "https://api.example.com",
        timeout: 5000,
      },
    });
  }
}

const http = new MyHttpClient();

// GET 请求
const getData = async () => {
  const response = await http.get({ 
    url: "/users",
    showError: true // 可选：控制错误显示
  });
  return response.data;
};

// POST 请求（带类型安全）
const createUser = async (userData: UserData) => {
  const response = await http.post<UserResponse>({
    url: "/users",
    data: userData,
  });
  return response.data;
};
```

## 高级功能

### 自定义请求/响应拦截器

```ts
const http = new MyHttpClient();

// 添加请求拦截器
http.interceptors.request.use(
  (config) => {
    // 添加自定义请求头
    config.headers["X-Custom-Header"] = "value";
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  (response) => {
    // 转换响应数据
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);
```

### 文件上传

```ts
const uploadFile = async (file: File) => {
  await http.upload({
    url: "/upload",
    data: file, // 可以是 File、FormData 或其他数据
    onProgress: (percentage) => {
      console.log(`上传进度：${percentage}%`);
    }
  });
};
```

### 文件下载

```ts
const downloadFile = async () => {
	await http.download({
		url: "/files/document.pdf",
	});
};
```

### 请求取消

```ts
// 方式一：使用 cancel 方法
const request = http.get({ url: "/data" });
request.cancel();

// 方式二：取消所有待处理的请求
http.cancelAllRequests();
```

## 错误处理

该库提供全面的错误处理机制，包含预定义的错误代码：

```ts
import { ErrorCode } from "@feutopia/http";
try {
	await http.get({ url: "/data" });
} catch (error) {
	switch (error.code) {
		case ErrorCode.NETWORK_ERROR:
			console.error("发生网络错误");
			break;
		case ErrorCode.TIMEOUT:
			console.error("请求超时");
			break;
		case ErrorCode.CANCELED:
			console.error("请求已取消");
			break;
		// ... 处理其他错误类型
	}
}
```

## 许可证

MIT