npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@playcanvas/pcui

v4.6.0

Published

User interface component library for the web

Downloads

2,693

Readme

PCUI - User Interface Component Library for the Web

GitHub license NPM Version NPM Downloads

PCUI Banner

This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.

A full guide to using the PCUI library can be found here.

Getting Started

To install the PCUI NPM module, run the following command:

npm install @playcanvas/pcui --save-dev

You can then import each individual element from PCUI. In the example below, you can see how the PCUI Label component is imported from the PCUI library. The styles for PCUI are then imported into the example. Styles only need to be imported once per project.

import { Label } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles';

const label = new Label({
    text: 'Hello World'
});
document.body.appendChild(label.dom);

If you'd like to include PCUI in your React project, you can import the individual components as follows:

import * as React from 'react';
import ReactDOM from 'react-dom';
import { TextInput } from '@playcanvas/pcui/react';
import '@playcanvas/pcui/styles';

ReactDOM.render(
    <TextInput text='Hello World'/>,
    document.body
);

Building a UMD bundle

If you need a UMD version of the PCUI library (say, to use it in a PlayCanvas Editor project), please refer to our build guide.

Including your own font

PCUI uses four CSS classes to add styled fonts to the various components. These are .font-regular, .font-bold, .font-thin and .font-light. You can use your own font with PCUI by adding font-family CSS rules to these classes on your webpage. For example:

.font-regular, .font-bold, .font-thin, .font-light {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

Data Binding

The PCUI library offers a data binding layer that can be used to synchronize data across multiple components. It offers two way binding to a given observer object, so updates made in a component are reflected in the observer's data and distributed out to all other subscribed components. A simple use case is shown below:

import { Observer } from '@playcanvas/observer';
import { Label, TextInput, BindingObserversToElement, BindingElementToObservers } from '@playcanvas/pcui';
import '@playcanvas/pcui/styles';

// create a new observer for a simple object which contains a text string
const observer = new Observer({
    text: 'Hello World'
});

// create a label which will listen to updates from the observer
const label = new Label({
    binding: new BindingObserversToElement()
});

// link the observer to the label, telling it to use the text variable as its value
label.link(observer, 'text');

// create a text input which will send updates to the observer
const textInput = new TextInput({
    binding: new BindingElementToObservers()
});

// link the observer to the label, telling it to set the text variable on change
textInput.link(observer, 'text');

In the above example, the created label will start with Hello World as its text value. When a user enters a value into the text input, the label will be updated with the new value.

Observers can also be bound bi-directionally, in which case an element can both send and receive updates through its observer. The following example shows a two way binding between two text inputs, where either input can update the value of the other. It's been written in React to showcase binding with React components:

import { Observer } from '@playcanvas/observer';
import { BindingTwoWay, TextInput } from '@playcanvas/pcui/react';
import '@playcanvas/pcui/styles';

// create a new observer for a simple object which contains a text string
const observer = new Observer({
    text: 'Hello World'
});

// create two text inputs, which can both send and receive updates through the linked observer
const TextInput1 = () => <TextInput binding={new BindingTwoWay()} link={{ observer, path: 'text'} />;
const TextInput2 = () => <TextInput binding={new BindingTwoWay()} link={{ observer, path: 'text'} />;

Development

Each component exists in its own folder within the ./src/components directory. They each contain:

  • index.ts: The PCUI element.
  • style.scss: The SASS styles for the PCUI element.
  • component.tsx: A React component wrapping the PCUI element.
  • component.stories.tsx: The Storybook entry for the React component.

Locally developed components can be viewed & tested by running the Storybook app, as mentioned in the following section.

If you'd like to build your own custom version of the library you can run the npm run build command which will create a dist directory with your custom build.

Storybook

If you wish to view all components available to you in the library, you can run a local version Storybook. It allows you to browse the entire collection of components and test any changes you make to them. Each component page also includes component documentation and allows you to test each component in all of its configuration states.

Run Storybook as follows:

npm install
npm run storybook

Documentation

Information on building the documentation can be found in the docs directory.