🎅 Initial implementation

.github/workflows/main.yml

@@ -0,0 +1,17 @@
+on:
+    - push
+    - pull_request
+
+jobs:
+    install:
+      runs-on: ubuntu-latest
+      steps:      
+        - uses: actions/checkout@v3
+        - uses: actions/setup-node@v3
+          with:
+            version: 20
+        - uses: pnpm/action-setup@v2
+          with:
+            version: 8
+        - run: pnpm install
+        - run: pnpm run test

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+    '@storybook/addon-designs',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/html-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,28 @@
+import { Preview, HtmlRenderer}  from '@storybook/html';
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { defineCustomElements } from '../loader';
+
+defineCustomElements();
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+  withThemeByClassName<HtmlRenderer>({
+    themes: {
+      light: "",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+  }),
+ ]
+};
+
+export default preview;

package.json

@@ -20,20 +20,41 @@
   ],
   "scripts": {
     "build": "stencil build",
+    "watch": "stencil build --watch",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate"
+    "generate": "stencil generate",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@stencil/core": "^4.7.0"
+    "@stencil/core": "^4.7.0",
+    "typescript": "^5.3.3"
   },
   "devDependencies": {
+    "@ionic/core": "^7.6.5",
+    "@stencil/sass": "^3.0.8",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-themes": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/html": "^7.6.10",
+    "@storybook/html-vite": "^7.6.10",
+    "@storybook/test": "^7.6.10",
     "@types/jest": "^29.5.6",
-    "@types/node": "^16.18.11",
+    "@types/node": "^20.11.5",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "puppeteer": "21.1.1"
+    "puppeteer": "21.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "stencil-tailwind-plugin": "^1.8.0",
+    "storybook": "^7.6.10",
+    "tailwindcss": "^3.4.1"
   },
   "license": "MIT"
 }