@wral/report-it 0.1.0
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 +110 -0
- package/dist/define.mjs +18 -0
- package/dist/define.standalone.js +5810 -0
- package/dist/index.mjs +168 -0
- package/dist/wral-code-input-CS9ASu8g.js +1945 -0
- package/package.json +41 -0
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# `<wral-report-it>`
|
|
2
|
+
|
|
3
|
+
Lit web component for the **Report It** guided viewer-submission flow
|
|
4
|
+
on WRAL.com (DEV-1099): a chat-style walk through a form's flow tree,
|
|
5
|
+
an embedded My WRAL sign-in gate, and submit-time media uploads,
|
|
6
|
+
rendered against [api-forms](https://api.wral.com/forms/v1/openapi.json).
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
From the CDN (self-contained, registers the elements):
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<script type="module"
|
|
14
|
+
src="https://cdn.wral.com/@wral/report-it/v0/define.standalone.js"></script>
|
|
15
|
+
<wral-report-it api="https://api.wral.com/forms"></wral-report-it>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
From npm:
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
import '@wral/report-it/define'; // registers wral-report-it,
|
|
22
|
+
// wral-report-media, wral-code-input
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Pre-sizing (avoid layout shift)
|
|
26
|
+
|
|
27
|
+
Keep this first in the host page's `<head>`:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<style>wral-report-it { display: block; min-height: 70vh; }</style>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Attributes and properties
|
|
34
|
+
|
|
35
|
+
| Name | Kind | Default | Purpose |
|
|
36
|
+
| --- | --- | --- | --- |
|
|
37
|
+
| `api` | attribute | `https://api.wral.com/forms` | api-forms base URL (dev: `https://api.wral.com/dev/forms`) |
|
|
38
|
+
| `client` | property | — | Full I/O surface override (API + auth); wins over `api`. See `src/demo/demo-client.mjs` for the shape |
|
|
39
|
+
|
|
40
|
+
Styling hooks: design tokens are read as `var(--wral-…, fallback)` with
|
|
41
|
+
prototype-accurate fallbacks, so the component renders correctly with no
|
|
42
|
+
token stylesheet on the page. `--report-it-max-width` overrides the
|
|
43
|
+
column width (default 680px).
|
|
44
|
+
|
|
45
|
+
## How a submission flows
|
|
46
|
+
|
|
47
|
+
1. `GET {api}/v1/forms` (public) — one button per published form.
|
|
48
|
+
2. The chosen form's tree walks client-side: `choice` chips, `collect`
|
|
49
|
+
cards (text/textarea/url/datetime/location/media/consent/select),
|
|
50
|
+
the `gate` (My WRAL email + one-time code — skipped with a
|
|
51
|
+
confirmation card when already signed in), `redirect` dead-ends,
|
|
52
|
+
and the `terminal` review screen.
|
|
53
|
+
3. **Nothing uploads until the viewer confirms submit.** Then:
|
|
54
|
+
`POST /v1/uploads` (Bearer) → presigned S3 PUTs with per-file
|
|
55
|
+
progress and retry (expired presigns re-mint per file) →
|
|
56
|
+
`PUT /v1/requests/{requestId}` (idempotent — retries return the same
|
|
57
|
+
reference) → confirmation + behind-the-scenes journey.
|
|
58
|
+
|
|
59
|
+
Auth uses `@wral/sdk-auth-audience` directly (`sendCode`/`verifyCode`);
|
|
60
|
+
`requireAuth`/`authFetch` are deliberately avoided — their 401 paths
|
|
61
|
+
redirect to `/login/`, which would destroy an unsubmitted form. A 401
|
|
62
|
+
mid-submit re-opens the gate in place and resumes where it parked.
|
|
63
|
+
|
|
64
|
+
## Drafts
|
|
65
|
+
|
|
66
|
+
The answer stack persists to `sessionStorage`
|
|
67
|
+
(`wral-report-it:draft:v1`) so a reload or app switch loses nothing.
|
|
68
|
+
**Attached files cannot persist** — restored drafts show a re-attach
|
|
69
|
+
notice for any files that were selected. Drafts are discarded when the
|
|
70
|
+
form changed incompatibly, and flagged for review when the flowVersion
|
|
71
|
+
moved but the answers still fit.
|
|
72
|
+
|
|
73
|
+
## Development
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
npm install
|
|
77
|
+
npm test # node --test over src/lib (all logic lives there)
|
|
78
|
+
npm run lint
|
|
79
|
+
npm run dev # vite harness at http://localhost:5173
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The harness runs against the live dev API by default (real My WRAL
|
|
83
|
+
login — your email receives a real code) or fully offline with the
|
|
84
|
+
in-memory demo client (any email, any six digits). Append
|
|
85
|
+
`?demofail=1` to make the second upload fail once and exercise the
|
|
86
|
+
retry UX.
|
|
87
|
+
|
|
88
|
+
## Release
|
|
89
|
+
|
|
90
|
+
`npm version patch && git push && git push --tags` — the `v*.*.*` tag
|
|
91
|
+
pipeline publishes to npm and to
|
|
92
|
+
`cdn.wral.com/@wral/report-it/{vX.Y.Z,vX.Y,vX,latest}/`.
|
|
93
|
+
Repo variables: `NPM_TOKEN`, `AWS_ACCESS_KEY_ID`,
|
|
94
|
+
`AWS_SECRET_ACCESS_KEY`, `AWS_DEFAULT_REGION`,
|
|
95
|
+
`S3_BUCKET=cdn.wral.com`, `S3_PREFIX=@wral/report-it`,
|
|
96
|
+
`AWS_DISTRIBUTION_ID`.
|
|
97
|
+
|
|
98
|
+
## Notes
|
|
99
|
+
|
|
100
|
+
- `wral-code-input` + helpers are copied from
|
|
101
|
+
`webapps.wral-web.audience-login` with one fix: the original's
|
|
102
|
+
`code-complete` guard could never fire when typing left-to-right
|
|
103
|
+
(only on paste). Worth upstreaming.
|
|
104
|
+
- The county list for `location` fields is hardcoded
|
|
105
|
+
(`src/lib/counties.mjs`) — the form model carries none; the component
|
|
106
|
+
prefers `field.counties` if a form document ever ships it.
|
|
107
|
+
- Required `location` fields need a county or a written place — one
|
|
108
|
+
notch stricter than the server schema, deliberately.
|
|
109
|
+
- `routing.state: "failed"` on a successful submission renders honest
|
|
110
|
+
"delivery being retried" journey copy, never fake delivery.
|
package/dist/define.mjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as n from "amazon-cognito-identity-js";
|
|
2
|
+
import { W as i, a as r, b as a } from "./wral-code-input-CS9ASu8g.js";
|
|
3
|
+
typeof window < "u" && !window.AmazonCognitoIdentity && (window.AmazonCognitoIdentity = n);
|
|
4
|
+
const d = {
|
|
5
|
+
"wral-report-it": a,
|
|
6
|
+
"wral-report-media": r,
|
|
7
|
+
"wral-code-input": i
|
|
8
|
+
};
|
|
9
|
+
function f() {
|
|
10
|
+
const o = globalThis?.customElements;
|
|
11
|
+
if (o)
|
|
12
|
+
for (const [t, e] of Object.entries(d))
|
|
13
|
+
o.get(t) || o.define(t, e);
|
|
14
|
+
}
|
|
15
|
+
typeof window < "u" && globalThis.customElements && f();
|
|
16
|
+
export {
|
|
17
|
+
f as defineAll
|
|
18
|
+
};
|