Add Component Example (#2203)

* Add Component Example

* chore(lint): Prettier fix

* nit: improve implementation

* nit: Update documentation

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

5 files changed, 94 insertions, 0 deletions

diff --git a/examples/component/packages/my-component/Button.astro b/examples/component/packages/my-component/Button.astro
new file mode 100644
index 000000000..d853628a1
--- /dev/null
+++ b/examples/component/packages/my-component/Button.astro
@@ -0,0 +1,15 @@
+---
+export interface Props extends Record<any, any> {
+	type?: string
+}
+
+const {
+	type,
+	...props
+} = {
+	...Astro.props
+} as Props
+
+props.type = type || 'button'
+---
+<button {...props}><slot /></button>
\ No newline at end of file
diff --git a/examples/component/packages/my-component/Heading.astro b/examples/component/packages/my-component/Heading.astro
new file mode 100644
index 000000000..f27e74b3d
--- /dev/null
+++ b/examples/component/packages/my-component/Heading.astro
@@ -0,0 +1,18 @@
+---
+export interface Props extends Record<any, any> {
+	level?: number | string
+	role?: string
+}
+
+const {
+	level,
+	role,
+	...props
+} = {
+	...Astro.props
+} as Props
+
+props.role = role || 'heading'
+props['aria-level'] = level || '1'
+---
+<h {...props}><slot /></h>
\ No newline at end of file
diff --git a/examples/component/packages/my-component/README.md b/examples/component/packages/my-component/README.md
new file mode 100644
index 000000000..41a53a6f0
--- /dev/null
+++ b/examples/component/packages/my-component/README.md
@@ -0,0 +1,37 @@
+# Example `@example/my-component`
+
+This is an example package, exported as `@example/my-component`. It consists of two Astro components, **Button** and **Heading**.
+
+### Button
+
+The **Button** component generates a `<button>` with a default **type** of **button**.
+
+```astro
+---
+import * as Component from '@example/my-component'
+---
+<Component.Button>Plain Button</Component.Button>
+```
+
+```html
+<!-- generated html -->
+<button type="button">Plain Button</button>
+```
+
+### Heading
+
+The **Heading** component generates an `<h>` tag with a default **role** of **heading** and a **level** attribute that gets written to **aria-level**.
+
+```astro
+---
+import * as Component from '@example/my-component'
+---
+<Component.Heading>Heading</Component.Heading>
+<Component.Heading level="2">Subheading</Component.Heading>
+```
+
+```html
+<!-- generated html -->
+<h role="heading" aria-level="1">Plain Button</h>
+<h role="heading" aria-level="2">Subheading</h>
+```
diff --git a/examples/component/packages/my-component/index.js b/examples/component/packages/my-component/index.js
new file mode 100644
index 000000000..603a81a96
--- /dev/null
+++ b/examples/component/packages/my-component/index.js
@@ -0,0 +1,2 @@
+export { default as Button } from './Button.astro';
+export { default as Heading } from './Heading.astro';
diff --git a/examples/component/packages/my-component/package.json b/examples/component/packages/my-component/package.json
new file mode 100644
index 000000000..47212b558
--- /dev/null
+++ b/examples/component/packages/my-component/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@example/my-component",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./Button": "./Button.astro",
+    "./Heading": "./Heading.astro"
+  },
+  "files": [
+    "index.js",
+    "Button.astro",
+    "Heading.jsx"
+  ],
+  "keywords": [
+    "astro-component",
+    "button",
+    "heading",
+    "example"
+  ]
+}