open-index/open-npm huggingface dataset:
npm package: @pressmodo/create-pressmodo
Description: CLI Command for scaffolding Pressmodo projects.
Author: Pressmodo
Latest version: 0.1.2

# Pressmodo Project Scaffold

The Pressmodo Project Scaffold is a command line tool to quickly initialize a started WordPress theme or plugin for your new project.

## Installation

Run the command:

```
npm install @pressmodo/create-pressmodo -g
```

## Available project types

*   theme
*   plugin

## Usage

```
cd <your-project-directory>

create-pressmodo theme name-of-the-theme-here

create-pressmodo plugin name-of-the-plugin-here
```

Once the project has been created, you'd want to install dependencies:

```
npm install
composer install
```
npm package: @pressmodo/stylelint-config
Description: Pressmodo stylelint config for WordPress projects
Author: Pressmodo
Latest version: 0.3.0

Pressmodo Stylelint Config
=====================

In order to improve both our efficiency and consistency, we need to standardize what we use and how we use it. This repository contains Pressmodo's standard configuration for [Stylelint](https://github.com/stylelint/stylelint), our preferred stylesheet linter.

## Dependencies

1. [Node & NPM](https://www.npmjs.com/get-npm) - 3rd party dependencies are managed through NPM, so you will need that installed globally
2. [Stylelint](https://stylelint.io/) - as this is a config extention for Stylelint, you will need Stylelint installed in your main project in order for it to work.

## Installation

First, install Stylelint:

```
// NPM
npm install stylelint --save-dev

// Yarn
yarn add stylelint --dev
```

Then install the Pressmodo Stylelint config:

```
// NPM
npm install @pressmodo/stylelint-config --save-dev
```

## Usage

Add the following to your `.stylelintrc` file:

```js
{
  "plugins": [
    "@pressmodo/stylelint-config"
  ]
}

```

## Autofixing

Certain rules / violations can be fixed automatically using the `--fix` flag via the command line.
To ensure that Stylelint fixes what it can, you can run:

```
stylelint path/to/css/file.css --fix
```
npm package: @presstencao/convert_file
Description: Este pacote é utilizado para converter arquivos `.txt` para `.csv` e mover o arquivo convertido para um novo caminho. Ele possui funcionalidades para manipulação de arquivos em chunks, permitindo o processamento de grandes volumes de dados.
Author: presstencao
Latest version: 1.2.5

# @presstencao/convert_file

## Descrição

Este pacote é utilizado para converter arquivos `.txt` para `.csv` e mover o arquivo convertido para um novo caminho. Ele possui funcionalidades para manipulação de arquivos em chunks, permitindo o processamento de grandes volumes de dados.

## Instalação

Para instalar o pacote, utilize o npm:

```bash
npm install @presstencao/convert_file
```

ou

```bash
yarn add @presstencao/convert_file
```

## Uso

### Conversão de Arquivo `.txt` para `.csv`

A função principal do pacote realiza a conversão de um arquivo `.txt` para `.csv` e move o arquivo resultante para um novo diretório.

### Parâmetros

-   `options` (Object): Objeto de opções contendo os seguintes campos:
    -   `path` (string): O caminho do diretório onde o arquivo `.txt` está localizado.
    -   `file_name` (string): O nome do arquivo `.txt` que deseja converter.
    -   `new_path` (string): O caminho do diretório onde o arquivo `.csv` deve ser movido.
    -   `ext` (string): A extensão do arquivo que deseja converter (padrão: `csv`).
    -   `callback` (Function) [opcional]: A função de callback que será chamada após o término do processamento.
    -   `chunk_size` (number) [opcional]: O tamanho do chunk que será processado por vez (padrão: 1000).
    -   `pause_time` (number) [opcional]: O tempo de pausa entre cada chunk (padrão: 400ms).
    -   `header` (boolean) [opcional]: Indica se o arquivo tem um cabeçalho (padrão: false).

### Exemplo

```javascript
const convert = require("@presstencao/convert_file");

convert({
    path: "./",
    file_name: "example.txt",
    new_path: "./converted",
    ext: "csv",
    callback: console.log,
    chunk_size: 1000,
    pause_time: 400,
    header: false,
});
```

## Contribuição

Para contribuir com o projeto, envie um pull request no repositório do GitHub: [convert_file](https://github.com/fabiopasilva1/convert_file).

Visite também:

[NPM](https://www.npmjs.com/package/@presstencao/convert_file) para mais informações.
[YARN](https://yarn.pm/@presstencao/convert_file) para mais informações.

## Licença

Este projeto está licenciado sob a Licença MIT.

## Dependências do Sistema

"express": "^4.21.2",
"fs": "^0.0.1-security",
"progress": "^2.0.3"

## Versão do Node.js compativel

^16.0.0 - 18.0.0
npm package: @presta/adapter-cloudflare-workers
Description: Cloudflare Workers adapter for Presta.
Author: estrattonbailey
Latest version: 0.3.0

# @presta/adapter-cloudflare-workers

Cloudflare Workers deployment adapter plugin for Presta.

## Usage

Simply add to your Presta config (defaults to `presta.config.js`):

```javascript
import cloudflare from '@presta/adapter-cloudflare-workers'

export const plugins = [cloudflare()]
```

The plugin will output a `wrangler.toml` file if you don't have one, or a
`presta-wrangler.toml` file if you do, and you can copy over Presta-specific
settings.

## License

MIT License © [Sure Thing](https://github.com/sure-thing)
npm package: @presta/adapter-netlify
Description: Netlify adapter for Presta.
Author: estrattonbailey
Latest version: 0.6.0

# @presta/adapter-netlify

Netlify deployment adapter plugin for Presta. It copies generated files to the
paths specified in your local `netlify.toml` config, as well as handles
rewriting URLs to Netlify functions paths e.g. `/.netlify/functions`.

## Usage

Make sure you've got a `netlify.toml` config in your root directory. It should
look something like this:

```toml
[build]
  command = 'npm run build'
  publish = 'build/static'
  functions = 'build/functions'
```

Then, update your Presta config:

```javascript
import { createConfig } from 'presta'
import netlify from '@presta/adapter-netlify'

export default createConfig({
  plugins: [netlify()],
})
```

### Bundle size limit

Netlify's default bundler sometimes outputs lambda ZIP archives that are over
the 50MB limit imposed by AWS. To avoid this, you might want to try [configuring
Netlify to use `esbuild` as the
bundler](https://github.com/netlify/zip-it-and-ship-it#esbuild).

To do so, add this to your Netlify config:

```toml
[functions]
  node_bundler = 'esbuild'
```

## License

MIT License © [Front of House](https://github.com/front-of-house)
npm package: @presta/adapter-node
Description: Node adapter for Presta.
Author: estrattonbailey
Latest version: 0.3.0

# @presta/adapter-node

Node deployment adapter plugin for Presta.

## Usage

Simply add to your Presta config:

```javascript
import { createConfig } from 'presta'
import node from '@presta/adapter-node'

export default createConfig({
  plugins: [node({ port: 4000 })],
})
```

This will generate a `presta-node.js` file in the `.presta` output directory.
You can run this or deploy like any other node server:

```bash
node .presta/presta-node.js
```

## License

MIT License © [Front of House](https://github.com/front-of-house)
npm package: @presta/adapter-vercel
Description: Vercel adapter for Presta.
Author: estrattonbailey
Latest version: 0.4.0

# @presta/adapter-vercel

Vercel deployment adapter plugin for Presta.

## Usage

Simply add to your Presta config:

```javascript
import { createConfig } from 'presta'
import vercel from '@presta/adapter-vercel'

export default createConfig({
  plugins: [vercel()],
})
```

## License

MIT License © [Front of House](https://github.com/front-of-house)
npm package: @presta/html
Description: HTML utilities for Presta
Author: estrattonbailey
Latest version: 0.2.5

# @presta/html

Util for generating HTML pages.

## Usage

Have a look at the source code and tests for all supported properties.

```javascript
import { html } from '@presta/html'

export const route = '*'

export async function handler(ev, ctx) {
  return html({
    head: {
      title: 'Presta',
      image: '/social.png',
      description: 'SEO Description.',
      og: {
        url: 'https://presta.run',
      },
      twitter: {
        site: '@presta_run',
      },
      link: [{ rel: 'stylesheet', href: '/style.css' }],
      meta: [{ name: 'viewport', content: '' }],
      script: [{ src: '/critical.js' }],
    },
    body: '<h1>Hello world!</h1>',
    foot: {
      script: [{ src: '/critical.js' }],
    },
  })
}
```

## License

MIT License © [Sure Thing](https://github.com/sure-thing)
npm package: @presta/source-filesystem
Description: Source and watch local files, rebuilding pages on change.
Author: estrattonbailey
Latest version: 0.3.2

# @presta/source-filesystem

Source and watch local files, rebuilding pages on change.

## Usage

First, set up the plugin in your config file:

```javascript
import sourceFs from '@presta/source-filesystem'

export const plugins = [sourceFs()]
```

Then source files using globs in your individual pages:

```javascript
import { source } from '@presta/source-filesystem'

const posts = source('blog/*.md', __filename)
```

> `__filename` here is important — it tells this library where to resolve globs
> from and ensures that adding and removing sourced files is picked up by the file
> watcher.

`source` returns an array of tuples `[filepath, content]`. You can use these to
generate static paths, or render in a serverless function.

```javascript
import path from 'path'
import { source } from '@presta/source-filesystem'

const posts = source('blog/*.md', __filename)

const routes = posts.map((post) => {
  const filename = path.basename(post[0], '.md')
  return {
    [`/blog/${filename}`]: post[1],
  }
})

export function getStaticPaths() {
  return Object.keys(routes)
}

export function handler({ path }) {
  const post = routes[path]
  return markdown(post) // render markdown as needed
}
```

### Other file types

It also works with other natively supported extensions like `.js` and `.json`,
as well as those supported by esbuild like `.jsx`, `.ts` and `.tsx`.

Instead of returning the file content as a string, it will be read as a normal
node `module`, so the tuple will be `[filepath, module]`.

### Multiple source

You can also source multiple globs or even call `source` more than once.

```javascript
const jsons = source('configs/*.json', __filename)
const markdowns = source(['blog/*.md', 'docs/**/*.md'], __filename)
```

## License

MIT License © [Sure Thing](https://github.com/sure-thing)
npm package: @prestashop-core/ws-client
Description: A typescript WebServices client for PrestaShop
Author: The PrestaShop team
Latest version: 1.0.6

# WS-CLIENT

## Description

Typescript [Webservice](https://devdocs.prestashop-project.org/8/webservice/) Client to use with PrestaShop Core.

TO DO :

- Typing : 2 types are required
  - Readable
  - Writable

PrestaShop Compatibility :

- 9
- 8
- 1.7

NodeJs compatibility :

- 18

## Endpoint to implement

| Endpoint   | URL | Done |
|------------| --- | ---- |
| addresses  |     | []   |
| carts      |     | []   |
| cart_rules |     | []   |
| categories |     | []   |
| country    |     | []   |
| customers  |     | []   |
| orders     |     | []   |
| products   |     | []   |
| stores     |     | []   |
| taxes      |     | []   |
| tax_rules  |     | []   |

## Stack

- [fetch](https://www.npmjs.com/package/node-fetch)
- Typescript

## How to use

Set up the env file:

```sh
cp .env.dist .env
open .env
```

Run some code:

```js
const client = new BaseClient({
  baseURl: process.env.BASE_URL, // URL of your PrestaShop
  wsKey: process.env.WS_KEY, // Key to connect to your prestashop
});

const response = await client.product.create(productData);
console.log(response.status);
console.log(response.data.product); // Maybe return type writable ??

// Error case
// Return an Exeption depending on what is the error.
// UnreachableServerException
// WrongPayloadException
// RequestTimeoutException
// InvalidCredentialsException
```

# Build

Install dependencies:

```sh
npm install -g pnpm
pnpm install
```

Build the library:

```sh
pnpm build
```

Test the library:

```sh
pnpm test
```

# Contributing

This library is an open source solution. Everyone is welcome and even encouraged to contribute with their own improvements!

Just make sure to follow our [contribution guidelines](https://devdocs.prestashop-project.org/8/contribute/contribution-guidelines/project-modules/).

## Reporting issues

You can report issues [here](https://github.com/PrestaShop/ws-client/issues/new).
npm package: @prestashopcorp/billing-cdc
Description: Cross domain component for the billing UI app
Author: PrestaShopCorp
Latest version: 0.0.57-1

# Prestashop Billing Component

A component allowing easy integration of Prestashop Billing component.

## Integration

### SaaS app

You cand find SaaS App integration in [the SaaS App documentation](https://billing-docs.netlify.app/)

### Internal use

Ask billing platform team for further information.

### Docs

[Technical docs](https://unpkg.com/@prestashopcorp/billing-cdc/dist/docs/index.html)
npm package: @prestashopcorp/chargebee-vue
Description: plugin vue for chargebee
Author: PrestaShop
Latest version: 0.1.22

# vue-chargebee

Vue plugin for Chargebee

> Vue.js plugin for Chargebee

[Chargebee JS API reference](https://www.chargebee.com/checkout-portal-docs/components-fields-integrations.html#inserting-chargebee-js-script-in-your-application)

## Requirements

Vue ^2.0.0

```bash
npm install @prestashopcorp/chargebee-vue
```

```js
import Vue from 'vue'
import ChargebeeVue from '@prestashopcorp/chargebee-vue'

Vue.use(ChargebeeVue, {
  site: 'XXXXX',
  publishableKey: 'XXXXX'
});
```

## Identify

add this on your App.vue file
```js
created(){
  this.$chargebee.identify({shopId}, {
    name: "FullName_account",
    email: "email_account",
    plan: "premium_account"
  })
}
```
npm package: @prestashopcorp/eslint-config
Description: Basic Eslint rules for PrestaShop projects
Latest version: 1.0.1-beta.4

# Prestashop eslint-config

An eslint sharable config for Prestashop Javascript projects.
This condig is the recommended eslint configuration for Javascript projects at PrestaShop
This config include eslint-config-standard and prettier/recommended rules.

## Npm config

This package is published in an Npm private registry.

If is not do, you have to set the authentication config by running this commands:

```bash
npm set "//registry.npmjs.org/:_authToken=XXXXX"
npm set "@prestashopcorp:registry=https://registry.npmjs.org"
```

Replace XXXXX by the prestashopcorp NPM registry token.
You can ask for the token on the [#team-platform-engineering](https://prestashopcorp.slack.com/archives/CAYCT1VUJ) slack channel.

## Install

```bash
yarn add @prestashopcorp/eslint-config --dev
```

## Usage

Shareable configs are designed to work with the extends feature of .eslintrc files. You can learn more about [Shareable Configs](https://eslint.org/docs/latest/extend/shareable-configs) on the official ESLint website.

Add this to your .eslintrc file:

```json
{
  "extends": "@prestashopcorp/eslint-config"
}
```

## troubleshooting

### Prettier error

```bash
TypeError: prettier.resolveConfig is not a function
```

Try to update prettier to prettier v3
npm package: @prestashopcorp/eslint-config-ts
Description: Typescript  Eslint rules for PrestaShop projects
Author: Takeshi Daveau
Latest version: 0.3.0-beta.2

# Prestashop eslint-config-ts

An eslint sharable config for typescript project.
This config include @prestashopcorp/eslint-config, @typescript-eslint/recommended-type-checked and @typescript-eslint/stylistic-type-checked rules.

## Npm config

This package is published in an Npm private registry.

if it is not done, you have to set the authentication config by running this commands:

```bash
npm set "//npm.pkg.github.com/:_authToken=$GITHUB_TOKEN"
npm set "@prestashopcorp:registry=https://npm.pkg.github.com"
```

## Install

```bash
yarn install -D @prestashopcorp/eslint-config-ts
```

## Usage

Shareable configs are designed to work with the extends feature of .eslintrc files. You can learn more about [Shareable Configs](https://eslint.org/docs/latest/extend/shareable-configs) on the official ESLint website.

Add this to your .eslintrc file:

```json
{
  "extends": "@prestashopcorp/eslint-config-ts"
}
```
npm package: @prestashopcorp/openapilint-config
Description: Basic Openapi rules for PrestaShop projects
Author: Maxime Simoncelli
Latest version: 0.0.2

# Openapi Linter

<!-- toc -->

- [Installation](#installation)
- [Usage](#usage)
- [Deactivating a rule](#deactivating-a-rule)
- [Adding a rule](#adding-a-rule)
- [List of rules](#list-of-rules)

<!-- tocstop -->

---

This package is a tool for linting OpenApi specifications using a set of base rules fitting PrestaShop needs. It uses [@stoplight/spectral](https://github.com/stoplightio/spectral) and is entirely overridable.

This readme only offers some basic knowledge on how to use the package. Head over to the [official spectral documentation](https://meta.stoplight.io/docs/spectral/674b27b261c3c-overview) for more details.

## Installation

```bash
# npm
npm i -D @prestashopcorp/openapilint-config
# yarn 
yarn add -D @prestashopcorp/openapilint-config
```

## Usage

Execute this command at the root of your project:

```bash
echo 'extends: ["@prestashopcorp/openapilint-config"]' > .spectral.yaml
```

Add a new script in your `package.json`:

```json
...
"scripts": {
    "lint:openapi": "spectral lint ./openapi.yaml"
}
...

```
> :warning: Make sure to have your `spectral.yaml` and `openapi.yaml` files at the same level. If you really want to separate them, make sure to at least always leave `spectral.yaml` at the root of your project and change the file destination in your `package.json` scripts section.

You're all set !

## Deactivating a rule

Here is an exemple of how to deactivate the rule "camel-case": 

```yaml
extends: ['@prestashopcorp/openapilint-config']
overrides:
  rules:
    camel-case: "off"    
```

For more detailed informations and how-tos, please see [here](https://meta.stoplight.io/docs/spectral/293426e270fac-overrides).

## Adding a rule

Please [see this section](https://meta.stoplight.io/docs/spectral/d3482ff0ccae9-rules) of the spectral documentation.

## List of rules

- camel-case
npm package: @prestashopcorp/ps-media-query
Description: A lightweight and scalable SCSS library for managing responsive design in a modern way, with customizable media query mixins. Perfect for PrestaShop themes and contemporary web projects.
Author: Blivet Thibault
Latest version: 0.0.1

# @prestashopcorp/ps-media-query
![npm version](https://img.shields.io/npm/v/@prestashopcorp/ps-media-query.svg)

A lightweight SCSS library providing intuitive mixins for responsive design. Built for PrestaShop themes and modern web projects.

## Features

- 🎯 Easy-to-use tools for managing media queries (`up`, `down`, `only`, `between`)
- 🛠️ Customizable breakpoints and media expressions
- 📱 Uses modern media query range syntax (`@media (width >= 768px)`). Compatible with modern browsers [caniuse.com/css-media-range-syntax](https://caniuse.com/css-media-range-syntax)
- 🪲 Debug mode to help you visualize which media queries is triggered
- 📦 Zero dependencies

## Installation

You can install the library in your project using npm:

```bash
npm install @prestashopcorp/ps-media-query
```

## Usage

Load the library in your project:

```scss
@use "@prestashopcorp/ps-media-query" as *;
```

You can also load the library using `with` attributes to define configuration options:

```scss
@use "@prestashopcorp/ps-media-query" as * with (
  // Enable debug mode
  $debug: true,
  // Define custom breakpoints
  $breakpoints: (
    // Your custom breakpoints
    "xs": 0,
    "sm": 576px,
    // ...
  )
);
```

Use the existing mixins to create media queries:

```scss
.my-element {
  // Will apply styles for screens larger than md breakpoint
  @include ps-media-up(md) {
    color: red;
  }
}
```

Old way to load the library with import:

```scss
// Need to override config ?
// Define config options before importing the library
$debug: true;

// Import the library
@import "@prestashopcorp/ps-media-query";
```

### Default Breakpoints

The library includes a set of default breakpoints for common screen sizes. You can customize these or define your own.
Note: smallest breakpoint has to be set to `0`.

```scss
$breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1400px,
) !default;
```

### Available Mixins

- `ps-media-up($breakpoint)`: Applies styles for screens larger than the specified breakpoint
- `ps-media-down($breakpoint)`: Applies styles for screens smaller than the specified breakpoint
- `ps-media-only($breakpoint)`: Applies styles only for the specified breakpoint
- `ps-media-between($min, $max)`: Applies styles between two breakpoints

## Custom Media Query

You can create custom media queries by combining mixins and expressions.

```scss
@include ps-media-up(md, $expressions: (get-expression(landscape), get-expression(hover))) {
  .my-element {
    color: red;
  }
}
```

## Debug Mode

Enable debug mode to visualize which media queries breakpoints are applied in your browser's console.

```scss
@use "@prestashopcorp/ps-media-query" as * with (
  $debug: true
);
```
npm package: @prestashopcorp/puik
Description: PUIK - This includes all public packages of PrestaShop UI kit.
Author: Prestashop
Latest version: 2.8.0

<div align="center">
  <a href="https://prestashop.com">
    <img src="https://prestashop.com/sites/default/files/email/logo_x2_rebrand.png" alt="Logo" width="420">
  </a>

<h3 align="center">Puik</h3>

  <p align="center">
    The <b>P</b>restaShop <b>UI</b> <b>K</b>it
  </p>
  <a href="https://uikit.prestashop.com/">Documentation</a>
</div>

## About The Project

Puik is a library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem. This project includes the following packages:

- [@prestashopcorp/puik-components](https://www.npmjs.com/package/@prestashopcorp/puik-components) a Vue 3 components library
- [@prestashopcorp/puik-web-components](https://www.npmjs.com/package/@prestashopcorp/puik-web-components) a Web components library
- [@prestashopcorp/puik-resolver](https://www.npmjs.com/package/@prestashopcorp/puik-resolver) a component resolver for our Vue 3 components library
- [@prestashopcorp/puik-theme](https://www.npmjs.com/package/@prestashopcorp/puik-theme) a CSS library containing all the classes used in our components
- [@prestashopcorp/puik-tailwind-preset](https://www.npmjs.com/package/@prestashopcorp/puik-tailwind-preset) a Tailwind Css preset that contains all the design tokens used to create the components ( ⚠️ This package is obsolete since Puik version `2.6.0`, the migration of tailwind to version `V4`, whose css-only philosophy makes the old theme.js preset file unnecessary).

## Prerequisites

- Node.js LTS is required.

## Installation

```sh
# chose your favorite package manager
# NPM
$ npm install @prestashopcorp/puik --save

# Yarn
$ yarn add @prestashopcorp/puik

# pnpm
$ pnpm install @prestashopcorp/puik
```

## Usage

### Imports

For the usage you can refer to the other packages README, the only thing that will change is the import path, you will use `@prestashopcorp/puik` instead of the specific package name (that doesn't apply to `@prestashopcorp/puik-theme`)

### Full import

If you don't care about bundle size you can full import the library by following these instructions

Import the vue library and the css directly into your main.js / main.ts

```typescript
import { createApp } from 'vue'
import Puik from '@prestashopcorp/puik'
import '@prestashopcorp/puik-theme/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(Puik)
app.mount('#app')
```

If you are using Volar you need to add the global component type definitions to your `tsconfig.json`

```json
// tsconfig.json
{
  "compilerOptions": {
    "types": ["@prestashopcorp/puik/global"]
  }
}
```
npm package: @prestashopcorp/puik-components
Description: PUIK Vue 3 components library.
Author: Prestashop
Latest version: 2.8.0

<div align="center">
  <a href="https://prestashop.com">
    <img src="https://prestashop.com/sites/default/files/email/logo_x2_rebrand.png" alt="Logo" width="420">
  </a>

<h3 align="center">Puik Components</h3>

  <p align="center">
    The <b>P</b>restaShop <b>UI</b> <b>K</b>it Vue Components
  </p>
  <a href="https://uikit.prestashop.com/">Documentation</a>
</div>

## About The Project

Puik Components is a Vue Components library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem.

ℹ️ [see list of available Vue components](https://github.com/PrestaShopCorp/puik/blob/main/RELEASE-NOTES-V2.md#available-components)

## Prerequisites

- Node.js LTS is required.
- Vue 3

## Installation

```sh
# NPM
$ npm install @prestashopcorp/puik-components @prestashopcorp/puik-theme --save

# Yarn
$ yarn add @prestashopcorp/puik-components @prestashopcorp/puik-theme

# pnpm
$ pnpm install @prestashopcorp/puik-components @prestashopcorp/puik-theme
```

### Style

import css in your application:

`@import "@prestashopcorp/puik-theme/index.css";`

### Auto import using Puik Resolver (recommended)

First you need to install `unplugin-vue-components`, `unplugin-auto-import` and the Puik resolver `@prestashopcorp/puik-resolver`

```sh
$ npm install -D unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver

# Yarn
$ yarn add unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D

# pnpm
$ pnpm install unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D
```

Then add the code below in your vite.config file

ℹ️ if you don't use Vite [follow this link](https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#installation)

```typescript
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { PuikResolver } from '@prestashopcorp/puik-resolver'

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [PuikResolver()],
    }),
    AutoImport({
      resolvers: [PuikResolver()],
    }),
  ],
})
```

### On demand import

Import the vue component directly into your vue file

```vue
<script setup>
import { PuikButton } from '@prestashopcorp/puik-components'
</script>

<template>
  <puik-button>Example button</puik-button>
</template>
```
npm package: @prestashopcorp/puik-resolver
Description: PUIK resolver - For unplugin-vue-components.
Author: Prestashop
Latest version: 9.0.0

<div align="center">
  <a href="https://prestashop.com">
    <img src="https://prestashop.com/sites/default/files/email/logo_x2_rebrand.png" alt="Logo" width="420">
  </a>

<h3 align="center">Puik Resolver</h3>

  <p align="center">
    The <b>P</b>restaShop <b>UI</b> <b>K</b>it vue component resolver
  </p>
  <a href="https://uikit.prestashop.com/">Documentation</a>
</div>

## About The Project

Puik Resolver is a vue component resolver for `unplugin-vue-components` and `unplugin-auto-import` that will auto import components from the `@prestashopcorp/puik-components`

## Prerequisites

- Node.js LTS is required.
- Vue 3
- `@prestashopcorp/puik-components`

## Installation

```sh
$ npm install -D unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver

# Yarn
$ yarn add unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D

# pnpm
$ pnpm install unplugin-vue-components unplugin-auto-import @prestashopcorp/puik-resolver -D
```

ℹ️ `unplugin-auto-import` is only used for the snackbar component at the moment if you don't need this component you can skip everything related to `unplugin-auto-import`

## Usage

Add the following code to your `vite.config.ts` file

```typescript
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { PuikResolver } from '@prestashopcorp/puik-resolver'

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [PuikResolver()],
    }),
    AutoImport({
      resolvers: [PuikResolver()],
    }),
  ],
})
```

Then you can use the components without importing them like that

```vue
<script setup></script>

<template>
  <PuikButton>Example button</PuikButton>
</template>
```

You can find out more about [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components#readme) and [unplugin-auto-imports](https://github.com/unplugin/unplugin-auto-import#readme) in their documentation
npm package: @prestashopcorp/puik-tailwind-preset
Description: PUIK tailwind preset - A set of Tailwind CSS utility classes, adapted to the new branding.
Author: Prestashop
Latest version: 2.4.1

<div align="center">
  <a href="https://prestashop.com">
    <img src="https://prestashop.com/sites/default/files/email/logo_x2_rebrand.png" alt="Logo" width="420">
  </a>

<h3 align="center">Puik Tailwind Preset</h3>

  <p align="center">
    The <b>P</b>restaShop <b>UI</b> <b>K</b>it Tailwind CSS
  </p>
  <a href="https://uikit.prestashop.com/">Documentation</a>
</div>

## About The Project

Puik Tailwind Preset is a [Tailwind CSS](https://tailwindcss.com/) preset that aims to provide all the design tokens based on the PrestaShop Design System for all the PrestaShop ecosystem.

## Prerequisites

- Tailwind Css 3+

## Installation

```sh
# NPM
$ npm install @prestashopcorp/puik-tailwind-preset --save

# Yarn
$ yarn add @prestashopcorp/puik-tailwind-preset

# pnpm
$ pnpm install @prestashopcorp/puik-tailwind-preset
```

## Usage

If you want to use the Tailwind CSS preset used for this library you can import the configuration in your project.

Require the puikTailwindPreset in your `tailwind.config.{js|ts}` file

```typescript
const { puikTailwindPreset } = require('@prestashopcorp/puik-tailwind-preset')
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [puikTailwindPreset],
}
```

## Available tokens

You can find all the available tokens [here](https://github.com/PrestaShopCorp/puik/blob/main/packages/tailwind-preset/theme.ts)
npm package: @prestashopcorp/puik-theme
Description: PUIK theme - CSS classes of Prestashop UI Kit.
Author: Prestashop
Latest version: 2.8.0

<div align="center">
  <a href="https://prestashop.com">
    <img src="https://prestashop.com/sites/default/files/email/logo_x2_rebrand.png" alt="Logo" width="420">
  </a>

<h3 align="center">Puik Components</h3>

  <p align="center">
    The <b>P</b>restaShop <b>UI</b> <b>K</b>it Vue Components
  </p>
  <a href="https://uikit.prestashop.com/">Documentation</a>
</div>

## About The Project

Puik Theme is a Css library that contains all the CSS classes used to create the Vue Components.

## Installation

Install the `@prestashopcorp/puik-theme` package and import the css files you need

```sh
# NPM
$ npm install @prestashopcorp/puik-theme --save

# Yarn
$ yarn add @prestashopcorp/puik-theme

# pnpm
$ pnpm install @prestashopcorp/puik-theme
```

Or include the CSS in your HTML by using the CDN

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@prestashopcorp/puik-theme/dist/index.css"
/>
```

## Usage

Once the CSS styles are loaded using the CDN or by importing the library, you can start using all the classes prefixed by `puik-`

```html
<button class="puik-button puik-button--primary">Example button</button>
```
npm package: @prestashopcorp/puik-web-components
Description: PUIK Web-Components library.
Author: Prestashop
Latest version: 2.8.0

<div align="center">
  <a href="https://prestashop.com">
    <img src="https://prestashop.com/sites/default/files/email/logo_x2_rebrand.png" alt="Logo" width="420">
  </a>

<h3 align="center">Puik Web Components</h3>

  <p align="center">
    The <b>P</b>restaShop <b>UI</b> <b>K</b>it Web Components
  </p>
  <a href="https://uikit.prestashop.com/">Documentation</a>
</div>

## About The Project

Puik Web Components is a library that aims to provide a complete set of reusable web components based on the PrestaShop Design System for all the PrestaShop ecosystem.

ℹ️ [see list of available Web components](https://github.com/PrestaShopCorp/puik/blob/main/RELEASE-NOTES-V2.md#available-components)

## Prerequisites

- Node.js LTS is required.

## Installation

```shell
# NPM
$ npm install @prestashopcorp/puik-web-components --save

# Yarn
$ yarn add @prestashopcorp/puik-web-components

# pnpm
$ pnpm install @prestashopcorp/puik-web-components
```

## Using Puik Web Components

### Global registration

To use all Puik web components in your application, you first need to import and initialize them. Here’s how you can do it:  

```js
import {
  initAllWeb,
  PuikExampleCe,
  PuikAnotherExampleCe,
  // other components...
 } from @prestashopcorp/puik-web-components
 ```

Then, run the following function in your application:  
`initAllWeb();`

For each component, it replaces 'ce' in the component's name with the provided suffix to form the `tagname`.
If no suffix is provided, 'ce' is used as the default suffix

Here’s how you can do it:

```javascript
// Initialize all web components without argument
initAllWeb(); // The tagname for PuikExampleCe will default to 'puik-example-ce'

// Initialize all web components with 'mySuffix' as the suffix
initAllWeb('mySuffix'); // The tagname for PuikExampleCe will be 'puik-example-mySuffix'
```

### On-demand Registration (recommended)

If you only want to use a specific component in your application, you can import and initialize it individually.
In this case you can name your web-component whatever you want.

1 - Import the Web component in JS file and apply one of the following two ways to registering your custom element :

- By using the [`customElements.define`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#registering_a_custom_element) method :

```js
import { PuikExampleCe } from @prestashopcorp/puik-web-components

customElements.define('your-tagname-here', PuikExampleCe);
```

- Or by using the `initCe` method that you can importing from the package :

```js
import { initCe, PuikExampleCe } from @prestashopcorp/puik-web-components

initCe('your-tagname-here', PuikExampleCe)
```

2 - Then, use your web-component:

```html
<your-tagname-here>
  ...
</your-tagname-here>
```

ℹ️ Web components can use the same props as Vue components
npm package: @prestashopcorp/segment-vue
Description: plugin vue for segment
Author: Mathieu Roux
Latest version: 3.0.0

# vue-segment

Vue plugin for Segment

> Vue.js plugin for Segment

[Segment Analytics.js Documentation](https://segment.com/docs/sources/website/analytics.js/)

## Requirements

Vue ^2.x or Vue ^3.x

```bash
npm install @prestashopcorp/segment-vue
```

### Vue 2

```js
import Vue from 'vue'
import SegmentVue from '@prestashopcorp/segment-vue'

Vue.use(SegmentVue, {
  id: 'XXXXX',
})
```

### Vue 3

```js
import { createApp } from 'vue'
import SegmentVue from '@prestashopcorp/segment-vue'

const app = createApp(App)

app.use(SegmentVue, {
  id: 'XXXXX',
})
```

## LoadOptions

For GDPR it's necessary to desactivate all integrations
An Example below :

```js
import Vue from 'vue'
import SegmentVue from '@prestashopcorp/segment-vue'

Vue.use(SegmentVue, {
  id: 'XXXXX',
  settings: {
    integrations: {
      All: false,
      'Segment.io': true,
    },
  },
})
```

### For example with axeptio

```js
axeptio.on('cookies:complete', function (choices) {
  if (choices.google_analytics && choices.hotjar) {
    window.analytics.load(SEGMENT_KEY, {
      integrations: {
        All: false,
        'Segment.io': true,
        'Google Analytics': true,
        Hotjar: true,
      },
    })
    window.location.reload()
  }
})
```

## Identify

add this on your layout file

```js
created(){
  this.$segment.identify({shopId}, {
    name: "FullName_account",
    email: "email_account",
    plan: "premium_account"
  })
}
```

## Track

add this on each method click

```js
handleClick(){
  this.$segment.track(NAME_YOUR_TRACK,
  //optional properties
  {
    name: "it's your track name",
    category: "ps_metrics",
  })
}
```

## Options

### route track option

put the name attribute in each route and add your router to the vue-segment initialization

### Vue 2

```js
export default {
  path: 'dashboard',
  name: 'dashboard', //Set name on each route
  component: DashboardApp,
}

Vue.use(SegmentVue, {
  id: 'XXXXX',
  router,
})
```

### Vue 3

```js
export default {
  path: 'dashboard',
  name: 'dashboard', //Set name on each route
  component: DashboardApp,
}

app.use(SegmentVue, {
  id: 'XXXXX',
  router,
})
```

### exclude route option

```js
export default {
  name: 'activity',
  path: 'activity',
  meta: { exclude: true }, // <= add this key in your route object, true to exclude, false to track
  component: () =>
    import(
      /* webpackChunkName: "dashboardActivity" */ '@/core/dashboard/pages/ActivityApp'
    ),
  redirect: 'activity/revenue',
  children: [RevenueRouter, OrderRouter, ConversionRouter, VisitRouter],
}
```

### page category option

put the name attribute in each route and add your router to the vue-segment initialization

### Vue 2

```js
Vue.use(SegmentVue, {
  id: 'XXXXX',
  router,
  pageCategory: 'ps_metrics_',
})
```

### Vue 3

```js
app.use(SegmentVue, {
  id: 'XXXXX',
  router,
  pageCategory: 'ps_metrics_',
})
```
npm package: @prestashopcorp/smb-edition-back-office-header-js
Description: Prestashop smb_edition module javascript sources
Author: PrestaShop
Latest version: 0.1.5

# Package back-office-header-js

This package contains all js files loaded by the **smb_edition** module.

## Build the package

> ⚠️ We highly recommend to launch the build with the **smb_edition** build script. The Vue.js application sources will not be on the package otherwise.

In order to build the package, you first need to install all dependencies.

```bash
npm i
```

Then, create a `.env` based on the `.env.example` file and complete it.

```bash
cp .env.example > .env
```

Then you can launch the build command. The build will be into the `dist` folder.

```bash
npm run build
```

The script will copy all js files into the `dist` folder and minify all files into the destination.

## Dependencies

This package depends on the following packages :

- [@segment/analytics-next](https://www.npmjs.com/package/@segment/analytics-next) : Segment’s JavaScript SDK
npm package: @prestashopcorp/smb-edition-css
Description: Prestashop smb_edition module stylesheet sources
Author: PrestaShop
Latest version: 4.0.3

# Package css-builder

This package contains all css files loaded by the **smb_edition** module.

## Build the package

> ⚠️ We recommend to launch the build with the **smb_edition** build script.

In order to build the package, you first need to install all dependencies.

```bash
npm i
```

Then you can launch the build command. The build will be into the `dist` folder.

```bash
npm run build
```

The script will compile all scss files into the `dist` folder, copy all css files into the `dist` folder and minify all files into the destination.

## Dependencies

This package depends on the following packages :

- [Sass](https://www.npmjs.com/package/sass) : A JavaScript implementation of Sass to compile scss
- [Minify](https://www.npmjs.com/package/minify) : A minifier of js, css, html and img files