Skip to content

Commit 00ad90b

Browse files
timbltimbl
committed
Merge branch 'prune-deleted' of https://github.com/solidos/solid-ui into prune-deleted
2 parents 8a664ee + 2ce533e commit 00ad90b

88 files changed

Lines changed: 4345 additions & 2746 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ coverage
88
Documentation/api
99
examples/storybook
1010
.history/
11+
Documentation/form-examples/main.js

‎.storybook/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ module.exports = {
22
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
33
addons: [
44
"@storybook/addon-links",
5+
"@storybook/addon-actions",
56
"@storybook/addon-essentials"
67
],
78
core: {

‎Documentation/FormsReadme.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Welcome to solidUI Forms
2+
3+
`Forms` are what we call the code part of solid-ui which takes the User Interface ontology at <http://www.w3.org/ns/ui> and makes it usable for developers. As its name suggests, `Forms` are used for rendering WebApp Frontend elements. For example, <http://www.w3.org/ns/ui#Choice> will translate to something like the following:
4+
```
5+
<div id=dropDownDiv>
6+
<div id=labelOfDropDown> </div>
7+
<div id=selectDiv>
8+
<select id=dropDownSelect>
9+
<option> ....
10+
</select>
11+
</div>
12+
</div>
13+
```
14+
15+
## A few starting points
16+
17+
There are different documentation entry points for the topic.
18+
19+
To get you started with Forms, we have the [forms-intro](./forms-intro.html).
20+
If you're asking yourself how Forms fit into the Solid ecosystem, head over to [form-ecosystem](./form-ecosystem.html).
21+
22+
Sir Tim Berners-Lee gave a talk about Forms to the SolidOS team end of 2021. His slides are online [here](./talks/FormsTalk.html), while a recording of the talk is on the [SolidOS pod](https://solidos.solidcommunity.net/public/SolidOS%20team%20meetings/SolidOS_team_videos.html).
23+
24+
25+
## Creating your own Form using Turtle
26+
27+
In the [form-playground](https://solidos.github.io/form-playground/playground.html) (code [here](https://github.com/SolidOS/form-playground)), you can create your own Form to render a frontend for some given Turtle.
28+
29+
## Code examples
30+
31+
To make use of Forms, you need to use solid-ui. Head over to the [solid-ui readme](https://github.com/SolidOS/solid-ui/blob/main/README.md#getting-started) for some how-to guides on how to use it in `npm` or as a `html <script>`.
32+
33+
Once you are set up with the code, take a look at some examples over at [solid-ui/Documentation](<https://github.com/SolidOS/solid-ui/tree/main/Documentation>). The examples there are also deployed on Git Pages:
34+
35+
- [Basic Form Demo](https://solidos.github.io/solid-ui/Documentation/form-examples/demo.html)
36+
- [WebID profile Demo](https://solidos.github.io/solid-ui/Documentation/form-examples/profile-demo.html)
37+
- [ui:Form and ui:Group examples](https://solidos.github.io/solid-ui/Documentation/form-examples/structures.html)
38+
- [ui:Classifier and ui:Options example](https://solidos.github.io/solid-ui/Documentation/form-examples/structures2.html)
39+
- [ui:Choice example](https://solidos.github.io/solid-ui/Documentation/form-examples/structures3.html)
40+
- if you want, you can try to wrap your head around [a rendering of the entire UI vocabulary](https://solidos.github.io/solid-ui/Documentation/form-examples/edit-form-form.html) _(Scroll to the far right if all you see is a column or two of plain text...)_
41+
42+
Most interesting may be how it is all wired together in the [test-form.js](https://github.com/SolidOS/solid-ui/blob/main/Documentation/form-examples/test-form.js), while the code for the form itself is mostly under [solid-ui/src/widgets/forms.js](https://github.com/SolidOS/solid-ui/blob/main/src/widgets/forms.js).
43+
44+
## Running or testing it locally
45+
46+
Locally you can setup your own test of forms. All you need is the `/Documentation/form-examples` folders and the `test-form.js`.
47+
48+
1. First build solid-ui locally and copy it to `/Documentation/form-examples`
49+
Run this instruction which will do all that for you.
50+
```
51+
npm run build-form-examples
52+
```
53+
2. Use the newly build solid-ui (called main.js) in your html.
54+
You need to use the new build main.js:
55+
* uncommenting the usage of the main.js script; Example [here](https://github.com/SolidOS/solid-ui/blob/4f620aea3e91daf5ce9591dd83d3c95c161a44ad/Documentation/form-examples/structures3.html#L21)
56+
* commenting out the mashlib.js usage. Example [here](https://github.com/SolidOS/solid-ui/blob/4f620aea3e91daf5ce9591dd83d3c95c161a44ad/Documentation/form-examples/structures3.html#L15)
57+
58+
3. Use your own rad data and form
59+
Switch out the `input` and `target` (form and raw data) links. Example [here](https://github.com/SolidOS/solid-ui/blob/4f620aea3e91daf5ce9591dd83d3c95c161a44ad/Documentation/form-examples/structures3.html#L56)
60+
61+
4. Run a local server
62+
For example run `npx vite`in the `Documentation` folder and the navigate to something like: http://localhost:3000/form-examples/profile-demo.html
63+
64+
## Spin-offs & further examples
65+
66+
- [Jeff's solid-ui-components](https://github.com/jeff-zucker/solid-ui-components) is a different take on the UI vocabulary
67+
- [Timea's Solid Hello Worlds](https://github.com/timea-solid/SolidHelloWorlds) is a demo implementing both Jeff's lib and solid-ui Forms in one demo

‎Documentation/developers/code_README.md‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎Documentation/developers/setup_README.md‎

Whitespace-only changes.

‎Documentation/developers/testing_README.md‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎Documentation/form-ecosystem.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ <h2>Forms in the ecosystem</h2>
112112
<p>
113113
The User Interface ontology at <tt>http://www.w3.org/ns/ui</tt> defines
114114
RDF terms for describing forms. The
115-
<tt><a href="https://github.com/solid/solid-ui">solid-ui</a></tt> project
115+
<tt><a href="https://github.com/solidos/solid-ui">solid-ui</a></tt> project
116116
provides functions to use these forms within your web application to
117117
create a quick user interface solution. <a href="forms-intro.html">An introduction</a>
118118
basically describes how forms work. This document describes how forms fit into the ecosystem of apps,

‎Documentation/form-examples/backupData/profile-demo_profile_rawData.ttl‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
########### used for https://solidos.github.io/solid-ui/Documentation/form-examples/profile-demo.html #####
2+
3+
@prefix : <#>.
4+
@prefix acl: <http://www.w3.org/ns/auth/acl#>.
5+
@prefix foaf: <http://xmlns.com/foaf/0.1/>.
6+
@prefix ldp: <http://www.w3.org/ns/ldp#>.
7+
@prefix org: <http://www.w3.org/ns/org#>.
8+
@prefix schema: <http://schema.org/>.
9+
@prefix solid: <http://www.w3.org/ns/solid/terms#>.
10+
@prefix space: <http://www.w3.org/ns/pim/space#>.
11+
@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.
12+
@prefix xsd: <http://www.w3.org/2001/XMLSchema#>.
13+
@prefix pro: <./>.
14+
@prefix inbox: </inbox/>.
15+
@prefix tes: </>.
16+
@prefix l: <https://www.w3.org/ns/iana/language-code/>.
17+
@prefix ent: <http://www.wikidata.org/entity/>.
18+
@prefix not: <https://notthereal.apple.com/>.
19+
@prefix www: <https://www.thebeatles.com/>.
20+
@prefix ww: <https://www.nasa.gov/>.
21+
@prefix occup: <http://data.europa.eu/esco/occupation/>.
22+
@prefix c: </profile/card#>.
23+
@prefix skill: <http://data.europa.eu/esco/skill/>.
24+
25+
occup:50af07f0-7a75-424e-a66d-5a9deea10f4c
26+
schema:name
27+
"testeur d\u2019accessibilit\u00e9/testeuse d\u2019accessibilit\u00e9".
28+
occup:6b0ad7c0-a37f-45c6-a486-ee943a11429e schema:name "astrologue".
29+
30+
occup:807a1ac3-4f56-41f3-a68c-d653d558eb0a schema:name "copilote".
31+
32+
occup:88990bdf-4f6b-4411-82c9-9eecad1db8fb
33+
schema:name "professeur de musique/professeure de musique".
34+
skill:aec4c9bf-9c44-4f9d-99f1-70011cebe1a8
35+
schema:name "tester du mat\u00e9riel d\u2019instrumentation".
36+
skill:b805f989-14d5-46ad-80b0-755634b66dba
37+
schema:name "travailler dans de mauvaises conditions m\u00e9t\u00e9orologiques".
38+
ent:Q23548 schema:name "NASA"@yo.
39+
40+
ent:Q312 schema:name "Apple"@fr.
41+
42+
pro:card a foaf:PersonalProfileDocument; foaf:maker :me; foaf:primaryTopic :me.
43+
44+
:id1621179872094 solid:publicId l:fr.
45+
46+
:id1621182189397 solid:publicId l:de.
47+
48+
:id1621182208190
49+
a solid:CurrentRole;
50+
schema:startDate "2021-04-01"^^xsd:date;
51+
vcard:role "Testeuse des Apps Solid";
52+
org:member :me;
53+
org:organization :id1621182234226;
54+
org:role occup:50af07f0-7a75-424e-a66d-5a9deea10f4c.
55+
:id1621182234226
56+
a schema:Corporation;
57+
schema:name "Apple";
58+
schema:uri not:;
59+
solid:publicId ent:Q312 .
60+
:id1621182452881
61+
a solid:PastRole;
62+
schema:description "This was an imaginary but fun gig.";
63+
schema:endDate "1963-04-01"^^xsd:date;
64+
schema:startDate "1960-04-01"^^xsd:date;
65+
vcard:role "Directed the white album";
66+
org:member :me;
67+
org:organization :id1621182460879;
68+
org:role occup:88990bdf-4f6b-4411-82c9-9eecad1db8fb.
69+
:id1621182460879 a schema:MusicGroup; schema:name "The Beatles"; schema:uri www: .
70+
71+
:id1621183757035
72+
a solid:CurrentRole;
73+
schema:description "Imaginary future roles are sometimes the best";
74+
schema:endDate "1993-04-01"^^xsd:date;
75+
schema:startDate "1990-05-01"^^xsd:date;
76+
vcard:role "Dream: Fly a couple of missions";
77+
org:member :me;
78+
org:organization :id1621183860447, :id1652992302194;
79+
org:role occup:807a1ac3-4f56-41f3-a68c-d653d558eb0a.
80+
:id1621183860447
81+
a schema:GovernmentOrganization;
82+
schema:name "National Aeronautical and Space Administration";
83+
schema:uri ww:;
84+
solid:publicId ent:Q23548 .
85+
:id1621184812427
86+
a solid:FutureRole;
87+
schema:description "Second future role";
88+
schema:startDate "2023-12-25"^^xsd:date;
89+
vcard:role "Mission a Mars";
90+
org:member :me;
91+
org:organization :id1621184844320;
92+
org:role occup:6b0ad7c0-a37f-45c6-a486-ee943a11429e.
93+
:id1621184844320
94+
a schema:GovernmentOrganization;
95+
schema:name "NASA";
96+
schema:uri ww:;
97+
solid:publicId ent:Q23548 .
98+
:id1622021411833
99+
vcard:country-name "USA";
100+
vcard:locality "Testingville";
101+
vcard:region "Texas";
102+
vcard:street-address "The testing tree house".
103+
:id1622021761923 solid:publicId skill:aec4c9bf-9c44-4f9d-99f1-70011cebe1a8 .
104+
105+
:id1622021775187 solid:publicId skill:b805f989-14d5-46ad-80b0-755634b66dba.
106+
107+
:id1629201755476 solid:publicId l:el.
108+
109+
:id1629201830484 solid:publicId l:el.
110+
111+
:id1652992302194 a schema:NGO, vcard:Organization; schema:name "Some name".
112+
113+
:me
114+
a schema:Person, foaf:Person;
115+
schema:knowsLanguage
116+
( :id1629201755476 ), ( :id1629201755476 ),
117+
( :id1629201755476 :id1629201806315 );
118+
schema:skills :id1622021761923, :id1622021775187;
119+
vcard:bday "2021-05-14"^^xsd:date;
120+
vcard:fn "Testing SolidOS Test";
121+
vcard:hasAddress :id1622021411833;
122+
vcard:hasPhoto <noun_test_2974484.svg>;
123+
vcard:note
124+
"This is a test account for testing versions of the SolidOS operating system for solid.";
125+
vcard:organization-name "Solid";
126+
vcard:role "foobar";
127+
acl:trustedApp
128+
[
129+
acl:mode acl:Append, acl:Control, acl:Read, acl:Write;
130+
acl:origin <https://timbl.com>
131+
],
132+
[
133+
acl:mode acl:Append, acl:Read, acl:Write;
134+
acl:origin <http://localhost:3000>
135+
],
136+
[
137+
acl:mode acl:Append, acl:Read, acl:Write;
138+
acl:origin <https://solidcommunity.net:8443>
139+
];
140+
ldp:inbox inbox:;
141+
space:preferencesFile </settings/prefs.ttl>;
142+
space:storage tes:;
143+
solid:account tes:;
144+
solid:preferredObjectPronoun "them";
145+
solid:preferredRelativePronoun "theirs";
146+
solid:preferredSubjectPronoun "they";
147+
solid:privateTypeIndex </settings/privateTypeIndex.ttl>;
148+
solid:profileBackgroundColor "#f4f5c2"^^xsd:color;
149+
solid:profileHighlightColor "#06b74a"^^xsd:color;
150+
solid:publicTypeIndex </settings/publicTypeIndex.ttl>;
151+
foaf:knows c:me;
152+
foaf:name "Testing SolidOS";
153+
foaf:nick "tester1".
154+
l:de schema:name "germano"@ia.
155+
156+
l:el
157+
schema:name
158+
"Modern Greek"@en,
159+
"\u039d\u03ad\u03b1 \u03b5\u03bb\u03bb\u03b7\u03bd\u03b9\u03ba\u03ae \u03b3\u03bb\u03ce\u03c3\u03c3\u03b1"@el.
160+
l:fr schema:name "French"@en.

0 commit comments

Comments
 (0)