Openlab-components NPM

OpenLab Components

Welcome to the OpenLab Component Library with web components made specifically for screens at OpenLab at Technical University of Košice.

These web components bring an unified design by providing layout and typography adjusted for the OpenLab's display size. These components make development of new apps and screen designs for OpenLab easier and faster.

Docs

You can find documentation at our Gitlab Repo or at this page if you prefer website.

Live previews

You can find previews here.

Design Principle

The library is composed of:

basic,
layout,
utils,
and screen components.

Basic components

They provide styling for typography, images, links and progress bar. Simply, just by using these you can create any design of screen for OpenLab. (TODO link CSS Framework for others).

Layout components

Aim of these is to create layout for various screens at OpenLab. These components display your new shiny screen design at right place of the panel of screens.

Utils components

Components of this category helps you to show common information on your information screen.

Screen components

Full information screen components ready to filled with data and displayed. The library offers components made to solve common use-cases at OpenLab such as a class room schedule, departures of public transport, announcement or current weather.

Testing

This library has unit tests for each component which can be run with npm run test.spec.

E2E tests have not been implemented yet, PRs welcome.

Based on Stencil

We use Stencil for developing this library.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Using OpenLab Components in your project

There are more ways how to use OpenLab Components in your project based on what you want to achieve.

1. Webpage

If you wish to use these components on any page you're working on, please:

Either, put a script tag (to enable our web components) and global CSS stylesheet (to set the background and a correct scaling of typography) in the <head> of your index.html in your project (or at each page if you don't use builder):

<script type="module" src="https://unpkg.com/openlab-components/dist/openlab-components/openlab-components.esm.js"></script>
<link rel="stylesheet" href="https://unpkg.com/openlab-components/dist/openlab-components/openlab-components.css" />

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement:

<script type="module">
  import { defineCustomElements } from 'https://unpkg.com/openlab-components/dist/esm/loader.js';

  defineCustomElements();
</script>

Then you can use the OpenLab Components anywhere in your template, JSX, html etc.
The initial script itself is extremely tiny and does not represent the entire component library, it's only a small registry. You can use any or all components anywhere within that webpage. Only the components used on that page will actually be requested and lazy-loaded.

HTML Snippet starter

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Your new OpenLab project</title>

    <link rel="stylesheet" href="https://unpkg.com/openlab-components/dist/openlab-components/openlab-components.css" />
    <script type="module" src="https://unpkg.com/openlab-components/dist/openlab-components/openlab-components.esm.js"><script>

  </head>
  <body></body>
</html>

2. Framework Integration (React, Vue, Angular...)

Please refer to Stencil's Docs if you prefer to use OpenLab Components within a framework.

3. Node Modules

Run npm install openlab-components
Put a script tag similar to this <script src='node_modules/openlab-components/dist/openlab-components/openlab-components.esm.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc.

4. In a Stencil app or any app bundler

Run npm install openlab-components
Add an import within the root component: import 'openlab-components';

Or it is also possible to select components you want to use. To do so, follow:

Run npm install openlab-components

Define a component you want to use within the bundle:

import { OpenlabText } from 'openlab-components/dist/custom-elements';

customElements.define('openlab-text', OpenlabText);

Note! Sometimes the selected component is dependent on others components, this way you can define every component in the bundle:

import { defineCustomElements } from 'openlab-components/dist/custom-elements';

defineCustomElements();

Then you can use the element anywhere in your template, JSX, html etc.
Note! The OpenLab Components Library is lazy-loaded thanks to Stencil. Therefore, only requested components will be loaded on demand.