@ukic/canary-react 2.0.0-canary.2 → 2.0.0-canary.20

package/dist/react-component-lib/utils/attachProps.d.ts

@@ -1,16 +1,16 @@
-export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
-export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
-/**
- * Transforms a React event name to a browser event name.
- */
-export declare const transformReactEventName: (eventNameSuffix: string) => string;
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
-export declare const syncEvent: (node: Element & {
-    __events?: {
-        [key: string]: (e: Event) => any;
-    };
-}, eventName: string, newEventHandler?: (e: Event) => any) => void;
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: (e: Event) => any;
+    };
+}, eventName: string, newEventHandler?: (e: Event) => any) => void;

package/dist/react-component-lib/utils/attachProps.js

@@ -1,107 +1,108 @@
-import { camelToDashCase } from './case';
-export const attachProps = (node, newProps, oldProps = {}) => {
-    // 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[name] = newProps[name];
-                const propType = typeof newProps[name];
-                if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), newProps[name]);
-                }
-            }
-        });
-    }
-};
-export const getClassName = (classList, newProps, oldProps) => {
-    const newClassProp = newProps.className || newProps.class;
-    const oldClassProp = 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 = [];
-    // 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) => {
-    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) => {
-    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[eventName] === 'function';
-        }
-        return isSupported;
-    }
-};
-export const syncEvent = (node, eventName, newEventHandler) => {
-    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) {
-        if (newEventHandler) {
-            newEventHandler.call(this, e);
-        }
-    }));
-};
-const arrayToMap = (arr) => {
-    const map = new Map();
-    arr.forEach((s) => map.set(s, s));
-    return map;
-};
+import { camelToDashCase } from './case';
+export var attachProps = function (node, newProps, oldProps) {
+    if (oldProps === void 0) { oldProps = {}; }
+    // 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
+        var className = getClassName(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach(function (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()) {
+                var eventName = name.substring(2);
+                var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!isCoveredByReact(eventNameLc)) {
+                    syncEvent(node, eventNameLc, newProps[name]);
+                }
+            }
+            else {
+                node[name] = newProps[name];
+                var propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+export var getClassName = function (classList, newProps, oldProps) {
+    var newClassProp = newProps.className || newProps.class;
+    var oldClassProp = oldProps.className || oldProps.class;
+    // map the classes to Maps for performance
+    var currentClasses = arrayToMap(classList);
+    var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    var finalClassNames = [];
+    // loop through each of the current classes on the component
+    // to see if it should be a part of the classNames added
+    currentClasses.forEach(function (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(function (s) { return finalClassNames.push(s); });
+    return finalClassNames.join(' ');
+};
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export var transformReactEventName = function (eventNameSuffix) {
+    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 var isCoveredByReact = function (eventNameSuffix) {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        var eventName = 'on' + transformReactEventName(eventNameSuffix);
+        var isSupported = eventName in document;
+        if (!isSupported) {
+            var element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+export var syncEvent = function (node, eventName, newEventHandler) {
+    var eventStore = node.__events || (node.__events = {});
+    var 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) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+var arrayToMap = function (arr) {
+    var map = new Map();
+    arr.forEach(function (s) { return map.set(s, s); });
+    return map;
+};

package/dist/react-component-lib/utils/case.d.ts

@@ -1,2 +1,2 @@
-export declare const dashToPascalCase: (str: string) => string;
-export declare const camelToDashCase: (str: string) => string;
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;

package/dist/react-component-lib/utils/case.js

@@ -1,6 +1,8 @@
-export const dashToPascalCase = (str) => str
-    .toLowerCase()
-    .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-export const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+export var dashToPascalCase = function (str) {
+    return str
+        .toLowerCase()
+        .split('-')
+        .map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
+        .join('');
+};
+export var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };

package/dist/react-component-lib/utils/dev.d.ts

@@ -1,2 +1,2 @@
-export declare const isDevMode: () => boolean;
-export declare const deprecationWarning: (key: string, message: string) => void;
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;

package/dist/react-component-lib/utils/dev.js

@@ -1,12 +1,12 @@
-export const isDevMode = () => {
-    return process && process.env && process.env.NODE_ENV === 'development';
-};
-const warnings = {};
-export const deprecationWarning = (key, message) => {
-    if (isDevMode()) {
-        if (!warnings[key]) {
-            console.warn(message);
-            warnings[key] = true;
-        }
-    }
-};
+export var isDevMode = function () {
+    return process && process.env && process.env.NODE_ENV === 'development';
+};
+var warnings = {};
+export var deprecationWarning = function (key, message) {
+    if (isDevMode()) {
+        if (!warnings[key]) {
+            console.warn(message);
+            warnings[key] = true;
+        }
+    }
+};

package/dist/react-component-lib/utils/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { StyleReactProps } from '../interfaces';
-export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
-export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
-export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
-export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
-export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
-export declare const defineCustomElement: (tagName: string, customElement: any) => void;
-export * from './attachProps';
-export * from './case';
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

package/dist/react-component-lib/utils/index.js

@@ -1,31 +1,46 @@
-import React from 'react';
-export const setRef = (ref, value) => {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref != null) {
-        // Cast as a MutableRef so we can assign current
-        ref.current = value;
-    }
-};
-export const mergeRefs = (...refs) => {
-    return (value) => {
-        refs.forEach((ref) => {
-            setRef(ref, value);
-        });
-    };
-};
-export const createForwardRef = (ReactComponent, displayName) => {
-    const forwardRef = (props, ref) => {
-        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
-    };
-    forwardRef.displayName = displayName;
-    return React.forwardRef(forwardRef);
-};
-export const defineCustomElement = (tagName, customElement) => {
-    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
-        customElements.define(tagName, customElement);
-    }
-};
-export * from './attachProps';
-export * from './case';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var setRef = function (ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+export var mergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (value) {
+        refs.forEach(function (ref) {
+            setRef(ref, value);
+        });
+    };
+};
+export var createForwardRef = function (ReactComponent, displayName) {
+    var forwardRef = function (props, ref) {
+        return React.createElement(ReactComponent, __assign({}, props, { forwardedRef: ref }));
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+};
+export var defineCustomElement = function (tagName, customElement) {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+export * from './attachProps';
+export * from './case';

package/package.json

@@ -3,19 +3,25 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-canary.2",
+  "version": "2.0.0-canary.20",
   "description": "React-wrapped web components compiled using StencilJS",
   "scripts": {
     "build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
+    "cypress": "cypress run --component --headed",
+    "cypress:open": "cypress open",
+    "cypress:component": "cypress run --component --headless",
+    "cypress:ci": "cross-env CYPRESS_CI=true npm run cypress:component",
     "clean": "rimraf dist",
     "compile": "npm run tsc",
     "tsc": "tsc -p .",
     "rollup": "rollup -c",
-    "storybook": "start-storybook -p 6007 --no-manager-cache",
-    "build-storybook": "rimraf ./storybook-static && build-storybook -s public",
+    "storybook": "storybook dev -p 6009",
+    "build-storybook": "rimraf ./storybook-static && storybook build",
     "audit": "echo 'Audit for: @ukic/canary-react' && audit-ci -m --config ../../audit-ci.json",
-    "copy:core-css": "echo 'Copy core.css from: @ukic/canary-web-components' && mkdirp -p ./dist/core && ncp ../web-components/dist/core/core.css ./dist/core/core.css",
-    "copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../web-components/dist/core/normalize.css ./dist/core/normalize.css"
+    "copy:core-css": "echo 'Copy core.css from: @ukic/canary-web-components' && mkdirp -p ./dist/core && ncp ../canary-web-components/dist/core/core.css ./dist/core/core.css",
+    "copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../canary-web-components/dist/core/normalize.css ./dist/core/normalize.css",
+    "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
+    "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,28 +30,39 @@
     "dist/"
   ],
   "dependencies": {
-    "@ukic/canary-web-components": "^2.0.0-canary.2",
-    "@ukic/fonts": "^2.3.0"
+    "@ukic/canary-web-components": "^2.0.0-canary.20",
+    "@ukic/react": "^2.25.0",
+    "@ukic/web-components": "^2.25.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@cypress/react": "^8.0.0",
+    "@cypress/webpack-preprocessor": "^6.0.0",
     "@mdi/js": "^7.2.96",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-docs": "^6.4.8",
-    "@storybook/addon-essentials": "^6.4.8",
-    "@storybook/addon-links": "^6.4.8",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@types/jest": "27.0.3",
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.2.3",
-    "github-markdown-css": "^5.2.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^13.3.1",
+    "cypress-axe": "^1.5.0",
+    "cypress-image-diff-js": "^1.32.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "github-markdown-css": "^5.5.0",
     "jest": "^27.4.1",
     "jest-dom": "^4.0.0",
     "mkdirp": "^1.0.4",
@@ -56,10 +73,14 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.3.0",
     "remark-gfm": "^3.0.1",
+    "storybook": "^7.6.10",
+    "ts-loader": "^9.5.0",
     "typescript": "^4.5.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.76.0"
   },
   "peerDependencies": {
+    "@ukic/fonts": "^2.6.0",
     "react": "^16.7.0 || ^17.0.2 || ^18.2.0",
     "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0"
   },
@@ -71,5 +92,6 @@
       "dist"
     ]
   },
-  "license": "MIT"
+  "license": "MIT",
+  "gitHead": "eb7aab0b104807bab72ff8030dbd57f847480fd7"
 }

package/dist/react-component-lib/slottedSVG.d.ts

@@ -1,2 +0,0 @@
-import { FC } from "react";
-export declare const SlottedSVG: FC<any>;

package/dist/react-component-lib/slottedSVG.js

@@ -1,24 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from "react";
-const defaultProps = {
-    xmlns: "http://www.w3.org/2000/svg",
-};
-function slot(name = "") {
-    return { ref: (e) => (e ? e.setAttribute("slot", name) : null) };
-}
-export const SlottedSVG = (_a) => {
-    var { path, slot: slotName, children } = _a, props = __rest(_a, ["path", "slot", "children"]);
-    return (React.createElement("svg", Object.assign({}, slot(slotName), props, defaultProps),
-        !!path && React.createElement("path", { d: path }),
-        children));
-};