Ninosaurier/LUNA-Charts
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix/#42 add hot reload in storybook for stencil #43

Merged
Ninosaurier merged 3 commits from fix/#42-add-hot-reload-in-storybook-for-stencil into dev 2026-10-05 17:03:42 +00:00
Conversation 0 Commits 3 Files Changed 12
+165 -124
9 changed files with 165 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3ee26d1550 - Show all commits
packages/luna-charts/custom-elements.d.ts
Vendored
+4 -3
View File
@@ -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.
*/
packages/luna-charts/custom-elements.json
+24 -68
View File
@@ -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": [],
packages/luna-charts/src/components.d.ts
Vendored
+34 -52
View File
@@ -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<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] };
}
interface IntrinsicElements {
"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>;
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"bar-chart": LocalJSX.IntrinsicElements["bar-chart"] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
}
}
}
}
packages/luna-charts/src/components/charts/bar-chart/bar-chart.css
+3
View File
@@ -0,0 +1,3 @@
:host {
display: block;
}
packages/luna-charts/src/components/charts/bar-chart/bar-chart.stories.tsx
+24
View File
@@ -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
+19
View File
@@ -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 (
<Host>
<slot>{this.title}</slot>
</Host>
);
}
}
packages/luna-charts/src/components/charts/bar-chart/readme.md
+24
View File
@@ -0,0 +1,24 @@
# bar-chart
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ----------- | -------- | --------------- |
| `title` | `title` | | `string` | `"Hello World"` |
## Slots
| Slot | Description |
| ---- | ---------------- |
| | The default slot |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*
packages/luna-charts/src/components/charts/bar-chart/test/bar-chart.e2e.ts
+12
View File
@@ -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
+20
View File
@@ -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: `<bar-chart></bar-chart>`,
});
expect(page.root).toEqualHtml(`
<bar-chart>
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
</bar-chart>
`);
});
});