rc-ui-lib

A small Stencil component library used for team proof-of-concept and demos.

This repository contains a tiny set of Web Components built with Stencil. It's intended as a lightweight, shareable UI library to explore Stencil and gather feedback from the team. At the moment it contains a couple of presentational components (modal, toast, buttons, etc.) for demo purposes.

Included components (demo-level)

• rc-atc-button — Add-to-cart style button (demo)
• rc-event-button — Event-style button (demo)
• rc-modal — Modal/dialog (presentational)
• rc-spinner — Simple spinner
• rc-toast — Toast notifications + rc-toast-container

More components may be added if the team wishes to continue with Stencil.

Quick start

Prerequisites: Node.js (16+ recommended), npm (or yarn/pnpm).

Install dependencies:

PowerShell / Command Prompt:

npm install

Start a dev server (live rebuild + serve):

npm run start

Build the production bundle:

npm run build

Run tests (unit + e2e):

npm run test

Using the components

You can either consume the compiled distribution from dist/ or load the loader script from loader/ for CDN-like usage.

When developing, import components directly in your app using standard Web Component tags after the library is built or served. Example markup for rc-modal and rc-toast:

<rc-modal open>
	<div slot="header">Modal title</div>
	<div slot="body">Modal content</div>
	<div slot="footer"><button>Close</button></div>
</rc-modal>

<rc-toast-container></rc-toast-container>

See component readme.md files in src/components/* for per-component notes.

Accessibility notes

These components are provided as demo examples. A minimal accessibility pass has been applied to a few components (ARIA roles/live regions for toasts, keyboard-close for modals). If you plan to use this library in production, please treat these as starting points and perform accessibility testing (screen readers, keyboard-only, color contrast) before shipping.

Development notes

• This project uses Stencil (see @stencil/core in devDependencies).
• Sass support is enabled via @stencil/sass.
• The library exposes a small global store (@stencil/store) used by the toast system.

If you want me to wire up example pages or a small demo app showing each component in isolation, I can add a minimal www/ demo and some usage examples.

License

MIT