@perry-works/instruction-renderer 0.0.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/example.html +149 -0
- package/instruction-renderer.js +55701 -0
- package/instruction-renderer.js.map +1 -0
- package/package.json +23 -0
- package/style.css +1 -0
package/example.html
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>InstructionRenderer — Standalone Example</title>
|
|
7
|
+
<link rel="stylesheet" href="./style.css" />
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
margin: 0;
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
+
background: #f3f4f6;
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
padding: 2rem;
|
|
16
|
+
}
|
|
17
|
+
.phone-wrapper {
|
|
18
|
+
width: 390px;
|
|
19
|
+
min-height: 600px;
|
|
20
|
+
background: #fff;
|
|
21
|
+
border-radius: 12px;
|
|
22
|
+
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
</style>
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<div class="phone-wrapper">
|
|
29
|
+
<div id="root"></div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<script type="importmap">
|
|
33
|
+
{
|
|
34
|
+
"imports": {
|
|
35
|
+
"react": "https://esm.sh/react@19?dev",
|
|
36
|
+
"react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime?dev",
|
|
37
|
+
"react/jsx-dev-runtime": "https://esm.sh/react@19/jsx-dev-runtime?dev",
|
|
38
|
+
"react-dom": "https://esm.sh/react-dom@19?dev",
|
|
39
|
+
"react-dom/client": "https://esm.sh/react-dom@19/client?dev",
|
|
40
|
+
"lodash": "https://esm.sh/lodash-es@4"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<script type="module">
|
|
46
|
+
window.onerror = (msg, src, line, col, err) => {
|
|
47
|
+
document.getElementById('root').innerHTML =
|
|
48
|
+
`<pre style="color:red;padding:1rem;font-size:12px;white-space:pre-wrap">${msg}\n${src}:${line}:${col}\n${err?.stack ?? ''}</pre>`;
|
|
49
|
+
};
|
|
50
|
+
window.addEventListener('unhandledrejection', (e) => {
|
|
51
|
+
document.getElementById('root').innerHTML =
|
|
52
|
+
`<pre style="color:red;padding:1rem;font-size:12px;white-space:pre-wrap">Unhandled rejection:\n${e.reason?.stack ?? e.reason}</pre>`;
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
try {
|
|
56
|
+
const React = await import('react');
|
|
57
|
+
const { createElement: h } = React;
|
|
58
|
+
const { createRoot } = await import('react-dom/client');
|
|
59
|
+
|
|
60
|
+
const lib = await import('./instruction-renderer.js');
|
|
61
|
+
const {
|
|
62
|
+
InstructionRenderer,
|
|
63
|
+
createMockAdapter,
|
|
64
|
+
IntlProvider,
|
|
65
|
+
enMessages,
|
|
66
|
+
} = lib;
|
|
67
|
+
|
|
68
|
+
const sampleInstruction = {
|
|
69
|
+
id: 'instr-1',
|
|
70
|
+
organization_id: 'org-1',
|
|
71
|
+
title: 'Applying Micro-cement in Bathrooms',
|
|
72
|
+
description: 'Instruction for correctly applying micro-cement surfaces',
|
|
73
|
+
instruction_type: 'work',
|
|
74
|
+
element_ids: ['el-1', 'el-2', 'el-3', 'el-4'],
|
|
75
|
+
elements: [
|
|
76
|
+
{
|
|
77
|
+
id: 'el-1',
|
|
78
|
+
elem_type: 'text',
|
|
79
|
+
element_kind: 'content',
|
|
80
|
+
order: 1,
|
|
81
|
+
text_data: 'Ensure the surface is **clean** and dry before starting. Remove any dust or debris with a damp cloth.',
|
|
82
|
+
title: 'Surface Preparation',
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
id: 'el-2',
|
|
86
|
+
elem_type: 'check_button',
|
|
87
|
+
element_kind: 'verification',
|
|
88
|
+
order: 2,
|
|
89
|
+
required: true,
|
|
90
|
+
header: 'Verify Surface Condition',
|
|
91
|
+
label: 'Verify Surface Condition',
|
|
92
|
+
checklist: [
|
|
93
|
+
{ id: 'item-1', text: 'Surface is clean and grease-free' },
|
|
94
|
+
{ id: 'item-2', text: 'No cracks or irregularities' },
|
|
95
|
+
{ id: 'item-3', text: 'Primer has been applied' },
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
id: 'el-3',
|
|
100
|
+
elem_type: 'measurement',
|
|
101
|
+
element_kind: 'verification',
|
|
102
|
+
order: 3,
|
|
103
|
+
required: true,
|
|
104
|
+
header: 'Workspace Temperature',
|
|
105
|
+
unit: '\u00B0C',
|
|
106
|
+
instruction_label: 'Measure the temperature',
|
|
107
|
+
measurement_label: 'Temperature',
|
|
108
|
+
expected_value: 20,
|
|
109
|
+
tolerance: 5,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
id: 'el-4',
|
|
113
|
+
elem_type: 'note',
|
|
114
|
+
element_kind: 'verification',
|
|
115
|
+
order: 4,
|
|
116
|
+
required: false,
|
|
117
|
+
header: 'Remarks',
|
|
118
|
+
label: 'Remarks',
|
|
119
|
+
max_characters: 500,
|
|
120
|
+
},
|
|
121
|
+
],
|
|
122
|
+
context_tags: [],
|
|
123
|
+
version: 1,
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
const adapter = createMockAdapter({
|
|
127
|
+
canVerify: true,
|
|
128
|
+
canTrackProgress: true,
|
|
129
|
+
isTestMode: true,
|
|
130
|
+
context: 'studio-preview',
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
const App = () =>
|
|
134
|
+
h(IntlProvider, { locale: 'en', messages: enMessages },
|
|
135
|
+
h(InstructionRenderer, {
|
|
136
|
+
instruction: sampleInstruction,
|
|
137
|
+
adapter,
|
|
138
|
+
})
|
|
139
|
+
);
|
|
140
|
+
|
|
141
|
+
const root = createRoot(document.getElementById('root'));
|
|
142
|
+
root.render(h(App));
|
|
143
|
+
} catch (err) {
|
|
144
|
+
document.getElementById('root').innerHTML =
|
|
145
|
+
`<pre style="color:red;padding:1rem;font-size:12px;white-space:pre-wrap">Fatal error:\n${err.stack ?? err}</pre>`;
|
|
146
|
+
}
|
|
147
|
+
</script>
|
|
148
|
+
</body>
|
|
149
|
+
</html>
|