Skip to content

Commit 60ccc99

Browse files
agublertomdye
andcommitted
Widget Example and Documentation Suite (#806)
* Add main script to package.json * Main module * trying for codesandbox * Add widgets * more examples * put main in * add dojo/themes to example * Test example for text-input * try context require * testing * Load the file * trial * more progress on docs * refactor main widget * load lang * work with docs off * tweaks * more tweaks * Added examples and refactored runner * remove comment * add landing page * dev mode for examples * styling * Small clean up, styling and main readme * docs * Add example for each widget * export default * default filename to index * make name consistent with folder for combobox and add a couple of warns for missing props and theme css * Do not show description at the moment for theme classes * Added some examples of the properties jsdoc * Only target tables from the docs * prettier * deps * tweak table styles * readme * remove theming section * revert the tsconfig * remove properties jsdoc * line ending * prettier * fix tsc errors * add ts-loader dep * order props required props first then alphabetically * add cldrjs * Add edit on codesandbox button * update codesandbox link to dojo/master * build the docs on travis * tooltip example * use latest cli-build-app dep * do not collapse tables, use overflow * move remaining existing prop descs over to jsdoc * use latest cli-build-widget dep * add max-width * Add i18nproperties to widget property interfaces * package-lock * remove old example page * Apply suggestions from code review Co-Authored-By: Tom Dye <[email protected]>
1 parent b53dfae commit 60ccc99

File tree

132 files changed

+6168
-2916
lines changed

Some content is hidden

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

132 files changed

+6168
-2916
lines changed

.dojorc

+8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
{
2+
"build-app": {
3+
"build-time-render": {
4+
"root": "app"
5+
},
6+
"features": {
7+
"docs": false
8+
}
9+
},
210
"build-widget": {
311
"prefix": "dojo",
412
"widgets": [

README.md

+48-14
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,6 @@ Individual widgets also provide certain types of extension points where applicab
179179
- `getModifierClasses`: Modify the array of conditionally applied classes like `css.selected` or `css.disabled`.
180180
Not all widgets include these extension points, and some have additional overridable methods.
181181

182-
183182
## How do I contribute?
184183

185184
We appreciate your interest! Please see the [Dojo Meta Repository](https://github.com/dojo/meta#readme) for the
@@ -207,26 +206,61 @@ To test against browsers with a local selenium server run:
207206

208207
`npm run test:functional`
209208

209+
### Widget Examples
210+
211+
The Dojo widget examples application is located in `src/examples`.
212+
213+
To add a new example, create a directory that matches the directory name of the widget e.g. `src/examples/src/widgets/text-input`. Each widget _must_ have an example called `Basic.tsx` and an entry in the `src/examples/src/config.ts` keyed by the name of the widget directory.
214+
215+
```js
216+
{
217+
'text-input: {
218+
filename: 'index',
219+
overview: {
220+
example: {
221+
module: BasicCheckbox,
222+
filename: 'Basic'
223+
}
224+
},
225+
examples: [
226+
{
227+
title: 'The example title',
228+
description: 'Optional example description',
229+
module: OtherCheckbox,
230+
filename: 'Other'
231+
}
232+
]
233+
}
234+
}
235+
```
210236
211-
### Viewing widget examples locally
237+
* filename: The name of the widget module, defaults to `index`
238+
* overview: The configuration for the basic example including the imported Basic module and the example filename (has to be `'Basic'`)
239+
* examples: Additional examples for the widget, an array of configuration that specifies the title, description, module and example filename.
212240
213-
Each Dojo widget includes functioning example code so you can view the widget. To view individual widget example:
241+
To view the examples locally run `npm run dev` and navigate to http://localhost:9999, this starts the examples in watch mode and should update widget module are changed.
214242
215-
1. Run `npm run build:test` in your terminal
216-
2. Run `npm run examples`
217-
2. Open the newly built project at `http://localhost:5000/_build/common/example/` in your web browser
218-
3. By default, no widget is selected, open the dropdown to select a widget
219-
4. Observe the page reloads and the selected widget displays
243+
### Widget Documentation
220244
221-
#### Watching widget example code
245+
The widget examples and documentation is automatically generated by the `examples` application when built with the `docs` feature flag set to `true`. The site relies on a few conventions in order to be able do this:
222246
223-
Running `npm run build` each time you wish to view a small change can be tedious, instead to have your files watched run:
247+
1. A widgets properties interface must be the name of the widget with a suffix of `Properties`, e.g. for `text-input` the properties interface would be `TextInputProperties`
248+
2. All themeable styles must be added to the corresponding theme css module in `src/theme` and match the name of thw widget directory e.g. `text-input.m.css`
249+
3. For properties description docs must be included inline above each property, e.g.
224250
225-
```
226-
tsc -w
227-
```
251+
```ts
252+
interface ExampleProperties {
253+
/** This is the description for foo */
254+
foo: string;
255+
/** This is the description for bar */
256+
bar: string;
257+
}
258+
259+
To build the documentation run `npm run build:docs` and to build and serve the documentation in watch mode run `npm run build:docs:dev`
260+
261+
### Running the examples on Codesandbox
228262
229-
With that command, TypeScript watches for changes and recompiles when necessary.
263+
The examples also run on Codesanbox, to run the examples on the master branch go to https://codesandbox.io/s/github/dojo/widgets/tree/master/src/examples. To run the examples for a specific user/branch/tag adjust the url as required.
230264
231265
## Licensing information
232266

0 commit comments

Comments
 (0)