open-index/open-npm huggingface dataset:
npm package: @jalali-vue/datepicker
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.0.10

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @jalapenoswap/eslint-config-jalapeno
Description: Eslint config for JalapenoSwap
Author: Wizardapes
Latest version: 1.0.0

# eslint-config-jalapeno

Jalapeno ESLint config with:

- Airbnb config
- TypeScript
- Prettier

## npm

https://www.npmjs.com/package/@jalapenoswap/eslint-config-jalapeno

## Usage

```
npx install-peerdeps --dev @jalapenoswap/eslint-config-jalapeno
```

Add `"extends": "@jalapenoswap/eslint-config-jalapeno"` to your ESLint config file.
npm package: @jalapenoswap/uikit
Description: Set of UI components for JalapenoSwap projects
Latest version: 1.0.6

# jalapenoSwap UIkit

[![Version](https://img.shields.io/npm/v/@jalapenoswap/uikit)](https://www.npmjs.com/package/@jalapenoswap/uikit) [![Size](https://img.shields.io/bundlephobia/min/@jalapenoswap/uikit)](https://www.npmjs.com/package/@jalapenoswap/uikit)

JalapenoSwap UIkit is a set of React components and hooks used to build pages on jalapenoSwap's apps.

It also contains a theme file for dark and light mode.

## Install

`npm i @jalapenoswap/uikit`

## npm

https://www.npmjs.com/package/@jalapenoswap/uikit

## Setup

### Theme

Before using JalapenoSwap UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@jalapenoswap/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@jalapenoswap/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://jalapenoswap.github.io/jalapenoswap-uikit/)
npm package: @jalato/abbreviate
Description: abbreviation is libary is used to shorten number to understable string
Author: Mohamed Abdifitah
Latest version: 1.1.1

# abbreviation
Abbreviation libary is used to abbreviate long numbers  to string 1000 => 1k

## install  libary 
### using npm 
```sh
 npm i @jalato/abbreviate
 ```

### using yarn 
```sh 
yarn add @jalato/abbreviate
```
## examples of abbreviate libary

```js
import abbreviate from "@jalato/abbreviate";
// 1.23M 
abbreviate(1234567,false,2)

```
### importing
```js 
import abbreviate from "@jalato/abbreviate";
```
### arguments 

```js 
// takes 3 arguments abbreviate(number,maxPlace,forPlace,forceLetter)
/*
  { 
     number:Number,
     maxPlace:number | Boolean,
     forcePlace:number | Boolean,
     forceLetter:number | Boolean
  }
*/
abbreviate(number,Boolean,Boolean,Boolean)
```
### bytes conversion part
```js
import { byteConversion } from "@jalato/abbreviate";
const Data = byteConversion(1580)
console.log(Data)
// 1.58 KB
npm package: @jalba/react-css-doodle
Description: A simple [styled-components](https://styled-components.com/)-esque wrapper for [css-doodle](https://css-doodle.com/) library.
Author: Javier Alba
Latest version: 1.3.0

# REACT-CSS-DOODLE

A simple [styled-components](https://styled-components.com/)-esque wrapper for [css-doodle](https://css-doodle.com/) library.

## installation

`npm install -S @jalba/react-css-doodle` or `yarn add @jalba/react-css-doodle`

## usage

You can pass variables and even functions to the [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to build your doodle's rules:

```javascript
import React from "react";
import "./styles.css";

import doodle from "./doodle";

const gridSize = 2;
const gridGap = "2";

const background = () => "red";

const FancyDoodle = doodle`
  :doodle {
    @grid: ${gridSize} / 200px;
    grid-gap: ${gridGap}px;
  }
  background: @pick(${background}, pink);
`;

export default function App() {
  return (
    <div className="App">
      <FancyDoodle />
    </div>
  );
}
```


![alt text](https://github.com/jalba/react-css-doodle/raw/master/assets/doodle.png "The result")


## Available Scripts

In the project directory, you can run:

### `yarn run storybook`

Runs storybook. Ideal to develop or play around with the possibilities of `css-doodle`\
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

The page will reload if you make edits.

### `yarn test`

Launches the test runner in the interactive watch mode\
Visit [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `yarn build`

Builds the library for production to the `dist` folder.\

The build task uses rollup as bundler.

There is also an interactive mode, that will re-build the library after every change you save.

Run it with `yarn run build-watch`

Please visit [rollup](https://rollupjs.org/guide/en/) for more information
npm package: @jalbr74/ias-icons
Description: Icon font for Micro Focus Identity, Access, and Security products
Author: James Albright
Latest version: 1.0.17

# Micro Focus ias-icons

This project is the icon font for Micro Focus Identity and Access products,
which contains an official icon font for web applications built by Micro Focus Identity and 
Access Management Group. The icon font helps provide a consistent icon look and feel 
throughout these applications.

### Helpful Links

- [Documentation Site](https://microfocus.github.io/ias-icons)

### Usage

Install the package using npm:

```
$ npm install @microfocus/ias-icons
```

If you are building a project with Angular, you can add the following  to your angular.json file:

```
"styles": [
    "node_modules/@microfocus/ias-icons/dist/ias-icons/ias-icons.css",
    "src/styles.scss"
],
```

The icons can now be referenced by class name, as shown in the following example:

```
<i class="ias-icon ias-icon-down_thin"></i>
```