@trackunit/react-components 0.0.75 → 0.0.77

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: {
@@ -4179,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,
@@ -4379,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$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, 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,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {
@@ -21,7 +21,8 @@
     "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",