refactor: clean up internal and public components

apps/storybook/stories/orama-button.stories.tsx → apps/storybook/stories/internal/orama-button.stories.tsx

@@ -4,7 +4,7 @@ import { spread } from '@open-wc/lit-helpers'
 import { html } from 'lit-html'
 
 const meta: Meta<Components.OramaButton> = {
-  title: 'Internal/OramaButton',
+  title: 'Internal/Button',
   component: 'orama-button',
   argTypes: {
     variant: {
@@ -20,7 +20,7 @@ type Story = StoryObj<Components.OramaButton>
 
 const Template = (content: string) => (args) => html`<orama-button ${spread(args)}>${content}</orama-button>`
 
-export const OramaPrimaryButton: Story = {
+export const Primary: Story = {
   render: Template('Primary button'),
   args: {
     variant: 'primary',
@@ -29,7 +29,7 @@ export const OramaPrimaryButton: Story = {
   },
 }
 
-export const OramaSecondaryButton: Story = {
+export const Secondary: Story = {
   render: Template('Secondary button'),
   args: {
     variant: 'secondary',
@@ -38,7 +38,7 @@ export const OramaSecondaryButton: Story = {
   },
 }
 
-export const OramaIconButton: Story = {
+export const IconButton: Story = {
   render: Template('🤯'),
   args: {
     variant: 'icon',

apps/storybook/stories/orama-chat-assistent-message.stories.tsx → apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx

@@ -2,14 +2,14 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from 'ui-stencil'
 
 const meta: Meta<Components.OramaChatAssistentMessage> = {
-  title: 'Internal/OramaChat',
+  title: 'Internal/Chat',
   component: 'orama-chat-assistent-message',
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<Components.OramaChatAssistentMessage>
 
-export const OramaChatAssistentMessage: Story = {
+export const ChatAssistentMessage: Story = {
   args: {
     message: {
       role: 'assistant',

apps/storybook/stories/orama-chat-suggestion.stories.tsx → apps/storybook/stories/internal/orama-chat-suggestion.stories.tsx

@@ -3,15 +3,15 @@ import type { Components } from 'ui-stencil'
 import { fn } from '@storybook/test'
 
 const meta: Meta<Components.OramaChatSuggestions> = {
-  title: 'Internal/OramaChat',
+  title: 'Internal/Chat',
   component: 'orama-chat-suggestions',
 }
 
 export default meta
 
 type Story = StoryObj<Components.OramaChatSuggestions>
 
-export const OramaSuggestions: Story = {
+export const ChatSuggestions: Story = {
   args: {
     suggestions: ['How to get started?', 'What are the prices?', 'What is Orama?'],
     suggestionClicked: fn(),

apps/storybook/stories/orama-chat.stories.tsx → apps/storybook/stories/internal/orama-chat.stories.tsx

@@ -2,13 +2,13 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from 'ui-stencil'
 
 const meta: Meta<Components.OramaChat> = {
-  title: 'Internal/OramaChat',
+  title: 'Internal/Chat',
   component: 'orama-chat',
 }
 
 export default meta
 type Story = StoryObj<Components.OramaChat>
 
-export const OramaChat: Story = {
+export const Chat: Story = {
   args: {},
 }

apps/storybook/stories/orama-facets.stories.tsx → apps/storybook/stories/internal/orama-facets.stories.tsx

@@ -4,7 +4,7 @@ import type { Components } from 'ui-stencil'
 import { fn } from '@storybook/test'
 
 const meta: Meta<Components.OramaFacets> = {
-  title: 'Internal/OramaFacets',
+  title: 'Internal/Facets',
   component: 'orama-facets',
 }
 
@@ -13,7 +13,7 @@ export default meta
 type Story = StoryObj<Components.OramaFacets>
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
-export const OramaFacets: Story = {
+export const Facets: Story = {
   args: {
     facets: [
       { name: 'FacetOne', count: 200 },

apps/storybook/stories/orama-navigation-bar.stories.tsx → apps/storybook/stories/internal/orama-navigation-bar.stories.tsx

@@ -2,13 +2,13 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from 'ui-stencil'
 
 const meta: Meta<Components.OramaNavigationBar> = {
-  title: 'Internal/OramaNavigationBar',
+  title: 'Internal/NavigationBar',
   component: 'orama-navigation-bar',
 }
 
 export default meta
 type Story = StoryObj<Components.OramaNavigationBar>
 
-export const OramaNavigationBar: Story = {
+export const NavigationBar: Story = {
   args: {},
 }

apps/storybook/stories/orama-search-results.stories.tsx → apps/storybook/stories/internal/orama-search-results.stories.tsx

@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/html'
 import type { Components } from 'ui-stencil'
 
 const meta: Meta<Components.OramaSearchResults> = {
-  title: 'Internal/OramaSearchResults',
+  title: 'Internal/SearchResults',
   component: 'orama-search-results',
 }
 

apps/storybook/stories/orama-search.stories.tsx → apps/storybook/stories/internal/orama-search.stories.tsx

@@ -2,14 +2,14 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from 'ui-stencil'
 
 const meta: Meta<Components.OramaSearch> = {
-  title: 'Internal/OramaSearch',
+  title: 'Internal/Search',
   component: 'orama-search',
 }
 
 export default meta
 type Story = StoryObj<Components.OramaSearch>
 
 // TODO: Add controls for props
-export const OramaSearch: Story = {
+export const Search: Story = {
   args: {},
 }

apps/storybook/stories/orama-toggler.stories.tsx → apps/storybook/stories/internal/orama-toggler.stories.tsx

@@ -2,12 +2,12 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from 'ui-stencil'
 
 const meta: Meta<Components.OramaToggler> = {
-  title: 'Internal/OramaToggler',
+  title: 'Internal/Toggler',
   component: 'orama-toggler',
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<Components.OramaToggler>
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
-export const OramaToggler: Story = {}
+export const Toggler: Story = {}

apps/storybook/stories/search-box.stories.tsx → apps/storybook/stories/public/orama-search-box.stories.tsx

@@ -1,13 +1,10 @@
-import { spread } from '@open-wc/lit-helpers'
 import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from 'ui-stencil'
-import { html } from 'lit-html'
-import { DARK_THEME_BG, LIGTH_THEME_BG } from '../constants'
-type Story = StoryObj<Components.SearchBox>
+type Story = StoryObj<Components.OramaSearchBox>
 
-const meta: Meta<Components.SearchBox> = {
+const meta: Meta<Components.OramaSearchBox> = {
   title: 'Public/SearchBox',
-  component: 'search-box',
+  component: 'orama-search-box',
   argTypes: {
     colorScheme: {
       options: ['light', 'dark', 'system'],

apps/storybook/stories/public/orama-search-button.stories.tsx

@@ -0,0 +1,12 @@
+import type { StoryObj, Meta } from '@storybook/web-components'
+import type { Components } from 'ui-stencil'
+
+const meta: Meta<Components.OramaSearchButton> = {
+  title: 'Public/SearchButton',
+  component: 'orama-search-button',
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<Components.OramaSearchButton>
+
+export const SearchButton: Story = {}

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

@@ -18,9 +18,9 @@ export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTML
 export const OramaLogoIcon = /*@__PURE__*/createReactComponent<JSX.OramaLogoIcon, HTMLOramaLogoIconElement>('orama-logo-icon');
 export const OramaNavigationBar = /*@__PURE__*/createReactComponent<JSX.OramaNavigationBar, HTMLOramaNavigationBarElement>('orama-navigation-bar');
 export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HTMLOramaSearchElement>('orama-search');
+export const OramaSearchBox = /*@__PURE__*/createReactComponent<JSX.OramaSearchBox, HTMLOramaSearchBoxElement>('orama-search-box');
+export const OramaSearchButton = /*@__PURE__*/createReactComponent<JSX.OramaSearchButton, HTMLOramaSearchButtonElement>('orama-search-button');
 export const OramaSearchResults = /*@__PURE__*/createReactComponent<JSX.OramaSearchResults, HTMLOramaSearchResultsElement>('orama-search-results');
 export const OramaText = /*@__PURE__*/createReactComponent<JSX.OramaText, HTMLOramaTextElement>('orama-text');
 export const OramaTextarea = /*@__PURE__*/createReactComponent<JSX.OramaTextarea, HTMLOramaTextareaElement>('orama-textarea');
 export const OramaToggler = /*@__PURE__*/createReactComponent<JSX.OramaToggler, HTMLOramaTogglerElement>('orama-toggler');
-export const SearchBox = /*@__PURE__*/createReactComponent<JSX.SearchBox, HTMLSearchBoxElement>('search-box');
-export const SearchBoxToggler = /*@__PURE__*/createReactComponent<JSX.SearchBoxToggler, HTMLSearchBoxTogglerElement>('search-box-toggler');

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

@@ -69,6 +69,18 @@ export const OramaNavigationBar = /*@__PURE__*/ defineContainer<JSX.OramaNavigat
 export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama-search', undefined);
 
 
+export const OramaSearchBox = /*@__PURE__*/ defineContainer<JSX.OramaSearchBox>('orama-search-box', undefined, [
+  'themeConfig',
+  'colorScheme',
+  'facetProperty',
+  'open',
+  'resultMap'
+]);
+
+
+export const OramaSearchButton = /*@__PURE__*/ defineContainer<JSX.OramaSearchButton>('orama-search-button', undefined);
+
+
 export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchResults>('orama-search-results', undefined, [
   'sections',
   'searchTerm',
@@ -99,15 +111,3 @@ export const OramaToggler = /*@__PURE__*/ defineContainer<JSX.OramaToggler>('ora
   'performInitialAnimation'
 ]);
 
-
-export const SearchBox = /*@__PURE__*/ defineContainer<JSX.SearchBox>('search-box', undefined, [
-  'themeConfig',
-  'colorScheme',
-  'facetProperty',
-  'open',
-  'resultMap'
-]);
-
-
-export const SearchBoxToggler = /*@__PURE__*/ defineContainer<JSX.SearchBoxToggler>('search-box-toggler', undefined);
-