Compare commits
2
Commits
main
..
3bb9c1f6fb
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3bb9c1f6fb | ||
|
|
4033aba10a |
@@ -0,0 +1,37 @@
|
|||||||
|
<!-- markdownlint-disable MD041 -->
|
||||||
|
## Goal
|
||||||
|
|
||||||
|
<!-- One sentence: what should this issue achieve? -->
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
<!-- Context and background: why is this issue necessary?
|
||||||
|
What is the current state, and what is missing or needs to be done? -->
|
||||||
|
|
||||||
|
## Steps to Reproduce
|
||||||
|
|
||||||
|
<!-- Only relevant for bugs — remove this section for tasks/features.
|
||||||
|
1. Go to '...'
|
||||||
|
2. Click on '...'
|
||||||
|
3. See error -->
|
||||||
|
|
||||||
|
## Expected Behaviour
|
||||||
|
|
||||||
|
<!-- Only relevant for bugs — what should have happened? -->
|
||||||
|
|
||||||
|
## Actual Behaviour
|
||||||
|
|
||||||
|
<!-- Only relevant for bugs — what happened instead? -->
|
||||||
|
|
||||||
|
## Tasks
|
||||||
|
|
||||||
|
- [ ] ...
|
||||||
|
- [ ] ...
|
||||||
|
- [ ] ...
|
||||||
|
- [ ] Update the related parts of the documentation
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
|
||||||
|
- ...
|
||||||
|
- ...
|
||||||
|
- ...
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<!-- markdownlint-disable MD041 -->
|
||||||
|
## Description
|
||||||
|
|
||||||
|
<!-- What does this PR change and why? -->
|
||||||
|
|
||||||
|
## Related Issue
|
||||||
|
|
||||||
|
<!-- Closes #... / Relates to #... -->
|
||||||
|
|
||||||
|
## Type of Change
|
||||||
|
|
||||||
|
- [ ] Bug fix
|
||||||
|
- [ ] New feature
|
||||||
|
- [ ] Refactoring (no functional changes)
|
||||||
|
- [ ] Documentation
|
||||||
|
- [ ] Tests
|
||||||
|
|
||||||
|
## Changes
|
||||||
|
|
||||||
|
- ...
|
||||||
|
- ...
|
||||||
|
- ...
|
||||||
|
|
||||||
|
## How Has This Been Tested?
|
||||||
|
|
||||||
|
<!-- Describe how you verified your changes (unit tests, manual testing, etc.) -->
|
||||||
|
|
||||||
|
## Checklist
|
||||||
|
|
||||||
|
- [ ] Code follows the project's style guidelines
|
||||||
|
- [ ] Self-review of the code has been performed
|
||||||
|
- [ ] Tests have been added/updated and pass locally
|
||||||
|
- [ ] Documentation has been updated where necessary
|
||||||
|
- [ ] No new warnings or errors introduced
|
||||||
+2
-1
@@ -2,5 +2,6 @@
|
|||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"semi": true,
|
"semi": true,
|
||||||
"trailingComma": "es5",
|
"trailingComma": "es5",
|
||||||
"printWidth": 100
|
"printWidth": 100,
|
||||||
|
"bracketSameLine": true
|
||||||
}
|
}
|
||||||
@@ -93,7 +93,6 @@ pnpm install
|
|||||||
| `pnpm run format` | Run the formatter to automatically fix code style issues |
|
| `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 test:browser` | Run browser tests (only works inside the `packages/luna-charts` directory) |
|
||||||
| `pnpm run storybook` | Start the storybook documentation |
|
| `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).
|
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).
|
||||||
|
|
||||||
|
|||||||
@@ -5,13 +5,22 @@ sidebar:
|
|||||||
order: 0
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
LUNA Charts is an open-source charting library built with a strong focus on **accessibility**, **developer experience**, and **long-term maintainability**.
|
LUNA Charts is an open-source charting library built with a strong focus on **accessibility**, **developer experience**, and
|
||||||
|
**long-term maintainability**.
|
||||||
|
|
||||||
The project was created because many existing charting libraries provide excellent visualizations, but often treat accessibility, architecture, and maintainability as secondary concerns.
|
The project was created because many existing charting libraries provide excellent visualizations but often
|
||||||
|
treat accessibility as a secondary concern. Furthermore, a lot of teams have a lack of accessibility awareness,
|
||||||
|
and accessibility features are often pushed to the end of the project.
|
||||||
|
|
||||||
LUNA Charts takes a different approach.
|
LUNA Charts takes a different approach.
|
||||||
|
|
||||||
Instead of starting with code, the project started with an **architecture-first process**. The entire foundation—including business goals, technical architecture, governance, and architectural decisions—was designed before implementation began.
|
Instead of focusing on becoming a big library with numerous chart-creation functions, this project concentrates
|
||||||
|
on ease of use and chart modification, with accessibility playing a major role throughout the entire development process.
|
||||||
|
LUNA-Charts is open-source software.
|
||||||
|
This guarantees that everyone can use and modify it. We want to make the world more accessible for everyone.
|
||||||
|
|
||||||
|
Furthermore, we focus on an **architecture-first process**. The entire foundation—including
|
||||||
|
business goals, technical architecture, governance, and architectural decisions—was designed before implementation began.
|
||||||
|
|
||||||
## Project Goals
|
## Project Goals
|
||||||
|
|
||||||
@@ -26,11 +35,9 @@ LUNA Charts aims to provide a charting library that is:
|
|||||||
|
|
||||||
## Current Project Status
|
## Current Project Status
|
||||||
|
|
||||||
The project is currently in the **Groundwork** phase.
|
The project is currently in the **First Proof of Concept (v0.3.0)** phase.
|
||||||
|
We validate the core technical and accessibility assumptions of the library through a first working implementation.
|
||||||
At this stage, the architecture, repository structure, development workflow, and governance model are being established before implementing the first chart components.
|
The goal is to prove that the chosen architecture actually works in practice before committing to a broader component set.
|
||||||
|
|
||||||
Although no production-ready charts are available yet, the project documentation already reflects the long-term vision and architectural direction.
|
|
||||||
|
|
||||||
## Learn More
|
## Learn More
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,8 @@ sidebar:
|
|||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
LUNA Charts follows a modular repository structure that separates the chart library from its documentation while keeping all project artifacts within a single repository.
|
LUNA Charts follows a modular repository structure that separates the chart library from its documentation while keeping
|
||||||
|
all project artifacts within a single repository.
|
||||||
|
|
||||||
```text
|
```text
|
||||||
luna-charts/
|
luna-charts/
|
||||||
@@ -51,31 +52,38 @@ It serves as the **Single Point of Truth (SPOT)** for:
|
|||||||
- Project governance
|
- Project governance
|
||||||
- User documentation
|
- User documentation
|
||||||
|
|
||||||
The documentation is rendered using **Starlight**, but the Markdown content remains the authoritative source.
|
The documentation is rendered using **Astro and Starlight**, but the Markdown content remains the authoritative source.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## examples/
|
## examples/
|
||||||
|
|
||||||
Example applications demonstrating how to integrate LUNA Charts with supported frontend frameworks will be added here in future iterations.
|
Example applications demonstrating how to integrate LUNA Charts with supported frontend frameworks
|
||||||
|
will be added here in future iterations.
|
||||||
|
|
||||||
Examples may include:
|
Examples may include:
|
||||||
|
|
||||||
- Vanilla JavaScript
|
|
||||||
- React
|
- React
|
||||||
- Angular
|
- Angular
|
||||||
- Vue
|
- Vue
|
||||||
|
|
||||||
|
Right now, we are working on version 0.3.0, implementing a first proof of concept.
|
||||||
|
The first Minimum Viable Product will be launched with version 1.0.0.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## .gitea/
|
||||||
|
|
||||||
|
- Gitea Actions
|
||||||
|
- Issue templates
|
||||||
|
- Pull request templates
|
||||||
|
- Community workflows
|
||||||
|
|
||||||
## .github/
|
## .github/
|
||||||
|
|
||||||
Contains project automation such as:
|
Contains project automation such as:
|
||||||
|
|
||||||
- GitHub Actions
|
- Code of Conduct
|
||||||
- Issue templates
|
|
||||||
- Pull request templates
|
|
||||||
- Community workflows
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -83,6 +91,7 @@ Contains project automation such as:
|
|||||||
|
|
||||||
LUNA Charts is maintained as a **pnpm workspace**.
|
LUNA Charts is maintained as a **pnpm workspace**.
|
||||||
|
|
||||||
This structure allows multiple packages and supporting projects to evolve together while sharing a consistent toolchain and development workflow.
|
This structure allows multiple packages and supporting projects to evolve together while sharing a consistent
|
||||||
|
toolchain and development workflow.
|
||||||
|
|
||||||
As the project grows, additional packages or tooling may be introduced without changing the overall repository organization.
|
As the project grows, additional packages or tooling may be introduced without changing the overall repository organization.
|
||||||
@@ -7,7 +7,9 @@ sidebar:
|
|||||||
|
|
||||||
LUNA Charts follows an **architecture-first** development approach.
|
LUNA Charts follows an **architecture-first** development approach.
|
||||||
|
|
||||||
Instead of implementing features immediately, the project establishes a solid architectural and organizational foundation before writing production code. This ensures long-term maintainability, consistent quality, and transparent decision-making.
|
Instead of implementing features immediately, the project establishes a solid architectural and organizational
|
||||||
|
foundation before writing production code. This ensures long-term maintainability, consistent quality, and
|
||||||
|
transparent decision-making.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -20,7 +22,7 @@ Instead of implementing features immediately, the project establishes a solid ar
|
|||||||
Completed work includes:
|
Completed work includes:
|
||||||
|
|
||||||
- **Repository structure:** Standardized layout for code, configurations, and assets.
|
- **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 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.
|
- **Architecture Decision Records (ADRs 1-5):** System established for transparent documentation of architectural decisions.
|
||||||
- **Project governance:** Defined roles, responsibilities, and decision-making processes.
|
- **Project governance:** Defined roles, responsibilities, and decision-making processes.
|
||||||
@@ -102,6 +104,5 @@ Future work may include:
|
|||||||
|
|
||||||
## Long-Term Vision
|
## Long-Term Vision
|
||||||
|
|
||||||
LUNA Charts aims to become an accessible, framework-independent charting library that combines modern Web Components with a transparent architecture and a sustainable open-source development model.
|
LUNA Charts aims to become an accessible, framework-independent charting library that combines modern Web Components with a
|
||||||
|
transparent architecture and a sustainable open-source development model.
|
||||||
Every milestone builds upon the architectural foundation established during the Groundwork phase.
|
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"docs": "pnpm --filter docs run dev",
|
"docs": "pnpm --filter docs run dev",
|
||||||
"lint": "pnpm --filter luna-charts run lint",
|
"lint": "pnpm --filter luna-charts run lint",
|
||||||
"stencil:dev": "pnpm --filter luna-charts exec stencil build --watch",
|
|
||||||
"format": "prettier --write .",
|
"format": "prettier --write .",
|
||||||
"format:check": "pnpm --filter luna-charts run format:check",
|
"format:check": "pnpm --filter luna-charts run format:check",
|
||||||
"changeset": "changeset",
|
"changeset": "changeset",
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"arrowParens": "avoid",
|
"arrowParens": "avoid",
|
||||||
"bracketSpacing": true,
|
"bracketSpacing": true,
|
||||||
|
"jsxBracketSameLine": false,
|
||||||
"jsxSingleQuote": false,
|
"jsxSingleQuote": false,
|
||||||
"quoteProps": "consistent",
|
"quoteProps": "consistent",
|
||||||
"printWidth": 180,
|
"printWidth": 180,
|
||||||
|
|||||||
@@ -1,45 +1,94 @@
|
|||||||
{
|
{
|
||||||
"timestamp": "2026-10-05T16:30:03",
|
"timestamp": "2026-08-01T23:02:04",
|
||||||
"compiler": {
|
"compiler": {
|
||||||
"name": "@stencil/core",
|
"name": "@stencil/core",
|
||||||
"version": "4.44.2",
|
"version": "4.43.5",
|
||||||
"typescriptVersion": "5.8.3"
|
"typescriptVersion": "5.8.3"
|
||||||
},
|
},
|
||||||
"components": [
|
"components": [
|
||||||
{
|
{
|
||||||
"filePath": "src/components/charts/bar-chart/bar-chart.tsx",
|
"filePath": "src/components/my-component/my-component.tsx",
|
||||||
"encapsulation": "shadow",
|
"encapsulation": "shadow",
|
||||||
"tag": "bar-chart",
|
"tag": "my-component",
|
||||||
"readme": "# bar-chart\n\n\n",
|
"readme": "# my-component\n\n\n",
|
||||||
"docs": "",
|
"docs": "",
|
||||||
"docsTags": [],
|
"docsTags": [],
|
||||||
"usage": {},
|
"usage": {},
|
||||||
"props": [
|
"props": [
|
||||||
{
|
{
|
||||||
"name": "title",
|
"name": "first",
|
||||||
"type": "string",
|
"type": "string | undefined",
|
||||||
"complexType": {
|
"complexType": {
|
||||||
"original": "string",
|
"original": "string",
|
||||||
"resolved": "string",
|
"resolved": "string | undefined",
|
||||||
"references": {}
|
"references": {}
|
||||||
},
|
},
|
||||||
"mutable": false,
|
"mutable": false,
|
||||||
"attr": "title",
|
"attr": "first",
|
||||||
"reflectToAttr": false,
|
"reflectToAttr": false,
|
||||||
"docs": "",
|
"docs": "The first name",
|
||||||
"docsTags": [
|
"docsTags": [],
|
||||||
{
|
|
||||||
"name": "default",
|
|
||||||
"text": "'Hello World'"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"default": "'Hello World'",
|
|
||||||
"values": [
|
"values": [
|
||||||
{
|
{
|
||||||
"type": "string"
|
"type": "string"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "undefined"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"optional": false,
|
"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,
|
||||||
"required": false,
|
"required": false,
|
||||||
"getter": false,
|
"getter": false,
|
||||||
"setter": false
|
"setter": false
|
||||||
@@ -49,12 +98,7 @@
|
|||||||
"events": [],
|
"events": [],
|
||||||
"listeners": [],
|
"listeners": [],
|
||||||
"styles": [],
|
"styles": [],
|
||||||
"slots": [
|
"slots": [],
|
||||||
{
|
|
||||||
"name": "",
|
|
||||||
"docs": "The default slot"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"parts": [],
|
"parts": [],
|
||||||
"states": [],
|
"states": [],
|
||||||
"dependents": [],
|
"dependents": [],
|
||||||
@@ -62,11 +106,5 @@
|
|||||||
"dependencyGraph": {}
|
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
+35
-17
@@ -5,46 +5,64 @@
|
|||||||
*/
|
*/
|
||||||
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
||||||
export namespace Components {
|
export namespace Components {
|
||||||
interface BarChart {
|
interface MyComponent {
|
||||||
/**
|
/**
|
||||||
* @default 'Hello World'
|
* The first name
|
||||||
*/
|
*/
|
||||||
title: string;
|
first?: string;
|
||||||
|
/**
|
||||||
|
* The last name
|
||||||
|
*/
|
||||||
|
last?: string;
|
||||||
|
/**
|
||||||
|
* The middle name
|
||||||
|
*/
|
||||||
|
middle?: string;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLBarChartElement extends Components.BarChart, HTMLStencilElement {}
|
interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {}
|
||||||
var HTMLBarChartElement: {
|
var HTMLMyComponentElement: {
|
||||||
prototype: HTMLBarChartElement;
|
prototype: HTMLMyComponentElement;
|
||||||
new (): HTMLBarChartElement;
|
new (): HTMLMyComponentElement;
|
||||||
};
|
};
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'bar-chart': HTMLBarChartElement;
|
'my-component': HTMLMyComponentElement;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
declare namespace LocalJSX {
|
declare namespace LocalJSX {
|
||||||
interface BarChart {
|
interface MyComponent {
|
||||||
/**
|
/**
|
||||||
* @default 'Hello World'
|
* The first name
|
||||||
*/
|
*/
|
||||||
title?: string;
|
first?: string;
|
||||||
|
/**
|
||||||
|
* The last name
|
||||||
|
*/
|
||||||
|
last?: string;
|
||||||
|
/**
|
||||||
|
* The middle name
|
||||||
|
*/
|
||||||
|
middle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface BarChartAttributes {
|
interface MyComponentAttributes {
|
||||||
title: string;
|
first: string;
|
||||||
|
middle: string;
|
||||||
|
last: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IntrinsicElements {
|
interface IntrinsicElements {
|
||||||
'bar-chart': Omit<BarChart, keyof BarChartAttributes> & { [K in keyof BarChart & keyof BarChartAttributes]?: BarChart[K] } & {
|
'my-component': Omit<MyComponent, keyof MyComponentAttributes> & { [K in keyof MyComponent & keyof MyComponentAttributes]?: MyComponent[K] } & {
|
||||||
[K in keyof BarChart & keyof BarChartAttributes as `attr:${K}`]?: BarChartAttributes[K];
|
[K in keyof MyComponent & keyof MyComponentAttributes as `attr:${K}`]?: MyComponentAttributes[K];
|
||||||
} & { [K in keyof BarChart & keyof BarChartAttributes as `prop:${K}`]?: BarChart[K] };
|
} & { [K in keyof MyComponent & keyof MyComponentAttributes as `prop:${K}`]?: MyComponent[K] };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export { LocalJSX as JSX };
|
export { LocalJSX as JSX };
|
||||||
declare module '@stencil/core' {
|
declare module '@stencil/core' {
|
||||||
export namespace JSX {
|
export namespace JSX {
|
||||||
interface IntrinsicElements {
|
interface IntrinsicElements {
|
||||||
'bar-chart': LocalJSX.IntrinsicElements['bar-chart'] & JSXBase.HTMLAttributes<HTMLBarChartElement>;
|
'my-component': LocalJSX.IntrinsicElements['my-component'] & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
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: {},
|
|
||||||
};
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
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');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
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,6 +12,9 @@ export const config: Config = {
|
|||||||
customElementsExportBehavior: 'auto-define-custom-elements',
|
customElementsExportBehavior: 'auto-define-custom-elements',
|
||||||
externalRuntime: false,
|
externalRuntime: false,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'docs-readme',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'www',
|
type: 'www',
|
||||||
serviceWorker: null, // disable service workers
|
serviceWorker: null, // disable service workers
|
||||||
|
|||||||
Reference in New Issue
Block a user