@memori.ai/ui 1.0.0-alpha

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,46 @@
+import type { FC, JSX } from 'react'
+import React from 'react'
+import cx from 'classnames'
+
+import './Tooltip.css'
+
+export interface Props {
+  content: string | JSX.Element | React.ReactNode
+  className?: string
+  align?:
+    | 'left'
+    | 'right'
+    | 'topLeft'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomRight'
+  disabled?: boolean
+  children: React.ReactNode
+  visible?: boolean
+}
+
+const Tooltip: FC<Props> = ({
+  content,
+  className,
+  align = 'right',
+  disabled = false,
+  visible = false,
+  children,
+}) => (
+  <div
+    className={cx(
+      'memori-tooltip',
+      `memori-tooltip--align-${align}`,
+      className,
+      {
+        'memori-tooltip--disabled': disabled,
+        'memori-tooltip--visible': visible,
+      },
+    )}
+  >
+    <div className="memori-tooltip--content">{content}</div>
+    <div className="memori-tooltip--trigger">{children}</div>
+  </div>
+)
+
+export default Tooltip

package/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -0,0 +1,163 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Tooltip aligned left unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-left memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip aligned right unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip aligned top left unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topLeft memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip aligned top right unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topRight memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip disabled unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right memori-tooltip--disabled"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content but I am disabled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip visible unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right memori-tooltip--visible"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      Here is some tooltip content by default as I am controlled
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Tooltip with jsx content unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-right"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      <p>
+        Here we have some JSX, useful for
+        <a
+          href="https://memori.ai"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          links
+        </a>
+        , for example.
+      </p>
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      Hover me
+    </div>
+  </div>
+</div>
+`;

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,2 @@
+import Tooltip from './Tooltip'
+export { Tooltip }

package/src/components/definitions.stories.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import type { StoryObj, Meta } from '@storybook/react-vite'
+
+const ColorDisplay = ({ color }: { color: string }) => (
+  <div
+    style={{
+      marginTop: '1rem',
+    }}
+  >
+    <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+      --{color}
+    </dt>
+    <dd>
+      <div
+        className={`color-${color}`}
+        style={{
+          width: '100px',
+          height: '100px',
+          boxShadow: '0 0 0.5rem rgba(0, 0, 0, 0.1)',
+          borderRadius: '10px',
+          background: `var(--${color})`,
+        }}
+        title={color}
+      />
+    </dd>
+  </div>
+)
+
+const colors = [
+  'memori-primary',
+  'memori-primary-text',
+  'memori-inner-bg',
+  'memori-chat-bubble-bg',
+  'memori-text-color',
+  'memori-button-bg',
+  'memori-button-text',
+  'memori-button-border-color',
+]
+
+const variables = [
+  'memori-inner-content-pad',
+  'memori-button-padding',
+  'memori-drawer--width',
+  'memori-drawer--width--md',
+  'memori-drawer--width--lg',
+  'memori-modal--width',
+  'memori-modal--width--md',
+]
+
+const Definitions = () => (
+  <div>
+    <h2>Colors</h2>
+    <dl>
+      {colors.map(color => (
+        <ColorDisplay
+          key={color}
+          color={color}
+        />
+      ))}
+    </dl>
+    <h2>Others</h2>
+    <dl>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+          <p>--memori-button-box-shadow +</p>
+          <p>--memori-button-radius</p>
+        </dt>
+        <dd>
+          <div
+            style={{
+              boxShadow: 'var(--memori-button-box-shadow)',
+              border: '1px solid #f3f3f3',
+              width: '100px',
+              height: '100px',
+              borderRadius: 'var(--memori-button-radius)',
+            }}
+          />
+        </dd>
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}
+      >
+        <dt style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}>
+          --memori-blur-background
+        </dt>
+        <dd>
+          <div
+            style={{
+              backgroundColor: '#eee',
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'cover',
+              backgroundImage:
+                'url(https://aisuru.com/images/aisuru/og-image.png)',
+              filter: 'blur(var(--memori-blur-background, 0))',
+              width: '200px',
+              height: '100px',
+              borderRadius: '10px',
+            }}
+          />
+        </dd>
+      </div>
+    </dl>
+    <ul
+      style={{
+        padding: 0,
+        margin: 0,
+        listStyle: 'none',
+      }}
+    >
+      {variables.map(v => (
+        <li
+          key={v}
+          style={{
+            marginTop: '1rem',
+          }}
+        >
+          <p
+            style={{ minWidth: 250, fontSize: '12px', marginBottom: '0.5rem' }}
+          >
+            --{v}
+          </p>
+        </li>
+      ))}
+    </ul>
+  </div>
+)
+
+const meta = {
+  title: 'Definitions/CSS Variables',
+  component: Definitions,
+  // tags: ['autodocs'],
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof Definitions>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

package/src/i18n/I18nWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { I18nextProvider } from 'react-i18next'
+import i18n from './i18n'
+
+export interface Props {
+  children: React.ReactNode
+}
+
+const I18nWrapper = ({ children }: Props) => {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+}
+
+export default I18nWrapper

package/src/i18n/i18n.ts

@@ -0,0 +1,34 @@
+import { createInstance } from 'i18next'
+
+const resources = {
+  en: {
+    translation: [],
+  },
+  it: {
+    translation: [],
+  },
+  es: {
+    translation: [],
+  },
+  fr: {
+    translation: [],
+  },
+  de: {
+    translation: [],
+  },
+}
+
+const i18n = createInstance({
+  resources,
+  lng: 'en',
+  fallbackLng: 'it',
+  supportedLngs: ['en', 'it', 'fr', 'es', 'de'],
+  nonExplicitSupportedLngs: true,
+  interpolation: {
+    escapeValue: false,
+  },
+})
+
+i18n.init()
+
+export default i18n

package/src/icons/AI.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+const AI = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-label={title}
+  >
+    <g
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    >
+      <path
+        fillRule="evenodd"
+        d="M0 4a4 4 0 014-4h16a4 4 0 014 4v16a4 4 0 01-4 4H4a4 4 0 01-4-4zm4-2.4A2.4 2.4 0 001.6 4v16A2.4 2.4 0 004 22.4h16a2.4 2.4 0 002.4-2.4V4A2.4 2.4 0 0020 1.6z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fillRule="evenodd"
+        d="M9.715 8.442a.798.798 0 00-1.43 0l-3.2 6.4a.799.799 0 101.431.716l.579-1.158h3.811l.578 1.158a.8.8 0 001.431-.716zm.391 4.358L9 10.589 7.894 12.8z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fillRule="evenodd"
+        d="M17 8c.552 0 1 .358 1 .8v6.4c0 .442-.448.8-1 .8s-1-.358-1-.8V8.8c0-.442.448-.8 1-.8z"
+        clipRule="evenodd"
+      ></path>
+    </g>
+  </svg>
+)
+
+export default AI

package/src/icons/Alert.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const Alert = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Alert

package/src/icons/ArrowUp.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const ArrowUp = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M12 19V5M5 12l7-7 7 7"></path>
+  </svg>
+)
+
+export default ArrowUp

package/src/icons/Bug.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+const Bug = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M19 15V11.9375C19 9.76288 17.2371 8 15.0625 8H8.9375C6.76288 8 5 9.76288 5 11.9375V15C5 18.866 8.13401 22 12 22C15.866 22 19 18.866 19 15Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M16.5 8.5V7.5C16.5 5.01472 14.4853 3 12 3C9.51472 3 7.5 5.01472 7.5 7.5V8.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M19 14H22"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M5 14H2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M14.5 3.5L17 2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M9.5 3.5L7 2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M20.5 20.0002L18.5 19.2002"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M20.5 7.9998L18.5 8.7998"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M3.5 20.0002L5.5 19.2002"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M3.5 7.9998L5.5 8.7998"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12 21.5V15"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+export default Bug

package/src/icons/Chat.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const ChatRound = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    width="24"
+    height="24"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>
+)
+
+export default ChatRound

package/src/icons/ChevronDown.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+const ChevronDown = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    fill="#000000"
+    xmlns="http://www.w3.org/2000/svg"
+    width="800px"
+    height="800px"
+    viewBox="0 0 52 52"
+    enableBackground="new 0 0 52 52"
+    xmlSpace="preserve"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M47.6,17.8L27.1,38.5c-0.6,0.6-1.6,0.6-2.2,0L4.4,17.8c-0.6-0.6-0.6-1.6,0-2.2l2.2-2.2 c0.6-0.6,1.6-0.6,2.2,0l16.1,16.3c0.6,0.6,1.6,0.6,2.2,0l16.1-16.2c0.6-0.6,1.6-0.6,2.2,0l2.2,2.2C48.1,16.3,48.1,17.2,47.6,17.8z" />
+  </svg>
+)
+export default ChevronDown

package/src/icons/ChevronLeft.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const ChevronLeft = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M15 18L9 12 15 6"></path>
+  </svg>
+)
+
+export default ChevronLeft