chore: update stories with string templates

apps/storybook/.storybook/preview.js

@@ -1,21 +1,12 @@
 import { defineCustomElements } from "./../../../packages/ui-stencil/loader";
-// TODO: import orama-ui from the package
-import "./../../../packages/ui-stencil/dist/orama-ui/orama-ui.css";
+import "ui-stencil/dist/orama-ui/orama-ui.css";
 
 defineCustomElements();
 
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   tags: ["autodocs"],
-  // wrap story in a div with id="orama-ui" 
-  decorators: [
-    (story) => {
-      const decorator = document.createElement('div');
-      decorator.id = 'orama-ui';
-      decorator.appendChild(story());
-      return decorator;
-    }
-  ],
+  decorators: [(story) => `<div id="orama-ui">${story()}</div>`],
   parameters: {
     controls: {
       matchers: {

apps/storybook/package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1",
+    "@stencil/core": "^4.19.0",
     "@storybook/addon-a11y": "^8.1.11",
     "@storybook/addon-designs": "^8.0.2",
     "@storybook/addon-essentials": "^8.1.11",

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

@@ -1,21 +1,15 @@
-import type { StoryObj, Meta } from '@storybook/web-components'
+import type { StoryObj, Meta } from '@storybook/html'
 
 const meta: Meta = {
   title: 'Public/SearchBox',
   component: 'search-box',
-}
+} 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
+const Template = (args) => {
+  return `<search-box theme-config='${JSON.stringify(args.theme)}'></search-box>`
 }
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args

apps/storybook/stories/typography.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryObj, Meta } from "@storybook/html";
+import { ParagraphProps } from "ui-stencil";
+
+const meta = {
+  title: "Internal/Typography",
+  tags: ["autodocs"],
+
+  argTypes: {
+    as: {
+      control: { type: "select" },
+      options: ["p", "h1", "h2", "h3", "h4", "h5", "h6", "span", "small"],
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const Template = (content: string) => (args: ParagraphProps) => `<orama-paragraph {...args}>${content}</orama-paragraph>`;
+
+export const Paragraph: Story = {
+  render: Template("This is a paragraph"),
+  args: {
+    as: "p",
+  },
+};

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

@@ -8,15 +8,16 @@ import { Components } from 'orama-ui';
 
 
 @ProxyCmp({
+  inputs: ['as']
 })
 @Component({
-  selector: 'orama-p',
+  selector: 'orama-paragraph',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['as'],
 })
-export class OramaP {
+export class OramaParagraph {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -25,7 +26,7 @@ export class OramaP {
 }
 
 
-export declare interface OramaP extends Components.OramaP {}
+export declare interface OramaParagraph extends Components.OramaParagraph {}
 
 
 @ProxyCmp({

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

@@ -2,6 +2,6 @@
 import * as d from './components';
 
 export const DIRECTIVES = [
-  d.OramaP,
+  d.OramaParagraph,
   d.SearchBox
 ];

packages/ui-stencil-react/src/components/stencil-generated/index.ts

@@ -7,5 +7,5 @@ import type { JSX } from 'orama-ui';
 
 
 
-export const OramaP = /*@__PURE__*/createReactComponent<JSX.OramaP, HTMLOramaPElement>('orama-p');
+export const OramaParagraph = /*@__PURE__*/createReactComponent<JSX.OramaParagraph, HTMLOramaParagraphElement>('orama-paragraph');
 export const SearchBox = /*@__PURE__*/createReactComponent<JSX.SearchBox, HTMLSearchBoxElement>('search-box');

packages/ui-stencil-vue/lib/components.ts

@@ -8,7 +8,9 @@ import type { JSX } from 'orama-ui';
 
 
 
-export const OramaP = /*@__PURE__*/ defineContainer<JSX.OramaP>('orama-p', undefined);
+export const OramaParagraph = /*@__PURE__*/ defineContainer<JSX.OramaParagraph>('orama-paragraph', undefined, [
+  'as'
+]);
 
 
 export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-box', undefined, [

packages/ui-stencil/src/components.d.ts

@@ -6,19 +6,20 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
-    interface OramaP {
+    interface OramaParagraph {
+        "as"?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     }
     interface SearchBox {
         "color": 'dark' | 'light' | 'system';
         "themeConfig": { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
     }
 }
 declare global {
-    interface HTMLOramaPElement extends Components.OramaP, HTMLStencilElement {
+    interface HTMLOramaParagraphElement extends Components.OramaParagraph, HTMLStencilElement {
     }
-    var HTMLOramaPElement: {
-        prototype: HTMLOramaPElement;
-        new (): HTMLOramaPElement;
+    var HTMLOramaParagraphElement: {
+        prototype: HTMLOramaParagraphElement;
+        new (): HTMLOramaParagraphElement;
     };
     interface HTMLSearchBoxElement extends Components.SearchBox, HTMLStencilElement {
     }
@@ -27,27 +28,28 @@ declare global {
         new (): HTMLSearchBoxElement;
     };
     interface HTMLElementTagNameMap {
-        "orama-p": HTMLOramaPElement;
+        "orama-paragraph": HTMLOramaParagraphElement;
         "search-box": HTMLSearchBoxElement;
     }
 }
 declare namespace LocalJSX {
-    interface OramaP {
+    interface OramaParagraph {
+        "as"?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     }
     interface SearchBox {
         "color"?: 'dark' | 'light' | 'system';
         "themeConfig"?: { colors: { light: { primaryColor: string }; dark: { primaryColor: string } } };
     }
     interface IntrinsicElements {
-        "orama-p": OramaP;
+        "orama-paragraph": OramaParagraph;
         "search-box": SearchBox;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "orama-p": LocalJSX.OramaP & JSXBase.HTMLAttributes<HTMLOramaPElement>;
+            "orama-paragraph": LocalJSX.OramaParagraph & JSXBase.HTMLAttributes<HTMLOramaParagraphElement>;
             "search-box": LocalJSX.SearchBox & JSXBase.HTMLAttributes<HTMLSearchBoxElement>;
         }
     }

packages/ui-stencil/src/components/SearchBox/SearchBox.tsx

@@ -17,7 +17,7 @@ export class SearchBox {
       <Host>
         <style>{`:host { --primary-color: ${this.themeConfig?.colors?.light?.primaryColor}; }`}</style>
 
-        <div>This is the searchbox</div>
+        <orama-paragraph>This is the searchbox</orama-paragraph>
 
         <button type="button" class="btn">
           This is a button

packages/ui-stencil/src/components/SearchBox/readme.md

@@ -13,6 +13,19 @@
 | `themeConfig` | --        |             | `{ colors: { light: { primaryColor: string; }; dark: { primaryColor: string; }; }; }` | `undefined` |
 
 
+## Dependencies
+
+### Depends on
+
+- [orama-paragraph](../internal/Typography)
+
+### Graph
+```mermaid
+graph TD;
+  search-box --> orama-paragraph
+  style search-box fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/ui-stencil/src/components/internal/Typography/Paragraph.tsx

@@ -1,16 +1,22 @@
-import { Component, h } from '@stencil/core'
-
+import { Component, Prop, h } from '@stencil/core';
+export interface ParagraphProps {
+  as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
 @Component({
-  tag: 'orama-p',
+  tag: 'orama-paragraph',
   styleUrl: 'typography.scss',
-  shadow: false
 })
-export class Paragraph {
+
+export class Paragraph implements ParagraphProps {
+  @Prop() as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
   render() {
+    const Tag = this.as || 'p';
+
     return (
-      <p class='paragraph'>
-        <slot></slot>
-      </p>
-    )
+      <Tag class="paragraph">
+        <slot />
+      </Tag>
+    );
   }
 }

packages/ui-stencil/src/components/internal/Typography/readme.md

@@ -5,6 +5,26 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property | Attribute | Description | Type                                                            | Default     |
+| -------- | --------- | ----------- | --------------------------------------------------------------- | ----------- |
+| `as`     | `as`      |             | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span"` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [search-box](../../SearchBox)
+
+### Graph
+```mermaid
+graph TD;
+  search-box --> orama-paragraph
+  style orama-paragraph fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/ui-stencil/src/types/index.d.ts

@@ -1,4 +1,4 @@
-declare module "*.scss" {
-  const content: Record<string, string>;
-  export default content;
-}
+// declare module "*.scss" {
+//   const content: Record<string, string>;
+//   export default content;
+// }