open-index/open-npm huggingface dataset:
npm package: @naybala/react-code-generator
Description: A powerful CLI tool to quickly generate React core features including components, custom hooks, and React Query integrations based on your input. This tool is designed to streamline the project architecture by scaffolding out common patterns and structure
Latest version: 1.0.8

# React Code Generator

A powerful CLI tool to quickly generate React core features including components, custom hooks, and React Query integrations based on your input.
This tool is designed to streamline the project architecture by scaffolding out common patterns and structures in React applications, ensuring consistency and reducing boilerplate.

---

## Features

- **React Components**: Generates boilerplate for `Form` and `Table` components.
- **Custom Hooks**: Creates `useForm` and `useTable` hooks for business logic.
- **Data Fetching (React Query)**: Scaffolds `Queries`, `Mutations`, and `Query Keys`.
- **Validation**: Includes `Zod` schemas for form validation.
- **Localization**: Generates i18n files for English and Myanmar.
- **TypeScript**: Full TypeScript support with dynamic type generation.
- **API integration**: Generates API service definitions.
- **Routes**: Scaffolds feature-specific routes.

---

## Installation

Install via npm (recommended as a dev dependency):

```bash
npm install @naybala/react-code-generator --save-dev
```

Add a script to your `package.json`:

```json
"scripts": {
  "make-core-ui-feature": "node ./node_modules/react-code-generator/index.js"
}
```

## Usage

Run the following command to start the interactive generator:

```bash
npm run make-core-ui-feature
```

## Template Structure

The generator uses the following template structure to scaffold features:

```bash
templates/
├── api/
│   └── api.ts
├── hooks/
│   ├── useForm.ts
│   └── useTable.ts
├── components/
│   ├── Form.tsx
│   └── Table.tsx
├── queries/
│   ├── keys.ts
│   ├── list.ts
│   └── detail.ts
├── mutations/
│   └── mutations.ts
├── schema/
│   └── schema.ts
├── types/
│   └── types.ts
├── routes/
│   └── routes.ts
├── i18n/
│   ├── en.js
│   └── mm.js
└── index.ts
```
npm package: @nayeemahmedshaik/ui-package
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
Latest version: 0.0.1

# UiPackage

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.

## Code scaffolding

Run `ng generate component component-name --project ui-package` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ui-package`.
> Note: Don't forget to add `--project ui-package` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build ui-package` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build ui-package`, go to the dist folder `cd dist/ui-package` and run `npm publish`.

## Running unit tests

Run `ng test ui-package` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @nayeshdaggula/tailify
Description: Tailify is a React component library built with Tailwind CSS.
Latest version: 1.3.7

# Tailify

React Tailwind Component Library

## Configuration

To configure Tailify with your TailwindCSS project, add the following code on global.css file on your project.

```global.css
@source "../node_modules/@nayeshdaggula/tailify";

@custom-variant dark (&:where([data-tailify-theme-variant=dark], [data-tailify-theme-variant=dark] *));

/* Ensure dark mode applies to `body` */
[data-tailify-theme-variant="dark"] body {
  @apply bg-neutral-900 text-white;
}

[data-tailify-theme-variant="light"] body {
  @apply bg-white text-black;
}
```

Add data-tailify-theme-variant to html tag.

```
<html data-tailify-theme-variant="light">
```


## Components

When you use Richtexteditor for placeholder use below css code on your project.

```
.richtexteditor-main .tiptap p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

````


## Contributing

Contributions are welcome! If you have a component you'd like to add or an improvement to suggest, feel free to open a pull request or file an issue on the GitHub repository.

## License

Tailify is licensed under the [MIT License](LICENSE).
npm package: @nayhoo/eslint-config
Description: My personal ESLint config for TS projects.
Latest version: 1.0.2

# @nayhoo/eslint-config

My personal ESLint config for TS projects.

## Installation

```sh
npm install -D @nayhoo/eslint-config
```

## Usage

```cjs
// .eslintrc.cjs

require("@nayhoo/eslint-config/patch");

module.exports = {
  extends: "@nayhoo/eslint-config",
};
```
npm package: @nayhoo/hooks
Description: A collection of React hooks.
Latest version: 0.2.2

# @nayhoo/hooks

A collection of React hooks.

## Installation

```sh
npm install @nayhoo/hooks
```

## Usage

```tsx
import { useScrollPosition } from "@nayhoo/hooks";

export const Component = () => {
  const scrollPosition = useScrollPosition();

  return `Scroll position: ${scrollPosition}`;
};
```