open-index/open-npm huggingface dataset:
npm package: @magelle/learnstorybook-design-system-template
Description: Storybook design systems tutorial
Author: Maxime GELLE
Latest version: 0.1.1

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @magenable/medusa-plugin-top-bar-notification
Description: This is a MedusaJS plugin that allows to display simple notices at the top of a storefront
Author: Magenable
Latest version: 1.0.5

# Top Bar Notification

**Top Bar Notification** is a MedusaJS plugin that allows to display simple notices at the top of a storefront.

## Installation


1. Run the following command to install the plugin with **npm**:
```
npm install --save @magenable/medusa-plugin-top-bar-notification
```

or with yarn:
```
yarn add @magenable/medusa-plugin-top-bar-notification
```

2. In the medusa-config.js file of your MedusaJS store add the following plugin:
```
module.exports = defineConfig({
  // ...
  plugins: [
    {
      resolve: '@magenable/medusa-plugin-top-bar-notification',
      options: {},
    },
  ],
  // ...
})
```

3. Run migrations

```
npx medusa db:migrate
```

4. Install the following component for MedusaJS Starter Storefront (Next.js Starter Storefront) and then run the provided **npx** command:
```
npm install @magenable/medusa-plugin-top-bar-notification-storefront
```
```
npx @magenable/medusa-plugin-top-bar-notification-storefront
```

## Upgrade

```
npm update @magenable/medusa-plugin-top-bar-notification
```

or

```
yarn upgrade @magenable/medusa-plugin-top-bar-notification
```

## Admin UI

![Notifications list in admin panel](./README/1.png)

![The notification form in admin panel](./README/2.png)

![Notification regions in admin panel](./README/3.png)

## Storefront view:

![Notifications on storefront](./README/4.png)

#### About developer
The component is developed by Magenable (https://magenable.com.au), eCommerce consultancy specializing in Magento/Adobe Commerce based in Melbourne, Australia
npm package: @magenable/medusa-plugin-top-bar-notification-storefront
Description: This package adds changes to the Medusa Next.js Starter Storefront layout during installation for the MedusaJS plugin @magenable/medusa-plugin-top-bar-notification
Author: Magenable
Latest version: 1.0.10

# Top Bar Notification component for the MedusaJS Starter Storefront

**Top Bar Notification storefront** is a component for MedusaJS Starter Storefront (Next.js Starter Storefront) which is provided with the MedusaJS plugin https://www.npmjs.com/package/@magenable/medusa-plugin-top-bar-notification.

## Installation

**Note:** it is required to install the following plugin https://www.npmjs.com/package/@magenable/medusa-plugin-top-bar-notification for your MedusaJS project

1. Install the following plugin for MedusaJS Starter Storefront (Next.js Starter Storefront) and 
```
npm install @magenable/medusa-plugin-top-bar-notification-storefront
```

2. Run the following **npx** command:

```
npx @magenable/medusa-plugin-top-bar-notification-storefront
```

## Upgrade

```
npm update @magenable/medusa-plugin-top-bar-notification-storefront
```

## Storefront view:

![](./README/1.png)

## Admin UI

![](./README/2.png)

#### About developer
The component is developed by Magenable (https://magenable.com.au), eCommerce consultancy specializing in Magento/Adobe Commerce based in Melbourne, Australia
npm package: @magenable/purchase-partner-url
Description: An extension for Magento PWA Studio that allow replace Add To Cart button with partner links in any product
Latest version: 1.0.3

# Purchase From Partner

**Purchase From Partner** is a Magento PWA Studio extension that allows you to replace standard `Add to Cart` button with links to external websites where visitors may purchase the products. Think about Amazon affiliate store, cases when a brand has products available exlusive to retail partners. The extension may send events to Google analytics when clicking on the links for tracking/reporting.<br>
There may be one or more partner URL per product. The URLs are defined on product level, so some of your product may have normal Add to cart and some partner links.

## Installation

**Prerequisite:** In Magento 2 instance should be installed next module: https://packagist.org/packages/magenable/module-purchase-partner-url 

1. Add dependency to PWA Studio project

```
yarn add @magenable/purchase-partner-url
```

2. Wrap the module in your local-intercept.js file

```
const { Targetables } = require('@magento/pwa-buildpack');
const targetables = Targetables.using(targets);
const purchasePartnerUrl = require('@magenable/purchase-partner-url/src/targets');
purchasePartnerUrl(targetables);
```

3. Re-build your PWA project

## Upgrade

```
yarn upgrade @magenable/purchase-partner-url
```

## Configuration

You can specify partner links for any products, even for products that are not available currently for purchasing in venia-ui storefront (for example bundle product):

![purchase-partner-url-](https://user-images.githubusercontent.com/34573954/140858406-b484715f-b941-4bae-8ac2-0f258524564c.png)

For more information about configuration see readme in the next module https://packagist.org/packages/magenable/module-purchase-partner-url.

## Storefront view:

![purchase-partner-url-example-1](https://user-images.githubusercontent.com/34573954/140855228-986e2bce-4392-4501-a07b-e0ad2bbf6604.png)

![purchase-partner-url-example-2](https://user-images.githubusercontent.com/34573954/140855202-77b31e14-2f5b-445c-9b55-a6f864b71500.png)

![purchase-partner-url-example-3](https://user-images.githubusercontent.com/34573954/140855210-ede8fd98-3776-4e52-987e-df243fa35ca0.png)
npm package: @magenable/top-bar-notification
Description: An extension for Magento PWA Studio that allow to display simple notice at the top of the page
Latest version: 1.0.1

# Top Bar Notification

**Top Bar Notification** is a Magento PWA Studio extension that allow to display simple notice at the top of the page.

## Installation

**Prerequisite:** In Magento 2 instance should be installed next module: https://packagist.org/packages/magenable/module-top-bar-notification 

1. Add dependency to PWA Studio project

```
yarn add @magenable/top-bar-notification
```

2. Wrap the module in your local-intercept.js file

```
const { Targetables } = require('@magento/pwa-buildpack');
const targetables = Targetables.using(targets);
const topBarNotification = require('@magenable/top-bar-notification/src/targets');
topBarNotification(targetables);
```

3. Re-build your PWA project

## Upgrade

```
yarn upgrade @magenable/top-bar-notification
```

## Configuration

For more information about configuration see readme in the next module https://packagist.org/packages/magenable/module-top-bar-notification.

## Storefront view:

![top-bar-notification-example-1](https://user-images.githubusercontent.com/34573954/142558932-73c7493d-60d8-4fef-a627-eaba7fa231a2.png)

![top-bar-notification-example-2](https://user-images.githubusercontent.com/34573954/142558938-c46f78bf-4d5c-4b3c-bbb4-4523e1a11792.png)
npm package: @magensa/token-exchange
Description: Core logic for TEConnect PII utility
Author: Magensa LLC
Latest version: 1.0.0

# Token Exchange Connect
[![npm version](https://img.shields.io/npm/v/@magensa/token-exchange.svg?style=for-the-badge)](https://www.npmjs.com/package/@magensa/token-exchange "@magensa/token-exchange npm.js")  

This package contains shared logic for creating a Token Exchange (PII) instance in JavaScript applications.  

If you are looking for documentation on Token Exchange (PII) implementations - please refer to the package of your choice:  

- [React](https://github.com/Magensa/token-exchange-react)
- [Angular](https://github.com/Magensa/token-exchange-ng)
- [JavaScript](https://github.com/Magensa/token-exchange-js)

If you are looking for TEConnect Payment implementations, please refer to the package of your choice:

- [React](https://github.com/Magensa/te-connect-react)
- [Angular](https://github.com/Magensa/te-connect-ng)
- [JavaScript](https://github.com/Magensa/te-connect-js)
npm package: @magensa/web-hid-utils
Description: Utility methods for Magensa web-hid modules
Author: luke.turpin@magtek.com
Latest version: 1.0.0

# `@magensa/web-hid-utils`
Common utility methods used to interact with MagTek® devices, via the Web-HID API.

## Design and Usage
This module was designed to support @magensa/web-hid packages. These common methods are used regardless of device type or instance details.  While this package was designed to be consumed by @magensa/web-hid packages - it can be consumed independantly, if desired.
npm package: @magenta-ui/components
Description: This template should help get you started developing with Vue 3 and Typescript in Vite.
Latest version: 0.3.0
Deprecated: Package moved to @magenta-ui/vue

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!

### If Using `<script setup>`

[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:

### If Using Volar

Run `Volar: Switch TS Plugin on/off` from VSCode command palette.

### If Using Vetur

1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
3. Open `src/main.ts` in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"
npm package: @magenta-ui/styles
Description: This template should help get you started developing with Vue 3 and Typescript in Vite.
Latest version: 0.4.3

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!

### If Using `<script setup>`

[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:

### If Using Volar

Run `Volar: Switch TS Plugin on/off` from VSCode command palette.

### If Using Vetur

1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
3. Open `src/main.ts` in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"
npm package: @magenta-ui/vue
Description: This template should help get you started developing with Vue 3 and Typescript in Vite.
Latest version: 0.4.3

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!

### If Using `<script setup>`

[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:

### If Using Volar

Run `Volar: Switch TS Plugin on/off` from VSCode command palette.

### If Using Vetur

1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
3. Open `src/main.ts` in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"
npm package: @magenta-ui/website
Description: This template should help get you started developing with Vue 3 and Typescript in Vite.
Latest version: 0.2.1

# Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!

### If Using `<script setup>`

[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:

### If Using Volar

Run `Volar: Switch TS Plugin on/off` from VSCode command palette.

### If Using Vetur

1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
3. Open `src/main.ts` in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"