open-index/open-npm huggingface dataset:
npm package: @scayle/changelog-formatter
Description: A custom formatter for creating changelogs with changesets
Author: SCAYLE Commerce Engine
Latest version: 1.2.0

# @scayle/changelog-formatter

A custom changelog formatter for the SCAYLE storefront core project, built on top of [changesets](https://github.com/changesets/changesets).
This package provides specialized formatting rules to create clean, consistent changelogs with reduced noise and improved readability.

## Purpose

This formatter enhances the default changesets changelog generation by:

- **Removing commit ID prefixes** from bullet points for cleaner formatting
- **Eliminating duplicate messages** for dependency updates
- **Special handling for @scayle/storefront-core** updates with detailed change descriptions
- **Improved dependency section formatting** with better structure and readability
- **Enhanced markdown compatibility** for various rendering environments

## Features

- Custom release line formatting that removes redundant list indicators
- Intelligent dependency update grouping and formatting
- Special treatment for core package updates with detailed changelog entries
- Clean, consistent output suitable for various markdown renderers
- Maintains compatibility with the changesets ecosystem

## Usage

This formatter is used internally by the SCAYLE storefront core project's release process. It's configured in the changesets setup to automatically format changelogs when generating releases.

### Integration with Changesets

The formatter exports a `ChangelogFunctions` object that can be used as a custom changelog generator in your changesets configuration:

```json
// .changeset/config.json
{
  // ...
  "changelog": "@scayle/changelog-formatter"
  // ...
}
```

## Example Output

The formatter produces clean changelog entries like:

```markdown
## 1.2.0

### Minor Changes

- Added new product filtering capabilities
- Enhanced search performance

**Dependencies**

- Updated dependency to @scayle/storefront-api@2.1.0

**@scayle/storefront-core v1.2.0**

- Major: Improved caching mechanism
- Minor: Added new utility functions
- Patch: Fixed type definitions
```

## Based on

- [changesets](https://github.com/changesets/changesets) - The underlying changelog management tool
npm package: @scayle/checkout-types
Description: TypeScript definitions for SCAYLE Checkout
Author: SCAYLE
Latest version: 2.1.73

# @scayle/checkout-types

#### Documentation | Website

The SCAYLE **Checkout Types** library offers comprehensive TypeScript type definitions for developing SCAYLE applications and components.

## What is Scayle ?

SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about SCAYLE's architecture and commerce modules in the Docs.

## Installation

```bash
npm i -S @scayle/checkout-types
```

## Usage

All types

```typescript
import * as types from '@scayle/checkout-types';

// Use the types in your application
const checkoutState: types.CheckoutState = {
  // ... your checkout state
};
```

Individual types

```typescript
import { CheckoutState, PaymentMethod, AddressForm, DynamicField } from '@scayle/checkout-types';

// Use specific types
const checkoutState: CheckoutState = {
  // ... your checkout state
};
```

### SDK & Authentication Types

```typescript
import type {
  Scayle, // Main SDK type for window.scayle
  RefreshTokenHook, // Token refresh hook
  ExchangeAuthCodeHook, // Auth code exchange hook
  AuthEvents, // Authentication events
  DeviceType // Express checkout device type
} from '@scayle/checkout-types';

// Type the global window.scayle
declare global {
  interface Window {
    scayle: Scayle;
  }
}

// Implement custom auth hooks
const refreshTokenHook: RefreshTokenHook = async params => {
  // Your implementation
  return { accessToken: 'new-token' };
};

// Use SDK with full type safety
window.scayle.auth.V3.init({
  clientId: 123,
  hooks: { refreshTokenHook, exchangeAuthCodeHook }
});

// Listen to events
window.scayle.auth.V3.events.listen(AuthEvents.AUTH_SUCCESS, payload => {
  console.log('Authenticated:', payload.accessToken);
});
```

## Available Types

This package provides comprehensive TypeScript definitions for:

### Checkout & Configuration

- **Checkout**: Checkout state, steps, and flow types
- **Payment**: Payment methods, providers, and processing
- **Address**: Address forms and validation
- **Basket**: Shopping cart and basket management
- **Configuration**: App configuration and settings
- **Validation**: Form validation and field types
- **Dynamic Fields**: Dynamic form field definitions

### SDK Types (NEW)

- **Scayle SDK**: Main SDK type for `window.scayle`
- **Authentication**: Auth hooks, requests, responses, events, and error types
- **Express Checkout**: Express SDK types and device types
- **Internal API**: Internal endpoints and event types
- **Event System**: Event bus and event listener types

## Other channels

- LinkedIn
- Jobs
- SCAYLE

## License

Licensed under the MIT
npm package: @scayle/eslint-auto-explicit-import
Description: Automatically add explicit imports to ESLint
Author: SCAYLE Commerce Engine
Latest version: 0.3.0

# @scayle/storefront-eslint-auto-explicit-import

An extension of the official `@nuxt/eslint` module to insert more explicit import statement
automatically using `eslint --fix` into a Nuxt-based SCAYLE Storefront project.

NOTE: Currently composables, utilities, helper functions and imported functions from packages will
be automatically inserted as imports. No components used within a `<template>` will be imported by it!

- Based on [nuxt-eslint-auto-explicit-import](https://github.com/antfu/nuxt-eslint-auto-explicit-import)
- Based on [eslint-plugin-unimport](https://github.com/antfu/eslint-plugin-unimport)
- [Official @nuxt/eslint module](https://eslint.nuxt.com/)
- [Official ESLint Documentation](https://eslint.org/docs/latest/)

## Example

- [Example Commit on eslint-flat-config-viewer](https://github.com/antfu/eslint-flat-config-viewer/commit/0f8000851b4ac0d7f3ea5e49963c6d7248303b7b)

## Details

## Usage

Add local module to `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  modules: [
    // Both are required
    '@nuxt/eslint',
    '@scayle/eslint-auto-explicit-import',
  ],
})
```

Followed by adding a dedicated `eslint` flat config if none exists:

```js
// eslint.config.mjs
import withNuxt from './nuxt/eslint.config.mjs'

export default withNuxt({
  // Your ESLint config
})
```

Running `eslint` should now throw errors if a source file does use auto-import.
Adding `--fix` allows for automatically inserting / fixing of missing imports.

```sh
# pnpm lint .
pnpm lint . --fix
```

## Troubleshooting

1. Should a Vue component not have a dedicated `<script>` tag with some content within,
   it might be possible that the included local `eslint-plugin-unimport` fails with a
   `range` undefined error.
   In this case it is necessary to manually add the missing `<script>` tag with some dummy content.
npm package: @scayle/nuxt-image-provider
Description: An image provider to handle SCAYLE-specific modifiers
Author: SCAYLE Commerce Engine
Latest version: 1.1.0

# @scayle/nuxt-image-provider

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/nuxt-image-provider</h1>
</div>

<div align="center">
  <h4><a href="https://scayle.dev/en/core-documentation/storefront-guide/storefront-application/readme/what-is-storefront">Documentation</a> | <a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  A module for SCAYLE image provider.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/nuxt-image-provider"><img src="https://img.shields.io/npm/v/@scayle/nuxt-image-provider/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/nux-image-provider"><img src="https://img.shields.io/npm/dm/@scayle/nuxt-image-provider.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/nuxt-image-provider"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## SCAYLE Nuxt image provider

The SCAYLE Nuxt Image Provider is an image provider based on Nuxt's @nuxt/image module, designed to work seamlessly with SCAYLE-specific image modifiers. It enhances image optimization and delivery by integrating directly with SCAYLE’s infrastructure.

## Installation

```bash
# Using pnpm
pnpm add @scayle/nuxt-image-provider

# Using yarn
yarn add @scayle/nuxt-image-provider

# Using npm
npm install @scayle/nuxt-image-provider
```

## Usage

```ts
export default defineNuxtConfig({
  image: {
    providers: {
      scayle: {
        name: 'scayle',
        provider: '@scayle/nuxt-image-provider',
      },
    },
  },
})
```

```vue
import { ScayleImg, ScaylePicture } from '#nuxt-image-provider/components'

<ScayleImg :width="300" brightness="1" should-trim />

<ScaylePicture :sizes="sizes" :width="300" brightness="1" should-trim />
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/omnichannel-nuxt
Description: Collection of essential utilities to work with omnichannel
Author: SCAYLE Commerce Engine
Latest version: 4.5.0

# Omnichannel

This is the basis for setting up a new Omnichannel Add-On integration using Nuxt.
It provides a reusable composables, that can be used in the actual storefront project.

## Getting started

To start working with `@scayle/omnichannel-nuxt`, make sure to
register it as a module in your nuxt.config.ts file:

Nuxt 3

```typescript
export default defineNuxtConfig({
  modules: ['@scayle/omnichannel-nuxt/module'],
  runtimeConfig: {
    /** Omnichannel runtime configuration */
    omnichannel: {
      apiHost: '', // Override: NUXT_OMNICHANNEL_API_HOST
      apiToken: '', // Override: NUXT_OMNICHANNEL_API_TOKEN
    },
  },
})
```

## Architecture

The Omnichannel Add-On package provides `useStoreLocator` composable,
which can be used to call the following methods:

- `refreshStores` to get `storesData` based on provided address
- `refreshVariantStores` to get `variantStoresData` based on provided store ID
- `refreshStoreVariant` to get `storeVariantData` based on provided store ID and variant ID

## List of composables

When using Nuxt 3, composables are automatically registered and do not need to be imported explicitly.
The Nuxt 3 composables can optionally be imported using the import alias `#omnichannel/composables`.

### [useStoreLocator](./src/composables/useStoreLocator.ts)

Getting `storesData` based on a provided address

Example:

```typescript
import { useStoreLocator } from '#omnichannel/composables'

const { storesData, refreshStores } = useStoreLocator('useStoreLocator', [
  'openingTimes',
])
const address = 'Hamburg'
await refreshStores(address)
```

Getting `variantStoresData` based on a provided address

Example:

```typescript
import { useStoreLocator } from '#omnichannel/composables'

const { variantStoresData, refreshVariantStores } = useStoreLocator(
  'useStoreLocator',
  ['openingTimes'],
)
const address = 'Hamburg'
const storeId = 12
await refreshVariantStores(storeId, { address: address })
```

Getting `storeVariantData` based on a provided store ID and variant ID

Example:

```typescript
import { useStoreLocator } from '#omnichannel/composables'

const { storeVariantData, refreshStoreVariant } = useStoreLocator(
  'useStoreLocator',
  ['openingTimes'],
)
const variantId = 1
const storeId = 12
await refreshStoreVariant(variantId, storeId)
```

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)
npm package: @scayle/prettier-config-storefront
Description: SCAYLE Commerce Engine specific prettier configuration
Author: SCAYLE Commerce Engine
Latest version: 2.1.0

# prettier-config-storefront

A [shared `prettier` config](https://prettier.io/docs/en/configuration.html) for SCAYLE Storefront Core v2 and SCAYLE frontend projects.

## Prettier

> Prettier is an opinionated code formatter. (...) It removes all original styling\* and ensures that all outputted code conforms to a consistent style.

- [Official Prettier Documentation](https://prettier.io/docs/en/index.html)

### Used Plugins and Configurations

#### `prettier-config-standard`

> A Prettier shareable config for projects using Prettier and JavaScript Standard Style as ESLint rules or separate processes.

**Why?**
Provides JavaScript Standard code style compliant ruleset.

- License: [**BSD-3-Clause license**](https://github.com/npetruzzelli/prettier-config-standard/blob/master/LICENSE)
- [README](https://github.com/npetruzzelli/prettier-config-standard/blob/master/README.markdown)
- [Repository](https://github.com/npetruzzelli/prettier-config-standard)

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)
npm package: @scayle/single-spa-vue
Description: a single-spa plugin for vue.js applications
Author: single-spa core team
Latest version: 3.0.3

# single-spa-vue

[![Build Status](https://travis-ci.com/single-spa/single-spa-vue.svg?branch=main)](https://travis-ci.com/single-spa/single-spa-vue)

Generic lifecycle hooks for Vue.js applications that are registered as [applications](https://single-spa.js.org/docs/building-applications) of [single-spa](https://github.com/single-spa/single-spa).

[Full documentation](https://single-spa.js.org/docs/ecosystem-vue.html)
npm package: @scayle/storefront-api
Description: TypeScript and JavaScript SDK source for the SCAYLE Storefront API
Author: SCAYLE Commerce Engine
Latest version: 19.0.0

![scayle-logo-cr](https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png)

<h1 align="center">
  SCAYLE Storefront API TypeScript and JavaScript SDK
</h1>

<h4 align="center">
  <a href="https://scayle.dev">Documentation</a> |
  <a href="https://www.scayle.com/">Website</a>
</h4>

<p align="center">
  The SCAYLE <strong>Storefront API TypeScript and JavaScript SDK</strong> streamlines interactions with Storefront REST APIs.
</p>
<p align="center">
  <a href="#"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="SCAYLE's **Storefront API TypeScript and JavaScript SDK is released under the MIT license." /></a>
</p>

## Getting Started

Visit the [Quickstart Guide](https://scayle.dev/en/core-documentation/welcome-to-scayle/introduction/apis#sdk-setup) to set up the Storefront API TypeScript and JavaScript SDK.

Visit the [Docs](https://scayle.dev) to learn more about our system requirements.

## Installation

```sh
# Install the SDK via PNPM
pnpm add @scayle/storefront-api

# Install the SDK  with YARN
yarn add @scayle/storefront-api

# Install the SDK with NPM
npm i @scayle/storefront-api
```

## What is Scayle?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the docs.

## Community

The community and core teams are available in [GitHub Discussions](https://github.com/scayle/storefront-api-ts-sdk/discussions), where you can ask for support, discuss roadmap, and share ideas.

## Other channels

- [GitHub Issues](https://github.com/scayle/storefront-api-ts-sdk/issues)
- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)

## License

Licensed under the [MIT](https://opensource.org/license/mit/)
npm package: @scayle/storefront-basket
Description: Collection of essential composables and utilities to work with the basket.
Author: SCAYLE Commerce Engine
Latest version: 0.5.0

# @scayle/storefront-basket

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/storefront-basket</h1>
</div>

<div align="center">
  <h4><a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  Collection of essential  utilities for working with the basket within the SCAYLE Storefront Boilerplate.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-basket"><img src="https://img.shields.io/npm/v/@scayle/storefront-basket/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-basket"><img src="https://img.shields.io/npm/dm/@scayle/storefront-basket.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-basket"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-basket

# Using yarn
yarn add @scayle/storefront-basket

# Using npm
npm install @scayle/storefront-basket
```

## Usage

```ts
export default defineNuxtConfig({
  modules: ['@scayle/storefront-basket'],
})
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/storefront-core
Description: Collection of essential utilities to work with the Storefront API
Author: SCAYLE Commerce Engine
Latest version: 8.60.0

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>SCAYLE Storefront Core</h1>
</div>

<div align="center">
  <h4><a href="https://scayle.dev">Documentation</a> | <a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  The SCAYLE <strong>Storefront Core SDK</strong> package contains framework-independent components of the Storefront Boilerplate.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-core"><img src="https://img.shields.io/npm/v/@scayle/storefront-core/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-core"><img src="https://img.shields.io/npm/dm/@scayle/storefront-core.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-core"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-core

# Using yarn
yarn add @scayle/storefront-core

# Using npm
npm install @scayle/storefront-core
```

## Getting Started

Visit the [Quickstart Guide](https://scayle.dev/en/core-documentation/storefront-guide/storefront-application/readme/setup-your-storefront) to get started with Storefront Core.

Visit the [Docs](https://scayle.dev) to learn more about our system requirements.

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)
npm package: @scayle/storefront-country-detection
Description: Collection of essential composables and utilities to work with country detection
Author: SCAYLE Commerce Engine
Latest version: 2.2.0

# @scayle/storefront-country-detection

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/storefront-country-detection</h1>
</div>

<div align="center">
  <h4><a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  A Nuxt module for country detection integration.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-country-detection"><img src="https://img.shields.io/npm/v/@scayle/storefront-country-detection/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-country-detection"><img src="https://img.shields.io/npm/dm/@scayle/storefront-country-detection.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-country-detection"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-country-detection

# Using yarn
yarn add @scayle/storefront-country-detection

# Using npm
npm install @scayle/storefront-country-detection
```

## Usage

```ts
export default defineNuxtConfig({
  modules: ['@scayle/storefront-country-detection'],
})
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/storefront-navigation
Description: Utilities for working with Navigation features within the SCAYLE Storefront Boilerplate.
Author: SCAYLE Commerce Engine
Latest version: 0.6.0

# @scayle/storefront-navigation

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/storefront-navigation</h1>
</div>

<div align="center">
  <h4><a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  Utilities for working with Navigation features within the SCAYLE Storefront Boilerplate.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-navigation"><img src="https://img.shields.io/npm/v/@scayle/storefront-navigation/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-navigation"><img src="https://img.shields.io/npm/dm/@scayle/storefront-navigation.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-navigation"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-navigation

# Using yarn
yarn add @scayle/storefront-navigation

# Using npm
npm install @scayle/storefront-navigation
```

## Usage

```ts
export default defineNuxtConfig({
  modules: ['@scayle/storefront-navigation'],
})
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/storefront-nuxt
Description: Nuxt integration for the SCAYLE Commerce Engine and Storefront API
Author: SCAYLE Commerce Engine
Latest version: 8.60.0

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>SCAYLE Storefront Nuxt</h1>
</div>

<div align="center">
  <h4><a href="https://scayle.dev">Documentation</a> | <a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  The SCAYLE <strong>Storefront Nuxt</strong> package provides an integration into the Nuxt 3 Framework for the SCAYLE Commerce Engine.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-nuxt"><img src="https://img.shields.io/npm/v/@scayle/storefront-nuxt/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-nuxt"><img src="https://img.shields.io/npm/dm/@scayle/storefront-nuxt.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-nuxt"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add -D @scayle/storefront-nuxt

# Using yarn
yarn add --dev @scayle/storefront-nuxt

# Using npm
npm install --save-dev @scayle/storefront-nuxt
```

## Getting Started

Visit the [Quickstart Guide](https://scayle.dev/en/core-documentation/storefront-guide/storefront-application/readme/setup-your-storefront) to get started with Storefront Nuxt.

Visit the [Docs](https://scayle.dev) to learn more about our system requirements.

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)
npm package: @scayle/storefront-product-detail
Description: Collection of essential composables and utilities to work with product detail
Author: SCAYLE Commerce Engine
Latest version: 1.8.0

# @scayle/storefront-product-detail

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/storefront-product-detail</h1>
</div>

<div align="center">
  <h4><a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  A Nuxt module for product detail integration.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-product-detail"><img src="https://img.shields.io/npm/v/@scayle/storefront-product-detail/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-product-detail"><img src="https://img.shields.io/npm/dm/@scayle/storefront-product-detail.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-product-detail"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-product-detail

# Using yarn
yarn add @scayle/storefront-product-detail

# Using npm
npm install @scayle/storefront-product-detail
```

## Usage

```ts
export default defineNuxtConfig({
  modules: ['@scayle/storefront-product-detail'],
})
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/storefront-product-listing
Description: Collection of essential composables and utilities to work with product listing
Author: SCAYLE Commerce Engine
Latest version: 2.4.0

# @scayle/storefront-product-listing

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/storefront-product-listing</h1>
</div>

<div align="center">
  <h4><a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  A Nuxt module for product listing integration.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-product-listing"><img src="https://img.shields.io/npm/v/@scayle/storefront-product-listing/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-product-listing"><img src="https://img.shields.io/npm/dm/@scayle/storefront-product-listing.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-product-listing"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-product-listing

# Using yarn
yarn add @scayle/storefront-product-listing

# Using npm
npm install @scayle/storefront-product-listing
```

## Usage

```ts
export default defineNuxtConfig({
  modules: ['@scayle/storefront-product-listing'],
})
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/storefront-search
Description: Collection of essential composables and utilities to work with search
Author: SCAYLE Commerce Engine
Latest version: 0.5.0

# @scayle/storefront-search

<div align="center">
  <img src="https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png" />
</div>

<div align="center">
  <h1>@scayle/storefront-search</h1>
</div>

<div align="center">
  <h4><a href="https://www.scayle.com/">Website</a></h4>
</div>

<div align="center">
  Collection of essential composables and utilities for SCAYLE Storefront to work with SCAYLE Search.
</div>
<br/>
<div align="center">
  <a href="https://www.npmjs.com/package/@scayle/storefront-search"><img src="https://img.shields.io/npm/v/@scayle/storefront-search/latest.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-search"><img src="https://img.shields.io/npm/dm/@scayle/storefront-search.svg?style=flat&colorB=007ec6" /></a>
  <a href="https://www.npmjs.com/package/@scayle/storefront-search"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
  <a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js" /></a>
</div>

## Installation

```bash
# Using pnpm
pnpm add @scayle/storefront-search

# Using yarn
yarn add @scayle/storefront-search

# Using npm
npm install @scayle/storefront-search
```

## Usage

```ts
export default defineNuxtConfig({
  modules: ['@scayle/storefront-search'],
})
```

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)

## What is SCAYLE?

[SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.

## Other channels

- [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
- [Jobs](https://careers.smartrecruiters.com/ABOUTYOUGmbH/scayle)
npm package: @scayle/unstorage-compression-driver
Description: Compression driver for unstorage
Author: SCAYLE Commerce Engine
Latest version: 1.4.0

# @scayle/unstorage-compression-driver

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

Compression driver for [unstorage](https://unstorage.unjs.io/).

## Installation

```bash
# Using pnpm
pnpm add @scayle/unstorage-compression-driver

# Using yarn
yarn add @scayle/unstorage-compression-driver

# Using npm
npm install @scayle/unstorage-compression-driver
```

## Usage

This is a special driver that handles (de)compression of values.

All write operations happen within a dedicated passthrough driver, that handles all storage functionality.

In the example below, we create an `redis` passthrough driver and select `brotli` as encoding / compression algorithm.

```ts
import { createStorage } from "unstorage";
import compressionDriver from "@scayle/unstorage-compression-driver";
import redisDriver from "unstorage/drivers/redis";

const storage = createStorage({
  driver: overlay({
    encoding: 'brotli'
    passthroughDriver: redisDriver({
      host: 'localhost',
      port: '6379'
    }),
  }),
});
```

> NOTE: As this is the first iteration of the compression driver,
> it currently does not support passing encoding options to the selected encoding method!

## Supported Compression Algorithms

The `@scayle/unstorage-compression-driver` currently supports `deflate`, `gzip` and `brotli` as compression algorithms.

> NOTE: If this driver will be used outside of a Node.js-based runtime,
> it needs to be checked if the desired runtime supports or polyfills `node:zlib`,
> as the compression implementation is depending on `node:zlib`!

### Deflate

Using [zlib.deflate](https://nodejs.org/docs/latest-v20.x/api/zlib.html#zlibdeflatebuffer-options-callback)
and [zlib.unzip](https://nodejs.org/docs/latest-v20.x/api/zlib.html#zlibunzipbuffer-options-callback).

- [node:zlib / Options](https://nodejs.org/docs/latest-v20.x/api/zlib.html#class-options)

### GZip

Using [zlib.gzip](https://nodejs.org/docs/latest-v20.x/api/zlib.html#zlibgzipbuffer-options-callback)
and [zlib.unzip](https://nodejs.org/docs/latest-v20.x/api/zlib.html#zlibunzipbuffer-options-callback).

- [node:zlib / Options](https://nodejs.org/docs/latest-v20.x/api/zlib.html#class-options)

### Brotli

Using [zlib.brotliCompress](https://nodejs.org/docs/latest-v20.x/api/zlib.html#zlibbrotlicompressbuffer-options-callback)
and [zlib.brotliDecompress](https://nodejs.org/docs/latest-v20.x/api/zlib.html#zlibbrotlidecompressbuffer-options-callback).

- [node:zlib / BrotliOptions](https://nodejs.org/docs/latest-v20.x/api/zlib.html#class-brotlioptions)

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)
npm package: @scbd-chm/submit-list
Description: This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.0.6-alpha

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
npm package: @scbd/amc4-wrapper
Description: @amcharts/amcharts wrapper
Author: Secretariat of the Convention on Biological Diversity
Latest version: 0.0.1

---
sidebarDepth: 2
---
# Amcharts4 Wrapper

## Description

## Install

```bash
yarn add "@scbd/amc4-wrapper

#OR 

npm install "@scbd/amc4-wrapper
```
npm package: @scbd/conference-cal
Description: SCBD Conference schedule overview written in vue.  Main meetings and parallel meetings.
Author: Secretariat of the Convention on Biological Diversity
Latest version: 1.0.3

<!-- 
TODO - document options other install methods
-->
![SCBD Leaf][logo]
![SCBD][logoText]

[![codebeat badge](https://codebeat.co/badges/6270ec63-1b6d-44ce-a416-3760836ca13e)](https://codebeat.co/projects/github-com-scbd-conference-cal-master)
[![Dependency Status](https://david-dm.org/scbd/conference-cal)](https://david-dm.org/scbd/conference-cal)

# Conference overview component
A conference overview component made in vue.

## Install

### nodejs
``` bash
yarn add @scbd/conference-cal
```

### Vue
``` vue
import ConferenceCal from '@scbd/conference-cal/src/index.vue'
```

### Widget
``` html
  <head>
    <meta charset="utf-8">
    <title>conference-cal self embedding  widget demo</title>
  </head>
  <body>
    <div>Place script where you want the widget</div>
    <script id="ConferenceCal" code="2018" src="https://unpkg.com/@scbd/conference-cal@latest/dist/widget/index.umd.min.js?version=x.x.x" charset="utf-8"></script>
  </body>
```
Ensure to update the version with the latest.

### Angularjs
``` js

```

### Web component
``` html
<meta charset="utf-8">
<title>conference-cal web component demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@scbd/conference-cal@latest/dist/wc/conference-cal.min.js"></script>


<conference-cal code="2018"></conference-cal>
```

### Async web component
``` html
<meta charset="utf-8">
<title>conference-cal web component demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@scbd/conference-cal@latest/dist/wca/conference-cal.min.js"></script>

<conference-cal code="2018"></conference-cal>
```

## Build Setup

``` bash
# install dependencies
$ yarn install 

# serve with hot reload at localhost:8080
$ yarn serve

# build to dist folder
$ yarn build

#lint
$ yarn lint

#lint fix
$ yarn lint:fix

# release to npm
$ yarn release
```

[logo]:https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-leaf-line.gif
[logoText]:https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-text-en.gif
npm package: @scbd/ecosystem-style
Description: Design system style
Author: Secretariat of the Convention on Biological Diversity
Latest version: 0.0.5


# scbd/ecosystem

Design tokens from @houlagins/design-system.

## Setup
- Add `scbd/ecosystem` dependency using yarn or npm to your project
```bash
  yarn add scbd/ecosystem
```
```bash
  npm install scbd/ecosystem
```
## Usage
SCSS
```scss
  @import path-to-file/index.scss;
```
CSS
```css
  @import url(path-to-file/index.css);
```
npm package: @scbd/ecosystem-tokens
Description: Design system tokens
Author: Secretariat of the Convention on Biological Diversity
Latest version: 0.0.1


# @houlagins/ds-tokens

Design tokens from @houlagins/design-system.

## Setup
- Add `@houlagins/ds-tokens` dependency using yarn or npm to your project
```bash
  yarn add @houlagins/ds-tokens
```
```bash
  npm install @houlagins/ds-tokens
```
## Usage
SCSS
```scss
  @import path-to-file/index.scss;
```
CSS
```css
  @import path-to-file/index.css;
```
CSS Module
```js
  import tokens from '@houlagins/ds-tokens/index.cssmodules.css'
```
Common JS
```js
  var tokens = require('@houlagins/ds-tokens/index.common.js')
```
Module
```js
  import tokens from '@houlagins/ds-tokens/index.module.js'
```
npm package: @scbd/generics
Latest version: 0.0.3

Generics v2

Completed Features
(as discussed at meetings + in addition to some of my own ideas)
- NPM package
- History of changes out side of collection
- Metas out side of collection
- Validation that complies with security policies
- all schemas and definitions loaded so definition only declared once.
- Edge concept - all references to other documents will be in an edge schema
  - benefits for keeping track of dead references to deleted or archived records
  - establishing relationships of data
  - enable easy triggering of indexation of parents who may index some child info
- EdgeFixed - references the history version of the document and never changes.
- lString collection - all lStrings in one place for easier translations of data.
- Data structure follows an object oriented inheritance structure. Inspired by schema.org founded by Google, Microsoft, Yahoo and Yandex.  I argue that object orientation and inheritance is not maintainable.  Further I argue functional programing is better.  These arguments do not apply to data structures though! Google, Microsoft, Yahoo and Yandex.
- url collection for external references, one collection for easy 404 checking.
- separation of middleware by concerns (ability to overwrite each)
  - sanitize
  - security
  - Validation
  - meta
  - pre query
  - query
  - post query
  - afterware - to be called at the end of the express route "creating mq msgs"
- localization
- lstring schema keys
- auto indexing of keys / specifying indexes in schema.
- property alias's
- title/name to ID
- identifier is full url

In progress:
- 60% finished edger, api automatically build an edge when pointing to another schema.
- 40% tests - for new features

Todo:
afterware -
workingDocument - all documents not in their final or intended state will reside in working documents.
edger - automatically build edge collection entry for our own registered schemas referenced.  
returning children object in query option.
npm package: @scbd/morph-map
Description: ## Project setup ``` yarn install ```
Latest version: 0.0.1

# morph-map

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Run your end-to-end tests
```
yarn test:e2e
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @scbd/nuxt-scbd-sso-module
Latest version: 0.0.10

  <p align="center"><img width="52px" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-leaf-line.gif" alt="Secretariat of the Convention on Biological Diversity"><img width="148x" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-text-en.gif" alt="Secretariat of the Convention on Biological Diversity"></p>
<h1 align="center">Nuxt SCBD SSO Module</h1>
npm package: @scbd/page-footer
Latest version: 0.0.69

<p align="center"><img width="52px" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-leaf-line.gif" alt="Secretariat of the Convention on Biological Diversity"><img width="148x" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-text-en.gif" alt="Secretariat of the Convention on Biological Diversity"></p>
<h1 align="center">Web Page Footer</h1>
npm package: @scbd/page-header-fixed
Latest version: 0.0.74

<p align="center"><img width="52px" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-leaf-line.gif" alt="Secretariat of the Convention on Biological Diversity"><img width="148x" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-text-en.gif" alt="Secretariat of the Convention on Biological Diversity"></p>
<h1 align="center">Web Page Header - Fixed</h1>
npm package: @scbd/page-side-bar
Description: SCBD's webpage side bar
Author: Secretariat of the Convention on Biological Diversity
Latest version: 0.0.11

<p align="center"><img width="52px" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-leaf-line.gif" alt="Secretariat of the Convention on Biological Diversity"><img width="148x" height="65px" src="https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-text-en.gif" alt="Secretariat of the Convention on Biological Diversity"></p>
<h1 align="center">Web Page Side Bat</h1>
npm package: @scbd/self-embed-vue-component
Description: ## Project setup ``` yarn install ``` ### Build dependant dev widget for serving ``` yarn run build:dev:widget ```
Author: Secretariat of the Convention on Biological Diversity
Latest version: 1.0.4

<!-- 
TODO - document options
TODO - document install
TODO - document basic usage`
-->
![SCBD Leaf][logo]
![SCBD][logoText]

[![codebeat badge](https://codebeat.co/badges/6270ec63-1b6d-44ce-a416-3760836ca13e)](https://codebeat.co/projects/github-com-scbd-self-embed-vue-component-master)
[![Dependency Status](https://david-dm.org/scbd/self-embed-vue-component)](https://david-dm.org/scbd/self-embed-vue-component)
# self-embed-vue-component

## Project setup
```
yarn install
```
### Build dependant dev widget for serving
```
yarn run build:dev:widget
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Lints and fixes files
```
yarn run lint
```

[logo]:https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-leaf-line.gif
[logoText]:https://www.cbd.int/styles/ui/templates/cbd2011/images/logo-cbd-text-en.gif