Popui

Popui is a set of reusable components to be used inside Console UI and other Invopop Apps.

Currently we provide different libraries and examples for

• Svelte
• HTML
• Go
• Web Components

Svelte

Runing Storybook for development

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development storybook server:

npm run storybook

For using a different accent color for some components you can set the --workspace-accent-color: CSS variable placed in .storybook/variables.css file.

Publishing the Svelte Library

To publish the library to npm you only need to manually increase the version of package.json and make a PR to main branch. Once merged, it will automatically relase a new version of the library.

Using the Svelte Library in your app

import { InputText } from '@invopop/popui'

<div>
  <InputText
    label="Name"
    placeholder="Company's legal name"
    on:input={(event) => {
      console.log(event.detail)
    }}
  />
</div>

A complete catalogue of examples is availabe on Storybook

HTML

Raw HTML Examples of most of the components are available under the html folder of this repo.

They all make use of the popui.css file that is deployed to a CDN on each release.

Go

For Go, we are using Templ for creating template wrappers around these HTML components.

Development server

To run a development server for the Go library:

npm air

This command will compile the .templ templates and start up a web server loading the go/examples/page.templ file.

Air will also watch for changes and re-run everything for you.

Using the go library in your app

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ Page() {
    <div class="max-w-md">
        @popui.Button(
            props.Button{
                Variant: "primary",
                Small: true,
            }) {
            Click Me
        }
    </div>
}

You can check out examples of each component in go/examples/page.templ file.

Web Components

Some of the Svelte components have a wrapper for making it work using Web Components

Building the Web Components Library

To build the Web Components library:

npm run build-web-components

This will generate a /dist/index.js file that you can include on any HTML to test. There is a ready-to-use HTML file with an example of any of the components located in /src/wbc-preview/index.html

Publishing the Web Components Library

To publish the Web Components library to npm:

npm publish-wbc

Using the Web Components Library in your app

Include the CDN script in your HTML file

<script src="https://cdn.jsdelivr.net/npm/@invopop/[email protected]/index.js" defer></script>

Use any of the components available

<popui-button>Default Button</popui-button>

You can pass props and listen to events

<popui-button onClick="alert('button click')" type="primary">Primary Button</popui-button>

Available Web Components

NOTE: Due to web component limitations booleans need to be passed as strings ie: "true", other structures like objects or arrays need to be passed as JSON.stringify()

Component	Events Emitted	Props Accepted
popui-button	@click	type: 'default', 'primary', 'secondary', 'danger', 'dark'` (default: 'default')
		disabled: boolean (default: false)
		small: boolean (default: false)
		icon: Cog6Tooth (Heroicons library name) (default: undefined)
		iconPosition: 'right', 'left' (default: left)
popui-button-file	@click	type: 'default', 'primary', 'secondary', 'danger', 'dark'` (default: 'default')
		disabled: boolean (default: false)
		name: string (default: '')
		fullwidth: boolean (default: false)
popui-checkbox	@change	checked: boolean (default: false)
popui-input-search	@input	placeholder: string (default: '')
		shortcut: string (default: '')
popui-input-text	@input	id: string (default: '')
		label: string (default: '')
		placeholder: string (default: '')
		errorText: string (default: '')
		disabled: boolean (default: 'false')
popui-list-item	@input	value: string (default: '')
		label: string (default: '')
popui-radio	@change	checked: boolean (default: false)
popui-section		title: string (default: '')
popui-select	@change	id: string (default: '')
		name: string (default: '')
		label: string (default: '')
		placeholder: string (default: '')
		value: string (default: '')
		icon: Cog6Tooth (Heroicons library name) (default: undefined)
		disabled: boolean (default: 'false')
		disablePlaceholder: boolean (default: 'false')
		options: string (default: '[]')
popui-tag-search	@clear	label: string (default: '')
		icon: Cog6Tooth (Heroicons library name) (default: undefined)
popui-tag-status		label: string (default: '')
		status: 'default', 'success', 'warning', 'danger', 'orange' (default: 'default')
popui-title-main		title: string (default: '')
popui-title-section		title: string (default: '')
popui-toggle	@change	checked: boolean (default: false)