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(` + + + + + + `); + }); +});