Skip to content

Commit 24cdc3a

Browse files
michielbdejongmichielbdejong
authored
Merge branch 'master' into typedoc-first-pass
2 parents 81f1b00 + 59d9daf commit 24cdc3a

24 files changed

Lines changed: 3576 additions & 460 deletions

‎.prettierrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"htmlWhitespaceSensitivity": "css",
5+
"insertPragma": false,
6+
"jsxBracketSameLine": false,
7+
"jsxSingleQuote": false,
8+
"printWidth": 80,
9+
"proseWrap": "preserve",
10+
"quoteProps": "as-needed",
11+
"requirePragma": false,
12+
"semi": false,
13+
"singleQuote": true,
14+
"tabWidth": 2,
15+
"useTabs": false,
16+
"vueIndentScriptAndStyle": false
17+
}

‎.vscode/launch.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node",
6+
"request": "launch",
7+
"name": "Launch Program",
8+
"skipFiles": ["<node_internals>/**"],
9+
"program": "${workspaceFolder}\\lib\\index.js",
10+
"outFiles": ["${workspaceFolder}/**/*.js"]
11+
}
12+
]
13+
}

‎Documentation/developers/code_README.md‎

Whitespace-only changes.

‎Documentation/developers/setup_README.md‎

Whitespace-only changes.

‎Documentation/developers/testing_README.md‎

Whitespace-only changes.

‎README.md‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,60 @@ User Interface widgets and utilities for Solid
66

77
These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
88

9-
Use:
9+
## Getting started
10+
### In npm-based projects
11+
When including solid-ui in an npm-based project, you can use it with:
1012

11-
```
13+
```js
1214
import { ns, rdf, acl, aclControl, authn, create, dom, icons, log, matrix, media,
1315
messageArea, infiniteMessageArea, pad, preferences, store, style, table, tabs, utils, widgets, versionInfo
1416
} from 'solid-ui'
1517

1618
```
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+
1753

18-
Please refer to the [API documentation](http://solid.github.io/solid-ui//Documentation/api/).
54+
## Documentation
55+
See https://solid.github.io/solid-ui/Documentation/api/ for the API documentation.
1956

57+
## Overview
2058
This has been a place to put any functionality from solid views which has been generalized to be usable in other views.
2159

2260
- Authentication UI: manage the user's logged in/out state.
23-
- Discovery: finding the users stuff, and leaving records of new things
24-
- Preferences: UI fo rmanaging a user's preefrences with two axes of defaults
61+
- Discovery: finding the user's stuff, and leaving records of new things
62+
- Preferences: UI for managing a user's preferences with two axes of defaults
2563
- An Access Control List widget for Solid ACL system
2664
- Acess Control Logic
2765
- Create a new object from modules/extensions which have registered their ability to create things
@@ -33,11 +71,11 @@ This has been a place to put any functionality from solid views which has been g
3371

3472
Some of the larger controls include:
3573

36-
- A chat widget: add discussion to any object. Infinte scroll, embedded images, social reactions, etc etc
74+
- A chat widget: add discussion to any object. Infinite scroll, embedded images, social reactions, etc etc
3775
- A people picker widget for choosing a set of people or an existing group
38-
- A general purpose table display with built-in facetted browsing
39-
- A two-dimentional matrix of editable live data extends in both domension.
40-
- A notepad of shared notes for real-time collaboration.
76+
- A general purpose table display with built-in faceted browsing
77+
- A two-dimentional matrix of editable live data that extends in both dimensions.
78+
- A notepad of shared notes for real-time collaboration
4179
- Drag and drop code for linking things and uploading files
4280
- A set of tabs for holding other widgets and arbitrary UI elements
4381

‎__mocks__/rdflib.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,7 @@ class Graph {
5555
}
5656
// see https://linkeddata.github.io/rdflib.js/doc/classes/indexedformula.html#each
5757
each (s, p, o, g) {
58-
console.log('each', s, p, o, g, this.mockStatements)
5958
if (s === undefined) {
60-
console.log('getting subjects')
6159
return this.mockStatements
6260
.filter(statement => p.uri === statement.p.uri)
6361
.filter(statement => o.uri === statement.o.uri)

src/test/test-matrix.html renamed to examples/matrix/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<html>
33
<head><meta charset='UTF-8'>Test matrix.js</title>
4-
<link type="text/css" rel="stylesheet"
5-
href="https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css" />
4+
<!-- <link type="text/css" rel="stylesheet"
5+
href="proxy.php?url=https%3A%2F%2Flinkeddata.github.io%2Ftabulator-firefox%2Fcontent%2Ftabbedtab.css" /> -->
66
<style>
77

88
input { background-color: #eef; padding: 0.5em; border: .5em solid white; font-size: 120%; };
@@ -25,7 +25,7 @@
2525
td.output {border-top: 0.1em solid gray;}
2626

2727
</style>
28-
<script type="text/javascript" src="../../../mashlib/dist/mashlib-prealpha.js"></script>
28+
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
2929
<!-- "https://linkeddata.github.io/app-schedule/schedule.js" -->
3030
<script type="text/javascript" src="test-matrix.js"></script>
3131
</head>

src/test/test-matrix.js renamed to examples/matrix/test-matrix.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
/* global $rdf */
1+
if (!window.UI) {
2+
window.alert('Please run "npm install && npm run build" in your repo root first.')
3+
}
4+
window.$rdf = UI.rdf
25

36
document.addEventListener('DOMContentLoaded', function () {
47
/// ///////////////////////////////////////////
58

6-
var UI = require('mashlib')
79
var kb = UI.store
810
var dom = document
911

src/test/test.ttl renamed to examples/matrix/test.ttl

File renamed without changes.

0 commit comments

Comments
 (0)