1 | # solid-ui
|
2 |
|
3 | [![NPM Package](https://img.shields.io/npm/v/solid-ui.svg)](https://www.npmjs.com/package/solid-ui)
|
4 |
|
5 | User Interface widgets and utilities for Solid
|
6 |
|
7 | These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
|
8 |
|
9 | ## Getting started
|
10 | ### In npm-based projects
|
11 | When including solid-ui in an npm-based project, you can use it with:
|
12 |
|
13 | ```js
|
14 | import { ns, rdf, acl, aclControl, authn, create, dom, icons, log, matrix, media,
|
15 | messageArea, infiniteMessageArea, pad, preferences, store, style, table, tabs, utils, widgets, versionInfo
|
16 | } from 'solid-ui'
|
17 |
|
18 | ```
|
19 | ### Directly in a webpage
|
20 | Clone this repo, and in the repo root run:
|
21 |
|
22 | * `npm install`
|
23 | * `npm run build`
|
24 |
|
25 | This will generate a `lib/` folder containing, among other artifacts, `lib/webpack-bundle.js`.
|
26 | Now run `npx serve` and go to http://localhost:5000/examples/ with your browser to see some examples.
|
27 | See the ['examples' folder](https://github.com/solid/solid-ui/tree/examples/examples) for the
|
28 | source code of those examples.
|
29 |
|
30 | While viewing one of those examples, you can open the web console in your browser and for instance
|
31 | try how you can create a button:
|
32 | ```js
|
33 | const solidLogo = 'https://solidproject.org/assets/img/solid-emblem.svg'
|
34 | const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!'))
|
35 | UI.widgets.clearElement(document.body)
|
36 | document.body.appendChild(myButton)
|
37 | ```
|
38 |
|
39 | Or a chat widget:
|
40 | ```js
|
41 | const chatChannel = 'https://example-user.inrupt.net/public/example-chat/index.ttl#this'
|
42 | const chat = UI.infiniteMessageArea(document, UI.store, UI.rdf.namedNode(chatChannel))
|
43 | document.body.appendChild(chat)
|
44 | ```
|
45 |
|
46 | Or a full ACL Control Box:
|
47 | ```js
|
48 | const exampleFolder = 'https://example-user.inrupt.net/public/public-control/'
|
49 | const aclControlBox = UI.aclControl.ACLControlBox5(UI.rdf.namedNode(exampleFolder), { dom: document }, '', UI.store)
|
50 | document.body.appendChild(aclControlBox)
|
51 | ```
|
52 |
|
53 |
|
54 | ## Documentation
|
55 |
|
56 | ### API
|
57 |
|
58 | See https://solid.github.io/solid-ui/Documentation/api/ for the API documentation.
|
59 |
|
60 | ### Components
|
61 |
|
62 | The UI components are presented in a [storybook](http://solid.github.io/solid-ui/examples/storybook/).
|
63 |
|
64 | ## Overview
|
65 | This has been a place to put any functionality from solid views which has been generalized to be usable in other views.
|
66 |
|
67 | - Authentication UI: manage the user's logged in/out state.
|
68 | - Discovery: finding the user's stuff, and leaving records of new things
|
69 | - Preferences: UI for managing a user's preferences with two axes of defaults
|
70 | - An Access Control List widget for Solid ACL system
|
71 | - Acess Control Logic
|
72 | - Create a new object from modules/extensions which have registered their ability to create things
|
73 |
|
74 | - A [form system](https://solid.github.io/solid-ui/Documentation/forms-intro.html): Forms are defined in RDF, and create/edit RDF data, including form definitions
|
75 | - A collection of shortcut namespace objects for a selection of relevant RDF vocabularies.
|
76 | - Small atomic widgets (buttons etc) of which the others are constructed.
|
77 | - An error message panel
|
78 |
|
79 | Some of the larger controls include:
|
80 |
|
81 | - A chat widget: add discussion to any object. Infinite scroll, embedded images, social reactions, etc etc
|
82 | - A people picker widget for choosing a set of people or an existing group
|
83 | - A general purpose table display with built-in faceted browsing
|
84 | - A two-dimentional matrix of editable live data that extends in both dimensions.
|
85 | - A notepad of shared notes for real-time collaboration
|
86 | - Drag and drop code for linking things and uploading files
|
87 | - A set of tabs for holding other widgets and arbitrary UI elements
|
88 |
|
89 | The typical style of the widgets is to know what data it has been derived from,
|
90 | allow users to edit it, and to automatically sync with data as it changes in the future.
|
91 | To see how these are used, see the panes which use them within the data browser.
|
92 |
|
93 | The level of support for this varies.
|
94 |
|
95 | See also: [A short introduction to the Form system](https://solid.github.io/solid-ui/Documentation/forms-intro.html)
|
96 |
|
97 | Contributions of bug fixes and new functionality, documentation, and tests are
|
98 | always appreciated.
|
99 |
|
100 | ## Development
|
101 |
|
102 | When developing a component in solid-ui you can test it in isolation using storybook
|
103 |
|
104 | ```
|
105 | npm run build
|
106 | npm run storybook
|
107 | ```
|
108 |
|
109 | If there is no story for the component yet, add a new one to `./src/stories`.
|
110 |
|
111 | When you want to test the component within a solid-pane, you can use the [development mode of solid-panes](https://github.com/solid/solid-panes#development) or
|
112 | [mashlib-dev](https://github.com/solid/mashlib-dev). |
\ | No newline at end of file |