open-index/open-npm huggingface dataset:
npm package: @iblcomponents/ibl-core
Description: This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
Latest version: 1.0.0

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
npm package: @iblcomponents/ibl-light-dark-theme
Description: This package contains color themes to be used within IBL applications. The applications that are using this package need [Bootstrap 5.3.0](https://blog.getbootstrap.com/2022/12/24/bootstrap-5-3-0-alpha1/) or newer, with color mode support.
Latest version: 0.2.2

# SASS Light & Dark

This package contains color themes to be used within IBL applications.
The applications that are using this package need [Bootstrap 5.3.0](https://blog.getbootstrap.com/2022/12/24/bootstrap-5-3-0-alpha1/) or newer, with color mode support.

## How to use:

### Importing the themes
At the beginning of your main scss/sass file:
```
// Import the custom SCSS variables from the package:
// (Contains custom variables, theme variable overrides, and Bootstrap core variable overrides)
@import "@iblcomponents/ibl-light-dark-theme/dist/ibl-variables";

// Import the Bootstrap core 
// (This file imports all Bootstrap core's variables and components from the Bootstrap core package installed via npm)
@import "node_modules/bootstrap/scss/bootstrap";

// Import the themes SCSS that this package contains
// (This file would import a bunch of component SCSS files)
@import "@iblcomponents/ibl-light-dark-theme/dist/ibl-dark";
@import "@iblcomponents/ibl-light-dark-theme/dist/ibl-light";

// Import your custom components/styles
// (This file could import separate files or be a single SCSS file)
```
### Using the themes
You can set the theme for any HTML element or even for your whole application by adding the `data-bs-theme` attribute to the element:
```
<div className="App" data-bs-theme="ibl-dark">
```

## Limitations:
The theme is meant to be applied on any project that uses bootstrap with support for color themes (Bootstrap 5.3.0 or newer).
It overrides standard bootstrap classes applying colors, font styles, borders, spacing, etc.
Any special styling that you use within your code will overwrite the settings from these themes and may result an IBL application that does not have a consistent look and feel.

Note: These themes don't override Bootstrap's Reboot component where some defaults and core variables are set. We did our best to cover all cases, but our changes might yield some color combinations that lack contrast (i.e. a selected element will have almost the same color as an unselected one).

## Deployment on NPM:
For changes to be uploaded on the NPM first there are 3 steps:
1. Change the version in the `package.json`
2. Run the build script (`npm run build`). This will overwrite the `./dist` folder with the content of the `./src/themes` folder.
3. Run `npm publish`. All the files from the `.dist` folder along with the `README,md` and `component-info.json` files will be uploaded to the NPM.

Happy coding!
npm package: @iblcomponents/ipfs-upload
Description: ## A React Component that enables you to upload a file to IPFS.
Latest version: 0.9.7

# ipfs-upload

## A React Component that enables you to upload a file to IPFS.

[![NPM](https://img.shields.io/npm/v/@iblcomponents/ipfs-upload)](https://www.npmjs.com/package/@iblcomponents/ipfs-upload)
![downloads](https://img.shields.io/npm/dt/@iblcomponents/ipfs-upload)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)


## Install

### npm :

```bash
npm install @iblcomponents/ipfs-upload
```

## Usage

From the client application you should:

1 . Write the saveOutput callback needed by the component.      
2 . Create the configurations object needed by the component. This has to contain Infura related data: you need to create a new key from https://app.infura.io/dashboard/ and get the data from the Project Summary section (PROJECT ID, API Key Secret). The fileUrl and apiUrl values of the configurations object are hardcoded below, you can leave them as they are.   
3 . Wrap these in a componentProps object and send it as props to the FileUpload component.   
4 . As you upload the file the IPFS url will be returned and handled in the saveOutput callback.

```jsx
// FileUpload Component : Uploads the selcted File and returns the URL after 
// uploading the file .
import { getAPI } from "@iblcomponents/ipfs-upload";

const App = () =>
{
    const FileUpload = getAPI("FileUpload").getComponent();
    const saveOutput = output => 
    {
        //output contains the uploaded IPFS url, do whatever you need with it 
        // within this function
    };
    
    const configurations = {
        "projectId": "yourInfuraProjectId",
        "projectSecret": "yourInfuraProjectSecret",
        "fileURL": "https://skywalker.infura-ipfs.io/ipfs",
        "apiURL": "https://ipfs.infura.io:5001/api/v0",                                            
    }
    
    const componentProps = {
        saveOutputCallback: saveOutput,
        configurations : configurations        
    }; 
    
    return (<div><FileUpload { ...componentProps }/></div>)
}

export default YourComponent
```
npm package: @iblcomponents/nft-details
Description: ## A React Component that enables you to view the details of an NFT served by the Alchemy APIs.
Latest version: 0.2.0

# NFT-Details

## A React Component that enables you to view the details of an NFT served by the Alchemy APIs.

[![NPM](https://img.shields.io/npm/v/@iblcomponents/nft-details)](https://www.npmjs.com/package/@iblcomponents/nft-details)
![downloads](https://img.shields.io/npm/dt/@iblcomponents/nft-details)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)


## Install

### npm :

```bash
npm install @iblcomponents/nft-details
```

## Usage

From the client application you should:

1 . Create the configurations and inputData objects needed by the component. See the code snippet below for an example.  
2 . Wrap these in a componentProps object and send it as props to the NftDetails component.   
3 . The detail fields (those set "true" in configurations) of the NFT should be rendered on the component.

```jsx
// NftDetails Component : Displays the details of an NFT by accessing its metadata via the Alchemy APIs.
import { getAPI } from "@iblcomponents/nft-details";

const YourComponent = () =>
{
    const NftDetails = getAPI("NftDetails").getComponent();

    const configurations = {
        "title": true,
        "image": true,
        "description": true,
        "currentOwner": true,
        "creator": true,
        "contract": true,
        "tokenId": true,
        "tokenStandard": true,
        "blockchain": true
    };

    const inputData = {
        "contractAddress": "a contract address",
        "owner": "wallet address of the NFT's current owner",
        "tokenId": "the token of the NFT",
        "tokenUri": "the token URI",
        "transaction": "the address of the transaction"
    };
    
    const componentProps = {
        saveOutputCallback: () => {}, // just an empty function, it is not used by the component
        configurations : configurations,
        inputData : inputData,
        componentDataFromInit: {} // just an empty object, it is not used by the component  
    }; 
    
    return <NftDetails { ...componentProps }/>
}

export default YourComponent
```