build(stencil): initialize stencil workspace

packages/luna-charts/src/components/my-component/my-component.cmp.test.tsx

@@ -0,0 +1,31 @@
+import { render, h, describe, it, expect } from '@stencil/vitest';
+
+describe('my-component', () => {
+  it('renders', async () => {
+    const { root } = await render(<my-component></my-component>);
+    await expect(root).toEqualHtml(`
+      <my-component class="hydrated">
+        <mock:shadow-root>
+          <div>
+            Hello, World! I'm
+          </div>
+        </mock:shadow-root>
+      </my-component>
+    `);
+  });
+
+  it('renders with values', async () => {
+    const { root } = await render(
+      <my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>,
+    );
+    await expect(root).toEqualHtml(`
+      <my-component class="hydrated">
+        <mock:shadow-root>
+          <div>
+            Hello, World! I'm Stencil 'Don't call me a framework' JS
+          </div>
+        </mock:shadow-root>
+      </my-component>
+    `);
+  });
+});

packages/luna-charts/src/components/my-component/my-component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

packages/luna-charts/src/components/my-component/my-component.tsx

@@ -0,0 +1,32 @@
+import { Component, Prop, h } from '@stencil/core';
+import { format } from '../../utils/utils';
+
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  shadow: true,
+})
+export class MyComponent {
+  /**
+   * The first name
+   */
+  @Prop() first?: string;
+
+  /**
+   * The middle name
+   */
+  @Prop() middle?: string;
+
+  /**
+   * The last name
+   */
+  @Prop() last?: string;
+
+  private getText(): string {
+    return format(this.first, this.middle, this.last);
+  }
+
+  render() {
+    return <div>Hello, World! I'm {this.getText()}</div>;
+  }
+}

packages/luna-charts/src/components/my-component/readme.md

@@ -0,0 +1,19 @@
+# my-component
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description     | Type     | Default     |
+| -------- | --------- | --------------- | -------- | ----------- |
+| `first`  | `first`   | The first name  | `string` | `undefined` |
+| `last`   | `last`    | The last name   | `string` | `undefined` |
+| `middle` | `middle`  | The middle name | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*