open-index/open-npm huggingface dataset:
npm package: @mb1337/vite-plugin-commonjs
Description: Convert CommonJS modules to ESM.
Author: murilob1337
Latest version: 0.0.9

# Vite Plugin CommonJS

A Vite plugin to convert CommonJS modules to ESM.

## Installation

```bash
npm i @mb1337/vite-plugin-commonjs --save-dev
```

## Usage

```js
import { viteCommonjs } from '@mb1337/vite-plugin-commonjs'

export default {
  plugins: [
    viteCommonjs()
  ]
}
```

## Options

- `exclude: string[]`
  Dependencies to exclude from transform.

-  `include: string[]`
  Dependencies that only need to be transform.

## CommonJS module in node_modules

```js
import { esbuildCommonjs } from '@mb1337/vite-plugin-commonjs'

export default {
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        esbuildCommonjs(['react-calendar', 'react-date-picker'])
      ]
    }
  }
}
```

## Options

- `include: string[]`
  Dependent modules need to be transform.
npm package: @mb1337/vite-plugin-replace
Description: Replace strings in files while bundling.
Author: murilob1337
Latest version: 0.0.9

# Vite Plugin Replace

A Vite plugin which replaces targeted strings in files while bundling.

## Installation

```bash
npm i @mb1337/vite-plugin-replace --save-dev
```

## Usage

```js
import { vitePluginReplace } from "@mb1337/vite-plugin-replace"

export default {
  plugins: [
    vitePluginReplace({
      replacements: [
        {
          from: "__BASE__",
          to: "/"
        },
        {
          from: /__BASE__/g,
          to: "/"
        }
      ]
    })
  ]
}
```
npm package: @mb3/react-style-manager
Description: A react package to more easily manage the stateful styling of your components.
Author: MB3 Technologies Inc
Latest version: 0.2.0

# react-style-manager

[![CircleCI](https://circleci.com/gh/mb3online/react-style-manager.svg?style=shield&circle-token=91dc3f3ee64e7396e268b64d2bb70b243e79e73b)](https://circleci.com/gh/mb3online/react-style-manager)

A react package to more easily manage the stateful styling of your components.

## Getting started

1. Run `npm install react-style-manager --save` to install the package.

2. Call the `StyleManager` composite function, passing through your component.

3. Register your styling rules in your components' constructor, defining the conditions and applicable styles for each rule.

An example of the implementation code for a given `SimpleButton` component:

```javascript
    import StyleManager from 'react-style-manager';

    class SimpleButton extends React.Component{
        constructor(props) {
            super(props)

            const { styleManager } = this.props;

            styleManager
                .change('root')
                .when(this.isDisabled)
                .apply({
                    opacity: 0.8,
                    cursor: 'not-allowed',
                });

            styleManager
                .change('button')
                .when(this.isDisabled)
                .apply({
                    color: '#a7a7a7',
                })
                .when(this.isHovered)
                .apply({
                    boxShadow: '2px 4px 7px 0px rgba(167,167,167,1)',
                });
        }

        isDisabled() {
            return !!this.props.disabled;
        }

        isHovered() {
            return !!this.state.hovered;
        }

        render() {
            const { styleManager } = this.props.styleManager;
            const styles = styleManager.generate();

            <div style={styles.root}>
                <button style={styles.button}></button>
            </div>
        }
    }

    export default StyleManager(SimpleButton);
```
npm package: @mb3r/component-library
Description: My own skinned component library
Author: Amber Williams
Latest version: 1.16.2

# Component library & playground

#### Dark mode

<p align="center">
    <img alt="Dark theme components preview"  src="https://github.com/Amber-Williams/component-library/blob/main/assets/Dark.png" width="500"/>
</p>

#### Light mode

<p align="center">
    <img alt="Light theme components preview"  src="https://github.com/Amber-Williams/component-library/blob/main/assets/Light.png" width="500"/>
</p>

### Component library

This library extends MUI's material library which a React wrapper built on Google's Material UI component library. It transpiles down to raw JavaScript so should be able to be used with any React projects, _potentially_ Web Components and other JavaScript frameworks as well.

- install dependencies - `pnpm install`
- compile the library - `pnpm build`

### Playground

This is an ease of use playground using Vite that can plug into the local component library's build files used to test before publishing

- install dependencies `cd playground && pnpm install`

There isn't hot reloading _currently_ so you will need to uninstall the component library package, to ensure package caching doesn't get in the way the best way to do this is to remove all packages before reinstalling and rerunning

- _recommended_ manual reload - `cd playground && rm -rf node_modules && pnpm install && pnpm dev`
npm package: @mbaas/baas-mcp
Description: AIApp BaaS 인증 시스템 MCP 서버 - AI 기반 문서 검색 및 코드 자동 생성
Author: jjunmomo
Latest version: 2.7.4

# @mbaas/baas-mcp

AIApp BaaS 인증 시스템 MCP 서버

## 소개

`@mbaas/baas-mcp`는 AIApp BaaS 인증 시스템과의 연동을 위한 표준 입출력 기반 MCP(Model Context Protocol) 서버입니다.
이 서버는 LLM(대형 언어 모델)이 AIApp BaaS 공식 문서에서 키워드 기반으로 관련 정보를 탐색하고, 프레임워크별 클라이언트 코드를 자동 생성할 수 있도록 다양한 MCP 도구를 제공합니다.

[AIApp BaaS 개발자센터](https://docs.aiapp.link)

[BaaS 인증 API 가이드](https://docs.aiapp.link/api/auth)

## 설치

이 패키지는 Node.js 18+ 환경에서 동작합니다.

아래와 같이 설정하여 설치할 수 있습니다.

```json
{
  "mcpServers": {
    "baas-mcp": {
      "command": "npx",
      "args": ["-y", "@mbaas/baas-mcp@latest"]
    }
  }
}
```

### Project ID 설정 (권장)

```json
{
  "mcpServers": {
    "baas-mcp": {
      "command": "npx",
      "args": [
        "-y", 
        "@mbaas/baas-mcp@latest", 
        "--project-id=your-actual-project-id"
      ]
    }
  }
}
```

## 도구 목록

### `search-documents`

- **설명**: AIApp BaaS 인증 시스템 문서를 키워드 배열로 검색합니다. API 문서, 구현 가이드, 보안 가이드, 예제 코드 등 모든 문서를 통합 검색합니다.
- **파라미터**:
  - `keywords: string[]` — 검색할 키워드 배열
  - `category?: string` — 카테고리 필터 (api|templates|security|examples|dev|frameworks|errors|config)
  - `searchMode?: string` — 검색 모드 (broad|balanced|precise)

### `get-document-by-id`

- **설명**: 문서 ID로 특정 BaaS 인증 시스템 문서의 전체 내용을 조회합니다.
- **파라미터**:
  - `id: number` — 조회할 문서의 ID

### `get-project-config`

- **설명**: 현재 MCP 서버에 설정된 프로젝트 ID를 확인합니다.
- **파라미터**: 없음

## 라이선스

MIT License

## 지원

- 📧 Email: mbaas.tech@gmail.com
- 🐛 버그 리포트: https://github.com/mbaas-inc/BaaS-MCP/issues
- 📖 문서: https://docs.aiapp.link

---

**Built with ❤️ by mBaaS Team**
npm package: @mbakereth/ldapjs
Description: LDAP client and server APIs
Latest version: 3.0.16

# LDAPjs

This is a fork of the original node-ldapjs.  The original was decomissioned so I forked it.  At the moment it still works and I have not had to change it.  Please be aware if you use this package that I am only maintaining it inasmuch as I need it for my own work.

[![Build Status](https://github.com/ldapjs/node-ldapjs/workflows/Lint%20And%20Test/badge.svg)](https://github.com/ldapjs/node-ldapjs/actions)
[![Coverage Status](https://coveralls.io/repos/github/ldapjs/node-ldapjs/badge.svg)](https://coveralls.io/github/ldapjs/node-ldapjs/)

LDAPjs makes the LDAP protocol a first class citizen in Node.js.

## Usage

For full docs, head on over to <http://ldapjs.org>.

```javascript
var ldap = require('ldapjs');

var server = ldap.createServer();

server.search('dc=example', function(req, res, next) {
  var obj = {
    dn: req.dn.toString(),
    attributes: {
      objectclass: ['organization', 'top'],
      o: 'example'
    }
  };

  if (req.filter.matches(obj.attributes))
  res.send(obj);

  res.end();
});

server.listen(1389, function() {
  console.log('ldapjs listening at ' + server.url);
});
```

To run that, assuming you've got the [OpenLDAP](http://www.openldap.org/)
client on your system:

    ldapsearch -H ldap://localhost:1389 -x -b dc=example objectclass=*

## Installation

    npm install ldapjs

## Node.js Version Support

As of `ldapjs@3` we only support the active Node.js LTS releases.
See [https://github.com/nodejs/release#release-schedule][schedule] for the LTS
release schedule.

For a definitive list of Node.js version we support, see the version matrix
we test against in our [CI configuration][ci-config].

Note: given the release date of `ldapjs@3`, and the short window of time that
Node.js v14 had remaining on its LTS window, we opted to not support Node.js
v14 with `ldapjs@3` (we released late February 2023 and v14 goes into
maintenance in late April 2023). Also, Node.js v14 will be end-of-life (EOL) on
September 11, 2023; this is a very shortened EOL timeline and makes it even
more reasonable to not support it at this point.

[schedule]: https://github.com/nodejs/release#release-schedule
[ci-config]: https://github.com/ldapjs/node-ldapjs/blob/master/.github/workflows/main.yml

## License

MIT.

## Bugs

See <https://github.com/ldapjs/node-ldapjs/issues>.
npm package: @mbakereth/ldapjs-asn1
Description: Contains parsers and serializers for ASN.1 (currently BER only)
Latest version: 2.0.2

# `@mbakereth/ldapjs-asn1`

`@mbakereth/ldapjs-asn1` is a library for encoding and decoding ASN.1 datatypes in pure
JS. Currently BER encoding is supported.

### Decoding

The following reads an ASN.1 sequence with a boolean.

```js
const { BerReader, BerTypes } = require('@mbakereth/ldapjs-asn1')
const reader = new BerReader(Buffer.from([0x30, 0x03, 0x01, 0x01, 0xff]))

reader.readSequence()
console.log('Sequence len: ' + reader.length)
if (reader.peek() === BerTypes.Boolean)
console.log(reader.readBoolean())
```

### Encoding

The following generates the same payload as above.

```js
const { BerWriter } = require('@mbakereth/ldapjs-asn1');
const writer = new BerWriter();

writer.startSequence();
writer.writeBoolean(true);
writer.endSequence();

console.log(writer.buffer);
```

## Installation

```sh
npm install @mbakereth/ldapjs-asn1
```

## Bugs

See <https://github.com/ldapjs/asn1/issues>.
npm package: @mbakereth/ldapjs-attribute
Description: API for handling LDAP entry attributes
Latest version: 1.0.2

# @mbakereth/ldapjs-attribute

Provides a class for representing LDAP entry attributes as described in
[RFC 4512 §2.5](https://www.rfc-editor.org/rfc/rfc4512#section-2.5).

## License

MIT.
npm package: @mbakereth/ldapjs-controls
Description: LDAP control objects
Author: James Sumners
Latest version: 2.1.3

# @mbakereth/ldapjs-controls

This package provides implementations of [LDAP controls][controls]. The
primary purpose of this library is to facilitate client and server
implementations in the [`ldapjs`](https://npm.im/ldapjs) package.

## Docs

At this time, one must reference the code to learn about the available
controls and their methods.

[controls]: https://datatracker.ietf.org/doc/html/rfc4511#section-4.1.11
npm package: @mbakereth/ldapjs-protocol
Description: Provides constants for LDAP ASN.1 tags and values.
Author: James Sumners
Latest version: 1.2.3

# `@mbakereth/ldapjs-protocol`

This package provides a set of constant values and ASN.1 tags that are used
throughout the LDAP protocol. The constants are taken primarily from the
corresponding RFC: https://datatracker.ietf.org/doc/html/rfc4511.

For reference on how tags are constructed, read:
https://web.archive.org/web/20220525004444/https://ldap.com/ldapv3-wire-protocol-reference-asn1-ber/
npm package: @mbakgun/n8n-nodes-couchbase
Description: Community nodes for using Couchbase Key-Value, Query, Full-Text Search, and Couchbase Search Vector Store with n8n.
Author: Elliot Scribner
Latest version: 1.1.6

# n8n-nodes-couchbase

This is a collection of n8n community nodes for using Couchbase services within n8n workflows.

Couchbase is a distributed NoSQL cloud database that offers the robustness of a relational database with the flexibility of a JSON document database, featuring key-value operations, SQL++ querying, and powerful search capabilities including vector search.

[n8n](https://n8n.io/) is a [fair-code licensed](https://docs.n8n.io/reference/license/) workflow automation platform.

[Nodes](#nodes)
[Installation](#installation)
[Credentials](#credentials)  
[Compatibility](#compatibility)  

## Nodes
Click on the node name to view its detailed documentation.
- [**Couchbase**](nodes/Couchbase/README.md): This node allows you to perform operations on The Couchbase KV, Query, and Search services. It supports creating, reading, updating, and deleting documents, as well as executing SQL++ queries and full-text searches.
- [**Couchbase Search Vector Store**](nodes/vector_store/VectorStoreCouchbaseSearch/README.md): This node allows you to perform vector search operations using the Couchbase Search Service. It supports retrieving, updating, and inserting documents in a vector database, as well as using the vector store as a tool for AI agents.

## Installation

Follow the [installation guide](https://docs.n8n.io/integrations/community-nodes/installation/) in the n8n community nodes documentation.

## Credentials

To use the Couchbase node, you'll need to set up Couchbase credentials in n8n:

1. **Prerequisites**:
	- A running Couchbase cluster (using [Couchbase Capella](https://cloud.couchbase.com/) in the cloud, or Couchbase Server)
	- [Database credentials](https://docs.couchbase.com/cloud/clusters/manage-database-users.html#create-database-credentials) with appropriate permissions for the operations you want to perform
   - [Allow IP address](https://docs.couchbase.com/cloud/clusters/allow-ip-address.html) for your n8n instance

2. **Credential Parameters**:
	- **Connection String**: The connection string to your Couchbase server (e.g., `couchbase://localhost`)
	- **Username**: Database access username
	- **Password**: Database access password

## Compatibility

This node has been tested with n8n version 1.86.0.
npm package: @mbalex99/markdown-it-fence
Description: fence customize plugin for markdown-it
Author: Maximilian Alexander
Latest version: 1.0.1

# markdown-it-fence

[![NPM version](https://img.shields.io/npm/v/markdown-it-fence.svg?style=flat)](https://npmjs.com/package/markdown-it-fence) [![NPM downloads](https://img.shields.io/npm/dm/markdown-it-fence.svg?style=flat)](https://npmjs.com/package/markdown-it-fence) [![Build Status](https://img.shields.io/circleci/project/geekplux/markdown-it-fence/master.svg?style=flat)](https://circleci.com/gh/geekplux/markdown-it-fence) [![codecov](https://codecov.io/gh/geekplux/markdown-it-fence/branch/master/graph/badge.svg)](https://codecov.io/gh/geekplux/markdown-it-fence)
 [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](http://donate.geekplux.com)

> fence customize plugin for markdown-it

## Install

```bash
yarn add markdown-it-fence --save
npm install markdown-it-fence --save
```

## Usage

```js
const markdownitfence = require('markdown-it-fence')

function yourPlugin (md, options) {
  return markdownitfence(md, 'yourPluginName', {
    marker: yourMarker,   // default is '`'
    render: yourRender,
    validate: yourValidate
  })
}

const md = require('markdown-it')();
md.use(yourPlugin).render(`content you want to parse`)

```

### Example

Markdown:

~~~md
:::customrender

*hello world*

```js
function() {
  console.log('hi')
}
```

:::customrender
__bar__
:::

:::
~~~

And your js

```js
markdownitfence(md, "customrender", {
  marker: ":",
  render: (tokens, idx, options, env, self) => {
    return `<div class="bar">${md.render(tokens[idx].content)}</div>`
  },
})


const html = md.use(plugin).render(myMarkdown)
console.log(html)
```

And it'll print:

```html
<div class="bar"><p><em>hello world</em></p>
<pre><code class="language-js">function() {
  console.log('hi')
}
</code></pre>
<div class="bar"><p><strong>bar</strong></p>
</div></div><pre><code></code></pre>
```


### Option params

##### marker

Type: `string`<br>
Default: `

Marker of fence block.

##### render

Type: `function`<br>
Default: [defaultRender](./src/index.js)

Render function.

##### validate

Type: `function`<br>
Default: [defaultValidate](./src/index.js)

Validate function.

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D


## Author

**markdown-it-fence** © [geekplux](https://github.com/geekplux), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by geekplux with help from contributors ([list](https://github.com/geekplux/markdown-it-fence/contributors)).

> [github.com/geekplux](https://github.com/geekplux) · GitHub [@geekplux](https://github.com/geekplux) · Twitter [@geekplux](https://twitter.com/geekplux)
npm package: @mbamobi/authentication
Description: This is abstract to Authentication based in project https://github.com/zendframework/zend-authentication
Author: Ramon Ornelas
Latest version: 3.0.0

# AuthenticationModule

This is abstract to Authentication based in project https://github.com/zendframework/zend-authentication

## Using AuthenticationModule or AuthenticationHttpModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { UrlResolverModule } from '@mbamobi/url-resolver';
import { AuthenticationHttpModule } from '@mbamobi/authentication';

const Routes = {
  'auth': {
    'url': 'http://example.com/auth'
  }
};
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    UrlResolverModule.initialize(Routes),
    AuthenticationHttpModule.initialize()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/mbamobi/authentication/blob/master/.github/CONTRIBUTING.md)
npm package: @mbamobi/configuration
Description: Manager configuration project in file json, database or static object
Author: Ramon Ornelas
Latest version: 4.0.1

# ConfigurationModule

This allow define configuration in the app with object, file json (local or external) or custom strategy (ex: yaml)

## Using  in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import ConfigurationModule
import { ConfigurationModule } from '@ramonornela/configuration';

export const APP_CONFIG = {
  'my-config': 'My Config',
  'my-config-env': {
    'dev': 'Config Dev',
    'prod': 'Config Dev'
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ConfigurationModule.initialize(APP_CONFIG, 'dev')
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/mbamobi/configuration/blob/master/.github/CONTRIBUTING.md)
npm package: @mbamobi/http-plugins-ionic
Description: Plugins HTTP additionals to projects ionic
Author: Ramon Ornelas
Latest version: 3.1.0

# HttpPluginsIonicModule

This extends of [http](https://github.com/mbamobi/http)

## Using HttpPluginsIonicModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// Import http module
import { HttpModule, DefaultPlugins } from '@mbamobi/http';

// Import http plugins ionic
import { HttpPluginsIonicModule } from '@mbamobi/http-plugins-ionic';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule.initialize(DefaultPlugins), // http module with plugin parseResponse
    HttpPluginsIonicModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/mbamobi/http/blob/master/.github/CONTRIBUTING.md)
npm package: @mbamobi/url-resolver
Description: Configuration routes to object Http of the Angular2
Author: Ramon Ornelas
Latest version: 4.0.0

# UrlResolverModule

This allow define configuration of objects request

## Using HttpModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import url-resolver module
import { UrlResolverModule } from '@mbamobi/url-resolver';

export const APP_ROUTE = {
  '_defaults': {
    'host': 'http://api.example.com/'
  },
  'user': {
    'url': 'user/{id}',
    'method': 'GET',
    'headers': {
      'content-type': 'application/json'
    },
    'params': {
      'id': {
        'type': 'number',
        'required': true
      }
    }
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    UrlResolverModule.initialize(APP_ROUTE),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/mbamobi/url-resolver/blob/master/.github/CONTRIBUTING.md)
npm package: @mbanq/dupe
Description: Create fake data to dupe your frontend or your backend
Author: FinLink, Inc.
Latest version: 1.0.0

# `dupe` your front- or backend
[![Codeship Status for Mbanq/dupe](https://app.codeship.com/projects/823affc0-1592-0137-50f9-425cf757dd68/status?branch=develop)](https://app.codeship.com/projects/327760) [![npm version](https://badge.fury.io/js/%40mbanq%2Fdupe.svg)](https://badge.fury.io/js/%40mbanq%2Fdupe)


Mbanq uses `dupe` to create fake data that can be used during software
development or for running the tests.

## Usage

### Node.js

```js
const dupe = require('@mbanq/dupe');

const randomName = dupe.name.full() // pkha romdol
const randomEmail = dupe.name.email() // pkha@romdol.com
const randomText = dupe.text.sentence()
```


## Methods
- text
  - `sentence(n)` - creates a random sentence with `n` words in it. Default
    value of `n` is 5
- name
   - `first()` - returns a random first name
   - `last()` - returns a random last name
   - `full()` - returns a random full name in the format `first(), last()`
   - `email()` - returns a random email addres. Uses `first()`, `last()` and
     a random domain extension
- location
  - `country()` - returns a random country from the list of countries
  - `city()` - returns a random city from the list of cities
- finance
  - `amount(max, precision)` - returns a random amount <= `max` with the
    provided `precision`. Default `max = 999999`, `precision = 2`. Returns
a `String`
  - `transactionType()` - returns a random transaction type from the list
  - `accountNumber(size)` - returns an 8 digit account number per default.  Can return up to 16 digit long number.
  - `accountType()` - returns a random account type from the list.
  - `randomInt()`- returns a random Integer between a `min` and a `max`
  - `cardNumber()` - returns a credit card number

## Test
```bash
npm i
npm test
```
npm package: @mbao01/common
Description: Common components/utilities for @mbao01/ui and @mbao01/next
Author: Ayomide Bakare
Latest version: 0.9.9


Shared react meta-framework agnostic components used by [@mbao01/ui](https://www.npmjs.com/package/@mbao01/ui) and [@mbao01/next](https://www.npmjs.com/package/@mbao01/next)


```bash
pnpm add @mbao01/common
```

or

```bash
npm install @mbao01/common
```

2. Install tailwind - do so by following the [installation guide](https://tailwindcss.com/docs/installation)

3. Configure tailwind

```typescript
import "@mbao01/common/styles";
```
npm package: @mbao01/next
Description: A fully ready-to-consume Next.js component and utility library
Author: Ayomide Bakare
Latest version: 0.8.11


So here it is, I have gotten really bored creating UI component from scratch for the many projects I work on.
It is high time I have a unified component library - so here it is.
I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, next, and react.

I believe in future this UI component library may extend to meta frameworks, [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).


# Description

The library is written using [Next.js](https://nextjs.org/), [Tailwind](https://tailwindcss.com/) and [Typescript](https://www.typescriptlang.org/). The library is uncooked which means there is no build step involved which means you'd have to cater for building the components into your library.

# Consuming the library

1. Ensure you have react and typescript install and setup in your project.
Then install the library

```bash
pnpm add @mbao01/next
```

or

```bash
npm install @mbao01/next
```

2. Install tailwind - do so by following the [installation guide](https://tailwindcss.com/docs/installation)

3. Configure tailwind

```typescript
import "@mbao01/common/styles";
```

```css
@import '@mbao01/common/styles';
```

You can also import styles directly from `@mbao01/common/styles`. Use this in-place of `tailwind.css` if you wish.
npm package: @mbao01/ui
Description: A fully ready-to-consume component library available in different frontend frameworks
Author: Ayomide Bakare
Latest version: 0.9.11


So here it is, I have gotten really bored creating UI component from scratch for the many projects I work on.
It is high time I have a unified component library - so here it is.
I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, and react.

I believe in future this UI component library may extend to meta frameworks like [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).


# Description

The library is written using [React](https://react.dev/), [Tailwind](https://tailwindcss.com/), [Typescript](https://www.typescriptlang.org/) and [Vite](https://vitejs.dev/). The library is uncooked which means there is no build step involved which means you'd have to cater for building the components into your library.

# Consuming the library

1. Ensure you have react and typescript install and setup in your project.
Then install the library

```bash
pnpm add @mbao01/ui
```

or

```bash
npm install @mbao01/ui
```

2. Install tailwind - do so by following the [installation guide](https://tailwindcss.com/docs/installation)

3. Configure tailwind

```typescript
export default {
  content: [
    "node_modules/@mbao01/(common|ui)/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
    ...
  ],
  "plugins": [
    ...require("@mbao01/common/plugin"), // -> import the tailwind library plugin
    ...
  ]
}
```