Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SolidOS/solid-ui
User Interface widgets and utilities for Solid
https://github.com/SolidOS/solid-ui
forms running-code storybook typescript
Last synced: 3 months ago
JSON representation
User Interface widgets and utilities for Solid
- Host: GitHub
- URL: https://github.com/SolidOS/solid-ui
- Owner: SolidOS
- License: mit
- Created: 2016-04-21T15:22:48.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T18:07:44.000Z (7 months ago)
- Last Synced: 2024-07-19T01:18:41.348Z (4 months ago)
- Topics: forms, running-code, storybook, typescript
- Language: TypeScript
- Homepage: https://solidos.github.io/solid-ui/dist/solid-ui.js
- Size: 132 MB
- Stars: 146
- Watchers: 30
- Forks: 39
- Open Issues: 149
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - SolidOS/solid-ui - User Interface widgets and utilities for Solid (typescript)
README
# solid-ui
[](https://www.npmjs.com/package/solid-ui)
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](http://solidos.github.io/solid-ui/examples/storybook/) for SolidUI widgets.
See [Solid-UI API](https://solidos.github.io/solid-ui/Documentation/api/) for SolidUI functions.
See [Forms introduction](./Documentation/FormsReadme.md) for UI vocabulary implementation.
Table of content:
- Getting started(#getting-started)
- Further documentation(#further-ocumentation)
## Getting started
Contributions of bug fixes and new functionality, documentation, and tests are
always appreciated.
### In npm-based projects
When including solid-ui in an npm-based project, you can use it with:
```js
import { ns, rdf, acl, aclControl, create, dom, icons, log, matrix, media,
messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo
} from 'solid-ui'
```
### Directly in a webpage
Clone this repo, and in the repo root run:
* `npm install`
* `npm 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:
```js
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:
```js
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)
```
### Development new components
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](https://github.com/solidos/solid-panes#development).
## Adding Tests
The following document gives guidance on how to add and perform testing in solid-ui.
[Testing in solid-ui](https://github.com/SolidOS/solid-ui/blob/18070a02fa8159a2b83d9503ee400f8e046bf1f6/test/unit/README.md)
## Further documentation
- [Some code know-how](https://github.com/SolidOS/solidos/wiki/2.-Solid-UI-know-how)