Merge pull request 'Fix/#42 add hot reload in storybook for stencil' (#43) from fix/#42-add-hot-reload-in-storybook-for-stencil into dev

Reviewed-on: #43

.prettierrc.json

@@ -2,6 +2,5 @@
   "singleQuote": true,
   "semi": true,
   "trailingComma": "es5",
-  "printWidth": 100,
-    "bracketSameLine": true
+  "printWidth": 100
 }

README.md

@@ -93,6 +93,7 @@ pnpm install
 | `pnpm run format` | Run the formatter to automatically fix code style issues |
 | `pnpm run test:browser` | Run browser tests (only works inside the `packages/luna-charts` directory) |
 | `pnpm run storybook` | Start the storybook documentation |
+| `pnpm run stencil:dev` | Runs the Stencil development server with live-reloading for the `luna-charts package inside the monorepo. |
 
 Component and browser tests run inside Docker (`docker-compose.test.yaml`), based on the same `Dockerfile.test` used to build the image CI tests against, to guarantee a reproducible browser environment — you don't need Playwright browsers installed locally. Locally this image is built on demand; in CI a prebuilt version of the same image is pulled directly (see [ADR-0002](./docs/src/content/docs/architecture/adr/000200-technology-stack.mdx) and the [Technology Architecture](./docs/src/content/docs/architecture/adm/technology-architecture.mdx#66-test-execution-environment) doc for details).
 

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "docs": "pnpm --filter docs run dev",
     "lint": "pnpm --filter luna-charts run lint",
+    "stencil:dev": "pnpm --filter luna-charts exec stencil build --watch",
     "format": "prettier --write .",
     "format:check": "pnpm --filter luna-charts run format:check",
     "changeset": "changeset",

packages/luna-charts/.prettierrc.json

@@ -1,7 +1,6 @@
 {
   "arrowParens": "avoid",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
   "quoteProps": "consistent",
   "printWidth": 180,

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

@@ -1,4 +1,3 @@
-
 /**
  * This is an autogenerated file created by the Stencil compiler.
  * DO NOT MODIFY IT MANUALLY
@@ -29,7 +28,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)
    */
@@ -152,7 +151,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
    */
@@ -467,7 +466,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,5 +1,5 @@
 {
-  "timestamp": "2026-09-17T15:31:03",
+  "timestamp": "2026-10-05T16:30:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.44.2",
@@ -30,10 +30,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "\"Hello World\""
+              "text": "'Hello World'"
             }
           ],
-          "default": "\"Hello World\"",
+          "default": "'Hello World'",
           "values": [
             {
               "type": "string"
@@ -62,5 +62,11 @@
       "dependencyGraph": {}
     }
   ],
-  "typeLibrary": {}
+  "typeLibrary": {
+    "src/types/index.ts::ChartInfo": {
+      "declaration": "export interface ChartInfo {\n  title: string;\n  description: string;  \n  sourceUrl: string;   \n}",
+      "docstring": "",
+      "path": "src/types/index.ts"
+    }
+  }
 }

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

@@ -1,50 +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 BarChart {
     /**
-          * @default "Hello World"
+     * @default 'Hello World'
      */
-        "title": string;
+    title: string;
   }
 }
 declare global {
-    interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {
-    }
+  interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {}
   var HTMLBarChartElement: {
     prototype: HTMLBarChartElement;
     new (): HTMLBarChartElement;
   };
   interface HTMLElementTagNameMap {
-        "bar-chart": HTMLBarChartElement;
+    'bar-chart': HTMLBarChartElement;
   }
 }
 declare namespace LocalJSX {
   interface BarChart {
     /**
-          * @default "Hello World"
+     * @default 'Hello World'
      */
-        "title"?: string;
+    title?: string;
   }
 
   interface BarChartAttributes {
-        "title": string;
+    title: string;
   }
 
   interface IntrinsicElements {
-        "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] };
+    '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] };
   }
 }
 export { LocalJSX as JSX };
-declare module "@stencil/core" {
+declare module '@stencil/core' {
   export namespace JSX {
     interface IntrinsicElements {
-            "bar-chart": LocalJSX.IntrinsicElements["bar-chart"] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
+      'bar-chart': LocalJSX.IntrinsicElements['bar-chart'] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
     }
   }
 }

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

@@ -16,7 +16,7 @@ type Story = StoryObj<BarChart>;
 
 export const Primary: Story = {
   args: {},
-  render: () => <bar-chart title='test' />,
+  render: () => <bar-chart title="test" />,
 };
 
 export const Secondary: Story = {

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

@@ -6,8 +6,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class BarChart {
-
-  @Prop() title: string = "Hello World";
+  @Prop() title: string = 'Hello World';
 
   render() {
     return (

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

@@ -1,24 +0,0 @@
-# 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.spec.tsx

@@ -2,7 +2,6 @@ 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({

packages/luna-charts/stencil.config.ts

@@ -12,9 +12,6 @@ export const config: Config = {
       customElementsExportBehavior: 'auto-define-custom-elements',
       externalRuntime: false,
     },
-    {
-      type: 'docs-readme',
-    },
     {
       type: 'www',
       serviceWorker: null, // disable service workers