npm package: @ppg_pl/pallete
Description: Color-Selector WebComponent
Latest version: 2.0.27

# Project Documentation

This documentation provides an overview of the project's architecture, technologies used, and integration instructions for both the backend and frontend components.

## Backend

### Version 1.0.1

- **Framework**: The application backend is built using [Strapi](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html) version 4.
- **Database**: The staging environment is configured with a PostgreSQL database.
- **Collation Method**: Refer to the Strapi documentation for detailed information on collation.

### Version 2.0.0

- **Framework**: The application backend is built using [Directus](https://docs.directus.io/self-hosted/quickstart.html) version 10.10.4.
- **Database**: The staging environment is configured with a PostgreSQL database.
- **Collation Method**: Refer to the Directus documentation for detailed information on collation.

## Frontend

- **Webcomponent Library**: The frontend application is written as a webcomponent using [StencilJS](https://stenciljs.com/docs/introduction).
- **Integration**: To integrate the webcomponent into an HTML file, follow these steps:
  1. Install the package using npm:

     ```
     npm install @ppg_pl/pallete
     ```

     or using yarn:

     ```
     yarn add @ppg_pl/pallete
     ```

  2. Connect the generated `www` folder to your HTML file.

  3. Ensure correct paths for assets and scripts within the HTML file. Below is an example of how to import the package into any project:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Selector</title>

    <style type="text/css" media="screen, print">
      @font-face {
        font-family: 'Galatea';
        src:
          url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.woff2) format('woff2'),
          url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.woff) format('woff'),
          url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.ttf) format('truetype'),
          url(/node_modules/@ppg_pl/pallete/www/build/assets/fonts/Galatea-Regular.eot) format('embedded-opentype');
        font-weight: 400;
        font-style: normal;
      }
    </style>
    <!-- here is the path  -->
    <script type="module" src="/node_modules/@ppg_pl/pallete/www/build/pallete.esm.js"></script>
    <script nomodule src="/node_modules/@ppg_pl/pallete/www/build/pallete.js"></script>
  </head>
  <body>
    <my-component class="modal_pallete" price="5.99"></my-component>

    <label for="shop">Shop</label> <input name="shop" type="shop" /> <label for="product">Product</label><input name="product" type="product" />
    <button>open modal</button>

    <script>
      const btn = document.querySelector('button');
      const modal = document.querySelector('.modal_pallete');
      const shop = document.querySelector('input[name="shop"]');
      const product = document.querySelector('input[name="product"]');

      modal.setAttribute('available_testers', JSON.stringify([{ id_product_attribute: 213, color_name: 'ecru' }]));
      btn.addEventListener('click', () => {
        modal.setAttribute('shop', shop.value);
        modal.setAttribute('product', product.value);
        modal.open();
      });
      modal.addEventListener('addToBasket', e => {
        const { id } = e.detail;

        console.log('Dodaj tester do koszyka:', id);
      });
    </script>
  </body>
</html>
```

## Additional Integrations

For other integrations and specific functionalities, refer to the comprehensive documentation provided for each component or library.