From 3ee26d1550a4541c18052b67dba65ecaa1efcd8c Mon Sep 17 00:00:00 2001 From: Ninosaurier Date: Thu, 17 Sep 2026 17:40:26 +0200 Subject: [PATCH 1/3] 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 | 7 +- packages/luna-charts/custom-elements.json | 94 +++++-------------- packages/luna-charts/src/components.d.ts | 86 +++++++---------- .../components/charts/bar-chart/bar-chart.css | 3 + .../charts/bar-chart/bar-chart.stories.tsx | 24 +++++ .../components/charts/bar-chart/bar-chart.tsx | 19 ++++ .../src/components/charts/bar-chart/readme.md | 24 +++++ .../charts/bar-chart/test/bar-chart.e2e.ts | 12 +++ .../charts/bar-chart/test/bar-chart.spec.tsx | 20 ++++ 9 files changed, 165 insertions(+), 124 deletions(-) create mode 100644 packages/luna-charts/src/components/charts/bar-chart/bar-chart.css create mode 100644 packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx create mode 100644 packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx create mode 100644 packages/luna-charts/src/components/charts/bar-chart/readme.md create mode 100644 packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.e2e.ts create mode 100644 packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx diff --git a/packages/luna-charts/custom-elements.d.ts b/packages/luna-charts/custom-elements.d.ts index b5bff8f..66d9c08 100644 --- a/packages/luna-charts/custom-elements.d.ts +++ b/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. */ diff --git a/packages/luna-charts/custom-elements.json b/packages/luna-charts/custom-elements.json index d20ef26..2d9bbc7 100644 --- a/packages/luna-charts/custom-elements.json +++ b/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", - "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": [], @@ -107,4 +63,4 @@ } ], "typeLibrary": {} -} +} \ No newline at end of file diff --git a/packages/luna-charts/src/components.d.ts b/packages/luna-charts/src/components.d.ts index 3b2e246..f809239 100644 --- a/packages/luna-charts/src/components.d.ts +++ b/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 { - /** - * The first name - */ - first?: string; - /** - * The last name - */ - last?: string; - /** - * The middle name - */ - middle?: string; - } + interface BarChart { + /** + * @default "Hello World" + */ + "title": string; + } } declare global { - interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {} - var HTMLMyComponentElement: { - prototype: HTMLMyComponentElement; - new (): HTMLMyComponentElement; - }; - interface HTMLElementTagNameMap { - 'my-component': HTMLMyComponentElement; - } + interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement { + } + var HTMLBarChartElement: { + prototype: HTMLBarChartElement; + new (): HTMLBarChartElement; + }; + interface HTMLElementTagNameMap { + "bar-chart": HTMLBarChartElement; + } } declare namespace LocalJSX { - interface MyComponent { - /** - * The first name - */ - first?: string; - /** - * The last name - */ - last?: string; - /** - * The middle name - */ - middle?: string; - } + interface BarChart { + /** + * @default "Hello World" + */ + "title"?: string; + } - interface MyComponentAttributes { - first: string; - middle: string; - last: string; - } + interface BarChartAttributes { + "title": string; + } - interface IntrinsicElements { - 'my-component': Omit & { [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] }; - } + interface IntrinsicElements { + "bar-chart": Omit & { [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; +declare module "@stencil/core" { + export namespace JSX { + interface IntrinsicElements { + "bar-chart": LocalJSX.IntrinsicElements["bar-chart"] & JSXBase.HTMLAttributes; + } } - } } diff --git a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.css b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.css new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx new file mode 100644 index 0000000..da9fd24 --- /dev/null +++ b/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 = { + title: 'BarChart', + component: BarChart, + parameters: { + layout: 'centered', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, + render: () => , +}; + +export const Secondary: Story = { + args: {}, +}; \ No newline at end of file diff --git a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx new file mode 100644 index 0000000..2f5a35f --- /dev/null +++ b/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 ( + + {this.title} + + ); + } +} diff --git a/packages/luna-charts/src/components/charts/bar-chart/readme.md b/packages/luna-charts/src/components/charts/bar-chart/readme.md new file mode 100644 index 0000000..3e12f78 --- /dev/null +++ b/packages/luna-charts/src/components/charts/bar-chart/readme.md @@ -0,0 +1,24 @@ +# bar-chart + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | --------------- | +| `title` | `title` | | `string` | `"Hello World"` | + + +## Slots + +| Slot | Description | +| ---- | ---------------- | +| | The default slot | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.e2e.ts b/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.e2e.ts new file mode 100644 index 0000000..6b96258 --- /dev/null +++ b/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(''); + + const element = await page.find('bar-chart'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx b/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx new file mode 100644 index 0000000..efa9ca2 --- /dev/null +++ b/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: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + `); + }); +}); -- 2.54.0 From 6804542e07d7763cd9c108503a762c12b48295eb Mon Sep 17 00:00:00 2001 From: Ninosaurier Date: Mon, 5 Oct 2026 17:53:14 +0200 Subject: [PATCH 2/3] fix(repo): Storybook detects changes and does a hot reload - 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" --- README.md | 1 + package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 080eaa8..706db3c 100644 --- a/README.md +++ b/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). diff --git a/package.json b/package.json index 6401557..07573a3 100644 --- a/package.json +++ b/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", -- 2.54.0 From 20a1f890300e08badc78f9ab07bc12f2f816c40b Mon Sep 17 00:00:00 2001 From: Ninosaurier Date: Mon, 5 Oct 2026 18:37:24 +0200 Subject: [PATCH 3/3] fix(format): Removed all prettier errors and changed stencil configuration - stencil does not generate a readme.md in every component. The option was disabled in the configuration - Fixed all prettier errors --- .prettierrc.json | 3 +- packages/luna-charts/.prettierrc.json | 1 - packages/luna-charts/custom-elements.d.ts | 7 +- packages/luna-charts/custom-elements.json | 16 +++-- packages/luna-charts/src/components.d.ts | 68 +++++++++---------- .../charts/bar-chart/bar-chart.stories.tsx | 4 +- .../components/charts/bar-chart/bar-chart.tsx | 3 +- .../src/components/charts/bar-chart/readme.md | 24 ------- .../charts/bar-chart/test/bar-chart.spec.tsx | 1 - packages/luna-charts/stencil.config.ts | 3 - 10 files changed, 52 insertions(+), 78 deletions(-) delete mode 100644 packages/luna-charts/src/components/charts/bar-chart/readme.md diff --git a/.prettierrc.json b/.prettierrc.json index 04f9b30..83311fa 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -2,6 +2,5 @@ "singleQuote": true, "semi": true, "trailingComma": "es5", - "printWidth": 100, - "bracketSameLine": true + "printWidth": 100 } \ No newline at end of file diff --git a/packages/luna-charts/.prettierrc.json b/packages/luna-charts/.prettierrc.json index 7ca3a28..86e01ee 100644 --- a/packages/luna-charts/.prettierrc.json +++ b/packages/luna-charts/.prettierrc.json @@ -1,7 +1,6 @@ { "arrowParens": "avoid", "bracketSpacing": true, - "jsxBracketSameLine": false, "jsxSingleQuote": false, "quoteProps": "consistent", "printWidth": 180, diff --git a/packages/luna-charts/custom-elements.d.ts b/packages/luna-charts/custom-elements.d.ts index 66d9c08..b5bff8f 100644 --- a/packages/luna-charts/custom-elements.d.ts +++ b/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. */ diff --git a/packages/luna-charts/custom-elements.json b/packages/luna-charts/custom-elements.json index 2d9bbc7..728a56e 100644 --- a/packages/luna-charts/custom-elements.json +++ b/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": {} -} \ No newline at end of file + "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" + } + } +} diff --git a/packages/luna-charts/src/components.d.ts b/packages/luna-charts/src/components.d.ts index f809239..6a9c473 100644 --- a/packages/luna-charts/src/components.d.ts +++ b/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" - */ - "title": string; - } + interface BarChart { + /** + * @default 'Hello World' + */ + title: string; + } } declare global { - interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement { - } - var HTMLBarChartElement: { - prototype: HTMLBarChartElement; - new (): HTMLBarChartElement; - }; - interface HTMLElementTagNameMap { - "bar-chart": HTMLBarChartElement; - } + interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {} + var HTMLBarChartElement: { + prototype: HTMLBarChartElement; + new (): HTMLBarChartElement; + }; + interface HTMLElementTagNameMap { + 'bar-chart': HTMLBarChartElement; + } } declare namespace LocalJSX { - interface BarChart { - /** - * @default "Hello World" - */ - "title"?: string; - } + interface BarChart { + /** + * @default 'Hello World' + */ + title?: string; + } - interface BarChartAttributes { - "title": string; - } + interface BarChartAttributes { + title: string; + } - interface IntrinsicElements { - "bar-chart": Omit & { [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] }; - } + interface IntrinsicElements { + 'bar-chart': Omit & { [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 { - "bar-chart": LocalJSX.IntrinsicElements["bar-chart"] & JSXBase.HTMLAttributes; - } +declare module '@stencil/core' { + export namespace JSX { + interface IntrinsicElements { + 'bar-chart': LocalJSX.IntrinsicElements['bar-chart'] & JSXBase.HTMLAttributes; } + } } diff --git a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx index da9fd24..7157b8f 100644 --- a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx +++ b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx @@ -16,9 +16,9 @@ type Story = StoryObj; export const Primary: Story = { args: {}, - render: () => , + render: () => , }; export const Secondary: Story = { args: {}, -}; \ No newline at end of file +}; diff --git a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx b/packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx index 2f5a35f..a701345 100644 --- a/packages/luna-charts/src/components/charts/bar-chart/bar-chart.tsx +++ b/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 ( diff --git a/packages/luna-charts/src/components/charts/bar-chart/readme.md b/packages/luna-charts/src/components/charts/bar-chart/readme.md deleted file mode 100644 index 3e12f78..0000000 --- a/packages/luna-charts/src/components/charts/bar-chart/readme.md +++ /dev/null @@ -1,24 +0,0 @@ -# bar-chart - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | -------- | --------------- | -| `title` | `title` | | `string` | `"Hello World"` | - - -## Slots - -| Slot | Description | -| ---- | ---------------- | -| | The default slot | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx b/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx index efa9ca2..0b3f849 100644 --- a/packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.spec.tsx +++ b/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({ diff --git a/packages/luna-charts/stencil.config.ts b/packages/luna-charts/stencil.config.ts index c78ce55..1b52999 100644 --- a/packages/luna-charts/stencil.config.ts +++ b/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 -- 2.54.0