build(stencil): initialize stencil workspace

packages/luna-charts/src/components.d.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface MyComponent {
+        /**
+          * The first name
+         */
+        "first": string;
+        /**
+          * The last name
+         */
+        "last": string;
+        /**
+          * The middle name
+         */
+        "middle": string;
+    }
+}
+declare global {
+    interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
+    }
+    var HTMLMyComponentElement: {
+        prototype: HTMLMyComponentElement;
+        new (): HTMLMyComponentElement;
+    };
+    interface HTMLElementTagNameMap {
+        "my-component": HTMLMyComponentElement;
+    }
+}
+declare namespace LocalJSX {
+    interface MyComponent {
+        /**
+          * The first name
+         */
+        "first"?: string;
+        /**
+          * The last name
+         */
+        "last"?: string;
+        /**
+          * The middle name
+         */
+        "middle"?: string;
+    }
+
+    interface MyComponentAttributes {
+        "first": string;
+        "middle": string;
+        "last": string;
+    }
+
+    interface IntrinsicElements {
+        "my-component": Omit<MyComponent, keyof MyComponentAttributes> & { [K in keyof MyComponent & keyof MyComponentAttributes]?: MyComponent[K] } & { [K in keyof MyComponent & keyof MyComponentAttributes as `attr:${K}`]?: MyComponentAttributes[K] } & { [K in keyof MyComponent & keyof MyComponentAttributes as `prop:${K}`]?: MyComponent[K] };
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "my-component": LocalJSX.IntrinsicElements["my-component"] & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+        }
+    }
+}

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/)*

packages/luna-charts/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/luna-charts.esm.js"></script>
+    <script nomodule src="/build/luna-charts.js"></script>
+  </head>
+  <body>
+    <my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
+  </body>
+</html>

packages/luna-charts/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+
+export { format } from './utils/utils';
+export type * from './components.d.ts';

packages/luna-charts/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function format(first?: string, middle?: string, last?: string): string {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

packages/luna-charts/src/utils/utils.unit.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { format } from './utils';
+
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(format(undefined, undefined, undefined)).toEqual('');
+  });
+
+  it('formats just first names', () => {
+    expect(format('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+
+  it('formats first and last names', () => {
+    expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+
+  it('formats first, middle and last names', () => {
+    expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+  });
+});