@entryscape/rdforms 10.14.1 → 10.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,18 +4,20 @@ RDForms (aka RDF Forms) is a JavaScript library that uses templates to describe
4
4
 
5
5
  RDForms is designed to be adaptable to different UI libraries. Currently, integrations are provided for the following three UI libraries:
6
6
 
7
- * Bootstrap 4
8
- * Bootstrap Material Design
9
- * React and Material UI
7
+ - Bootstrap 4
8
+ - Bootstrap Material Design
9
+ - React and Material UI
10
10
 
11
11
  Deeper documentation for RDForms can be found at [rdforms.org](https://rdforms.org).
12
12
 
13
13
  # Templates
14
+
14
15
  The templates that drives RDForms are expressed as JSON structures. Templates can be divided into profile-level and field-level templates. A typical scenario is that a template author combines a set of field-level templates into a bigger profile-level template to meet a specific need. Such a profile-level template could correspond to well known application profiles (for example a dataset according the W3C Recommendation DCAT2) or correspond to a specific class in an ontology defined for a specific purpose in a project. Field-level templates are often reused across profiles but may require tweaking in various ways, for instance changing a label, restricting cardinality, refining a constraint etc. For this purpose there is an extension mechanism that allows tweaks to be made without forcing the template author to fork the template by making a full copy.
15
16
 
16
17
  Read more about the templates in the [reference guide at the documentation site](https://rdforms.org/#!templateReference.md).
17
18
 
18
19
  # How to use RDForms
20
+
19
21
  In addition to the RDForms library you need to load the RDF library rdfjson and then initialize an Editor, Presenter or Validator on a DOM node. Below is a high-level example, for more detailed information on how to prepare the parameters look at the examples.
20
22
 
21
23
  <script type="text/javascript" src="https://unpkg.com/@entryscape/rdfjson@2.3.0/dist/rdfjson.js"></script>
@@ -28,23 +30,24 @@ In addition to the RDForms library you need to load the RDF library rdfjson and
28
30
  The exact versions above (2.3.0 and 10.0.0) may vary, please check for yourself the latest versions in package.json. Naturally you can also use the built version in the dist folder, see the next section.
29
31
 
30
32
  # Installing and building
31
- Before you can install dependencies and build RDForms you need to make sure you have [nodejs](http://nodejs.org/), [npm](https://www.npmjs.org/) and [yarn](https://yarnpkg.com/) installed in your system. To install dependencies for RDForms:
32
33
 
33
- yarn
34
+ Before you can install dependencies and build RDForms you need to make sure you have [nodejs](http://nodejs.org/), [npm](https://www.npmjs.org/) and [pnpm](https://pnpm.io/) installed in your system. To install dependencies for RDForms:
35
+
36
+ pnpm install
34
37
 
35
38
  To build RDForms:
36
39
 
37
- yarn build:all
40
+ pnpm build:all
38
41
 
39
42
  # Samples
40
43
 
41
44
  A good way to see the capabilities of RDForms is to take a look at the samples (generated from the examples, see section below). To generate the samples just run:
42
45
 
43
- yarn build:samples
46
+ pnpm build:samples
44
47
 
45
- This will build the samples in the ```samples``` directory. You'd need a web server to serve the samples. We provide a simple one for your convenience:
48
+ This will build the samples in the `samples` directory. You'd need a web server to serve the samples. We provide a simple one for your convenience:
46
49
 
47
- yarn serve:samples
50
+ pnpm serve:samples
48
51
 
49
52
  Your browser should open automatically, otherwise access the samples at [http://localhost:8080/](http://localhost:8080/).
50
53
 
@@ -53,67 +56,72 @@ Your browser should open automatically, otherwise access the samples at [http://
53
56
  You can develop the different UI libraries as well as the part of the generic code base by running the examples in the webpack-dev-server:
54
57
 
55
58
  ```$js
56
- yarn dev:react
59
+ pnpm dev:react
57
60
  ```
58
- or
61
+
62
+ or
63
+
59
64
  ```$js
60
- yarn dev:bmd
65
+ pnpm dev:bmd
61
66
  ```
67
+
62
68
  or
69
+
63
70
  ```$js
64
- yarn dev:bootstrap
71
+ pnpm dev:bootstrap
65
72
  ```
66
73
 
67
- # Examples
74
+ # Examples
75
+
68
76
  The examples serve two purposes:
69
77
 
70
78
  1. Showcase the capabilites of RDForms.
71
- 2. Provide good ground for development and testing.
79
+ 2. Provide good ground for development and testing.
72
80
 
73
81
  The examples are outlined below:
74
82
 
75
- ## [example1](http://localhost:8080/samples/react/example1) - Editor for one field
83
+ ## [example1](http://localhost:8080/react/example1) - Editor for one field
76
84
 
77
85
  1. Loads the library and its CSS.
78
86
  2. Creates a minimal RDF graph manually.
79
87
  3. Creates a minimal RDForms template manually.
80
88
  4. Creates the editor UI from the RDF graph, a given resource, a template and an HTML node.
81
89
 
82
- Check [example1/init.js](http://localhost:8080/samples/react/example1/init.js) for more.
90
+ Check [example1/init.js](http://localhost:8080/react/example1/init.js) for more.
83
91
 
84
- ## [example2](http://localhost:8080/samples/react/example2) - Editor for large template loaded from file
92
+ ## [example2](http://localhost:8080/react/example2) - Editor for large template loaded from file
85
93
 
86
94
  Different from example1 in the sense that it loads the graph and template from separate files.
87
- Check [example2/init.js](http://localhost:8080/samples/react/example2/init.js) for more.
95
+ Check [example2/init.js](http://localhost:8080/react/example2/init.js) for more.
88
96
 
89
- ## [example3](http://localhost:8080/samples/react/example3) - Presenter
97
+ ## [example3](http://localhost:8080/react/example3) - Presenter
90
98
 
91
- Same template and data as in example2, but now the presenter is used instead.
92
- Check [example3/init.js](http://localhost:8080/samples/react/example3/init.js) for more.
99
+ Same template and data as in example2, but now the presenter is used instead.
100
+ Check [example3/init.js](http://localhost:8080/react/example3/init.js) for more.
93
101
 
94
- ## [example4](http://localhost:8080/samples/react/example4) - Validation presenter
102
+ ## [example4](http://localhost:8080/react/example4) - Validation presenter
95
103
 
96
- This examples shows how RDForms can be used as a form validator rather than just an editor or presenter.
97
- Take a look at the validation report inside the form presenter.
104
+ This examples shows how RDForms can be used as a form validator rather than just an editor or presenter.
105
+ Take a look at the validation report inside the form presenter.
98
106
 
99
- Check [example4/init.js](http://localhost:8080/samples/react/example4/init.js) for more.
107
+ Check [example4/init.js](http://localhost:8080/react/example4/init.js) for more.
100
108
 
101
- ## [example5](http://localhost:8080/samples/react/example5) - Building on default templates
109
+ ## [example5](http://localhost:8080/react/example5) - Building on default templates
102
110
 
103
111
  This examples utilizes pre-made templates to render forms. It can serve as a very good start for extending them and creating your
104
112
  own custom forms.
105
113
 
106
- Check [example5/init.js](http://localhost:8080/samples/react/example5/init.js) for more.
114
+ Check [example5/init.js](http://localhost:8080/react/example5/init.js) for more.
107
115
 
108
- ## [example6](http://localhost:8080/samples/react/example6) - RDF output from editor (Template is for Dataset according to DCAT-AP)
116
+ ## [example6](http://localhost:8080/react/example6) - RDF output from editor (Template is for Dataset according to DCAT-AP)
109
117
 
110
118
  This example provides a ready output to check your form RDF output live.
111
119
 
112
- Check [example6/init.js](http://localhost:8080/samples/react/example6/init.js) for more.
120
+ Check [example6/init.js](http://localhost:8080/react/example6/init.js) for more.
113
121
 
114
- ## [example7](http://localhost:8080/samples/react/example7) - RDForm editor with a registered chooser
122
+ ## [example7](http://localhost:8080/react/example7) - RDForm editor with a registered chooser
115
123
 
116
- This is a more advanced example providing some guidance on how to create your own choosers and register them to show on
124
+ This is a more advanced example providing some guidance on how to create your own choosers and register them to show on
117
125
  select fields in your forms. You can even have your data be fetched across the network.
118
126
 
119
- Check [example7/init.js](http://localhost:8080/samples/rect/example7/init.js) for more.
127
+ Check [example7/init.js](http://localhost:8080/rect/example7/init.js) for more.