feat(poc): add stencil boilerplate for bar-chart component

- Generated the bar chart component
- Showing it in storybook
- Added title as parameter for testing

packages/luna-charts/custom-elements.d.ts

@@ -1,3 +1,4 @@
+
 /**
  * This is an autogenerated file created by the Stencil compiler.
  * DO NOT MODIFY IT MANUALLY
@@ -28,7 +29,7 @@ interface ComponentCompilerTypeReference {
    * - globally
    * - by importing it into a file (and is defined elsewhere)
    */
-  location: 'local' | 'global' | 'import';
+  location: "local" | "global" | "import";
   /**
    * The path to the type reference, if applicable (global types should not need a path associated with them)
    */
@@ -151,7 +152,7 @@ export interface JsonDocsComponent {
   /**
    * The encapsulation strategy for a component
    */
-  encapsulation: 'shadow' | 'scoped' | 'none';
+  encapsulation: "shadow" | "scoped" | "none";
   /**
    * The tag name for the component, for use in HTML
    */
@@ -466,7 +467,7 @@ export interface StyleDoc {
    * Used to inform Stencil where the start of a new property's description starts (and where the previous description
    * ends).
    */
-  annotation: 'prop';
+  annotation: "prop";
   /**
    * The Stencil style-mode that is associated with this property.
    */

packages/luna-charts/custom-elements.json

@@ -1,94 +1,45 @@
 {
-  "timestamp": "2026-08-01T23:02:04",
+  "timestamp": "2026-09-17T15:31:03",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.5",
+    "version": "4.44.2",
     "typescriptVersion": "5.8.3"
   },
   "components": [
     {
-      "filePath": "src/components/my-component/my-component.tsx",
+      "filePath": "src/components/charts/bar-chart/bar-chart.tsx",
       "encapsulation": "shadow",
-      "tag": "my-component",
+      "tag": "bar-chart",
-      "readme": "# my-component\n\n\n",
+      "readme": "# bar-chart\n\n\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "first",
+          "name": "title",
-          "type": "string | undefined",
+          "type": "string",
           "complexType": {
             "original": "string",
-            "resolved": "string | undefined",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
-          "attr": "first",
+          "attr": "title",
           "reflectToAttr": false,
-          "docs": "The first name",
+          "docs": "",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "\"Hello World\""
+            }
+          ],
+          "default": "\"Hello World\"",
           "values": [
             {
               "type": "string"
-            },
-            {
-              "type": "undefined"
             }
           ],
-          "optional": true,
+          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "last",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "last",
-          "reflectToAttr": false,
-          "docs": "The last name",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "middle",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "middle",
-          "reflectToAttr": false,
-          "docs": "The middle name",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -98,7 +49,12 @@
       "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The default slot"
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],

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

@@ -1,68 +1,50 @@
+/* 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';
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
-  interface MyComponent {
+    interface BarChart {
-    /**
+        /**
-     * The first name
+          * @default "Hello World"
-     */
+         */
-    first?: string;
+        "title": string;
-    /**
+    }
-     * The last name
-     */
-    last?: string;
-    /**
-     * The middle name
-     */
-    middle?: string;
-  }
 }
 declare global {
-  interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {}
+    interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {
-  var HTMLMyComponentElement: {
+    }
-    prototype: HTMLMyComponentElement;
+    var HTMLBarChartElement: {
-    new (): HTMLMyComponentElement;
+        prototype: HTMLBarChartElement;
-  };
+        new (): HTMLBarChartElement;
-  interface HTMLElementTagNameMap {
+    };
-    'my-component': HTMLMyComponentElement;
+    interface HTMLElementTagNameMap {
-  }
+        "bar-chart": HTMLBarChartElement;
+    }
 }
 declare namespace LocalJSX {
-  interface MyComponent {
+    interface BarChart {
-    /**
+        /**
-     * The first name
+          * @default "Hello World"
-     */
+         */
-    first?: string;
+        "title"?: string;
-    /**
+    }
-     * The last name
-     */
-    last?: string;
-    /**
-     * The middle name
-     */
-    middle?: string;
-  }
 
-  interface MyComponentAttributes {
+    interface BarChartAttributes {
-    first: string;
+        "title": string;
-    middle: string;
+    }
-    last: string;
-  }
 
-  interface IntrinsicElements {
+    interface IntrinsicElements {
-    'my-component': Omit<MyComponent, keyof MyComponentAttributes> & { [K in keyof MyComponent & keyof MyComponentAttributes]?: MyComponent[K] } & {
+        "bar-chart": Omit<BarChart, keyof BarChartAttributes> & { [K in keyof BarChart & keyof BarChartAttributes]?: BarChart[K] } & { [K in keyof BarChart & keyof BarChartAttributes as `attr:${K}`]?: BarChartAttributes[K] } & { [K in keyof BarChart & keyof BarChartAttributes as `prop:${K}`]?: BarChart[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' {
+declare module "@stencil/core" {
-  export namespace JSX {
+    export namespace JSX {
-    interface IntrinsicElements {
+        interface IntrinsicElements {
-      'my-component': LocalJSX.IntrinsicElements['my-component'] & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+            "bar-chart": LocalJSX.IntrinsicElements["bar-chart"] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
+        }
     }
-  }
 }

packages/luna-charts/src/components/charts/bar-chart/bar-chart.css

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

packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@stencil/storybook-plugin';
+import { h } from '@stencil/core';
+import { BarChart } from './bar-chart';
+
+const meta: Meta<BarChart> = {
+  title: 'BarChart',
+  component: BarChart,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<BarChart>;
+
+export const Primary: Story = {
+  args: {},
+  render: () => <bar-chart title='test' />,
+};
+
+export const Secondary: Story = {
+  args: {},
+};

packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx

@@ -0,0 +1,19 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'bar-chart',
+  styleUrl: 'bar-chart.css',
+  shadow: true,
+})
+export class BarChart {
+
+  @Prop() title: string = "Hello World";
+
+  render() {
+    return (
+      <Host>
+        <slot>{this.title}</slot>
+      </Host>
+    );
+  }
+}

packages/luna-charts/src/components/charts/bar-chart/readme.md

@@ -0,0 +1,24 @@
+# bar-chart
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default         |
+| -------- | --------- | ----------- | -------- | --------------- |
+| `title`  | `title`   |             | `string` | `"Hello World"` |
+
+
+## Slots
+
+| Slot | Description      |
+| ---- | ---------------- |
+|      | The default slot |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.e2e.ts

@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { describe, expect, it } from 'vitest';
+
+describe('bar-chart', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bar-chart></bar-chart>');
+
+    const element = await page.find('bar-chart');
+    expect(element).toHaveClass('hydrated');
+  });
+});

packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx

@@ -0,0 +1,20 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { BarChart } from '../bar-chart';
+import { describe, expect, it } from 'vitest';
+
+
+describe('bar-chart', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [BarChart],
+      html: `<bar-chart></bar-chart>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <bar-chart>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </bar-chart>
+    `);
+  });
+});