@spaced-out/ui-design-system 0.1.112 → 0.1.113

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah
+          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.113](https://github.com/spaced-out/ui-design-system/compare/v0.1.112...v0.1.113) (2024-07-16)
+
+
+### Features
+
+* donut progress bar ([#243](https://github.com/spaced-out/ui-design-system/issues/243)) ([5510117](https://github.com/spaced-out/ui-design-system/commit/5510117890fb1dd5a8ba7537cb0079885bcc6a8c))
+
 ### [0.1.112](https://github.com/spaced-out/ui-design-system/compare/v0.1.111...v0.1.112) (2024-07-15)
 
 

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressDonut = void 0;
+var React = _interopRequireWildcard(require("react"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text");
+var _ProgressDonutModule = _interopRequireDefault(require("./ProgressDonut.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const STROKE_WIDTH = 8;
+const MIN_PERCENTAGE = 0;
+const DIVISOR_TWO = 2;
+const MAX_PERCENTAGE = 100;
+const SUCCESS_THRESHOLD = 80;
+const LARGE_DONUT_SIZE = 72;
+const INFO_THRESHOLD = 50;
+const WARNING_THRESHOLD = 30;
+const getProgressDonutColor = percentage => {
+  if (percentage >= SUCCESS_THRESHOLD) {
+    return COLORS.colorSuccess;
+  } else if (percentage >= INFO_THRESHOLD && percentage < SUCCESS_THRESHOLD) {
+    return COLORS.colorInformation;
+  } else if (percentage >= WARNING_THRESHOLD && percentage < INFO_THRESHOLD) {
+    return COLORS.colorWarning;
+  } else {
+    return COLORS.colorDanger;
+  }
+};
+const ProgressDonut = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    percentage = 0,
+    color = ''
+  } = _ref;
+  const donutPercentage = React.useMemo(() => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE), [percentage]);
+  const donutColor = React.useMemo(() => getProgressDonutColor(donutPercentage), [donutPercentage]);
+  const radius = React.useMemo(() => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO, [LARGE_DONUT_SIZE]);
+  const circumference = React.useMemo(() => DIVISOR_TWO * Math.PI * radius, [radius]);
+  const offset = React.useMemo(() => circumference - donutPercentage / MAX_PERCENTAGE * circumference, [circumference, donutPercentage]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "ProgressDonut",
+    className: (0, _classify.default)(_ProgressDonutModule.default.wrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ProgressDonutModule.default.donutChart
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: LARGE_DONUT_SIZE,
+    height: LARGE_DONUT_SIZE,
+    viewBox: `0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`,
+    className: _ProgressDonutModule.default.donutChartSvg
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: _ProgressDonutModule.default.donutChartBackground,
+    cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
+    cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
+    r: radius,
+    strokeWidth: STROKE_WIDTH
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: _ProgressDonutModule.default.donutChartForeground,
+    cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
+    cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
+    r: radius,
+    strokeWidth: STROKE_WIDTH,
+    strokeDasharray: circumference,
+    strokeDashoffset: donutPercentage === MIN_PERCENTAGE ? circumference : offset,
+    stroke: COLORS[color] || donutColor,
+    strokeLinecap: "round"
+  })), /*#__PURE__*/React.createElement(_Text.BodyLargeBold, {
+    className: _ProgressDonutModule.default.donutChartPercentage
+  }, `${donutPercentage}%`)));
+});
+exports.ProgressDonut = ProgressDonut;

package/lib/components/ProgressDonut/ProgressDonut.js.flow

@@ -0,0 +1,111 @@
+// @flow strict
+
+import * as React from 'react';
+
+import * as COLORS from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import {BodyLargeBold} from '../Text';
+
+import css from './ProgressDonut.module.css';
+
+
+const STROKE_WIDTH = 8;
+const MIN_PERCENTAGE = 0;
+const DIVISOR_TWO = 2;
+const MAX_PERCENTAGE = 100;
+const SUCCESS_THRESHOLD = 80;
+const LARGE_DONUT_SIZE = 72;
+const INFO_THRESHOLD = 50;
+const WARNING_THRESHOLD = 30;
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
+export type ProgressDonutProps = {
+  classNames?: ClassNames,
+  color?: $Keys<typeof COLORS>,
+  percentage: number,
+};
+
+const getProgressDonutColor = (percentage: number): string => {
+  if (percentage >= SUCCESS_THRESHOLD) {
+    return COLORS.colorSuccess;
+  } else if (percentage >= INFO_THRESHOLD && percentage < SUCCESS_THRESHOLD) {
+    return COLORS.colorInformation;
+  } else if (percentage >= WARNING_THRESHOLD && percentage < INFO_THRESHOLD) {
+    return COLORS.colorWarning;
+  } else {
+    return COLORS.colorDanger;
+  }
+};
+
+export const ProgressDonut: React$AbstractComponent<
+  ProgressDonutProps,
+  HTMLDivElement,
+> = React.forwardRef<ProgressDonutProps, HTMLDivElement>(
+  ({classNames, percentage = 0, color = ''}: ProgressDonutProps, ref) => {
+    const donutPercentage = React.useMemo(
+      () => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE),
+      [percentage],
+    );
+    const donutColor = React.useMemo(
+      () => getProgressDonutColor(donutPercentage),
+      [donutPercentage],
+    );
+
+    const radius = React.useMemo(
+      () => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO,
+      [LARGE_DONUT_SIZE],
+    );
+    const circumference = React.useMemo(
+      () => DIVISOR_TWO * Math.PI * radius,
+      [radius],
+    );
+    const offset = React.useMemo(
+      () => circumference - (donutPercentage / MAX_PERCENTAGE) * circumference,
+      [circumference, donutPercentage],
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-testid="ProgressDonut"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <div className={css.donutChart}>
+          <svg
+            width={LARGE_DONUT_SIZE}
+            height={LARGE_DONUT_SIZE}
+            viewBox={`0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`}
+            className={css.donutChartSvg}
+          >
+            <circle
+              className={css.donutChartBackground}
+              cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              r={radius}
+              strokeWidth={STROKE_WIDTH}
+            />
+            <circle
+              className={css.donutChartForeground}
+              cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              r={radius}
+              strokeWidth={STROKE_WIDTH}
+              strokeDasharray={circumference}
+              strokeDashoffset={
+                donutPercentage === MIN_PERCENTAGE ? circumference : offset
+              }
+              stroke={COLORS[color] || donutColor}
+              strokeLinecap="round"
+            />
+          </svg>
+          <BodyLargeBold className={css.donutChartPercentage}>
+            {`${donutPercentage}%`}
+          </BodyLargeBold>
+        </div>
+      </div>
+    );
+  },
+);

package/lib/components/ProgressDonut/ProgressDonut.module.css

@@ -0,0 +1,45 @@
+@value (
+  borderRadiusSmall
+) from '../../styles/variables/_border.css';
+@value (spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
+@value (size10, size20, sizeFluid) from
+  '../../styles/variables/_size.css';
+@value (
+  colorBorderPrimary,
+  colorBackgroundSecondary,
+  colorBackgroundPrimary
+) from '../../styles/variables/_color.css';
+@value (motionDurationSlower) from
+'../../styles/variables/_motion.css';
+
+.donutChart {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  background-color: colorBackgroundPrimary;
+}
+
+.donutChartSvg {
+  transform: rotate(-90deg);
+}
+
+.donutChartBackground,
+.donutChartForeground {
+  fill: none;
+}
+
+.donutChartBackground {
+  stroke: colorBackgroundSecondary;
+}
+
+.donutChartForeground {
+  transition: stroke-dashoffset motionDurationSlower;
+}
+
+.donutChartPercentage {
+  position: absolute;
+  top: spaceHalfFluid;
+  left: spaceHalfFluid;
+  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid);
+}

package/lib/components/ProgressDonut/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ProgressDonut = require("./ProgressDonut");
+Object.keys(_ProgressDonut).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ProgressDonut[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ProgressDonut[key];
+    }
+  });
+});

package/lib/components/ProgressDonut/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './ProgressDonut';

package/lib/components/index.js

@@ -432,6 +432,17 @@ Object.keys(_Panel).forEach(function (key) {
     }
   });
 });
+var _ProgressDonut = require("./ProgressDonut");
+Object.keys(_ProgressDonut).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ProgressDonut[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ProgressDonut[key];
+    }
+  });
+});
 var _RadioButton = require("./RadioButton");
 Object.keys(_RadioButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -39,6 +39,7 @@ export * from './OptionButton';
 export * from './PageTitle';
 export * from './Pagination';
 export * from './Panel';
+export * from './ProgressDonut';
 export * from './RadioButton';
 export * from './SearchInput';
 export * from './Shimmer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.112",
+  "version": "0.1.113",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {