@trackunit/react-components 0.0.50 → 0.0.53

package/components/NumberField/NumberField.d.ts

@@ -10,5 +10,12 @@ export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProp
      */
     errorMessage?: string;
 }
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/badge/Badge.d.ts

@@ -64,7 +64,11 @@ interface BaseBadgeProps extends CommonProps {
 }
 export declare type BadgeProps = BaseBadgeProps | TagProps;
 /**
- * The Badge component us used to display states or similar short form information.
+ * The Badge component us used to display states or similar short informative text.
+ *
+ * _**Do use** badges to show highlighted text based on the state._
+ *
+ * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component

package/components/indicator/Indicator.d.ts

@@ -4,31 +4,29 @@ import { Colors } from "../../constants/colors";
 export interface IndicatorProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
-     *
-     * @memberof IndicatorProps
      */
     icon: JSX.Element;
     /**
      * A color token used to style the icon and the icon background
-     *
-     * @memberof IndicatorProps
      */
     color?: Colors;
     /**
      * A text label to be displayed next to the indicator
-     *
-     * @memberof IndicatorProps
      */
     label?: string;
     /**
      * A boolean parameter to display or hide icon background, default value is true
-     *
-     * @memberof IndicatorProps
      */
     withBackground?: boolean;
 }
 /**
- * The Indicator components are non-interactive elements that communicate essential aspects of the state of an asset.
+ * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * Whenever an asset is presented, indicators provide the necessary information for a user to comprehend the state of the asset.
+ *
+ * _**Do use** indicators to communicate essential aspects of the state of an asset._
+ *
+ * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
  *
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component

package/components/spinner/Spinner.d.ts

@@ -22,7 +22,15 @@ export interface SpinnerProps extends CommonProps {
     containerClassName?: string;
 }
 /**
- * The Spinner component should be used st show a loading state.
+ * The spinner component provides visual feedback that data is being processed.
+ *
+ * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
+ *
+ * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+ *
+ * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
+ *
+ * Use when retrieving or refreshing small data amounts, such as status.
  *
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component

package/components/textField/TextField.d.ts

@@ -17,5 +17,12 @@ export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
      */
     errorMessage?: string;
 }
+/**
+ * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
+ *
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/index.js

@@ -81,7 +81,15 @@ function __rest(s, e) {
 }
 
 /**
- * The Spinner component should be used st show a loading state.
+ * The spinner component provides visual feedback that data is being processed.
+ *
+ * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
+ *
+ * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+ *
+ * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
+ *
+ * Use when retrieving or refreshing small data amounts, such as status.
  *
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
@@ -670,7 +678,8 @@ const Alert = ({
     className: className,
     "data-testid": dataTestId,
     "$inline": inline,
-    ref: ref
+    ref: ref,
+    role: "alert"
   }, {
     children: [jsx(IconContainer, Object.assign({
       "$inline": inline
@@ -754,7 +763,11 @@ const IconContainer = tw.div`
 `;
 
 /**
- * The Badge component us used to display states or similar short form information.
+ * The Badge component us used to display states or similar short informative text.
+ *
+ * _**Do use** badges to show highlighted text based on the state._
+ *
+ * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
@@ -1308,6 +1321,8 @@ const Chart = ({
   timezoneLabel,
   renderer = "canvas"
 }) => {
+  var _a, _b;
+
   const echartsRef = React.useRef(null);
   const eventHandlers = React.useMemo(() => {
     const values = {};
@@ -1345,28 +1360,13 @@ const Chart = ({
       }
     };
   }, [onClick, echartsRef]);
-
-  const getTypesafeDimension = dimension => {
-    if (typeof dimension === "string") {
-      return dimension;
-    } else if (typeof dimension === "number") {
-      return `${dimension}px`;
+  return jsx(ChartContainer, Object.assign({
+    style: {
+      height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px",
+      width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%"
     }
-
-    return "auto";
-  };
-
-  const classDimensions = React.useMemo(() => {
-    var _a, _b;
-
-    const height = (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px";
-    const width = (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%";
-    return `h-[${getTypesafeDimension(height)}] w-[${getTypesafeDimension(width)}]`;
-  }, [style === null || style === void 0 ? void 0 : style.height, style === null || style === void 0 ? void 0 : style.width]);
-  return jsx(ChartContainer, {
-    children: showLoading ? jsxs(SpinnerContainer, Object.assign({
-      dimensions: classDimensions
-    }, {
+  }, {
+    children: showLoading ? jsxs(SpinnerContainer, {
       children: [jsx(Spinner, {
         centered: true
       }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && jsx(Text, Object.assign({
@@ -1375,7 +1375,7 @@ const Chart = ({
       }, {
         children: loadingOption.text
       }))]
-    })) : jsxs(Fragment, {
+    }) : jsxs(Fragment, {
       children: [jsx(EChart, {
         ref: echartsRef,
         option: options,
@@ -1391,11 +1391,10 @@ const Chart = ({
         onChartReady: onChartReady
       }), timezoneLabel]
     })
-  });
+  }));
 };
 const SpinnerContainer = tw.div`
   chart-spinner-container
-  ${p => `${p.dimensions}`}
 `;
 const ChartContainer = tw.div`
   chart-container
@@ -2472,7 +2471,13 @@ const HelpAddon = tw.span`
 `;
 
 /**
- * The Indicator components are non-interactive elements that communicate essential aspects of the state of an asset.
+ * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * Whenever an asset is presented, indicators provide the necessary information for a user to comprehend the state of the asset.
+ *
+ * _**Do use** indicators to communicate essential aspects of the state of an asset._
+ *
+ * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
  *
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
@@ -2483,7 +2488,7 @@ const Indicator$1 = _a => {
     dataTestId,
     icon,
     label,
-    color,
+    color = colors.UNKNOWN,
     withBackground = true
   } = _a,
       rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
@@ -3255,6 +3260,14 @@ const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
 }, props)));
 NumberInput.displayName = "NumberInput";
 
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+
 const NumberField = forwardRef((_a, ref) => {
   var {
     label,
@@ -3997,6 +4010,14 @@ const Root = tw.span`
  font-mono
 `;
 
+/**
+ * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
+ *
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+
 const TextField = React.forwardRef((_a, ref) => {
   var {
     label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.50",
+  "version": "0.0.53",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {