Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 17, 2024. It is now read-only.

Commit d1900a8

Browse files
author
steven.roulleau
committed
chore(webcomponent): add new integration example
1 parent 4006b91 commit d1900a8

File tree

17 files changed

+16684
-0
lines changed

17 files changed

+16684
-0
lines changed

‎webcomponent-example/.editorconfig‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
root = true
6+
7+
8+
[*]
9+
10+
# Change these settings to your own preference
11+
indent_style = space
12+
indent_size = 2
13+
14+
# We recommend you to keep these unchanged
15+
end_of_line = lf
16+
charset = utf-8
17+
trim_trailing_whitespace = true
18+
insert_final_newline = true
19+
20+
[*.md]
21+
trim_trailing_whitespace = false
22+
23+
[*.json]
24+
indent_size = 2
25+
26+
[*.{html,js,md}]
27+
block_comment_start = /**
28+
block_comment = *
29+
block_comment_end = */

‎webcomponent-example/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
## editors
2+
/.idea
3+
/.vscode
4+
5+
## system files
6+
.DS_Store
7+
8+
## npm
9+
/node_modules/
10+
/npm-debug.log
11+
12+
## testing
13+
/coverage/
14+
15+
## temp folders
16+
/.tmp/
17+
18+
# build
19+
/_site/
20+
/dist/
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// order of tabs in addons panel
2+
import '@storybook/addon-actions/register';
3+
import '@storybook/addon-storysource/register';
4+
import '@storybook/addon-knobs/register';
5+
import '@storybook/addon-a11y/register';
6+
7+
// no tab in addons panel (e.g. load order does not matter here)
8+
import '@storybook/addon-backgrounds/register';
9+
import '@storybook/addon-links/register';
10+
import '@storybook/addon-viewport/register';
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { configure, addDecorator, setCustomElements } from '@storybook/web-components';
2+
import { withA11y } from '@storybook/addon-a11y';
3+
import '@storybook/addon-console';
4+
5+
import customElements from '../custom-elements.json';
6+
7+
setCustomElements(customElements);
8+
9+
addDecorator(withA11y);
10+
11+
// force full reload to not reregister web components
12+
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
13+
configure(req, module);
14+
if (module.hot) {
15+
module.hot.accept(req.id, () => {
16+
const currentLocationHref = window.location.href;
17+
window.history.pushState(null, null, currentLocationHref);
18+
window.location.reload();
19+
});
20+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = ['@storybook/addon-docs/web-components/preset'];

‎webcomponent-example/HOW-TO.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Project bootsraped with open-wc https://open-wc.org/guide/#quickstart
2+
3+
Then a very basic example based on lit-element docs was build. Source https://lit-element.polymer-project.org/guide/lifecycle

‎webcomponent-example/LICENSE‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO

‎webcomponent-example/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# \<iink-element>
2+
3+
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
4+
5+
This is an example of webcomponent wrapper for `iink-js` library.
6+
7+
## Installation
8+
```bash
9+
npm i
10+
```
11+
12+
## Usage
13+
```html
14+
<script type="module">
15+
import 'iink-element/iink-element.js';
16+
</script>
17+
18+
<iink-element></iink-element>
19+
```
20+
21+
## Linting with ESLint, Prettier, and Types
22+
To scan the project for linting errors, run
23+
```bash
24+
npm run lint
25+
```
26+
27+
You can lint with ESLint and Prettier individually as well
28+
```bash
29+
npm run lint:eslint
30+
```
31+
```bash
32+
npm run lint:prettier
33+
```
34+
35+
To automatically fix many linting errors, run
36+
```bash
37+
npm run format
38+
```
39+
40+
You can format using ESLint and Prettier individually as well
41+
```bash
42+
npm run format:eslint
43+
```
44+
```bash
45+
npm run format:prettier
46+
```
47+
48+
## Demoing with Storybook
49+
To run a local instance of Storybook for your component, run
50+
```bash
51+
npm run storybook
52+
```
53+
54+
To build a production version of Storybook, run
55+
```bash
56+
npm run storybook:build
57+
```
58+
59+
60+
## Local Demo with `es-dev-server`
61+
```bash
62+
npm start
63+
```
64+
To run a local development server that serves the basic demo located in `demo/index.html`
65+
66+
```bash
67+
npm start:compatibility
68+
```
69+
To run a local development server in compatibility mode for older browsers that serves the basic demo located in `demo/index.html`
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"version": 2,
3+
"tags": [
4+
{
5+
"name": "iink-element",
6+
"description": "A component with a title and an action counter",
7+
"properties": [
8+
{
9+
"name": "title",
10+
"type": "String",
11+
"description": "The title of your component",
12+
"default": "Hey there"
13+
},
14+
{
15+
"name": "counter",
16+
"type": "Number",
17+
"description": "An action counter",
18+
"default": 0
19+
}
20+
],
21+
"events": [],
22+
"slots": [],
23+
"cssProperties": [
24+
{
25+
"name": "--iink-element-text-color",
26+
"description": "Main Text Color",
27+
"type": "Color"
28+
}
29+
]
30+
}
31+
]
32+
}

‎webcomponent-example/demo/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html lang="en-GB">
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
body {
7+
background: #fafafa;
8+
}
9+
iink-element {
10+
border: solid grey 2px;
11+
}
12+
#recoResults {
13+
width: 99%;
14+
height: 150px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="demo">
20+
<!-- This is a simple example, for configuration adjustment,
21+
you should create properties to wrap configuration or define it directly on component
22+
23+
Here we support `params`to inject configuration :
24+
ex for MATH : params='{"iink":{"math":{"mimeTypes":["application/x-latex","application/vnd.myscript.jiix"]},"export":{"jiix":{"strokes":true}}}}'
25+
-->
26+
<iink-element
27+
type="TEXT"
28+
applicationKey="YOUR_APP_KEY"
29+
hmacKey="YOUR_HMAC_KEY"
30+
>
31+
</iink-element>
32+
Recognition results as JIIX read from the component event
33+
<textarea id="recoResults"></textarea>
34+
</div>
35+
36+
<script type="module">
37+
import '../iink-element.js';
38+
39+
window.addEventListener('load', () => {
40+
const iinkElement = document.querySelector('iink-element')
41+
const recoResults = document.querySelector('#recoResults')
42+
iinkElement.addEventListener('exported', (evt) => {
43+
if (evt.detail.exports && evt.detail.exports['application/vnd.myscript.jiix']) {
44+
recoResults.innerHTML = evt.detail.exports['application/vnd.myscript.jiix']
45+
}
46+
})
47+
})
48+
</script>
49+
</body>
50+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /