feat(poc): add stencil boilerplate for bar-chart component

- Generated the bar chart component
- Showing it in storybook
- Added title as parameter for testing

packages/luna-charts/src/components/charts/bar-chart/bar-chart.css

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

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<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

@@ -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

@@ -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

@@ -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

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