@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/Snippet/Snippet.stories.tsx

@@ -1,286 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import Snippet from './Snippet';
-import { prismSyntaxLangs } from '../../helpers/constants';
-
-import './Snippet.css';
-
-const SnippetCode = `import type { Medium } from 'types';
-import { prismSyntaxLangs } from 'helpers/constants';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
-import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss';
-import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
-import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
-import cpp from 'react-syntax-highlighter/dist/cjs/languages/prism/cpp';
-
-interface Props {
-  medium: Medium;
-  preview?: boolean;
-}
-
-// These have to match prismSyntaxLangs
-SyntaxHighlighter.registerLanguage('tsx', tsx);
-SyntaxHighlighter.registerLanguage('scss', scss);
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('cpp', cpp);
-
-const Snippet = ({ medium, preview = false }: Props) => {
-  return (
-    <SyntaxHighlighter
-      style={atomDark}
-      showLineNumbers
-      language={
-        prismSyntaxLangs.find(
-          (l) =>
-            medium.mimeType === l.mimeType,
-        )?.lang ?? 'text'
-      }
-    >
-      {medium.content?.length && medium.content.length > 200 && preview
-        ? \`\${medium.content.slice(0, 200)}\\n...\`
-        : \`\${medium.content}\`}
-    </SyntaxHighlighter>
-  );
-};
-
-export default Snippet;
-`;
-
-const meta: Meta = {
-  title: 'Snippet',
-  component: Snippet,
-  argTypes: {
-    mimeType: {
-      control: {
-        type: 'select',
-        options: prismSyntaxLangs.map(l => l.mimeType),
-      },
-    },
-    content: {
-      control: {
-        type: 'text',
-      },
-    },
-    preview: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<{
-  mimeType: string;
-  content: string;
-  preview?: boolean;
-}> = args => (
-  <I18nWrapper>
-    <Snippet
-      {...args}
-      medium={{
-        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-        mimeType: args.mimeType,
-        title: 'Snippet',
-        content: args.content,
-      }}
-    />
-  </I18nWrapper>
-);
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  mimeType: 'text/plain',
-  content: 'Some text',
-  preview: false,
-};
-
-export const WithoutCopyButton = Template.bind({});
-WithoutCopyButton.args = {
-  mimeType: 'text/plain',
-  content: 'Some text',
-  preview: false,
-  showCopyButton: false,
-};
-
-export const JavaScript = Template.bind({});
-JavaScript.args = {
-  mimeType: 'text/javascript',
-  content: "console.log('Hello World!');",
-  preview: false,
-};
-
-export const JSXReact = Template.bind({});
-JSXReact.args = {
-  mimeType: 'text/javascript',
-  content: SnippetCode,
-  preview: false,
-};
-
-export const Preview = Template.bind({});
-Preview.args = {
-  mimeType: 'text/javascript',
-  content: SnippetCode,
-  preview: true,
-};
-
-export const CSS = Template.bind({});
-CSS.args = {
-  mimeType: 'text/css',
-  content: 'body {\n  background-color: #f00;\n}',
-  preview: false,
-};
-
-export const HTML = Template.bind({});
-HTML.args = {
-  mimeType: 'application/xml',
-  content:
-    '<!DOCTYPE html>\n<html>\n  <head>\n    <title>Page Title</title>\n  </head>\n  <body>\n    <h1>This is a Heading</h1>\n    <p>This is a paragraph.</p>\n  </body>\n</html>',
-  preview: false,
-};
-
-export const TypeScript = Template.bind({});
-TypeScript.args = {
-  mimeType: 'text/ecmascript',
-  content: `import type { Medium } from 'types';
-
-interface Props {
-  medium: Medium;
-  preview?: boolean;
-}
-
-const Snippet = ({ medium, preview = false }: Props) => (
-  <div>
-    <p>{medium.content}</p>
-  </div>
-);
-
-export default Snippet;
-  `,
-  preview: false,
-};
-
-export const JSON = Template.bind({});
-JSON.args = {
-  mimeType: 'application/json',
-  content: `{
-  "name": "John Doe",
-  "age": 43,
-  "city": "New York",
-  "items": [
-    {
-      "name": "Item 1",
-      "price": 10
-    },
-    {
-      "name": "Item 2",
-      "price": 20
-    }
-  ]
-}
-  `,
-  preview: false,
-};
-
-export const Python = Template.bind({});
-Python.args = {
-  mimeType: 'text/x-python',
-  content: `from plone import api
-
-def get_user():
-    return api.user.get_current()
-
-def get_homepage():
-    return api.portal.get_navigation_root(get_user())
-  `,
-  preview: false,
-};
-
-export const Bash = Template.bind({});
-Bash.args = {
-  mimeType: 'application/x-sh',
-  content: `#!/bin/bash
-
-echo "Hello World!"
-
-for i in {1..10}
-do
-  echo $i
-done
-  `,
-  preview: false,
-};
-
-export const CSharp = Template.bind({});
-CSharp.args = {
-  mimeType: 'text/x-c++src',
-  content: `using System;
-
-namespace HelloWorld
-{
-    class Hello
-    {
-        static void Main()
-        {
-            Console.WriteLine("Hello World!");
-            Console.WriteLine("Press any key to exit.");
-            Console.ReadKey();
-        }
-    }
-}
-  `,
-  preview: false,
-};
-
-export const PHP = Template.bind({});
-PHP.args = {
-  mimeType: 'application/x-php',
-  content: `$name = 'David';
-$limit = 1;
-// Prepare query
-$stmt = $mysqli->prepare('SELECT age, address FROM students WHERE name = ? LIMIT ?');
-// data types: i = integer, s = string, d = double, b = blog
-$stmt->bind_param('si', $name, $limit);
-// Execute query
-$stmt->execute();
-// Bind the result
-$stmt->bind_result($age, address);
-`,
-  preview: false,
-};
-
-export const SQL = Template.bind({});
-SQL.args = {
-  mimeType: 'text/x-sql',
-  content: `SELECT * FROM table;
-
-SELECT * FROM table WHERE id = 1;
-
-SELECT * FROM table WHERE id = 1 AND name = 'John';
-  `,
-  preview: false,
-};
-
-export const Ruby = Template.bind({});
-Ruby.args = {
-  mimeType: 'text/x-ruby',
-  content: `puts 'Hello World!'
-
-for i in 1..10
-  puts i
-end
-
-puts 'Bye!'
-  `,
-  preview: false,
-};

package/src/components/Snippet/Snippet.test.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Snippet from './Snippet';
-
-const SnippetCode = `
-import type { Medium } from 'types';
-import { prismSyntaxLangs } from 'helpers/constants';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
-import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss';
-import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
-import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
-import cpp from 'react-syntax-highlighter/dist/cjs/languages/prism/cpp';
-
-interface Props {
-  medium: Medium;
-  preview?: boolean;
-}
-
-// These have to match prismSyntaxLangs
-SyntaxHighlighter.registerLanguage('tsx', tsx);
-SyntaxHighlighter.registerLanguage('scss', scss);
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('cpp', cpp);
-
-const Snippet = ({ medium, preview = false }: Props) => {
-  return (
-    <SyntaxHighlighter
-      style={atomDark}
-      showLineNumbers
-      language={
-        prismSyntaxLangs.find(
-          (l) =>
-            medium.mimeType === l.mimeType,
-        )?.lang ?? 'text'
-      }
-    >
-      {medium.content?.length && medium.content.length > 200 && preview
-        ? \`\${medium.content.slice(0, 200)}\n...\`
-        : \`\${medium.content}\`}
-    </SyntaxHighlighter>
-  );
-};
-
-export default Snippet;
-`;
-
-it('renders SnippetUpload with js code', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-        mimeType: 'text/javascript',
-        title: 'Snippet',
-        content: 'console.log("Hello World!");',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with js code without line numbers', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-        mimeType: 'text/javascript',
-        title: 'Snippet',
-        content: 'console.log("Hello World!");',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with js code without copy button', () => {
-  const { container } = render(
-    <Snippet
-      showCopyButton={false}
-      medium={{
-        mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-        mimeType: 'text/javascript',
-        title: 'Snippet',
-        content: 'console.log("Hello World!");',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with react/tsx code', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: '4946dca4-7103-4400-b80d-94b77f9a4f0a',
-        mimeType: 'text/javascript',
-        title: 'Snippet',
-        content: SnippetCode,
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with preview mode (clamping)', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: '38dd29a5-cdf6-40f6-963a-8e42a7caaac1',
-        mimeType: 'text/javascript',
-        title: 'Snippet',
-        content: SnippetCode,
-      }}
-      preview
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with css code', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: 'a669fadb-12c0-469b-9b6c-34db22d371ca',
-        mimeType: 'text/css',
-        title: 'Snippet',
-        content: 'body {\n  background-color: #f00;\n}',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with html code', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247927',
-        mimeType: 'application/xml',
-        title: 'Snippet',
-        content: '<p>ciao</p>',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with text', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: '43ac43b8-e220-4111-b89d-c5bfe8b031e2',
-        mimeType: 'text/plain',
-        title: 'Snippet',
-        content: '<p>ciao</p>',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders SnippetUpload with text as fallback', () => {
-  const { container } = render(
-    <Snippet
-      medium={{
-        mediumID: 'cc8882fa-d7d5-435a-90a1-5c9f2a1bc918',
-        mimeType: 'text/awanagana',
-        title: 'Snippet',
-        content: '<p>ciao</p>',
-      }}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/Snippet/Snippet.tsx

@@ -1,148 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import Button from '../ui/Button';
-import Copy from '../icons/Copy';
-import { prismSyntaxLangs } from '../../helpers/constants';
-import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
-import { stripDocumentAttachmentTags, stripOutputTags } from '../../helpers/utils';
-
-export interface Props {
-  medium: Medium;
-  className?: string;
-  preview?: boolean;
-  showCopyButton?: boolean;
-}
-
-const loadPrismScripts = (): Promise<void> => {
-  return new Promise((resolve) => {
-    const existingScript = document.getElementById('memori-prism-script');
-    if (existingScript) {
-      resolve();
-      return;
-    }
-
-    const script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js';
-    script.async = true;
-    script.id = 'memori-prism-script';
-    script.onload = () => {
-      // Load autoloader after main Prism script is loaded
-      const autoloaderScript = document.createElement('script');
-      autoloaderScript.src =
-        'https://cdn.jsdelivr.net/npm/prismjs@v1.29.0/plugins/autoloader/prism-autoloader.min.js';
-      autoloaderScript.async = true;
-      autoloaderScript.id = 'memori-prism-autoloader-script';
-      autoloaderScript.onload = () => {
-        // Configure autoloader to use the same CDN
-        // @ts-ignore
-        // eslint-disable-next-line no-undef
-        if (window.Prism && window.Prism.plugins && window.Prism.plugins.autoloader) {
-          // @ts-ignore
-          // eslint-disable-next-line no-undef
-          window.Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/';
-        }
-        resolve();
-      };
-      document.head.appendChild(autoloaderScript);
-    };
-
-    const prismCss = document.createElement('link');
-    prismCss.rel = 'stylesheet';
-    prismCss.href =
-      'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css';
-
-    document.head.appendChild(prismCss);
-    document.head.appendChild(script);
-  });
-};
-
-const Snippet = ({
-  medium,
-  className,
-  preview = false,
-  showCopyButton = true,
-}: Props) => {
-  const { t } = useTranslation();
-  const [copied, setCopied] = useState(false);
-
-  const highlightCode = () => {
-    // @ts-ignore
-    // eslint-disable-next-line no-undef
-    if ('Prism' in window && window.Prism.highlightAll) {
-      // Small delay to ensure DOM is updated
-      setTimeout(() => {
-        // @ts-ignore
-        // eslint-disable-next-line no-undef
-        Prism.highlightAll();
-      }, 100);
-    }
-  };
-
-  useEffect(() => {
-    loadPrismScripts().then(() => {
-      highlightCode();
-    });
-  }, []);
-
-  useEffect(() => {
-    highlightCode();
-  }, [medium.content, medium.mimeType]);
-
-  const handleCopy = async () => {
-    const contentToCopy = stripDocumentAttachmentTags(medium.content ?? '');
-    try {
-      await navigator.clipboard.writeText(contentToCopy);
-      setCopied(true);
-      setTimeout(() => {
-        setCopied(false);
-      }, 2000);
-    } catch (error) {
-      console.error('Failed to copy text:', error);
-    }
-  };
-
-  return (
-    <div className={cx('memori-snippet', { 'memori-snippet--preview': preview })}>
-      <div className="memori-snippet--content">
-        <pre
-          className={cx('line-numbers', className)}
-          aria-labelledby={
-            !!medium.title?.length ? `#snippet-${medium.mediumID}` : undefined
-          }
-        >
-          <code
-            className={`language-${
-              prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)
-                ?.lang ?? 'text'
-            }`}
-            data-language={
-              prismSyntaxLangs.find(l => medium.mimeType === l.mimeType)
-                ?.lang ?? 'text'
-            }
-          >
-            {stripDocumentAttachmentTags(medium.content ?? '')}
-          </code>
-        </pre>
-
-        {showCopyButton && (
-          <div className="memori-snippet--copy-wrapper">
-            {copied && (
-              <span className="memori-snippet--copied-text">{t('copied') || 'Copied!'}</span>
-            )}
-            <Button
-              padded={false}
-              ghost
-              className="memori-snippet--copy-button"
-              title={t('copy') || 'Copy'}
-              icon={<Copy />}
-              onClick={handleCopy}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Snippet;