Merge pull request #18 from askorama/feature/orm-1533

Feature/ORM-1533

apps/storybook/.storybook/YourTheme.js

@@ -0,0 +1,29 @@
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'light',
+  brandTitle: 'Orama UI Components Library',
+  brandUrl: 'https://askorama.ai',
+  brandImage: 'https://website-assets.oramasearch.com/orama-when-light.svg',
+  brandTarget: '_self',
+  //
+  colorPrimary: '#151515',
+  colorSecondary: '#8152ee',
+
+  // UI
+  appBg: '#ffffff',
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#585C6D',
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: '#10162F',
+  textInverseColor: '#ffffff',
+
+  // Toolbar default and active colors
+  barTextColor: '#151515',
+  barSelectedColor: '#8152ee',
+  barHoverColor: '#432d77',
+  barBg: '#fbfbfb',
+})

apps/storybook/.storybook/main.ts

@@ -4,12 +4,13 @@ const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
   framework: '@storybook/web-components-vite',
-  staticDirs: [{ from: '../../../packages/ui-stencil/dist/orama-ui', to: '/assets' }],
+  staticDirs: ['../static', { from: '../../../packages/ui-stencil/dist/orama-ui', to: '/assets' }],
   docs: {},
   previewHead: (head) => `
    ${head}
-  <script type="module" src="assets/orama-ui.esm.js"></script>
-  <link rel="stylesheet" href="assets/orama-ui.css" />
+    <script type="module" src="assets/orama-ui.esm.js"></script>
+    <link rel="stylesheet" href="assets/orama-ui.css" />
+
   `,
 }
 export default config

apps/storybook/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import yourTheme from './YourTheme'
+
+addons.setConfig({
+  theme: yourTheme,
+})

apps/storybook/components/basics/basics.css

@@ -0,0 +1,15 @@
+.boxes {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 24px;
+  gap: 16px;
+}
+
+@media (min-width: 1024px) {
+  .boxes {
+    flex-wrap: wrap;
+  }
+  .box {
+    width: 30%;
+  }
+}

apps/storybook/components/basics/basics.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import './basics.css'
+
+export const Basics = () => (
+  <div className="boxes">
+    <div className="box">
+      <h3 className="box__title">Design tokens</h3>
+      <p className="box__description">
+        Named entities that store visual design properties. Used to ensure a scalable and consistent visual system for
+        UI development.
+      </p>
+      <a href="/">Design tokens</a>
+    </div>
+    <div className="box">
+      <h3 className="box__title">Components</h3>
+      <p className="box__description">
+        Reusable building blocks that can be used to create a UI. Independent, modular, and reusable.
+      </p>
+      <a href="/">Components library</a>
+    </div>
+    <div className="box">
+      <h3 className="box__title">Contributing</h3>
+      <p className="box__description">How to get started and contribute to Orama UI Kit development.</p>
+      <a href="https://github.com/askorama/orama-ui-components" target="_blank" rel="noopener noreferrer">
+        GitHub repository
+      </a>
+    </div>
+  </div>
+)

apps/storybook/constants.ts

@@ -1,2 +1,2 @@
 export const LIGTH_THEME_BG = '#fbfbfb'
-export const DARK_THEME_BG = '#050505'
+export const DARK_THEME_BG = '#212121'

apps/storybook/stories/Welcome.mdx

@@ -0,0 +1,16 @@
+import { Meta } from "@storybook/blocks"
+import { Basics } from "../components/basics/basics"
+
+<Meta title="Welcome" />
+
+<img src="/media/cover.png" alt="Cover" />
+
+Here you can find a collection of stories that showcase the Orama UI Kit components and patterns that make up the design system. Each story is a visual representation of a component or pattern, and includes the code needed to use it in your project.
+
+## Overview
+The Orama UI Kit is a collection of components and patterns that make up the design system. The components are designed to easily integrate search and chat functionality in your project. They are available as web components, React components, Vue components, and Angular components.
+
+{/* create 3 boxes, one for Foundations, another for Components, and another for Contributing */}
+<div class="boxes">
+  <Basics />
+</div>

apps/storybook/stories/design/colors.css

@@ -0,0 +1,32 @@
+.color-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.color-wrapper {
+  border: 1px solid #e0e0e0;
+  padding: 4px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  column-gap: 8px;
+}
+
+.color-block {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+.color-label {
+  font-size: 12px;
+  display: block;
+  color: var(--text-color-primary);
+}
+.color-value {
+  font-size: 12px;
+  color: var(--text-color-primary);
+}

apps/storybook/stories/design/colors.stories.tsx

@@ -0,0 +1,169 @@
+import { html } from 'lit-html'
+import type { Meta, StoryObj } from '@storybook/web-components'
+import colors from '@orama/wc-components/src/config/colors'
+import { DARK_THEME_BG } from '../../constants'
+import './colors.css'
+
+const primitiveColors = Object.keys(colors).reduce((acc, key) => {
+  if (typeof colors[key] === 'string') {
+    acc[key] = colors[key]
+  }
+  return acc
+}, {})
+
+const semanticColorKeys = ['--text', '--background', '--border', '--shadow', '--icon']
+
+const getSemanticColors = (theme) => {
+  return Object.keys(colors).reduce((acc, key) => {
+    if (typeof colors[key] !== 'object') {
+      return acc
+    }
+    if (key === theme) {
+      for (const colorKey of Object.keys(colors[key])) {
+        if (semanticColorKeys.some((semanticColorKey) => colorKey.startsWith(semanticColorKey))) {
+          acc[colorKey] = colors[key][colorKey]
+        }
+      }
+    }
+    return acc
+  }, {})
+}
+
+const getSingleSemanticColorsByTheme = (themeSemanticColors, semanticKey) => {
+  return Object.keys(themeSemanticColors).reduce((acc, key) => {
+    if (key.startsWith(semanticKey)) {
+      acc[key] = themeSemanticColors[key]
+    }
+    return acc
+  }, {})
+}
+
+const getElementsColors = (theme) => {
+  return Object.keys(colors).reduce((acc, key) => {
+    if (typeof colors[key] !== 'object') {
+      return acc
+    }
+    if (key === theme) {
+      for (const colorKey of Object.keys(colors[key])) {
+        if (!semanticColorKeys.some((semanticColorKey) => colorKey.startsWith(semanticColorKey))) {
+          acc[colorKey] = colors[key][colorKey]
+        }
+      }
+    }
+    return acc
+  }, {})
+}
+
+const renderPrimitiveBlock = (color, label) => html`
+  <div class="color-wrapper">
+    <div class="color-block" style="background-color: ${color}"></div>
+    <div>
+      <span class="color-label"><b>${label}</b></span>
+      <span class="color-value">${color}</span>
+    </div>
+  </div>
+`
+
+const renderColorBlock = (color, label) => html`
+  <div class="color-wrapper">
+    <div class="color-block" style="background-color: var(${label})"></div>
+    <div>
+      <span class="color-label"><b>${label}:</b> ${Object.entries(primitiveColors).find(([key, val]) => val === color)?.[0]}</span>
+      <span class="color-value">${color}</span>
+    </div>
+  </div>
+`
+
+const PrimitiveColors = () => {
+  return html`
+  <div style="padding: 20px; max-width: 1200px; margin: 0 auto; color: var(--text-color-primary)">
+    <section>
+      <h2>Primitive Colors</h2>
+      <p>These are the basic colors used throughout the design system. They serve as the foundation for creating more complex color schemes.</p>
+      <p>These colors are used to create the semantic and element colors. Avoid using these colors directly in the UI, unless you need an element to always have a specific color regardless of the theme.</p>
+      <div class="color-container">
+        ${Object.keys(primitiveColors).map((key) => renderPrimitiveBlock(primitiveColors[key], key))}
+      </div>
+    </section>
+  </div>
+`
+}
+
+const SemanticColors = (args, context) => {
+  const semanticColors = getSemanticColors(context.globals?.backgrounds?.value === DARK_THEME_BG ? 'dark' : 'light')
+  const textColors = getSingleSemanticColorsByTheme(semanticColors, '--text')
+  const backgroundColors = getSingleSemanticColorsByTheme(semanticColors, '--background')
+  const borderColors = getSingleSemanticColorsByTheme(semanticColors, '--border')
+  const shadowColors = getSingleSemanticColorsByTheme(semanticColors, '--shadow')
+  const iconColors = getSingleSemanticColorsByTheme(semanticColors, '--icon')
+
+  return html`
+  <div style="padding: 20px; max-width: 1200px; margin: 0 auto; color: var(--text-color-primary)">
+    <section>
+      <h2>Semantic Colors</h2>
+      <p>These colors convey specific meanings and are used to enhance
+      user experience by providing visual cues. For example, the background, text colors, borders, and shadows.</p>
+      <p>You must always use these colors instead of the primitive colors to ensure consistency across the application and to make it easier to switch between themes.</p>
+      <h3>Text colors</h3>
+      <div class="color-container">
+        ${Object.keys(textColors).map((key) => renderColorBlock(textColors[key], key))}
+      </div>
+      <h3>Background colors</h3>
+      <div class="color-container">
+        ${Object.keys(backgroundColors).map((key) => renderColorBlock(backgroundColors[key], key))}
+      </div>
+      <h3>Border colors</h3>
+      <div class="color-container">
+        ${Object.keys(borderColors).map((key) => renderColorBlock(borderColors[key], key))}
+      </div>
+      <h3>Shadow colors</h3>
+      <div class="color-container">
+        ${Object.keys(shadowColors).map((key) => renderColorBlock(shadowColors[key], key))}
+      </div>
+      <h3>Icon colors</h3>
+      <div class="color-container">
+        ${Object.keys(iconColors).map((key) => renderColorBlock(iconColors[key], key))}
+      </div>
+    </section>
+  </div>
+`
+}
+
+const ElementColors = (args, context) => {
+  const elementColors = getElementsColors(context.globals?.backgrounds?.value === DARK_THEME_BG ? 'dark' : 'light')
+
+  return html`
+  <div style="padding: 20px; max-width: 1200px; margin: 0 auto; color: var(--text-color-primary)">
+    <section>
+      <h2>Element Colors</h2>
+      <p>These colors are specific to UI elements like buttons, alerts, and other
+      components. They are derived from the primitive colors and ensure consistency across the application.</p>
+      <div class="color-container">
+        ${Object.keys(elementColors).map((key) => renderColorBlock(elementColors[key], key))}
+      </div>
+    </section>
+  </div>
+`
+}
+
+export default {
+  title: 'Design Tokens/Colors',
+  component: 'colors-story',
+} as Meta
+
+type Story = StoryObj
+
+export const Primitive: Story = {
+  render: PrimitiveColors.bind({}),
+  args: {},
+}
+
+export const Semantic: Story = {
+  render: SemanticColors.bind({}),
+  args: {},
+}
+
+export const Element: Story = {
+  render: ElementColors.bind({}),
+  args: {},
+}

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/Button',
+  title: 'Components/Internal/Button',
   component: 'orama-button',
   argTypes: {
     variant: {

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

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 import type { Components } from '@orama/wc-components'
 
 const meta: Meta<Components.OramaChatAssistentMessage> = {
-  title: 'Internal/Chat',
+  title: 'Components/Internal/Chat',
   component: 'orama-chat-assistent-message',
 } satisfies Meta
 

apps/storybook/stories/internal/orama-chat-messages-container.stories.tsx

@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
 
 const meta: Meta<Components.OramaChatMessagesContainer> = {
-  title: 'Internal/Chat',
+  title: 'Components/Internal/Chat',
   component: 'orama-chat-messages-container',
 } satisfies Meta
 

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

@@ -3,7 +3,7 @@ import type { Components } from '@orama/wc-components'
 import { fn } from '@storybook/test'
 
 const meta: Meta<Components.OramaChatSuggestions> = {
-  title: 'Internal/Chat',
+  title: 'Components/Internal/Chat',
   component: 'orama-chat-suggestions',
 }
 

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

@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
 
 const meta: Meta<Components.OramaChat> = {
-  title: 'Internal/Chat',
+  title: 'Components/Internal/Chat',
   component: 'orama-chat',
 }
 

apps/storybook/stories/internal/orama-dots-loader.stories.tsx

@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/web-components'
 import type { Components } from '@orama/wc-components'
 
 const meta: Meta<Components.OramaDotsLoader> = {
-  title: 'Internal/DotsLoader',
+  title: 'Components/Internal/DotsLoader',
   component: 'orama-dots-loader',
 }
 

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

@@ -4,7 +4,7 @@ import type { Components } from '@orama/wc-components'
 import { fn } from '@storybook/test'
 
 const meta: Meta<Components.OramaFacets> = {
-  title: 'Internal/Facets',
+  title: 'Components/Internal/Facets',
   component: 'orama-facets',
 }
 

apps/storybook/stories/internal/orama-input.stories.tsx

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 
 import type { Components } from '@orama/wc-components'
 const meta: Meta<Components.OramaInput> = {
-  title: 'Internal/Form',
+  title: 'Components/Internal/Form',
   component: 'orama-input',
   tags: ['autodocs'],
   argTypes: {