Author SHA1 Message Date
Ninosaurier 3bb9c1f6fb chore(Doc): Updated Getting started Section
CI / lint-and-format (push) Successful in 33s
CI / changeset-check (push) Successful in 37s
CI / unit-tests (push) Successful in 33s
CI / component-tests (push) Successful in 29s
- Fixed some typos
- Updated the roadmap and project structure
2026-09-04 11:17:44 +02:00
Ninosaurier 4033aba10a chore(.gitea): Added Templates for issues and PRs 2026-09-04 11:16:11 +02:00
17 changed files with 220 additions and 149 deletions
+37
View File
@@ -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
- ...
- ...
- ...
+34
View File
@@ -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
View File
@@ -2,5 +2,6 @@
"singleQuote": true, "singleQuote": true,
"semi": true, "semi": true,
"trailingComma": "es5", "trailingComma": "es5",
"printWidth": 100 "printWidth": 100,
"bracketSameLine": true
} }
-1
View File
@@ -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.
-1
View File
@@ -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
View File
@@ -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,
+69 -31
View File
@@ -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
View File
@@ -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>
`);
});
});
+3
View File
@@ -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