@prestashopcorp/puik-web-components

Puik Web Components

The PrestaShop UI Kit Web Components

Documentation

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

Prerequisites

• Node.js LTS is required.

Installation

# 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:

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:

// 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 method :

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 :

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

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

2 - Then, use your web-component:

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

ℹ️ Web components can use the same props as Vue components