@nuasite/components 0.0.6 → 0.0.8
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 +54 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,63 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @nuasite/components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Reusable [Astro](https://astro.build/) components optimized for sites connected to
|
|
4
|
+
[Nua Site](https://www.nuasite.com). The package currently ships a form widget
|
|
5
|
+
that takes care of wiring up Nua Site submissions while providing friendly UI
|
|
6
|
+
states you can customize.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
4
9
|
|
|
5
10
|
```bash
|
|
6
|
-
bun
|
|
11
|
+
bun add @nuasite/components
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
The package targets Astro projects and expects `typescript@^5` to be available
|
|
15
|
+
in your workspace (peer dependency).
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
```astro
|
|
20
|
+
---
|
|
21
|
+
import { Form } from '@nuasite/components'
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
<Form
|
|
25
|
+
action="/contact"
|
|
26
|
+
successMessage="Thanks—we'll be in touch!"
|
|
27
|
+
submittingMessage="Sending..."
|
|
28
|
+
errorMessage="Something went wrong."
|
|
29
|
+
/>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Pass either a `formId` issued by Nua Site, or a custom `action` URL. You
|
|
33
|
+
can override the default success, error, submitting, and retry copy via props.
|
|
34
|
+
|
|
35
|
+
## Types
|
|
36
|
+
|
|
37
|
+
TypeScript projects can import the component props to help with strongly typed
|
|
38
|
+
helper utilities:
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import type { FormProps } from '@nuasite/components'
|
|
42
|
+
|
|
43
|
+
const defaults: FormProps = {
|
|
44
|
+
formId: 'contact',
|
|
45
|
+
successMessage: 'Success!',
|
|
46
|
+
}
|
|
7
47
|
```
|
|
8
48
|
|
|
9
|
-
|
|
49
|
+
`FormProps` ensures at least one of `formId` or `action` is provided at compile
|
|
50
|
+
time, catching configuration mistakes early.
|
|
51
|
+
|
|
52
|
+
## Local development
|
|
53
|
+
|
|
54
|
+
If you need to work on the components themselves:
|
|
10
55
|
|
|
11
56
|
```bash
|
|
12
|
-
|
|
57
|
+
cd packages/components
|
|
58
|
+
bun install
|
|
59
|
+
bunx tsx src/index.ts
|
|
13
60
|
```
|
|
14
61
|
|
|
15
|
-
|
|
62
|
+
During local testing you can import components directly via workspace links in
|
|
63
|
+
your Astro project to iterate quickly.
|