@invopop/popui

v0.0.58

Published

5 days ago

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

Downloads

917

0High
0Medium
0Low

javinvopop

invopop-dev

samlown

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.

Building CSS Assets

Go requires the CSS with all the Tailwind components to be built independently. To do this, run the go generate command and check any potential errors with your node instalation:

go generate ./...

Development server

To run a development server for the Go library:

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, with the exception of the tailwind classes which will need to be rebuilt manually (for the time being).

Using the Go Package

There are two options for incorporating the Popui styles.

Option 1: loading assets from the CDN:

templ Head() {
  <head>
    <title>Title</title>
    @popui.DefaultCSS()
  </head>
}

Option 2: using the stylesheet provided in the repository and the embedded filesystem. With Echo's StaticFS method, server assets using:

e.StaticFS(popui.AssetPath, popui.Assets)

Then use the EmbeddedCSS() header method:

templ Head() {
  <head>
    <title>Title</title>
    @popui.EmbeddedCSS()
  </head>
}

Either option is valid, but Option 2 will allow you to use development versions or branches of the popui packages.

Use the Go Templ Components

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