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
fix(format): Removed all prettier errors and changed stencil configuration
2026-10-05 17:03:42 +00:00 · 2026-10-05 18:37:24 +02:00 · 2026-10-05 17:53:14 +02:00 · 2026-09-17 17:40:26 +02:00 · 2026-09-01 16:27:22 +00:00 · 2026-09-01 18:16:49 +02:00
22 changed files with 187 additions and 141 deletions
@@ -1,5 +0,0 @@
---
-'luna-charts': minor
---
-
-Establish the initial project foundation with architecture, documentation, governance, and development tooling.
@@ -2,6 +2,5 @@
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5",
-  "printWidth": 100,
-    "bracketSameLine": true
+  "printWidth": 100
 }
@@ -2,7 +2,7 @@

 LUNA Charts is a reusable, developer-friendly charting library designed to make accessible, WCAG-oriented data visualization the default rather than an afterthought.

-> **Project status:** Foundation phase. This milestone focuses on setting up the technical core of the component library. The goal is to build an automated, testable, and documented environment for efficient StencilJS component development. (starting with `BarChart`) are still in development. See the [Roadmap](./docs/src/content/docs/getting-started/roadmap.mdx) for details.
+> **Project status:** Working on First Proof of Concept v0.3.0 phase. This milestone focuses on validating the core technical and accessibility assumptions of the library through a first working implementation. The goal is to prove that the chosen architecture (SVG rendering, Web Components, accessibility-first approach) actually works in practice before committing to a broader component set. See the [Roadmap](./docs/src/content/docs/getting-started/roadmap.mdx) for details.

 ## Preface & Repository Mirror Notice

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

@@ -0,0 +1,13 @@
+# docs
+
+## 0.2.0
+
+### Minor Changes
+
+- This release introduces the next iteration of LUNA Charts with improvements to the component architecture, development workflow, testing infrastructure, and documentation.
+
+  - Improved component development and project structure
+  - Enhanced component testing infrastructure
+  - Improved CI/CD test handling, including projects without test files
+  - Updated and extended project documentation
+  - Various improvements and fixes across the library
@@ -1,7 +1,7 @@
 {
  "name": "docs",
  "type": "module",
-  "version": "0.0.1",
+  "version": "0.2.0",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
@@ -1,5 +1,5 @@
 ---
-title: Declarative Component API
+title: "ADR-000600: Declarative Component API"
 description: "LUNA Charts exposes chart functionality through a strongly typed, component-based declarative API."
 ---

@@ -1,5 +1,5 @@
 ---
-title: No Plugin or Extension System
+title: "ADR-0007000: No Plugin or Extension System"
 description: "LUNA Charts does not provide a consumer-facing plugin or extension mechanism."
 ---

@@ -1,5 +1,5 @@
 ---
-title: Single-Package Distribution Model
+title: "ADR-000800: Single-Package Distribution Model"
 description: "LUNA Charts is distributed as one unified package rather than separate packages per chart type or internal module."
 ---

@@ -1,5 +1,5 @@
 ---
-title: Multi-Layer Testing Strategy
+title: "ADR-000900: Multi-Layer Testing Strategy"
 description: "LUNA Charts uses multiple complementary quality assurance layers with automated release gates."
 ---

@@ -20,7 +20,7 @@ Instead of implementing features immediately, the project establishes a solid ar
 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.
@@ -32,9 +32,12 @@ At this stage, no production-ready chart components are available.

 ---

-## Current Status ⏳
-
-### Foundation v0.2.0
+<details>
+  <summary>
+    Completed Foundation v0.2.0
+  </summary>
+  This milestone focuses on setting up the technical core of the component library. The goal is to build an automated, 
+  testable, and documented environment for efficient StencilJS component development.

  This milestone focuses on setting up the technical core of the component library. The goal is to build an automated,
  testable, and documented environment for efficient StencilJS component development.
@@ -43,10 +46,11 @@ testable, and documented environment for efficient StencilJS component developme
  - **Establish Storybook for component development:** Set up Storybook as the development environment and isolated playground for component creation.
  - **Configure testing infrastructure:** Configure unit, integration, or visual regression testing frameworks.
  - **Configure CI/CD pipeline:** Automate linting, testing, and initial build checks on every repository push or pull request.
+</details>

 ---

-## Upcoming Milestones 🚀
+## Current Status ⏳

 ### First Proof of Concept v0.3.0

@@ -63,6 +67,8 @@ least one external framework (e.g. React or Vue).

 ---

+## Upcoming Milestones 🚀
+
 ### Minimum Viable Product (MVP) v1.0.0

 This milestone marks the first public-ready release. The goal is a stable, documented,
@@ -1,11 +1,12 @@
 {
  "name": "LUNA-Charts",
-  "version": "1.0.0",
+  "version": "0.2.0",
  "description": "",
  "main": "index.js",
  "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",
@@ -1,7 +1,6 @@
 {
  "arrowParens": "avoid",
  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "quoteProps": "consistent",
  "printWidth": 180,
@@ -0,0 +1,15 @@
+# luna-charts
+
+## 0.2.0
+
+### Minor Changes
+
+- This release introduces the next iteration of LUNA Charts with improvements to the component architecture, development workflow, testing infrastructure, and documentation.
+
+  - Improved component development and project structure
+  - Enhanced component testing infrastructure
+  - Improved CI/CD test handling, including projects without test files
+  - Updated and extended project documentation
+  - Various improvements and fixes across the library
+
+- 72c49e6: Establish the initial project foundation with architecture, documentation, governance, and development tooling.
@@ -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",
-      "readme": "# my-component\n\n\n",
+      "tag": "bar-chart",
+      "readme": "# bar-chart\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
-          "name": "first",
-          "type": "string | undefined",
+          "name": "title",
+          "type": "string",
          "complexType": {
            "original": "string",
-            "resolved": "string | undefined",
+            "resolved": "string",
            "references": {}
          },
          "mutable": false,
-          "attr": "first",
+          "attr": "title",
          "reflectToAttr": false,
-          "docs": "The first name",
-          "docsTags": [],
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Hello World'"
+            }
+          ],
+          "default": "'Hello World'",
          "values": [
            {
              "type": "string"
-            },
-            {
-              "type": "undefined"
            }
          ],
-          "optional": true,
-          "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,
+          "optional": false,
          "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"
+    }
+  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "luna-charts",
-  "version": "0.0.1",
+  "version": "0.2.0",
  "description": "Stencil Component Starter",
  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
@@ -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;
-    /**
-     * The last name
-     */
-    last?: string;
-    /**
-     * The middle name
-     */
-    middle?: string;
+    title: string;
  }
 }
 declare global {
-  interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {}
-  var HTMLMyComponentElement: {
-    prototype: HTMLMyComponentElement;
-    new (): HTMLMyComponentElement;
+  interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {}
+  var HTMLBarChartElement: {
+    prototype: HTMLBarChartElement;
+    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;
-    /**
-     * The last name
-     */
-    last?: string;
-    /**
-     * The middle name
-     */
-    middle?: string;
+    title?: string;
  }

-  interface MyComponentAttributes {
-    first: string;
-    middle: string;
-    last: string;
+  interface BarChartAttributes {
+    title: 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] };
+    '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' {
  export namespace JSX {
    interface IntrinsicElements {
-      'my-component': LocalJSX.IntrinsicElements['my-component'] & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+      'bar-chart': LocalJSX.IntrinsicElements['bar-chart'] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
    }
  }
 }
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
@@ -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: {},
+};
@@ -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>
+    );
+  }
+}
@@ -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');
+  });
+});
@@ -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>
+    `);
+  });
+});
@@ -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
Author	SHA1	Message	Date
Ninosaurier	bee174c99c	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 CI / lint-and-format (push) Successful in 36s Details CI / changeset-check (push) Successful in 34s Details CI / unit-tests (push) Successful in 43s Details CI / component-tests (push) Successful in 32s Details CI / lint-and-format (pull_request) Successful in 36s Details CI / changeset-check (pull_request) Successful in 29s Details CI / unit-tests (pull_request) Successful in 37s Details CI / component-tests (pull_request) Successful in 32s Details Reviewed-on: #43	2026-10-05 17:03:42 +00:00
Ninosaurier	20a1f89030	fix(format): Removed all prettier errors and changed stencil configuration CI / lint-and-format (push) Successful in 35s Details CI / changeset-check (push) Successful in 30s Details CI / unit-tests (push) Successful in 40s Details CI / component-tests (push) Successful in 34s Details CI / lint-and-format (pull_request) Successful in 43s Details CI / changeset-check (pull_request) Successful in 32s Details CI / unit-tests (pull_request) Successful in 35s Details CI / component-tests (pull_request) Successful in 34s Details - stencil does not generate a readme.md in every component. The option was disabled in the configuration - Fixed all prettier errors	2026-10-05 18:37:24 +02:00
Ninosaurier	6804542e07	fix(repo): Storybook detects changes and does a hot reload CI / lint-and-format (push) Failing after 38s Details CI / changeset-check (push) Successful in 27s Details CI / unit-tests (push) Successful in 36s Details CI / component-tests (push) Successful in 27s Details CI / lint-and-format (pull_request) Failing after 34s Details CI / changeset-check (pull_request) Successful in 23s Details CI / unit-tests (pull_request) Successful in 36s Details CI / component-tests (pull_request) Successful in 34s Details - Added the right command in the readme.md - package.json expanded with the right command and stencil development server can be started with "pnpm run stencil:dev"	2026-10-05 17:53:14 +02:00
Ninosaurier	3ee26d1550	feat(poc): add stencil boilerplate for bar-chart component CI / lint-and-format (push) Failing after 34s Details CI / changeset-check (push) Successful in 24s Details CI / unit-tests (push) Successful in 30s Details CI / component-tests (push) Successful in 35s Details - Generated the bar chart component - Showing it in storybook - Added title as parameter for testing	2026-09-17 17:40:26 +02:00
Ninosaurier	47697eb744	Merge pull request 'Release/0.2.0' (#33 ) from release/0.2.0 into dev CI / lint-and-format (push) Successful in 30s Details CI / changeset-check (push) Successful in 30s Details CI / unit-tests (push) Successful in 36s Details CI / component-tests (push) Successful in 32s Details CI / lint-and-format (pull_request) Successful in 30s Details CI / changeset-check (pull_request) Successful in 27s Details CI / unit-tests (pull_request) Successful in 41s Details CI / component-tests (pull_request) Successful in 28s Details Reviewed-on: #33	2026-09-01 16:27:22 +00:00
Ninosaurier	19d7eaf763	chore(release): prepare 0.2.0 release CI / lint-and-format (push) Successful in 28s Details CI / changeset-check (push) Successful in 27s Details CI / unit-tests (push) Successful in 35s Details CI / component-tests (push) Successful in 23s Details CI / lint-and-format (pull_request) Successful in 31s Details CI / changeset-check (pull_request) Successful in 27s Details CI / unit-tests (pull_request) Successful in 32s Details CI / component-tests (pull_request) Successful in 29s Details	2026-09-01 18:16:49 +02:00
Ninosaurier	b8ba06f846	Update(package.json): Changeset set the wrong version	2026-09-01 18:08:02 +02:00
Ninosaurier	369370a55c	fix(adrs) Typo errors in headers of adrs	2026-09-01 17:06:57 +02:00
Ninosaurier	e6ea5a7b40	update(readme) Updated readme.md	2026-09-01 17:02:36 +02:00
Ninosaurier	f00b7c0ba9	update(docs) Updated the roadmap	2026-09-01 16:49:30 +02:00