@trackunit/react-components 0.0.74-alpha-e5eca93e1.0 → 0.0.77

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-interface RadioGroupProps extends CommonProps {
+export interface RadioGroupProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
     /**
      */
     children: React.ReactNode;
@@ -32,12 +32,25 @@ interface RadioGroupProps extends CommonProps {
      * Whether the radio group is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * An boolean flag to set invalid mode
+     * can be used for handling errors
+     */
+    isInvalid?: boolean;
 }
 /**
- * The RadioGroup component.
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
  *
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {JSX.Element} RadioGroup component
  */
-export declare const RadioGroup: ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, }: RadioGroupProps) => JSX.Element;
-export {};
+export declare const RadioGroup: {
+    ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, isInvalid, }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};

package/components/RadioGroup/RadioGroupContext.d.ts

@@ -4,6 +4,7 @@ interface RadioGroupContextProps {
     name: string;
     value: string | number;
     disabled?: boolean;
+    isInvalid?: boolean;
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
 }
 export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;

package/components/RadioGroup/RadioItem.d.ts

@@ -9,6 +9,10 @@ interface RadioItemProps extends CommonProps {
      * The value of the radio item.
      */
     value: string | number;
+    /**
+     * The description of the radio item.
+     */
+    description?: string;
 }
 /**
  * The RadioItem component.
@@ -16,5 +20,5 @@ interface RadioItemProps extends CommonProps {
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {JSX.Element} RadioItem component
  */
-export declare const RadioItem: ({ label, value, dataTestId, className }: RadioItemProps) => JSX.Element;
+export declare const RadioItem: ({ label, value, dataTestId, className, description }: RadioItemProps) => JSX.Element;
 export {};

package/components/Timeline/Timeline.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+export interface TimelineProps extends CommonProps {
+    children: React.ReactNode;
+}
+/**
+ * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
+ * - with an indicator (dot)
+ * - a header (next to the dot)
+ * - and a body.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+export declare const Timeline: ({ className, dataTestId, children }: TimelineProps) => JSX.Element;
+interface TimeLineElementProps extends CommonProps {
+    date: Date;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    dot?: React.ReactNode;
+}
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+export declare const TimelineElement: ({ date, children, className, dataTestId, dot, header, }: TimeLineElementProps) => JSX.Element;
+export {};

package/components/index.d.ts

@@ -33,6 +33,7 @@ export * from "./Text";
 export * from "./TextArea";
 export * from "./TextField";
 export * from "./TextInput/TextInput";
+export * from "./Timeline/Timeline";
 export * from "./Tip";
 export * from "./Toggle";
 export * from "./Tooltip";

package/index.js

@@ -17,6 +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';
 
 const docs = {
   source: {
@@ -649,7 +650,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$1, Object.assign({
+    })), children && jsx(Description$2, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -660,7 +661,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$1, Object.assign({
+    })), children && jsx(Description$2, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -749,7 +750,7 @@ const Container$7 = tw.div`
 const Content$2 = tw.div`
   ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
-const Description$1 = tw(Text)`
+const Description$2 = tw(Text)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
@@ -1502,7 +1503,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
       onKeyPress: onKeyPress
     }, {
       children: icon
-    })), label && jsx(Label$4, Object.assign({
+    })), label && jsx(Label$5, Object.assign({
       ref: internalRef,
       htmlFor: uuid,
       "$disabled": isReadonly,
@@ -1550,7 +1551,7 @@ const HiddenInput$1 = tw.input`
 const CheckboxContainer = tw.label`
   tu-checkbox--container group
 `;
-const Label$4 = tw.label`
+const Label$5 = tw.label`
 tu-checkbox__label
 ${({
   $disabled
@@ -2491,7 +2492,7 @@ const Indicator$1 = _a => {
       "$withBackground": withBackground
     }, {
       children: icon
-    })), label !== undefined && jsx(Label$3, Object.assign({
+    })), label !== undefined && jsx(Label$4, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
@@ -2560,7 +2561,7 @@ const IconBackground = tw.div`
   return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
-const Label$3 = tw.div`
+const Label$4 = tw.div`
   tu-indicator__label
 `;
 
@@ -2573,7 +2574,7 @@ const Label$3 = tw.div`
  * @returns {JSX.Element} Label component
  */
 
-const Label$2 = ({
+const Label$3 = ({
   id,
   htmlFor,
   label,
@@ -2595,14 +2596,14 @@ const Label$2 = ({
       htmlFor: htmlFor
     }, {
       children: labelElement
-    })), jsx(Description, Object.assign({
+    })), jsx(Description$1, Object.assign({
       subtle: true
     }, {
       children: description
     }))]
   });
 };
-const Description = tw(Text)`
+const Description$1 = tw(Text)`
   tu-label
 `;
 
@@ -2634,7 +2635,7 @@ const LegendItem = ({
       style: {
         backgroundColor: color
       }
-    }), jsx(Label$1, {
+    }), jsx(Label$2, {
       children: label
     })]
   }));
@@ -2657,7 +2658,7 @@ const Indicator = tw.span`
   rounded-[50%]
   mr-2
 `;
-const Label$1 = tw.span`
+const Label$2 = tw.span`
   text-sm
 `;
 
@@ -2717,7 +2718,7 @@ const MenuItem = ({
     onClick: onClick
   }, {
     children: jsxs(Content, {
-      children: [jsx(Label, {
+      children: [jsx(Label$1, {
         children: label
       }), icon && jsx(Icon, {
         children: icon
@@ -2734,7 +2735,7 @@ const Content = tw.div`
 const Icon = tw.div`
   tu-menuItem__icon
 `;
-const Label = tw.div`
+const Label$1 = tw.div`
   tu-menuItem__label
 `;
 
@@ -3450,7 +3451,13 @@ const Prompt = ({
 const RadioGroupContext = React.createContext(null);
 
 /**
- * The RadioGroup component.
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
  *
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {JSX.Element} RadioGroup component
@@ -3466,37 +3473,38 @@ const RadioGroup = ({
   label,
   inline,
   className,
-  dataTestId
+  dataTestId,
+  isInvalid
 }) => {
-  return jsxs(Flex, Object.assign({
-    "$inline": inline,
-    className: className,
-    "data-testid": dataTestId
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    dataTestId: `${dataTestId}-FormGroup`
   }, {
-    children: [label && jsx(Text, Object.assign({
-      subtle: true,
-      size: "small"
-    }, {
-      children: label
-    })), jsx(RadioGroupContext.Provider, Object.assign({
-      value: {
-        id,
-        value,
-        name: name || id,
-        onChange,
-        disabled
-      }
+    children: jsx(Flex, Object.assign({
+      "$inline": inline,
+      className: className,
+      "data-testid": dataTestId
     }, {
-      children: children
-    }))]
+      children: jsx(RadioGroupContext.Provider, Object.assign({
+        value: {
+          id,
+          value,
+          name: name || id,
+          onChange,
+          disabled,
+          isInvalid
+        }
+      }, {
+        children: children
+      }))
+    }))
   }));
 };
+RadioGroup.displayName = "RadioGroup";
 const Flex = tw.div`
-  flex
-  gap-2
-  ${({
+${({
   $inline
-}) => $inline ? tws`flex-row items-center` : tws`flex-col items-start`}
+}) => $inline ? tws`tu-radiogroup--inline` : tws`tu-radiogroup`}
 `;
 
 /**
@@ -3510,37 +3518,71 @@ const RadioItem = ({
   label,
   value,
   dataTestId,
-  className
+  className,
+  description
 }) => {
   const groupCtx = React.useContext(RadioGroupContext);
   const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
+  const uuid = v4();
   return jsxs(CustomFlex, Object.assign({
     className: className
   }, {
-    children: [jsx("input", {
-      id: `${label}_${value}`,
-      type: "radio",
-      className: "hover:cursor-pointer",
-      value: value,
-      checked: isChecked,
-      disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
-      onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
-      "data-testid": dataTestId
-    }), jsx("label", Object.assign({
-      className: "w-full hover:cursor-pointer",
-      htmlFor: `${label}_${value}`
-    }, {
-      children: typeof label === "string" ? jsx(Text, {
+    children: [jsxs(InputWrapper, {
+      children: [jsx(Input, {
+        id: uuid,
+        type: "radio",
+        value: value,
+        checked: isChecked,
+        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+        "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid,
+        onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange,
+        "data-testid": dataTestId,
+        "$checked": isChecked
+      }), jsx(Label, Object.assign({
+        htmlFor: uuid,
+        "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+        "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
+      }, {
         children: label
-      }) : label
+      }))]
+    }), description && jsx(Description, Object.assign({
+      htmlFor: uuid,
+      "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled,
+      "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid
+    }, {
+      children: description
     }))]
   }));
 };
 const CustomFlex = tw.div`
-  flex
-  items-center
-  gap-2
-  hover:cursor-pointer
+tu-radioitem_custom_flex
+`;
+const InputWrapper = tw.div`
+tu-radioitem_wrapper
+`;
+const Input = tw.input`
+tu-radioitem
+${({
+  $checked
+}) => $checked ? tws`tu-radioitem--checked` : tws``}
+${({
+  $disabled
+}) => $disabled ? tws`tu-radioitem--disabled` : tws``}
+${({
+  $isInvalid
+}) => $isInvalid ? tws`tu-radioitem--invalid` : tws``}
+`;
+const Label = tw.label`
+tu-radioitem__label
+${({
+  $isInvalid
+}) => $isInvalid ? tws`tu-radioitem__label--invalid` : tws``}
+${({
+  $disabled
+}) => $disabled ? tws`tu-radioitem__label--disabled` : tws``}
+`;
+const Description = tw.label`
+tu-radioitem__description
 `;
 
 /**
@@ -3564,7 +3606,7 @@ const SelectContainer = ({
   return jsxs(Container, Object.assign({
     "data-testid": dataTestId
   }, {
-    children: [label && !hideLabel && jsx(Label$2, {
+    children: [label && !hideLabel && jsx(Label$3, {
       label: label,
       htmlFor: id !== null && id !== void 0 ? id : false,
       description: description
@@ -3969,7 +4011,7 @@ const TextArea = React.forwardRef(({
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [jsx(Label$2, {
+    children: [jsx(Label$3, {
       htmlFor: id !== null && id !== void 0 ? id : false,
       id: id,
       label: label,
@@ -4138,6 +4180,77 @@ const TextField = React.forwardRef((_a, ref) => {
   }));
 });
 
+/**
+ * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
+ * - with an indicator (dot)
+ * - a header (next to the dot)
+ * - and a body.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+
+const Timeline = ({
+  className,
+  dataTestId,
+  children
+}) => {
+  return jsx("ol", Object.assign({
+    className: `${className !== null && className !== void 0 ? className : ""}  ${tws`tu-timeline`}`,
+    "data-testid": dataTestId
+  }, {
+    children: children
+  }));
+};
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+
+const TimelineElement = ({
+  date,
+  children,
+  className,
+  dataTestId = "timeline-date",
+  dot = jsx(Indicator$1, {
+    className: tws`mt-[-1px]`,
+    color: "neutral",
+    icon: jsx(Icon$1, {
+      name: "CalendarIcon",
+      size: "large"
+    })
+  }),
+  header = jsx(ReactMoment, Object.assign({
+    format: "LLL",
+    fromNow: true
+  }, {
+    children: date
+  }))
+}) => {
+  var _a;
+
+  return jsxs("li", Object.assign({
+    className: `${tws`tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `,
+    "data-date": `${date}`,
+    "data-testid": `${dataTestId}`
+  }, {
+    children: [jsx("div", Object.assign({
+      className: tws`tu-timeline-element-dot`
+    }, {
+      children: dot
+    })), jsx("div", {
+      children: header
+    }), jsx("div", {}), jsx("div", {
+      children: jsx("div", {
+        children: children
+      })
+    })]
+  }));
+};
+
 const Toggle = React.forwardRef(({
   toggled = false,
   onChange,
@@ -4338,4 +4451,4 @@ const useTimeout = ({
   };
 };
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,27 +1,28 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.74-alpha-e5eca93e1.0",
+  "version": "0.0.77",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {
-    "@trackunit/css-core": "0.0.46-alpha-e5eca93e1.0",
-    "@trackunit/tailwind-styled-components": "0.0.41-alpha-e5eca93e1.0",
+    "@trackunit/css-core": "0.0.45",
+    "@trackunit/tailwind-styled-components": "0.0.40",
     "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.40-alpha-e5eca93e1.0",
+    "@trackunit/ui-design-tokens": "0.0.39",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
-    "@react-spring/web": "^9.4.4",
+    "@react-spring/web": "^9.4.5",
     "react-use": "^17.3.2",
     "react-day-picker": "^8.0.3",
     "date-fns": "^2.28.0",
-    "@trackunit/ui-icons": "0.0.42-alpha-e5eca93e1.0",
+    "@trackunit/ui-icons": "0.0.41",
     "react-useportal": "^1.0.16",
     "react-helmet": "^6.1.0",
     "@popperjs/core": "^2.11.4",
     "history": "^5.3.0",
     "react-router-dom": "^6.2.2",
     "react-select": "^5.2.2",
-    "faker": "^5.5.3"
+    "faker": "^5.5.3",
+    "react-moment": "^1.1.2"
   },
   "module": "./index.js",
   "main": "./index.js",