open-index/open-npm huggingface dataset:
npm package: @mantial/minter-store
Description: Mantial - Minter SDK
Author: Mantial
Latest version: 1.1.8

# @mantial/minter-store

Source code at https://github.com/mantial/mantial-minter-store

## Installation

    npm install @mantial/minter-store

## Build

    npm run build

## Testing library locally

First, clone the project.

Next, generate the dist folder with:

    npm run build

Install the package on the target project

    npm install @mantial/minter-store

Import from your dist folder and test it :)

## Usage

The MinterProvider must enclose the components used and receive chainId and ApiURL from the config. For example:

```
import React from 'react';
import {MinterProvider} from '@mantial/minter-store';

function App(){
    return(
        <MinterProvider chainId={"0x3"} apiURL={"https://apidev.immutable.mantial.io"} apiIMX={"https://link.ropsten.x.immutable.com"}>
            <Router />  //the rest of your app...
        </MinterProvider>
    )
}

export default App;
```

Then, you are able to use the minter context somewhere. You have three diferent methods you can use:

- handleChangeChain: to handle when you want the user to change the chain to the chainId you passed in the connfig.
- loginIMX: to login trough ImmutableX to mint NFTs
- collectionOperations: a set of functions:

  - maxBuy: returns the maximum allowed amount that the user can mint per tx.
  - getCollectionDataFromContract: returns useful data from the smart contract (price, totalSaleSupply, saleActive, collectionSupply, saleSold).
  - isSaleSupplyNotAvailable: returns true if the sale of a collection where the user is trying to mint is out of supply.
  - isSupplyNotAvailable: returns true if the collection has no more supply
  - handleBuy: handle the connection to the wallet to allow the user to mint

Example:

```
import React from 'react';
import {useMinter} from '@mantial/mantial-store';

function Mint(){
    const { collectionOperations } = useMinter();

    return(
        <div>
            <Button onClick={() => {collectionOperations.handleBuy(collection, currentSale, amount)}}>Mint your NFT</Button>
        </div>
    )
}

export default Mint;
```

Also the library allow you to use some custom hooks like:

- useLogin: allows to connect to the network, check the chain id, check if the provider exists.
- useCollection: returns all the collection data from the backend.
- useSales: returns all the sales data from the backend.

Note: There is a usePrivateMinter, the idea for this is to use it only inside this project and not export its functionality to be used externally.
npm package: @mantial/minting-sdk-vuejs
Description: Mantial - Minting SDK for VueJs
Author: Mantial
Latest version: 0.0.2

# @mantial/minting-sdk-vuejs

Source code at https://github.com/mantial/minting-sdk-vuejs

## Installation

``npm install -D @mantial/minting-sdk-vuejs``

``yarn add -D @mantial/minting-sdk-vuejs``

## Usage


### The ``@mantial/minting-sdk-vuejs`` plugin could be used like in this example:

```js
import Vue from 'vue';
import Minting from '@mantial/minting-sdk-vuejs';

const app = createApp(App)
app.use(Minting)
```


### Also use global component where you need


```vue

<template>
  <vuejs-sdk width="100%" height="500px" :config="{...}"/>
  <!--  or use number for pass size in pixels-->
  <vuejs-sdk :width="100" :height="500" :config="{...}"/>
</template>
```


### Component has props:


```
{
    //Width for iframe
    width: {
        type: [String, Number],
        required: true
    },
    //Height for iframe
    height: {
        type: [String, Number],
        required: true
    },
    //Config for iframe postMessage
     config: {
        type: Object
    }
}
```


## Mantial configuration


```ts
{
    network: 'ropsten' | 'ethereum';
    collectionSlug: string;
    amount?: number;
    showTitle?: boolean;
    amountSelector?: boolean;
    saleSelector?: boolean;
    saleId?: number;
    showDetails?: boolean;
    showErrors?: boolean;
    theme?: any; // ---> MUI v5 theme
    styles?: { // ---> allow inline styles applied as 'sx' to MUI components
        button?: any;
        mintButton?: any;
        switchNetworkButton?: any;
        container?: any;
        title?: any;
        error?: any;
        amount?: any;
        iconButton?: any;
        texts?: any;
        success?: any;
        minting?: any;
        minterContainer?: any;
        description?: any;
        installMetamaskButton?: any;
    };
    texts?: {
        title?: string;
        minting?: string;
        success?: string;
        buy?: string;
        goBack?: string;
        description?: string;
        switchNetwork?: string;
        installMetamask?: string;
    };
}
;
```
npm package: @mantic-ui/angular
Description: mantic UI for Angular
Author: KY-Programming
Latest version: 21.3.0

# mantic UI Core Components

| [Documentation](https://mantic-ui.ky-programming.de) | [Github Repository](https://github.com/KY-Programming/mantic-ui) | [Support](https://support.ky-programming.de/) |

Angular components for [Semantic UI](https://semantic-ui.com/) and [Fomantic UI](https://fomantic-ui.com/)

This is the core package. You need at least one theme! See below

## Getting Started with Semantic UI Theme

Uses the theme for Semantic UI

Documentation: [Semantic UI Angular theme for mantic UI](https://mantic-ui.ky-programming.de/semantic/start)

Package: [@mantic-ui/semantic-ui-angular](https://www.npmjs.com/package/@mantic-ui/semantic-ui-angular)

## Getting Started with Fomantic UI Theme

Uses the theme for Fomantic UI

Documentation: [Fomantic UI Angular theme for mantic UI](https://mantic-ui.ky-programming.de/fomantic/start)

Package: [@mantic-ui/fomantic-ui-angular](https://www.npmjs.com/package/@mantic-ui/fomantic-ui-angular)

## Work-in-progress

Currently we are not yet done. So please do not expect a perfect framework

If you have a issue, look in our [issue tracker on github](https://github.com/KY-Programming/mantic-ui/issues)

To support us fork our [github repository](https://github.com/KY-Programming/mantic-ui)

[Direct contact](https://support.ky-programming.de/) (German, English) via [email](https://email.support.ky-programming.de/), [WhatsApp](https://whatsapp.support.ky-programming.de/) or join our [Discord server](https://discord.mantic-ui.ky-programming.de/)
npm package: @mantic-ui/angular-doc
Description: mantic UI Components for Documentation for Angular
Author: KY-Programming
Latest version: 21.3.0

# Documentation Components for mantic UI
mantic UI Documentation components for Angular

Requires [@mantic-ui/angular](https://www.npmjs.com/package/@mantic-ui/angular)

## Work-In-Progress
Currently we are heavily working to get all components and features implemented.

To support us, fork us at [github](https://github.com/KY-Programming/mantic-ui)

## Documentation
Check out the [documentation](https://mantic-ui.ky-programming.de)
npm package: @mantic-ui/eslint-config
Description: eslint Config for mantic UI
Author: KY-Programming
Latest version: 21.2.0

# mantic UI eslint configuration

| [Documentation](https://mantic-ui.ky-programming.de) | [Github Repository](https://github.com/KY-Programming/mantic-ui) | [Support](https://support.ky-programming.de/) |

eslint configuration for mantic UI projects
npm package: @mantic-ui/semantic-ui-angular
Description: Semantic UI theme for mantic UI Angular components. Requires @mantic-ui/angular
Author: KY-Programming
Latest version: 21.3.0

# mantic UI

| [Documentation](https://mantic-ui.ky-programming.de/semantic) | [Github Repository](https://github.com/KY-Programming/mantic-ui) | [Support](https://support.ky-programming.de/) |

[Semantic UI](https://semantic-ui.com/) theme for [mantic UI](https://www.npmjs.com/package/@mantic-ui/angular) Angular components

Requires [@mantic-ui/angular](https://www.npmjs.com/package/@mantic-ui/angular)

## Example

A common button with some styling

![Example of a common button](https://raw.githubusercontent.com/KY-Programming/mantic-ui/master/projects/semantic-ui/example.png)

````
<m-button primary (click)="...">
  Save
</m-button>
<m-button (click)="...">
  Discard
</m-button>
````

## Getting Started with Semantic UI Theme

Install base package for angular and Semantic UI theme

```
npm i @mantic-ui/angular @mantic-ui/semantic-ui-angular 
```

### Import theme in AppModule

app.module.ts

```
import { SemanticUiModule } from '@mantic-ui/semantic-ui-angular';

@NgModule({
  imports: [
    ...
    SemanticUiModule
  ]
})
export class AppModule { }
```

### Apply style in AppComponent

app.component.html

```
<m-semantic-ui-theme>
    <!-- Import common styles for site -->
    <m-semantic-ui-site></m-semantic-ui-site>
    <!-- Import reset to normalize values for CSS properties -->
    <m-semantic-ui-reset></m-semantic-ui-reset>
    <!-- Import local hosted lato font -->
    <m-semantic-ui-lato-local></m-semantic-ui-lato-local>
</m-semantic-ui-theme>
```

As alternative for <m-semantic-ui-theme>, you can use a CDN

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
```

Or install via [Semantic Docs](https://semantic-ui.com/introduction/getting-started.html)

### Configure package assets usage

angular.json

```
 "projects": {
    "<your-project-name>": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              // Copy all package assets to app asset folder on build
              {
                "glob": "**/*",
                "input": "./node_modules/@mantic-ui/semantic-ui-angular/assets",
                "output": "/assets/"
              }
            }
          }
        }
      }
    }
  }
```

## Credits

Original css from [Semantic UI](https://semantic-ui.com/)

## Work-in-progress

Currently we are not yet done. So please do not expect a perfect framework

If you have a issue, look in our [issue tracker on github](https://github.com/KY-Programming/mantic-ui/issues)

To support us fork our [github repository](https://github.com/KY-Programming/mantic-ui)

[Direct contact](https://support.ky-programming.de/) (German, English) via [email](https://email.support.ky-programming.de/), [WhatsApp](https://whatsapp.support.ky-programming.de/) or join our [Discord server](https://discord.mantic-ui.ky-programming.de/)
npm package: @mantine-bites/lightbox
Description: full-screen image lightbox with thumbnails, controls, and carousel navigation
Latest version: 1.4.0

# Lightbox

Full-screen image lightbox with thumbnails, controls, and carousel navigation.

## Documentation

[https://rilrom.github.io/mantine-bites/lightbox](https://rilrom.github.io/mantine-bites/lightbox)

## Roadmap

- [x] Autoplay option.
- [x] Zoom option.
- [x] Fullscreen option.
- [x] Custom thumbnail URLs and alt text.
- [x] Image captions.
- [ ] Pinch to zoom functionality.
- [ ] Swipe up or down to close functionality.
- [x] Documentation examples for HTML content, iframes, maps etc.
- [x] Documentation examples for Mantine Image and Next.js Image.
- [ ] Documentation examples for compound component inspiration.
- [ ] Documentation examples for style overrides.