SDK Web

Introduction

GreyCat’s Web SDK is available here @greycat/web and features:

Built on top of the Web Component standards and Shoelace
Tight integration with GreyCat std library
Provides several production-ready components for: charting, forms, virtual tables, etc.

How it works

When importing @greycat/web every Web Component that it defines will then be registered globally as Custom Elements.

Because some of those components communicate with GreyCat internally we need to tell them where to find the current instance. For this, the @greycat/sdk and more generally @greycat/web leverages global scope. All the functions and components that needs to communicate directly with GreyCat will look for a GreyCat instance at globalThis.greycat.default.

This implies that the only “initialization” that is needed is the following:

import '@greycat/web';

await gc.sdk.init();

// here you can safely use all of @greycat/web

Components

We offer a range of web components within the web SDK. Please check the Web Components section for further details or use the list below to jump directly to the various components.

Formatting (Numbers, Dates)

All gui elements leverage the same instance of Intl for the display of dates and number

If you which to override them you

import { setGlobalDateTimeFormat, setGlobalNumberFormat } from '@greycat/web';

setGlobalDateTimeFormat(
  new Intl.DateTimeFormat('de-DE', {
    year: '2-digit',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'longOffset',
    timeZone: 'de-DE',
  }),
);
setGlobalNumberFormat(new Intl.NumberFormat('de-DE', { maximumFractionDigits: 2 }));

Or you if you just want to update the timezone

import { setGlobalDateTimeFormatTimezone } from '@greycat/web';

setGlobalDateTimeFormatTimezone(gc.core.TimeZone['Europe/Berlin']);

Shoelace

Underneath most of our components leverage shoelace components, specially all the gui-input use sl-input, if you which to style them refer to the shoelace doc.

By default @greycat/web also comes with all shoelace components already imported, you don’t require any extra configuration, once our library imported you are free to use any of shoelaces components.

You can access shoelace by importing sl from @greycat/web, in case you need to change internal configuration, for example to set a custom Icon LIbrary.

import { sl } from '@greycat/web';

sl.registerIconLibrary('default', {
  resolver: (name) => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`,
});

d3

The d3.js library is also exposed

import { d3 } from '@greycat/web';