open-index/open-npm huggingface dataset:
npm package: @febog/ogp-image-generator
Description: Open Graph Protocol image generator for my personal blog.
Author: Felipe Bojorquez
Latest version: 1.2.2

# Open Graph Image generator

[![Publish package](https://github.com/febog/ogp-image-generator/actions/workflows/publish.yml/badge.svg)](https://github.com/febog/ogp-image-generator/actions/workflows/publish.yml)
[![NPM Version](https://img.shields.io/npm/v/%40febog%2Fogp-image-generator)](https://www.npmjs.com/package/@febog/ogp-image-generator)
[![NPM License](https://img.shields.io/npm/l/%40febog%2Fogp-image-generator)](https://www.npmjs.com/package/@febog/ogp-image-generator)

Open Graph Protocol image generator for my personal blog.

This script generates an open graph PNG image file for my personal blog for the given `title` and `date`.

## Installation 

```
npm install -g @febog/ogp-image-generator
```

## Usage

Set the required options `title`, `date` and `filename`. You can change the site name with the optional argument `site`.

Example:

```
ogp-image-gen -t 'Hello world!' -d 'March 12th, 2026' -f 'my-image'
```

## Options

```
Options:
  -t, --title     Blog post title                            [string] [required]
  -d, --date      Date of the blog post i.e. March 2nd, 2026 [string] [required]
  -f, --filename  File name for the PNG i.e. my-image        [string] [required]
  -s, --site      Site name                          [string] [default: "febog"]
      --version   Show version number                                  [boolean]
      --help      Show help                                            [boolean]
```

## Output

The generated PNG image will be located under `images/`.

## Sample image

The script will generate an image as follows:

![Example of a generated open graph image showing the site name, blog post title and date in white letters on a blue background. The text says febog; Hello world!; March 16th, 2026.](assets/sample-output.png)
npm package: @febog/table-filter
Description: A minimal way to filter HTML table rows.
Author: Felipe Bojorquez
Latest version: 1.0.1

# table-filter

[![Publish package](https://github.com/febog/table-filter/actions/workflows/publish.yml/badge.svg)](https://github.com/febog/table-filter/actions/workflows/publish.yml)
[![NPM Version](https://img.shields.io/npm/v/%40febog%2Ftable-filter)](https://www.npmjs.com/package/@febog/table-filter)
[![NPM License](https://img.shields.io/npm/l/%40febog%2Ftable-filter)](https://www.npmjs.com/package/@febog/table-filter)

A minimal way to filter HTML table rows.

## About

A minimal tool to filter rows in an HTML table. This code takes a straightforward approach and directly manipulates the DOM to filter the rows of a `<table>` according to an input.

## Installation

The package consists of a JavaScript module meant to be run directly in the browser as part of a webpage. It exports a single function, `filterTable`.

For example using jsDelivr:

```js
import { filterTable } from "https://cdn.jsdelivr.net/npm/@febog/table-filter@1.0.0/filter.js";
```

## Usage

The `filterTable` function is designed to be executed whenever the search input changes, for example:

```html
<input type="search" id="table-search-input" placeholder="Filter the table...">

<script type="module">
  import { filterTable } from "https://cdn.jsdelivr.net/npm/@febog/table-filter@1.0.0/filter.js";
  const input = document.getElementById("table-search-input");
  input.addEventListener("input",
    e => filterTable("search-table", e.target.value, "visible-items-counter"));
</script>
```

### Parameters

The `filterTable(tableId, filterString, counterId)` function requires the following parameters:

- `tableId`: Id of the `<table>` element whose rows will be filtered.
- `filterString`: Terms to filter for.
- `counterId`: Id of an element to display the number of visible rows after filtering. For example a `<span>`.

## Working example

You can see it in action at the [demo website](https://febog.github.io/table-filter/demo).

## Background

I created this package as a personal learning exercise on how to publish npm packages following modern practices with an emphasis on how to improve the security posture against supply chain attacks in open source software.

As such, this repository and the process that publishes the package to npm uses features such as [immutable releases](https://docs.github.com/en/code-security/concepts/supply-chain-security/immutable-releases), [signed software packages](https://docs.npmjs.com/generating-provenance-statements#about-sigstore) through [Sigstore](https://www.sigstore.dev/) (thanks to npm's [trusted publishing](https://docs.npmjs.com/trusted-publishers)) and verified commits and tags.

As for the package itself, I found myself copying and pasting code to implement a simple table search for my small personal projects. Since my use case is small websites I chose to keep the scope of the project small.
npm package: @febryars33/colorcrafted
Description: Colorcraft Styles
Author: febryars33
Latest version: 1.0.1

![Colorcrafted Preview](https://raw.githubusercontent.com/febryars33/colorcrafted/main/preview.png)


<h3 align="center">Colorcrafted</h3>
<p align="center">Coloring your Minecraft Fonts with Colorcrafted.</p>

###  Instalation

NPM
```bash
npm install @febryars33/colorcrafted
```
```bash
yarn add @febryars33/colorcrafted
```

PHP: https://github.com/febryars33/colorcraft
npm package: @febzey/quickencrypt
Description: Quickly encrypt passwords and messages.
Author: https://github.com/febzey
Latest version: 1.0.0

<p align="center"><img src="icon.png" /></p>

<h1 align="center"> QuickEncrypt (WIP)</h1>

<p align="center"> A minimal, easy to use hashing and encryption package. </p>

---
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/Febzey/quickencrypt/graphs/commit-activity) [![made-with-javascript](https://img.shields.io/badge/Made%20with-JavaScript-1f425f.svg)](https://www.javascript.com) [![Npm package version](https://badgen.net/npm/v/@febzey/quickencrypt)](https://npmjs.com/package/@febzey/quickencrypt) [![GitHub issues](https://img.shields.io/github/issues/Febzey/quickencrypt.svg)](https://github.com/Febzey/quickencrypt/issues/)

<p align="center">

</p>

<p> QuickEncrypt is a nodejs package used for quickly and easily encrypting strings, this package relies solely on node's build in Crypto module, QuickEncrypt just makes it easier to use.</p>

<h3> List of features </h3>

<ul>
  <li>Encrypt strings with common encrypting and hashing algorithims.</li>
  <li>Multiple encryption options.</li>
  <li>Ease of use, beginner friendly.</li>
</ul>

<h3> Download & Installation </h3>

```shell
$ npm i @febzey/quickencrypt
$ yarn add @febzey/quickencrypt
```
<h3>Contributing</h3>
Keep it simple. Keep it minimal. Don't put every single feature just because you can.
npm package: @fec/eleventy-plugin-asset-pipeline
Description: A plugin to manage assets in an Eleventy site. It adds a hash to the file name to help with cache busting and it gives you the ability to transform the asset contents.
Author: Florian Eckerstorfer
Latest version: 0.1.2

# @fec/eleventy-plugin-asset-pipeline

> A plugin to manage assets in an Eleventy site. It adds a hash to the file name to help with cache busting and it gives you the ability to transform the asset contents.

## Installation

```bash
npm install -D @fec/eleventy-plugin-asset-pipeline
```

## Configuration

After installing the plugin you have to enable it in your Eleventy configuration:

```javascript
eleventyConfig.addPlugin(cssPipelinePlugin, {});
```

The second parameters are the options of the plugin.

| Option          | Description                                                  | Default value       |
| --------------- | ------------------------------------------------------------ | ------------------- |
| `extensions`    | List of file extensions that should be handled by the plugin | `[]`                |
| `compilerFns`   | Functions for each file type                                 | `{}`                |
| `ignorePrivate` | Ignore private files, ie, files starting with `_`            | `true`              |
| `manifest`      | Path to manifest file                                        | `'./manifest.json'` |

## Filters

### `hashFileName`

Given a file name and it returns the hashed file name. For example,

```html
<link rel="stylesheet" href="{{ '/css/main.css' | hashFileName }}" />
```

## Examples

### CSS with PostCSS

With the following configuration `.css` and `.js` files processed. JavaScript files are just hashed, while CSS files are hashed and the content is run through PostCSS.

```javascript
eleventyConfig.addPlugin(cssPipelinePlugin, {
  extensions: ["css", "js"],
  compilerFns: {
    css: (inputContent, inputFile) =>
      postcss([require("postcss-import")])
        .process(inputContent, { from: inputFile })
        .then((result) => result.css),
  },
});
```

## Code of Conduct

[CODE_OF_CONDUCT](./CODE_OF_CONDUCT.md)

## Changelog

[CHANGELOG](./CHANGELOG.md)

## License

[LICENSE](./LICENSE.md)
npm package: @fec/postcss-url-mapping
Description: Transform URLs in your CSS using mappings.
Author: Florian Eckerstorfer
Latest version: 1.0.1

# @fec/postcss-url-mapping

> Plugin for [PostCSS](https://postcss.org/) to transform URLs using a mapping object.

Created by 👨‍💻 [Florian Eckerstorfer](https://florian.ec) in 🎡 Vienna, Europe.

## Usage and Synergies

I have created this plugin in order to use hashed file names in my CSS files. I use a plugin for Eleventy that I created, [@fec/eleventy-plugin-asset-pipeline](https://codeberg.org/fec/eleventy-plugin-asset-pipeline), to add a hash of the file content to its name and store those mappings in a JSON file. This plugin can use these mappings and update every URL used in my CSS via PostCSS.

## Installation and Configuration

First you should install the plugin using NPM:

```bash
npm install -D @fec/postcss-url-mapping
```

Then you can configure the plugin in your PostCSS setup:

```javascript
const postCSSUrlMapping = require("@fec/postcss-url-mapping");

// read mappings, for example
const mappings = JSON.parse(readFileSync("./mappings.json"));

postcss([postCSSUrlMapping({ mappings })])
  .process(inputContent, { from: inputFile })
  .then((result) => result.css);
```

The `mappings.json` file should look like this:

```json
{
  "/css/main.css":"/css/main.07179313.css",
  "/time/time.css":"/time/time.f3d903f2.css"
  "/time/time.js":"/time/time.f4de862d.js"
}
```

This would replace every occurrence of the left side inside an `url()` function with the right side in your `inputContent`.

## Change log

See [CHANGELOG](./CHANGELOG.md)

## Code of Conduct

See [CODE_OF_CONDUCT](./CODE_OF_CONDUCT.md)

## License

See [LICENSE](./LICENSE.md)
npm package: @fec/remark-a11y-emoji
Description: Remark plugin to add a label to emoji and make them accessible.
Author: Florian Eckerstofer
Latest version: 4.0.2

# remark-a11y-emoji

[![Unit tests](https://github.com/florianeckerstorfer/remark-a11y-emoji/actions/workflows/test.yml/badge.svg)](https://github.com/florianeckerstorfer/remark-a11y-emoji/actions/workflows/test.yml)

Plugin for [Remark](https://remark.js.org) to make emoji accessible. This plugin wraps emoji in a `<span>` and sets the name of the emoji as `aria-label`. For example, the input `inline 🎉 emoji` becomes:

```html
inline <span role="img" aria-label="party popper">🎉</span> emoji
```

`remark-a11y-emoji` also works with [Gatsby](https://www.gatsbyjs.com).

Made by 👨‍💻[Florian Eckerstorfer](https://florian.ec) in beautiful 🎡 Vienna, Europe.

## Table of Contents

1. [Installation](#installation)
2. [Configuration](#configuration)
3. [Configuration with Gatsby](#configuration-with-gatsby)
4. [Code of Conduct](#code-of-conduct)
5. [Contributing](#contributing)
6. [License](#license)
7. [Change-log](#change-log)

## Installation

You need to install `@fec/remark-a11y-emoji` with NPM or Yarn. Since this is a plugin for Remark, I assume you already have Remark installed and configured.

```bash
npm install -D @fec/remark-a11y-emoji
yarn add --dev @fec/remark-a11y-emoji
```

## Configuration

You can use `@fec/remark-a11y-emoji` like any other Remark plugin. The plugin produces an AST ([hast](https://github.com/syntax-tree/hast), [rehype](https://github.com/rehypejs/rehype)), which you can serialize to HTML with [rehype-stringify](https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify):

```js
import remark from 'remark';
import a11yEmoji from '@fec/remark-a11y-emoji';
import rehypeStringify from 'rehype-stringify';
import remarkRehype from 'remark-rehype';

const processor = remark()
  .use(a11yEmoji)
  .use(remarkRehype)
  .use(rehypeStringify);
```

## Configuration with Gatsby

```javascript
module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // ...
          '@fec/remark-a11y-emoji/gatsby',
        ],
      },
    },
  ],
};
```

## Code of Conduct

See [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md)

## Contributing

To contribute to `@fec/remark-a11y-emoji`, follow these steps:

1. Fork this repository.
2. Create a branch: `git checkout -b <branch_name>`.
3. Install dependencies: `npm install`
4. Make your changes (and don't forget to update the tests)
5. Don't forgot to run the tests: `npm test`
6. Commit your changes: `git commit -m '<commit_message>'`
7. Push to the original branch: `git push origin <project_name>/<location>`
8. Create the pull request.

Alternatively see the GitHub documentation on [creating a pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).

## License

See [LICENSE](LICENSE.md)

## Change log

See [CHANGELOG](CHANGELOG.md)
npm package: @feca-hooks/use-axios
Description: React Hook to fetch or re-fetch api using axios easier.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-axios

React Hook to **fetch or re-fetch api using axios easier.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-axios`

#### npm

`npm i @feca-hooks/use-axios`

<br />

## Usage

### Code

```
import React from "react";
import useAxios from "@feca-hooks/use-axios";

function App() {
  const {
    response: {
      loading, data, error
    },
    refetch
  } = useAxios({ url: API_URL });

  return (
    <div>
      <h1>{ data && data.status }</h1>
      <h2>{ error && error.message }</h2>
      <h3>{ loading && "fetching..." }</h3>
      <button onClick={refetch}>Refetch API</button>
    </div>
  );
}
```

### Arguments

| **Argument**  | **Type** | **Description**                                            | **Required** | **Default value** |
| ------------- | -------- | ---------------------------------------------------------- | ------------ | ----------------- |
| options       | object   | [Reference](https://github.com/axios/axios#request-config) | yes          | undefined         |
| axiosInstance | object   | You can choose axios instance customly.                    | no           | defaultAxios      |

### Return

| **Return value**                     | **Type** | **Description**                                                  |
| ------------------------------------ | -------- | ---------------------------------------------------------------- |
| object(`response`, `refetch`)        | object   | See below                                                        |
| response(`loading`, `data`, `error`) | object   | Response data of fetch api.                                      |
| refetch                              | function | The refetch function executes when the user want to refetch api. |
npm package: @feca-hooks/use-confirm
Description: React Hook to create confirm message faster and easier.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-confirm

React Hook to **create confirm message faster and easier.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-confirm`

#### npm

`npm i @feca-hooks/use-confirm`

<br />

## Usage

### Code

```
import React from "react";
import useConfirm from "@feca-hooks/use-confirm";

function App() {
  const onConfirm = () => {
    console.log("submit confirm!");
  }

  const openConfirm = useConfirm("Really?", onConfirm);

  return <button onClick={openConfirm}>Delete Something</button>;
}
```

### Arguments

| **Argument** | **Type** | **Description**                                        | **Required** |
| ------------ | -------- | ------------------------------------------------------ | ------------ |
| message      | string   | Message to show the user on the confirmation propmt.   | yes          |
| onConfirm    | function | The callback function executes when the user confirms. | yes          |
| onCancel     | function | The callback function executes when the user cancels.  | no           |

### Return

| **Return value** | **Type** | **Description**                                 |
| ---------------- | -------- | ----------------------------------------------- |
| function         | function | Function wrapped around the confirmation logic. |
npm package: @feca-hooks/use-event
Description: React Hook to add event on element or component faster and easier.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-event

React Hook to **add event on element or component faster and easier.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-event`

#### npm

`npm i @feca-hooks/use-event`

<br />

## Usage

### Code

```
import React from "react";
import useEvent from "@feca-hooks/use-event";

function App() {
  const onMouseEnter = (event) => {
    console.log(event.target);
  }

  const eventRef = useEvent("mouseEnter", onMouseEnter);

  return <div ref={eventRef}>Hover Me!</div>;
}
```

### Arguments

| **Argument** | **Type** | **Description**                                        | **Required** |
| ------------ | -------- | ------------------------------------------------------ | ------------ |
| eventType    | string   | The any vaild event type of event listener.            | yes          |
| onEvent      | function | The callback function executes when the event occured. | yes          |

### Return

| **Return value** | **Type**      | **Description**                                               |
| ---------------- | ------------- | ------------------------------------------------------------- |
| Ref of element   | object(`ref`) | You can apply custom event setting property `ref` using this. |
npm package: @feca-hooks/use-fadein
Description: React Hook to add fade-in animation faster and easier.
Author: pshtony1
Latest version: 1.0.2

# @feca-hooks/use-fadein

React Hook to **add fade-in animation faster and easier.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-fadein`

#### npm

`npm i @feca-hooks/use-fadein`

<br />

## Usage

### Code

```
import React from "react";
import useFadeIn from "@feca-hooks/use-fadein";

function App() {
  // Arguments: fromOpacity, toOpacity, duration, cubicBezier, delay
  const fadeIn = useFadeIn(0.3, 1, 0.5, "ease-in-out", 0.5);

  return <h1 { ...fadeIn }>Hello, There!</h1>;
}
```

### Arguments

| **Argument** | **Type** | **Description**                       | **Required** | **Default value** |
| ------------ | -------- | ------------------------------------- | ------------ | ----------------- |
| fromOpacity  | number   | Start opacity of fade-in animation.   | no           | 0                 |
| toOpacity    | number   | End opacity of fade-in animation.     | no           | 1                 |
| duration     | number   | Duration of fade-in animation.        | no           | 0.3               |
| cubicBezier  | string   | Cubic bezier of fade-in animation.    | no           | "linear"          |
| delay        | number   | Animation delay of fade-in animation. | no           | 0                 |

### Return

| **Return value**           | **Type** | **Description**                                                                 | **Default value**                                   |
| -------------------------- | -------- | ------------------------------------------------------------------------------- | --------------------------------------------------- |
| Properties(`ref`, `style`) | object   | An object containing properties of element you want to apply fade-in animation. | `{ ref: element, style: { opacity: fromOpacity } }` |
npm package: @feca-hooks/use-input
Description: React Hook to create input element faster.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-input

React Hook to **create input element faster.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-input`

#### npm

`npm i @feca-hooks/use-input`

<br />

## Usage

### Code

```
import React from "react";
import useInput from "@feca-hooks/use-input";

function App() {
  // validator must return true/false.
  const validator = () => {
    if (value.length > 10) return false;

    return true;
  }

  const { value, onChange } = useInput("", validator);

  return <input type="text" onChange={onChange} />;
}
```

### Arguments

| **Argument** | **Type** | **Description**                                            | **Required** |
| ------------ | -------- | ---------------------------------------------------------- | ------------ |
| defaultValue | string   | Default value of the input text.                           | no           |
| validator    | function | The callback function validate the input value can change. | no           |

### Return

| **Return value** | **Type** | **Description**                                                                                                                                   |
| ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Value State      | object   | An object containing the `value`, `onChange`. `value` is current input value. `onChange` is event function executes when input value has changed. |
npm package: @feca-hooks/use-prevent-leave
Description: React Hook to prompt the user for confirmation before leaving the page.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-prevent-leave

React Hook to **prompt the user for confirmation before leaving the page.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-prevent-leave`

#### npm

`npm i @feca-hooks/use-prevent-leave`

<br />

## Usage

### Code

```
import React from "react";
import usePreventLeave from "@feca-hooks/use-prevent-leave";

function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();

  const fetchData = async () => {
    enablePrevent();
    await fetchApi();
    disablePrevent();
  };

  return <button onClick={fetchData}>Fetch</button>;
}
```

### Return

| **Return value**       | **Type** | **Description**                                                                                                                   |
| ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
| enable/disable Prevent | object   | An object containing functions `enablePrevent` and `disablePrevent`, use this functions to enable/disable the leaving prevention. |
npm package: @feca-hooks/use-scroll
Description: React Hook to create scroll event faster and easier.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-scroll

React Hook to **create scroll event faster and easier.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-scroll`

#### npm

`npm i @feca-hooks/use-scroll`

<br />

## Usage

### Code

```
import React from "react";
import useScroll from "@feca-hooks/use-scroll";

function App() {
  const onScroll = () => {
    console.log("Scrolling now.");
  };

  const { scrollX, scrollY } = useScroll(onScroll);

  return <h1>Scroll Position: { scrollX } / { scrollY }</h1>;
}
```

### Arguments

| **Argument** | **Type** | **Description**                                           | **Required** |
| ------------ | -------- | --------------------------------------------------------- | ------------ |
| onScroll     | function | The callback function executed when scroll event happens. | no           |

### Return

| **Return value** | **Type** | **Description**                                                          | **Default value**            |
| ---------------- | -------- | ------------------------------------------------------------------------ | ---------------------------- |
| Coords           | object   | An object containing the x, y coordinates of the current scroll position | `{ scrollX: 0, scrollY: 0 }` |
npm package: @feca-hooks/use-title
Description: React Hook to update your document's title.
Author: pshtony1
Latest version: 1.0.1

# @feca-hooks/use-title

React Hook to **update your document's title.**

<br />

## How to Install

#### yarn

`yarn add @feca-hooks/use-title`

#### npm

`npm i @feca-hooks/use-title`

<br />

## Usage

### Code

```
import React from "react";
import useTitle from "@feca-hooks/use-title";

function App() {
  useTitle("This is Title");
  return <h1>Hello!</h1>;
}
```

### Arguments

| **Argument** | **Type** | **Description**                            | **Required** |
| ------------ | -------- | ------------------------------------------ | ------------ |
| title        | string   | The title you want to set on your document | yes          |
npm package: @fecori/react-card-input
Description: Friendly React credit card input with validation and preview.
Author: Francisco Cordova
Latest version: 0.0.6

React Credit Cards
===

[![NPM](https://badge.fury.io/js/@fecori%2Freact-card-input.svg)](https://www.npmjs.com/package/@fecori/react-card-input)

A modern credit card component for ReactJS.

![democard](https://raw.githubusercontent.com/amarofashion/react-credit-cards/master/docs/media/rccs.gif)


### Install
```
npm install --save-dev @fecori/react-card-input
```

09/03/2026 - Se agrego logo de algunas tarjetas de credito/debito
npm package: @fect-ui/themes
Description: @fect-ui/vue layout themes and style
Author: Fect Org
Latest version: 2.2.0

# themesProvider/@vue

@fect-ui/vue layout themes and style

## Usage

### install

```shell
yarn add @fect-ui/themes

npm install @fect-ui/themes

```

### import

- In `.js` file:` import from '@fect-ui/themes'`

- Or `.(css|less|sass....)` file:`@import '~@fect-ui/themes/main.css'`
npm package: @fect-ui/vue
Description: Minimalist UI components built on Vue
Author: XeryYue
Latest version: 1.6.1

<p align="center" height="170">
  <img  style="height:170px;width:170px;" height="170" width="170" src="https://user-images.githubusercontent.com/52351095/118687359-7e809480-b837-11eb-8083-b0504ec79652.png"/>
</p>

<p align="center">
 <img src="https://img.shields.io/npm/dm/@fect-ui/vue?style=for-the-badge" alt="downloads" />
 <img src="https://img.shields.io/npm/v/@fect-ui/vue?color=%230761d1&logoColor=%23000000&style=for-the-badge" alt="npm Version" />
 <img src="https://img.shields.io/codecov/c/gh/fect-org/fect?style=for-the-badge" alt="Coverage Status" />
 <img src="https://img.shields.io/github/workflow/status/fect-org/fect/CI?style=for-the-badge" alt="CI Status" />
</p>

> Modern and minimalist Vue3 UI library,originating from Geist

## Quick start

1. run `yarn add @fect-ui/vue` or `npm install @fect-ui/vue` install it

2. import into project

```js
import { createApp } from 'vue'
import App from './App.vue'
import FectUI from '@fect-ui/vue'
import '@fect-ui/vue/dist/cjs/main.css'

createApp(App).use(FectUI).mount('#app')
```

## Browser Support

Fect supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).

## Documentation

- [Canary Document](https://vue-rc.miaya.art/en-us)

## All Contributors

Thanks to the following friends for their contributions to Fect:

<a href="https://github.com/fect-org/fect/graphs/contributors">
  <img src="https://opencollective.com/fect/contributors.svg?width=890&button=false" alt="contributors">
</a>

## Development

- [Contributing Guide](https://github.com/fect-org/fect/blob/master/.github/CONTRIBUTING.md)

## Acknowledgements

Thanks to [JetBrains](https://www.jetbrains.com/) for allocating free open-source licences for IDEs such as WebStorm.

<p align="right">
<img width="250px" height="250px" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_square.png" alt="JetBrains Black Box Logo logo.">
</p>

## LICENSE

[MIT](./LICENSE)
npm package: @fect-ui/vue-icons
Description: Well prepared high quality Icon Library for fect
Author: kanno
Latest version: 2.2.0

<p align="center" height="170">
<img  style="height:170px;width:170px;" height="170" width="170"
src="https://user-images.githubusercontent.com/52351095/118687359-7e809480-b837-11eb-8083-b0504ec79652.png"/>
</p>

## Quick Start

1. Run `yarn add @fect-ui/vue-icons` or `npm install @fect-ui/vue-icons` install it.
2. Import into project.

# Features

- Hook desgin that follows the react philosophy.

## Tips

`Icon` is peer peer depend `@fect-ui/themes`. If you don't use `@fect-ui/vue` you should
install the `theme` package :)
npm package: @fecusio/core-js
Description: Fecusio Core API SDK
Author: Fecusio
Latest version: 1.3.3

<p align="center"><a href="https://fecusio.com" target="_blank"><img src="https://fecusio.com/logo.png" width="400"></a></p>

# @fecusio/core-js

[![Lint](https://github.com/fecusio/core-js/actions/workflows/lint.yml/badge.svg)](https://github.com/fecusio/core-js/actions/workflows/lint.yml)

A lightweight JavaScript/TypeScript SDK for Fecusio Core service.

You can find the Core API documentation [here](https://fecusio.com/docs/core/).

## Installation

```bash
npm install @fecusio/core-js
```

## Usage

```typescript
import { FecusioCore } from '@fecusio/core';

// Initialize the client
const fecusio = new FecusioCore({
  environmentKey: 'your-environment-key'
});

// Basic usage
const evaluation = await fecusio.evaluate();

if (evaluation.isFeatureEnabled('my_feature')) {
    // Feature is enabled
} else {
    // Feature is disabled
}
```

## API

### `new FecusioCore(options)`

Options:
- `environmentKey` (required): Your Fecusio environment key
- `defaultFlags`: Fallback flags when API is unavailable
- `defaultIdentities`: Array of identity IDs
- `baseURL`: Custom API endpoint (default: https://core.fecusio.com/v1/)
- `timeout`: Request timeout in ms (default: 5000)

### `evaluate(identities?, fresh?)`

Evaluates feature flags, returns an Evaluation object:
- `identities`: Optional array of user identities
- `fresh`: Force a fresh evaluation (bypass cache)

### `clearCache()`

Method to manage the evaluation cache.

## License

MIT