fix: unsuported pnpm version of angular project / base scss tokens

TODO: Better define tookens values

apps/demo-react/src/App.tsx

@@ -1,5 +1,7 @@
 import './App.css'
-import { defineCustomElements } from 'ui-stencil-react'
+import { defineCustomElements, SearchBox } from 'ui-stencil-react'
+
+// import {} from 'ui-stencil-react'
 
 void defineCustomElements()
 
@@ -13,7 +15,9 @@ function App() {
 
         <section>
           <h2>Stencil Components</h2>
-          <div className="component-row">{/* <MyButton></MyButton> */}</div>
+          <div className="component-row">
+            <SearchBox theme={{ colors: { light: { primaryColor: 'red' }, dark: { primaryColor: '#fff' } } }} />
+          </div>
         </section>
       </main>
     </>

apps/storybook/stories/search-box.stories.tsx

@@ -0,0 +1,37 @@
+import type { StoryObj, Meta } from '@storybook/html'
+
+// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+const meta = {
+  title: 'SearchBox',
+  tags: ['autodocs']
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const Template = (props) => {
+  console.log(props)
+
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const element = document.createElement('search-box') as any
+  element.theme = props.theme
+
+  return element
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
+export const Button: Story = {
+  render: Template,
+  args: {
+    theme: {
+      colors: {
+        light: {
+          primaryColor: 'red'
+        },
+        dark: {
+          primaryColor: 'blue'
+        }
+      }
+    }
+  }
+}

biome.json

@@ -15,7 +15,7 @@
     "enabled": true,
     "rules": {
       "nursery": {
-        "noConsole": "error"
+        "noConsole": "off"
       },
       "recommended": true,
       "a11y": { "noAutofocus": "off" },

packages/ui-stencil-angular/package.json

@@ -32,6 +32,6 @@
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "ng-packagr": "^18.0.0",
-    "typescript": "^5.5.2"
+    "typescript": "^5.4.5"
   }
 }

packages/ui-stencil-angular/projects/component-library/src/lib/stencil-generated/components.ts

@@ -8,13 +8,14 @@ import { Components } from 'ui-stencil';
 
 
 @ProxyCmp({
+  inputs: ['color', 'theme']
 })
 @Component({
   selector: 'search-box',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['color', 'theme'],
 })
 export class SearchBox {
   protected el: HTMLElement;