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

.gitea/templates/ISSUE_TEMPLATE.md

@@ -1,37 +0,0 @@
-<!-- markdownlint-disable MD041 -->
-## Goal
-
-<!-- One sentence: what should this issue achieve? -->
-
-## Description
-
-<!-- Context and background: why is this issue necessary?
-     What is the current state, and what is missing or needs to be done? -->
-
-## Steps to Reproduce
-
-<!-- Only relevant for bugs — remove this section for tasks/features.
-     1. Go to '...'
-     2. Click on '...'
-     3. See error -->
-
-## Expected Behaviour
-
-<!-- Only relevant for bugs — what should have happened? -->
-
-## Actual Behaviour
-
-<!-- Only relevant for bugs — what happened instead? -->
-
-## Tasks
-
-- [ ] ...
-- [ ] ...
-- [ ] ...
-- [ ] Update the related parts of the documentation
-
-## Acceptance Criteria
-
-- ...
-- ...
-- ...

.gitea/templates/PULL_REQUEST_TEMPLATE.md

@@ -1,34 +0,0 @@
-<!-- markdownlint-disable MD041 -->
-## Description
-
-<!-- What does this PR change and why? -->
-
-## Related Issue
-
-<!-- Closes #... / Relates to #... -->
-
-## Type of Change
-
-- [ ] Bug fix
-- [ ] New feature
-- [ ] Refactoring (no functional changes)
-- [ ] Documentation
-- [ ] Tests
-
-## Changes
-
-- ...
-- ...
-- ...
-
-## How Has This Been Tested?
-
-<!-- Describe how you verified your changes (unit tests, manual testing, etc.) -->
-
-## Checklist
-
-- [ ] Code follows the project's style guidelines
-- [ ] Self-review of the code has been performed
-- [ ] Tests have been added/updated and pass locally
-- [ ] Documentation has been updated where necessary
-- [ ] No new warnings or errors introduced

.prettierrc.json

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

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).
 

docs/src/content/docs/getting-started/index.mdx

@@ -5,22 +5,13 @@ sidebar:
   order: 0
 ---
 
-LUNA Charts is an open-source charting library built with a strong focus on **accessibility**, **developer experience**, and 
+LUNA Charts is an open-source charting library built with a strong focus on **accessibility**, **developer experience**, and **long-term maintainability**.
-**long-term maintainability**.
 
-The project was created because many existing charting libraries provide excellent visualizations but often 
+The project was created because many existing charting libraries provide excellent visualizations, but often treat accessibility, architecture, and maintainability as secondary concerns.
-treat accessibility as a secondary concern. Furthermore, a lot of teams have a lack of accessibility awareness, 
-and accessibility features are often pushed to the end of the project.
 
 LUNA Charts takes a different approach.
 
-Instead of focusing on becoming a big library with numerous chart-creation functions, this project concentrates 
+Instead of starting with code, the project started with an **architecture-first process**. The entire foundation—including business goals, technical architecture, governance, and architectural decisions—was designed before implementation began.
-on ease of use and chart modification, with accessibility playing a major role throughout the entire development process. 
-LUNA-Charts is open-source software. 
-This guarantees that everyone can use and modify it. We want to make the world more accessible for everyone.
-
-Furthermore, we focus on an **architecture-first process**. The entire foundation—including 
-business goals, technical architecture, governance, and architectural decisions—was designed before implementation began.
 
 ## Project Goals
 
@@ -35,9 +26,11 @@ LUNA Charts aims to provide a charting library that is:
 
 ## Current Project Status
 
-The project is currently in the **First Proof of Concept (v0.3.0)** phase.
+The project is currently in the **Groundwork** phase.
-We validate the core technical and accessibility assumptions of the library through a first working implementation. 
+
-The goal is to prove that the chosen architecture actually works in practice before committing to a broader component set.
+At this stage, the architecture, repository structure, development workflow, and governance model are being established before implementing the first chart components.
+
+Although no production-ready charts are available yet, the project documentation already reflects the long-term vision and architectural direction.
 
 ## Learn More
 

docs/src/content/docs/getting-started/project-structure.mdx

@@ -5,8 +5,7 @@ sidebar:
   order: 1
 ---
 
-LUNA Charts follows a modular repository structure that separates the chart library from its documentation while keeping 
+LUNA Charts follows a modular repository structure that separates the chart library from its documentation while keeping all project artifacts within a single repository.
-all project artifacts within a single repository.
 
 ```text
 luna-charts/
@@ -52,38 +51,31 @@ It serves as the **Single Point of Truth (SPOT)** for:
 - Project governance
 - User documentation
 
-The documentation is rendered using **Astro and Starlight**, but the Markdown content remains the authoritative source.
+The documentation is rendered using **Starlight**, but the Markdown content remains the authoritative source.
 
 ---
 
 ## examples/
 
-Example applications demonstrating how to integrate LUNA Charts with supported frontend frameworks 
+Example applications demonstrating how to integrate LUNA Charts with supported frontend frameworks will be added here in future iterations.
-will be added here in future iterations.
 
 Examples may include:
 
+- Vanilla JavaScript
 - React
 - Angular
 - Vue
 
-Right now, we are working on version 0.3.0, implementing a first proof of concept. 
-The first Minimum Viable Product will be launched with version 1.0.0.
-
 ---
 
-## .gitea/
-
-- Gitea Actions
-- Issue templates
-- Pull request templates
-- Community workflows
-
 ## .github/
 
 Contains project automation such as:
 
-- Code of Conduct
+- GitHub Actions
+- Issue templates
+- Pull request templates
+- Community workflows
 
 ---
 
@@ -91,7 +83,6 @@ Contains project automation such as:
 
 LUNA Charts is maintained as a **pnpm workspace**.
 
-This structure allows multiple packages and supporting projects to evolve together while sharing a consistent 
+This structure allows multiple packages and supporting projects to evolve together while sharing a consistent toolchain and development workflow.
-toolchain and development workflow.
 
 As the project grows, additional packages or tooling may be introduced without changing the overall repository organization.

docs/src/content/docs/getting-started/roadmap.mdx

@@ -7,9 +7,7 @@ sidebar:
 
 LUNA Charts follows an **architecture-first** development approach.
 
-Instead of implementing features immediately, the project establishes a solid architectural and organizational 
+Instead of implementing features immediately, the project establishes a solid architectural and organizational foundation before writing production code. This ensures long-term maintainability, consistent quality, and transparent decision-making.
-foundation before writing production code. This ensures long-term maintainability, consistent quality, and 
-transparent decision-making.
 
 ---
 
@@ -22,7 +20,7 @@ transparent decision-making.
 Completed work includes:
 
 - **Repository structure:** Standardized layout for code, configurations, and assets.
-- **Development workflow:** Definition of branching strategies, commit rules, and review processes.
+- \*\*Development workflow: Definition of branching strategies, commit rules, and review processes.
 - **Architecture documentation (TOGAF ADM):** Architecture framework set up according to the TOGAF standard.
 - **Architecture Decision Records (ADRs 1-5):** System established for transparent documentation of architectural decisions.
 - **Project governance:** Defined roles, responsibilities, and decision-making processes.
@@ -104,5 +102,6 @@ Future work may include:
 
 ## Long-Term Vision
 
-LUNA Charts aims to become an accessible, framework-independent charting library that combines modern Web Components with a 
+LUNA Charts aims to become an accessible, framework-independent charting library that combines modern Web Components with a transparent architecture and a sustainable open-source development model.
-transparent architecture and a sustainable open-source development model.
+
+Every milestone builds upon the architectural foundation established during the Groundwork phase.

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.json

@@ -1,94 +1,45 @@
 {
-  "timestamp": "2026-08-01T23:02:04",
+  "timestamp": "2026-10-05T16:30: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": [],
@@ -106,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

@@ -5,64 +5,46 @@
  */
 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: {
+  var HTMLBarChartElement: {
-    prototype: HTMLMyComponentElement;
+    prototype: HTMLBarChartElement;
-    new (): HTMLMyComponentElement;
+    new (): HTMLBarChartElement;
   };
   interface HTMLElementTagNameMap {
-    'my-component': HTMLMyComponentElement;
+    '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 {
-    '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 MyComponent & keyof MyComponentAttributes as `attr:${K}`]?: MyComponentAttributes[K];
+      [K in keyof BarChart & keyof BarChartAttributes as `attr:${K}`]?: BarChartAttributes[K];
-    } & { [K in keyof MyComponent & keyof MyComponentAttributes as `prop:${K}`]?: MyComponent[K] };
+    } & { [K in keyof BarChart & keyof BarChartAttributes as `prop:${K}`]?: BarChart[K] };
   }
 }
 export { LocalJSX as JSX };
 declare module '@stencil/core' {
   export namespace JSX {
     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,18 @@
+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/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,19 @@
+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>
+    `);
+  });
+});

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