You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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]>
Copy file name to clipboardexpand all lines: README.md
+48-14
Original file line number
Diff line number
Diff line change
@@ -179,7 +179,6 @@ Individual widgets also provide certain types of extension points where applicab
179
179
-`getModifierClasses`: Modify the array of conditionally applied classes like `css.selected` or `css.disabled`.
180
180
Not all widgets include these extension points, and some have additional overridable methods.
181
181
182
-
183
182
## How do I contribute?
184
183
185
184
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:
207
206
208
207
`npm run test:functional`
209
208
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
+
```
210
236
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.
212
240
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.
214
242
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
220
244
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:
222
246
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.
224
250
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
228
262
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.
0 commit comments