@trackunit/react-components 0.0.101 → 0.0.104

package/components/Chart/Chart.d.ts

@@ -61,8 +61,11 @@ export interface ChartProps extends CommonProps {
 }
 /**
  * The Chart component is a wrapper component for ECharts.
+ *
  * Handles events and click functionality.
  *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */

package/components/CopyableText/CopyableText.d.ts

@@ -13,7 +13,7 @@ export interface CopyableTextProps extends CommonProps {
     alternativeText?: string;
 }
 /**
- * The CopyableText component is used where the user should have easy access to copy some information.
+ * The CopyableText component is used where the user should have easy access to copy information.
  *
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component

package/components/FormGroup/FormGroup.d.ts

@@ -26,7 +26,7 @@ export interface FormGroupProps extends CommonProps {
 }
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplyes optional Tip, HelpText and HelpAddon support.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component

package/components/Spacer/Spacer.d.ts

@@ -1,21 +1,20 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common";
-interface SpacerProps extends CommonProps {
+export interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px).
      */
-    minHeight?: string;
+    minHeight?: "normal" | "large";
     /**
      * The border of the spacer.
      */
     border?: boolean;
 }
 /**
- * The Spacer component is used for adding a bit of space.
+ * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
 export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
-export {};

package/components/Tag/Tag.d.ts

@@ -25,11 +25,13 @@ export interface TagProps extends CommonProps {
     size?: TagSize;
 }
 /**
- * Tags allow users to enter information and filter content.
+ *  The tag component is used to categorize elements in the ui.
  *
- * Multiple or single tags can be used to categorise items.
+ *  This could be to tell the state of an asset, or label a page as Beta.
  *
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component

package/components/Text/Text.d.ts

@@ -47,7 +47,11 @@ export interface TextProps extends CommonProps {
     underline?: boolean;
 }
 /**
- * The Text component.
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
  *
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component

package/index.js

@@ -17,7 +17,7 @@ import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactSelect from 'react-select';
 import ReactAsyncSelect from 'react-select/async';
-import ReactMoment from 'react-moment';
+import { format, formatDistance } from 'date-fns';
 
 const docs = {
   source: {
@@ -494,7 +494,11 @@ const CustomIcon = tw(Icon$1)`
 `;
 
 /**
- * The Text component.
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
  *
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
@@ -796,7 +800,7 @@ const IconContainer$1 = tw.div`
 
 const Badge = _a => {
   var {
-    color = "neutral",
+    color = "danger",
     subtle = false,
     className,
     count,
@@ -1288,8 +1292,11 @@ const HeadingContainer = tw.div`
 
 /**
  * The Chart component is a wrapper component for ECharts.
+ *
  * Handles events and click functionality.
  *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
@@ -1686,7 +1693,7 @@ const StyledCollapsible = tw.div`
 `;
 
 /**
- * The CopyableText component is used where the user should have easy access to copy some information.
+ * The CopyableText component is used where the user should have easy access to copy information.
  *
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {JSX.Element} CopyableText component
@@ -1719,19 +1726,8 @@ const CopyableText = ({
   }));
 };
 const StyledCopyableText = tw.span`
-  py-1
-  px-2
-  border
-  border-dashed
-  border-neutral-600
-  rounded
-  cursor-pointer
-  inline
-  transition-all
-  ease-in-out
-  leading-7
-  break-words
-  ${p => p.$animating ? tws`animate-copy` : null}`;
+  tu-copyable-text
+  ${p => p.$animating ? tws`tu-copyable-text--animating` : null}`;
 
 const localeLookup = {
   en: enGB,
@@ -2334,7 +2330,7 @@ const TipContainer = tw.span`
 
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
- * Besides a label the component supplyes optional Tip, HelpText and HelpAddon support.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
  *
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
@@ -3097,34 +3093,15 @@ const NumberField = forwardRef((_a, ref) => {
   }));
 });
 
-const GetSpacerHeight = () => ({
-  minHeight
-}) => {
-  if (!minHeight) {
-    return "";
-  }
-
-  switch (minHeight) {
-    case "normal":
-      return tws`min-h-[8px]`;
-
-    case "large":
-      return tws`min-h-[32px]`;
-
-    default:
-      return "";
-  }
-};
 /**
- * The Spacer component is used for adding a bit of space.
+ * The Spacer component is used for adding a bit of space in the ui.
  *
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {JSX.Element} Spacer component
  */
 
-
 const Spacer = ({
-  minHeight = "",
+  minHeight,
   border,
   dataTestId
 }) => {
@@ -3134,17 +3111,35 @@ const Spacer = ({
     border: border
   });
 };
+
+const GetSpacerHeight = () => ({
+  minHeight
+}) => {
+  switch (minHeight) {
+    case "normal":
+      return tws`tu-spacer--normal`;
+
+    case "large":
+      return tws`tu-spacer--large`;
+
+    default:
+      return "";
+  }
+};
+
 const Space = tw.div`
-${p => `${p.border ? `tu-spacer--border` : null}`}
-${GetSpacerHeight()}
+  ${p => `${p.border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
 `;
 
 /**
- * Tags allow users to enter information and filter content.
+ *  The tag component is used to categorize elements in the ui.
  *
- * Multiple or single tags can be used to categorise items.
+ *  This could be to tell the state of an asset, or label a page as Beta.
  *
- * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
  *
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
@@ -3773,12 +3768,12 @@ const SkeletonLines = memo(({
   for (let i = 0; i < lines; i++) {
     skeletonLines.push(jsx(SkeletonLine, Object.assign({
       "data-testid": dataTestId,
-      margin: margin,
       "data-type": "loading-skeleton-line",
       className: className,
       style: {
         height: getHeight(i),
-        width: getWidth(i)
+        width: getWidth(i),
+        margin: margin
       }
     }, {
       children: "\u00A0"
@@ -4054,12 +4049,9 @@ const TimelineElement = ({
       size: "large"
     })
   }),
-  header = jsx(ReactMoment, Object.assign({
-    format: "LLL",
-    fromNow: true
-  }, {
-    children: date
-  }))
+  header = `${format(date, "MMM d, yyyy")} (${formatDistance(date, new Date(), {
+    addSuffix: true
+  })})`
 }) => {
   var _a;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.101",
+  "version": "0.0.104",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {
@@ -20,8 +20,7 @@
     "@popperjs/core": "^2.11.4",
     "history": "^5.3.0",
     "react-router-dom": "^6.2.2",
-    "react-select": "^5.4.0",
-    "react-moment": "^1.1.2"
+    "react-select": "^5.4.0"
   },
   "module": "./index.js",
   "main": "./index.js",