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

# 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: @flk/alert
Description: Simple alert mode for Falak JS
Author: Hasan Zohdy
Latest version: 1.3.0

# Flk Alert

A confirm component to replace the `confirm` browser function. 

# Installation
`flk install flk-alert`

# Usage

`hello-world.component.html`

```html
<button (click)="this.suspendUser = true">Suspend user</button>

<flk-alert *if="this.suspendUser" message="Are you sure you want to suspend this user?" (close)="this.suspendUser = false" (confirm)="this.performUserSuspension()"></flk-alert>
```

Use the `*if` directive to decide when to activate the component.

When the user clicks on `cancel` the `close` event is triggered, in that case we will set the `suspendUser` property back to `null`.

If users click on `confirm` button, then the `confirm` event is triggered followed by `close` event as well.

## Available attributes

### type

**name**: `type` | `[type]`

**values**: `confirm` | `inform`

**default**: `confirm`

The `confirm` type will set two buttons, one for confirm and one for cancel, while the `inform` type has only one `confirm` button.

### message

**name**: `message` | `[message]`

**default**: `Are you sure?`

Set the message `body` that will appear to the user.

### heading

**name**: `heading` | `[heading]`

**default**: `A confirm message`

Set the message `heading` that will appear on the top of the alert box.


### Confirm button
**name**: `confirm-btn` | `[confirm-btn]`

**default**: `OK`

Set the `confirm` button text.


### Cancel button

**name**: `cancel-btn` | `[cancel-btn]`

**default**: `Cancel`

Set the `cancel` button text.

### Input 

**name**: `[with-input]`

**default**: `false`

If set to true, the user will have an input to enter a value.

### Input placeholder

**name**: `placeholder` | `[placeholder]`

**default**: `''`

Set the input placeholder, if the [Input](#input) is set to true.

> If set to true, the `confirm` event will pass the `input value` as well.

### Heading theme
**name**: `heading-theme` | `[heading-theme]`

**default**: `danger`

**Available options**: `danger` | `primary` | `success`

Set the input placeholder, if the [Input](#input) is set to true.
npm package: @flk/animator
Description: Animate.css animation on elements
Author: Hasan Zohdy
Latest version: 1.3.3

# flk-animator

An animation package for elements animations.

This package mainly uses [Animate.css](https://daneden.github.io/animate.css/)

# Installation

`flk install flk-animation` 

# Usage

Add to any element you want to animate `animate` class with `animate` attribute with any of `Animate.css` classes.

# Example

```html

<h1 class="animate" animate="fadeInUpBig">Hello, World</h1>

<!-- Or using dynamic values -->

<h1 class="animate" [animate]="this.defaultAnimation">Hello, World</h1>
```

# Speed
By default the animation has a `normal` speed but you can change it to `slow` or `fast` using the `speed` attribute.


```html

<h1 class="animate" animate="fadeIn" speed="fast">Hello, World</h1>
```

# Random
If you want to display elements randomly use the `random` value  

```html

<h1 class="animate" animate="random">Hello, World</h1>
```
npm package: @flk/bas64
Description: A simple encoder and decoder for bas64 encodings.
Latest version: 1.0.0

# Base64
A syntactic sugar wrapper to [atob()](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob) and [btoa()](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa0).

> This is a standalone package so it works on browser, node js or Falak framework.

# Installation
`flk install flk-base64` 

OR 

`npm install flk-base64`

# Usage
### Node Js:

Import the package 

`import base64 from 'flk-base64';`

OR

`const base64 = require('flk-base64');`

### Browser
`<script src="base64.js"></script>`

> Add the path of the file in the `dist` directory. 

### Encoding

```js
// Encoding
let encodedString = base64.encode('hello world'); // SGVsbG8gd29ybGQ=

// Decoding
let decodedString = base64.decode('SGVsbG8gd29ybGQ='); // Hello world
```
npm package: @flk/bootstrap
Description: Bootstrap handler.
Author: Hasan Zohdy
Latest version: 1.3.0

# Bootstrap handler

This package includes [Bootstrap](https://getbootstrap.com) in Falak JS Framework.

# Installation
`flk install flk-bootstrap-handler`

# Usage

Basically all of bootstrap features are included. 

You're now ready to use Bootstrap.

Happy Bootstrapping :))
npm package: @flk/checkbox
Description: Falak JS checkbox inputs
Author: Hasan Zohdy
Latest version: 1.3.0

# Checkbox inputs

A component for checkbox/radio inputs for Falak JS framework. 

# Installation
`flk install flk-checkbox`

# Usage

`hello-world.component.html`

```html
<flk-checkbox name="display" [checked]="true" value="1" label="Display post"></flk-checkbox>
```

# Attributes

## checked

**name**: `[checked]`

**values**: Any `Boolean` value, `true` to mark it as checked, `false` to uncheck it.

Determine wether input is checked.

## type

**name**: `type` | `[type]`

**values**: `checkbox` | `radio`.

**default**: `checkbox`


Set the input type, either `checkbox` or `radio`.


## Theme

**name**: `theme` | `[theme]`

**values**: `success` | `info` | `primary` | `warning` | `purple` | `teal` | `dark`.

**default**: `success`

Set the input theme color.

## label

**name**: `label` | `[label]`

Set the input label.

# Missing attributes

Any input attribute/event could be applied here, such as `(change)` event, `value` and so on.
npm package: @flk/ckeditor
Description: Ckeditor for Falak Js
Author: Hasan Zohdy
Latest version: 1.0.1

# CKEditor

Ckeditor for Falak JS Framework.

# Installation
`flk install flk-clock`

# Usage

`header.component.html`

```html
<flk-ckeditor name="content"></flk-ckeditor>
```
npm package: @flk/clock
Description: Display current time in digital shape for Falak Js
Author: Hasan Zohdy
Latest version: 1.0.1

# Clock

A component to display current time in website for Falak JS framework. 

# Installation
`flk install flk-clock`

# Usage

`header.component.html`

```html
<flk-clock class="add-some-classes"></flk-clock>
```

# Attributes

## class

**name**: `class`

Add one or more classes to the base element in the component.
npm package: @flk/crypto
Description: Falak JS Encrypting and Decrypting data using crypto js.
Author: Hasan Zohdy
Latest version: 1.0.0

# Crypto
A simple Encryption/Decryption handler.

> The current followed encryption algorithm is AES.

# Installation
`flk install flk-crypto`

OR 

`npm install flk-crypto`

Alias: `crypto`.

# Table of contents
- [Crypto](#crypto)
- [Installation](#installation)
- [Table of contents](#table-of-contents)
- [Usage](#usage)
- [Available methods](#available-methods)
  - [encrypt](#encrypt)
    - [Examples](#examples)
  - [Decrypt](#decrypt)
    - [Examples](#examples-1)
- [Configurations](#configurations)


# Usage

```javascript
  let crypto = DI.resolve('crypto');

  let encryptedValue = crypto.encrypt('hello world');
```

# Available methods
- [encrypt](#encrypt)
- [get](#get)
- [has](#has)
- [remove](#remove)
- [clear](#clear)

## encrypt

`encrypt(value: any): String`
Encrypt the given value.

This method accepts any type of values, it will be handled automatically, that means you can encrypt scalar values (`string|boolean|number`), arrays or objects.

### Examples

```javascript
  let crypto = DI.resolve('crypto');

  let encryptedValue = crypto.encrypt('hello world');

  // encrypt objects
  let user = {
    name: 'Hasan',
    age: 30,
  };

  let encryptedObject = crypto.encrypt(user);
```

## Decrypt

`decrypt(encodedValue: String): any|null`
Decrypt the given encoded value.

### Examples

```javascript
let user = crypto.decrypt('some-encoded-value');
```

# Configurations
Available configurations for `crypto` in [Application configurations](https://github.com/falakjs/config).

**Main Configuration key**: `crypto`

| key           | Type      |Description                                                                            |
| ------------- |  ------------- | -------------------------------------------------------------------------------------- |
| key | `String` | Set the encryption/decryption key, by default it is the current application name. |
npm package: @flk/events
Description: A powerful yet easy event emitter.
Author: Hasan Zohdy
Latest version: 2.0.2

# Events

A simple lightweight event handler package for Falak JS.


> Note this package could be used as a standalone package

# Installation

> This package is automatically installed on each new application so you don't have to install it.

For standalone usage
`npm i -s flk-events`

# Package info

**Alias:** `events`

The `Events` class is used to move between all components and packages with events without any conflict;


# Usage

If you want to use `events` in any component class, just inject it into the constructor with `events` parameter

`home-page.component.js`

```js
class HomePage {
    constructor(events) {
        this.events = events;
    }
}
```

For outer usage use the [DI.resolve('events')](https://github.com/falakjs/Falak/wiki/Dependency-Injection#resolving-class).

# Event listeners
To add event listener to any event use the `on` method, for example in the `main.js` file:

`main.js`
```js
let events = DI.resolve('events');
events.on('app.ready', function () {
    // do something when app is ready
});
```

> `addEventListener` and `subscribe` are alias methods to `on` method.

You may use the `subscribe` if you're more familiar with it than the `on` method

`main.js`
```js
let events = DI.resolve('events');
events.subscribe('app.ready', function () {
    // do something when app is ready
});
```

# Triggering event
To trigger event use the `trigger` method or `emit` as an alias.

```js
// listen to the user waking up
let events = DI.resolve('events');

events.on('user.wake-up', user => {
    console.log(user.id); // 12
});

setTimeout(() => {
    events.trigger('user.wake-up', {
        id: 12
    });
}, 4000);
```

You can pass any number of arguments to the `trigger` method as it will be passed to the `callback` function in the `on` method.
npm package: @flk/seo
Description: Convert string to seo friendly.
Latest version: 0.1.1

# flk-seo

Convert a string to seo friendly slug for optimized and readable links.

# Installation

`npm install flk-seo`


# Usage

First import it to your application

```js
import seo from 'flk-seo';
```
OR 

```js
const { seo } = require('flk-seo');
```

In browser

```html
<script src="dist/seo.min.js"></script>
```


```js
let title = 'Hello world';

console.log(seo(title)); // hello-world

let AnotherTitleWithOtherSymbols = 'Hello   world & thanks for coming, take these $20.25 as a gift for you.';

console.log(seo(AnotherTitleWithOtherSymbols)); // hello-world-and-thanks-for-coming-take-these-2025-as-a-gift-for-you
```


# Other languages support

Currently only **English** and **Arabic** letters are supported, feel free to **PR** your language!

# Thanks to

This snippet of code was originally created by [Dan Barto](https://stackoverflow.com/a/48000411/3380387) with slight modifications.