open-index/open-npm huggingface dataset:
npm package: @satpaing/custom-ui-components
Description: A command-line tool for adding customizable React components to your project. All components are unstyled by default, giving you complete control over their appearance.
Author: Sat Paing Thu
Latest version: 1.0.1

# React Component CLI

A command-line tool for adding customizable React components to your project. All components are unstyled by default, giving you complete control over their appearance.

## Features

- Add/remove components with a single command
- All components are completely unstyled (bring your own CSS)
- Components support both `className` and `style` props
- TypeScript support included
- Interactive mode for component selection

## Installation

```bash
npx @satpaing/custom-ui-components add [component]
```

## Removal

```bash
npx @satpaing/custom-ui-components remove [component]
```

## Generic Installtion or Removal

```bash
npx @satpaing/custom-ui-components add
```

```bash
npx @satpaing/custom-ui-components remove
```
npm package: @satpolo/dev-tree
Description: A simple, fast, and customizable command-line tool to generate a directory tree for any given path.
Author: satpolo
Latest version: 1.0.6

# dev-tree

A simple, fast, and customizable command-line tool to generate a directory tree for any given path. 
- Ignores ".git" and "node_modules" by default

---
## Example Output

Running `dev-tree` in a sample project will produce output like this:

```
/node-cli-project
│
├──/assets
│  └──/depth1
│  │  ├──depth1.txt
│  │  └──/depth2
│  │  │  ├──depth2.txt
│  │  │  └──/depth3
│  │  │  │  └──/depth4
│  │  │  │  │  ├──/depth5
│  │  │  │  │  └──/hello
├──/routes
│  ├──/stats
│  ├──test.js
│  └──visualize.json
│
├──buildTree.js
├──cli.js
├──package-lock.json
├──package.json
└──validatePath.js

 9 directories, 9 files
```

---


## Installation

Install the `dev-tree` tool globally using npm to use it from anywhere in your terminal.

```
npm install -g @satpolo/dev-tree
```

---


## Usage

Run the `dev-tree` command with an optional path to a directory. If no path is provided, it will default to the current working directory.

```
dev-tree [path] [options]
```

---

## Options


| Option | Alias | Description | Example |
| :--- | :--- | :--- | :--- |
| `--all` | `-a` | Show hidden files and directories, including `.git` and `node_modules` which are ignored by default. | `dev-tree --all` |
| `--ignore` | `-i` | Ignore specific dirent names or file extensions. Can be used multiple times. | `dev-tree -i .txt node_modules` |
| `--depth` | `-d` | Limit the depth of the directory tree to a specific number (0-indexed). | `dev-tree -d 2` |
| `--output` | `-o` | Save the output to a specified file path instead of printing to the console. | `dev-tree -o output.txt` |


---


## Examples

**Generate a tree for the current directory, ignoring `.txt` and `assets`:**

```
dev-tree --ignore .txt --ignore assets
```

**Generate a tree for a specific path, limiting the depth to 3:**

```
dev-tree /home/user/my-project --depth 3
```

**Show all files, including hidden ones, and save the output to a file:**

```
dev-tree --all --output tree.log
```

---


## License

This project is licensed under the MIT License.
npm package: @satrn/eslint-config-satrn
Description: Eslint config for Satrn
Latest version: 1.1.1

# eslint-config-satrn

Satrn Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @satrn/eslint-config-satrn
```

Add `"extends": "@satrn/eslint-config-satrn"` to your eslint config file.
npm package: @satrn/sdk
Description: An SDK for building applications on top of Satrn.
Latest version: 1.0.0

# Pancakeswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @satrn/uikit
Description: Set of UI components for Satrn projects
Latest version: 1.0.28

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/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://pancakeswap.github.io/pancake-uikit/)
npm package: @satrong/vue-dialog
Description: Easy to place your vue components into a dialog using the API.
Author: satrong
Latest version: 4.1.0

Easy to place your vue components into dialog using the API (Works with Vue 3.x and Vue 2.7+).

English | [简体中文](./README-zh.md)

## API

`useDialog(options)`:
- `options.component` `{Component}` **required**. 
- `options.props` `{object}` Corresponds to `options.component`'s props.
- `options.callback(...args1)` `{function}` When exec `useCloseDialog()(...args2)` this function will be fired. The `args1` is from `args2`

## Install

First, install dependencies

```bash
npm install @satrong/vue-dialog
```

And then import the `DialogSlot` component in your root component.

_App.vue_:

```js
<script setup>
import { DialogSlot } from '@satrong/vue-dialog'
</script>

<template>
  <div id="app">
    <h1>Root component</h1>
    <DialogSlot />
  </div>
</template>
```

Finally, you can use the `useDialog` function to insert your component into the dialog.

_Foo.vue_ component:
```html
<template>
  <button @click="add">insert DialogForm to root component</button>
</template>

<script setup>
import { useDialog } from '@satrong/vue-dialog'
import DialogForm from './DialogForm.vue'

useDialog({
  component: DialogForm,
  props: {
    name: 'Vue',
    onSubmit() {
      // do something after submit
    }
  },
  callback(a, b) {
    console.log(a, b) // hi, Vue
  }
})
</script>
```

_DialogForm.vue_ component:
```html
<template>
  <button @click="close('hi', 'Vue')">will remove this component after click</button>
  <button @click="submit">submit</button>
</template>

<script setup>
import { useCloseDialog } from '@satrong/vue-dialog'

const props = defineProps(['name', 'onSubmit'])

const close = useCloseDialog()

function submit() {
  props.onSubmit(props.name)
}
</script>
```