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/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", 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.json b/packages/luna-charts/custom-elements.json index d20ef26..728a56e 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-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" + } + } } diff --git a/packages/luna-charts/src/components.d.ts b/packages/luna-charts/src/components.d.ts index 3b2e246..6a9c473 100644 --- a/packages/luna-charts/src/components.d.ts +++ b/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; - /** - * 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 & { [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 & { [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; + '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..7157b8f --- /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: {}, +}; 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..a701345 --- /dev/null +++ b/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 ( + + {this.title} + + ); + } +} 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..0b3f849 --- /dev/null +++ b/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: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + `); + }); +}); 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