@memori.ai/memori-react 1.0.0-alpha.1

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

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ShareButton aligned left unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button memori-share-button--align-left"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:ra:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ShareButton unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r0:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ShareButton with button not primary unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r6:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ShareButton with title unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r4:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ShareButton with url unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r2:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders ShareButton without qr code unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:r8:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;

package/src/components/Snippet/Snippet.css

@@ -0,0 +1,35 @@
+.memori-snippet--content {
+    position: relative;
+}
+
+button.memori-snippet--copy-button {
+    position: absolute;
+    top: 5px;
+    right: 2px;
+    bottom: 5px;
+    width: 30px !important;
+    height: calc(100% - 10px) !important;
+    padding: 0;
+    border-radius: 5px !important;
+    background: #333;
+}
+
+button.memori-snippet--copy-button:hover,
+button.memori-snippet--copy-button:focus {
+    background: #444;
+}
+
+button.memori-snippet--copy-button:active {
+    background: #666;
+}
+
+button.memori-snippet--copy-button svg {
+    color: #fff;
+}
+
+.memori-snippet--caption {
+    width: 100%;
+    margin-bottom: 1rem;
+    font-style: italic;
+    text-align: center;
+}

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

@@ -0,0 +1,273 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Snippet from './Snippet';
+import { prismSyntaxLangs } from '../../helpers/constants';
+
+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 => (
+  <Snippet
+    {...args}
+    medium={{
+      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
+      mimeType: args.mimeType,
+      title: 'Snippet',
+      content: args.content,
+    }}
+  />
+);
+
+// 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 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

@@ -0,0 +1,147 @@
+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 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();
+});