open-index/open-npm huggingface dataset:
npm package: @rypock/react-frontend
Description: Basic React frontend
Author: robk
Latest version: 0.1.1

# Create React App example with TypeScript

## How to use

Download the example [or clone the repo](https://github.com/mui-org/material-ui):

```sh
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app-with-typescript
cd create-react-app-with-typescript
```

Install it and run:

```sh
npm install
npm start
```

or:

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript)

## The idea behind the example

This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://github.com/Microsoft/TypeScript).
npm package: @ryqndev/footer
Description: A react component that adds a footer. Currently not supporting any props for custom use but have plans to add it. ## Usage  ```jsx     <Footer /> ```
Author: Ryan Yang
Latest version: 3.2.3

# @ryqndev/footer

A react component that adds a footer. Currently not supporting any props for custom use but have plans to add it.
## Usage 
```jsx
    <Footer />
```

|Variable Name|Default Value|
|---|---|
| `--rdsl-footer-bg` | `#ffffff` |
npm package: @ryry886/coord-transform
Description: 坐标转换
Author: ryry886
Latest version: 1.0.2

# coord-transform
wgs84，高德，百度之间的坐标转换,以及用proj4自定义转换，不改变数据结构
## api
transform(geojsonOrArray,transOption)
```
geojsonOrArray: 数组或者标准geojson格式
//wgs84，高德，百度之间的坐标转换
transOption: {
                from:"WGS84", // WGS84, BD09,GCJ02
                to:"BD09",  // WGS84, BD09,GCJ02
                proj4:false
            }
//proj4参数转换
transOption: {
                from:"+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs",
                to:"+proj=longlat +ellps=GRS80 +no_defs",
                proj4:true
            }
//使用proj4自带坐标系,详细看proj4
transform([113.9612,31.315],{
    from:"WGS84",
    to:"EPSG:3857",
    proj4:true
})
//使用epsg 库的坐标系
npm i epsg
import epsg from "epsg"
transform([37488855.08,3514760.39],{
    from:epsg["EPSG:4525"],
    to:"+proj=longlat +ellps=GRS80 +no_defs",
    proj4:true,
});
 ```
## 使用 
### NPM
npm i @ryry886/coord-transform
```
import  transform  from "@ryry886/coord-transform"
//传入数组
transform([114.331754,30.478323],{from:"WGS84",to:"GCJ02"})

//传入嵌套数组
transform([[114.331754,30.478323],[114.331754,30.478323]],{from:"BD09",to:"WGS84"})

//geojson
transform({"type": "Point", "coordinates": [114.331754,30.478323]},{from:"BD09",to:"GCJ02"})

//使用proj4
let option={
    from:"+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m   +no_defs",
    to:"+proj=longlat +ellps=GRS80 +no_defs",
    proj4:true,
}
let geojson = {
        "type": "FeatureCollection",
        "features": [
            { "type": "Feature",
                "geometry": {"type": "Point", "coordinates": [37488855.08,3514760.39]},
                "properties": {
                    "name": "Location A",
                    "category": "Store"
                }
            },
            { "type": "Feature",
                "geometry": {"type": "Point", "coordinates": [37488855.08,3514760.39]},
                "properties": {
                    "name": "Location B",
                    "category": "House"
                }
            },
            { "type": "Feature",
                "geometry": {"type": "Point", "coordinates": [37488855.08,3514760.39]},
                "properties": {
                    "name": "Location C",
                    "category": "Office"
                }
            }
        ]
    }
transform(geojson,option);
 ```
npm package: @ryry886/mapbox-gl-measure
Description: Length and area measurements with linestrings and polygons
Author: ryry886
Latest version: 0.0.2

# @ryry886/mapbox-gl-measure
## distance  and  area  measure
## 长度测量和面积测量
![image](https://github.com/ryry886/mapbox-gl-measure/blob/main/pic1.jpg)

![image](https://github.com/ryry886/mapbox-gl-measure/blob/main/pic2.jpg)

## Installing
```
npm install @ryry886/mapbox-gl-measure
```

## Example
 ```js
  import MapboxMeasure from "@ryry886/mapbox-gl-measure"
  
  let measure= new MapboxMeasure({
    //language:"cn"
  })
  measure.addTo(map); // mapbox-gl or maplibre map 
  measure.start("distance")// measure.start("area")
  
  //measure.clear();   // 清空测量
  //measure.stop();   // 停止测量
 ```

## custom style
```js
let measure = new MapboxMeasure(map, {
   language:"cn",
   style:{
     areaStyle:{
        "fillColor":"#000",
        "fillOpacity": 0.1,
        "fillOutlineColor":"#000"
    },
    lengthStyle:{
        "lineWidth": 2,
        "lineColor": "#D20C0C",
    },
    pointStyle:{ 
        "midPointRadius":6,
        "midPointColor":"#fbb03b",
        "midPointHaloRadius":8,
        "midPointHaloColor"：'#FFF',
    },
    textStyle:{ 
        "radialOffset":0.5,
        "textSize":14,
        "letterSpacing":0.05,
        "textColor":'#D20C0C',
        "textHaloColor":'#fff',
        "textHaloWidth":2,
        "vertexHaloRadius":4,
        "vertexHaloColor":"#fff",
        "vertexRadius":2,
        "vertexColor":"#D20C0C"
    }
 }
});

```
npm package: @rys-fe/commitlint
Description: commitlint shareable config for rys-fe
Author: jimmy
Latest version: 0.28.9

# @rys-fe/commitlint

本包提供了《Git 规约》配套的 [commitlint 可共享配置](https://commitlint.js.org/#/concepts-shareable-config)，用于对 git commit message 进行校验。

## 安装

除了本包，你需要同时安装 [@commitlint/cli](https://www.npmjs.com/package/@commitlint/cli)：

```bash
npm install @rys-fe/commitlint @commitlint/cli --save-dev
```

## 使用

在你的 `.commitlintrc.js` 中继承本包:

```javascript
// .commitlintrc.js
const getCommitlintConfig = require('@rys-fe/commitlint');

// getCommitlintConfig(customConfig?);
module.exports = getCommitlintConfig();
```

## 设置 git hook

可通过 [husky](https://www.npmjs.com/package/husky) 设置在 git commit 时触发 commitlint。

首先安装 husky：

```bash
npm install husky --save-dev
```

然后在 `package.json` 中增加：

```json
{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}
```

更多信息可参考 [commitlint 文档](https://commitlint.js.org/#/guides-local-setup?id=install-husky)。
npm package: @rys-fe/vite-plugin-theme
Description: Vite plugin for dynamically changing the theme color of the interface
Author: Vben
Latest version: 0.8.6

# vite-plugin-theme

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

[![npm][npm-img]][npm-url] [![node][node-img]][node-url]

Vite plugin for dynamically changing the theme color of the interface

After vite processes the css and dynamically analyzes the color value in the css text that matches the plug-in configuration, extract the specified color style code from all output css files. And create a `app-theme-style.css` file containing only color styles, dynamically insert it into the specified position (the bottom of the default body), and then replace the custom style/component library style color used with the new color, In order to achieve the purpose of dynamically changing the theme color of the project

### Install (yarn or npm)

**node version:** >=12.0.0

**vite version:** >=2.0.0

```
yarn add vite-plugin-theme -D
```

or

```
npm i vite-plugin-theme -D
```

## Usage

- Config plugin in vite.config.ts. In this way, the required functions can be introduced as needed

```ts
import { defineConfig, Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';

import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';

export default defineConfig({
  plugins: [
    vue(),
    viteThemePlugin({
      // Match the color to be modified
       colorVariables: [],
    });
  ],
});
```

## Options

`viteThemePlugin(Options)`

**Options**

| param | type | default | desc |
| --- | --- | --- | --- |
| colorVariables | `string[]` | - | If css contains the color value in the array, css will be extracted |
| wrapperCssSelector | `string` | - | Universal outer selector. You can pass in'body' and other selectors to increase the level |
| resolveSelector | `(selector:string)=>string` | - | Custom selector conversion |
| customerExtractVariable | `(css:string)=>string` | - | Custom css matching color extraction logic |
| fileName | `string` | `app-theme-style.hash.css` | File name output after packaging |
| injectTo | `body` or `head` or `body-prepend` | `body` | The css loaded in the production environment is injected into the label body |

## Sample project

[Vben Admin](https://github.com/vbenjs/vue-vben-admin)

## Reference project

- [webpack-theme-color-replacer](https://github.com/hzsrc/webpack-theme-color-replacer)
- [webpack-stylesheet-variable-replacer-plugin](https://github.com/eaTong/webpack-stylesheet-variable-replacer-plugin)

## License

MIT

[npm-img]: https://img.shields.io/npm/v/vite-plugin-html.svg
[npm-url]: https://npmjs.com/package/vite-plugin-html
[node-img]: https://img.shields.io/node/v/vite-plugin-html.svg
[node-url]: https://nodejs.org/en/about/releases/
npm package: @rysh/json-to-css
Description: `@rysh/json-to-css` is a powerful package that converts JSON objects into minified CSS code. This tool is designed to streamline the process of generating CSS from JSON structures, making it easier to manage styles programmatically.
Author: Maciej Kozłowski
Latest version: 1.0.1

# @rysh/json-to-css

## Overview
`@rysh/json-to-css` is a powerful package that converts JSON objects into minified CSS code. This tool is designed to streamline the process of generating CSS from JSON structures, making it easier to manage styles programmatically.

## Installation
To install the package, use npm or yarn:
```sh
npm install @rysh/json-to-css
```
or
```sh
yarn add @rysh/json-to-css
```

## Usage
Below are examples demonstrating how to use `@rysh/json-to-css` in your project.

### Basic Usage
```typescript
import jsonToCss from "@rysh/json-to-css";

const css = jsonToCss({
  'background-color': '#fff',
  'color': '#000',
  'h1': {
    'font-weight': 'bold',
    '&.primary': {
      'color': '#12850f',
      '&:hover': {
        'background-color': '#ccc',
      }
    }
  }
}, '#app');

console.log(css);
```

### Output
The resulting CSS will be:
```css
#app{
    background-color:#fff;
    color:#000
}
#app h1{
    font-weight:bold
}
#app h1.primary{
    color:#12850f
}
#app h1.primary:hover{
    background-color:#ccc
}
```
The generated CSS is minified, removing all unnecessary spaces, commas, and semicolons.

### Handling Multiple Selectors
`@rysh/json-to-css` also supports selectors separated by commas:

```typescript
import jsonToCss from "@rysh/json-to-css";

const css = jsonToCss({
  'h1, h2, h3, h4, h5, h6': {
    'font-weight': 'bold',
    '&.none': {
      'display': 'none',
    }
  }
}, '#app');

console.log(css);
```

### Output
The resulting CSS will be:
```css
#app h1,h2,h3,h4,h5,h6{
    font-weight:bold
}
#app h1.none,h2.none,h3.none,h4.none,h5.none,h6.none{
    display:none
}
```

### Media Queries
`@rysh/json-to-css` supports media queries within the JSON structure:

```typescript
import jsonToCss from "@rysh/json-to-css";

const css = jsonToCss({
  '.container': {
    'margin': '0 auto',
    '@media only screen and (max-width: 600px)': {
      'max-width': '768px',
    }
  }
}, '#app');

console.log(css);
```

### Output
The resulting CSS will be:
```css
#app .container{
    margin:0 auto
}
@media only screen and (max-width: 600px){
    #app .container{
        max-width:768px
    }
}
```

### Combining Functions
You can mix various features to achieve the desired effect, giving you the flexibility to define complex styles using a straightforward JSON structure.

## License
This package is licensed under the MIT License.

## Contributions
Contributions, issues, and feature requests are welcome. Feel free to check the [issues page](https://gitlab.com/tatarysh/json-to-css/issues) if you have any suggestions or find any bugs.

## Author
Created by rysh.

---

This README file provides a comprehensive guide to using `@rysh/json-to-css`. If you have any further questions or need additional examples, please refer to the [documentation](https://gitlab.com/tatarysh/json-to-css).
npm package: @rysiek/randomid-generator
Description: Package generates a random id key. **Required parameter:** key length
Latest version: 1.0.1

## Fast randomID Generator

Package generates a random id key.
**Required parameter:** key length

Example:
``` js
const randomID = require('@rysiek/randomid-generator');
const id = randomID(10); // key length = 10 characters
console.log(id); // result: Ghjitaj0J8
```
npm package: @rysock/pcf-office-bridge
Description: Library supporting code to bridge a PowerApp hosted in an iFrame within an Outlook/Office add-in and passing information from PowerApps to Add-in (and vice versa). This is directly dependent on the PCFOfficeAddinBridge PCF control.
Author: Ryan Sockalosky @rysock
Latest version: 1.2.24020201

This folder contains script files that you will leverage inside your Office Add-in html. Specifically eg in a TaskPane add-in you will reference this script so that you can call the postMessage to pass messages to the inner iFrame (containing the PowerApp and using the PCF control for Office.js interop)
npm package: @rysujana/lit-starter-ts
Description: Kompas Web Components using Lit
Author: rysujana
Latest version: 0.8.1

# \<web-components>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i web-components
```

## Usage

```html
<script type="module">
  import 'web-components/web-components.js';
</script>

<web-components></web-components>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @rysujana/nuxt-plugins-signoz
Description: Kompas.id reusable plugin to implement signoz on Nuxt project
Author: kompas.id
Latest version: 0.0.2

# Kompas Nuxt Plugins Signoz

Kompas Nuxt Plugins Signoz is reusable package for Harian Kompas project.

## Installation
To start building a new web component using Lit, clone this repo to a new directory:

```bash
git clone https://github.com/pt-kompas-media-nusantara/nuxt-plugins-signoz.git
cd nuxt-plugins-signoz
```

Then run yarn install to install Kompas Nuxt Plugins Signoz.

```bash
yarn install
```

## Usage

Run:

```bash
yarn start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @rysujana/stencil-upgrade
Description: Kompas.id reusable web components
Latest version: 0.0.8

# Kompas Web Components

Kompas Web Components is frontend reusable component for Harian Kompas project.

## Installation
To start building a new web component using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/pt-kompas-media-nusantara/kompas-web-components.git
cd kompas-web-component
```
Use 
* Node.js version 14
* NPM version 6 
* [Stencil.js](https://stenciljs.com/docs/introduction) version ^2.5.2

Then run [npm](https://github.com/ionic-team/stencil-component-starter) install to install Kompas Web Component.

```bash
npm install
```

## Usage

Run:

```bash
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

To publish to NPM
```bash
npm run build
npm login
npm publish --access public --otp=<code>
```
For detailed explanation on how things work, check out [Stencil.js](https://stenciljs.com/docs/introduction) docs.

## Implement Component to Another Project

on kompas-web-component run:
```bash
cd kompas-web-component
npm start build
npm link
```


on your project run:

```bash
cd project-folder
npm link @kompasid/kompas-web-compoenent
```


## How to develop

* Create component that want to build on /src/components
* Use .ts format (We use TypeScript for functionality)
* Declare every components, states and props (if exist) and run npm run build before npm start to create readme in component directory automatically
* We use Tailwind CSS v2 for styling component, check out [Tailwind CSS](https://v2.tailwindcss.com/docs) docs.

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @rysujana/web-components
Description: Kompas.id reusable web components
Author: kompas.id
Latest version: 0.6.1

# Kompas Lit Web Components

Kompas Lit Web Components is frontend reusable component for Harian Kompas project.

## Installation
To start building a new web component using Lit, clone this repo to a new directory:

```bash
git clone https://github.com/pt-kompas-media-nusantara/lit-web-component.git
cd lit-web-component
```

Then run yarn install to install Kompas Lit Web Component.

```bash
yarn install
```

## Usage

Run:

```bash
yarn start
```

To develop component and run twlit concurrently, run:

```bash
yarn dev
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
yarn lint
```

To automatically fix linting and formatting errors, run

```bash
yarn format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
yarn test
```

To run the tests in interactive watch mode run:

```bash
yarn test:watch
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
yarn start
```

To run a local development server that serves the basic demo located in `demo/index.html`

## How to develop

* Create component that want to build on /src/components
* Use .ts format (We use TypeScript for functionality)
* Import TWStyles for the component you want to develop
* Declare every components, states and props (if exist) and run yarn dev to load tailwind automatically
* We use twlit for styling component that is based on Tailwind CSS, check out [twlit](https://www.npmjs.com/package/twlit).

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)