open-index/open-npm huggingface dataset:
npm package: @kaleemmolani/oneclick
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.1

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```
npm package: @kalees64/toast
Description: Install ngx-toastr and sweetalert2 using one command with all necessary configurations
Latest version: 0.0.3

# Toastr & SweetAlert2

## Installation

Install ngx-toastr and sweetalert2 using one command with all necessary configurations

```bash
ng add @kalees64/toast
```

## Usage

app.component.ts

```typescript
import { Component } from "@angular/core";
import { ToastrService } from "ngx-toastr";
import Swal from "sweetalert2";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "test1";

  constructor(private toast: ToastrService) {}

  click() {
    this.toast.success("I am Fine");
    Swal.fire("I am Also in the same page");
  }
}
```

app.component.html

```typescript
<h1 class="text-7xl">I am Kalees</h1>
<button class="vk-btn-pink" (click)="click()">Click me</button>
```
npm package: @kalees64/tw-theme
Description: A collection of reusable, styled components built with Angular, showcased using Storybook for efficient UI development and testing. Visit the online [Storybook](https://angular-storybook.vercel.app/) for a live preview of all components.
Latest version: 0.0.5

# Angular Theme using Tailwind

A collection of reusable, styled components built with Angular, showcased using Storybook for efficient UI development and testing. Visit the online [Storybook](https://angular-storybook.vercel.app/) for a live preview of all components.

## Project Overview

This project serves as a UI component library for Angular applications, leveraging Storybook to provide an interactive development environment. Each component is designed to be customizable, testable, and ready for production use.

## Installation

Install my-project with npm

```bash
  npm i @kalees64/tw-theme
```

Copy the css file path and paste it to your style.css file

```bash
  @import "../node_modules/@kalees64/tw-theme/index.css";
```

## Usage/Examples

After installation, you can import and use the components directly in your Angular applications. Refer to each component's Storybook documentation for usage details and available props.

app.component.ts

```javascript
import { ButtonComponent, SpinnerComponent } from '@kalees64/tw-theme';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ SpinnerComponent, ButtonComponent, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
```

app.component.html

```javascript
<tw-spinner size="small" color="primary"></tw-spinner>

<tw-button label="Button" variant="danger"></tw-button>
```

## Documentation

Read the below documentation for more knowledge about the components.

[Storybook](https://angular-storybook.vercel.app/)

### Available Components

- Button
- Spinner
- Badge
- Card
- Header
npm package: @kalees64/vk-auth
Description: ```bash ng add @kalees64/vk-auth ```
Latest version: 0.0.11

# Auth

## Installation

```bash
ng add @kalees64/vk-auth
```

## Usage

app.component.ts

```javascript
import { Component } from "@angular/core";
import { LoginComponent } from "@kalees64/vk-auth";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [LoginComponent],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "angular-test1";
}
```

app.component.html

```javascript
<vk-login></vk-login>
```
npm package: @kalees64/vk-theme
Description: A collection of reusable, styled components built with Angular, showcased using Storybook for efficient UI development and testing. Visit the online [Storybook](https://vk-angular-theme.vercel.app/) for a live preview of all components.
Latest version: 0.0.15

# Angular Theme using Tailwind

A collection of reusable, styled components built with Angular, showcased using Storybook for efficient UI development and testing. Visit the online [Storybook](https://vk-angular-theme.vercel.app/) for a live preview of all components.

## Project Overview

This project serves as a UI component library for Angular applications, leveraging Storybook to provide an interactive development environment. Each component is designed to be customizable, testable, and ready for production use.

## Installation

Install VK-THEME with cdn and npm files

```bash
  ng add @kalees64/vk-theme
```

Install my-project with npm

```bash
  npm i @kalees64/vk-theme
```

Copy the css file path and paste it to your style.css file

```css
@import url("https://kalees64.github.io/vk-cdn/vk-cdn.css");
```

## Tutorial

[![Watch the video](https://github.com/user-attachments/assets/a74c60df-3577-4794-a1a6-760eb5278b26)](https://youtu.be/YWiHhwW69s4)

## Usage/Examples

After installation, you can import and use the components directly in your Angular applications. Refer to each component's Storybook documentation for usage details and available props.

app.component.ts

```javascript
import { VkButtonComponent } from '@kalees64/vk-theme';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ VkButtonComponent, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
```

app.component.html

```javascript
<vk-button>Button</vk-button>
```

## Documentation

Read the below documentation for more knowledge about the components.

[Storybook](https://vk-angular-theme.vercel.app/)

### Available Components

- Button
- Button Gradient
- Badge
- Card
- Card Title
- Card Text
- Headings [ h1 , h2, h3, h4, h5, h6 ]
- Alert
- Alert Box
- Forn Input
- Form Label
- Link
- Sidebar Link
- Card with actions
- Card with hidden actions
- Card Widget
- Sidebar
- Header
- Accordion
- Breadcrumb
- Modal
- Dropdown
- Offcanvas
- Tabs