@helpdice/ui 1.1.0 → 1.1.1

package/esm/CircularProgress/CircularProgressbar.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types';
+declare class CircularProgressbar extends React.Component<CircularProgressbarProps> {
+    static defaultProps: CircularProgressbarDefaultProps;
+    getBackgroundPadding(): number;
+    getPathRadius(): number;
+    getPathRatio(): number;
+    render(): React.JSX.Element;
+}
+export default CircularProgressbar;

package/esm/CircularProgress/CircularProgressbar.js

@@ -0,0 +1,118 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import * as React from 'react';
+import { VIEWBOX_WIDTH, VIEWBOX_HEIGHT, VIEWBOX_HEIGHT_HALF, VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';
+import Path from './Path';
+var CircularProgressbar = /*#__PURE__*/function (_React$Component) {
+  function CircularProgressbar() {
+    _classCallCheck(this, CircularProgressbar);
+    return _callSuper(this, CircularProgressbar, arguments);
+  }
+  _inherits(CircularProgressbar, _React$Component);
+  return _createClass(CircularProgressbar, [{
+    key: "getBackgroundPadding",
+    value: function getBackgroundPadding() {
+      if (!this.props.background) {
+        // Don't add padding if not displaying background
+        return 0;
+      }
+      return this.props.backgroundPadding;
+    }
+  }, {
+    key: "getPathRadius",
+    value: function getPathRadius() {
+      // The radius of the path is defined to be in the middle, so in order for the path to
+      // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
+      return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();
+    }
+
+    // Ratio of path length to trail length, as a value between 0 and 1
+  }, {
+    key: "getPathRatio",
+    value: function getPathRatio() {
+      var _this$props = this.props,
+        value = _this$props.value,
+        minValue = _this$props.minValue,
+        maxValue = _this$props.maxValue;
+      var boundedValue = Math.min(Math.max(value, minValue), maxValue);
+      return (boundedValue - minValue) / (maxValue - minValue);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        circleRatio = _this$props2.circleRatio,
+        className = _this$props2.className,
+        classes = _this$props2.classes,
+        counterClockwise = _this$props2.counterClockwise,
+        styles = _this$props2.styles,
+        strokeWidth = _this$props2.strokeWidth,
+        text = _this$props2.text;
+      var pathRadius = this.getPathRadius();
+      var pathRatio = this.getPathRatio();
+      return /*#__PURE__*/React.createElement("svg", {
+        className: "".concat(classes.root, " ").concat(className),
+        style: styles.root,
+        viewBox: "0 0 ".concat(VIEWBOX_WIDTH, " ").concat(VIEWBOX_HEIGHT),
+        "data-test-id": "CircularProgressbar"
+      }, this.props.background ? /*#__PURE__*/React.createElement("circle", {
+        className: classes.background,
+        style: styles.background,
+        cx: VIEWBOX_CENTER_X,
+        cy: VIEWBOX_CENTER_Y,
+        r: VIEWBOX_HEIGHT_HALF
+      }) : null, /*#__PURE__*/React.createElement(Path, {
+        className: classes.trail,
+        counterClockwise: counterClockwise,
+        dashRatio: circleRatio,
+        pathRadius: pathRadius,
+        strokeWidth: strokeWidth,
+        style: styles.trail
+      }), /*#__PURE__*/React.createElement(Path, {
+        className: classes.path,
+        counterClockwise: counterClockwise,
+        dashRatio: pathRatio * circleRatio,
+        pathRadius: pathRadius,
+        strokeWidth: strokeWidth,
+        style: styles.path
+      }), text ? /*#__PURE__*/React.createElement("text", {
+        className: classes.text,
+        style: styles.text,
+        x: VIEWBOX_CENTER_X,
+        y: VIEWBOX_CENTER_Y
+      }, text) : null);
+    }
+  }]);
+}(React.Component);
+_defineProperty(CircularProgressbar, "defaultProps", {
+  background: false,
+  backgroundPadding: 0,
+  circleRatio: 1,
+  classes: {
+    root: 'CircularProgressbar',
+    trail: 'CircularProgressbar-trail',
+    path: 'CircularProgressbar-path',
+    text: 'CircularProgressbar-text',
+    background: 'CircularProgressbar-background'
+  },
+  counterClockwise: false,
+  className: '',
+  maxValue: 100,
+  minValue: 0,
+  strokeWidth: 8,
+  styles: {
+    root: {},
+    trail: {},
+    path: {},
+    text: {},
+    background: {}
+  },
+  text: ''
+});
+export default CircularProgressbar;

package/esm/CircularProgress/CircularProgressbarWithChildren.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { CircularProgressbarWrapperProps } from './types';
+type CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & {
+    children?: React.ReactNode;
+};
+declare function CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps): React.JSX.Element;
+export default CircularProgressbarWithChildren;

package/esm/CircularProgress/CircularProgressbarWithChildren.js

@@ -0,0 +1,32 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import * as React from 'react';
+import CircularProgressbar from './CircularProgressbar';
+// This is a wrapper around CircularProgressbar that allows passing children,
+// which will be vertically and horizontally centered inside the progressbar automatically.
+function CircularProgressbarWithChildren(props) {
+  var children = props.children,
+    circularProgressbarProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "CircularProgressbarWithChildren"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(CircularProgressbar, circularProgressbarProps), props.children ? /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "CircularProgressbarWithChildren__children",
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      marginTop: '-100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, props.children) : null));
+}
+export default CircularProgressbarWithChildren;

package/esm/CircularProgress/Path.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function Path({ className, counterClockwise, dashRatio, pathRadius, strokeWidth, style, }: {
+    className?: string;
+    counterClockwise: boolean;
+    dashRatio: number;
+    pathRadius: number;
+    strokeWidth: number;
+    style?: object;
+}): React.JSX.Element;
+export default Path;

package/esm/CircularProgress/Path.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';
+function Path(_ref) {
+  var className = _ref.className,
+    counterClockwise = _ref.counterClockwise,
+    dashRatio = _ref.dashRatio,
+    pathRadius = _ref.pathRadius,
+    strokeWidth = _ref.strokeWidth,
+    style = _ref.style;
+  return /*#__PURE__*/React.createElement("path", {
+    className: className,
+    style: Object.assign({}, style, getDashStyle({
+      pathRadius: pathRadius,
+      dashRatio: dashRatio,
+      counterClockwise: counterClockwise
+    })),
+    d: getPathDescription({
+      pathRadius: pathRadius,
+      counterClockwise: counterClockwise
+    }),
+    strokeWidth: strokeWidth,
+    fillOpacity: 0
+  });
+}
+
+// SVG path description specifies how the path should be drawn
+function getPathDescription(_ref2) {
+  var pathRadius = _ref2.pathRadius,
+    counterClockwise = _ref2.counterClockwise;
+  var radius = pathRadius;
+  var rotation = counterClockwise ? 1 : 0;
+
+  // Move to center of canvas
+  // Relative move to top canvas
+  // Relative arc to bottom of canvas
+  // Relative arc to top of canvas
+  return "\n      M ".concat(VIEWBOX_CENTER_X, ",").concat(VIEWBOX_CENTER_Y, "\n      m 0,-").concat(radius, "\n      a ").concat(radius, ",").concat(radius, " ").concat(rotation, " 1 1 0,").concat(2 * radius, "\n      a ").concat(radius, ",").concat(radius, " ").concat(rotation, " 1 1 0,-").concat(2 * radius, "\n    ");
+}
+function getDashStyle(_ref3) {
+  var counterClockwise = _ref3.counterClockwise,
+    dashRatio = _ref3.dashRatio,
+    pathRadius = _ref3.pathRadius;
+  var diameter = Math.PI * 2 * pathRadius;
+  var gapLength = (1 - dashRatio) * diameter;
+  return {
+    // Have dash be full diameter, and gap be full diameter
+    strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"),
+    // Shift dash backward by gapLength, so gap starts appearing at correct distance
+    strokeDashoffset: "".concat(counterClockwise ? -gapLength : gapLength, "px")
+  };
+}
+export default Path;

package/esm/CircularProgress/buildStyles.d.ts

@@ -0,0 +1,12 @@
+import { CircularProgressbarStyles } from './types';
+export default function buildStyles({ rotation, strokeLinecap, textColor, textSize, pathColor, pathTransition, pathTransitionDuration, trailColor, backgroundColor, }: {
+    rotation?: number;
+    strokeLinecap?: any;
+    textColor?: string;
+    textSize?: string | number;
+    pathColor?: string;
+    pathTransition?: string;
+    pathTransitionDuration?: number;
+    trailColor?: string;
+    backgroundColor?: string;
+}): CircularProgressbarStyles;

package/esm/CircularProgress/buildStyles.js

@@ -0,0 +1,45 @@
+export default function buildStyles(_ref) {
+  var rotation = _ref.rotation,
+    strokeLinecap = _ref.strokeLinecap,
+    textColor = _ref.textColor,
+    textSize = _ref.textSize,
+    pathColor = _ref.pathColor,
+    pathTransition = _ref.pathTransition,
+    pathTransitionDuration = _ref.pathTransitionDuration,
+    trailColor = _ref.trailColor,
+    backgroundColor = _ref.backgroundColor;
+  var rotationTransform = rotation == null ? undefined : "rotate(".concat(rotation, "turn)");
+  var rotationTransformOrigin = rotation == null ? undefined : 'center center';
+  return {
+    root: {},
+    path: removeUndefinedValues({
+      stroke: pathColor,
+      strokeLinecap: strokeLinecap,
+      transform: rotationTransform,
+      transformOrigin: rotationTransformOrigin,
+      transition: pathTransition,
+      transitionDuration: pathTransitionDuration == null ? undefined : "".concat(pathTransitionDuration, "s")
+    }),
+    trail: removeUndefinedValues({
+      stroke: trailColor,
+      strokeLinecap: strokeLinecap,
+      transform: rotationTransform,
+      transformOrigin: rotationTransformOrigin
+    }),
+    text: removeUndefinedValues({
+      fill: textColor,
+      fontSize: textSize
+    }),
+    background: removeUndefinedValues({
+      fill: backgroundColor
+    })
+  };
+}
+function removeUndefinedValues(obj) {
+  Object.keys(obj).forEach(function (key) {
+    if (obj[key] == null) {
+      delete obj[key];
+    }
+  });
+  return obj;
+}

package/esm/CircularProgress/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const VIEWBOX_WIDTH = 100;
+export declare const VIEWBOX_HEIGHT = 100;
+export declare const VIEWBOX_HEIGHT_HALF = 50;
+export declare const VIEWBOX_CENTER_X = 50;
+export declare const VIEWBOX_CENTER_Y = 50;

package/esm/CircularProgress/constants.js

@@ -0,0 +1,5 @@
+export var VIEWBOX_WIDTH = 100;
+export var VIEWBOX_HEIGHT = 100;
+export var VIEWBOX_HEIGHT_HALF = 50;
+export var VIEWBOX_CENTER_X = 50;
+export var VIEWBOX_CENTER_Y = 50;

package/esm/CircularProgress/index.d.ts

@@ -0,0 +1,4 @@
+import CircularProgressBar from './CircularProgressbar';
+import CircularProgress from './CircularProgressbarWithChildren';
+import buildStyles from './buildStyles';
+export { CircularProgressBar, CircularProgress, buildStyles };

package/esm/CircularProgress/index.js

@@ -0,0 +1,4 @@
+import CircularProgressBar from './CircularProgressbar';
+import CircularProgress from './CircularProgressbarWithChildren';
+import buildStyles from './buildStyles';
+export { CircularProgressBar, CircularProgress, buildStyles };

package/esm/CircularProgress/types.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+export type CircularProgressbarStyles = {
+    root?: React.CSSProperties;
+    trail?: React.CSSProperties;
+    path?: React.CSSProperties;
+    text?: React.CSSProperties;
+    background?: React.CSSProperties;
+};
+export type CircularProgressbarDefaultProps = {
+    background: boolean;
+    backgroundPadding: number;
+    circleRatio: number;
+    classes: {
+        root: string;
+        trail: string;
+        path: string;
+        text: string;
+        background: string;
+    };
+    className: string;
+    counterClockwise: boolean;
+    maxValue: number;
+    minValue: number;
+    strokeWidth: number;
+    styles: CircularProgressbarStyles;
+    text: string;
+};
+export type CircularProgressbarWrapperProps = {
+    background?: boolean;
+    backgroundPadding?: number;
+    circleRatio?: number;
+    classes?: {
+        root: string;
+        trail: string;
+        path: string;
+        text: string;
+        background: string;
+    };
+    className?: string;
+    counterClockwise?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    strokeWidth?: number;
+    styles?: CircularProgressbarStyles;
+    text?: string;
+    value: number;
+};
+export type CircularProgressbarProps = CircularProgressbarDefaultProps & {
+    value: number;
+};

package/esm/CircularProgress/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -20,6 +20,7 @@ export { default as Checkbox } from './checkbox';
 export type { CheckboxProps, CheckboxGroupProps } from './checkbox';
 export { default as Code } from './code';
 export type { CodeProps } from './code';
+export { CircularProgress, buildStyles } from './CircularProgress';
 export { default as Collapse } from './collapse';
 export type { CollapseProps, CollapseGroupProps } from './collapse';
 export { default as Description } from './description';

package/esm/index.js

@@ -12,6 +12,7 @@ export { default as Capacity } from './capacity';
 export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as Code } from './code';
+export { CircularProgress, buildStyles } from './CircularProgress';
 export { default as Collapse } from './collapse';
 export { default as Description } from './description';
 export { default as Display } from './display';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -94,7 +94,6 @@
     "yup": "^1.6.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.7",
     "@helpdice/icons": "^1.0.8",
     "@types/hoist-non-react-statics": "^3.3.6",
     "@types/styled-components": "^5.1.34",