@ebrains/react 0.9.1-beta → 0.9.2-beta

package/src/react-component-lib/utils/attachProps.ts

@@ -0,0 +1,125 @@
+import { camelToDashCase } from './case';
+
+export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
+  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+  if (node instanceof Element) {
+    // add any classes in className to the class list
+    const className = getClassName(node.classList, newProps, oldProps);
+    if (className !== '') {
+      node.className = className;
+    }
+
+    Object.keys(newProps).forEach((name) => {
+      if (
+        name === 'children' ||
+        name === 'style' ||
+        name === 'ref' ||
+        name === 'class' ||
+        name === 'className' ||
+        name === 'forwardedRef'
+      ) {
+        return;
+      }
+      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+        const eventName = name.substring(2);
+        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+
+        if (!isCoveredByReact(eventNameLc)) {
+          syncEvent(node, eventNameLc, newProps[name]);
+        }
+      } else {
+        (node as any)[name] = newProps[name];
+        const propType = typeof newProps[name];
+        if (propType === 'string') {
+          node.setAttribute(camelToDashCase(name), newProps[name]);
+        }
+      }
+    });
+  }
+};
+
+export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {
+  const newClassProp: string = newProps.className || newProps.class;
+  const oldClassProp: string = oldProps.className || oldProps.class;
+  // map the classes to Maps for performance
+  const currentClasses = arrayToMap(classList);
+  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+  const finalClassNames: string[] = [];
+  // loop through each of the current classes on the component
+  // to see if it should be a part of the classNames added
+  currentClasses.forEach((currentClass) => {
+    if (incomingPropClasses.has(currentClass)) {
+      // add it as its already included in classnames coming in from newProps
+      finalClassNames.push(currentClass);
+      incomingPropClasses.delete(currentClass);
+    } else if (!oldPropClasses.has(currentClass)) {
+      // add it as it has NOT been removed by user
+      finalClassNames.push(currentClass);
+    }
+  });
+  incomingPropClasses.forEach((s) => finalClassNames.push(s));
+  return finalClassNames.join(' ');
+};
+
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export const isCoveredByReact = (eventNameSuffix: string) => {
+  if (typeof document === 'undefined') {
+    return true;
+  } else {
+    const eventName = 'on' + transformReactEventName(eventNameSuffix);
+    let isSupported = eventName in document;
+
+    if (!isSupported) {
+      const element = document.createElement('div');
+      element.setAttribute(eventName, 'return;');
+      isSupported = typeof (element as any)[eventName] === 'function';
+    }
+
+    return isSupported;
+  }
+};
+
+export const syncEvent = (
+  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },
+  eventName: string,
+  newEventHandler?: (e: Event) => any
+) => {
+  const eventStore = node.__events || (node.__events = {});
+  const oldEventHandler = eventStore[eventName];
+
+  // Remove old listener so they don't double up.
+  if (oldEventHandler) {
+    node.removeEventListener(eventName, oldEventHandler);
+  }
+
+  // Bind new listener.
+  node.addEventListener(
+    eventName,
+    (eventStore[eventName] = function handler(e: Event) {
+      if (newEventHandler) {
+        newEventHandler.call(this, e);
+      }
+    })
+  );
+};
+
+const arrayToMap = (arr: string[] | DOMTokenList) => {
+  const map = new Map<string, string>();
+  (arr as string[]).forEach((s: string) => map.set(s, s));
+  return map;
+};

package/src/react-component-lib/utils/case.ts

@@ -0,0 +1,7 @@
+export const dashToPascalCase = (str: string) =>
+  str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

package/src/react-component-lib/utils/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import type { StyleReactProps } from '../interfaces';
+
+export type StencilReactExternalProps<PropType, ElementType> = PropType &
+  Omit<React.HTMLAttributes<ElementType>, 'style'> &
+  StyleReactProps;
+
+// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+
+export const setRef = (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref != null) {
+    // Cast as a MutableRef so we can assign current
+    (ref as React.MutableRefObject<any>).current = value;
+  }
+};
+
+export const mergeRefs = (
+  ...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]
+): React.RefCallback<any> => {
+  return (value: any) => {
+    refs.forEach((ref) => {
+      setRef(ref, value);
+    });
+  };
+};
+
+export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
+  const forwardRef = (
+    props: StencilReactExternalProps<PropType, ElementType>,
+    ref: StencilReactForwardedRef<ElementType>
+  ) => {
+    return <ReactComponent {...props} forwardedRef={ref} />;
+  };
+  forwardRef.displayName = displayName;
+
+  return React.forwardRef(forwardRef);
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+export * from './attachProps';
+export * from './case';

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/analytics-44b1416b.esm.js

@@ -1,55 +0,0 @@
-// Helper function to check if Matomo is initialized
-function isMatomoAvailable() {
-  return typeof window !== 'undefined' && typeof window._paq !== 'undefined';
-}
-// General function to push data to Matomo
-function pushToMatomo(action, ...args) {
-  //console.log('Pushing Matomo')
-  if (isMatomoAvailable()) {
-    window._paq.push([action, ...args]);
-  } else {
-    // eslint-disable-next-line
-    console.warn('Matomo is not available or not initialized.');
-  }
-}
-// Function to send analytics data
-function sendAnalytics(eventData) {
-  var _a;
-  if (!isMatomoAvailable()) {
-    // eslint-disable-next-line
-    console.warn('Matomo is not available or not initialized.');
-    // eslint-disable-next-line
-    console.log(Object.assign({}, eventData));
-    return;
-  }
-  // Conditionally build the name field
-  const nameParts = [];
-  if ((_a = eventData.parentContext) === null || _a === void 0 ? void 0 : _a.componentName) {
-    nameParts.push(eventData.parentContext.componentName);
-  }
-  nameParts.push(eventData.tag || 'unknown-tag');
-  nameParts.push(eventData.name || 'unknown-name');
-  const name = nameParts.join('/');
-  //console.log('trackEvent', eventData.category, eventData.action, name)
-  pushToMatomo('trackEvent', eventData.category, eventData.action, name);
-  // eslint-disable-next-line
-  console.log(Object.assign({}, eventData));
-}
-// Function to opt-in the user
-function matomoOptIn() {
-  if (isMatomoAvailable()) {
-    window._paq.push(['rememberConsentGiven']);
-    // eslint-disable-next-line
-    console.log('User has opted in to tracking');
-  }
-}
-// Function to opt-out the user
-function matomoOptOut() {
-  if (isMatomoAvailable()) {
-    window._paq.push(['forgetConsentGiven']);
-    // eslint-disable-next-line
-    console.log('User has opted out of tracking');
-  }
-}
-
-export { matomoOptOut as a, matomoOptIn as m, sendAnalytics as s };

package/arrow-diagonal-black-8f0494c3.esm.js

@@ -1,3 +0,0 @@
-const arrowDiagonal = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5858 3H17V9.41421L14.5 6.91421L8.70712 12.7071L7.29291 11.2929L13.0858 5.5L10.5858 3Z" fill="currentColor"></path><path d="M8 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17H14C15.1046 17 16 16.1046 16 15V12H14V15H5V6H8V4Z" fill="currentColor"></path></svg>`;
-
-export { arrowDiagonal as a };

package/arrow-right-9322ba8a.esm.js

@@ -1,5 +0,0 @@
-const arrowRight = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-  <path fill="currentColor" d="M2 8.5h9V3l7 7-7 7v-5.5H2v-3Z" />
-</svg>`;
-
-export { arrowRight as a };

package/bluesky-cc5edd2d.esm.js

@@ -1,14 +0,0 @@
-const bluesky = `  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 10.8728C10.9812 8.89138 8.20675 5.19886 5.62717 3.37775C3.15607 1.63323 2.21338 1.9355 1.59538 2.21475C0.880058 2.53797 0.75 3.63616 0.75 4.28228C0.75 4.92839 1.10422 9.5795 1.33526 10.3559C2.09866 12.9211 4.81627 13.7879 7.319 13.5098C7.44694 13.4908 7.57669 13.4733 7.70807 13.457C7.57919 13.4776 7.44938 13.4953 7.319 13.5098C3.65128 14.0529 0.393987 15.3896 4.66614 20.1456C9.3655 25.0113 11.1066 19.1023 12 16.1064C12.8934 19.1023 13.9225 24.7982 19.2497 20.1456C23.25 16.1064 20.3488 14.0531 16.681 13.5099C16.5506 13.4954 16.4208 13.4778 16.2919 13.4572C16.4233 13.4734 16.5531 13.4909 16.681 13.5099C19.1838 13.7881 21.9013 12.9213 22.6648 10.3561C22.8958 9.57969 23.25 4.92855 23.25 4.28244C23.25 3.63632 23.1199 2.53813 22.4046 2.21491C21.7866 1.93566 20.8439 1.63339 18.3728 3.37791C15.7933 5.19902 13.0188 8.89138 12 10.8728Z"
-      fill="currentColor"
-    />
-  </svg>`;
-
-export { bluesky as b };

package/bookmark-c200037c.esm.js

@@ -1,16 +0,0 @@
-const bookmark = `  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 4H15V16L10 12.0138L5 16V4Z"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linejoin="round"
-    />
-  </svg>`;
-
-export { bookmark as b };

package/chevron-down-6144c823.esm.js

@@ -1,12 +0,0 @@
-const chevronDown = `<svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M10 13L4 7H16L10 13Z" fill="currentColor" />
-  </svg>
-`;
-
-export { chevronDown as c };

package/chevron-left-ca6c66e1.esm.js

@@ -1,11 +0,0 @@
-const chevronLeft = ` <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M7 10L13 4L13 16L7 10Z" fill="currentColor" />
-  </svg>`;
-
-export { chevronLeft as c };

package/chevron-right-b88ed2d4.esm.js

@@ -1,5 +0,0 @@
-const chevronRight = ` <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-    <path fill="currentColor" d="m13 10-6 6V4l6 6Z" />
-  </svg>`;
-
-export { chevronRight as c };

package/chevron-up-c66bd477.esm.js

@@ -1,12 +0,0 @@
-const chevronUp = `<svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
->
-    <path d="M4 13L10 7L16 13L4 13Z" fill="currentColor" />
-</svg>
-`;
-
-export { chevronUp as c };

package/close-87fc0d63.esm.js

@@ -1,5 +0,0 @@
-const close = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
-    <path stroke="currentColor" stroke-width="2" d="M16 4 4 16m12 0L4 4" />
-  </svg>`;
-
-export { close as c };

package/color-2554aad6.esm.js

@@ -1,122 +0,0 @@
-import { c as cva } from './index-39c58238.esm.js';
-
-const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
-const gradientBGColorVariants = cva([], {
-  variants: {
-    color: GRADIANT_TOKENS.reduce((acc, token) => Object.assign(Object.assign({}, acc), {
-      [token]: ''
-    }), {}),
-    direction: {
-      top: '',
-      bottom: ''
-    },
-    pseudo: {
-      true: 'before:effect-opacity effect-bg-behind',
-      false: ''
-    },
-    hover: {
-      true: 'before:opacity-0 hover:before:opacity-100',
-      false: ''
-    }
-  },
-  compoundVariants: [
-  // region GREEN
-  {
-    color: 'green',
-    direction: 'top',
-    pseudo: true,
-    className: 'before:bg-gradient-01-top'
-  }, {
-    color: 'green',
-    pseudo: true,
-    direction: 'bottom',
-    className: 'before:bg-gradient-01-bottom'
-  }, {
-    color: 'green',
-    direction: 'top',
-    pseudo: false,
-    className: 'bg-gradient-01-top'
-  }, {
-    color: 'green',
-    pseudo: false,
-    direction: 'bottom',
-    className: 'bg-gradient-01-bottom'
-  },
-  // endregion
-  // region YELLOW
-  {
-    color: 'yellow',
-    direction: 'top',
-    pseudo: true,
-    className: 'before:bg-gradient-02-top'
-  }, {
-    color: 'yellow',
-    direction: 'bottom',
-    pseudo: true,
-    className: 'before:bg-gradient-02-bottom'
-  }, {
-    color: 'yellow',
-    direction: 'top',
-    pseudo: false,
-    className: 'bg-gradient-02-top'
-  }, {
-    color: 'yellow',
-    direction: 'bottom',
-    pseudo: false,
-    className: 'bg-gradient-02-bottom'
-  },
-  // endregion
-  // region PURPLE
-  {
-    color: 'purple',
-    direction: 'top',
-    pseudo: true,
-    class: 'before:bg-gradient-03-top'
-  }, {
-    color: 'purple',
-    direction: 'bottom',
-    pseudo: true,
-    class: 'before:bg-gradient-03-bottom'
-  }, {
-    color: 'purple',
-    direction: 'top',
-    pseudo: false,
-    class: 'bg-gradient-03-top'
-  }, {
-    color: 'purple',
-    direction: 'bottom',
-    pseudo: false,
-    class: 'bg-gradient-03-bottom'
-  },
-  // endregion
-  // region AMONG-BLUE
-  {
-    color: 'among-blue',
-    direction: 'top',
-    pseudo: true,
-    class: 'before:bg-gradient-04-top'
-  }, {
-    color: 'among-blue',
-    direction: 'bottom',
-    pseudo: true,
-    class: 'before:bg-gradient-04-bottom'
-  }, {
-    color: 'among-blue',
-    direction: 'top',
-    pseudo: false,
-    class: 'bg-gradient-04-top'
-  }, {
-    color: 'among-blue',
-    direction: 'bottom',
-    pseudo: false,
-    class: 'bg-gradient-04-bottom'
-  }
-  // endregion
-  ],
-  defaultVariants: {
-    direction: 'top',
-    pseudo: true
-  }
-});
-
-export { gradientBGColorVariants as g };