Merge pull request #135 from DragonFighter603/emailtype

Created email type and added it to storybook

Author: maximiliani

src/components/pid-component/pid-component.mdx

@@ -86,6 +86,7 @@ The component can render the following types of components:
 - PIDs (resolvable via [handle.net](handle.net))
 - ORCiDs (resolvable via [orcid.org](orcid.org))
 - URLs (starting with http:// or https://)
+- Emails (separated by comma)
 - Dates
 - Everything else is rendered as a simple string (aka. fallback).
 
@@ -103,6 +104,10 @@ You can easily add a new type by simply implementing the abstract class `Generic
 
 <Canvas of={PIDComponentStories.URL} />
 
+### Email
+
+<Canvas of={PIDComponentStories.Email} />
+
 ### Date
 
 <Canvas of={PIDComponentStories.Date} />

src/components/pid-component/pid-component.stories.ts

@@ -267,6 +267,19 @@ export const URL: Story = {
   },
 };
 
+export const Email: Story = {
+  args: {
+    value: 'someone@example.com',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<pid-component value='someone@example.com'></pid-component>`,
+      },
+    },
+  },
+};
+
 export const Fallback: Story = {
   args: {
     value: 'This is a fallback test',

src/utils/EmailType.tsx

@@ -0,0 +1,49 @@
+import {GenericIdentifierType} from './GenericIdentifierType';
+import {FunctionalComponent, h} from '@stencil/core';
+
+/**
+ * This class specifies a custom renderer for Email addresses.
+ * @extends GenericIdentifierType
+ */
+export class EmailType extends GenericIdentifierType {
+  getSettingsKey(): string {
+    return 'EmailType';
+  }
+
+  hasCorrectFormat(): boolean {
+    // const regex = /^((\(.*\))?(\w|-|\+|_|\.)+(\(.*\))?@((((\(.*\))?\w+(\(.*\))?\.)+(\(.*\))?\w+(\(.*\))?\w+)|(\[((IPv6:((\w+:+)+\w+))|(\d+\.)+\d+)\]))\s*(,+|$)\s*)+$/
+    const regex = /^(([\w\-\.]+@([\w-]+\.)+[\w-]{2,})(\s*,\s*)?)*$/gm;
+    return regex.test(this.value);
+  }
+
+  init(): Promise<void> {
+    return;
+  }
+
+  isResolvable(): boolean {
+    return false;
+  }
+
+  renderPreview(): FunctionalComponent<any> {
+    // mail icon from: https://heroicons.com/ (MIT license)
+    return (
+      <span class={"items-center"}>
+        {this.value.split(new RegExp(/\s*,\s*/)).filter(email => email.length > 0).map(email => {
+          return (
+            <a href={'mailto:' + email} target='_blank'
+               class={'items-center inline-flex font-mono text-sm text-blue-400 border border-slate-400 rounded-md px-1 py-0.5 mr-2'}>
+              <svg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 24 24'
+                   stroke-width='1' stroke='black' height='20px' class={'mr-1'}>
+                <path stroke-linecap='round' stroke-linejoin='round'
+                      d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/>
+              </svg>
+              <span class={'ml-2'}>
+                {email}
+              </span>
+            </a>
+          );
+        })}
+      </span>
+    );
+  }
+}

src/utils/Parser.ts

@@ -4,6 +4,7 @@ import { FallbackType } from './FallbackType';
 import { ORCIDType } from './ORCIDType';
 import { DateType } from './DateType';
 import { URLType } from './URLType';
+import { EmailType } from "./EmailType";
 
 /**
  * Class that handles the parsing of a given value and returns the best fitting component object
@@ -20,7 +21,7 @@ export class Parser {
       name: string;
       value: any;
     }[],
-  ) => GenericIdentifierType)[] = [DateType, ORCIDType, HandleType, URLType, FallbackType];
+  ) => GenericIdentifierType)[] = [DateType, ORCIDType, HandleType, EmailType, URLType, FallbackType];
 
   /**
    * Returns the priority of the best fitting component object for a given value (lower is better)

src/utils/URLType.tsx

@@ -7,7 +7,7 @@ import { FunctionalComponent, h } from '@stencil/core';
  */
 export class URLType extends GenericIdentifierType {
   getSettingsKey(): string {
-    return 'DateType';
+    return 'URLType';
   }
 
   hasCorrectFormat(): boolean {