Usage

Using JS components

Import the JS Toolkit components from the NPM package and add them to your application or use them to build other components.

// app.js
import { Base, createApp } from '@studiometa/js-toolkit';
import { Modal, Cursor } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Modal,
      Cursor,
    },
  };
}

export default createApp(App, document.body);

Using Twig components

Twig components can be used as is in your project by including or embeding them:

{% include '@ui/atoms/Button/Button.twig' with { label: 'Click me' } %}

Or they can be extended for customization and propagate the extended version in every other components where they are used:

{# atoms/Button/Button.twig #}
{% extends '@ui-pkg/atoms/Button/Button.twig' %}

{% set attr = attr|default({})|merge({
  class: 'p-4 rounded text-white bg-blue-500'
}) %}

The @ui-pkg namespace

When extending components, use the @ui-pkg namespace instead of @ui to avoid infinite loops. This namespace only points to the templates from the package whereas @ui points to both the templates from your project and the package.

Using Vue components

This package does not have Vue components yet.