@helpdice/ui 1.7.9 → 1.8.3

package/esm/parser/utils/generatePropsFromAttributes.js

@@ -0,0 +1,24 @@
+import htmlAttributesToReact from './htmlAttributesToReact';
+import inlineStyleToObject from './inlineStyleToObject';
+
+/**
+ * Generates props for a React element from an object of HTML attributes
+ *
+ * @param {Object} attributes The HTML attributes
+ * @param {String} key The key to give the react element
+ */
+export default function generatePropsFromAttributes(attributes, key) {
+  // generate props
+  var props = Object.assign({}, htmlAttributesToReact(attributes), {
+    key: key
+  });
+
+  // if there is an inline/string style prop then convert it to a React style object
+  // otherwise, it is invalid and omitted
+  if (typeof props.style === 'string' || props.style instanceof String) {
+    props.style = inlineStyleToObject(props.style);
+  } else {
+    delete props.style;
+  }
+  return props;
+}

package/esm/parser/utils/htmlAttributesToReact.js

@@ -0,0 +1,45 @@
+import BooleanAttributes from '../dom/attributes/BooleanAttributes';
+import ReactAttributes from '../dom/attributes/ReactAttributes';
+import isValidTagOrAttributeName from './isValidTagOrAttributeName';
+
+/**
+ * Returns the parsed attribute value taking into account things like boolean attributes
+ *
+ * @param {String} attribute The name of the attribute
+ * @param {*} value The value of the attribute from the HTML
+ * @returns {*} The parsed attribute value
+ */
+var getParsedAttributeValue = function getParsedAttributeValue(attribute, value) {
+  // if the attribute if a boolean then it's value should be the same as it's name
+  // e.g. disabled="disabled"
+  var lowerBooleanAttributes = BooleanAttributes.map(function (attr) {
+    return attr.toLowerCase();
+  });
+  if (lowerBooleanAttributes.indexOf(attribute.toLowerCase()) >= 0) {
+    value = attribute;
+  }
+  return value;
+};
+
+/**
+ * Takes an object of standard HTML property names and converts them to their React counterpart. If the react
+ * version does not exist for an attribute then just use it as it is
+ *
+ * @param {Object} attributes The HTML attributes to convert
+ * @returns {Object} The React attributes
+ */
+export default function htmlAttributesToReact(attributes) {
+  return Object.keys(attributes).filter(function (attr) {
+    return isValidTagOrAttributeName(attr);
+  }).reduce(function (mappedAttributes, attribute) {
+    // lowercase the attribute name and find it in the react attribute map
+    var lowerCaseAttribute = attribute.toLowerCase();
+
+    // format the attribute name
+    var name = ReactAttributes[lowerCaseAttribute] || lowerCaseAttribute;
+
+    // add the parsed attribute value to the mapped attributes
+    mappedAttributes[name] = getParsedAttributeValue(name, attributes[attribute]);
+    return mappedAttributes;
+  }, {});
+}

package/esm/parser/utils/inlineStyleToObject.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * Converts an inline style string into an object of React style properties
+ *
+ * @param {String} inlineStyle='' The inline style to convert
+ * @returns {Object} The converted style
+ */
+export default function InlineStyleToObject() {
+  var inlineStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  // just return empty object if the inlineStyle is empty
+  if (inlineStyle === '') {
+    return {};
+  }
+  return inlineStyle.split(';').reduce(function (styleObject, stylePropertyValue) {
+    // extract the style property name and value
+    var _stylePropertyValue$s = stylePropertyValue.split(/^([^:]+):/).filter(function (val, i) {
+        return i > 0;
+      }).map(function (item) {
+        return item.trim().toLowerCase();
+      }),
+      _stylePropertyValue$s2 = _slicedToArray(_stylePropertyValue$s, 2),
+      property = _stylePropertyValue$s2[0],
+      value = _stylePropertyValue$s2[1];
+
+    // if there is no value (i.e. no : in the style) then ignore it
+    if (value === undefined) {
+      return styleObject;
+    }
+
+    // convert the property name into the correct React format
+    // remove all hyphens and convert the letter immediately after each hyphen to upper case
+    // additionally don't uppercase any -ms- prefix
+    // e.g. -ms-style-property = msStyleProperty
+    //      -webkit-style-property = WebkitStyleProperty
+    property = property.replace(/^-ms-/, 'ms-').replace(/-(.)/g, function (_, character) {
+      return character.toUpperCase();
+    });
+
+    // add the new style property and value to the style object
+    styleObject[property] = value;
+    return styleObject;
+  }, {});
+}

package/esm/parser/utils/isEmptyTextNode.js

@@ -0,0 +1,10 @@
+/**
+ * Tests a htmlparser2 node and returns whether is it a text node at the start and end of the line containing only
+ * white space. This allows these node types to be excluded from the rendering because they are unnecessary.
+ *
+ * @param {Object} node The element object as created by htmlparser2
+ * @returns {boolean} Whether the node is an empty text node
+ */
+export default function isEmptyTextNode(node) {
+  return node.type === 'text' && /\r?\n/.test(node.data) && node.data.trim() === '';
+}

package/esm/parser/utils/isValidTagOrAttributeName.js

@@ -0,0 +1,8 @@
+var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/;
+var nameCache = {};
+export default function isValidTagOrAttributeName(tagName) {
+  if (!nameCache.hasOwnProperty(tagName)) {
+    nameCache[tagName] = VALID_TAG_REGEX.test(tagName);
+  }
+  return nameCache[tagName];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.7.9",
+  "version": "1.8.3",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -24,7 +24,8 @@
     "build:after": "node scripts/move-built-in.js",
     "build:types": "tsc -p ./scripts & tsc -p ./scripts --outDir ./esm",
     "build:package": "yarn build:rollup && yarn build:babel && yarn build:types && yarn build:after",
-    "release": "yarn publish --access public --non-interactive"
+    "release": "yarn publish --access public --non-interactive",
+    "release:github": "yarn publish --registry=https://npm.pkg.github.com"
   },
   "license": "MIT",
   "description": "Modern React UI library.",
@@ -36,6 +37,9 @@
     "type": "git",
     "url": "https://github.com/helpdice/ui"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "prettier": "@helpdice/prettier-config",
   "keywords": [
     "flux",
@@ -57,9 +61,7 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
-    "@helpdice/icons": "^1.1.2",
-    "@helpdice/pro": "^1.1.6",
-    "@helpdice/theme": "^1.0.3",
+    "@helpdice/icons": "^1.1.3",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
@@ -74,7 +76,6 @@
     "@types/react": "~18.3.1",
     "@types/react-color": "^3.0.13",
     "@types/react-dom": "~18.3.1",
-    "@types/react-html-parser": "^2.0.6",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-transition-group": "^4.4.12",
     "@types/warning": "^3.0.3",
@@ -104,12 +105,13 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.3",
-    "@helpdice/sdk": "^0.1.3",
+    "@helpdice/sdk": "^0.1.4",
     "@helpdice/utils": "^0.1.3",
     "@mapbox/rehype-prism": "^0.9.0",
     "@types/hoist-non-react-statics": "^3.3.6",
     "@types/styled-components": "^5.1.34",
     "babel-plugin-transform-rename-import": "^2.3.0",
+    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "css-box-model": "^1.2.1",
     "date-fns": "^4.1.0",
@@ -123,7 +125,6 @@
     "next-sitemap": "^4.2.3",
     "polished": "^4.3.1",
     "react-fast-compare": "^3.2.2",
-    "react-html-parser": "^2.0.2",
     "react-is": "^19.0.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-transition-group": "^4.4.5",
@@ -134,7 +135,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@helpdice/theme": "^1.0.3",
+    "@helpdice/theme": "^1.0.5",
     "react": "^18.3.1 || ^19.1.0",
     "react-dom": "^18.3.1 || ^19.1.0"
   },