User Interface widgets and utilities for Solid (solid-ui)
These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps. Vanilla JS. Includes large widgets like chat, table, matrix, form fields, and small widgets.
See Solid-Ui Storybook for SolidUI widgets. See Solid-UI API for SolidUI functions. See Forms introduction for UI vocabulary implementation.
Table of content:
- Getting started(#getting-started)
- Further documentation(#further-ocumentation)
Contributions of bug fixes and new functionality, documentation, and tests are always appreciated.
When including solid-ui in an npm-based project, you can use it with:
import { ns, rdf, acl, aclControl, create, dom, icons, log, matrix, media,
messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo
} from 'solid-ui'Clone this repo, and in the repo root run:
npm installnpm run build
This will generate a dist/ folder containing, among other artifacts, dist/main.js.
Now run npx serve and go to http://localhost:3000/Documentation/ with your browser to see some examples.
While viewing one of those examples, you can open the web console in your browser and for instance try how you can create a button:
const solidLogo = 'https://solidproject.org/assets/img/solid-emblem.svg'
const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!'))
UI.widgets.clearElement(document.body)
document.body.appendChild(myButton)Or a chat widget:
const chatChannel = 'https://example-user.inrupt.net/public/example-chat/index.ttl#this'
const chat = UI.infiniteMessageArea(document, store, UI.rdf.namedNode(chatChannel))
document.body.appendChild(chat)When developing a component in solid-ui you can test it in isolation using storybook
npm run build
npm run storybook
If there is no story for the component yet, add a new one to ./src/stories.
When you want to test the component within a solid-pane, you can use the development mode of solid-panes.
The following document gives guidance on how to add and perform testing in solid-ui. Testing in solid-ui
