Merge pull request 'Storybook/#8 set up' (#32) from storybook/#8-set-up into dev

Reviewed-on: #32

.gitea/workflows/quality-gate.yml

@@ -87,4 +87,4 @@ jobs:
 
       - name: Run component tests (Playwright)
         working-directory: packages/luna-charts
-        run: pnpm test:browser
+        run: pnpm test:browser --passWithNoTests

Dockerfile.test

@@ -18,4 +18,4 @@ WORKDIR /app/packages/luna-charts
 
 RUN pnpm add -D @rolldown/binding-linux-x64-gnu
 
-CMD ["pnpm", "test:browser"]
+CMD ["pnpm", "test:browser", "--", "--passWithNoTests"]

packages/luna-charts/src/components/my-component/my-component.cmp.test.tsx

@@ -1,37 +0,0 @@
-import { render, h, describe, it, expect } from '@stencil/vitest';
-import { runA11yChecks } from '../../testing/a11y';
-
-describe('my-component', () => {
-  it('renders', async () => {
-    const { root } = await render(<my-component></my-component>);
-    await expect(root).toEqualHtml(`
-      <my-component class="hydrated">
-        <mock:shadow-root>
-          <div>
-            Hello, World! I'm
-          </div>
-        </mock:shadow-root>
-      </my-component>
-    `);
-  });
-
-  it('has no accessibility violations', async () => {
-    const { root } = await render(<my-component></my-component>);
-
-    const results = await runA11yChecks(root);
-    expect(results).toHaveNoA11yViolations();
-  });
-
-  it('renders with values', async () => {
-    const { root } = await render(<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>);
-    await expect(root).toEqualHtml(`
-      <my-component class="hydrated">
-        <mock:shadow-root>
-          <div>
-            Hello, World! I'm Stencil 'Don't call me a framework' JS
-          </div>
-        </mock:shadow-root>
-      </my-component>
-    `);
-  });
-});

packages/luna-charts/src/components/my-component/my-component.css

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

packages/luna-charts/src/components/my-component/my-component.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@stencil/storybook-plugin';
-import { h } from '@stencil/core';
-import { MyComponent } from './my-component';
-
-const meta: Meta<MyComponent> = {
-  title: 'MyComponent',
-  component: MyComponent,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    first: { control: 'text' },
-    last: { control: 'text' },
-    middle: { control: 'text' },
-  },
-  args: { first: 'John', last: 'Doe', middle: 'Michael' },
-};
-
-export default meta;
-
-type Story = StoryObj<MyComponent>;
-
-export const Primary: Story = {
-  args: {
-    first: 'John',
-    last: 'Doe',
-    middle: 'Michael',
-  },
-  render: props => <my-component {...props} />,
-};
-
-/**
- * Storybook story without custom render function
- */
-export const Secondary: Story = {
-  args: {
-    first: 'Jane',
-    last: 'Smith',
-    middle: 'Marie',
-  },
-};

packages/luna-charts/src/components/my-component/my-component.tsx

@@ -1,32 +0,0 @@
-import { Component, Prop, h } from '@stencil/core';
-import { format } from '../../utils/utils';
-
-@Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css',
-  shadow: true,
-})
-export class MyComponent {
-  /**
-   * The first name
-   */
-  @Prop() first?: string;
-
-  /**
-   * The middle name
-   */
-  @Prop() middle?: string;
-
-  /**
-   * The last name
-   */
-  @Prop() last?: string;
-
-  private getText(): string {
-    return format(this.first, this.middle, this.last);
-  }
-
-  render() {
-    return <div>Hello, World! I'm {this.getText()}</div>;
-  }
-}

packages/luna-charts/src/components/my-component/readme.md

@@ -1,15 +0,0 @@
-# my-component
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property | Attribute | Description     | Type                  | Default     |
-| -------- | --------- | --------------- | --------------------- | ----------- |
-| `first`  | `first`   | The first name  | `string \| undefined` | `undefined` |
-| `last`   | `last`    | The last name   | `string \| undefined` | `undefined` |
-| `middle` | `middle`  | The middle name | `string \| undefined` | `undefined` |
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_