@rettangoli/ui

Rettangoli

Development

Folder Structure

src/
├── primitives/     # Basic web components built from scratch, no dependencies
└── components/     # Pre-built components using @rettangoli/fe
vt/                 # Uses @rettangoli/vt visual testing library
├── reference/      # Golden screenshots for visual testing
└── specs/          # HTML test specifications

Install dependencies

Use npx to install rtgl cli globally. You run into issues if try to use bunx.

npx i -g rtgl

Install dependencies

bun install

Generate specification screens

Bundles the code to be used for rettangoli-vt

bun run build:dev

Uses rettangoli-vt to generates test screens

bun run vt:generate

Test for any change using rettangoli-vt

bun run vt:report

Accept the changes by updating the reference screenshots

bun run vt:accept

You can then access the generates screens

bun run serve

Open http://localhost:3000/view to see the specification screens

Usage

Install via CDN

Use via CDN iife (Immediately Invoked Function Expression) us JSDeliver

Primitives only. This might be useful if you want a light weight version and use only the primitives.

<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@latest/dist/rettangoli-layout.iife.min.js"></script>

All primitives and components

<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@latest/dist/rettangoli-ui.iife.min.js"></script>

Install via NPM

Install package

npm install @rettangoli/ui

Import the package. This allows you to configure more flexible options and to treeshake only the code that you need.

import { RettangoliView } '@rettangoli/ui';
customElements.define("rtgl-view", RettangoliView({}));

Stylesheet file

Make sure you import a stylesheet file from your html file. Example